Explore Alibaba’s LowCodeEngine: Features, Setup, and Real-World Use

Features

🌈 Derived from an enterprise‑grade low‑code platform, designed for extensibility with a minimal core and strong ecosystem.

📦 Ready‑to‑use high‑quality ecosystem elements such as material system, configurator, and plugins.

⚙️ Complete toolchain supporting the full lifecycle of material, configurator, and plugin development.

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

🛡 Developed with TypeScript and provides full type definition files.

Engine Protocol

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

<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>

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.

UI Functions

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

Material Panel

Search and drag components onto the canvas.

Outline Panel

Adjust the component tree structure of the page.

Source Panel

Edit page‑level JavaScript and CSS.

Schema Editor

Directly edit the underlying Schema data of the page.

Canvas Editing

Select components to view and modify their properties on the right panel.

Drag components to reorder them or drop them into container components.

Properties

Set basic property values for components.

Styles

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 low‑code material management, integration, and development product.

Portal

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