Live preview

Opening a preview

From the design canvas, click Open in browser on any frame toolbar. From the code editor, click the Open in browser button on the live preview pane. Both open a new tab showing the frame as a real web page — no canvas chrome, no surrounding workspace.

The URL has the form /project/<id>/preview/<frameId>. Copy it from the address bar to share with anyone who has access to the project, or scan the QR code from the code editor preview toolbar to open it on your phone.

Device sizes

Add a device query parameter to constrain the preview width:

• ?device=mobile — 375 px viewport, centered on a soft background.
• ?device=tablet — 768 px viewport.
• ?device=desktop — 1280 px viewport.
• (no parameter) — full browser width.

Useful for grabbing screenshots at a specific size, or for sharing a mobile-shaped link to someone reviewing on a laptop.

What you see

The preview renders the actual generated markup and styles of the frame — the same output that will ship. It is not a static screenshot:

• Interactive elements work where the design includes interaction.
• The viewport responds to real browser resizing if you do not set a device.
• Refreshing pulls the latest version of the frame, so updates appear without re-opening the link.

When to use it

• Walking a stakeholder through a flow — share preview links instead of canvas screenshots.

• Reviewing on the actual target device — open the mobile link on your phone.

• Checking text and layout under real browser rendering — the canvas approximates, the preview is the real thing.

• For the design surface itself, read Design canvas.

• For sharing whole projects, read Publish and share.