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.

  • Expands minified or one-line JavaScript into readable code with proper indentation and line breaks
  • Reformats from a parsed syntax tree, so the code behaves exactly as it did before, only laid out clearly
  • Control indent width, wrap width, semicolons, and single or double quotes to match your project
  • Runs entirely in your browser, so bundles, vendor scripts, and private code never leave your device
tools/JavaScript Beautifier
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

    Modern syntax handled

    Arrow functions, classes, async and await, template literals, destructuring, optional chaining, and JSX-free modern JavaScript are all parsed and laid out correctly, not treated as plain text.

  5. 05

    Line and byte count

    The output panel shows how many lines the formatted code expands to and its size, a quick measure of how tightly the original was packed.

  6. 06

    Copy, download, or upload

    Paste from the clipboard, open a .js file from disk, then copy the formatted code or save it. Everything stays on your machine and never reaches 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, so the code is reformatted 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 in place with its message, 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? TheJavaScript Minifier compresses the same code in the opposite direction, and for stylesheets theCSS 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.
  • TypeScript-specific syntax and JSX are outside what the JavaScript parser here expects; format those with a tool configured for them.
  • 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 only adds whitespace, line breaks, and consistent spacing, all of which the JavaScript engine ignores. The statements, expressions, and logic are untouched, 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, async and await, template literals, destructuring, spread, and optional chaining are all parsed and formatted correctly. TypeScript and JSX, however, need a parser configured for them and are out of scope here.

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.