> ## 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 your first screen

> Go from a blank flow to a screen with a title and a working button, then preview it.

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](/dashboard/flows).

<Note>
  This walkthrough uses **Advanced mode** (the Layers panel and the raw Components palette), which is the most explicit way to see how a screen is built. New flows open in [Simple mode](/editor/editing-modes), where you would instead drag a **Title** and a button from the [Element Library](/editor/element-library) and set the button's action in its [controller](/editor/block-controllers). Use the **Simple | Advanced** toggle in the top bar to follow along in Advanced.
</Note>

## What a screen is made of

Every screen has a **Root Stack** at its root: a vertical [stack](/editor/layout-and-sizing) 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

<Steps>
  <Step title="Open a flow">
    Open a flow from the [Flows page](/dashboard/flows). 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](/dashboard/flow-templates).
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/editor/properties).
  </Step>

  <Step title="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](/editor/interactions-and-actions).
  </Step>

  <Step title="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](/editor/preview-and-live-mirror).
  </Step>
</Steps>

## Example: a one-screen welcome

A minimal first screen is a Root Stack with a Text headline and a Button:

```text theme={null}
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.

<Note>
  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](/editor/zones).
</Note>

## 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](/editor/multi-step-flows).

## 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](/editor/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).

## Related pages

* [Components](/editor/components)
* [Blocks](/editor/blocks)
* [Interactions and actions](/editor/interactions-and-actions)
* [The properties panel](/editor/properties)
* [Layout and sizing](/editor/layout-and-sizing)
* [Build a multi-step flow](/editor/multi-step-flows)