Which engine powers the formatting?

Prettier runs in your browser as a WebAssembly bundle. The same rules apply as the Prettier CLI you would use locally.

Does my code get uploaded?

No. Prettier executes client-side, so your source stays in the tab. You can format proprietary code without any network calls.

What JavaScript versions are supported?

All standard syntax up to ES2022 is parsed, plus common stage-3 proposals that Prettier already supports such as decorators and import attributes.

What happens to my comments?

Line and block comments are kept and re-attached to the nearest token. Prettier preserves comment position but may adjust surrounding whitespace.

prettier · babel · live · client-side

Format JavaScript with Prettier

Prettier's babel parser handles ES2024, JSX, and TypeScript-flavoured JS. Choose semicolons, quotes, indent, and line width — runs locally.

JavaScript Formatter

Input

111 B

1 lines

Output

0 B

1 lines

Status

parser…

Ratio

0.00×

out/in

input · javascript

output · formatted js

Loading parser…

Quick Start

How to format JavaScript

Babel parses your source; Prettier reprints it with consistent indent, spacing, and option-driven semicolons and quotes.

01
Paste JS source
Modern syntax is fine — async/await, optional chaining, decorators, JSX.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
es2024PrettierASTstandalonelazy
input · sourceraw · AST
```
const f=()=>1
```
loaded · parsedAST · ready
02
Pick style options
Toggle semi and singleQuote; set tab and width.
Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.
optionsindentprint-widthmemoisedlive
opts · optionsstyle · live
```
semi=true
single=false
```
options applied · livelive
03
Auto-reformat
Long chains break, callbacks indent, trailing commas land — all live.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstable
out · formattedpretty · ready
```
const f = () => 1;
```
formatted · liveidempotent
04
Copy or download
Clipboard or .js file — your code never leaves the browser tab.
Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.
exportclipboardbloblanguage MIMEclient-side
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don’t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Use Cases

When to format JavaScript

Sandbox code, gist cleanup, audit responses.

Code sharing

Format pasted snippets before sending to a colleague or AI. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Gist cleanup

Tidy code copied from blog posts or Stack Overflow. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Audit responses

Make obfuscated-looking sources legible for inspection. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Build debugging

Pretty-print compiled chunks to compare against source. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Quick fix

When your editor isn't open and a one-liner needs formatting. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Docs examples

Standardise inline JS examples for documentation. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic

FAQ

Frequently asked questions

What syntax is supported?

Anything Babel parses — ES2024, JSX, TypeScript-ish JS, decorators, and class fields.

Does it run my code?

No. Prettier parses and reprints; nothing is evaluated.

What about ESLint rules?

Prettier handles whitespace only. For lint errors, run ESLint locally.

Tabs or spaces?

Spaces. The tab field controls how many spaces per indent level.

Is anything sent to a server?

No — Prettier runs locally in your browser tab.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!