HTML Preview

Paste HTML and see it rendered live in a sandboxed preview.

Part of Dev Utils · Built by Sandeep Upadhyay

  • Live HTML rendering in browser
  • Sandboxed iframe preview
  • Real-time DOM output

When to use HTML Preview

  • Testing a CSS snippet quickly: Verify that a CSS selector, animation, or layout rule works as expected without creating a local project file.
  • Sharing a reproducible bug report: Isolate the failing HTML and CSS into the preview to confirm the bug exists in isolation before filing an issue or asking for help.
  • Demonstrating HTML email layouts: Preview table-based HTML email layouts in a browser context to check spacing and inline styles before sending to an email client tester.
  • Prototyping a component in isolation: Build a button, form field, or card component in isolation before integrating it into a framework - faster than setting up a Storybook story.

How HTML, CSS, and JavaScript are previewed safely in the browser

The HTML Preview tool renders your code inside a sandboxed iframe. The sandbox attribute on the iframe element restricts what the previewed code can do: by default, the preview allows scripts (sandbox="allow-scripts") but blocks same-origin access, popups, form submissions, and top-level navigation. This means the code you preview cannot access cookies, localStorage, or any data outside the iframe's isolated context - it is safe to try untrusted snippets.

When you type into the editor, the preview updates using a debounced srcdoc injection. The srcdoc attribute lets the parent page write an HTML document directly into the iframe without a separate URL or server request, which means the preview renders immediately from local memory. This approach also avoids mixed-content issues that would occur if the iframe tried to load an http:// URL from an https:// parent page.

The editor supports three panels - HTML, CSS, and JavaScript - which are concatenated into a single HTML document before injection: the CSS is wrapped in a <style> tag placed in the <head>, and the JavaScript is wrapped in a <script defer> tag at the end of the <body>. Errors thrown by the JavaScript are caught by a window.onerror handler inside the iframe and displayed in an error banner above the preview without crashing the editor. This setup mirrors the structure used by CodePen and JSFiddle, but runs without any backend.

Try HTML Preview

Interactive HTML Preview - coming soon