HTML Preview & Formatter

Paste HTML and watch it render live on the right, then beautify or minify the markup. Nothing is sent to a server — everything runs in your browser.

Input (HTML)

🔒 The preview runs in an isolated sandboxed iframe, so scripts can't reach the parent page or navigate it. "Open in new tab" opens a plain browser tab instead, so that restriction doesn't apply there — only open HTML you trust that way.

🔗 Share link encodes the HTML you entered directly into the link itself (after the # in the address bar). It's never sent to a server, but anyone with the link can read its contents — don't share sensitive data this way.

How to use

  1. Input: Paste HTML text into the left box, use "Open file" to upload an .html/.htm file, or drag a file onto the page.
  2. Live preview: As you type, the "Preview" tab on the right updates instantly. CSS and JavaScript run normally inside the sandboxed frame.
  3. Switch viewport size: Use the 💻/📟/📱 buttons to check how the layout responds at desktop, tablet (768px), and mobile (375px) widths.
  4. Format / Minify: Use the buttons above to apply indentation (Beautify) or strip insignificant whitespace (Minify), then check the result in "Code view".
  5. Export: Copy the result to your clipboard, download it as an .html file, or use "Open in new tab" to view it full-screen in the browser.

Everything runs inside your browser (JavaScript) — nothing you enter is sent to a server or stored.

How does this tool handle HTML?

Unlike XML, HTML doesn't need to be "well-formed" — browsers silently repair broken markup as they render it. This tool uses the browser's own built-in HTML parser (DOMParser) for the same reason, so there's no separate validation step: unclosed tags or missing attribute quotes get resolved exactly the way a real browser would, and that's what shows up in the preview and the formatted output. The preview renders your raw input directly via an <iframe>'s srcdoc, while "Format" and "Minify" re-serialize the DOM structure the browser parsed into indented or compacted text.

Frequently Asked Questions

Is my HTML sent anywhere?

No. All rendering and formatting happens in JavaScript inside your browser and is never sent to a server.

Is it safe for scripts to run in the preview?

The preview runs in a sandboxed iframe without allow-same-origin. Scripts execute, but they can't access this site's cookies/localStorage or navigate the parent page. "Open in new tab" is different — it opens a plain browser tab where that restriction doesn't apply, so only use it with HTML you trust.

Do relative-path images or CSS/JS files show up in the preview?

Absolute URLs reachable over the network (https://...) load normally. Relative paths to local files on your computer (./style.css, ../img/logo.png, etc.) can't be read by this page for security reasons and won't appear in the preview. To check local files too, serve them with something like python -m http.server and open the page from there.

Why does the formatted output differ slightly from my original?

Formatting re-serializes what the browser's real HTML parser produced from your input. That can lowercase tag/attribute names, auto-close unclosed tags, or fix up incorrectly nested tags — showing you exactly how a browser actually interprets that markup, which is often useful in itself.

Is code inside <script> or <style> reformatted too?

No. JavaScript/CSS inside those tags is preserved verbatim so its syntax is never corrupted — only the indentation of the surrounding tags is adjusted. Content inside <pre> and <textarea> is also preserved as-is, since whitespace there is meaningful.

Can it handle large HTML documents?

Documents up to a few MB work fine within your browser's memory limits. Pages with lots of images or heavy scripts may render slowly in the preview, but that's simply how fast your browser renders that page — not a limitation of this tool.

Related Tools