Paste CSS or JavaScript and switch between two jobs: beautify re-indents the code with consistent spacing and one statement per line, while minify strips comments and redundant whitespace and reports exactly how many bytes you saved. The minifier is deliberately conservative — it never renames identifiers, never removes a semicolon and never joins two lines where automatic semicolon insertion could change the meaning — so the output still runs. Strings, template literals, regular expressions and licence banners (/*! … */) are preserved untouched.
How to format or minify your code
- 1 Choose the language: CSS or JavaScript.
- 2 Paste your code into the left panel.
- 3 Pick Beautify to re-indent it, or Minify to compress it.
- 4 Check the size report, then copy the result or download the file.
How the formatter reads your code
There is no parser and no abstract syntax tree here. The formatter is a character-level state machine that always knows whether it is currently inside a string, a template literal, a comment or a regular expression. That single piece of context is what separates a formatter from a naive find-and-replace: without it, a semicolon inside a string would be treated as the end of a statement, and the URL in a comment would collapse the moment you minified it.
Beautifying re-indents the code and normalises spacing around braces, blocks and declarations. Minifying strips comments and every run of whitespace that carries no meaning. The minifier is deliberately conservative: it never renames identifiers, never removes semicolons, and never joins two lines where JavaScript’s automatic semicolon insertion could change what the code means. It trades a few bytes for the guarantee that what comes out still runs.
That conservatism is the honest trade-off of the approach. A real build-time minifier like Terser or esbuild parses the code into a syntax tree and can shorten variable names, drop unreachable branches and rewrite expressions — reaching output far smaller than anything achievable this way. This tool is for the quick job in a browser tab, not for your production pipeline.
When to reach for it
Reading minified code
A single-line vendor script becomes navigable. Names stay mangled — that information was destroyed at build time — but the structure, the control flow and the strings become legible.
Cleaning inherited code
A file with mixed tabs and spaces and inconsistent bracing becomes uniform in one pass, which makes the subsequent diff show what actually changed rather than every line.
Trimming an inline snippet
A small CSS block going into an email template or a page head does not justify a build step. Minifying it here removes the comments and whitespace in a few seconds.
Preparing code for a snippet or a paste
Formatting before pasting into documentation, a ticket or a chat makes the code readable to whoever picks it up next.
Beautify for reading, minify for shipping
Beautifying is what you reach for when inheriting a stylesheet with no line breaks, reading a snippet copied from a minified bundle, or reviewing a diff that someone committed unformatted. Minifying is the opposite errand: shaving bytes off a small script or inline style before it ships. Pasting proprietary code into an online formatter means handing it to a third-party server — this tool runs entirely on your machine, so client work, internal tooling and unreleased features stay on your machine.
What this tool is not
A no-parser formatter has real limits, and pretending otherwise would waste your time:
- It is not Prettier. It normalises indentation and spacing but does not re-wrap long lines, enforce a print width, or apply opinionated rules about quotes and trailing commas.
- It is not a production minifier. No identifier renaming, no dead-code elimination, no tree shaking. Expect output larger than esbuild or Terser would produce — often substantially.
- CSS and JavaScript only. It does not handle HTML, JSON, TypeScript type annotations, JSX, SCSS or Less syntax.
- It cannot fix broken code. Formatting assumes the input is syntactically valid; badly unbalanced braces will produce badly indented output rather than an error.
- Beautifying cannot restore lost names. Minified variables called a, b and c stay that way — the original names are simply not in the file any more.
Troubleshooting
- The beautified code still has one-letter variable names
- Those names are all that survived the original minification. Renaming discards the source names permanently, and no formatter can invent them back. If the project publishes source maps, those are the only route to the original code.
- My minified output is bigger than I expected
- This minifier only removes comments and whitespace, because it does not parse the code and therefore cannot safely rewrite it. For real size reductions, run esbuild or Terser in your build — they typically achieve several times more, and their output is verified by actually understanding the code.
- The formatting looks wrong in one section
- Usually unbalanced braces earlier in the file, or a construct the state machine reads differently — a regular expression containing a brace is the classic case. Check that the input is valid, and if the problem persists, that section is best left formatted by hand.
Frequently asked questions
Will minifying break my JavaScript?
It is built not to. Identifiers are never renamed, semicolons are never dropped, and a line break is only removed when automatic semicolon insertion cannot apply. You trade a few bytes against a much bigger tool for the guarantee that the code still runs.
How much smaller will my file get?
Typically 20–50% for commented, well-indented source. The report under the output shows the exact before and after size in bytes, plus the percentage saved.
Is my code sent to a server?
Never. The formatter is JavaScript running in your browser, so your code stays on your device and the tool keeps working offline.
Should I use this instead of Prettier in my project?
No. If you have a build step, use Prettier or your editor’s formatter — they parse the code properly, enforce a consistent style across the whole team, and run automatically. This tool exists for the case where you have a snippet in a browser tab and no project around it.
Is minifying here safe for production?
The output is safe to run — the minifier is conservative precisely so that it cannot break your code. It is simply not competitive on size. Use it for an inline snippet; use a real bundler for anything you ship at scale.
Does it support TypeScript, JSX or SCSS?
No. It handles plain CSS and plain JavaScript. Type annotations, JSX elements and SCSS nesting all use syntax the state machine does not model, and results will be unreliable.