JavaScript

JavaScript Beautifier

Details

How to use JavaScript Beautifier

What the tool does, how to run it, and what to expect from the result.

How to beautify and reindent JavaScript

Beautifying JavaScript takes minified, single-line code and expands it so that blocks are indented and statements sit on their own lines. It is the standard first step when you are trying to understand what a compiled bundle is doing.

The formatter runs in your browser. It reindents by tracking braces and semicolons while leaving the contents of strings and template literals alone, and it does not preserve comments, so it belongs on compiled output rather than on source you maintain.

  • Paste the minified JavaScript into the input box.
  • Read the expanded output, indented two spaces per nesting level.
  • Copy it into an editor with syntax highlighting to trace the logic.
  • Expect single-letter variable names to remain, since a beautifier cannot undo the renaming a minifier applied.
  • Check whether the bundle ships a source map first, because that will give you the real source with real names and comments.
Tips

Getting a better result out of JavaScript Beautifier

Specific settings and thresholds, not general advice.

  • Your comments will not survive. The formatter minifies first and then re-expands, so every line comment and block comment in the input is discarded. Never run this over source code you maintain, only over code that had no comments to begin with, such as a minified bundle.
  • It reindents, it does not restyle. It adds newlines and indentation after braces and semicolons, and it does nothing about operator spacing, quote style, trailing commas, or line length. Code written as a+b stays a+b. That is the difference between a reindenter and a formatter such as Prettier.
  • For-loop headers get split across lines, because a newline is inserted after every semicolon including the two inside the parentheses. The result is still valid JavaScript, since a newline is only whitespace there, but it reads oddly and is a sign you are looking at a mechanical reindent.
  • Beautified code is not the original code. Minifiers rename variables to single letters, and no formatter can restore a name that has been destroyed. Expanding a bundle gives you readable structure with meaningless identifiers, which is enough to trace logic and not enough to maintain it.
  • If the bundle has a source map, use it instead. DevTools will show you the real source files, the real variable names, and the real comments, which is incomparably more useful than reformatting the compiled output.
Limits

What JavaScript Beautifier does not do

The honest boundary, so you do not lose time finding it yourself.

  • It removes all comments, because the input is minified before it is expanded.
  • It does not normalise operator spacing, quote style, or line length, so the output is reindented rather than formatted to a style guide.
  • It splits for-loop headers across multiple lines, since it breaks after every semicolon.
  • It cannot recover original identifier names from minified code, and it does not read source maps.
At a glance

Who JavaScript Beautifier is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Developers and anyone working with code who needs quick formatting.

Ideal for

Quickly beautify JavaScript without a build step or install.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Why are my comments gone?

Because the beautifier minifies the input and then expands the result, and the minification step strips comments. This is acceptable when you are unpacking a compiled bundle, which contains no comments worth keeping, and destructive when you are tidying your own source. For code you maintain, use a real formatter such as Prettier, which preserves comments, runs on save, and can be enforced in CI.

Will beautifying give me back the original source?

No, and this is the most common misunderstanding. Minification is lossy where it matters: local variable names are gone and nothing can restore them. Comments in the file you paste are preserved, but comments a minifier already deleted are not coming back.

Why does my for loop look strange after formatting?

Because the formatter inserts a newline after every semicolon, and a for-loop header contains two of them inside its parentheses. The initialiser, the condition, and the increment each end up on their own line. The code is still correct, since a newline inside parentheses is only whitespace, but it is a legible sign that this is a mechanical reindent rather than a syntax-aware format.

Is this the same as what Prettier does?

No. Prettier parses your code into a syntax tree and prints it back out according to a style, which lets it wrap long lines intelligently, normalise quotes, add or remove trailing commas, and keep your comments in the right place. This tool inserts line breaks after braces and semicolons and indents by depth. It is enough to make a minified file readable, and it is not a substitute for a formatter in a real project.

Is my code sent to a server?

No. The formatting happens in your browser and nothing is transmitted or stored. Since the usual reason to beautify is that you are examining somebody else's bundle or your own unreleased code, that is worth knowing.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon