How Alibaba’s Open‑Source LowCodeEngine Accelerates Front‑End Development

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

Features

Derived from an enterprise‑grade low‑code platform kernel designed for extensibility, adhering to a minimal core and strong ecosystem philosophy.

Out‑of‑the‑box high‑quality ecosystem elements, including material system, configurators, and plugins.

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

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

Developed with TypeScript and provides complete type definition files.

The engine fully implements the Low‑Code Engine Build Protocol and the Low‑Code Engine Material Protocol , which are key to material interoperability 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.

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: custom CDN – upload the files under packages/engine/dist and packages/(react|rax)-simulator-renderer/dist to your CDN provider.

UI Functions

The low‑code editor includes several functional panels:

Material Panel

Search and drag components onto the canvas.

Outline Panel

Adjust the component tree structure within the page.

Source Panel

Edit page‑level JavaScript and CSS configurations.

Schema Editing

Developers can edit the underlying Schema data of the page.

Canvas Editing Area

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

Drag components to reorder them.

Drag components into container components, with real‑time tree hints.

Property Panel

Set basic property values of components.

Style Panel

Configure component styles such as text.

Event Panel

Bind events exposed by components.

Advanced Panel

Configure loops, conditional rendering, and key settings.

Cases

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

Parts ZaoWu is Alibaba’s product for low‑code material management, integration, and development.

Portal

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