Skip to content
Devtoolry
Sign InJoin for Free

JavaScript Formatter

Format and beautify JavaScript and JSX online with Prettier. Choose indentation, quotes, semicolons and line width; your code is formatted in your browser.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the JavaScript Formatter

The JavaScript Formatter applies Prettier, the formatter most JavaScript projects use, so code looks the same no matter who wrote it. It handles modern syntax and JSX.

Everything runs in your browser, so your input is never uploaded to a server.

How to use the JavaScript Formatter

  1. Paste JavaScript or JSX, or open a file.
  2. Set indentation, single or double quotes, semicolons and line width.
  3. Copy or download the formatted code.

Example

Break up a long one-liner

Input

const total=items.filter(i=>i.active).map(i=>i.price*i.qty).reduce((a,b)=>a+b,0);if(total>100){applyDiscount(total,"SAVE10")}

Result

const total = items
  .filter((i) => i.active)
  .map((i) => i.price * i.qty)
  .reduce((a, b) => a + b, 0);
if (total > 100) {
  applyDiscount(total, 'SAVE10');
}

The chained calls are split one per line, arrow parameters get parentheses and the string switches to single quotes (the default setting).

Common mistakes

  • Syntax errors. A formatter is not a linter: code with a missing bracket is reported with its line and column, not fixed. Correct that position and format again.
  • TypeScript syntax. Type annotations such as (id: number) are a syntax error for the JavaScript parser. Use the TypeScript Formatter for .ts and .tsx code.
  • Different settings than your project. Match quotes, semicolons and line width to your .prettierrc, or the formatted code will produce a noisy diff when you commit it.

Works well with the JavaScript Formatter

Frequently asked questions

Is the output the same as running Prettier locally?

Yes, it uses Prettier itself with the options you choose, so the result matches a project configured the same way.

Can it fix syntax errors?

No. Code must parse before it can be formatted; the error message shows where parsing failed.

Does it support JSX?

Yes. React JSX is formatted too, with long elements wrapped in parentheses across several lines.

Is my code sent to a server?

No. Prettier runs in your browser, so the code stays on your device.

Guides and tutorials

Related tools