Review preview and visual editing tools
Builder keeps the live app close to the conversation so you can move from prompt to verification without switching tools.
Preview panel modes
The right-side Builder panel includes several review modes:
| Mode | Best for |
|---|---|
Preview | Run and inspect the live app |
Annotate | Mark up the preview visually before changes |
Code | Review source output for the active app |
Problems | Check build, runtime, or lint-style issues |
Security | Review security-focused findings |
Configure | Adjust app-level configuration from the preview workspace |
Cloud | Operate Builder Cloud for the active app |
Publish | Connect GitHub and Vercel, then prepare deployment |
Builder also keeps a System messages area at the bottom so you can inspect recent runtime and app activity.
Use Preview as the default verification step
After a generation finishes:
- Open Preview.
- Click through the main user flow.
- Confirm the page loads cleanly.
- Open Problems if anything looks broken.
This should happen after every meaningful product change, not just before publishing.
Edit one component at a time
When the preview is healthy, Builder exposes targeted visual-editing tools in the preview toolbar:
- Edit component to target a single element
- Select components to collect multiple components for context
Use these controls when the change is visual or copy-focused and you do not want to re-prompt the whole app.
Common visual editing workflow
- Wait until preview is fully loaded.
- Click Edit component or Select components.
- Pick the relevant element in the live preview.
- Use inline controls such as Edit Text or Swap Image when available.
- Review the draft in preview immediately.
- Choose Save Changes or Discard.
Builder keeps pending visual edits visible until you decide what to do with them.
Use Annotate when the feedback is visual first
Annotate is useful when you want to mark the preview before asking for a change, especially for layout and hierarchy feedback.
It is a good fit for:
- spacing issues
- content grouping problems
- visual bugs that are easier to point at than describe
Know when to use Preview vs Chat
- Use Preview when you need to verify behavior or make targeted component changes.
- Use AI Chat when the change is structural, multi-screen, or requires reasoning across files.
In practice, teams move back and forth between the two.
Plan and entitlement notes
Preview inspection is the standard Builder workflow. Some save actions for advanced visual editing depend on your Builder plan and workspace capabilities.
If editing controls appear locked, first confirm:
- the preview is running
- the correct app is selected
- your workspace plan includes the feature you are trying to use
Publishing and Cloud live in the same review loop
Once preview is stable, continue directly into:
That keeps shipping and backend setup connected to the actual app state you just verified.