iframe Render Tester
Paste HTML and watch it render inside a sandboxed iframe at any viewport, then copy the exact embed snippet.
Local workspace
Named projects in IndexedDB · Local only — never synced to our servers. Worksp…
Batch workspace
Format multiple files locally in one run.
Debugging a layout in the page you are building means fighting the page: inherited styles, a shared viewport width, and one broken tag that can reflow everything. An iframe removes all three. Its srcdoc attribute takes a whole document as a string, so the markup you paste gets a clean document, an isolated cascade, and a viewport whose width you set — which is how a 375px breakpoint becomes something you can look at without resizing the browser or opening devtools. The sandbox attribute is the other half. With no tokens it blocks scripts, forms, popups, dialogs, and plugins; every token you add hands one capability back, and toggling them one at a time turns a vague "the embed does not work" into a specific missing permission. This tool writes both halves for you: it escapes your markup into srcdoc, assembles the sandbox list, and prints the finished tag, so the preview above is not an approximation of the embed — it is the embed, parsed back out of the snippet you are about to copy.
Common errors and fixes
Blocked script execution in 'about:srcdoc'
The frame's sandbox has no allow-scripts token. Turn on sandbox: allow-scripts, or leave it off deliberately to check the layout without JavaScript.
Blocked form submission to '' because the form's frame is sandboxed
Turn on sandbox: allow-forms. Without it a submit is refused, which looks like a dead button.
Ignored call to 'alert()'. The document is sandboxed
Turn on sandbox: allow-modals, or replace the dialog with something you can see in the render, such as writing to an element.
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window'
Storage needs an origin, and a sandboxed frame has none. This is the one case for allow-same-origin — and the reason the preview refuses to combine it with allow-scripts.
Refused to display 'https://example.com' in a frame
That page's X-Frame-Options or CSP frame-ancestors header forbids framing, and no attribute on your side overrides it. Only the site's own server can allow it.
Blank preview after pasting a full page
A document with its own <!doctype html> is used as-is rather than wrapped, so a missing <body> or an unclosed <head> tag renders as nothing. Run it through the HTML Formatter to find the unbalanced tag.
Options
| Option | Description |
|---|---|
| Viewport | The width and height given to the iframe. Width is what your media queries respond to, so this is how you see a breakpoint without resizing the window. |
| Custom width (px) | Used when Viewport is set to Custom size. Clamped to 120–2560px. |
| Custom height (px) | Used when Viewport is set to Custom size. Clamped to 120–2560px. |
| Wrap fragment in a document | Adds <!doctype html>, a UTF-8 charset, and a responsive viewport meta around your markup. Skipped automatically when you paste a whole document. |
| Colour scheme | Sets color-scheme on the wrapper document, so prefers-color-scheme rules and form controls render in the mode you want to test. |
| sandbox: allow-scripts | Lets <script> in the frame run. Off means the markup renders but nothing executes, which is how you tell a layout bug from a script bug. |
| sandbox: allow-forms | Lets a form submit. Off means submissions are blocked, so you can render a form without it navigating anywhere. |
| sandbox: allow-same-origin | Keeps the frame on the embedding page's origin. Combined with allow-scripts it removes the sandbox entirely, so the preview here renders without it and says so; the snippet still carries your setting. |
| sandbox: allow-popups | Lets the frame open windows with target=_blank or window.open. Off is why a link in a sandboxed frame can look dead. |
| sandbox: allow-modals | Lets the frame call alert, confirm, and prompt. Off is why those calls return silently instead of showing a dialog. |
FAQ
What does this tool actually render?
Your markup, placed in the srcdoc attribute of a sandboxed iframe. The preview and the snippet in the output panel are the same thing: the snippet is parsed back and rendered, so what you see is what you would ship.
Why use an iframe instead of dropping the HTML on the page?
Isolation. Inside a frame the markup gets its own document, its own CSS cascade, and its own viewport width, so a global stylesheet cannot leak in and a stray closing tag cannot break the surrounding page. It is also the only way to see a media query fire at 375px without resizing your browser.
Why does the viewport width matter more than the height?
Because media queries and container-relative units respond to the frame's width. Setting the viewport to 375 × 667 makes the frame a 375px-wide viewport, which is what a phone breakpoint measures — the height only decides how much you see before scrolling.
What do the sandbox flags do?
A sandbox attribute with no tokens blocks everything: scripts, forms, popups, dialogs, and plugins. Each token you add gives one capability back. allow-scripts lets script tags run, allow-forms lets a form submit, allow-popups lets target=_blank open, and allow-modals lets alert and confirm show. Turning them off one at a time is the fastest way to find which capability a broken embed is missing.
Why is allow-same-origin not applied to the preview?
Because allow-same-origin together with allow-scripts is not a sandbox. The framed document would share this page's origin and could read and rewrite it, so pasted or shared markup would be running with this site's privileges. The preview drops that one token and tells you it did; the snippet you copy keeps whatever you chose.
My script does nothing in the preview. Is it broken?
Check allow-scripts first, then remember what a fresh sandboxed document does not have: no parent variables, no localStorage without allow-same-origin, no alert without allow-modals, and no cookies. Scripts that depend on any of those need the matching token, or need rewriting.
Can I test whether someone else's site can be embedded?
No, and that is a different question. Framing another origin is refused by its X-Frame-Options or Content-Security-Policy frame-ancestors headers, which only the server sends. Paste the response headers into the HTTP Headers Inspector to read them; this tool renders markup you supply.