JavaScript Beautifier & Minifier
Pretty-print messy / minified JavaScript code, or minify hand-written JS for production. Uses js-beautify — the same library VS Code uses.
When to beautify JavaScript
Minified JavaScript — what production sites serve to browsers — is essentially unreadable: !function(e){var t,n;...}(this); stretched across a single 50,000-character line. A beautifier reverses the minification: adds line breaks, indents nested blocks, formats argument lists. The semantic result is identical; only the layout changes.
Common reasons: reading the JS source of a website you don't own, debugging a minified bundle, auditing a third-party script before installing it, reverse-engineering a webpage's interactive behaviour, or just understanding code your build pipeline minified.
When to minify
- Before deploying to production (though build tools usually handle this).
- Before embedding inline in HTML as a small script block.
- Before sending over a low-bandwidth channel.
Indent options
- 2 spaces — modern web standard (Prettier, Airbnb style guide, Vue, React).
- 4 spaces — Python-influenced style, older JS conventions.
- Tab — preferred by some teams for accessibility (viewer-controlled width).
Tips
- Beautified output is for reading, not committing. Don't replace your project's source with beautified third-party code.
- For real debugging of minified code, source maps are the right answer — they let you see the original code in DevTools without changing the deployed file.
- This minifier is conservative — it strips whitespace and comments but doesn't rename variables or do dead-code elimination. For aggressive minification use Terser / esbuild / SWC in a build pipeline.
FAQs
Is anything uploaded?
No.
Will it break my JS?
Beautify is safe — it only changes whitespace. The basic minifier strips comments and whitespace; very rare edge cases (regex literals next to division-like syntax) can be affected.
Does it support modern syntax (async/await, ES2024)?
Yes — js-beautify keeps up with current syntax.