Data

JavaScript Beautifier

A minified bundle is one long line of renamed variables and stripped whitespace: perfect for shipping, hopeless for reading. When you need to understand a vendor script, trace what a third-party widget does, or just tidy code you pasted, this beautifier rebuilds the structure. It parses the JavaScript into a syntax tree and prints it back with real indentation, line breaks, and spacing, so logic that ran together on one line becomes something you can actually follow. The behaviour is identical; only the formatting changes. Pick your indent, quotes, and semicolon style, and everything runs locally in your browser.

Loading the formatter
8%
The Prettier engine is a one-time download and is cached for the rest of your visit.
Indent
Width

Overview

Making sense of code you did not write, or code a bundler flattened, starts with seeing its structure. This tool restores that structure without changing what the code does.

  1. 01

    Parser-based reformatting

    The JavaScript is parsed into a syntax tree before it is printed, so the tool reformats from real structure rather than guessing where to break lines. That is why indentation, blocks, and statement boundaries always land in the right place.

  2. 02

    Consistent, deterministic style

    Indentation, spacing, line breaks, and bracket placement follow one set of rules throughout. The same input always yields the same output, so the result is stable to read, share, and diff.

  3. 03

    Options that match your project

    Choose two spaces, four spaces, or tabs, set the wrap width, decide whether statements end in semicolons, and pick single or double quotes, so the output reads the way your codebase already does.

  4. 04

    JavaScript, TypeScript, and JSX

    Arrow functions, classes, async and await, template literals, destructuring, optional chaining, decorators, JSX, and TypeScript annotations are all parsed and laid out correctly, not treated as plain text.

  5. 05

    Errors you can act on

    When the code will not parse, the reason, the line and column, and a short excerpt of the offending code are shown together, so you can find the stray brace instead of guessing where the formatter gave up.

  6. 06

    Read it, then take it with you

    The output panel counts the lines the code expands to and its size, a quick measure of how tightly the original was packed. Paste from the clipboard or open a file from disk, then copy the formatted code or save it, all without touching a server.

How to use

Go from a packed, unreadable script to clean, consistently formatted JavaScript in a few steps.

  1. 01

    Paste your minified or messy JavaScript into the input panel, or use Upload to open a .js file from disk.

  2. 02

    Set your indent style and wrap width, and choose whether to use semicolons and single quotes.

  3. 03

    Read the formatted code on the right, re-laid-out with proper indentation and one statement per line, updating as you change options.

  4. 04

    Copy the result or download it as a .js file, then open it in your editor to read, debug, or keep working on.

Details

The details that make the formatted output trustworthy and easy to work with.

  • Built on Prettier with the Babel parser in its TypeScript mode, so plain JavaScript, TypeScript, and JSX all reformat from a real syntax tree rather than by pattern-matching.
  • Formatting runs as you type and as you change options, with the result updating in place.
  • A syntax error is reported with its reason, its position, and the line it points at, instead of producing half-formatted or empty output.
  • Both the input and the formatted result are shown with full JavaScript syntax highlighting in light and dark themes.
  • Nothing is uploaded or logged. The code you paste stays in your browser and is gone when you close the tab.

Use cases

Where turning packed JavaScript back into readable code pays off.

  1. Reading a minified bundle

    When the only available copy of a script is the minified production file, format it here to follow the control flow and see how the pieces fit together.

  2. Inspecting a third-party widget

    Analytics snippets, embeds, and vendor SDKs ship minified. Beautifying one lets you review what it touches before you trust it on your site.

  3. Debugging code from a stack trace

    A production error often points into a single packed line. Formatting that file makes the surrounding logic legible so you can find the real cause.

  4. Normalising pasted snippets

    Code copied from documentation, a forum, or a chat arrives with mixed indentation and quoting. One pass makes it consistent with your style.

  5. Cleaning up before a commit

    Reformat a rough draft to your project’s indent, quote, and semicolon conventions before it goes into review, without wiring up a full toolchain.

  6. Sharing a readable example

    A consistently formatted snippet is far easier to explain in a tutorial, an issue, or a pull request than one with ad-hoc spacing.

See also

Shipping rather than reading? The JavaScript Minifier compresses the same code in the opposite direction, and for stylesheets the CSS Beautifier lays CSS out the same readable way.

Beautifying versus minifying

