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.
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. |
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.
Worked example: a three-screen flow
Build Welcome to Choose to Done: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.
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.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.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.)Branching
The shippable 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). The NEXT_PUBLIC_FLOWPILOT_EXPERIMENTAL_NODES developer flag only un-gates creation of api / event / subflow nodes in the store, and even those have no palette to place them from.
So for real flows, do branching two ways:
- Per-screen logic with conditional (dynamic) values and a
navigateaction to send users to different screens based on state. - A/B variants at the placement level using 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
goNextornavigatebutton (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 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.