Does minification change how the code behaves?

No, not if it is safe. The tool only performs "safe" transformations: strips redundant whitespace and comments, compresses HTML attributes and shortens CSS values where the spec allows. JavaScript is only whitespace-stripped, identifiers stay intact.

What is the difference between minification and uglification?

Minification removes unnecessary characters, while uglification also renames variables to short names (a, b, c) and makes code hard to read. This tool only minifies for clarity; production build tools like Terser and esbuild do a better uglify job.

Should I minify before or after Brotli/Gzip?

Always before. Minification removes tokens Brotli/Gzip would compress anyway, but the result is still smaller because fewer unique sequences allow better compression patterns. Typical extra saving is 5–20 % on top of gzip.

Does the tool work on TypeScript or JSX?

No, only plain compiled JavaScript, standard CSS and HTML. TypeScript and JSX must be transpiled first with tsc, esbuild, swc or Babel.

HTML, CSS & JavaScript Minifier (Local)

How minification works

The tool removes comments, line breaks, and excess whitespace to make files smaller. Everything runs locally in your browser, so your code is never sent to a server.

Minification is rule-based (regex) and intentionally conservative. For JavaScript and HTML, necessary line breaks are kept so the code still works. Use a dedicated build toolchain (such as esbuild or terser) for maximum compression in production.

About this tool

A minifier compresses source code by stripping everything the machine does not need: whitespace, line breaks, comments and long identifier names. The result is a file that behaves identically but weighs less and loads faster. This tool handles HTML, CSS and JavaScript directly in the browser and shows both the size before and after and the savings in percent. Use it when preparing static pages, email templates or inline HTML snippets for a CMS that does not minify itself, or when you just want to know the potential gain before setting up a build pipeline.

How to use it

Pick a language (HTML, CSS or JavaScript) in the top button row.
Paste the code into the left panel.
See the minified output in the right panel, updated live.
Click "Copy" or "Download" to bring the result into your project.

Examples

CSS with whitespace

Input

.card {
  padding: 16px;
  /* rounded */
  border-radius: 8px;
}

Output.card{padding:16px;border-radius:8px}

HTML template

Input

<div class="hero">
  <h1>Hi</h1>
  <!-- greeting -->
</div>

Output<div class=hero><h1>Hi</h1></div>

Comments and line breaks are removed. Insignificant whitespace between tags is collapsed.

Common use cases

Shrink static files for faster page loads.
Strip comments and whitespace from code you paste into a newsletter or email.
Prepare snippets for submission to Google Tag Manager, HubSpot or Shopify.
Squeeze HTML email templates under client-specific size limits.
Check the potential saving before wiring up Vite/webpack/esbuild.

Frequently asked questions

Does minification change how the code behaves?: No, not if it is safe. The tool only performs "safe" transformations: strips redundant whitespace and comments, compresses HTML attributes and shortens CSS values where the spec allows. JavaScript is only whitespace-stripped, identifiers stay intact.
What is the difference between minification and uglification?: Minification removes unnecessary characters, while uglification also renames variables to short names (a, b, c) and makes code hard to read. This tool only minifies for clarity; production build tools like Terser and esbuild do a better uglify job.
Should I minify before or after Brotli/Gzip?: Always before. Minification removes tokens Brotli/Gzip would compress anyway, but the result is still smaller because fewer unique sequences allow better compression patterns. Typical extra saving is 5–20 % on top of gzip.
Does the tool work on TypeScript or JSX?: No, only plain compiled JavaScript, standard CSS and HTML. TypeScript and JSX must be transpiled first with tsc, esbuild, swc or Babel.

Technical background

A minification pipeline typically consists of a parser that builds an AST, an optimisation pass that removes unreadable or unnecessary nodes, and a code generator that prints the result without formatting. For JavaScript, ECMAScript defines what is syntactically legal, and tools like Terser and esbuild use it to eliminate dead code, fold constants and inline trivial functions. CSS minifiers such as cssnano fold colours (#ffffff → #fff), strip units from zero (0px → 0) and merge selectors. HTML minifiers drop optional closing tags (</li>, </p>), collapse boolean attributes and streamline whitespace inside text content. Every pass must respect context: <pre> and <textarea> preserve whitespace, licence-header comments (starting with "!") should be kept, and CSS var()/env() functions must not be touched.