JavaScript Formatter

Most arguments about JavaScript style are not about readability, they are about the cost of inconsistency: a diff full of whitespace changes, a review derailed by a semicolon debate, a file where three developers each expressed a different preference. Prettier ended that argument by removing the choice, and this page gives you the same engine without installing anything.

It runs Prettier 3.9.6 with the Babel parser, in a Web Worker in your browser. Prettier parses your code into an abstract syntax tree and prints the tree from scratch. Your line breaks, your alignment, your choice of quotes — none of it is read, all of it is regenerated. That is worth stating plainly, because people are routinely surprised when a carefully hand-wrapped chain comes back reflowed. Nothing about the meaning of your program changes; almost everything about its appearance may.

The decisions Prettier makes for you

These are not adjustable on this page, by design — the value of Prettier is that everyone gets the same answer:

• Semicolons are added. Statements are terminated explicitly, which also removes the class of automatic-semicolon-insertion bugs that bite when a line begins with ( or [.
• Double quotes are used for strings, unless the string contains a double quote and no single quote, in which case single quotes avoid the escaping.
• Trailing commas are added in multi-line arrays, objects, parameter lists and argument lists. This is the ES2017-and-later default and it makes diffs one line shorter when you append an entry.
• Lines are broken at 80 columns. When an expression does not fit, Prettier breaks it in a way that reflects its structure: a method chain of three or more calls goes one call per line, an object literal that will not fit goes one property per line, and a JSX element with several props goes one prop per line.
• Parentheses are added around arrow function parameters, even a single one, and around expressions where precedence would otherwise be ambiguous to a reader.
• Blank lines collapse. Two or more consecutive empty lines become one; a single blank line you placed between logical sections is respected.

What the Babel parser accepts

The Babel parser is the permissive one, which is exactly what you want in a formatter. It handles the full modern language: ES modules with static and dynamic import(), top-level await, async generators, optional chaining and nullish coalescing, logical assignment operators, class fields, private members with the # prefix, static blocks, BigInt literals, numeric separators, regular expression flags, and tagged template literals.

JSX is supported without any extra configuration, so a React component pasted here formats correctly, including conditional rendering with ternaries — which Prettier indents in a specific, initially unfamiliar way that becomes very readable once you are used to it.

Comments are preserved. Their exact attachment can shift slightly in edge cases, because a comment belongs to a node in the tree rather than to a line of text, and a comment wedged between an argument and a closing parenthesis may come back attached to a neighbouring node. Block comments, line comments and JSDoc blocks all survive; JSDoc asterisk alignment is maintained.

A syntax error stops the process and returns the parser message with the line and column. Nothing is guessed at and nothing partial is emitted.

Formatting is not linting, transpiling or minifying

This page does exactly one thing. It does not lint: there is no ESLint here, so you will get no warnings about unused variables, missing await, shadowed names or == versus ===. It does not transpile: modern syntax is printed as modern syntax, never downlevelled for older runtimes, and no polyfills are added. It does not minify: nothing is renamed, no dead code is eliminated, and the output is longer than the input, not shorter.

One genuinely useful side effect worth knowing: pasting a minified bundle here expands it into something readable. Variable names stay mangled — that information was destroyed by the minifier and cannot be recovered — but the control flow becomes visible, which is often enough to work out what a third-party script is doing.

Everything runs locally. Source code frequently contains API keys, internal endpoints and business logic that must not leave the machine, and there is no upload step here for it to leave through.