HTML Preview

How to use it

1. Paste HTML into the left panel — a full document with a head section, or just a fragment with a style block.
2. Press Render, or wait: the preview refreshes automatically a moment after you stop typing.
3. Switch the Viewport width between 375, 768, 1024 and full width to see responsive rules take effect.
4. Read the status line for the byte count of what you pasted and how long the last render took.
5. Press Clear to empty both the source and the frame.

The frame is a sandboxed iframe with no script permission, so pasted markup cannot run code, open windows or navigate the page around it.

Common use cases

• Checking a media query — drop a stylesheet in, switch to 375 px and confirm the mobile branch actually fires.
• Reviewing a snippet before pasting it — see what a fragment looks like when rendered instead of guessing from the source.
• Testing layout without a dev server — a single card, a grid or a form can be inspected without starting a project.
• Sanitising markup from somewhere else — rendering unknown HTML in a sandbox keeps it away from your own page context.

Why it stays private

Rendering happens inside an iframe on the page you already have open. The markup never travels anywhere, which means unreleased pages and internal templates can be checked safely.

FAQ

Q: Why did my JavaScript not run? A: The sandbox deliberately omits script permission. This is what makes it safe to preview markup you did not write. CSS, animations with CSS keyframes and form controls still work.

Q: Do media queries really respond to the width selector? A: Yes. The selector changes the frame width, and the document inside evaluates its own media queries against that width.

Q: Can I preview a page that loads external CSS or fonts? A: Only if the markup references it and the network is reachable, because external requests are not blocked. For a fully offline preview, inline your CSS in a style block.