The Device Preview pane

Device Preview drops the web app you’re building into a realistic phone frame so you can eyeball it at true handset size while your agents work. Open it with the phone button in the top chrome — if a preview is already open, the button focuses it instead of opening a duplicate.

Using it

1. Type your app’s address in the URL field — the placeholder says it plainly: localhost:3000 — your app’s dev server. Bare localhost or IP addresses get http:// automatically; anything else gets https://.
2. Press Enter or click Load.
3. Flip between devices with the segmented control: iPhone (iPhone 16 Pro, 402×874 logical viewport, Dynamic Island) or Samsung (Galaxy S24 Ultra, 384×832, punch-hole).

Once a page is loaded, the Load button becomes a reload button (circular arrow) — click it to force-refresh the same URL after your agent ships a change.

Good to know

• The frame renders at the device’s real CSS-logical resolution and then scales to fit the pane — resize the pane freely; proportions stay true.
• Your chosen device and URL persist with the pane across restarts.
• Public sites that block embedding won’t render here — this pane is for your app during development, not general browsing. For browsing, use the Browser pane.