HTML Beautifier
Beautify or minify HTML with a live rendered preview, entirely in your browser.
Use the tool ↓About this tool
HTML you receive from a build tool, a CMS export, or a colleague's minified production build is frequently unreadable as raw text — everything jammed onto one line, no consistent indentation reflecting the document's actual nesting, closing tags scattered without visual structure. Beautifying reconstructs that structure: it walks the markup, tracks how deeply each element is nested, and re-renders it with consistent indentation, so a <div> containing a <section> containing a list of <li> elements looks like exactly that nesting on the page, rather than a wall of tags with no visual hierarchy at all.
The reverse operation, minifying, exists for a different reason entirely: shipping less over the wire. Whitespace, indentation, and line breaks in HTML have no effect on how a browser renders the page — they exist purely for humans reading the source — so stripping them out reduces file size with zero visual or functional change, which matters for page load performance, particularly on server-rendered pages where every kilobyte of initial HTML delays the point where a browser can start rendering.
The live preview pane exists because beautifying and minifying are both supposed to be purely cosmetic operations — the rendered output shouldn't change at all, only the source formatting. Rendering the current output directly in the page, in a sandboxed iframe that can't execute scripts or make network requests, gives you an immediate visual confirmation that the transformation didn't silently break anything — a mismatched tag, a dropped attribute, a stray character introduced during reformatting — which is easy to miss by eyeballing the text alone but immediately obvious the moment the layout looks wrong.
A note on scope: this tool formats and renders markup structure — it doesn't validate HTML against the specification (checking for things like missing required attributes or deprecated elements), and it treats inline <script> and <style> blocks as opaque text rather than reformatting the JavaScript or CSS inside them, since those need their own dedicated formatters (also in this hub) to handle correctly. The preview sandbox blocks script execution entirely, both for your safety when pasting HTML from an untrusted source and because this tool is about structure, not runtime behavior.
How to use it
Paste your HTML
Minified, unformatted, or messy markup all work the same way.
Choose Beautify or Minify
Beautify adds readable indentation; Minify strips whitespace for production.
Check the live preview
Confirm the rendered result looks the same before and after formatting.
Copy the result
Copy the formatted output directly into your file or editor.
Example
<div class="card"><h2>Title</h2><p>Body text</p></div>
<div class="card"> <h2>Title</h2> <p>Body text</p> </div>
Common use cases
Reading minified production HTML
Beautify a page's source to inspect its actual structure during debugging.
Cleaning up CMS exports
Reformat auto-generated markup before pasting it into a template.
Reducing page weight
Minify hand-written HTML before shipping it to production.
Code review
Beautify a diff's HTML to review structural changes more easily.
Learning HTML structure
See how nested elements relate to each other through indentation.
Email template cleanup
Beautify HTML pulled from an email builder to review and edit it directly.