Beautifying and minifying move the same code in opposite directions, and both only change characters the engine ignores. One restores the whitespace that makes code readable; the other removes it to save bytes.

  1. Formatting does not change behaviour

    Indentation, line breaks, and spacing are invisible to the JavaScript engine. Reformatting rearranges how the code looks to a person, never what it computes, so a beautified script runs exactly like the original.

  2. Why bundles are unreadable

    A minifier strips whitespace, shortens local variable names, and collapses everything onto as few lines as possible. The result is small and fast to download, but a single dense line where every boundary between statements has disappeared.

  3. It will not restore original names

    Beautifying brings back layout, not meaning that was thrown away. Variables a minifier renamed to a and b stay that way, and stripped comments do not return. You get readable structure, not the author’s original source.

  4. Idempotent and commit-safe

    Formatting already-formatted code produces the same text again. Because the output is deterministic, running it on every save or in a pre-commit hook will not create churn-only changes in your history.

  5. It is a reader, not a runner

    The beautifier reformats text; it does not execute the script, resolve imports, or follow what it does at runtime. It makes code legible so you can read and reason about it yourself.

  6. Format to read, minify to ship

    Readable code belongs in your editor and your repository; minified code belongs in production. This tool is the read side of that pair, the mirror image of a minifier.

Best practices

Habits that get the most out of formatting JavaScript.

  • Use the beautifier to read and review unfamiliar or packed code, and keep your own readable source as the source of truth.
  • Settle on one indent, quote, and semicolon style for a project so formatted files diff cleanly against each other.
  • Remember that formatting restores layout only: minified variable names and stripped comments do not come back.
  • For your own codebase, run a formatter from your editor or a pre-commit hook so files stay consistent without manual pasting.
  • Treat a beautified third-party script as a way to read it, not as a safe drop-in replacement for the version you were served.

Limitations

What this tool does, and what it leaves to other steps.

  • It reformats a single piece of JavaScript. It does not run the code, resolve imports, bundle modules, or transpile syntax.
  • It restores layout, not information. Minified variable names stay short and stripped comments do not return.
  • It formats what it is given and does not type-check TypeScript, resolve JSX components, or tell you whether the code is correct.
  • Files are read in the browser, so uploads are capped at 2 MB. A bundle larger than that is better opened in your editor.
  • A syntax error stops formatting and is reported rather than worked around, so badly broken input will not produce partial output.

FAQ

Common questions about formatting JavaScript and when to use it.

Does beautifying change what my code does?

No. It adds whitespace, line breaks, and consistent spacing, all of which the JavaScript engine ignores. Statements, expressions, and logic keep their meaning; the only rewriting is cosmetic, such as printing a number as 0.5 rather than .5 or settling on one quote style, so the formatted code behaves exactly like what you pasted in.

Can it un-minify a bundle back to the original?

It restores readable layout, not the original source. Indentation and line breaks come back, but variables a minifier renamed to single letters stay renamed, and comments it stripped are gone. You get code you can read and follow, not a byte-for-byte copy of what the author wrote.

What formatting options can I control?

You can indent with two spaces, four spaces, or tabs, set the wrap width to 80, 100, or 120 columns, choose whether statements end with semicolons, and prefer single or double quotes for strings.

Does it support modern JavaScript syntax?

Yes. Arrow functions, classes, private fields, async and await, template literals, destructuring, spread, optional chaining, and top-level await are all parsed and formatted correctly. Modern syntax is formatted, not converted, so nothing is down-levelled for older browsers.

Can it format TypeScript or JSX?

Yes. The parser behind this tool reads TypeScript and JSX alongside plain JavaScript, so type annotations, interfaces, enums, decorators, and JSX elements are laid out properly rather than rejected. It formats them without type-checking them: the tool arranges your code, it does not tell you whether the types are right.

Is it safe to run a third-party script through it?

Formatting it is safe and happens entirely in your browser; the code is never executed, only re-laid-out as text. Treat the result as a way to read and audit the script, not as a vetted replacement for the file you were originally served.

Is my code uploaded anywhere?

No. Everything runs in your browser. The JavaScript you paste and any file you open are processed locally, never transmitted or stored, and disappear when you close the tab, so bundles and private code stay on your device.

Related tools

Keep going with the rest of the data and format toolkit.