Preview pasted HTML in a sandboxed iframe — no scripts, no forms, an opaque origin with no reach into this page — plus a formatted source view that refuses to tidy markup whose nesting is broken. Scripts stay off unless you switch them on, knowingly. Free, no sign-up — runs locally in your browser.
Why preview HTML in a sandbox?
Half the HTML you ever look at is not yours: a component from a
colleague, a snippet from a forum answer, a fragment a
generator produced, markup from an email template somebody
swears is fine. Rendering it to see what it looks like is the
most natural step — and doing that by pasting it into a live
page of your own site would hand unknown markup your page's
full powers. The sandbox attribute exists for exactly this
gap: the preview iframe renders the markup visually while the
browser holds it at arm's length — no scripts, no form
submissions, no popups, and an opaque origin that cannot touch
this page, its cookies or its storage. You get your eyes on
the result; the markup gets nothing on you.
How to use this tool
- Paste the HTML, upload a file, or drop one on the panel, then press Preview.
- Leave Run scripts off unless the fragment is your own and its behaviour is the point. Turning it on re-renders immediately, in the same isolation, with scripts permitted.
- Read the status line: it reports the element count and whether the markup is well-formed, straight from the same structural engine as the HTML Validator here.
- Use Show formatted source to read the markup tidied — or to see the exact structural error when it is not well-formed — and download the formatted version if it is sound.
The sandbox policy, in full
The preview iframe always carries the sandbox
attribute, and its token list is the whole story. By default
the list is empty: the document cannot run
scripts, submit forms, open popups, navigate the top page, or
use most device APIs, and it is assigned an opaque origin, so
even its inline event handlers (which count as scripts) are
inert. The scripts toggle adds precisely one token —
allow-scripts — and never
allow-same-origin: a scripted preview can execute,
but it executes as a stranger, in an origin with no access to
this site's data. No setting in this tool grants forms,
popups or same-origin access, at any point. That policy is
fixed in the tool's code, not in a promise in this paragraph.
Worked example
Paste a component like the one below and the preview shows the
card as a browser would lay it out — the inline styles apply
because styling needs no permission — while its
onclick does nothing at all, because handlers are
scripts and scripts are not allowed:
<div style="font-family: sans-serif; border: 1px solid #ccc; padding: 16px; max-width: 320px">
<h3 style="margin-top: 0">Release notes</h3>
<p>Version 2.4 ships the new exporter.</p>
<button onclick="alert('gotcha')">Click me — I do nothing</button>
</div>
Flip the scripts toggle on — for your own code — and the same
button suddenly works. That contrast is the sandbox, made
visible.
Frequently asked questions
Is it safe to paste HTML I don't trust into this viewer?
That is exactly what the sandbox is for. The preview runs in an iframe with the sandbox attribute and — by default — no permissions at all: scripts cannot run, forms cannot submit, and the document gets an opaque origin, meaning it has no access to this page, its storage or your session on this site. Even with scripts enabled (below), the preview never gets allow-same-origin, so scripted markup runs in a throwaway origin with nothing to reach. What a sandboxed preview cannot protect is your eyes: a pasted page can still show you a fake login form. It just cannot do anything with what you type — the form has nowhere to send it.
Why is there a 'run scripts' toggle, and why is it off?
Because sometimes the thing you are previewing is a component whose whole point is its JavaScript, and a static preview would show you an empty shell. The toggle adds exactly one sandbox permission, allow-scripts. It is off by default because the safe state should be the state you land in, and it is labelled with what it does because 'scripts on' is a real change in risk: the pasted code will execute in your browser (in its isolated origin). Leave it off for HTML from anyone else; turn it on for your own components, knowingly.
My preview looks unstyled / the images are missing. Why?
A pasted fragment is rendered alone: no external stylesheets, fonts or images are fetched for relative URLs, and the page your fragment came from is not around it. Inline styles and style elements inside the fragment do apply (styling needs no sandbox permission), and absolute https: URLs for images generally load if the viewing browser allows the mixed content. For a faithful render of a full page, save it as a file and open it — this viewer is for fragments, components and quick 'what does this markup look like' checks.
What does the formatted source view show?
Your markup, re-indented with the same formatter this site's HTML Formatter uses — which checks nesting before it formats. So a well-formed document gets a clean, readable source view you can copy or download, and a broken one gets the structural error with a line and column instead of a tidied fiction. Either way the preview still renders: browsers render broken HTML on purpose, and seeing what the browser makes of a mistake is often the fastest way to understand it.
Does anything I paste get uploaded or stored on a server?
No. The preview is constructed entirely in your browser from the text you pasted, the draft autosave (if you leave it on via the note under the box) lives in your browser's local storage, and no request carries your HTML anywhere. Close the tab and the preview is gone; clear the draft and the stored copy is too.
Dev