DynamicForm: A React‑Based Visual Dynamic Form Builder for Ctrip’s Lego Platform

Form development often suffers from repetitive manual coding, especially when component configuration forms must be built alongside the component logic, which hampers development speed and maintainability.

To address this, Ctrip’s senior R&D manager Daryl created DynamicForm, a visual drag‑and‑drop form builder built with React, Ant Design, and MobX, initially used by the Marketing Activity Platform and Membership Platform.

DynamicForm provides a visual designer, validation, preview, and rendering capabilities, enabling rapid creation of configuration forms for the Lego platform, which aims to generate H5 pages through component composition and configuration.

The system evolved from fully manual custom forms (Stage 1) to a semi‑automatic version (DynamicForm 1.0) lacking visual layout, and finally to DynamicForm 2.0, which supports rich control types (text, radio, checkbox, select, color picker, image upload, custom visual selectors, JSON configurators), DIY drag‑and‑drop layout, extensive control configuration (default values, required flags, hints, width, regex), and data binding for grouped and hierarchical data.

Key features include visual editing, draggable layout, extensibility for custom controls, inter‑control linkage, and support for complex data structures such as nested objects and arrays.

The architecture consists of two main modules: the Form Generator (editor) and the Form Viewer (renderer), sharing common base components while also offering business‑specific widgets like hotspot selectors and video uploaders.

DynamicForm also implements JSON visual configuration through a table‑style component that supports nested forms, CRUD operations, and Excel import/export, as well as expression‑based linkage to control visibility and other interactions.

Future plans are to publish DynamicForm as an independent npm package for broader use and to continue open‑sourcing the project for community collaboration.