Preview browser
Navigate, refresh, switch device sizes, read the console, and recover from runtime errors inside the Layout preview pane.
The preview pane is a full browser embedded in the workspace, with its own address bar, navigation history, console, and device toggle. This page is the reference for every control in the preview header and the console drawer.
The header, left to right
The bar above the preview holds these controls.
- Back and forward — move through the iframe's navigation history without reloading the app
- Refresh — reloads the current page in the iframe and clears the captured console logs
- Address bar — read-only. It tracks the iframe's current path as you click around. Useful when you want to tell Layout "I'm on
/settings/profileand the save button does nothing" - Device toggle — switches the preview between desktop width and a mobile frame (398 by 852). Use it to check responsive layouts without leaving the workspace
- Download code — pulls the current version as a source archive. Requires an active subscription; on the free plan the button is disabled and shows an upgrade tooltip
- Open in new tab — opens the preview URL outside Layout. Good for sharing the in-progress build with someone or testing in a different browser
- Fullscreen — expands the preview to fill the window. Press the icon again or
Escto exit
The preview iframe stays mounted when you switch to Code or open a side view. Coming back is instant — no reload, no lost state.
The loading bar
A thin progress bar slides across the top of the preview while a new version is loading. It disappears as soon as the iframe finishes loading.
The console
The bottom bar of the preview is the Console. Click it to open the log drawer.
The bar shows four counters that match what your app has logged:
- User —
console.logoutput - Error —
console.errorand uncaught exceptions - Warning —
console.warn - Info —
console.info
Counters reset when you refresh the iframe or switch to a different version.
Inside the drawer
The drawer lists every captured log line with its timestamp and level. Two buttons sit in the header:
- Clear — wipes the captured logs without reloading the iframe
- Chevron down — collapses the drawer back to the counter bar
The runtime error popup
If your app throws an error after a successful build, a popup appears at the bottom of the preview with two buttons.
- Show Logs — opens the console drawer so you can read the error in context
- Try to fix — sends the captured errors back to chat wrapped in an
<error>tag and asks the AI to fix them
Use Try to fix when the error message is enough on its own. Use Show Logs first when the error is vague or part of a chain — reading the full log usually tells you which fix to ask for.
Try to fix sends a chat message and costs the same as any other prompt. If the first attempt does not resolve the error, read the log yourself and write a more targeted prompt instead of clicking again.
Previewing an older version
Open version history and click any past version to load it into the preview. An amber banner appears at the top of the preview:
You are previewing Version N
[Revert to this version] [Go to latest]- Revert to this version — makes the previewed version the new current version
- Go to latest — snaps the preview back to your latest build without changing anything
The two buttons are the only ways to leave preview mode. See Version history for the full revert flow.