Developer Tools
HTML Live Preview
Write HTML on the left and see it render live on the right. Sandboxed iframe, device-size frames, and one-click downloads, all in your browser.
Paste a full HTML document or a fragment. The preview updates as you type.
Sample HTML
Load a starting point and tweak it. Replaces whatever is in the editor above.
Preview settings
Sandbox
Scripts off, forms off, popups off. Safest. External images and CSS still render.
Device frame
Preview stretches to fit the panel width.
Wrap fragment
Source already looks like a complete document, wrapper not applied.
Live preview
Rendered inside a sandboxed iframe. Same-origin access is always blocked.
The preview iframe runs with sandbox="(empty)". Scripts inside the preview cannot read this site's cookies, local storage, or any parent window data because allow-same-origin is never granted. External images, stylesheets, and fonts still load if the remote server allows it.
How to use
- Paste or type your HTML into the editor on the left, or click a sample (Starter page, Fragment, Form, Table, Flex layout) to load one.
- If your source is a fragment without an <html> element, keep Wrap fragment on so the preview shows it inside a minimal HTML5 document.
- Pick a sandbox level: Strict for untrusted pastes, Allow scripts to run inline JavaScript inside the preview, or Standard for scripts plus forms and popups.
- Switch device frames to Desktop, Tablet, or Mobile to verify responsive layouts at common widths, or leave it on Auto to fill the panel.
- Use Copy source, Download .html, or Open preview in new tab to take the result with you. Click Clear to start over.
About this tool
HTML Live Preview is a browser-only HTML viewer and renderer. Paste a full HTML5 document or a single fragment on the left and a sandboxed iframe on the right renders it as you type, with React 19's deferred-value scheduling keeping the editor snappy on long pastes. A Wrap fragment toggle adds a minimal HTML5 document shell with a system font and sensible margins when the source has no top-level <html> element, so a bare <button> or <div> renders centered and readable instead of flush-left raw text. Three sandbox levels cover the common needs: Strict (sandbox attribute empty, scripts and forms off, safest for untrusted pastes), Allow scripts (run inline and external JavaScript inside the preview only), and Standard (scripts, forms, popups, and modal dialogs). The same-origin flag is never granted in any mode, so scripts running inside the preview cannot read this site's cookies, localStorage, or any parent-window data. Device frames lock the preview to Desktop 1280, Tablet 768, or Mobile 375 pixel widths to verify responsive layouts at the breakpoints your CSS targets, or stretch to fit on Auto. A live byte counter shows how much HTML is being sent to the iframe (with a 1 MB safety ceiling that protects the browser from runaway pastes), and an updating indicator appears while a long render catches up to your typing. Sample pages cover a starter document, a fragment snippet, a sign-in form, a striped data table, and a hover-aware flex card row so you can study a clean working example for each shape. Copy the source, download a self-contained .html file, or open the rendered preview in a new browser tab as a blob URL for full-screen viewing. Useful for trying out a CSS rule before you save it, sanity-checking a snippet from Stack Overflow or an AI chat, previewing an email template, verifying how a fragment from a CMS will look, debugging an HTML form before pasting it into a build, and any time you want to see HTML render without spinning up a project. Everything is local: the HTML you type or paste here is not uploaded.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
HTML Formatter
Pretty-print and minify HTML with indent, wrap, and quote controls.
Open tool
DeveloperHTML Sanitizer
Allow-list HTML sanitizer that strips scripts, inline events, and javascript: URLs.
Open tool
DeveloperHTML Minifier
Compress HTML safely: collapse whitespace, strip comments, drop attribute quotes, shrink boolean attributes.
Open tool
GeneratorHTML Boilerplate Generator
Build a clean HTML5 starter template with meta, OG, JSON-LD, and a CSS reset.
Open tool
DeveloperHTML to JSX Converter
Paste HTML, get React JSX with class to className, camelCase attributes, and style objects.
Open tool
TextMarkdown Editor
Live markdown editor with toolbar, preview, table of contents, and .md or .html download.
Open tool