Skip to main content
ToolsBay

HTML Beautifier

Re-indent minified or messy HTML into readable markup.

Runs entirely in your browser — nothing is uploaded

Your HTML

1 line

Formatted HTML

1 line

Frequently asked questions

Will re-indenting change how the page renders?

Not with the default setting. Whitespace is significant inside inline elements and in <pre>, so the formatter respects each element's CSS display value rather than reflowing everything blindly.

Can it fix broken HTML?

No. It formats markup it can parse. An unclosed tag or a stray angle bracket produces a parse error rather than a guess, because guessing would silently change your document structure.

Does it handle Vue or Angular templates?

Yes — switch the parser above. Those templates use directive syntax that a plain HTML parser rejects.

Why minified HTML is hard to read

Markup that arrives from a build pipeline, a CMS export or a “view source” on a production page is usually stripped of every line break. The structure is intact but invisible — finding the element you care about means scanning a single enormous line.

Beautifying restores the indentation so nesting is visible again. This uses Prettier, the same formatter most JavaScript projects already run, so the output matches what your editor would produce.

Whitespace is not always insignificant

HTML collapses runs of whitespace, but it does not remove it entirely. The space between </span> <span> renders as a real gap, and content inside <pre> preserves every character exactly. A formatter that indents naively can insert or remove visible spacing, which is why this one considers each element's display type before reflowing it.

For the styles and scripts that go with your markup, see the CSS minifier and JavaScript formatter. To display markup as text on a page, escape it with the HTML entity encoder.

All developer tools