Preview responsive layouts at the correct breakpoint

11 August 2026
The artboard now evaluates your site's media queries at its own width, so responsive layouts behave exactly as they do on real devices.

Responsive layouts now behave the way they're meant to inside the editor.

The artboard includes presets for desktop (1440px), laptop (1280px), tablet (834px), and phone (390px), and it can also be resized to any width in between. As the artboard changes size, your site's own media queries are evaluated against the artboard instead of the browser window.

That means responsive layouts switch exactly as they would on a real device. A multi-column layout collapses at the same breakpoint, navigation changes when your CSS says it should, and every responsive rule follows the width you're editing.

Everything else about the CSS cascade stays the same. Stylesheets, selector specificity, and media features such as hover, prefers-color-scheme, print, and complex media query expressions continue to behave normally. Only the reported viewport width changes.

Viewport units such as vw still resolve against the real browser viewport, matching standard CSS behavior.

Every edit is also recorded with the artboard width it was made at, allowing your AI agent to distinguish between changes intended for the base layout and changes made for a specific breakpoint. More screen size presets are on the roadmap.

Open a page from your project and switch the artboard to phone width.