JavaScript Formatter: beautify JavaScript online with Prettier

What does a JavaScript formatter do?

It rewrites the layout of your code (indentation, spacing, line breaks, quotes and semicolons) to one consistent style, without changing what the code does. It reads the code into a syntax tree first and prints that tree back out, so the result is laid out by the code's structure rather than by whatever spacing it arrived with.

This one is built on Prettier, the formatter most JavaScript projects already use, with Prettier's defaults. Code formatted here comes out the same as it would from npx prettier or a format-on-save in your editor.

Why use a JavaScript formatter?

• Readability. Code copied from a chat message, an answer online or a bundled file is often crammed onto a few lines. Formatting it is the fastest way to see what it does.
• Finding errors. A formatter has to parse the code before it can print it, so a missing bracket or an unterminated string is reported with its line and column.
• Cleaner diffs. When everybody's code is formatted the same way, a code review shows what changed, not whose editor saved the file.

Example

const total=items.filter(i=>i.inStock).reduce((sum,{price,qty})=>sum+price*qty,0)
function greet(name){return 'Hello, '+name+'!'}

const total = items
  .filter((i) => i.inStock)
  .reduce((sum, { price, qty }) => sum + price * qty, 0);
function greet(name) {
  return "Hello, " + name + "!";
}

With Quotes set to Single, Semicolons to Only where required and arrow parentheses to When needed, which is close to the “Standard” style many teams use:

const total = items
  .filter(i => i.inStock)
  .reduce((sum, { price, qty }) => sum + price * qty, 0)
function greet(name) {
  return 'Hello, ' + name + '!'
}

About Gradient Learning's JavaScript Formatter

It is free, needs no sign-up, and runs entirely in your browser: the code you paste is never uploaded, stored or logged, and it is never run, only read. The page keeps working if you go offline after it loads.

• Modern JavaScript. Everything up to the current standard: async/await, optional chaining, classes with private fields, modules.
• JSX. React components format as they would in a React project, with multi-line JSX wrapped in parentheses.
• Not TypeScript. Type annotations are not JavaScript and are reported as a syntax error.

To run the code rather than format it, use the JavaScript Compiler.

How to use the tool

1. Paste your JavaScript into the input panel on the left, or open a file.
2. The formatted code appears in the output panel on the right as you type. There is nothing to click. If it cannot be parsed, a strip across the top of the output names the problem and its line and column; press the position to jump the cursor to it.
3. Choose your indentation, quotes and semicolons, then use the copy or download button on the output panel.

Formatting options

Basic options (always visible)

Advanced options (under “More”)