JavaScript Minifier & Beautifier
Minify JavaScript with Terser or format it with Prettier.
By Syed Mubashir Ali · Last updated
What mangling actually does to your code
Mangling is the step that surprises people, because it's the one that destroys readability. Take a small function: 'function calculateTotal(items) { let total = 0; for (let item of items) { total += item.price; } return total; }'. After Terser, it's roughly 'function a(b){let c=0;for(let d of b){c+=d.price}return c}'. Same behaviour, a fraction of the characters, and notice 'price' survived, because it's a property name that outside code might depend on.
This is why minified code can't be perfectly 'un-minified': the names are gone, and no tool can know that 'a' used to be 'calculateTotal'. Beautify restores the layout but not the meaning. Which is also why you keep the original source in version control and treat minified output as disposable. It's a build artifact, not the real code.
Minify first, then let the server compress
A common question: if the server already sends everything gzipped, does minifying matter? Yes, and the order matters. Minification removes characters; gzip then compresses what's left. They multiply: minifying typically cuts 30–50% off hand-written JavaScript, and gzip cuts another 60–70% off the remainder. Skip minification and gzip has more to chew through. It still works, but the file over the wire is bigger.
The practical rule: minify at build time (or paste it here for one-offs), serve with gzip or Brotli enabled, and set long cache headers on the result. The filename should change when the contents change (a content hash in the name) so browsers fetch the new version instead of serving a stale cached copy. That's the whole production JavaScript strategy in one paragraph.
When not to minify
Don't minify code you're still debugging, obviously. Don't minify tiny snippets where the savings are bytes: readability wins. And don't minify and then edit the minified file by hand; change the source and re-minify, or the two will drift apart and you'll debug the wrong version at the worst possible time.
How to Use JS Minifier / Beautifier
- 1Choose 'Minify' to compress JavaScript with Terser, or 'Beautify' to format it with Prettier.
- 2Paste your code into the input box (a script, a module or a single function), open a .js file, or press 'Try a sample'. (Plain JavaScript only for minifying: compile TypeScript or JSX first.)
- 3The result appears as you type. The first run loads the minifier or formatter, which takes a moment; for Beautify, pick 2 spaces, 4 spaces or tabs.
- 4If the code has a syntax error, the message shows what and where, and updates as you fix it. It doubles as a quick validity check.
- 5Check the size change, then copy the output or download it (script.min.js when minified). For production, test the minified file before shipping it.
- 6Need the originals back? Beautify reformats minified code for reading, though renamed variables and stripped comments are gone for good.
Frequently Asked Questions
How does JavaScript minification work?
Terser parses your code, then rewrites it to be as short as possible while behaving the same: it removes whitespace and comments, shortens local variable and function names (mangling), and simplifies code, for example dropping unreachable code and folding constant expressions. Names visible outside the code, such as top-level globals and object properties, are left alone.
Will minified code behave differently?
It shouldn't: Terser's compressions are designed to keep behaviour the same, and it's the minifier used by most JavaScript build tools. Code that relies on function or variable names at runtime (for example reading a function's .name) can notice the renaming, so test the minified file before you ship it.
Does it support modern JavaScript?
Yes. Terser and Prettier both handle current JavaScript, including arrow functions, classes, async/await, optional chaining (?.), nullish coalescing (??) and import/export. The minifier doesn't accept TypeScript or JSX, so compile those to JavaScript first; Beautify does format JSX.
Can I un-minify JavaScript?
Beautify reformats minified code with proper line breaks and indentation, which makes it far easier to read. It can't bring back the original variable names or comments, because minification removed them.
Why minify if my server uses gzip?
Compression and minification add up. Gzip and Brotli shrink repetitive text, while minification removes characters that compression would still have to send, and renaming shortens every use of a variable. Minified code also parses slightly faster in the browser.
Is my code private?
Yes. Both Terser and Prettier run in your browser, so your code is never uploaded.
What are source maps, and do I need one?
A source map is a file that maps minified code back to the original, so browser devtools can show you the real variable names and line numbers when debugging production. This tool doesn't generate one. It's for quick jobs, not full build pipelines. If you're shipping minified code to real users regularly, set up a proper build (Vite, esbuild, webpack) that emits source maps; for a one-off script or bookmarklet, you don't need them.
About JS Minifier / Beautifier
Open any production website's JavaScript and you'll find it unreadable on purpose: single-letter variables, no comments, everything on as few lines as possible. That's minification, and it's the last step between the code developers write and the code browsers download. This tool runs the same minifier the professionals use (Terser) right in your browser, no build setup required.
Terser does three things. It deletes what browsers ignore (whitespace, comments). It mangles: 'calculateTotalPrice' becomes 'a', and every use of it follows, which is where most of the savings come from in real code. And it compresses: 'if (debug) { console.log(x); }' with debug false disappears entirely, '2 * 60 * 24' becomes '2880'. Your 'helloWorld' string literals and object property names stay intact, because renaming those could break things.
The Beautifier is Prettier, the formatter most teams already use, for the opposite job: taking crushed or inconsistently formatted code and laying it out readably. Paste in a minified file you need to debug, get back indented code you can follow. Between the two, this page covers the quick jobs (shrinking a script for a page, checking how small a function gets, sanity-checking syntax) that don't justify configuring a build pipeline.