> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# The Flow Editor

> A tour of the Flow Editor: the top bar, the left sidebar, the phone canvas, and the right properties panel.

The Flow Editor is a drag-and-drop builder for designing flows. It has three main regions: a **left sidebar** for structure and content, a **center phone canvas** that shows the current screen, and a **right properties panel** for editing whatever is selected. A top bar runs across the whole thing for naming, history, preview, and publishing.

You open the editor by clicking a flow on the [Flows page](/dashboard/flows). The URL is `/editor/{flowId}`.

<Note>
  The editor has two modes, **Simple** and **Advanced**, and what each region shows depends on which one you are in. New flows open in Simple. This page describes both; for the full comparison see [Simple and Advanced modes](/editor/editing-modes).
</Note>

<CardGroup cols={2}>
  <Card title="Simple and Advanced modes" icon="toggle-on" href="/editor/editing-modes">
    The two editing modes, what each shows, and when to use them.
  </Card>

  <Card title="Your first screen" icon="wand-magic-sparkles" href="/editor/first-screen">
    Add components to the Root Stack and wire a button.
  </Card>

  <Card title="Multi-step flows" icon="diagram-next" href="/editor/multi-step-flows">
    Add screens and navigate between them with actions.
  </Card>

  <Card title="Components" icon="shapes" href="/editor/components">
    The full palette of components you can place on a screen.
  </Card>

  <Card title="Blocks" icon="cubes" href="/editor/blocks">
    Curated multi-component presets you can drop in.
  </Card>

  <Card title="Logic and data" icon="code-branch" href="/editor/variables">
    Variables, dynamic values, interactions, and actions.
  </Card>

  <Card title="Preview and publish" icon="rocket" href="/editor/publishing">
    Test on a device, then publish and attach to a placement.
  </Card>
</CardGroup>

<Note>TODO: screenshot of the full editor (top bar, left sidebar, phone canvas, right properties panel).</Note>

## 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](/editor/preview-and-live-mirror).                                                                                |
| **Mode toggle**                | A segmented **Simple \| Advanced** control to the left of Preview. **Advanced** carries a **Beta** badge. See [Simple and Advanced modes](/editor/editing-modes). (Hidden if Simple mode is disabled for your workspace.) |
| **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". Available in Advanced mode.                                                    |
| **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](/editor/publishing).                                                                                                                              |

<Note>
  The editor also **autosaves**. You do not have to click Save Draft after every change. See [Saving and autosave](#saving-and-autosave) below.
</Note>

## Left sidebar

The left sidebar is a vertical rail of tabs. Which tabs appear depends on the [mode](/editor/editing-modes).

**In Advanced mode** there are five tabs, with **Layers** as the default:

* **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](/editor/multi-step-flows).
* **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](/editor/components) and [Blocks](/editor/blocks).
* **Variables**: the flow's variables and their preview-mode values. See [Variables](/editor/variables).
* **Design**: theme (colors and typography) and flow-level settings. See [Colors and typography](/editor/colors-and-typography).
* **Custom**: your workspace's custom components catalog. (Its full name is "Custom Components".) See [Custom components](/editor/custom-components).

**In Simple mode** the rail is trimmed to three tabs, with **Screens** as the default:

* **Screens**: a thumbnail list of every screen, plus pinned cards for persistent zones and the data your flow collects. It replaces the Layers tree. See [The Screens panel](/editor/screens-panel).
* **Insert**: two inner tabs, **Elements** (the certified-block [Element Library](/editor/element-library)) and **Screens** (templates).
* **Design**: curated theme colors and background presets. See [Colors and typography](/editor/colors-and-typography).

The panel is resizable by dragging its right edge, and you can collapse it to an icon-only rail with the toggle at the bottom of the sidebar. On narrow windows (below 1024px) it auto-collapses.

## 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.)

**The floating control bar** at the bottom of the canvas has, left to right:

* **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 / total` counter 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 (⌘.).

You can pan the canvas by dragging an empty area around the phone, and pinch-zoom on a trackpad (Ctrl + scroll). The canvas auto-fits when the editor first loads and when the window resizes, until you set a zoom yourself.

## 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.

In **Advanced** mode the panel splits a component's settings into Layout, Style, and Logic tabs ([the properties panel](/editor/properties)). In **Simple** mode it shows one high-level [block controller](/editor/block-controllers) per block instead.

See [The properties panel](/editor/properties) for the full Advanced breakdown.

## 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) |

**With a component selected**

| 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](/editor/animations)) |
| Space          | Play the animation preview                                    |

<Tip>
  When you are renaming a flow, screen, or layer, **Enter** confirms the new name and **Escape** cancels it.
</Tip>

## 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.

Edits change the **draft** version only. Your app keeps serving the last published version until you publish again. See [Publishing](/editor/publishing) and the [flow version model](/dashboard/flows#drafts-published-versions-and-the-version-model).

## 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 (Advanced) or the [Screens panel](/editor/screens-panel) (Simple) and wire movement with actions. See [Build a multi-step flow](/editor/multi-step-flows).
* **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.

## Related pages

* [Build your first screen](/editor/first-screen)
* [Build a multi-step flow](/editor/multi-step-flows)
* [Components](/editor/components)
* [The properties panel](/editor/properties)
* [Preview and Live Mirror](/editor/preview-and-live-mirror)
* [Publishing](/editor/publishing)