Skip to main content
The Live Preview is a sandboxed, fully interactive version of your app running right inside the workspace. As the AI agent works, it deploys your app to the preview, 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:
  • The preview updates each time the agent deploys — the agent deploys once a change is ready to run. On a new app’s first build, the app appears when the build finishes.
  • 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

On larger screens, a device-size toggle lets you cycle the preview between desktop, tablet, and mobile widths without leaving the workspace. Use it to confirm your layout holds up at each size — 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 path field. Type a route and press Enter to open that page in the preview — handy when you’re testing a flow that spans several screens. The field shows the page the preview loaded; it doesn’t follow the links you click inside your app.

​
Fixing Runtime Errors

After each deploy, the agent checks the preview in its own browser for errors and tries to fix what it finds before it finishes. If your app still shows an error or a blank screen, tell Fabricate.
1

Notice the problem

The app shows an error, a blank screen, or something that doesn’t work.
2

Describe what you see

Send a follow-up message that says what you did and what happened. A screenshot of the preview helps.
3

The agent applies a fix

Fabricate reads the relevant code, checks the preview for errors, and the preview updates once the fix is deployed.
The agent sees errors in its own browser, not in yours. If something only breaks for you, describe the steps that trigger it.

​
Other Workspace Views

Preview is one of three views in the workspace, alongside Code and Database. 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.

Database

Browse the data your app stores in the preview.

Build Overview

See how the whole build process fits together.