How to Turn a Low‑Code Platform into a Zero‑Code Builder for Non‑Developers

Introduction

This article introduces how to upgrade an existing low‑code platform to achieve zero‑code development, allowing backend developers or non‑technical users to easily participate in page construction. It provides ideas and practices for both technical and non‑technical personnel to solve common business needs and improve efficiency.

Low‑Code Platform Implementation Idea

Simplified Effect

The author built a simple low‑code platform to illustrate basic design ideas and implementation schemes; the result is shown in the following image.

After completing the page on the builder side, the platform generates an application link that users can visit. The following sections describe how this process works.

Component List (Materials)

The component list is part of the material set exposed to users for selection; it represents the collection of low‑code components provided for building and is the core of the platform.

To ensure uniqueness and consistent display between the builder and user pages, each component must follow the same protocol.

Example of the Title component:

Title component unique identifier

PropComponent: stores component configuration in props, customizable via the right‑hand panel

Component: JSX rendering of the component

defaultProps: default properties when the component is initialized

// title component configuration
export default {
  /** title */
  title: '标题',
  /** component type */
  type: 'questionTitle',
  /** right‑hand props */
  PropComponent,
  /** component JSX */
  Component,
  /** default props */
  defaultProps: QuestionTitleDefaultProps,
};

All other components follow the same pattern. Finally, all configured components are collected into an array and rendered on the page via ComponentLibs.

// unified component configuration type
type ComponentConfType = {
  /** component title */
  title: string,
  /** component type */
  type: string,
  /** right‑hand component */
  PropComponent: FC<ComponentPropsType>,
  /** component itself */
  Component: FC<ComponentPropsType>,
  /** component configuration */
  defaultProps: ComponentPropsType,
};

// list of all component configurations
const componentsConfList: ComponentConfType[] = [
  TitleConf,
  InputConf,
  ParagraphConf,
  InfoConf,
  TextAreaConf,
  RadioConf,
  CheckboxConf,
];

Components can be grouped (e.g., paragraph collection, input collection, selection collection) and displayed with group titles above each set.

// component configuration groups
export const componentConfGroup = [
  {
    groupId: 'text',
    groupName: '段落集合',
    component: [TitleConf, InfoConf, ParagraphConf],
  },
  {
    groupId: 'input',
    groupName: '输入框集合',
    component: [InputConf, TextAreaConf],
  },
  {
    groupId: 'radio',
    groupName: '选择框集合',
    component: [RadioConf, CheckboxConf],
  },
];

Generate Schema

After the user finishes building, the canvas components and their properties are described in JSON and sent to the server for storage. An example schema is shown below.

Inject JS/CSS code into the page

Render componentList on the page

Find the component material by type and render it props contain the current component's settings

Using the schema together with the material set generates the final page in the editor.

{
  "id": "150000199805273617",
  "title": "低代码项目标题",
  "desc": "低代码项目名称",
  "js": "alert('欢迎使用低代码平台');",
  "css": "body:{ width:100%; height:100%; }",
  "isPublished": true,
  "isDeleted": false,
  "componentList": [
    {
      "fe_id": "c1",
      "type": "questionInfo",
      "title": "信息",
      "isHidden": false,
      "isLocked": false,
      "props": {
        "title": "标题组件",
        "desc": "标题描述..."
      }
    }
    // ... other components
  ]
}

Low‑Code Build Protocol Specification

The material configuration objects share a unified structure, component IDs are unique, component types are consistent between material and schema, and the schema’s component description format is uniform. This standard ensures consistency across low‑code editors, enables cross‑platform component exchange, and improves semantic clarity and readability.

Real‑World Low‑Code Platforms

Building a low‑code platform from scratch is time‑consuming. In practice, developers can perform secondary development on open‑source low‑code engines such as Alibaba’s LowCodeEngine , which provides rich material and plugin systems and strong code‑generation capabilities that parse schemas into executable code.

By focusing on the schema for specific scenarios, the drag‑and‑drop step can be omitted, leading to a zero‑code solution.

Below is a demo that renders a page based on a schema.

import ReactRenderer from '@ali/lowcode-react-renderer';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';

const schema = {
  componentName: 'Page',
  props: {},
  children: [
    {
      componentName: 'Button',
      props: {
        type: 'primary',
        style: { color: '#2077ff' },
      },
      children: '确定',
    },
  ],
};

const App = () => <ReactRenderer schema={schema} components={{ Button }} />;

Although low‑code reduces development cost, backend developers still need some front‑end knowledge. To further lower the entry barrier, common pages (data query, list display, etc.) can be pre‑packaged so that they can be created without writing code—this is the “zero‑code” approach.

Upgrade to Zero‑Code

Use Cases

Typical high‑frequency pages such as visual charts, forms, and searchable tables can be built quickly using three zero‑code methods.

Introduce Templates

A page consists of components; a whole page can be treated as a large component. By viewing a page’s schema as a template, users only need to provide the required props during the building phase.

For example, a “search page with operations” template can be selected, and the user only modifies form fields and API endpoints.

Interface Customization

Interface customization identifies the queryList returned by an API, parses each field, maps it to a component, and replaces the corresponding attributes in the template schema, thus eliminating manual component replacement.

{
  "code": 200,
  "data": {
    "list": [
      {
        "updatedTime": 1717492078000,
        "createdTime": 1717492078000,
        "path": "asd",
        "name": "123123",
        "userType": "driver",
        "id": 39367,
        "type": "invite"
      }
    ],
    "total": 100,
    "pageNo": 1,
    "pageSize": 20
  }
}

Each item in the list corresponds to a column in a table. By recognizing field types (string, boolean, number, date), appropriate input components can be assigned, and additional options such as enums, date formatting, or CRUD permissions can be configured. AI can assist in translating field names for table headers.

Integration

Previously, the workflow required developing backend APIs first, then selecting a template for building, which was unfriendly to newcomers. The integrated approach aims to provide one‑click generation of single‑table CRUD interfaces, allowing backend developers to build applications without front‑end involvement.

Introduce DB

Using GraphQL operations (paging, insertRecord, updateRecord, deleteRecord) enables CRUD actions directly in JavaScript, replacing traditional API calls.

Data Modeling Automation

Based on our front‑end building platform’s entity modeling capability, we can quickly generate data models from databases and tables.

DB configuration

Data model presets

All fields of a table are listed in a preset grid for custom settings, aiming to generate a schema.

Page Layout

Based on the model, pages are automatically generated. For special needs, drag‑and‑drop visual operations enable complex business application development.

Integrated Features

The integrated capability allows specific business scenarios to be launched quickly without additional front‑end or back‑end resources, further lowering the barrier compared to traditional low‑code solutions.

Application Scenarios

Backend management pages

One‑click front‑back generation

Backend API hosting + private download

Rapid H5 web app implementation (activities, dashboards, etc.)

Mass internal tool development

Conclusion

This article described the evolution from front‑end low‑code to zero‑code building platforms. After launching the Hualala low‑code platform, backend developers quickly generate applications, and the zero‑code approach reduces development time by 45% in specific scenarios, significantly improving the development experience. Front‑end engineers can focus on complex UI design and implementation.

References

[1] LowCodeEngine: https://lowcode-engine.cn/index