Code Minifier
Make JavaScript, CSS, HTML, SVG and JSON smaller without changing what they do, using the same minifiers a build pipeline would, inside the browser.
Overview
Minifying removes what a machine does not need: whitespace, comments, line breaks, and in JavaScript also long local names and code that can never run. What the code does stays the same.
Each language goes through an established minifier rather than a set of search and replace rules. A
minifier parses the code first, so it knows a space inside calc(1rem + 2px) from a space it may
drop, and // inside a string from the start of a comment.
Web interface
Pick a language, or leave it on Auto, and paste the code. The result updates as you type, 200 milliseconds after the last keystroke; Ctrl/⌘ + Enter runs it at once. Sample loads an example for the selected language, Clear empties both fields and returns to Auto, and Copy copies the output.
Auto decides by the code itself, in this order:
| Detected as | When the input |
|---|---|
| JSON | starts with { or [ and is valid JSON |
| SVG | starts with <svg, or with an XML declaration followed by <svg |
| HTML | starts with a doctype or <html, or contains common elements such as <div> or <p> |
| CSS | starts with an at-rule such as @media, or with a rule of the form selector { property: value } |
| JavaScript | is none of the above |
The line under the output compares the sizes in UTF-8 bytes and says whether the result is smaller, larger or unchanged.
What each language gets
| Language | Minifier | What happens |
|---|---|---|
| JavaScript | Terser 5.31 | Two compression passes, dead code removed, local names shortened. Top-level names stay, so code that other scripts call keeps working. Modern syntax such as classes with private fields, ?., ?? and import/export is understood. |
| CSS | csso 5.0 | Whitespace and comments removed, identical rules merged (.a{color:#fff}.b{color:#fff} becomes .a,.b{color:#fff}), colours and zero values shortened. @layer, @container, :is(), :has() and custom properties are understood; nested rules are not, see below. |
| HTML | html-minifier-terser 7.2 | Whitespace collapsed, comments removed, inline <style> and <script> minified, redundant attributes and type attributes removed, quotes dropped where the value allows it. <pre> content and conditional comments stay as they are. |
| SVG | SVGO 3.2 | Path data and colours shortened, metadata, comments and editor leftovers removed, in several passes. viewBox, ids and <title> are kept, so the drawing still scales, references still resolve and screen readers still have a name for it. |
| JSON | none needed | Whitespace outside strings removed. Nothing else changes: 12345678901234567890 stays exactly that, where parsing and printing the JSON would round it. |
Licence comments survive. JavaScript keeps comments that start with /*! or contain
@license, CSS keeps those that start with /*!. Every other comment is removed.
Code that cannot be parsed
Code with a syntax error is not minified. A minifier that cannot parse the input has nothing safe to write, so the output stays empty and the error is shown instead, with the line and column where the minifier reports them:
| Language | Example message |
|---|---|
| JavaScript | could not be parsed at line 1, column 27: Unexpected token num «1», expected punc «:» |
| SVG | could not be parsed at line 1, column 24: Unclosed root tag |
| HTML | could not be parsed: Parse Error: <a href="x>broken</div>, without a position |
| JSON | The browser's own message, which differs between browsers |
CSS is read forgivingly, the way browsers read it. A declaration csso cannot make sense of, such as
colr red, is left out of the result rather than reported, which is also what a browser does
with it.
One thing is refused instead: nested rules, a rule written inside another rule, with or
without &. Browsers have understood them since 2023, but csso 5 does not, and would drop
them without a word: .a { color: red; & .b { margin: 0 } } would come out as
.a{color:red}. The tool looks for the first nested rule before csso runs, and names its line
instead of returning shorter CSS that is missing code. The same applies to a rule that is not closed before
the next one begins, because a browser reads that as nesting too.
No API
There is no API for this tool. Minifying runs in the browser; for a build pipeline, use Terser, csso, html-minifier-terser or SVGO directly, which is what this page runs.
Limits
The minifier for a language is downloaded the first time that language is used, which is why the first result takes a moment. Uncompressed, the libraries are about 1.0 MB for JavaScript, 0.2 MB for CSS, 1.9 MB for HTML and 0.9 MB for SVG; the browser caches them afterwards.
There is no size limit, but minifying runs on the page itself, and the page does not respond while it runs. One megabyte of JavaScript takes about a second; five megabytes took between 6 and 14 seconds depending on the browser. JSON, CSS and HTML are much faster.
Privacy
The code never leaves the browser. The only requests the page makes are for its own files and the minifier libraries, all from this site; the code itself is not part of any of them, and nothing is stored. Copy writes to the clipboard only when you press it.