📦 HTML / CSS / JavaScript Minifier
Minify or beautify HTML, CSS, and JavaScript. Strips comments, collapses whitespace, shows size savings.
🔗 Related Tools
📖 Where people get stuck
Strip whitespace and comments from HTML, CSS or JavaScript — or expand them back out. Everything runs in the browser. This is not a substitute for a build pipeline: it compresses at the lexical level only, with none of the identifier mangling, dead-code elimination or tree shaking that terser or esbuild perform. It is for squeezing a snippet once, or making an unreadable one readable again.
| Case | What happens | What to do |
|---|---|---|
| The JavaScript stops working | Almost always omitted semicolons. Code that relied on newlines to end statements gets joined into one statement when the newlines go. Automatic semicolon insertion in JavaScript depends on where the line breaks are, so removing them changes the meaning. Conversely, code with a newline right after return breaks if that newline is preserved. |
Run it through Prettier or similar first so semicolons are explicit, then minify — and always execute the result. Note that when minified code throws, a stack trace is unreadable without a source map. Generate production code, and its source map, at build time rather than here. |
| Minified HTML loses its spacing | Whitespace in HTML can be significant. The single space between <span>A</span> and <span>B</span> renders as a word gap; remove it and you get AB. Layouts that place inline-block elements side by side sometimes rely on that space too. |
As a rule, collapse whitespace between block elements only and keep it between inline ones. Never touch the contents of <pre> or <textarea>, where newlines and indentation are displayed verbatim. If the judgement call is tiresome, skip HTML minification and let gzip or Brotli do the work — the transfer saving is far larger and the risk is nil. |
| Some CSS rules stop applying | The classic loss is a legacy browser hack. Notations such as *zoom, _height, !ie and /*\*/ are deliberate syntax errors designed to be read by one browser only, so correct processing removes them. Icon-font escapes such as content: "\f101" and whitespace inside @media queries can also break, depending on the implementation. |
Always look at the real page once before shipping minified CSS. If IE hacks are still in there, they are almost certainly obsolete, and deleting them deliberately is healthier than having a minifier eat them. Longer term, put PostCSS with cssnano in your build: it is safer and also handles vendor prefixes and merging duplicate rules. |
Do not overestimate what minification buys you. Text is transferred gzipped or Brotli-compressed anyway. A 30 % reduction from stripping whitespace typically shrinks to a few percent after compression, because compression algorithms are very good at repeated patterns and runs of whitespace are exactly that. What actually moves the needle on load time — the number of files, the weight of images, and whether anything blocks rendering — matters by orders of magnitude more.
📖 How to Use
-
1
Choose language and actionSelect auto-detect, HTML, CSS, or JavaScript, then choose minify or beautify.
-
2
Enter your codePaste code into the left input. Use the Sample button to see example code.
-
3
Check size savings and copyThe minified output and size savings are shown. Click Copy to copy the result to your clipboard.
❓ Frequently Asked Questions
Does minification change code behavior?
Are CSS calc() and var() handled correctly?
Can I change the indent size for beautify?
🐛 Found a bug or issue with this tool?
Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.
Thanks for your report!
Your report has been delivered to the operator and will be used to improve the tool.