Beautify
HTML Beautifier
HTML beautify is how you recover from a minifier, a CMS, or a colleague who never pressed Return. Indent the tags so you can see headers inside headers and lists inside cards. It is not a browser. It is a map.
Drop a file on the left. Drafts stay in this browser. Shortcut: Ctrl or Cmd + Enter to run.
How this html beautifier works
- Paste or drop a .html file into the input on the left.
- Flip options if you see them (comments, indent, case). Defaults are the safe ones.
- Hit Run, or Ctrl / Cmd + Enter. Leave “Process on server” off unless you mean it.
- Read the status line, then copy, download, or jump to a related tool.
Indent is a map, not a religion
The algorithm walks tags, tracks depth, and leaves void elements (img, br, meta) as leaves. It is the right shape for fragments and emails. It is the wrong shape if you expected Prettier’s HTML plugin with your exact wrap attribute.
Run it, read the outline, then move. If the original was minified for production, beautify in a scratch file. Do not commit beautified vendor HTML unless you now own that file.
Frequently asked questions
What does HTML beautify actually indent?
Tags, by nesting. Void elements like <img> and <br> stay leaves. A mashed <div><p>Hi</p></div> becomes a small tree you can scan. It is a map of the document, not a new design system.
Will beautify fix broken HTML?
Not really. Unclosed tags may indent in a confusing way. If the question is “is this even nested legally?”, use an HTML validator. Beautify assumes you already have tags; it just puts them on separate lines.
Example of beautifying a fragment?
Before: <ul><li>Minify</li><li>Format</li></ul>. After: each <li> on its own indent under <ul>. Same list. Easier to spot a missing </ul>.
Should I commit beautified vendor HTML?
Only if you now own that file. Beautifying a third-party widget you cannot update turns every vendor bump into a huge diff. Beautify in a scratch buffer, steal the bit you need, leave the rest.
Fun fact about HTML indent?
Fun fact: browsers do not care about your indent. Users never see it. Beautify is 100% for the next human — often you, after a CMS ate the line breaks.
Beautify vs format vs minify for HTML?
Beautify/format: readable. Minify: small. If a page looks “broken” after minify, beautify a copy and look for inline spaces you accidentally deleted. They are inverses, not enemies.
What about SVG inside HTML?
SVG is XML-ish. Beautify will indent <svg> and <path> like tags. Path d="M0 0L10 10" data stays on the attribute. Do not expect a drawing editor. For SVG-only files, the SVG beautifier is the same idea with SVG copy around it.
Can beautify change how the page looks?
It should not, with the same inline-space caveat as minify in reverse: if you insert newlines between inline tags, you might insert a text node that becomes a gap. Rare, but real. Block-level markup is safe.