How to Leverage Alibaba’s LowCodeEngine for Rapid Frontend Development

LowCodeEngine Overview

LowCodeEngine is an open‑source low‑code engine from Alibaba’s DingTalk team, fully compliant with Alibaba’s backend‑frontend construction and material protocols. It supports modern browsers Chrome ≥80, Edge ≥80, Safari and the latest two versions of Firefox.

Key Features

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

📦 Ready‑to‑use material system, settings panel, plugins, etc.

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

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

🛡 Developed with TypeScript and provides full type definitions.

Engine Protocols

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

Installation & Usage

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

TIPS: Only CDN import is supported; the npm package provides typings.

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

Webpack / External Config

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

CDN Options

Alifd CDN (recommended)

unpkg

jsDelivr

Custom CDN – upload the engine and simulator files to your CDN.

Editor UI Components

The low‑code editor includes panels such as Material Panel (search and drag components), Outline Panel (adjust component tree), Source Panel (edit page‑level JavaScript and CSS), Schema Editor, Canvas, Property, Style, Event, and Advanced settings (loops, conditional rendering, keys).

Case Studies

DingTalk Yida and Parts ZaoWu are Alibaba’s own low‑code platforms built with this engine.

Open‑Source Details

License: MIT

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