Preview
See a running dev server inside the app, check it at tablet and phone size, point at an element, and let the assistant look at the result itself
The Live preview tab shows a running web project inside the app, so you do not have to alt-tab to a browser to see whether the change worked.
Starting it
Three ways in:
| Way | When |
|---|---|
| Start server | The project is there and the app works out how to launch it |
| Create web app | The shared folder holds no project yet |
| Enter an address | The server is already running, or it runs somewhere else |
The address field takes localhost:3000 or a full URL. The address is remembered per project.
The assistant can open the preview too, either on a dev-server address or on a static file such as an HTML page, an SVG, an image or a PDF from a shared folder.
When nothing appears
The tab checks whether the address answers before it shows a frame, so an empty white area is never left unexplained:
| Message | Cause |
|---|---|
| No server is responding | Nothing is listening on that address. The assistant or the terminal can start one |
| Can't be embedded | The site refuses to be shown in a frame. Only the site itself can allow that, so open it in your browser |
| The server reported no address | It started but printed nothing recognisable, for example a custom logger. Type the address in yourself |
Open in browser is always there, for the cases where you want real browser devtools.
Viewport sizes
Switch between Desktop, Tablet and Mobile, and rotate the orientation. Tablet and phone render in a fixed frame at common device dimensions, so a responsive layout can be checked without resizing the window.
Selecting an element
Select element turns the preview into a picker. Click an element in the page and it is attached to your next message, so you can write "make this narrower" instead of describing where "this" is. Click it again to deselect it. Up to eight elements at once.
This is the fastest way to point at something in a page you did not write, or whose class name you do not know.
What the assistant can see
Two tools make the difference between an assistant that guesses and one that checks:
- A screenshot of the preview. The assistant takes an image of the currently loaded page and looks at it. The image also appears in the conversation, which is your evidence that it really looked rather than claiming it did.
- The browser console of that page. Errors and warnings from the running page, filterable by level. This is how a runtime error that never shows up in the terminal gets found.
The console log is cleared when the preview navigates or reloads, so it never reports the errors of the previous page.
"Fix the layout on the about page" therefore becomes a loop the assistant can close on its own: change the file, reload, screenshot, look, adjust. Ask it to check the result and it will.
Cowork has no preview tab
In Cowork documents are rendered inside the editor tab rather than in a separate preview tab, because for a document the preview and the thing you would edit are the same file. There is no address field, no dev server and no element picker there. That is all Code.