Preview HTML layouts at multiple viewport widths simultaneously with device frame overlays.
This tool renders one HTML document in several panes at once, each pinned to a different viewport width and wrapped in a device frame, so a phone, tablet, and desktop layout sit side by side without you resizing anything. Because each pane is a real viewport, media queries are evaluated per pane, and the same stylesheet produces a different layout in each frame. The usual surprise is the frames: the device chrome is illustration, and only the inner width drives the layout, so a breakpoint that falls between the pane widths appears in no pane at all.
A concrete input and expected output from the current implementation.
Input
<style>
.box { background: #FF9500; }
@media (min-width: 600px) { .box { background: #007AFF; } }
@media (min-width: 1000px) { .box { background: #30D158; } }
</style>
<div class="box" style="width:100%;height:120px">box</div> Expected output
The box renders orange in every pane narrower than 600px, blue in panes from 600px to 999px, and green in panes 1000px and wider. The color flips appear exactly at the two breakpoints, so the row of panes reads as a map of where each query boundary falls.
min-width media queries match once the viewport reaches the stated width, and at equal specificity the last matching rule wins, so the blue rule owns 600-999px and the green rule takes over at 1000px. The per-pane colors follow directly from how the queries are defined.
The tool takes the HTML you supply and renders it inside several panes at once, each constrained to a different viewport width. Every pane runs the same document, so anything layout-sensitive, including media queries, percentage widths, fluid units, and flex wrapping, is recomputed against each pane's own width. The result is a set of real renders to compare, not one render resized into a few frames.
Each pane is wrapped in a device frame, phone, tablet, or desktop, drawn around the viewport. The frame labels the class of device a width corresponds to, but it is a visual overlay only: it does not alter the width, resolution, or behavior of the pane inside it. The layout is decided solely by the inner viewport width, so two panes at the same width always match.
No. The frame is a label, and the pane is just a browser viewport at that width. It evaluates media queries exactly as a 375px-wide browser would, but it has no touch input, no mobile Safari engine quirks, and no device chrome or safe-area insets. It answers how the layout looks at that width, not how the device behaves.
Because the CSS does not respond between the widths you picked: either there is no breakpoint between them, or the content already fits at the narrowest pane. Move a pane closer to a breakpoint boundary, or change a query, and the panes diverge. Identical panes usually mean missing breakpoints, not a broken tool.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.