How to use the JavaScript formatter

Choose JavaScript (which includes JSX) or TypeScript.
Paste your code into the left box; the formatted code appears on the right as you type.
Match your project's style: indent size or tabs, line width, whether statements end withsemicolons, and whether strings use single quotes.
Press Copy to copy the result.

Example

A dense chain of array methods:

const total=items.filter(i=>i.active).reduce((sum,i)=>sum+i.price,0)

is split across lines once it no longer fits comfortably, with arrow parameters wrapped in parentheses:

const total = items
  .filter((i) => i.active)
  .reduce((sum, i) => sum + i.price, 0);

The formatter is Prettier, the same tool many editors and CI pipelines use, so the output matches a Prettier setup with the same options. It runs in your browser and your code is never uploaded.

Frequently asked questions

Does it support JSX and TypeScript?

Yes. JSX is understood in JavaScript mode, so React components format as they would in a .jsx file. Switch to TypeScript for type annotations, interfaces, generics and enums.

Why did my code fail to format?

Prettier must parse the code before it can print it, so a syntax error stops formatting. The status line shows the parser's message with the line and column, for example a missing bracket or a stray comma. Fix it and the output updates.

Is this a minifier or an obfuscator?

No. It only changes layout to make code easier to read; names, comments and behaviour stay the same. It can make minified code readable again, but it cannot restore names a minifier has shortened.