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

# Live Preview

> Watch your app come to life in a sandboxed, interactive preview that updates as Fabricate builds.

The Live Preview is a sandboxed, fully interactive version of your app running right inside the workspace. As the AI agent generates your app phase by phase, the preview updates so you can see — and click through — your app as it takes shape.

## How the Preview Updates

You don't trigger builds or refresh anything manually. While the agent works through its plan:

* **The preview reflects changes as they land** — each phase the agent completes shows up in the running app.
* **It stays interactive** — click buttons, fill forms, and navigate between pages to test what's been built so far.
* **It keeps running while you iterate** — send a follow-up prompt and the preview picks up the new changes.

<Tip>
  Treat the preview like a real app, because it is one. Clicking through your screens is the fastest way to spot something that needs another prompt.
</Tip>

## The Device-Size Toggle

A device-size toggle lets you switch the preview between **desktop** and **mobile** widths without leaving the workspace.

Use it to confirm your layout holds up at both sizes — check that navigation collapses sensibly, text stays readable, and nothing overflows on a narrow screen. If something looks off at one size, describe it in a prompt and the agent will adjust the responsive styling.

## The Location Bar

The preview pane includes a URL bar that shows the current location within your app. You can use it to navigate directly to a route or to confirm which page you're looking at — handy when you're testing a flow that spans several screens.

## Fixing Runtime Errors

If your running app hits a runtime error, the preview surfaces it on a card instead of leaving you with a blank screen.

<Steps>
  <Step title="The error card appears">
    When the app throws a runtime error, a card shows up in the preview describing what went wrong.
  </Step>

  <Step title="Choose “Fix with Fabricate”">
    The card includes a **Fix with Fabricate** action. Selecting it hands the error straight to the AI agent — you don't need to copy or explain anything.
  </Step>

  <Step title="The agent applies a fix">
    Fabricate reads the error in context, generates a fix, and the preview updates once the change is in place.
  </Step>
</Steps>

<Note>
  The error card covers runtime errors in the running app. For changes that aren't errors — a layout tweak or a new feature — just describe what you want in a prompt.
</Note>

## Other Workspace Views

Preview is one of four views in the workspace. Switch to the others when you want a different angle on your project:

<CardGroup cols={2}>
  <Card title="Code" icon="code" href="/build/file-explorer">
    Browse the generated file tree and open files in the editor.
  </Card>

  <Card title="Blueprint" icon="map">
    Review the plan the AI generated for your app before and during the build.
  </Card>

  <Card title="Database" icon="database" href="/build/database">
    Inspect the Cloudflare D1 database that powers your app.
  </Card>

  <Card title="Build Overview" icon="hammer" href="/build/overview">
    See how the whole build process fits together.
  </Card>
</CardGroup>