HTML / CSS / JS Beautifier & Minifier

The beautify-and-minify cycle is one of the oldest and most-used roundtrips in front-end work. You inherit minified production code and need to read it (beautify). You have hand-written source you want to ship at minimum size (minify). You scraped a JavaScript snippet and want to understand what it does (beautify). You need to inline a small CSS payload and every byte matters (minify). The tool here handles all three languages — HTML, CSS, JavaScript — in both directions with a single interface.

The **beautify** path uses **`js-beautify`** — the same library that powers VS Code's built-in formatter (for older builds), Atom, Brackets, and many in-browser editors. The output is opinionated but matches what most teams converge on: 2-space indents by default, opening braces on the same line as the function/conditional, blank lines preserved where they exist in source, and HTML `<script>` and `<style>` blocks reindented as their respective languages. The result is what `Format Document` in your IDE would produce, give or take editor-specific overrides.

The **minify** path is more interesting because the right algorithm depends on the language.

**JavaScript** minification needs a real AST transformer. `terser` (the maintained successor to UglifyJS) is the standard — it parses your code, applies dozens of transformations (variable renaming, constant folding, dead-code elimination, expression inlining, boolean compression), and re-emits a compressed form. It is also large (~200 KB compressed) which is why the tool lazy-loads it only when you click Minify on JavaScript. The cost is one chunk download on first use; the benefit is keeping the rest of the site fast for everyone else. Typical compression ratio is 30–60% on application code, higher on libraries with lots of comments.

**CSS** minification is a much simpler problem: strip comments, collapse runs of whitespace, drop spaces around punctuation that does not need them (`{`, `}`, `:`, `;`, `,`, `>`, `+`, `~`), and remove the optional trailing `;` before `}`. There is no equivalent of variable renaming because CSS selectors, properties, and values are all referenced externally. The tool implements this as a small inline function (under 1 KB) — there is no need to pull in a full library. Typical compression ratio is 20–30%.

**HTML** minification is the trickiest of the three because HTML's whitespace rules depend on context. Whitespace inside a `<pre>` block is significant. Whitespace inside a `<script>` or `<style>` block is JavaScript or CSS source. Whitespace between block-level elements is usually safe to strip; whitespace between inline elements sometimes affects rendering. The tool takes a conservative approach: strip HTML comments (preserving Internet Explorer conditional comments), collapse multiple spaces to one, and remove whitespace between tags — but preserve every `<pre>`, `<textarea>`, `<script>`, and `<style>` block byte-for-byte. More aggressive HTML minifiers (`html-minifier-terser`) can drop optional closing tags and inline-minify embedded scripts, but they occasionally break real pages, so we stop short of that.

A few subtleties worth knowing. **Minification is not transpilation.** If your JavaScript uses optional chaining or top-level await, the minified output uses the same modern syntax — `terser` does not downgrade. For older-browser support, transpile first with Babel or esbuild, then minify. **Mangling preserves globals.** Top-level function declarations, named exports, and properties on the global object keep their names so external code can still reference them. Only local variables get renamed. **Source maps are not produced** by this tool — the byte savings are visible in the output, but if you need to debug minified code in production, run the same minifier as part of your build pipeline so source maps emit alongside.

Everything runs in your browser. `js-beautify` (~50 KB compressed) is bundled with the tool's page chunk. `terser` (~200 KB compressed) is lazy-loaded from your own origin on first JavaScript-minify click and cached for the rest of the session. The CSS and HTML minifiers are inline. Nothing about your source is transmitted to any server — confirmed by the absence of network requests during beautify and minify operations.