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

# Build a multi-step flow

> Add more screens and move between them with navigation actions. How the screen-list model and auto-maintained edges work.

A multi-step flow is an **ordered list of screens**. You sequence the screens in the **Layers** panel and move between them with **navigation actions** on buttons and other components. There is no visual node-graph canvas to wire by hand.

<Note>
  This page describes the **Layers** panel, the [Advanced mode](/editor/editing-modes) structure view. In [Simple mode](/editor/editing-modes) the same screen management (add, reorder, rename, duplicate, delete) happens in the thumbnail-based [Screens panel](/editor/screens-panel). The screen-list model and auto-maintained edges below are identical in both modes.
</Note>

<Note>
  The editor builds flows as a screen list, not a graph. If you are looking for a place to draw arrows between nodes, there isn't one, and you don't need it. Order plus actions is the whole model.
</Note>

## Add and order screens

Open the **Layers** panel. Below the persistent zones you will see the ordered list of screens. Each screen expands to show its Root Stack and components.

* **Add a screen**: click **Add Screen** at the bottom of the screen list. This creates a new screen named "Screen N" with an empty Root Stack, appends it to the end of the list, and links it after the previous screen.
* **Reorder screens**: drag a screen row to a new position. You can also use a screen's row menu (the `...` icon) with **Move Up** and **Move Down** (shortcuts `]` and `[`), or the **Sort screens** menu in the panel header (Name A to Z, Name Z to A, Reverse order).
* **Rename a screen**: double-click its row, or use **Rename** in the row menu.
* **Delete a screen**: use **Delete** in the row menu.

### The entry screen

The **first screen in the list is the entry screen**: the one the flow opens on. There is no separate "set as entry" control. If you reorder the list so a different screen is first, or delete the current first screen, the entry automatically becomes whatever screen is now first.

## Move between screens with actions

Movement between screens is driven by **actions** attached to a component's interaction (for example a button's onPress). The navigation actions are:

| Action      | What it does                                         |
| ----------- | ---------------------------------------------------- |
| `goNext`    | Follow the default path to the next screen in order. |
| `goBack`    | Return to the previous screen.                       |
| `navigate`  | Jump to a specific screen by its id.                 |
| `closeFlow` | End and dismiss the flow.                            |

You add these the same way as any interaction. See [Interactions and actions](/editor/interactions-and-actions) for the full list and [Navigation and branching](/editor/navigation-and-branching) for choosing between them.

### How `goNext` knows where to go

Screens are connected by **edges** that the editor maintains for you. When you add or reorder screens, the editor rebuilds the edges to match the list order (screen 1 to screen 2 to screen 3, and so on). A `goNext` action follows the outgoing edge from the current screen, which is the next screen in the list.

<Warning>
  Because edges follow list order, **reordering screens changes where `goNext` lands**. If "Continue" sends users to the wrong screen, check the screen order in the Layers panel.
</Warning>

## Worked example: a three-screen flow

Build Welcome to Choose to Done:

<Steps>
  <Step title="Create three screens">
    Use **Add Screen** twice so the Layers list reads, top to bottom: **Welcome**, **Choose**, **Done**. Rename each by double-clicking its row. Welcome is first, so it is the entry screen.
  </Step>

  <Step title="Wire Welcome to advance">
    On the Welcome screen, add a **Continue** button (or use the footer's existing Continue button) with an onPress `goNext` action. In preview, tapping it moves to Choose.
  </Step>

  <Step title="Add Back and forward on Choose">
    On Choose, add a **Back** button with `goBack` and a **Continue** button with `goNext`. Now users can move both directions.
  </Step>

  <Step title="End the flow on Done">
    On Done, add a **Finish** button with a `closeFlow` action so the flow dismisses. (You could instead use `navigate` to jump back to a specific screen.)
  </Step>

  <Step title="Preview the whole flow">
    Click **Preview** (⌘.) and tap through Welcome to Choose to Done. Use the canvas screen pager or the left/right arrow keys to inspect each screen while editing.
  </Step>
</Steps>

## Branching

The flow schema declares non-screen node kinds (`condition`, `assign`, `abTest`) for future branching, but **the editor today has no UI to add them**. The only node you can create in the editor is a screen (Layers, Add Screen).

So for real flows, do branching two ways:

* **Per-screen logic** with [conditional (dynamic) values](/editor/dynamic-values) and a `navigate` action to send users to different screens based on state.
* **A/B variants** at the [placement level using experiments](/dashboard/experiments), not by building two paths inside one flow.

## Common mistakes

* **A screen with no way forward.** Because navigation is action-driven, every non-terminal screen needs a control that advances the flow. Otherwise the user is stuck. Add a `goNext` or `navigate` button (or rely on the footer Continue button).
* **Assuming a graph editor exists.** There is no node canvas. Order screens in Layers and wire movement with actions.
* **Trying to A/B test inside one flow.** Do not build two parallel paths in a single flow. Run a [placement experiment](/dashboard/experiments) with two flow variants instead.
* **Forgetting that reorder rewires `goNext`.** Moving screens around changes the default next-screen targets. Re-check the order after reordering.

## Related pages

* [Build your first screen](/editor/first-screen)
* [Interactions and actions](/editor/interactions-and-actions)
* [Navigation and branching](/editor/navigation-and-branching)
* [Dynamic values](/editor/dynamic-values)
* [Experiments](/dashboard/experiments)
* [Persistent zones](/editor/zones)