HTML Minifier / Beautifier
Minify or format HTML code with a single click.
By Syed Mubashir Ali · Last updated
Email HTML is where minifying pays twice
Email is the last place where HTML size still hurts directly. Many inboxes clip messages around 102 KB (Gmail famously cuts off anything longer with a '[Message clipped]' link) and email HTML is notoriously bloated: nested tables, inline styles on every element, conditional comments for Outlook. Running a finished template through the minifier can pull a 120 KB email under the clipping limit, which is the difference between your call-to-action being seen or hidden behind a link.
The workflow matters here more than for web pages. Build and test the email readable, send test copies to Gmail, Outlook and Apple Mail, and only then minify the final version for the actual send. Minified email HTML is miserable to debug, and some older clients are whitespace-sensitive in ways browsers aren't, so the minified copy is the send copy, and the readable copy stays in your templates folder.
Reading minified HTML from view-source
Sooner or later you'll right-click 'View page source' on a production site and get one endless line. That's minified HTML doing its job, but it makes learning from the site (or debugging your own deploy) painful. Paste it into the Beautifier and Prettier lays it out: elements nested properly, attributes wrapped, structure visible.
Two tips for this workflow. First, view-source output often includes the entire page (head, scripts, everything) and that's fine; the beautifier handles full documents. Second, if you're hunting one specific thing (say, how a site structured its navigation), use your browser's find on the beautified output rather than scrolling. And when you spot a technique worth stealing, remember the CSS and JS are minified too: the beautifiers for those are one tab away.
How to Use HTML Minifier / Beautifier
- 1Choose 'Minify' to shrink HTML for production, or 'Beautify' to indent it so you can read and edit it.
- 2Paste your HTML into the input box (a full page, a template, a CMS export, or a fragment such as an email snippet), open an .html file, or press 'Try a sample'.
- 3The result appears as you type. Beautifying loads Prettier's HTML formatter the first time, which takes a moment; pick 2 spaces, 4 spaces or tabs for the indent.
- 4Check the result and the size change shown beside it (bytes before and after, and the percentage).
- 5Skim the output once for anything surprising (especially around inline elements and <pre> blocks), then copy it or download it as a file (.min.html when minified).
- 6For email templates, minify only after your final test send: some email clients are pickier than browsers about whitespace.
Frequently Asked Questions
What does the HTML minifier remove?
Comments (except old IE conditional comments), line breaks and indentation, runs of spaces, the space before a closing '>' and whitespace between block-level tags such as <div>, <p>, <li> and <table>. Everything else, including attributes, text and tag structure, is kept as it was.
Will minifying change how my page looks?
It shouldn't. A single space between inline elements is kept, because it's a real word space: '<b>Hello</b> <i>world</i>' still shows two words. The contents of <pre>, <textarea>, <script> and <style> are left untouched, since whitespace inside them matters.
Is inline JavaScript or CSS minified too?
No. Script and style blocks are passed through unchanged so nothing in them can break (collapsing a script's line breaks can turn the rest of a line into a // comment). To shrink them, run the code through the JavaScript or CSS minifier and paste it back in.
What does Beautify do?
It reformats the HTML with Prettier, the formatter used in most code editors: one element per line where it helps, consistent indentation (2 spaces, 4 spaces or tabs, your choice) and wrapped long attributes. It changes only whitespace, so the page renders the same. If Prettier can't parse the HTML, its error message is shown instead.
How much smaller will my HTML get?
It depends on how it was written. Hand-written, well-indented HTML with comments shrinks the most; HTML that a CMS or framework already compacted barely changes. The tool shows the exact saving for your file. If your server sends pages with gzip or Brotli compression, the saving over the network is smaller, but minifying still helps.
Is my code uploaded anywhere?
No. Minifying and beautifying both run in your browser, so your HTML never leaves your device. That makes it safe for unpublished pages and internal templates.
Can I minify HTML that contains Vue, React or Handlebars templates?
Yes, with one caveat. Template expressions like {{ name }} are text as far as the minifier is concerned, so they're left intact, but the minifier doesn't understand framework syntax, so always test the output. In practice, whitespace-only minification is safe for templates; just don't expect it to be clever about them.
About HTML Minifier / Beautifier
HTML has a split personality: developers write it indented and commented so humans can read it, but browsers ignore almost all of that whitespace. The HTML Minifier removes the parts browsers don't need (comments, indentation, redundant spaces) and shows you the exact byte saving. The Beautifier goes the other way, taking crushed machine-generated HTML and indenting it with Prettier so you can read it, find the unclosed div, or review what changed.
The minifier earns its keep by knowing where whitespace is content. A space between two inline elements is a word space on the page ('<b>Hello</b> <i>world</i>' must keep it), while whitespace between two block divs is nothing. <pre>, <textarea>, <script> and <style> are held aside entirely and returned byte-identical. That caution is the difference between this and a regex that collapses everything and breaks your page in subtle ways.
Both run in your browser, so unpublished pages, client templates and internal tools never leave your machine. Minify as the final step before deploying or sending (never in your source files) and use the CSS and JavaScript minifiers for what's inside the style and script tags.