Frontend code has two conflicting requirements in practice: a developer finds it easier to read code with indentation and comments, while a browser loads a smaller file faster. Minification and beautification address these two needs, one at a time.
Why minify code
Minification strips out everything a file needs only for a human, not for the browser: whitespace, line breaks, comments, and for JS, it also shortens long variable names down to single letters. The code's behavior doesn't change — only its size, which typically shrinks by 20-60%.
A smaller file means a faster page load, especially noticeable on mobile connections. That's why minification is a standard step before shipping CSS and JS to production (HTML is minified less often, but it can help too).
Why you'd need the opposite — beautifying
Sometimes you need the reverse: you've got someone else's minified file (say, minified JS with no source map) and need to make sense of it. Beautifying puts the indentation and line breaks back, turning one long line into readable code with a clear structure.
How it works online
The HTML/CSS/JS tool switches between three languages and two modes — minify and beautify. HTML uses the html-minifier-terser engine, CSS uses CSSO, and JS uses Terser (the same engine used by many bundlers, including Vite and webpack). Everything runs in the browser, and the code is never sent anywhere — important if it contains internal URLs or belongs to an unpublished project.
What gets lost during minification, and what doesn't
Minification doesn't change the behavior of correct code — it only touches formatting and, for JS, the names of local variables that aren't visible outside the module. It doesn't "optimize" logic or remove dead code (that's a separate concern, tree shaking). The only practical risk is code that relies on non-standard behavior, like reading a function's source via toString(); for ordinary code, minification is safe.
When to use which
- Minify — before publishing static files, to shrink their size.
- Beautify — when you need to read someone else's code or minified output, debug it, or just bring it to a consistent indentation style.
In real projects a build tool (Vite, webpack) usually automates these steps, but for a one-off task — quickly compressing a snippet or making sense of a piece of third-party code — it's more convenient to just do it online without setting up any tooling.