Preview & iteration

The preview panel on the right of the editor is a live iframe that loads the most recent snapshot of your design. It updates automatically when the agent publishes a new snapshot.

The iframe

The iframe loads the snapshot through a signed URL — a temporary URL that grants the iframe permission to read the static HTML from storage. Signed URLs are scoped to your session and refresh automatically as needed.

The viewport size depends on the output type:

Page — 1280×720 (you can scroll vertically for longer pages)
Deck — 1920×1080 per slide, with slide navigation in the rendered output
Animation — The animation's intrinsic dimensions
Prototype — Phone-sized viewport (375×812 or similar) with multi-screen navigation
Unspecified — 1280×720 default

The iframe is fully interactive. You can scroll, click, and exercise any interactive elements the agent built — hover states, navigation, modal triggers, animations.

Above the iframe, a small toolbar gives you four controls:

Refresh — Force the iframe to reload. Use this if the preview seems stale (e.g., you saw a snapshot publish in the chat but the iframe didn't update).
Open in new tab — Opens the snapshot's signed URL in a new browser tab. Useful for sharing your screen on a call without giving up your editor, or for showing a teammate the standalone result.
Maximize / minimize — Maximize hides the chat panel for a full-width preview. Minimize brings the chat back. The split is preserved per design.
Status indicator — Shows Generating with a spinner during a turn, or Idle with a green dot when the agent is done.

Resizing the panes

Drag the divider between chat and preview to change the split ratio. The new ratio persists per browser (via localStorage), so you can have a chat-heavy split for some designs and a preview-heavy split for others.

Empty state

When you first land on a freshly created design, the preview panel is empty with a message like "Send a message to start designing." Once your first turn completes, the iframe loads with the published snapshot.

If you ever see the empty state on a design that has had previous turns, something went wrong:

The most recent snapshot may have failed to publish
The signed URL may have expired and refreshing didn't fix it

Try the Refresh button. If that doesn't help, see Troubleshooting.

How snapshots work

Every successful turn produces a snapshot — a static build of your design uploaded to storage. The current state of your design is the most recent snapshot. Older snapshots are kept for history.

Snapshots are content-addressed by hash, so identical content shares the same key. This means:

You can iterate without bloating storage — only changed builds are uploaded
Older snapshots stay valid as long as the design exists; deleting the design removes them all

Snapshots aren't directly browsable in the UI in v1.0 — they're managed by the designer agent and surfaced through the preview panel. Pinning a specific snapshot is on the roadmap.

Performance notes

First turn after a long break can take a few minutes if the sandbox went cold and needs to install dependencies again. The status indicator stays on Generating the whole time.
Subsequent turns in the same session take 5–60 seconds depending on the size of the change.
Heavy animation or video output can make the iframe slow to render — try a smaller viewport or simpler scene if the preview is laggy.

If the iframe consistently fails to load (404, 403, blank), see Troubleshooting.