Unlock Rapid UI Building with Alibaba’s LowCodeEngine: Features, Setup, and Demo

LowCodeEngine is an open‑source low‑code engine released by Alibaba’s DingTalk team that fully follows the Alibaba Backend‑Frontend Construction Protocol and Material Protocol, supporting major browsers such as Chrome ≥ 80, Edge ≥ 80, Safari, and the latest two versions of Firefox.

Features

🌈 Designed as an extensible kernel extracted from enterprise‑grade low‑code platforms, emphasizing a minimal core and a strong ecosystem.

📦 Ready‑to‑use high‑quality ecosystem elements including material system, configurators, and plugins.

⚙️ Comprehensive toolchain supporting the full development lifecycle of material system, configurators, and plugins.

🔌 Powerful extensibility, already powering over 100 diverse low‑code platforms.

🛡 Developed with TypeScript and provides complete type definition files.

Engine Protocols

The engine fully implements the Low‑Code Engine Building Protocol Specification and the Low‑Code Engine Material Protocol Specification , which are essential for material interoperability in the low‑code domain.

Usage Example

<code>npm install @alilc/lowcode-engine --save-dev</code>

TIPS: Only CDN import is supported; the npm package provides typings and code‑completion.

<code>import { init, skeleton } from '@alilc/lowcode-engine';

skeleton.add({
  area: 'topArea',
  type: 'Widget',
  name: 'logo',
  content: YourFantaticLogo,
  contentProps: {
    logo: 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
    href: '/',
  },
  props: {
    align: 'left',
    width: 100,
  },
});

init(document.getElementById('lce'));
</code>

Engineering Configuration

<code>{
  "externals": {
    "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
    "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt"
  }
}
</code>

These configurations enable external loading of the engine via CDN.

CDN Options

Option 1 (recommended): alifd CDN

<code>https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-core.js
https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/react-simulator-renderer.js</code>

Option 2: unpkg

<code>https://unpkg.com/@alilc/[email protected]/dist/js/engine-core.js
https://unpkg.com/@alilc/[email protected]/dist/js/react-simulator-renderer.js</code>

Option 3: jsdelivr

<code>https://cdn.jsdelivr.net/npm/@alilc/[email protected]/dist/js/engine-core.js
https://cdn.jsdelivr.net/npm/@alilc/[email protected]/dist/js/react-simulator-renderer.js</code>

Option 4: custom CDN – upload the files under

packages/engine/dist

and

packages/(react|rax)-simulator-renderer/dist

to your CDN provider.

Interface Features

The low‑code editor includes several functional panels:

Material Panel

Search and drag components onto the canvas.

Outline Panel

Adjust the component tree structure.

Source Code Panel

Edit page‑level JavaScript and CSS.

Schema Editing

Directly modify the underlying schema data of a page.

Canvas Editing

Select a component to view and edit its properties on the right panel.

Drag components to reorder or nest them within container components, with real‑time tree hints.

Properties Panel

Set basic attribute values for components.

Style Panel

Configure component styles such as text.

Event Panel

Bind external events exposed by components.

Advanced

Support loops, conditional rendering, and key settings.

Case Studies

DingTalk Yida – Alibaba’s self‑developed low‑code application platform.

Parts ZaoWu – Alibaba’s product for low‑code material management and integration.

Portal

Open‑source repository: https://github.com/alibaba/lowcode-engine

The related micro‑service project

mall‑swarm

on GitHub has 11K stars and a comprehensive 2024 video tutorial series (≈26 hours, 59 episodes) covering Spring Cloud core components, micro‑service implementation, and Kubernetes deployment.