JavaScript Beautifier

How to use it

1. Paste a script or drop a .js, .jsx, .mjs or .cjs file — a dropped file is read in place, never uploaded; past 2 MB a labelled button runs only on your press.
2. Decide whether trailing semicolons stay, choose single or double quotes, then set the print width and tab width to aim for.
3. If the parser rejects the source, the exact message, a caret frame and a Jump-to-error link mark the bad token; your bytes stay as pasted.
4. Take the output with Copy, save it with Download, or share a permalink that reopens this exact state.

Drop in minified or hand-mangled JavaScript and read back exactly what Prettier would print. The real Prettier engine runs here through its babel parser — which reads plain JS and JSX from one grammar — inside a Web Worker on your own machine, so nothing you paste is uploaded. Semicolons, quote style, print width and tab width all stay yours to set.

How it works

This is Prettier's standalone build wired to the babel parser and the estree printer, pulled in once as its own chunk and run in a Web Worker so even a large file reprints without locking the tab. Because babel does the parsing, one engine covers JavaScript and JSX with no dialect switch.

Only presentation changes: indentation, line wrapping against the print width, spacing, quote style, and whether each statement keeps or loses its trailing semicolon; trailing commas follow Prettier's defaults. Identifiers are never renamed and statements never reordered, while comments and directives such as "use strict" ride through untouched.

Editor plugins, pre-commit hooks and CI checks embed this same core, so one input at a pinned version and option set reduces to a single output everywhere. What you copy here is what your repository's format check already expects, keeping a review about the change, not the whitespace.

Examples

const sum=(a,b)=>{return a+b;};

const sum = (a, b) => {
  return a + b;
};

const msg = "hi"; const items = ['a', 'b'];

const msg = 'hi'
const items = ['a', 'b']

const App=()=><div className="card"><span>{count}</span></div>;

const App = () => (
  <div className="card">
    <span>{count}</span>
  </div>
);

const result = doSomething(alpha, beta, gamma, delta, epsilon, zeta, eta, theta);

const result = doSomething(
  alpha,
  beta,
  gamma,
  delta,
  epsilon,
  zeta,
  eta,
  theta,
);

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

Unexpected token at line 1, column 12.

The object literal opens with { but the source ends before a matching } — so babel names the first token it cannot accept, here the end of input. A truncated copy-paste is the usual culprit.

Unterminated string constant at line 1, column 11.

A string opens with a quote that never closes on its line, and the column points straight at that opening quote. Add the missing closing quote and the statement parses.

Missing semicolon at line 1, column 2.

Two bare identifiers sit side by side with nothing between them, so the parser wants a semicolon before the second begins. This is a genuine parse failure, not a style preference.

Keyboard shortcuts

⌘/Ctrl + Enter

Beautify or re-run — required past 2 MB.

⌘/Ctrl + S

Download the beautified file.

⌘/Ctrl + C

Copy the beautified code while nothing is selected.

⌘/Ctrl + Shift + C

Force-copy the beautified code over a selection.

t

Toggle the theme.

? or ⌘/Ctrl + /

Show the shortcut list for this page.

Esc

Close the open dialog and keep your input.