The preview

The right half of the project page has two tabs: Preview and Code. Preview shows your app, live, in an iframe pointed at the running development server.

It is not a screenshot or a rendering of the code. It is the app. Clicking a link in the preview navigates the app. Filling a form fills the app's form.

The toolbar

Left to right:

• Preview | Code — the tab toggle.
• The address pill. A small monospace chip in the middle showing the preview address. When the app is not running it reads the word "Preview" instead.
• Desktop | Mobile. A viewport toggle. Mobile renders the app in a 390 × 780 frame with a rounded bezel, which is the right size to judge a phone layout. Desktop fills the pane.
• Reload. Titled "Reload the preview". Disabled when the app is not running.
• Open in a new tab. Opens the preview address in its own tab, at full browser width.

When the preview goes live

The preview appears as soon as the sandbox's development server answers, which happens early in the first build — before the builder has written any of your app. For a few seconds you will see the starter template's placeholder page reading "Your app is being built". That is expected; the builder replaces it with your first screen.

Two conditions must both hold for the preview to show: the project has a preview address, and its sandbox state is running.

When it refreshes

The preview reloads itself in four situations:

1. The sandbox comes up and the address is published mid-build.
2. A run finishes.
3. You press the reload button.
4. You restore a version from history.

In between, Next.js's own hot reload handles it: when the builder writes a file, the running app picks the change up on its own, usually within a second. This is why you often see the preview change mid-run, before the builder has finished talking.

The three placeholders

When the preview cannot show your app you get one of three messages, and each means something different.

"Spinning up your app…", with a pulsing tile. A build is running and the sandbox is not ready yet. On a first build this can last a few minutes while dependencies install. Wait.

A red warning triangle and an error message. The sandbox is in its error state. The message shown is the sandbox's own error, so read it — it usually names the problem exactly (a failed npm install, a development server that would not start). If there is no specific message you get the fallback: "The sandbox hit an error. Send a message to retry." Sending any message starts a new run, which tries to bring the sandbox up again.

"The preview appears here once the first build runs." There is no sandbox yet. This is a project created without a prompt, whose first build has not happened. Send a message.

The preview address

What the address looks like depends on which kind of sandbox your project got:

• Local sandbox: http://localhost:<port>, with the port somewhere in 4100–4199. This only works from the machine running Bookbag. Opening it on your phone will not work, and neither will sending it to a colleague.
• Cloud sandbox: a public address on the sandbox provider's own domain.

Either way, the preview address is not the address for sharing your app. It points at a development server, it disappears when the sandbox stops, and it is not meant to be public. To give your app a real, stable, public address, publish it.

The Code tab

The other tab shows your project's files — a tree on the left, the file's contents on the right. It opens on app/page.jsx if that exists, otherwise the first file.

The viewer is read-only, and the toolbar says so: "Read-only — ask the builder for changes." That is a deliberate decision, not a missing feature. A pane you could type into would race the builder's own writes to the same files.

There is no syntax highlighting. Files are shown as plain text.

Next to the read-only notice is a Download button, which gives you the whole project as a zip. See Downloading your app.

On a phone

Below the medium breakpoint the two columns do not fit side by side, so a Chat | App toggle appears in the middle of the top bar and you switch between them.

Next

• When a build fails.
• Browsing the source — the Code tab in detail.