Previewing changes
Every change you make appears in a live preview — a real, running version of the page, isolated from your production site. Nothing in the preview affects real visitors until you publish.
The live preview
Section titled “The live preview”As the editor applies a change, the preview updates to reflect it. Because it uses a real Chromium browser (the Kernel Browser), what you see is what your visitors would get — JavaScript, API calls, third-party scripts, fonts, and interactions all behave as they will in production.
Interacting with the preview
Section titled “Interacting with the preview”The preview is fully interactive. You can:
- Click buttons and links to check behavior.
- Scroll through the page to see layout at different positions.
- Open menus, modals, and other interactive elements.
- Test form submissions and dynamic content.
This lets you verify a change in context, not just look at a screenshot.
Visual annotations
Section titled “Visual annotations”See something that’s not right? Click directly on the element in the preview and describe the issue. The agent receives both your feedback and the element’s context (tag, classes, position), making it far more precise than plain chat. See Annotations for details.
Preview surfaces
Section titled “Preview surfaces”The Preview panel supports multiple views:
| View | What it shows |
|---|---|
| Browser | The default page preview in a real Chromium instance. |
| Storybook | Component-level isolation when Storybook stories exist. |
| Raw | Direct URL access for debugging or custom endpoints. |
If the preview looks off
Section titled “If the preview looks off”- Give it a moment — larger changes can take a few seconds to apply.
- If something looks broken, describe it in chat (“the button overlaps the text now”) and the editor will adjust.
- Use annotations to point at the exact element.