HTML Formatter
Indent and line-break minified HTML so nested tags are readable, with void elements and comments handled so the structure still matches the source.
What the formatter does to your markup
Tags are tokenised, whitespace between tags is collapsed, and each element is placed on its own line at a depth that reflects its nesting. Void elements - br, img, meta, input and the rest - do not increase the depth, so a stack of self-closing tags does not drift right forever. Comments and doctype declarations are passed through on their own lines, and text nodes are trimmed to a single line, which is where most of the readability gain comes from.
Two things are worth knowing before you diff the result. Whitespace inside pre, textarea and inline elements is meaningful, and re-indenting can change how those render - keep an eye on output that contains them. And formatting is lossy by design: it normalises whitespace, so it is a reading aid, not a byte-for-byte transform.
Usage example
An email template or a CMS export arrives as one 40 KB line. Paste it, pick 2-space indent, and the tag and depth counters tell you instantly whether the document is 300 tags at depth 6 or something went wrong upstream and nested twice as deep as expected. The formatted output makes the missing closing tag obvious - the depth counter never returns to zero, and the last lines show where the structure ended up.
Formatting is usually step one of a comparison: run the before and after versions through the text diff to see what a build step actually changed, or if the document is generated from structured data, check the source with the JSON formatter first.
Frequently asked questions
Will this change how my page renders?
It normalises whitespace between tags, which is invisible in normal block layout but can alter pre, textarea and inline elements. Review output containing those before publishing, and keep the original if byte-level fidelity matters.
Why did a very deep document not indent past a certain point?
Depth is tracked but not capped - long flat documents simply stay at level 0. If the depth counter looks wrong, an unclosed tag upstream is the usual cause; the formatter reports depth rather than fixing your markup for you.
Can I use it on JSX or XML?
It works on any tag-based markup for reading purposes, but it is tuned for HTML void elements. JSX fragments and XML with arbitrary self-closing tags may indent one level deeper than you expect.