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

# Preview Flowstep designs as interactive prototypes

> Open any Flowstep file as a clickable prototype — Flowstep links your screens automatically, and you can set or lock navigation manually per element.

Flowstep can turn the screens in a file into a clickable prototype. Click **Preview** in the editor toolbar and Flowstep opens a full-page prototype player where you can click through your flow — useful for testing a user journey or presenting it to stakeholders.

## Open a prototype

<Steps>
  <Step title="Click Preview">
    In the editor toolbar, click **Preview**. The prototype player opens as a full-page view, separate from the editor.
  </Step>

  <Step title="Let Flowstep link your screens">
    If your file has two or more screens, Flowstep automatically links interactive elements — buttons, cards, menu items — to their target screens when you open the preview (you'll see "Bringing your screens to life" while it works). Links are regenerated only when your screens have changed since the last run.
  </Step>

  <Step title="Click through your flow">
    Click any linked element — a button, a card, a menu item — to navigate to its target screen. The sidebar lists all screens in the file so you can jump to any of them directly, and **Back to editor** returns you to the file.
  </Step>
</Steps>

<Note>
  Automatic linking needs at least two screens in the file. If link generation fails, use the **Retry** button in the player.
</Note>

## Set navigation manually

You can control exactly where an element navigates:

1. In the editor, select the element (for example, a button).
2. Open the **Navigation** panel in the property panel on the right.
3. Pick a target screen from the dropdown — or choose **No navigation** to remove the link.

To stop Flowstep's automatic linking from overwriting a link you set yourself, click **Lock link** in the Navigation panel. Locked links are left untouched when links are regenerated.

## Interactive controls

A prototype isn't just clickable navigation — the controls on your screens respond while you preview. Flip a switch, tick a checkbox, pick a radio option, choose from a dropdown, switch tabs, type in a field, or increment a counter, and the screen updates live to reflect the new state.

Screens in a file share one prototype state during a preview session, so a change you make on one screen carries through as you click into others. You can also switch a screen between light and dark appearance to see how it responds.

<Note>
  Interactive behavior is generated automatically from your screens — there's nothing to wire up. Preview a file to try it.
</Note>