HTML/CSS/JS Minifier & Beautifier
Minify or beautify HTML, CSS and JavaScript locally. Compare actual UTF-8 byte counts and inspect formatted output without executing the code.
Make the source easier to use.
IN YOUR BROWSER / PRIVATE INPUTHow to use the
HTML/CSS/JS Minifier & Beautifier
- 01
Choose the language
Paste source code and select HTML, CSS or JavaScript. Do not paste an entire mixed project into one language parser.
- 02
Pick the operation
Minify for compact output or Beautify for readable formatting. JavaScript compression is optional; identifier mangling is disabled.
- 03
Review and test
Inspect the output and measured byte change. Save a new file and run the application’s own tests before replacing production code.
Each language uses its own parser
The code is parsed and serialized, not executed. A syntax error is reported rather than presented as a successful result. HTML parsers can repair malformed markup, so HTML output still needs a visual and structural review.
| Language | Minification | Beautification |
|---|---|---|
| JavaScript | Terser; optional compression, no name mangling | Prettier with the Babel parser. |
| CSS | CSS-tree parse and compact serialization | Prettier CSS formatting. |
| HTML | Parse5 with conservative whitespace/comment handling | Prettier HTML formatting; embedded code left unchanged. |
Remove presentation whitespace from a small function
Whitespace removal can make a file smaller without renaming variables. Compression can perform additional JavaScript transformations, so leave it off until you are ready to test the resulting behavior. ES module parsing is an explicit option for module source.
function add(a, b) {
return a + b;
}function add(a,b){return a+b}Byte reduction is not a Core Web Vitals score
Before and after counts use UTF-8 bytes, which can differ from JavaScript character counts. Beautification normally increases size. Minification may make little difference to already compact code, and compressed transfer size is a separate measurement.
A smaller file does not prove faster rendering or execution. Network compression, caching, code splitting, parse time and application behavior all matter. This tool makes a concrete source transformation; it does not invent a performance grade or replace an application build pipeline.
Avoid fragile production edits
Keep source maps and originals elsewhere
This utility does not create an integrated deployment or source-map pipeline. Preserve the readable source.
Watch whitespace-sensitive HTML
Preformatted tags are preserved, but CSS can make whitespace significant on other elements. Test the rendered page.
Check licenses and embedded code
Important comments are retained where supported, but review notice requirements and mixed-language sections before shipping.
HTML/CSS/JS Minifier & Beautifier:
questions, answered.
Does the code minifier run pasted JavaScript?
No. Terser and the formatters parse source without executing it. The output still needs your application tests before use.
Why does beautification make my file larger?
It adds indentation and line breaks for readability. Use minification for delivery size and beautification for review or debugging.
Does this tool rename JavaScript variables?
No. Identifier mangling is disabled. Optional compression can still transform expressions and control flow, so test compressed output.
Can HTML minification change whitespace-dependent layouts?
Yes. HTML whitespace can be significant through CSS or document context. Preformatted tags are preserved, but a rendered review remains necessary.
The calculations and checks above describe this tool's implementation. Use these primary references for the underlying formats and publishing guidance.
Prettier formatting ↗ (opens in a new tab)Terser options ↗ (opens in a new tab)Make the source easier to use.
Use the controls above, inspect the actual result and keep the source until you are ready to use your new copy.
Use the HTML/CSS/JS Minifier & Beautifier↑