HTML Beautifier

What this tool does

HTML Beautifier reformats minified or inconsistently indented HTML markup into clean, properly nested, readable code with an adjustable indent size, using the js-beautify library entirely in your browser.

Minified HTML, or a raw "view source" dump from a build tool, is nearly impossible to read or edit until it’s reformatted with proper indentation reflecting its actual nesting structure.

This tool restructures it with proper nesting and your chosen indent width, using the same formatting engine behind many code editors, entirely inside your browser.

How to use HTML Beautifier

1. Paste your minified or messy HTML.
2. Adjust the indent size if you prefer something other than 2 spaces.
3. Copy or download the formatted output.
4. Re-run it any time you paste in a different snippet.

Tips for better results

• Beautifying doesn’t change what the HTML actually renders as, only its formatting (whitespace, line breaks, indentation reflecting nesting), the visible page is identical before and after.
• Properly indented HTML makes it much easier to visually spot a missing closing tag or incorrect nesting level, a common source of layout bugs.
• This is the reverse operation of the HTML Minifier tool, useful for turning a minified production page’s source back into something readable for debugging.
• If the input HTML has unclosed or mismatched tags, the beautifier will still attempt to format it, but the resulting indentation may look unexpected since it reflects the (possibly broken) actual nesting.

Common use cases

• Making minified production HTML readable again for debugging.
• Reformatting a raw "view source" dump into properly indented, readable markup.
• Cleaning up someone else’s inconsistently indented HTML to match your own style.
• Visually spotting missing or mismatched tags by examining consistent indentation.

Common mistakes to avoid

• Expecting beautifying to change what the page actually renders; it only reformats whitespace and indentation, the visible result is completely identical before and after.
• Assuming unexpected indentation after beautifying means the tool is broken; it often instead reveals an actual mismatched or unclosed tag in the source that was hidden by the original formatting.
• Using a different indent width inconsistently from one file to the next; settle on one convention (2 or 4 spaces) and apply it project-wide for the most readable, consistent result.