HTML formatter and minifier
Paste raw or minified HTML and get back cleanly indented markup — or collapse a formatted document back to a single line. It is useful for reading minified pages, tidying copy-pasted markup, and preparing snippets for documentation.
How it works
The formatter tokenises the markup into tags and text, then walks through tracking
the current nesting depth. Opening tags increase depth (and the next line is
indented), closing tags decrease it, and recognised void elements (img, br,
input, meta, link, hr and friends) never change depth so the lines after
them stay aligned. Each level is indented by your chosen unit — 2 spaces, 4 spaces
or a tab. The contents of pre, script, style and textarea are copied
verbatim, because whitespace is significant inside them. Minify mode does the
reverse: it strips comments and collapses the inter-tag whitespace.
Example
This one-line input:
<ul><li>One</li><li>Two</li></ul>
formats (at 2 spaces) to:
<ul>
<li>One</li>
<li>Two</li>
</ul>When to format vs minify
Format (pretty-print) when you need to:
- Read minified HTML downloaded from a production page to understand its structure.
- Tidy markup pasted from an email editor, CMS, or design tool before committing it to source.
- Write documentation snippets that humans will read.
- Debug a rendering issue by visually tracing nesting depth.
Minify when you need to:
- Reduce HTML payload size for a static page where build tools do not already minify.
- Produce compact output for an embed code or widget that ships inline.
- Compare two HTML documents after stripping insignificant whitespace to see only real changes.
What is preserved exactly
| Content | Behaviour |
|---|---|
| Attribute values | Kept character-for-character |
| Text between tags | Kept, surrounding whitespace normalised |
script / style / pre / textarea | Content copied verbatim |
| HTML comments | Kept when formatting; stripped when minifying |
| Void element self-close | Normalised to <br> style (no slash) |
Only the inter-tag whitespace changes — the formatter adds or removes newlines and indentation between tags. Inline elements like <a> and <span> that sit inside text are not pushed to their own lines, preventing unwanted gaps in rendered text.
It is privacy-first: the formatter is plain JavaScript that runs in your browser, so your markup never leaves your device.
Practical uses
Reading minified production HTML: When you download a page’s source from a production site (Ctrl+U), it is often minified to a single long line. Pasting it here gives you readable, indented markup that you can scan for structure, hidden elements, or unexpected content.
Preparing documentation snippets: A well-indented code example is much easier to read in a README or tutorial. Format your snippet at 2 spaces before copying it into a Markdown code fence.
Pre-commit cleanup: Some teams format HTML as part of their linting workflow. This tool gives you a quick browser-based alternative when you do not have Prettier or a local formatter configured.
Minifying for production: If your build tool does not minify HTML, the minify mode strips whitespace and comments to reduce payload size — useful for static HTML files or email templates shipped as strings.