Moyu Page Builder: Architecture, Schema Design, and Implementation for Xianyu Frontend

Moyu Page Builder is a front‑end visual page construction tool used in the Xianyu platform. It enables operations staff to modify page content and configure dynamic data without developer involvement.

The main objectives are to boost front‑end development efficiency, provide configurable dynamic data sources for first‑screen performance, and allow operations to intervene accurately in data placement.

Architecturally, the editor links several back‑end services—configuration forms, gateway for dynamic data, and the rendering engine. It follows the PMT (Page‑Module‑Tag) model and a strategy layer that binds tags with scheduling models.

The underlying domain model (PMT) defines a Page, its Modules, and each Module’s Tag (resource slot). A scheduling strategy model determines which page version is served based on time, weight, and audience.

Operations fill data through forms described by { "title": "腰通banner", "type": "object", "properties": { "picUrl": { "type": "image", "title": "图片链接", "x-format": "@image(750,220)", "x-required": true }, "url": { "type": "string", "title": "跳转链接", "x-format": "@url()", "x-required": true } } } which defines a banner image and its link.

Key pain points include heavy collaboration overhead between developers and operations, and the verbosity of raw JSON Schema (often >100 lines for complex forms).

To address these, the team adopted Alibaba’s open‑source Formily, extending JSON Schema to map type fields to Ant Design components. The component mapping is defined as: export const SchemaField = createSchemaField({ components: { image: Image, string: Input, boolean: Switch, array: ArrayTable, color: Color, time: TimePicker, cards: ArrayCards, date: DateTime, daterange: DatePicker.RangePicker, textarea: Input.TextArea, number: NumberPicker, radio: Radio.Group, plugin: Plugin, select: Select, // UI components FormCollapse, FormGrid, FormLayout, FormItem, copy: CopyItem, // ... } });

Custom validation is added via x-format and x-validator . For image validation the handler looks like: const handler = { ... image: ({ dimension, format, minSize, maxSize, uploaderOptions, action }) => { return { 'x-component': 'image', 'x-component-props': { dimension, format, minSize, maxSize, uploaderOptions, action }, 'x-validator': async (value) => { return checkImage({ dimension, format, src: value }); } }; }, ... };

Array handling is simplified with a concise schema example: listDemo: { type: 'array', title: '商品列表', items: { type: 'object', properties: { // fields for each product } } } which renders an array form with add/delete/reorder controls.

To improve developer experience, a tnpm package and a VS Code plugin were released, offering live preview of schema‑driven forms and snippet support for the Xianyu schema conventions.

The scheduling strategy adds time‑travel preview and crowd‑targeted scheduling, allowing operations to test page variations at future timestamps.

In summary, many Xianyu pages have migrated to the MoYu system, reducing operational cost, improving first‑screen performance, and demonstrating a low‑code approach that enhances code reuse and development speed.