Format JS Online

How to Format JavaScript Online

1. Paste or Upload Your JS: Drop a .js file onto the editor, click Add Files, or paste minified code straight into the Input (JS) panel. Bundles, single modules, and bookmarklet one-liners all work.
2. Pick Indent: The Indent dropdown offers 2 spaces (the default, matching Prettier, Standard, npm, and most JS ecosystems) or 4 spaces. The formatter handles quote style, semicolon placement, and bracket spacing automatically using sensible defaults.
3. Format (Optional Style Tweaks): Click Format. The parser walks an AST so template literals, regex, JSX, and async/await are recognized correctly — no regex hacks. Need the reverse for production? Click Minify instead.
4. Copy or Download: Click Copy to send the result to your clipboard, or Download to save a .js file. Everything runs in your browser session — no sign-up, no upload, no server round trip.

Why Format JavaScript?

JavaScript formatting — also called beautifying or pretty-printing — restructures whitespace and stylistic choices (indent, quotes, semicolons, line wrap) to make code human-readable without changing behavior. The AST round-trip preserves every variable, expression, and side effect, so a formatter is safe to run on production builds, third-party libraries, and code you're about to deploy.

• Unminifying production bundles — Browser DevTools show main.a1b2c3.js as one line with single-letter variable names. Format it to set breakpoints, walk the call stack, and trace bugs even when the source map is missing or stripped.
• Auditing third-party libraries — Before adding an unknown npm package or a copy-pasted snippet from Stack Overflow, format and skim it. You'll spot obfuscated eval, network calls to unknown hosts, or postinstall scripts — the same review pattern flagged the July 2025 eslint-config-prettier supply-chain compromise that affected millions of installs.
• Eliminating style noise in code review — Tabs vs spaces, single vs double quotes, and semicolons cause noisy diffs that drown out real logic changes. A shared format (Prettier, Standard, or Biome) normalizes everything so reviewers focus on architecture.
• Debugging bookmarklets and userscripts — javascript: URLs and Tampermonkey snippets are usually one line. Paste, format, and read the actual logic before installing.
• Documentation and teaching — README examples, MDN snippets, and tutorials need consistent 2-space indent and clean wrapping. Format once, paste into the doc, and readers can copy without re-indenting.
• Pre-commit hygiene — Even without a Prettier or Biome install in the repo, run the page locally before pasting into a PR to match the project's prevailing style.

Prettier vs Standard JS vs Biome — Formatter Comparison

Property	Prettier	Standard JS	Biome
Default indent	2 spaces	2 spaces	2 spaces
Semicolons (default)	Required	Forbidden	Required
Quote style (default)	Double quotes	Single quotes	Double quotes
Print width	80 chars	(no enforcement)	80 chars
Trailing comma (default)	all (since v3.0)	None	all
Arrow parens (default)	always (since v2.0)	Avoid when single param	always
Configurability	Minimal (~15 options)	Zero — opinionated by design	Minimal, Prettier-compatible
Engine	JavaScript (Node)	ESLint rules + JS	Rust (single binary)
Linter included	No	Yes	Yes
Weekly npm downloads	~80M (prettier)	~3M (standard)	~8M (@biomejs/biome)

Style Quick Guide — What Each Tool Enforces

Rule	Prettier default	Standard JS	Biome default
Semicolons	; at end of statement	none (ASI)	; at end of statement
String quotes	"double"	'single'	"double"
Indent	2 spaces	2 spaces	2 spaces
Trailing commas	[a, b, c,] everywhere	none	[a, b, c,] everywhere
Arrow parens	(x) => x	x => x	(x) => x
Brace spacing	{ a: 1 }	{ a: 1 }	{ a: 1 }
Max line	80 chars (soft)	none	80 chars (soft)

Trailing commas in function calls and parameter lists are valid since ES2017 (the Stage-4 proposal merged into ES8). They make multi-line diffs cleaner because adding an argument doesn't touch the previous line. Rest parameters (...args,) are the one place trailing commas still throw a SyntaxError.

Frequently Asked Questions

