Designer overview

The Designer is FlowRunner's visual page builder — the place where you compose a page from ready-made sections and components, restyle it with a theme, preview it, and publish it. This page explains the pieces of the editor and the model behind them.

The canvas

The centre of the editor is the canvas — a live, editable view of your page. What you see is what visitors get. You build a page by dropping blocks and components onto the canvas from the right-hand pane, then selecting anything to edit its text, style, and settings in the inspector.

The canvas has two modes, switched from the top bar:

• Edit — selection handles, drag-and-drop, and inline editing are on.
• Preview — the page renders exactly as a visitor will see it: no handles, hidden nodes are removed, and conditional (showIf) elements are evaluated.

Sections and the document model

A page is stored as a FormDocument — a plain JSON structure (currently version: 2) that the editor reads and writes. Its shape:

FormDocument
├─ pageSettings   title, description, visibility, page background, on-submit flow
├─ theme          per-page palette / font overrides (see /designer/theme)
├─ assets         uploaded images, kept inline
├─ customComponents  subtrees you saved for reuse on this page
└─ sections[]     the page itself, top to bottom

Each page is a stack of sections. A section is a horizontal band with its own width, background, and vertical padding; inside it lives a tree of nodes:

A section carries:

Field	What it controls
variant	fullWidth, contained (centred), or narrow
background	none, solid colour, image, or gradient (with optional overlay)
paddingTop / paddingBottom	spacing tokens (sm, lg, 2xl, …)
root	the top node of the section's tree — usually a Stack or Row

Every node in the tree is a FormNode: a component name (Typography, Button, Stack…), its props, optional style overrides, a theme reference block, and children. Nodes can also be hidden (ghosted in the editor, dropped from preview/export), locked (won't drag), or gated with a showIf condition.

Breakpoints

The top bar has a Desktop / Tablet / Mobile switch. It resizes the canvas to simulate that viewport, and any style you change while a breakpoint is active is stored as an override for that size only. Overrides cascade the way CSS does: tablet inherits desktop, and mobile inherits both, so you only override what actually needs to change on smaller screens.

INFO

📸 Screenshot — the top bar showing the Outline / Publish / Export buttons, the breakpoint switch, and the Edit/Preview toggle.

Undo, redo, and autosave

Every change is tracked. Use ⌘Z to undo and ⌘⇧Z to redo (the top bar has buttons too, and they disable when there's nothing to undo). Your work saves automatically — a status badge in the top bar shows the save state — and ⌘S forces an immediate save.

The outline

The Outline button opens a left-hand drawer that lists every section and the nested node tree beneath it. Use it to:

• Jump to and select any node, even ones buried deep or behind others.
• Reorder sections by dragging them.
• Toggle a node's visibility or lock state.
• Search components by name to find them fast.

The outline is the reliable way to navigate a complex page — it mirrors the document tree exactly.

See also

• Blocks & page templates
• Components & inputs
• Theme & styling
• Inline editing & shortcuts