Builder canvas layout

patternactive owner: philip · updated 2026-11-14

Builder canvas layout

Authoring surface: palette of components on the left, canvas in the center, inspector on the right. Used by form builders, page builders, and workflow editors.

Use when

• Users compose artifacts from typed blocks (fields, steps, regions).
• Live preview matters more than navigation.

Structure / rules

• Left: component palette grouped by category; drag or click to add.
• Center: canvas with the artifact; selection state shared with inspector.
• Right: inspector for the selected block's properties; empty state when nothing selected.
• Every block type maps to a DSL construct; no free-form HTML.

Anti-patterns

• Allowing arbitrary code in the canvas (breaks the DSL contract).
• Inspector without live preview sync.

Slots

• {palette} — block categories and types.
• {canvas} — artifact DSL ref.

Sources

• factory/forms/form-engine/QAPP.md