LowCodeEngine: An Open‑Source Low‑Code Engine from Alibaba DingTalk Team

LowCodeEngine is an open‑source low‑code engine created by Alibaba's DingTalk team, fully compliant with the Alibaba Backend‑Frontend Construction Protocol Specification and the Alibaba Backend‑Frontend Material Protocol Specification . It works on major browsers: Chrome >= 80 , Edge >= 80 , Safari , and the latest two versions of Firefox .

Features

🌈 Extracted from an enterprise‑grade low‑code platform, the core engine is designed for extensibility with a minimal kernel and a strong ecosystem.

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

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

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

🛡 Developed with TypeScript and provides full type definition files.

Engine Protocols

The engine fully implements the Low‑Code Engine Construction Protocol Specification and the Low‑Code Engine Material Protocol Specification , which are critical for material circulation in the low‑code domain.

Usage Example

npm install @alilc/lowcode-engine --save-dev

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

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'));

Engineering Configuration

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

CDN Options

Option 1 (recommended): alifd CDN

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

Option 2: unpkg

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

Option 3: jsDelivr

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

Option 4: Your own CDN – upload the files under packages/engine/dist and packages/(react|rax)-simulator-renderer/dist to your CDN provider.

UI Features

The low‑code editor includes the following panels and capabilities:

Material Panel

Search for components and drag them onto the canvas.

Outline Panel

Adjust the component tree structure of the page.

You can also open or close modal overlays from here.

Source Panel

Edit page‑level JavaScript and CSS configurations.

Schema Editing

Developers can edit the underlying Schema data of a page.

Combined with the top‑area “Save to Local” and “Reset Page” functions, you can experiment with various schema changes.

Canvas Editing Area

Select a component to view its property configuration on the right panel.

Drag components to rearrange their order.

Drop components into container‑type components; the right side will show the current component tree during dragging.

Properties

Set basic property values of components.

Style

Configure component styles such as text.

Events

Bind events exposed by components.

Advanced

Loop, conditional rendering, and key settings.

Case Studies

DingTalk Yida is Alibaba's self‑developed low‑code application development platform.

Parts ZaoWu is Alibaba's self‑developed low‑code material management, integration, and development product.

Resources

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

Source: Open‑Source Technology Column (ID: GitHubKY)