OnlineConverTools
Sign in

Code Minifier

Minify JS, CSS, HTML, and TypeScript

About Code Minifier

Code Minifier shrinks four kinds of code in your browser, chosen with the JS, TS, CSS, and HTML buttons. JavaScript goes through Terser, which renames local variables and drops dead code; TypeScript is first stripped of its types by Sucrase, then minified the same way, so the result is JavaScript. CSS goes through CSSO, which merges identical rules and shortens values. HTML loses its comments, each run of whitespace becomes one space, and the contents of <pre>, <textarea>, <script>, and <style> stay as written. Only JavaScript and TypeScript are parsed strictly: broken CSS or HTML is not reported.

Example

HTML mode: the comment goes, spaces shrink to one, <pre> keeps its spacing.

Input

<ul>
  <!-- main menu -->
  <li><a href="/">Home</a></li>
  <li>   About   us </li>
</ul>
<pre>  keep   this</pre>

Output

<ul> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre>  keep   this</pre>

How to minify JavaScript, CSS, or HTML

  1. 1Click "JS", "TS", "CSS", or "HTML" to choose the language.
  2. 2Paste the code into "Input".
  3. 3Click "Minify"; the result fills "Output" and the line below it gives the characters saved.
  4. 4Click "Copy", or "Download" to save minified.js, minified.ts, minified.css, or minified.html, depending on the mode.

Formats and limits

Input languages
JavaScript, TypeScript without JSX, CSS, HTML
Engines
Terser (JavaScript and TypeScript), Sucrase (TypeScript types), CSSO (CSS), the site's own minifier (HTML)
Errors
JavaScript and TypeScript syntax errors are shown as Error: plus the engine's message; TSX and namespaces that hold code are refused with a message saying why; CSS and HTML are never rejected
File name
minified plus the mode: .js, .css, or .html; in TS mode the file is named .ts although it holds JavaScript

Where your code is processed

All four minifiers run on your device; Terser, Sucrase, or CSSO is downloaded the first time its mode is used, and the code you paste is not uploaded. If a JavaScript or TypeScript error is displayed, its message, cleaned of quoted text, long numbers, and addresses, is reported to our error log together with the tool name and your browser's name and version.

Frequently asked questions

Will minified JavaScript behave the same?

Yes. Terser parses the code before compressing it, so code without semicolons, a return followed by a line break, and expressions like a - -b keep their meaning. Code that does not parse gets an error instead of a broken file.

Does TS mode handle TSX or namespaces?

Not fully. A namespace that holds only types is removed, as tsc does; one that holds code is refused with a message giving its name and line, because removing types cannot turn it into JavaScript, so move that code out first. TSX is refused with a message saying that Terser cannot read JSX: compile it in your own build first.

Does HTML mode delete all spaces between tags?

No. A space between inline elements can be visible: two bold words separated only by a line break would run together without it. So each run of spaces and line breaks becomes one space instead of disappearing.

Does CSS mode check my CSS?

No. CSSO repairs or skips what it cannot read without a message: a missing closing brace is added, and text that is not CSS can disappear from the output. Check the result of a stylesheet you are unsure about.

Tips and tricks

  • ✓The characters-saved line also appears after an error, so trust it only when the output is real code.

Related tools