Skip to main content
This walkthrough takes a single screen from empty to a title, a button, and a tap action you can preview. It assumes you have already created a flow. If you have not, see Managing flows.

​
What a screen is made of

Every screen has a Root Stack at its root: a vertical stack that holds the screen’s components. Components nest inside stacks, so you drop new components into the Root Stack (or into another stack inside it), not onto bare screen space. You can see this structure in the Layers panel: each screen expands to show its Root Stack and everything under it.

​
Build the screen

1

Open a flow

Open a flow from the Flows page. The editor opens at /editor/{flowId} with the first screen selected. On a brand-new flow a template picker appears first; choose Start blank to follow this walkthrough on an empty screen. See Flow templates.
2

Open the Insert tab

In the left sidebar, click Insert. It has three inner tabs:
  • Components: individual primitives (Text, Button, Image, and so on).
  • Blocks: curated multi-component presets.
  • Screens: full-screen templates.
Stay on Components for now.
3

Add a Text component

Drag Text from the Components list onto the screen, dropping it inside the Root Stack. To change the wording, double-click the text on the canvas and type. The text updates inline as you edit.
4

Add a Button

Drag Button from the Components list onto the screen. Select the button, then set its label in the properties panel on the right (a new button starts with the text “Continue”). See The properties panel.
5

Give the button an action

A button does nothing until you add an interaction. Select the button and add an onPress interaction with a Close flow action so this one-screen flow can be dismissed. (Navigation actions like goNext are what you use once you have more than one screen.) See Interactions and actions.
6

Preview it

Click Preview in the top bar (or press ⌘.) to enter preview mode, then tap your button to confirm the action fires. Click Exit Preview when you are done. See Preview and Live Mirror.

​
Example: a one-screen welcome

A minimal first screen is a Root Stack with a Text headline and a Button: 
Screen 1
└─ Root Stack (vertical)
   ├─ Text:   "Welcome to the app"
   └─ Button: "Get started"  ->  onPress: closeFlow
That is enough to render, preview, and publish. As you grow the flow, you add more components into the Root Stack and more screens from the Layers panel.
New flows start with a footer that already has a Continue button wired to goNext, and a navigation bar with a progress indicator and a close button. These live in the persistent zones, separate from the screen’s own components. See Persistent zones.

​
Common mistakes

  • Dropping a component outside a stack. Components must live inside a stack. Drop new components into the Root Stack (or a nested stack), not onto empty space. If a drop does not land, check that you released over a stack on the canvas or in the Layers tree.
  • Editing text in the wrong place. Double-click the text on the canvas to edit its wording inline. The properties panel is for styling and other props.
  • A screen with no way out. A screen needs at least one interactive exit. On a single-screen flow, give a button a closeFlow action (or rely on the footer’s Continue button). On multi-screen flows, use a navigation action. See Build a multi-step flow.

​
Troubleshooting

  • My button does nothing in preview. It has no interaction yet. Select it and add an onPress interaction with an action. See Interactions and actions.
  • I cannot select the text to retype it. Make sure you are double-clicking the text on the canvas, not single-clicking (which only selects the component).