What this tool does
Two operations on the same toolbar. Beautify takes minified or poorly formatted code — JavaScript, JSX, JSON, CSS, SCSS, or HTML — and reformats it with proper indentation, consistent brace style, and readable line breaks. Minify (JavaScript only) does the reverse: strips comments, collapses whitespace, and produces a smaller file that still runs identically.
The beautifier is powered by the long-running js-beautify library — the same code that powers VS Code's "Format Document" command for these languages by default. It's been maintained for over a decade and handles every weird syntax edge case you're likely to encounter, including modern JSX, template literals, optional chaining, and complex CSS selectors.
When you actually need to beautify
- Debugging a third-party script in production. Open DevTools, find the offending JS bundle, paste here, get readable source. The output won't be original (variable names stay mangled from minification), but the control flow is now visible.
- Reverse-engineering a chunk of code from a CDN — minified analytics, ad scripts, fingerprinting libraries — when you want to understand what's running on your page.
- Inspecting a webpack/Rollup bundle when your sourcemap is missing or broken.
- Cleaning up auto-generated config files like compiled Tailwind CSS or PostCSS output.
- Re-formatting code copied from a tutorial or Stack Overflow answer where the indentation got butchered by the platform's editor.
When NOT to use the minifier
The minifier on this page is a simple whitespace + comment stripper. It does not rename variables, eliminate dead code, hoist constants, or perform any of the optimizations a real minifier does. For production builds, use Terser (the de facto standard) or esbuild in your build pipeline. They'll typically produce 30–50% smaller output and integrate with sourcemaps for production debugging.
This minifier is useful for: shrinking a small standalone script (a userscript, a one-file Cloudflare Worker, an embed snippet) when you don't have a build pipeline; getting a rough estimate of how small a file COULD become; or doing a one-shot transform for an experiment. It's not the right tool for production deployment of a real application.
Beautifier options
- Indent size — 2 spaces (most JavaScript ecosystems), 4 spaces (Python-ish ecosystems, some older PHP/Java codebases), or hard tab.
- Brace style defaults to "collapse" (opening brace on the same line as the statement) which matches the JavaScript convention. The library supports "expand" (opening brace on its own line) but it's rare in JS — used in C# and Java codebases instead.
- Wrap line length — by default unlimited (preserves your original line breaks). Real linters (Prettier, ESLint) have their own line-wrap rules; if you need strict line-length enforcement, run those on your codebase rather than this tool.
Common pitfalls
- The beautifier preserves semantics, not whitespace inside strings or template literals. If your code has carefully formatted multi-line strings, those don't change.
- Beautifying minified JS doesn't recover variable names. If the original was minified with Terser using "mangle" enabled, you'll get
function a(b,c)back, notfunction calculateTotal(items, taxRate). Source maps recover names; this tool can't. - Beautifying obfuscated code (string-encrypted, control-flow-flattened, etc.) often produces output that's still unreadable — the obfuscation didn't lose whitespace, it scrambled the logic. Use a deobfuscator (different tool) first.
- JSON beautification fails on JSONC and JSON5. Comments and trailing commas aren't valid JSON; strip them first or convert via a JSONC→JSON converter.
- HTML beautification can move whitespace in ways that affect rendering — particularly inside
<pre>and<textarea>elements, where whitespace is significant. Inspect the output if your page layout depends on inline-block spacing.
Common use cases
- Debug a third-party minified script in production
- Reverse-engineer a CDN-loaded JavaScript bundle
- Quickly format auto-generated CSS for review
- Minify a small standalone script (userscript, embed snippet, Cloudflare Worker)
Frequently asked questions
Is the minifier as good as Terser or esbuild?
No — it's a simple whitespace + comment stripper. It doesn't rename variables, eliminate dead code, or perform any real optimizations. For production builds, use Terser or esbuild in your pipeline. This minifier is for one-off scripts where you don't have a build pipeline.
Does it support TypeScript?
js-beautify treats TS as JS and formats correctly for most cases, including JSX. Some TypeScript-specific syntax (decorators, complex generics) may not format optimally. For production TS formatting, use Prettier with the typescript parser.
Can it recover variable names from minified output?
No — names that were mangled to <code>a</code>, <code>b</code>, <code>c</code> stay that way. The beautifier only restores whitespace and indentation, not identifier names. Recovering names requires a source map; this tool can't help with that.
Why does my beautified output look slightly different from VS Code's formatter?
VS Code can be configured to use Prettier or other formatters instead of js-beautify by default. If you want VS Code's exact output, install Prettier and use it locally. js-beautify and Prettier have different opinions about a handful of style choices (trailing commas, line wrapping).
Does the minifier handle modern syntax (optional chaining, BigInt, etc.)?
It handles most modern syntax correctly because it works at the lexical (token) level, not the AST level. It doesn't parse the code semantically — it just strips whitespace and comments while preserving strings, regexes, and template literals.