Dashboard / The editor
The editor
The editor is a phone-accurate canvas with three panes: your screen structure on the left, the live device preview in the center, and the inspector on the right. What you see is what the SDK renders.
Three panes
- Structure — the ordered list of screens and, within a screen, its element tree. Reorder, duplicate, and delete from here.
- Canvas — a real-proportion phone frame rendering the flow exactly as devices will. Click any element to select it.
- Inspector — properties of the current selection: content, bindings, layout, and style.
Three view modes sit above the canvas:
| Mode | Type | Description |
|---|---|---|
| Screen | default | Edit one screen at a time on the phone canvas. |
| Flow | map | The whole funnel as a graph — every screen, transition, and branch at a glance. |
| Localization | copy | Manage translations per locale and preview the flow in each language. |
Adding screens
Add screen opens a gallery of designed screens — welcomes, questions, plan pickers, loading steps, finales — so you start from something rather than from an empty canvas. Pick the one closest to what you want; everything on it is editable.
Prefer to start from a whole funnel? The Templates gallery contains complete multi-screen flows by category — cloning one creates a new flow and drops you straight into the editor.
To build a screen up piece by piece, the component library holds the parts: plan pickers, quizzes, feature lists, footers.
Working on a screen
Click something on the phone to select it — a click takes the largest meaningful thing, and clicking again inside goes a level deeper. The Layers panel on the left is the same thing as a list, and it is where you drag a layer to move it. Selection, moving and copy/paste →
The bar above the canvas picks which device you are designing against — iPhone SE through 16 Pro Max, each with its real screen size and its real safe areas — and can draw those safe areas as guides. Worth checking a small device before you deploy: a screen that fits on a Pro Max may not fit on an SE.
Drafts, deploys, versions
Edits autosave to a private draft within ~1.5 seconds (the header shows Draft saved). The live flow is untouched until you press Deploy (⌘S), which validates, publishes, and bumps the version. Discard draft reverts to the live version. How versions reach devices →
Undo/redo (⌘Z / ⌘⇧Z) covers your whole editing session.
AI assistance
- AI generate — describe your app and audience and get a complete draft funnel to refine, instead of starting empty.
- Refine with AI — in the editor header: rewrite copy, restructure screens, or apply a change across the whole flow from one prompt.
From the editor outward
The header also links each flow to its own Analytics and can spin up an A/B test using the current flow as the baseline.