HTML beautifier - format HTML in your browser
HTML in its raw state is often one screen-long line - the minifier emitted the entire `index.html` without whitespace, or React SSR returned compressed markup. The beautifier uses Prettier with the html parser (official). Same as `prettier --write index.html`.
In Gentle mode you get structure preserved according to HTML semantics - block elements (`<div>`, `<section>`, `<header>`) go on their own indented lines, inline (`<span>`, `<a>`, `<em>`) stay on the line so they do not introduce unwanted spaces in rendering.
In Aggressive mode (js-beautify) the HTML is broken wherever possible - every attribute on its own line, every block child on a separate line. May introduce whitespace in rendering, so use it consciously. Accepts `.html`, `.htm`.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five HTML situations:
- SSR output. React/Next renders `<html>` as one line. Paste, read the structure.
- CMS / wp-admin export. WordPress emits posts with ugly TinyMCE HTML.
- Email template. Outlook-friendly HTML is often one file without whitespace. Beautify before sending.
- Minified output from `html-minifier`. Reverse the minification for debugging.
- Generated HTML from Markdown. `marked` / `unified` return HTML without indentation.