What this Code Minifier tool does
Code Minifier takes pasted text and, after you select Minify code, writes a more compact string for one of three modes: JavaScript, CSS, or HTML. Default language is javascript. The input starts empty. The page does not upload files, bundle modules, transpile, or connect to a build pipeline.
JavaScript calls Terser’s minify (imported as minifyJS from “terser”). CSS and HTML never call Terser; they run minifyCss and minifyHtml in CodeMinifier.jsx. The subtitle “faster loading” is chrome copy. This component only rewrites text in the browser.
Supported input types and actual minification behavior
- JavaScript
- await minifyJS(input, { compress: !safeMode, mangle: !safeMode, format: { comments } }). If result.code is missing, it throws “Unable to minify JavaScript.” Other Terser failures show error.message or “Failed to minify code. Check syntax and try again.”
- CSS
- minifyCss: optional /*! preservation, strip /* */, then optionally collapse whitespace around {} : ; , > + ~ and turn ;} into }. No CSS parser.
- HTML
- minifyHtml: optional HTML comment stripping, then optionally drop newlines, collapse runs of spaces, and replace >\s+< with ><. No HTML parser and no separate minify of inline script or style.
The language buttons are explicit. The selected value is passed through; the tool does not sniff the textarea. Any third button other than javascript or css uses the HTML branch (today that is only html).
Whitespace, comments, strings, and syntax-sensitive content
Remove comments defaults on. Preserve important comments defaults off and is disabled until Remove comments is on. For JavaScript, Terser comments are “all” if removal is off; a /^!|@preserve|@license|@cc_on/i keep pattern if both toggles are on; otherwise false. For CSS, /*! … */ can be stashed then restored. For HTML, the keep regex is <!--(?!\s*!|\s*\[if)—comments that look like <!--! or <!--[if are not stripped when preservation is on; all <!-- … --> are stripped when it is off.
Collapse whitespace is shown only for CSS and HTML (default on). minifyCss does not protect quoted values or url() text before stripping spaces around punctuation, so strings and selectors can change. minifyHtml does not skip <pre>, <textarea>, or <script> content before deleting newlines and squeezing spaces. Safe mode skips that collapse for CSS/HTML even if the toggle stays on.
JavaScript whitespace and comments are Terser’s responsibility. Template literals and strings are not handled by the CSS/HTML regexes because JS does not use those functions.
Minification versus formatting, validation, bundling, and compression
- Not a formatter or beautifier. There is no pretty-print path.
- Not a linter or validator except insofar as Terser may throw on JS it cannot parse.
- Not a bundler, tree-shaker of your app graph, or gzip/brotli compressor. “Saved” is UTF-8 byte difference of the two textareas via TextEncoder.
- Not a TypeScript compiler or JSX transform.
- Terser mangle (Safe mode off) may rename identifiers. That is not a proof the program remains equivalent in your environment.
A shorter string does not prove the code remains valid, equivalent, secure, compatible, or ready for production. Keep the original and test the result.
How to use the real controls
- Click JavaScript, CSS, or HTML in the Code language group. Default is JavaScript. Switching clears Minified output and the error; Input code stays.
- Paste into Input code. The counter shows characters, lines (split on CRLF/CR/LF), and estimated UTF-8 size.
- Click Options toggles as needed: Remove comments, Preserve important comments (disabled until Remove comments is on), Collapse whitespace (CSS/HTML only), and Safe mode. Toggles do not re-minify.
- Click Minify code. The button is disabled while the trimmed input is empty or isMinifying is true (label Minifying...). Empty runMinify still sets “Paste some code to minify.”
- Click Load example to fill EXAMPLES[language] and call runMinify immediately.
- Click Clear to empty Input code, Minified output, the error, and Copied. It does not reset language or Options. Clear is disabled while both boxes are empty.
- Click Copy output (navigator.clipboard.writeText; Copied for 1.5 seconds; clipboard failure does not set a red error) or Download .min.js / Download .min.css / Download .min.html. Download writes a text/plain;charset=utf-8 Blob named output.min.js, output.min.css, or output.min.html. Both stay disabled while Minified output is empty.
How to review output before use
The sidebar Original size and Minified size use the current textarea contents. If you edit Input code after a successful minify and do not run Minify code again, Saved and Lines removed compare the new input to the old output.
No reduction / No meaningful size reduction appears when output exists and minifiedBytes is not smaller than originalBytes. Lines removed is max(0, input lines − output lines), not a statement about deleted logic.
Limitations and unsupported syntax
- No TypeScript, JSX, JSON, SVG, or SQL language mode.
- No file import and no implemented character ceiling (the browser and Terser still bound large pastes).
- CSS/HTML paths are not syntax-aware; they can alter strings, HTML text nodes, and inline scripts.
- HTML comment preservation does not implement a full IE conditional-comment parser.
- Changing language does not convert the source; it only picks the next minify function.
Privacy and browser-processing boundaries
CodeMinifier.jsx minifies in the browser. It does not call trackToolEvent and does not POST the textarea to a minify API. Terser runs as an imported library in that same page. That is not a confidentiality guarantee: the rest of the page can still load site assets and advertising; the privacy policy describes first-party analytics for event metadata (not designed to store tool contents); clipboard, downloads, extensions, and shared devices remain outside this component.
The amber note says minification is for production output and to keep readable source for editing. Local Terser/regex does not encrypt the code.
Pre-production checklist
- Keep a copy of the original; this page is not a source repository.
- Confirm the language button matches the paste (JS vs CSS vs HTML).
- If you used Collapse whitespace on HTML/CSS, check <pre>, text nodes, and CSS strings.
- If Safe mode was off for JavaScript, test runtime behavior after Terser compress/mangle.
- If a license header must survive, enable Remove comments and Preserve important comments, then inspect the output.
- Re-minify after option or input edits; downloads use the current language’s extension even if the text is the other kind.
- Do not treat Saved % as a performance measurement of your website.
When another DevToolKit tool is more appropriate
- Text Diff Checker — to compare the original paste with minified output line by line (positional compare, not a JS/CSS-aware diff).
- JSON Formatter — when the text is JSON. This minifier has no JSON mode; running JSON through Terser is not JSON.stringify pretty-print.
- SQL Formatter — when the text is SQL. Minify SQL lives on that page, not here.