LowCodeEngine: Features, Engine Protocol, Usage Examples, UI Functions, and Integration Guide

LowCodeEngine is an open‑source low‑code engine released by Alibaba's DingTalk team, fully compliant with the Alibaba Backend‑Frontend Construction Protocol and Material Protocol, and compatible with major browsers such as Chrome >= 80, Edge >= 80, Safari, and recent Firefox versions.

Features

Designed as a minimal core with a strong ecosystem, distilled from enterprise‑grade low‑code platforms.

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

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

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

Developed with TypeScript and provides complete 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 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 hints.

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

Recommended method (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

Alternative methods: unpkg and jsdelivr URLs, or using a custom CDN by uploading the packages/engine/dist and packages/(react|rax)-simulator-renderer/dist files.

UI Functions

The low‑code editor provides several panels:

Material Panel : Search and drag components onto the canvas.

Outline Panel : Adjust component hierarchy and toggle modal visibility.

Source Panel : Edit page‑level JavaScript and CSS.

Schema Editor : Directly edit the underlying schema data.

Canvas Area : View and modify component properties, styles, events, and advanced features such as loops, conditional rendering, and key settings.

Case Studies

DingTalk Yida is Alibaba's own low‑code application development platform, and Parts造物 is a product for low‑code material management, integration, and development.

Open‑Source Repository

GitHub: https://github.com/alibaba/lowcode-engine

Community

A dedicated architect community group is available; readers can add the editor’s WeChat for group entry.