HTML Minifier
Remove comments, collapse whitespace, and minify HTML for production.
HTML Minifier compacts markup for production with a single click: it strips HTML comments (while preserving conditional <!--[if …]--> ones), collapses inter-tag whitespace, trims line edges, drops empty attributes like attr="", and removes redundant type="text/javascript" / type="text/css" declarations that HTML5 makes unnecessary. Paste into "HTML Input", hit "Minify", and "Minified Output" appears alongside three size cards — Original, Minified, and Saved with byte counts and the percent reduced.
The transform is a pure regex pipeline in lib/htmlMinifier.ts, run on demand (not live), so you can edit freely before committing. Copy or download the result as minified.html; "Clear" resets both panes. Saved percent comes from Blob byte sizes — round((orig - result) / orig * 100) — and nothing is uploaded.
How it works
minifyHtml applies a sequence of regex operations: remove comments with <!--(?![if) so conditional comments survive; trim line edges; collapse whitespace; remove inter-tag gaps with >\s+<; fix <\s+ and \s+>; drop empty attributes via \s+[a-z-]+=""; squeeze spaces around =; strip default script/style type attributes; collapse spaces again; and tidy \s+/>. compareSizes measures input and output with new Blob([s]).size.
State (input/output) lives in htmlMinifierSlice; the Minify button guards empty input with toast "Please enter HTML to minify" and otherwise toasts "HTML minified!". Downloads write minified.html as a local Blob. No network — the regex pipeline runs entirely in the browser.
How to use
- Paste HTML into "HTML Input" (placeholder "Paste your HTML here...").
- Click "Minify" (empty → toast "Please enter HTML to minify").
- Read "Minified Output" (placeholder "Minified result will appear here..." when empty).
- Compare sizes: Original / Minified / Saved cards with byte counts and "-{pct}% ({bytes} B)".
- Copy (icon, toast "Copied to clipboard!") or Download → minified.html (toast "Downloaded!").
- Toggle input and re-minify as needed — the transform is click-triggered, not live.
- "Clear" resets input and output.
Tips
- Conditional comments (<!--[if IE]>) are preserved by the negative lookahead — legacy IE branches survive minification.
- Default type attributes on script/style are stripped — safe for HTML5, but verify templates that rely on non-default types.
- Saved percent uses Blob byte sizes: round((orig - result) / orig * 100), so multi-byte characters count correctly.
- This is a regex minifier — spot-check templates with tricky inline content (e.g. <pre> or inline SVG) before shipping.
HTML Minifier FAQ
Are HTML comments removed?
Yes, except conditional comments — the <!--(?![if) lookahead keeps <!--[if …]--> intact.
Does it remove empty attributes?
Yes — the pattern \s+[a-z-]+="" drops attributes that carry no value.
Which bytes are compared?
compareSizes measures new Blob([s]).size for input vs output, reporting both counts and the saved percentage.
Is any content uploaded?
No — the regex pipeline and Blob download are entirely local in lib/htmlMinifier.ts.
Does it run as I type?
No — minification runs on the "Minify" button click, so you can edit the input without intermediate results.
Credits
- In-repo minifyHtml — Regex HTML minification in lib/htmlMinifier.ts (no html-minifier package)