Labs

Responsive Breakpoint Previewer

See one page at every breakpoint at once — paste HTML or a URL and compare 320, 375, 768, 1024 and 1440 px side by side.

Paste HTML or enter a URL
Page —
Tip: paste only the parts you are testing — a component, a hero, a form.
Breakpoints —
Device frames appear here — paste HTML or fetch a URL
Settings Portrait · light · synced scroll
How It Works

How to Use Responsive Breakpoint Previewer in 3 Steps

1

Give it a page

Paste HTML (with inline CSS/JS) or an .html file — or enter a URL and press Preview; the page is fetched and rendered with its original base URL so images and stylesheets resolve. If a site blocks fetching, paste its source instead.

2

Compare widths

Each frame is a real viewport at the exact pixel width shown, scaled down to fit. Toggle widths with the chips, add a custom one, switch to landscape or dark scheme, and scroll one frame to scroll them all.

3

Fix and repeat

Edit the HTML on the left and the frames re-render live. Press the ⤢ button on any frame to open it full size in a new tab for a closer look.

FAQ

Responsive Breakpoint Previewer — Frequently Asked Questions

Why can’t it show a live third-party site in an iframe?

Most sites send X-Frame-Options or a CSP frame-ancestors header that forbids embedding, so a live iframe would simply be blank. Instead the tool fetches the HTML (directly or via a public read-only relay, see Privacy) and renders that snapshot with a <base href> so assets load. Pages behind logins or heavy client-side apps may render partially — paste the rendered DOM from DevTools in that case.

Are the widths real viewports?

Yes. Each iframe is laid out at the exact CSS pixel width (and height) you see, so media queries, container queries and vw units behave as on a device of that size; only the visual scale is reduced to fit the grid. Device pixel ratio and touch events are not simulated.

Which widths are included?

320 (small phones), 375 and 390 (iPhone), 414 (large phones), 768 and 820 (tablets), 1024 (small laptop), 1280 and 1440 (desktop). Add any custom width between 200 and 3000 px.

Is pasted HTML safe to run?

Pasted pages run in a sandboxed iframe without access to this page, cookies or storage. Untick “Allow scripts” for a pure layout check with JavaScript disabled.

Can I take screenshots?

Use the ⤢ button to open a frame at full size, then your browser or OS screenshot tool. Cross-origin content inside the frames prevents the page from exporting a PNG directly.

Is my input sent anywhere?

No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.

Why does fetching sometimes fail — and what is the relay?

Browsers block JavaScript from reading other websites directly (CORS). The tool first tries a direct request; when the site forbids it, the URL only is sent to a public read-only relay (allorigins.win, then codetabs.com) that fetches the page and returns its HTML. The relay sees the URL you typed, nothing else — Toolity has no server and keeps no record. If the relay is busy or the site blocks bots, paste the page source instead: that path is 100% local.