You just pasted a minified HTML dump into a code editor and now you cannot find the closing </div> that is breaking your layout. This formatter tokenizes your HTML (a tolerant parser -- it handles the kind of malformed markup browsers cheerfully render) and reconstructs it with consistent indentation. Inline elements stay on one line; block elements get their own. Attributes are stacked when a tag exceeds a line-width you can configure.
A snippet that looks like this in the wild:
<div class="card"><div class="card-body"><h5 class="card-title mb-0">Invoice #1402</h5><p class="text-muted small">Issued <time datetime="2024-02-11">Feb 11, 2024</time> to Acme Corp</p><ul class="list-unstyled"><li class="d-flex justify-content-between"><span>Subtotal</span><span>$1,200.00</span></li><li class="d-flex justify-content-between fw-bold"><span>Total</span><span>$1,440.00</span></li></ul></div></div>
becomes a tree you can actually debug.
The gotcha that eats an hour per project: <pre>, <textarea>, <code>, and <script> content.
Browsers are supposed to collapse whitespace, but not everywhere. Inside a <pre> block the very first newline after the opening tag is significant. <script> and <style> tags hold CDATA-ish content, not HTML at all. A naive formatter that indents inside <pre> will visibly break your page. This tool detects "raw text" and "escapable raw text" elements by the HTML spec and does not reformat whitespace inside them.
Other things you will hit:
-
Template syntax (
{{ expr }},{% if ... %},<%= expr %>,${...}) is left verbatim. Formatting a Vue, Jinja, ERB, Svelte, Angular, or Handlebars template works without the formatter trying to indent inside the mustaches. -
Conditional comments (
<!--[if IE]>...<![endif]-->) are preserved. -
Custom elements (
<my-component>,<x-foo>) are treated as normal inline or block elements based on the formatter's element registry. Void elements without a closing tag --<br>,<img>,<input>,<meta>,<link>-- are not closed in HTML5 mode. If you need XHTML-style self-closing (<br />), there is a toggle. -
Embedded
<style>and<script>blocks are handed off to the CSS and JS formatters respectively. A single paste of a full HTML document comes back with the HTML indented, the<style>block reformatted, and the<script>block beautified.
If you are scraping an HTML email, sanity-checking server-rendered output, or cleaning up a CMS's WYSIWYG slurry (those things love <p> inside <span>), this is the sanity pass you run first.