Code minifier

Minify JS, CSS and HTML to reduce size.

Language

JS is minified precisely with Terser. CSS/HTML use lightweight minification by removing comments and whitespace, so be careful with whitespace-sensitive areas like <pre> and <textarea>.

You finish a small script, drop it into a page, and then notice the file is several times larger than it needs to be - mostly comments, indentation and line breaks that only mattered while you were writing it.

A minifier removes everything the browser does not need to run the code, without changing what the code does. This tool handles JavaScript, CSS and HTML, and returns the compressed result so you can copy it straight into a build folder or a <script> tag.

How it works

How to use it

Pick a language from the Language dropdown (JavaScript, CSS or HTML), paste your source into the input box, and press Minify. The result appears below and Copy puts it on your clipboard. Everything runs in the page itself - the code you paste is not uploaded anywhere for processing.

What each language does

Language	Engine	What it does
JavaScript	Terser (in-browser)	Parses the code into a syntax tree, then compresses and mangles it - shortening local variable names, folding constants, and dropping unreachable branches
CSS	Lightweight pass	Removes `/* */` comments, collapses whitespace, and trims the space around braces, colons and semicolons
HTML	Lightweight pass	Removes `<!-- -->` comments and collapses runs of whitespace between tags

The JavaScript path is the thorough one. Because Terser actually understands the syntax, a syntax error in your input will stop the run with a message rather than producing broken output - which makes it a rough sanity check as well.

Things worth knowing

The CSS and HTML passes are text-based, so whitespace-sensitive regions need care. Anything inside <pre>, <textarea> or a CSS content string can lose meaningful spacing. If your page depends on those, minify the rest by hand or use a build tool that parses the document.

Minifying is also not the same as gzip or Brotli. Minification rewrites the source; compression happens at the transport layer. They stack - a minified file still compresses further over the wire, and using both gives the smallest download.

One more thing: minified JavaScript is much harder to debug, because the variable names in a stack trace no longer match your source. In a real build pipeline you would generate a source map alongside it. This tool does not produce source maps, so keep your original file.

Terms explained

Minification: Rewriting source code into a smaller form that behaves identically - stripping comments, whitespace and, for JS, shortening names.
Terser: A widely used JavaScript minifier. It parses code into a syntax tree before compressing, so it can safely rename variables and remove dead code.
Mangling: Replacing long local variable and function names with one- or two-character names. Only names that are safe to rename are touched.
Compression (Terser option): Structural optimisations such as folding constant expressions, simplifying conditionals and removing unreachable code.
Whitespace-sensitive element: An element such as <pre> or <textarea> where spaces and line breaks are part of the rendered content and must not be collapsed.
Source map: A separate file that maps minified code back to the original, so browser dev tools can show meaningful line numbers. Not generated here.

Frequently asked questions

Is minifying the same as zipping or gzipping a file?

No, they work at different layers and are usually used together. Minification rewrites the source itself so there is less code to begin with; gzip or Brotli compresses whatever bytes the server sends. A minified file still shrinks further under gzip, so applying both gives the smallest transfer.

Will my code still behave the same after minifying?

For JavaScript, Terser only applies transformations it can prove are safe, so ordinary code behaves identically. The exceptions are code that depends on function or variable names at runtime - for example reading `fn.name`, or looking up properties by a string built from a variable name. Test the minified build before shipping it.

My HTML or CSS broke after minifying. Why?

Almost always because whitespace mattered somewhere. The CSS and HTML passes are text-based and collapse runs of spaces and line breaks, which changes what is rendered inside `<pre>`, `<textarea>`, or CSS `content` strings. Minify those files selectively, or use a parser-based build tool instead.

Can I turn minified code back into readable code?

You can reformat it with a code beautifier, which restores indentation and line breaks. You cannot recover the original variable names or comments - mangling discards them permanently. Always keep your unminified source in version control.

Is my code sent to a server?

No. The minification runs in your browser using a library loaded into the page, so the source you paste stays on your machine. If the Minify button reports that the library is still loading, wait a moment for the script to finish downloading and try again.