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

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

.

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