HTML / CSS / JS Minifier

Overview

Paste HTML, CSS, or JavaScript and the tool strips whitespace, removes comments, and collapses safe redundancies (empty attribute values, repeated whitespace inside text nodes) to produce a smaller payload. The minifier is conservative - it won't rename identifiers or rewrite control flow, so output remains debuggable.

It's for developers shipping inline scripts, email templates, or small assets where adding a build step would be overkill. Reach for it when squeezing a tracking snippet, prepping a CDN-hosted helper, or inlining critical CSS into an HTML head.

How it works

HTML minification follows the spec's whitespace handling rules: collapse runs of ASCII whitespace inside text content, drop optional tags and quotes where the parser doesn't need them, remove HTML comments unless they look like an IE conditional. CSS minification removes comments, collapses whitespace around { } : ; and the trailing semicolon of the last declaration in a block. JavaScript minification handles whitespace and comment removal only - it doesn't rename variables, so semantics are preserved.

Because no symbol renaming happens, the output remains valid for inclusion alongside hand-written code or generated source maps from a deeper-minifying build.

Examples

• HTML before/after:

  <p>   Hello   <em>world</em> </p>
  

  <p>Hello <em>world</em></p>
  

• CSS:

  .btn {
    color: red;
    padding: 10px;
  }
  

  .btn{color:red;padding:10px}
  

• JS:

  function add (a, b) {
    return a + b;   // sum
  }
  

  function add(a,b){return a+b}
  

• Conditional comment preserved (IE only):

  <!--[if IE]> <link rel="stylesheet" href="ie.css"> <![endif]-->
  

FAQ

Does it rename JavaScript variables?

No - identifier renaming requires a full parser-aware tool like Terser or esbuild. This minifier handles whitespace and comments only.

Will it break my HTML?

The minifier respects content categories - it won't strip whitespace inside <pre>, <script>, or <textarea>. If you're seeing odd output, check for unclosed tags in the input.

What about source maps?

The minifier emits no source map - the position changes are line-level only and trivial to reason about by eye. For mapped minification, run the input through esbuild or Terser.

Is it safe for <script> blocks inside HTML?

Yes - script bodies are extracted, minified with the JS minifier, and re-inserted. Inline event handlers (onclick=) are left untouched.

Try HTML / CSS / JS Minifier