JavaScript beautifier
Re-indent minified or messy JavaScript and JSON with js-beautify, choosing the indent width and brace style.
Input
Result
The result will appear here.A minified bundle, a one-line snippet from a bug report, a script copied out of DevTools: readable JavaScript is the first step to understanding any of them. This runs js-beautify, the formatter behind beautifier.io and a long list of editor plugins, which re-indents code token by token without needing to understand the whole program. That is why it copes with fragments and even slightly broken code that a full parser would reject, and why it formats JSON just as well as JavaScript.
How it works
- Brace styles map to js-beautify's own: same line, same line with short blocks kept inline, every brace on its own line (Allman), or else and catch moved to a new line.
- Blank lines you left between blocks are kept, with several in a row collapsed to one, unless you switch that off.
- Beautifying restores layout, not names: a minified variable called e stays e.
- The input is not validated, so a syntax error is formatted along with everything else rather than reported.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Can it turn minified production code back into the original?
- Only the layout. Minifiers rename local variables and delete comments, and that information is simply gone from the file. If the site ships source maps, your browser's DevTools can map the minified code back to the original sources, which is the only real way to get the names back.
- js-beautify or Prettier?
- Prettier reprints code from a full parse and enforces one house style, which is what you want inside a repository. js-beautify only adjusts whitespace and indentation, which makes it better for quickly reading code you are not going to commit, including fragments Prettier would refuse to parse.
- Does it handle TypeScript or JSX?
- Not reliably. js-beautify understands JavaScript and gets much TypeScript right more or less by accident, but type annotations, generics and JSX tags can come out oddly indented. Prettier parses both properly and is the better tool for them.
The open-source behind it
This tool runs on beautifier/js-beautify, released under MIT. If you need the same behaviour inside your own program, that is the library to reach for.
beautifier/js-beautifyAlso known as
- javascript beautifier
- js beautify online
- unminify javascript
- javascript formatter
- format js code
- pretty print javascript