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.

Reviewed by the thecalcu.com team · Last updated July 8, 2026

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.

Why Use a Code Minifier?

The primary motivation is performance. Smaller files transfer faster and consume less bandwidth. For a site receiving a lakh (100,000) page views per day, the difference between a 50 KB and a 30 KB stylesheet is 2 GB of CDN traffic per day, a real cost on pay-per-GB plans and a real latency difference for users on slow connections.

Minification is also a standard step in professional front-end workflows. Code review and editing happen on the formatted source; minification happens at build time. The Code Minifier bridges the gap for teams without an automated build pipeline, individual files, quick prototypes, or snippets that need to be embedded in a CMS or email template.

Beyond file size, minified code provides light obfuscation. It does not protect against determined reverse engineering, but it raises the effort required to read proprietary UI logic, making casual copying of implementation details harder.

Who Should Use This Formatter?

Front-end developers working without a build tool, on small projects, WordPress themes, or email templates, can use the Code Minifier to compress individual CSS and JavaScript files before uploading them to a hosting platform.

Designers using page builders or visual editors that allow custom CSS often need to paste a compact snippet to avoid triggering the builder's line-count limits or to avoid impacting the visual editor's performance.

Students and learners building portfolio sites or static pages without a build pipeline can minify their assets before deployment with no tooling setup required. Pair this with the CSS Formatter to keep a readable development copy and minify before each deploy.

Content editors embedding inline <style> or <script> blocks in CMS pages or email HTML templates should use minified code to keep the raw HTML source compact and avoid line-break-related rendering issues in email clients.

What Insights Does the Code Minifier Give You?

The ratio of the minified size to the original size gives a concrete measure of how much of your code is formatting overhead versus actual content. A stylesheet that minifies from 8 KB to 3 KB is 62% whitespace and comments by volume, useful to know when optimising for performance.

Comparing the HTML minifier output line-by-line also reveals which parts of your HTML template have the most inter-element whitespace, often a sign of template-engine output that could be configured to emit tighter HTML.

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

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.
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.
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.
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%.
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.
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.
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.
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.
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.
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.
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.
Also known as
code minifierminify codecompress codereduce code sizeJS minifierCSS minifier