Build
Preview
How the project runs while you build and what you can do in the preview.
What the preview is
- It's the app your buyer will see. The preview shows the app exactly as your customer sees it, with no separate view for the owner.
- It's the site working. Buttons click, the form submits, and mobile shows the same thing it will show later.
- It's private. Only you and the people in your organization can open it.
- It updates in seconds. The preview changes with every change the agent makes.
Browse the preview as if you were your own customer. That's how you find the adjustments still missing, like a link that goes nowhere, half-written text or a section out of order.
If you don't know how to get to a part of the app, ask the agent. It knows the project and explains the path through the navigation.
Point and ask
To change a piece of the screen, point at it.
Click Select element, the pencil on the preview bar, and pick the piece on the screen. The piece gets highlighted and comes into the chat as a reference. Then say what you want to happen to it.
Example request:
Make this title smaller and put it on two lines.
See it on mobile
Mobile view shows the preview at phone width, without you leaving the screen or picking up your phone.
Take the preview somewhere else
Click the address on the preview bar to see two options.
- Copy URL. Paste the address wherever you want.
- Open in new tab. See the project full screen, which helps when the page is long.
Read the Console
The Console panel shows the messages your project writes while it runs in the preview, like the warnings and errors your code logs. It only shows up with the preview running. If the preview stops while you're in the project, the Console stays in the panel bar.
In older projects, the Console may not show up in the New tab list yet.
To open it, click New tab, the + on the panel bar, and choose Console.
- Filter by level. The tabs at the top of the panel, like Error and Warn, show only the lines of that level. A level's tab shows up when there's at least one line of it.
- See older lines. Click Load older lines, at the top of the list.
- Clear the panel. Click Clear to hide the lines already in the panel. New lines keep showing up.
When your project writes the value of an item in the Secrets panel, secret or public, the
Console shows [redacted] in place of the value. IP addresses and API keys with a known format also show up
as [redacted]. A value from the Secrets panel written another way, like encoded or joined to another
word, stays visible.
If something doesn't work in the preview, copy the error line from the Console and ask the agent to fix it in the chat.
Shortcuts
| Key | What it does |
|---|---|
| S | Select element |
| M | Mobile view |
| R | Reload preview |
| Esc | Leave Select element and, after that, release what was selected |
While the agent builds
The Play game button opens Space Runner. You can play while the agent builds.
The public sees the published version. What's live only changes when you publish again.