Home›Formatters›Code›Code Minifier

Code Minifier

Code

Strip whitespace and comments from HTML, CSS, or JavaScript to reduce file size. Runs entirely in your browser — your code is never uploaded anywhere.

What is a Minifier?

The Code Minifier strips whitespace, indentation, newlines, and optionally comments from CSS, HTML, or JavaScript source code, producing the smallest valid representation of the same code that executes or renders identically in the browser. It is the essential last step before deploying static assets to production.

Code written for humans is verbose by necessity. Indentation, blank lines between rules, descriptive comments, and generous spacing around operators all help developers read and maintain the code — but they add bytes the browser downloads and processes without any runtime benefit. A formatted CSS file with 200 lines might minify to 20 characters per rule instead of 7 lines per rule:

/* Before — 8 lines */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* After — 1 line */
body{margin:0;padding:0;font-family:sans-serif}

The minified output is semantically identical: the browser applies exactly the same styles. The difference is in file size, which directly affects load time, CDN egress cost, and parse time.

The Code Minifier supports three languages with language-appropriate rules. CSS minification removes whitespace around structural characters while preserving values. HTML minification collapses inter-tag whitespace without affecting content. JavaScript minification removes whitespace around operators and punctuation. All three optionally strip comments.

All minification runs entirely in your browser — no code is ever uploaded or stored. Use the CSS Formatter to go back to a readable form if you need to edit minified code, or the JSON Minifier for JSON payloads.

How to use this Minifier calculator

  1. Paste your CSS, HTML, or JavaScript into the Code input box.
  2. Select the correct Language from the dropdown: CSS, HTML, or JavaScript.
  3. Choose whether to Remove comments (enabled by default).
  4. The Minified Code appears instantly in the output box.
  5. Click Copy to copy the minified code to your clipboard.

Formula & Methodology

Each language uses a targeted set of string transformations applied in order:

CSS:
1. Strip block comments (/* ... */) if Remove comments is enabled.
2. Remove whitespace surrounding structural characters: {, }, ;, :, ,, >, ~, +.
3. Collapse all remaining whitespace runs to a single space.
4. Trim leading and trailing whitespace.

HTML:
1. Strip HTML comment nodes (<!-- ... -->) if Remove comments is enabled.
2. Collapse whitespace between > and < (inter-tag whitespace) to nothing.
3. Collapse runs of 2+ spaces to a single space.
4. Trim.

JavaScript:
1. Strip block comments (/* ... */) if Remove comments is enabled.
2. Strip single-line comments (// ...) if Remove comments is enabled (approximated — may not handle comments inside strings).
3. Remove whitespace surrounding operators and punctuation: =, +, -, *, /, %, &, |, ^, !, <, >, ?, :, ,, ;, {, }, (, ), [, ].
4. Collapse remaining whitespace runs to a single space.

Before (CSS):
css /* Main styles */ body {   margin: 0;   padding: 0;   font-family: sans-serif; } 

After:
css body{margin:0;padding:0;font-family:sans-serif}
Frequently Asked Questions
What is code minification?
Code minification removes whitespace, newlines, and comments from source code to produce the smallest possible file that executes identically in the browser. A 10 KB stylesheet or script with generous indentation and comments can typically be reduced to 4–6 KB after minification. The minified file is harder for humans to read but is semantically equivalent — the browser interprets it in exactly the same way.
What languages does the Code Minifier support?
The Code Minifier supports CSS, HTML, and JavaScript. For CSS, it removes whitespace around structural characters (braces, colons, semicolons, commas). For HTML, it collapses whitespace between tags and removes comment nodes. For JavaScript, it collapses whitespace around operators and punctuation. Each language has its own minification rules tailored to its syntax.
What does 'Remove comments' do?
When enabled (the default), the minifier strips block comments (`/* ... */`) from CSS and JavaScript and HTML comment nodes (`<!-- ... -->`) from HTML before removing whitespace. Comments are not executed by the browser and add bytes to the file without runtime benefit. Some teams preserve license headers (which use `/*!` in CSS/JS) in production builds — if you need to retain any comments, disable this option before minifying.
Why minify code for production?
Minification reduces the number of bytes the browser must download to render a page. Smaller files load faster, especially on mobile networks, and reduce CDN egress costs for high-traffic sites. Minified assets also have faster parse times — the browser's CSS and JavaScript parsers process fewer characters. For most projects, minification is combined with gzip or Brotli compression, which further reduces transfer size by 60–80%.
What is the difference between minification and compression?
Minification removes redundant characters from the source code itself — whitespace, comments, and sometimes variable names. Compression (gzip, Brotli) applies a general-purpose algorithm to the minified file, finding repeated byte sequences and encoding them more efficiently. Both are applied in production: minify first, then compress. Minified code compresses better than formatted code because removal of variable whitespace produces more repetitive patterns that compression algorithms exploit.
Can the minifier handle complex JavaScript?
The JavaScript minifier uses pattern-based whitespace removal rather than a full AST parser. It correctly handles most simple and intermediate JavaScript but may not handle all edge cases in complex code — for example, regex literals that contain characters the minifier treats as operators, or template literals with complex expressions. For production JavaScript builds, dedicated tools like Terser, esbuild, or Rollup produce more reliable and aggressive minification.
How do I minify code?
Paste your code into the Code input box, select the language (CSS, HTML, or JavaScript) from the Language dropdown, and optionally enable or disable 'Remove comments'. The minified output appears instantly in the Minified Code box. Click Copy to copy it to your clipboard.
Is my code uploaded anywhere?
No. All minification happens entirely in your browser using JavaScript. The source code you paste — including any proprietary logic, API keys in config objects, or internal class names — is never sent to any server, stored, or logged.
Does this work offline?
Yes — once the page has loaded, the Code Minifier runs without a network connection. All minification is pure JavaScript string processing that runs locally in your browser.
How does this compare to using a build tool?
Build tools like webpack, Vite, esbuild, or Parcel run minification as part of an automated pipeline with advanced features like dead-code elimination, scope hoisting, and CSS tree-shaking. The Code Minifier is designed for quick, one-off minification of individual snippets — it is faster to use than setting up a build pipeline for a single file. For production builds of full projects, use your build tool's minification step instead.
Can I minify a whole CSS file at once?
Yes — paste the entire file contents into the Code box. There is no size limit beyond your browser's available memory. Files up to several hundred kilobytes minify in under a second. For very large files, a command-line tool like `cleancss` (for CSS) or `uglify-js` (for JavaScript) may be more practical.

Related Calculators

code
CSS Formatter
Beautify raw or minified CSS with proper indentation and one rule per …
code
JSON Minifier
Minify JSON by stripping all whitespace and formatting. Optionally sor…
code
SQL Formatter
Format and beautify SQL queries with proper indentation and keyword ca…