Beautify or minify?
Beautifying adds consistent indentation and line breaks so you can read code: a minified library you are debugging, a one-line HTML email template, or CSS copied from browser dev tools. Minifying does the opposite for production: it removes comments and whitespace (and, for JavaScript, shortens variable names) so files download faster.
What minifying changes
- CSS: removes comments and whitespace, drops the last semicolon in each rule, shortens
#ffffffto#fff,0pxto0and0.5to.5. Strings,url()values and the spaces required insidecalc()are left alone. Comments starting with/*!(licences) are kept. - HTML: removes comments and whitespace between block elements, while keeping single spaces between inline elements so words don't run together.
<pre>,<textarea>and scripts are untouched, and inline<style>is minified as CSS. - JavaScript: uses Terser, the minifier webpack uses by default, to remove dead code, simplify expressions and shorten local variable names. Licence comments are kept.
Typical savings are 20–40% for CSS and HTML and 40–70% for JavaScript, before gzip. Servers compress files as well, so the saving over the network is smaller, but minified files also parse faster.
In a real project, automate it
This page is handy for one-off files and debugging. For a website you maintain, let your build do it: Vite, webpack and esbuild minify on production builds, and Prettier keeps source code consistently formatted in your editor and CI.
Frequently asked questions
Will minifying break my code?
It shouldn't: the JavaScript minifier only makes changes that keep the same behaviour, and the CSS and HTML minifiers keep strings, preformatted text and scripts intact. Code that relies on function names at runtime can be affected by name shortening; untick that option if so.
Can I un-minify JavaScript?
Beautifying restores the layout, so the code becomes readable again. Original variable names and comments removed by the minifier can't be recovered; for that you need the project's source map.
Does it support TypeScript, JSX or SCSS?
Beautifying works for most JSX and SCSS. Minifying expects plain JavaScript and CSS, so compile TypeScript and SCSS first.
Is my code uploaded?
No. Beautifying and minifying run in your browser. The JavaScript minifier is downloaded the first time you use it and runs locally.
How do I format JSON?
Use the JSON Formatter, which also validates and repairs JSON.