Prettier vs Standard JS — which should I pick?

Standard is fully opinionated and has zero config: no semicolons, single quotes, 2-space indent. You either accept the whole package or use something else. Prettier is also opinionated but exposes about 15 knobs (printWidth, tabWidth, singleQuote, semi, trailingComma, arrowParens, etc.) so teams can match an existing house style. Prettier's npm package draws roughly 80M weekly downloads versus Standard's ~3M, and most modern starters (Next.js, Vite, Astro, Remix) ship a Prettier config out of the box.

Why has Prettier become the 2026 default?

Three reasons: (1) editor integration — the Prettier VS Code extension, JetBrains plugins, and Vim/Neovim formatters all "just work" with format-on-save; (2) framework templates — Next.js, Create-React-App successors, Vite scaffolds, and Astro all generate .prettierrc by default; (3) network effect — every major open-source JS project (React, Vue, Svelte, TypeScript itself) uses or recommends Prettier, so muscle memory lines up.

Is Biome actually faster than Prettier?

Yes, dramatically. Biome is written in Rust and ships as a single binary, while Prettier runs in Node. Independent benchmarks and Biome's own published numbers put formatting at roughly 10x faster on large codebases. The Biome team also publishes a "Differences with Prettier" page documenting the small intentional divergences (object property unquoting, computed-key parens, optional-chain non-null assertions). For most real projects Biome output is byte-identical to Prettier on the same input.

Was Biome the same project as Rome?

Yes. Rome was founded in 2020 by Sebastian McKenzie (Babel author). In August 2023 the original company wound down and the project was forked under the new name Biome, run by the previous core maintainers. Biome reached 1.0 stable in September 2023; the current 2.x line shipped through 2025.

How do I set up format-on-save in VS Code?

Install the Prettier extension (esbenp.prettier-vscode) or Biome extension from the marketplace. Open settings (Cmd/Ctrl+,) and enable editor.formatOnSave. To pin Prettier per-language, add to settings.json:

"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

For team consistency, commit a .prettierrc (or biome.json) at repo root and a workspace .vscode/settings.json. WebStorm and other JetBrains IDEs bundle Prettier integration — enable it under Settings → Languages & Frameworks → JavaScript → Prettier.

Are semicolons actually required in JavaScript?

Technically no. ECMAScript's Automatic Semicolon Insertion (ASI) inserts ; at line breaks when the parser would otherwise fail. Standard JS relies on ASI and forbids explicit semicolons; Prettier and Biome insert them by default. The known ASI gotchas are lines that start with (, [, +, -, /, or a template-literal backtick — those get attached to the previous statement. Standard's rule is "never start a line with (, [, or `" and adding ; at the start of such a line is the recommended fix. ESLint's semi rule defaults to "always", matching Prettier and Biome.

Why does Prettier sometimes use double quotes when I want single?

Prettier's default singleQuote is false, so it picks "double". It also tries to minimize escaping — a string containing an apostrophe like "I'm here" stays double-quoted even if you enable single quotes, because re-quoting would require 'I\'m here'. Set "singleQuote": true in .prettierrc to flip the default; Prettier still escape-minimizes when needed. Standard always uses single quotes.

Can I format TypeScript or JSX with this tool?

The tool is tuned for JavaScript (ECMAScript). Plain JSX in .js files usually formats fine. TypeScript-specific syntax (interface, enum, generics like <T extends string>, as assertions, decorators) may not parse correctly here — use Prettier with --parser typescript, Biome (TS-first by design), or a dedicated TypeScript-aware tool. For pure JSON, see the JSON Formatter; for HTML or <script>-inline JS, see the HTML Formatter and CSS Formatter.

How does this compare to the JS Minifier?

Opposite directions. The JS Minifier strips whitespace, shortens identifiers (via tools like Terser or esbuild), and removes dead code to shrink bundle size — used in production builds. The formatter on this page adds whitespace, line breaks, and consistent style for readability — used during development, debugging, and review. Run both as needed: format in your editor on save, minify in your build pipeline before deploy.