How to use the JavaScript Formatter
- Paste JavaScript (or JSON/JSX) into Input JavaScript, drop a
.jsfile, or click Sample. - Choose the indentation, an optional wrap width and your brace style. The output updates instantly.
- Copy or download the result. Use Minify mode to remove comments and whitespace from a small script.
What is a JavaScript formatter?
A JavaScript formatter (or beautifier) re-indents code and puts statements, object properties and blocks on separate lines. Its most common job is to unminify production bundles so you can read them while debugging, but it is equally handy for tidying a snippet from Stack Overflow, a bookmarklet, or code pasted from a chat. This tool uses js-beautify, which understands modern syntax: arrow functions, classes, template literals, async/await, optional chaining, ES modules and JSX.
Brace styles
| Option | Result |
|---|---|
| Same line (K&R / “1TBS”) | if (ok) { — the convention in most JavaScript style guides and Prettier. |
| Same line, keep inline | As above, but short blocks such as { a: 1 } stay on one line. |
| Next line (Allman) | Opening braces on their own line, common in C# codebases. |
| else on new line | } and else on separate lines (Stroustrup-like). |
Beautifying is not deobfuscating
Minifiers such as Terser or esbuild rename local variables to single letters (function(e,t){…}). Formatting restores the layout but cannot bring back the original names or comments — that information is gone. If the site publishes source maps (//# sourceMappingURL=), your browser’s DevTools can show the original sources instead. Code that has been deliberately obfuscated (string arrays, eval packing) stays hard to read even when formatted.
About the minifier
The Minify mode is a safe whitespace-and-comment minifier, not a full compressor. It tokenizes your code properly (strings, template literals, regular expression literals) and removes comments and spaces, but keeps a line break wherever removing it could change automatic semicolon insertion — for example after return or before ++. Two safety checks run on every result: the token stream must be identical to the input, and the output must still parse. Expect 20–40% savings; for production bundles, a build tool such as Terser or esbuild also renames variables and removes dead code for much bigger wins.
Common issues
- “Doesn’t parse as plain JavaScript” — shown for TypeScript, JSX or a real syntax error. Formatting still works; minify requires valid JavaScript.
- JSON formats fine here, but the JSON Formatter also validates it and points to the exact error.
- Want to compare a file before and after a change? Paste both versions into the Diff Checker.
Tools that pair well with the JavaScript Formatter
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- SQL Formatter — Paste a query — or a whole migration — and get readable SQL with one clause per line, aligned joins and consistent keyword case, using the grammar of your database.
- cURL to Code — Paste a curl command — from API docs or “Copy as cURL” in your browser’s DevTools — and get ready-to-run code for six languages, with headers, body and authentication carried over.
Frequently asked questions
Can this unminify JavaScript from a website?
.min.js file and it will be laid out readably. Variable names shortened by the minifier (like e, t, n) cannot be restored, and comments are gone for good.