Responsive preview
The responsive previews that appear across the sandbox let you see a page at desktop, tablet, and mobile without leaving the page you’re on. This page explains how they’re built and how their on-screen sizes are decided — the desktop frame fills its column at a locked aspect ratio, and the tablet and mobile frames share a Zoom control.
How a preview is generated
Each frame is a live miniature of the real page, not a screenshot. It stays in sync because it’s the actual page running inside a small window of its own.
The reason each preview needs its own window is how our layouts decide when to reflow. A page rearranges itself based on the width of the browser window it’s in, not the size of the little box you drop it into. So to show a true phone or tablet version of a page that’s already sitting inside a desktop-sized window, we give that page its own window sized to the device. Then we shrink the whole window down with a zoom so it fits neatly on screen, without lying to the page about how wide it thinks it is. That’s why a mobile preview really does show the stacked, phone-shaped layout and not just a squished desktop.
The exact sizes in use today
| Frame | Window size (px) | How it’s shown |
|---|---|---|
| Desktop | 1920 × 900 | Fills the column · aspect-locked |
| Tablet (iPad Pro 11") | 834 × 1194 | Zoom control (default 40%) |
| Mobile (iPhone 14) | 390 × 844 | Zoom control (default 40%) |
Each frame renders at the real pixel dimensions of its device — an iPhone 14, an iPad Pro 11″, a 1920×900 desktop window. The desktop frame fills its column, always as large as the space allows and locked to its aspect ratio — no zoom needed. The tablet and mobile frames share a Zoom control so you can size them comfortably. Expanding any frame jumps it to 100% — true device pixels — for a native-size check.
How the previews are scaled
Every frame renders its content at the device’s true viewport — 390, 834, or 1920px — so the layout and breakpoints are exactly what that device would show; it’s the real page in a small window, not a squished screenshot. The desktop frame then scales to fill its column (aspect-locked), so it’s always as big as it can be without cropping. The tablet and mobile frames are sized together by the Zoom control.
One honest note about zoom: it’s a display setting, not a real-world measurement — a browser can’t know your monitor’s physical size, so no on-screen zoom is truly “life size” (it would differ on every monitor). Expand any frame for a native, full-size check.
A worked example
The sample layout, shown exactly the way a sandbox page rig shows it — desktop on top (filling the width, aspect-locked), tablet and mobile below with their own zoom. Expand any frame to see it at native size with the X-ray available inside.
Tablet + mobile
Each frame renders at its device's native viewport so Tailwind breakpoints resolve correctly; the Zoom control sizes the tablet + mobile frames together (a display-comfort setting, not a physical-size claim). Frames wrap vertically when the column narrows.
Faithful for layout & breakpoints. Sharpness, retina images, and the mobile address bar are approximations, and Touch mode only affects components that honor it — check a real device for the rest.