About the JavaScript Formatter
The formatter is Prettier 3 with the Babel parser, the same engine behind the Prettier extensions for VS Code and WebStorm. It understands modern ECMAScript — optional chaining, async/await, classes with private fields, top-level await, ES modules — and JSX, so React components format correctly. The output is identical to running npx prettier with the same options.
Options map to .prettierrc settings: tabWidth, useTabs, printWidth, semi and singleQuote. With semicolons off, Prettier inserts a leading ; where a line starting with (, [ or a template literal would otherwise join the previous statement — the same ASI protection it applies in real projects. Print width is a target, not a hard limit: long strings and URLs are never split.
Prettier reformats layout only; it will not rename variables, remove dead code or fix bugs. If the code does not parse, you get the first syntax error with its line and column — a quick way to find a missing bracket. To make minified bundles readable, paste them here; for production size reduction use the JavaScript Minifier. Your code is processed locally and never uploaded.
How to use it
- Paste JavaScript or JSX.
- Adjust tab width, print width, semicolons and quotes.
- Wait for the first load of the formatter (a few hundred KB).
- Copy or download the formatted file.
Frequently asked questions
Does this match running Prettier locally?
.prettierrc or .editorconfig may set options you need to mirror here.Can it beautify minified code?
Why are my semicolons still there after unticking Semicolons?
[ or (, and in for (;;) loops.