The Form Designer
The Form Designer is a three-panel workspace — control palette on the left, form canvas in the center, and properties panel on the right. It operates in design mode using the same FormRenderer component that powers the player.
Three-Panel Layout
The designer workspace is divided into three resizable panels:
Left Panel — Control Palette
The palette lists all 88+ control types organised into groups. Search filters the list in real time. Drag any control from the palette and drop it onto the canvas to add it to the form.
- Input Controls — text, textarea, number, email, password, url, date, datetime, select, multiselect, checkbox, radio, switch, json-editor
- Display Controls — label, header, image, html, file-upload
- Layout Controls — tabs, accordion, card-container, stepper, collapsible-panel, modal, breadcrumb, sidebar-nav, data-table, api-response-viewer
- Charts & Gauges — bar, line, area, pie, scatter, histogram, heatmap, radial-gauge, linear-gauge
- Media & Advanced — video, audio, iframe-viewer, pdf-viewer, variable-inspector, article, mermaid-diagram
Center Panel — Form Canvas
The canvas is where you build the form. Controls appear in their rendered state — you see exactly what the user will see, including labels, placeholders, and help text. You can:
- Drag to reorder — Grab the drag handle on any control and move it up or down within its section, or into another section
- Click to select — Clicking a control selects it and opens its properties in the right panel
- Right-click — Context menu with Duplicate, Delete, Move to Section options
- Width handles — Controls support full (12), half (6), and third (4) column widths — drag the resize handle
Right Panel — Properties
When a control is selected, the properties panel shows all configurable fields for that control type. Properties are grouped into tabs:
- Basic — Label, placeholder, description, help text, required, disabled
- Validation — Required, min/max, pattern, custom validator, error message
- Binding — Binding source and path for data wiring
- Visibility — Mode visibility settings and visibility rule expression
- Style — Width, column span, CSS class overrides
- Advanced — Control-specific settings (varies by control type)
Drag-and-Drop Mechanics
The designer uses the HTML5 Drag and Drop API with custom drop-zone highlighting. When you drag a control from the palette:
- The canvas highlights valid drop zones between existing controls
- Drop onto a zone to insert the control at that position
- The control receives a generated ID (
control-{uuid}) and default configuration - The auto-save triggers immediately after the drop
FormRenderer receives mode="design". This is the same component used in production — switching to preview just changes the mode prop to "preview".
Auto-Save
Every change in the designer is auto-saved with a 500ms debounce. The save indicator in the top bar shows the current state:
- Saving... — Write in progress
- Saved — All changes persisted
- Save Failed — Network error (changes buffered in localStorage)
Auto-save uses StorageManager — it first saves to localStorage for immediate persistence, then syncs to the API. If the API is unreachable, the draft remains in localStorage until the connection is restored.
JSON Schema View
The designer includes a JSON Schema toggle in the toolbar. This opens a read-only (and optionally editable) view of the raw form schema. Advanced users can paste JSON directly into the schema editor to make bulk changes. The canvas re-renders on every valid JSON change.
Undo / Redo
The designer maintains a 50-step undo history using a command stack. Use Ctrl+Z / Cmd+Z to undo and Ctrl+Shift+Z to redo. Each add, delete, move, or property change is a separate undo step.