Skip to main content

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.

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.
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.

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.
1

The error card appears

When the app throws a runtime error, a card shows up in the preview describing what went wrong.
2

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.
3

The agent applies a fix

Fabricate reads the error in context, generates a fix, and the preview updates once the change is in place.
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.

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:

Code

Browse the generated file tree and open files in the editor.

Blueprint

Review the plan the AI generated for your app before and during the build.

Database

Inspect the Cloudflare D1 database that powers your app.

Build Overview

See how the whole build process fits together.