HTML Formatter

Making generated markup readable again

Most HTML you need to read was not written by a person. It came out of a template engine, a CMS export, a page-builder, or the browser's own innerHTML — and it arrives as one enormous line, or with indentation that stopped tracking the nesting several edits ago. Before you can find the element you are looking for, you have to give the document back its shape.

What re-indenting does and does not change

The formatter adds line breaks and indentation between block-level elements only. That is safe for layout, because whitespace between block elements is collapsed by the rendering engine anyway. Three things are deliberately left untouched:

• Whitespace-sensitive elements. Content inside pre, textarea and script is copied byte for byte. Re-indenting a pre block would change what the user sees; re-indenting a textarea would change its value.
• Inline elements. Breaking before an a or a span introduces a rendered space that was not there before, which is enough to shift a layout. Inline runs stay on their line.
• Template syntax. Handlebars, Jinja, Liquid and similar delimiters pass through as opaque text rather than being treated as markup.

It re-indents, it does not repair

If a tag is never closed, the formatter reports where the nesting stopped making sense instead of silently inventing a closing tag. A tool that guesses at your intent produces markup that looks fixed and renders differently, which is worse than an honest error. Unclosed tags are by far the most common cause of a formatted document that suddenly looks over-indented from one point onward.

Minifying

The reverse direction strips the whitespace between block elements and removes comments. It is a structural minifier, not a full optimiser — it will not rewrite attributes, drop optional closing tags or inline your CSS. For production you want the minifier built into your bundler; this is for quickly checking how much of a file is formatting.

Nothing is uploaded

Markup routinely contains draft copy, internal URLs, customer names in server-rendered pages and analytics identifiers. Parsing happens entirely in this tab, so none of that leaves your machine.