HTML Viewer
Type or paste HTML on the left and watch it render on the right, live, as you type. The preview runs inside a sandboxed iframe so the markup is shown exactly as a browser would lay it out, without letting the code touch this page. Scripts are blocked by default and can be enabled explicitly when you need to test interactive markup. A one-click formatter re-indents tags, and you can pop the result into a new tab. Nothing is uploaded: your HTML is rendered entirely in the browser, so you can preview private or work-in-progress pages without sending them anywhere.
How to use the HTML Viewer
Paste your markup into the HTML source box, or click Load sample to start from a small example page. The preview on the right updates a fraction of a second after you stop typing, so you can edit a tag and immediately see the effect. You can paste a full document with <!doctype html>, <head>, and <style>, or just a fragment of body markup — the preview renders whatever you give it.
Use Format to re-indent the source: it adds a level of indentation after each opening tag and removes one before each closing tag, which untangles markup pasted as a single line. Clear empties the editor. Open preview in new tab builds a temporary blob: URL from your current HTML and opens it as a standalone page, handy for checking how it behaves at full width or for printing. Scripts are disabled in the preview by default; tick Allow scripts in preview only when you need to test markup that depends on JavaScript, and untick it again afterward.
How a live HTML previewer works
When a browser loads HTML it parses the text into a tree of nodes called the DOM, resolves the CSS that applies to each node, and paints the result to the screen. Reading raw markup, you have to simulate all of that in your head: which tags nest inside which, what the cascade does, how a missing closing tag shifts the layout. A live previewer removes the guesswork by doing the real parse-and-render for you and showing the outcome next to the source, so the feedback loop between editing a tag and seeing its effect shrinks from a save-and-reload cycle to a fraction of a second. That tight loop is what makes it fast to prototype a layout, debug a stubborn element, or learn how a feature behaves.
The catch is that rendering arbitrary HTML is also a way to run arbitrary code. A naive previewer that drops your markup straight into the page would execute any <script> it contains and let inline event handlers run with full access to the surrounding document, which is exactly how cross-site scripting works. The safe approach, and the one this tool uses, is a sandboxed <iframe>. The HTML is handed to the frame through its srcdoc attribute and the frame carries a restrictive sandbox attribute that, by default, blocks scripts, forms, popups, and same-origin access. Your markup renders in isolation: it can show you a layout but it cannot read cookies, reach into this page, or make network requests.
When you enable scripts, the tool grants only allow-scripts and deliberately withholds allow-same-origin. That combination lets your JavaScript run for testing while keeping the frame in an opaque origin, so it still cannot read this site's storage or DOM. Everything happens locally in your browser. The HTML you paste is never sent to a server, which means you can preview an internal page, a client mockup, or anything confidential without it leaving your machine — a real difference from online editors that round-trip your code through their backend.
Common use cases
- Prototyping layouts. Sketch a section of markup and CSS and see it render instantly without setting up a project.
- Debugging markup. Drop in a broken snippet and watch how the browser actually nests and renders it.
- Learning HTML and CSS. Change a tag or style rule and immediately see what it does.
- Previewing email or template fragments. Check how a chunk of generated HTML looks before pasting it elsewhere.
- Private review. Render an internal or client page locally instead of pasting it into an online editor.