/editor/{flowId}.
Your first screen
Add components to the Root Stack and wire a button.
Multi-step flows
Add screens and navigate between them with actions.
Components
The full palette of components you can place on a screen.
Blocks
Curated multi-component presets you can drop in.
Logic and data
Variables, dynamic values, interactions, and actions.
Preview and publish
Test on a device, then publish and attach to a placement.
TODO: screenshot of the full editor (top bar, left sidebar, phone canvas, right properties panel).
Top bar
The top bar holds the flow-level controls. From left to right:| Control | What it does |
|---|---|
| Back (arrow icon) | Returns you to the previous page. The tooltip reads “Back to flows”. |
| Flow name | Click the name to rename the flow inline. Press Enter to save, Escape to cancel. |
| Undo / Redo | Step backward and forward through your edits. Disabled when there is nothing to undo or redo. |
| Live Mirror | Streams your edits to a connected device or preview for real-time viewing. See Preview and Live Mirror. |
| Schema (braces icon) | Opens a read-only JSON drawer (“Schema Viewer”) showing the current screen and the persistent zones. The tooltip reads “View JSON schema”. |
| Preview (eye icon) | Toggles in-canvas preview mode so you can tap through the flow. When active it turns purple and reads Exit Preview. |
| Save Draft (document icon) | Saves the current draft to the server. |
| Publish (rocket icon) | Saves the draft, then creates a new published version. See Publishing. |
The editor also autosaves. You do not have to click Save Draft after every change. See Saving and autosave below.
Left sidebar
The left sidebar is a vertical rail of five tabs. Click an icon to open its panel. The default tab is Layers.- Layers: the structure of the flow, including the persistent zones (navigation bar, footer, overlay) and the ordered list of screens, each with its component tree. This is where you add screens and select, rename, reorder, hide, and delete items. See Build a multi-step flow.
- Insert: the things you can add to a screen, split into three inner tabs. Components (individual primitives like Text and Button), Blocks (curated multi-component presets), and Screens (full-screen templates). See Components and Blocks.
- Variables: the flow’s variables and their preview-mode values. See Variables.
- Design: theme (colors and typography) and flow-level settings. See Colors and typography.
- Custom: your workspace’s custom components catalog. (Its full name is “Custom Components”.) See Custom components.
Phone canvas
The center is a fixed iPhone-portrait frame, 375 x 812 points, with a notch (dynamic island) and bezel. It always renders the currently selected screen plus any visible persistent zones. Working on the canvas:- Select a component by clicking it. The selected component gets a solid indigo outline; hovering shows a dashed outline.
- Edit text inline by double-clicking a Text component on the canvas.
- Add components by dragging them from the Insert panel onto a stack (or onto an empty screen).
- Deselect by clicking an empty area of the canvas. (There is no Escape-to-deselect shortcut.)
- Fit to view (⌘0): scales the phone to fit the available space.
- Zoom: a slider from 50% to 200% (step 5) with minus and plus buttons (⌘- and ⌘=).
- Screen pager: previous and next arrows around a
current / totalcounter and the screen name. Click the name to open a “Jump to screen” list. The left and right arrow keys also page between screens. - Preview: the same toggle as the top bar’s Preview button (⌘.).
Right properties panel
The right panel is context-sensitive: it shows the editable properties of whatever is currently selected.- Select a component to edit its content, layout, styling, animations, and interactions.
- Select a screen (its row in Layers, or its background on the canvas) to edit screen-level settings and background.
- Select a zone (navigation bar, footer, or overlay) to edit that zone.
- With nothing selected, it shows flow-level properties.
Keyboard shortcuts
These are the shortcuts confirmed in the editor. On Windows and Linux, use Ctrl in place of ⌘. Global| Shortcut | Action |
|---|---|
| ⌘Z | Undo |
| ⌘⇧Z (or ⌘Y) | Redo |
| ⌘. | Toggle preview mode |
| ⌘0 | Fit canvas to view |
| ⌘= / ⌘- | Zoom in / zoom out |
| ← / → | Previous / next screen (when you are not typing in a field) |
| Shortcut | Action |
|---|---|
| ⌘C / ⌘V | Copy / paste |
| ⌘D | Duplicate |
| Delete (or ⌘⌫) | Delete |
| ⌘⇧H | Show / hide |
| ⌘G | Wrap in a stack |
| ] / [ | Move up / move down among siblings |
| ⌘⇧C / ⌘⇧V | Copy / paste animation (see Animations) |
| Space | Play the animation preview |
Saving and autosave
You rarely need to save by hand:- Autosave: about 2 seconds after you stop editing, the editor saves your draft to the server.
- Local backup: changes are also written to your browser’s local storage as a backup.
- Unsaved-changes warning: if you try to close or navigate away with edits still in flight, the browser shows a “leave site?” prompt.
- Publish saves first: clicking Publish saves the current draft before creating the published version.
Common mistakes
- Looking for a node-graph canvas. The editor builds flows as an ordered list of screens, not a visual graph. You sequence screens in the Layers panel and wire movement with actions. See Build a multi-step flow.
- Expecting Escape to deselect. Escape only cancels an inline rename. To clear a selection, click an empty area of the canvas.
- Confusing Save Draft with Publish. Save Draft (and autosave) update the draft your app does not serve yet. Publish is what changes what users see.