JavaScript Formatter

Examples

function add(a,b){return a+b}

function add(a, b) {
  return a + b;
}

function add(a, b) {
  return a + b;
}

function add(a, b) { return a + b; }

const double=x=>x*2

const double = (x) => x * 2;

const user={name:'Ada',ok:true}

const user = { name: "Ada", ok: true };

console.log(add(1,2))

console.log(add(1, 2));

How to use

1. Paste a JavaScript snippet into the input panel (Pretty print is the usual mode).
2. If formatting fails, fix syntax errors in the source and try again.
3. Copy the result. Switch to Minify only when you want a compact single-line-ish snippet.

What this tool is for

Readable JavaScript is easier to review in tickets and gists. This page reformats source text with consistent indentation and spacing. It is a formatter, not a bundler, not ESLint, and not an executor — your paste is never eval’d.

How it works

Pretty mode runs Prettier with the Babel parser (tab width from indent, default 2). Minify mode collapses whitespace with a simple pass — it is not a full terser-quality compress. Syntax errors surface as format failures instead of silently corrupting the file.

When to use it

Reading a minified function from DevTools, cleaning a gist, sharing a snippet in a ticket, and normalizing a short example before a PR comment.

When not to use it

Do not format a whole production webpack bundle in a tab and expect source maps. JSX/TS with types belongs on the TypeScript Formatter. JSON data belongs on the JSON Formatter. Do not treat formatted output as “more secure.”

How it compares to related tools

TypeScript Formatter understands type syntax. JSON Formatter is for data. HTML Formatter is for markup. Repo CI should still use Prettier as the source of truth.

Common mistakes

Formatting code that is actually JSON. Pasting proprietary code into a screenshot. Expecting minify mode to match terser. Assuming ESLint rules are applied.

Formatter, not a linter or runner

Prettier changes whitespace and a few syntactic preferences (quotes, semicolons) according to its defaults. It does not run your code, resolve modules, or apply ESLint semantic rules. Keep CI Prettier config as the authority for the repository.

Minify mode is best-effort

Minify on this page collapses whitespace; it is not a full minifier with mangling and dead-code elimination. Use it for compact demos, not as a production build step.

Related guides

Read our original articles on this topic.

• Developer

  The Ultimate Guide to JSON Formatting and Linting

  JSON is the backbone of the modern web. Learn why proper formatting is critical for APIs, how to read minified payloads, and why local linting is the safest way to debug data.

Related tools