JavaScript Minifier & Beautifier
Minify and beautify JavaScript code with advanced formatting options
Input JavaScript
Output JavaScript
Processed JavaScript will appear here
JavaScript Minifier & Beautifier
Minify and beautify JavaScript code with advanced formatting options
Features
- Bidirectional in one tool: Minify shrinks JS for production (collapses whitespace, shortens names, removes comments) while Beautify expands minified JS into readable, indent-correct source
- ES2020+ syntax support via Terser-style parser: arrow functions, async/await, classes, destructuring, template literals, optional chaining, nullish coalescing all handled correctly
- Configurable minification: keep function names (for stack traces), keep class names (for instanceof checks), preserve license comments via /*! syntax, drop console.* calls for production
- Beautify options: 2/4/tab indent, brace style (1tbs/allman/stroustrup), max line width with smart wrapping, preserve newlines vs collapse — flexible per house style
- Live byte-size comparison before/after, percentage savings, gzip-projected savings (gzip compresses repeated whitespace well, so visible savings can exceed wire savings)
- Error reporting includes the parser's line/column when the input is syntactically invalid — fix the bug rather than guess which character broke parsing
- Copy and download with .min.js or .js extension matching the operation; output preserves UTF-8 BOM-less encoding ready for module bundlers
- Pure client-side: parser runs in your browser via a bundled minifier library; no upload happens. Works offline once cached
How to use
- Paste your JavaScript into the input pane.
- Pick mode: Minify (production) or Beautify (read or debug).
- For minify, adjust the toggles: keep function names if you need readable stack traces, preserve license comments if your code includes them.
- For beautify, pick indent size and brace style to match your project conventions.
- Click Process. The output pane shows the result with byte-size stats below.
- Copy or download the result; download uses .min.js suffix when minifying.
Tips & Best Practices
- For production bundles, always run minification through a CI/CD build (terser/swc/esbuild) — this tool is for ad-hoc checks, not your release pipeline.
- Enable keep-function-names if your error monitoring (Sentry, Rollbar, etc.) depends on readable stack traces.
- Use beautify mode on minified third-party code to read and debug it; pair with browser devtools "pretty-print" for the same effect inline.
- For micro-optimization comparisons, paste a snippet, minify, and compare byte counts — informative but not a substitute for actual benchmark measurements.
- If your code uses uncommon ES syntax (decorators, top-level await), check that the tool's parser accepts it before relying on minified output.
FAQ
What gets removed during minification?
Insignificant whitespace, comments (unless /*! preserved), unreachable code after return/throw, dead branches behind constant conditions, and unused local variables (when "compress" is on). Variable names are shortened (a, b, c...) but exported and global names are preserved. The result is semantically identical to the input — same behavior, just smaller.
Will minification break my code?
Not if you're writing standard JavaScript. Edge cases that break: code that depends on Function.name (use keep-function-names toggle); code that uses eval with stringified names (the renamer can't know about them); code that pattern-matches on `class { … }` source strings. For typical app code, minification is safe.
How is this different from running `terser` locally?
Same algorithm class. This tool is convenient for quick one-off minification of a snippet without spinning up a build. For production pipelines, run terser in your CI — it has more options (mangle properties, drop debugger statements, transform property access).
Why is the gzip-projected size much smaller than the raw minified size?
JavaScript minification removes structural redundancy (whitespace, comments) but the resulting code still has repeating tokens (function, return, const, etc.). Gzip then compresses those tokens via dictionary coding. So 10KB minified can gzip to 3-4KB — the wire size your CDN serves.
Can it beautify already-minified code?
Yes. Beautify mode parses the minified input and emits indent-formatted output. The renamed variables (a, b, c...) won't be magically un-renamed though — beautify recovers structure but not the original identifier names. For meaningful names, you'd need the source map.
Does it support source maps?
Source map generation isn't exposed in this tool, but the underlying parser supports it for build-tool integration. For source maps, use the same parser via terser in your build script and emit .min.js.map files.
Is my code sent anywhere?
No. The parser runs in your browser; input and output stay in the tab; DevTools Network shows no requests when you click Process. Safe for proprietary code or unreleased features.
How big a file can it handle?
Up to ~10MB of JS before the UI thread blocks noticeably during minification. For larger bundles, run terser at build time. The tool is for ad-hoc one-off processing, not for multi-megabyte production bundles.