Build Drag‑And‑Drop Form Designers with Formily: Architecture & JSON Schema

Background

In console‑type web applications, forms are the most common interaction pattern. Traditionally, developers manually code each field, later abstracting common logic into reusable form libraries. As business complexity grows, static libraries become insufficient, prompting the need for a visual form designer that lets users build and update forms without code.

Form Designer Layout

Left pane: a list of supported form controls.

Center pane (canvas): where controls are dragged, reordered, copied, etc.

Right pane: configuration area for the selected field, allowing edits to label, description, validation rules, and more.

Principle Analysis

The designer outputs a JSON Schema that describes all form fields. After publishing, the front‑end renders the form directly from this schema, eliminating the need for recompilation when the form changes. Understanding the schema is essential, as it is the communication language between the designer and the rendering component.

interface Schema {<br/>  fields: Record<FieldKey, FieldSchema>;<br/>}<br/><br/>interface FieldSchema {<br/>  title: string;<br/>  type: 'string' | 'object' | 'array' | 'number' | 'boolean';<br/>  component: string;<br/>  componentProps: {<br/>    [name: string]: any;<br/>  };<br/>}

Key points of the schema:

component – specifies which input component renders the field.

componentProps – props passed to the component to control its behavior.

type – the expected data type of the field.

FieldKey – unique identifier for the field (internal only).

title – human‑readable label shown in the form.

The designer must support two conversion methods for each control: toConfig (schema → configuration UI) and toSchema (configuration UI → schema). The relationship can be expressed as:

FieldSchema => toConfig => configValue => toSchema => FieldSchema

UI Implementation

The left pane lists all available controls, each providing a name, a configuration form, and implementations of toConfig and toSchema. The canvas displays the current schema and handles drag‑and‑drop and click events. When a field on the canvas is selected, the right‑hand configuration area renders the appropriate form for that field.

Conclusion

The core architecture of a drag‑and‑drop form designer revolves around generating and manipulating a JSON Schema that fully describes the form. By abstracting field configuration into visual UI and handling schema conversion internally, developers reduce repetitive coding and empower non‑technical users to maintain forms efficiently. Future articles will dive deeper into schema parsing and advanced implementation details.