Create a Powerful Low‑Code Platform in 5 Minutes with Alibaba LowCodeEngine

LowCodeEngine Overview

LowCodeEngine is Alibaba's open‑source, enterprise‑grade low‑code technology stack designed for extensibility. Since its release in early 2023 it has attracted over 4.7K stars on GitHub.

Key characteristics include a highly extensible engine, minimal core, strong ecosystem, out‑of‑the‑box deployment, a complete material system, powerful configurator, rich plugins, a visual editor with a full toolchain, and TypeScript‑based generation of React front‑end code.

Setting Up the Low‑Code Platform

Follow these steps to create a low‑code development platform in about five minutes:

Download the LowCodeEngine demo from

https://github.com/alibaba/lowcode-demo

.

Extract the archive and ensure

Node.js

and

npm

are installed.

Because some npm registries are inaccessible, install

cnpm

via

<code>npm install -g cnpm --registry=https://registry.npmmirror.com</code>

.

Use

cnpm install

inside the extracted directory to install dependencies.

Start the project with

npm start

. The application runs on port

5556

and can be accessed at

http://localhost:5556

.

Using the Low‑Code Platform

To demonstrate the platform, we recreate a brand‑management feature from an existing e‑commerce project.

Target Effect

The goal is to implement a simple brand list using low‑code components.

Component Library

Select the

Query Filter

component from the component library and drag it onto the editor.

Configure the component using the right‑hand

Configurator

.

Open the component’s

Edit

panel to adjust appearance and input hints.

Drag a

Advanced Table

component into the editor.

Configure the table’s data columns by mapping JSON fields to the

Data Column

settings.

Data Source

Use the

Data Source

feature to call an API and populate the table. Set the request parameters and customize the success‑handler for

data.list

.

In the

Advanced Table

component, set the

Table Data Source

to an expression referencing the previously defined data‑source ID.

Adjust each column’s

Data Field

to match the corresponding property in the returned JSON.

Preview and Code Export

Click the

Preview

button to view the generated page.

Click the

Export Code

button to download the React source code produced by the low‑code engine.

Additional Features

The

Source Code Panel

allows custom functions to be added directly.

The

Outline View

provides a hierarchical view of the entire page structure.

Conclusion

LowCodeEngine offers a powerful, out‑of‑the‑box low‑code solution that generates React front‑end code. While it accelerates UI development, understanding the generated code remains essential for building complex business systems.

References

Project repository:

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

Official site:

https://lowcode-engine.cn/

Usage guide:

https://www.yuque.com/lce/usage