Using Device Preview Mode
How to simulate Desktop, Tablet and Mobile viewports (plus a custom size) to test responsive layouts.
Device preview mode simulates how your HTML/CSS/JS, or a framework's rendered output, looks at different screen sizes - without leaving the editor or resizing your browser window.
How to activate it
Use the device switcher above the preview pane to choose a preset, or pick a custom width and height. A zoom control lets you fit a larger device size into the available space.
Available presets
- Desktop
- Tablet (768x1024)
- Mobile
- Custom size (set your own width and height)
Which languages support it
Device preview applies to anything that renders as HTML in the preview pane: HTML/CSS/JS directly, and the rendered output of React, Vue, Svelte, Pug and Markdown.
Tips for testing responsive layouts
Check Tailwind or CSS breakpoints at the Tablet and Mobile presets before relying on the Desktop view alone, and use the zoom control to see the full layout at a glance on a small screen.
Testing on a real device
The simulated frames are a quick way to catch layout problems while you edit, but nothing replaces a real screen. Use "Open in a new HTML tab" to load the live preview full-page in your browser, or generate a Share link or QR code (see Sharing Code) and open it on your own phone or tablet for a true test on real hardware.
Working alongside multiple tabs
If your project spans several tabs - for example separate HTML, CSS and JavaScript files - device preview applies to the combined output, so you do not need to switch device presets per file.
Last updated