JavaScript Beautifier
Format and unminify JavaScript, TypeScript and JSX with Prettier. Control quotes, semicolons, indentation and line width. All in your browser.
What this tool does
It takes minified or badly formatted JavaScript and hands it back readable: line breaks, consistent indentation and separated expressions. It supports JavaScript, TypeScript and JSX, each with its own parser, and runs entirely in your browser.
It is the inverse of the JavaScript minifier.
The limit to understand before you start
Formatting does not undo minification. They are two different things, and this is the most expensive confusion:
- Structure is restored: where each function starts and ends, what is nested inside what, where each branch of a conditional lives. That turns an unreadable file into a navigable one.
- Names are not restored. A minifier renames
calculateOrderTotalton. That information is not in the file — it was thrown away when minifying. No tool can bring it back, and be suspicious of any that claims otherwise.
If you need the real code and not just its shape, the route is the sourcemap. Many bundles publish a .map alongside the .js; with it, your browser’s developer tools show you the original with its names. Look for it before resigning yourself to single-letter variables.
Pick the right dialect
The three above use different parsers and are not interchangeable:
- JavaScript for ordinary
.jsand.mjs. - TypeScript when there are type annotations, interfaces or generics. It is not valid JavaScript, so the standard parser rejects it.
- JSX when there are tags inside the code, as in React or Preact. Without selecting it, the
<div>inside a function looks like a less-than operator and everything breaks.
The two options that actually matter
Prettier is opinionated by design: it barely lets you decide, and that is exactly its value — two people with the same file get the same result, and diffs stop filling up with style churn.
The two preferences that genuinely vary between teams are available here:
- Single or double quotes. Prettier defaults to double; much of the JavaScript ecosystem prefers single.
- Semicolons. Always or never. Both positions are coherent; what causes trouble is mixing them.
Plus the maximum line width, which decides when a long call breaks across lines.
When you need it
- Reading the production bundle to work out why something only fails on the deployed site.
- Auditing a third-party script before putting it on a page, especially from an analytics provider or an embedded widget.
- Normalising the style of a file several people have touched before committing it.
- Fixing an unreadable diff where someone committed the minified file.
About the formatter
It uses Prettier (MIT licence) compiled for the browser. The parser downloads only when you select its dialect, so opening this page does not pull the TypeScript one if you do not need it.
Frequently asked questions
Is it useful for reading minified production code?
For reading it, yes. For recovering it, no. Formatting restores the structure and indentation, so the code becomes navigable. But a minifier also shortens variable and function names, and that is irreversible: you will still see a, b, n instead of the original names. If the bundle ships a sourcemap, that is the route to the real code.
Does it format TypeScript and JSX?
Yes, each with its own parser. Pick the dialect above. TypeScript needs its own because type annotations and generics are not valid JavaScript, and JSX because tags inside code would break the standard parser.
Can I choose single quotes and drop semicolons?
Yes, both are in the settings. They are the two style preferences that vary most between teams. Every other decision is made by Prettier, which is opinionated by design — and that is precisely why the output stays consistent.
Is my code sent to a server?
No. Prettier runs inside your browser. No network request fires when you format, which matters if the code you are reviewing belongs to a client or has keys embedded in it.
Reviews & ratings
No reviews yet. Be the first to leave one!
Related guides
Blog tutorials where this tool comes in handy.
Related tools
Others from the catalogue that pair well with this one.