JavaScript Beautifier
Reformat minified, obfuscated, or sloppily-written JavaScript into clean, Prettier-formatted code you can read and reason about.
What is a JavaScript beautifier?
A JavaScript beautifier rewrites JS source with consistent indentation, spacing and line breaks so it reads cleanly. It's especially handy when you're staring at a bundled, single-line vendor script and trying to work out what it actually does.
This tool formats your code with Prettier — the same opinionated formatter used across the JavaScript ecosystem — running on the Babel parser. That means the output matches the style millions of projects already use, and genuinely invalid syntax is reported rather than guessed at.
All parsing and formatting happens in your browser. Paste freely: nothing is uploaded.
How to beautify JavaScript
- 1
Paste your JS
Drop minified or messy JavaScript into the input pane, or upload a .js file.
- 2
Let Prettier format it
The cleaned-up, consistently formatted code appears on the right.
- 3
Resolve syntax errors
If the parser can't read your code, you'll get an error pointing at the problem.
- 4
Copy or download
Copy the formatted code or save it as a .js file.
Why it's useful
Understand bundled code
Expand a minified library into readable lines so you can trace behaviour or debug an issue.
Standardise team style
Run snippets through Prettier's conventions so everything looks the same regardless of who wrote it.
Clean up quick experiments
Turn a throwaway one-liner into something worth committing without hand-formatting.
Private by design
Proprietary or unpublished code is formatted locally and never leaves the browser.
Example: before and after
Cramped input on the left, Prettier-formatted output on the right.
function add(a,b){return a+b}const nums=[1,2,3];const total=nums.reduce((s,n)=>add(s,n),0);function add(a, b) {
return a + b;
}
const nums = [1, 2, 3];
const total = nums.reduce((s, n) => add(s, n), 0);Beautifying is not the same as deobfuscating
Beautifying restores readable formatting, but it can't undo deliberate obfuscation. If variable names were replaced with a, b, c by a minifier, beautifying won't bring the original names back — that information is gone. What it will do is reveal structure: loops, conditionals, function boundaries and scope, which is usually enough to follow the logic.
Good times to reach for it
- Reading a third-party script you've pasted from a CDN or DevTools.
- Cleaning up code copied out of a chat, ticket, or Stack Overflow answer.
- Formatting a snippet before pasting it into documentation or a blog post.
- Sanity-checking that a chunk of JavaScript is even syntactically valid.
Frequently asked questions
It uses Prettier with the Babel parser — the de facto standard formatter for JavaScript — so the output follows the same conventions as most modern projects.
No. Minifiers permanently rename identifiers to short names, and that information can't be reconstructed. Beautifying restores formatting and structure, not the original names.
No. Formatting runs locally in your browser, so even unpublished or proprietary code stays private.
Yes. The Babel parser handles modern ES features such as arrow functions, async/await, optional chaining, and template literals.
Prettier needs syntactically valid JavaScript. If there's a missing bracket, unterminated string, or other parse error, it reports the problem instead of producing output. Fix it and try again.
This tool targets plain JavaScript via the Babel parser. Simple JSX often parses, but for full TypeScript formatting you'll want a TypeScript-aware setup. For converting HTML to JSX, try our HTML to JSX tool.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.