HTML, CSS & JS Minifier / Beautifier

Minified code loads faster: fewer bytes to download, less to parse. Readable code is easier to debug. Most projects get both from a build tool, but a small site, an embedded widget or an email template often has no build step. This tool minifies JavaScript, CSS and HTML in the browser, or beautifies minified code back into a readable layout.

JavaScript with Terser

JavaScript is minified with Terser, the minifier behind most bundlers. It removes whitespace and comments, but also rewrites code into shorter equivalents: conditions become ternaries, constant expressions are folded, unreachable code is dropped, and two compression passes find more savings. With name mangling on, local variables and parameters get one-letter names; global names and object properties are never renamed, so the code keeps working when other scripts use it. Licence comments starting with /*! or containing @license or @preserve are kept. If the code has a syntax error, Terser cannot parse it, and the error is shown with its line and column.

CSS

The CSS minifier removes comments, collapses whitespace, and drops the semicolon before each closing brace. It also applies safe shortenings: 0px becomes 0, 0.5 becomes .5, and six-digit colours with paired digits such as #ffffff become #fff. Strings are copied untouched, and the spaces around + and - inside calc(), which CSS requires, are preserved.

HTML

HTML minification removes comments (except conditional comments), deletes the indentation between tags and collapses other runs of whitespace to a single space, since a space between inline elements is visible. The contents of pre and textarea, where whitespace is meaningful, and of script are left as they are; CSS inside style is minified with the CSS rules above.

Minify, then compress

Servers usually compress text with gzip or Brotli. Compression removes repetition; minification removes characters compression cannot, such as comments and long local names. They work best together, which is why build tools do both.

Beautifying

Beautify reverses the layout of minified code with js-beautify: line breaks, indentation of 2 or 4 spaces, and spacing around operators. It cannot restore original variable names or comments, but it makes a third-party script or a production bundle readable enough to follow.

A worked example

The sample is a 13-line debounce function with comments. Minified with mangling, it becomes a single line beginning export function debounce(e,t=300){let n=null;…, and the panel shows a 54 per cent reduction. The CSS rule .card { margin: 0px auto; background-color: #ffffff; } becomes .card{margin:0 auto;background-color:#fff}.

When to use a build tool instead

For an application with many modules, a bundler such as Vite, esbuild or webpack minifies as part of the build, removes unused exports and produces source maps that map errors back to your original code. Use this tool for single files, quick checks and pages without a build pipeline.

Checking the result

After minifying JavaScript, run the page once and watch the console: errors usually mean the original relied on something unusual, such as reading a function’s name at runtime. Keep the readable original in version control and treat the minified file as a build output you can regenerate.

Related tools

Format JSON with the JSON Formatter, escape snippets for HTML with the HTML Encoder, compare two versions in the Diff Checker, or turn Markdown into HTML with Markdown to HTML.