JavaScript Formatter

1. Paste code, drop a .js, .mjs, .cjs or .jsx file, or choose Load example. Formatting runs as soon as you paste.
2. Open Settings to match your project: print width, tab width, semicolons, quote style and trailing commas. Changes re-run instantly.
3. Copy with ⌥/Alt C or download with ⌘/Ctrl S. To go the other way, switch to Minify, or use Switch to TypeScript if the code carries type annotations.

#Unminify a one-line utility

Minified code from a bundle or a CDN file, formatted with the defaults.

const debounce=(fn,ms=250)=>{let t;return(...args)=>{clearTimeout(t);t=setTimeout(()=>fn.apply(this,args),ms)}};export async function load(url){const res=await fetch(url,{headers:{accept:"application/json"}});if(!res.ok)throw new Error(`HTTP ${res.status}`);return res.json()}

Result:

const debounce = (fn, ms = 250) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), ms);
  };
};
export async function load(url) {
  const res = await fetch(url, { headers: { accept: "application/json" } });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

#React component with JSX

JSX is parsed without extra configuration. Multi-line markup is wrapped in parentheses.

export default function Card({title,children}){const [open,setOpen]=useState(false);return <div className="card" onClick={()=>setOpen(!open)}><h2>{title}</h2>{open&&children}</div>}

Result:

export default function Card({ title, children }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="card" onClick={() => setOpen(!open)}>
      <h2>{title}</h2>
      {open && children}
    </div>
  );
}

#No semicolons, single quotes, no trailing commas

A codebase that omits semicolons and prefers single quotes: Semicolons off, Single quotes on, Trailing commas set to None.

const config = {name: "formattr", retries: 3, endpoints: ["/api/v1/format", "/api/v1/validate"]}
function greet(name) { return "Hello, " + name }

Result:

const config = {
  name: 'formattr',
  retries: 3,
  endpoints: ['/api/v1/format', '/api/v1/validate']
}
function greet(name) {
  return 'Hello, ' + name
}

• Print width — the line length Prettier aims for (80, 100 or 120 characters) before it breaks calls, objects and arrays across lines.
• Tab width — the number of spaces per indentation level, 2 or 4.
• Semicolons — adds a semicolon at the end of every statement; turn it off to print them only where automatic semicolon insertion would otherwise misread the code.
• Single quotes — prints strings with single quotes unless that would need more escapes than double quotes; JSX attributes keep double quotes.
• Trailing commas — prints a comma after the last item in multi-line lists: All (including function parameters), ES5 (arrays and objects only) or None.

#"Unexpected token, expected ','" on a type annotation

The JavaScript parser does not read TypeScript syntax such as a: number or interface. The error hint suggests the switch: use Switch to TypeScript to format the same code with the TypeScript Formatter.

#"Unterminated string constant"

A quote or template literal is never closed. The error gives the line and column where the string starts; press F8 to jump to it. Truncated copies from a console or log viewer often cause this.

#The code is JSON, not JavaScript

A bare object literal formats, but JSON is better served by the JSON Formatter, which validates the data and reports errors in JSON terms instead of JavaScript ones.

#Minify mode kept unused top-level functions

Minify treats input as a classic script, so top-level functions and variables keep their names and stay in the output, even when nothing in the file uses them; only local names are shortened. To drop unused top-level code from a module file, open it in the JavaScript Minifier and turn on ES module.

#Unminified names are still e, t and n

Formatting restores layout, not information. Minifiers rename local variables, and the original names are not in the file, so no formatter can bring them back. If a source map exists, your browser's developer tools can use it.

#How do I unminify JavaScript?

Paste the minified file and it is reformatted immediately: one statement per line, consistent indentation and wrapped long expressions. That makes the control flow readable and diffable. Local variable names stay shortened, because a minifier discards the originals, but property names, strings and exported names are intact, which is usually enough to follow what the code does.

#Is this the same as running Prettier locally?

It uses Prettier's own parser and printer, loaded into your browser, so for the same options the output matches what prettier --write produces. The difference is configuration: this page exposes the five options that matter most for JavaScript, rather than reading a .prettierrc file or plugins from your project.

#Does the JS beautifier change how my code behaves?

No. Prettier parses the code into a syntax tree and prints that same tree back out, so the program is unchanged. It changes whitespace, line breaks, quotes, parentheses around JSX and optional semicolons and commas. It never renames variables, reorders statements or removes code. Comments are kept, attached to the nearest statement.

#Can I format JSX and modern syntax?

Yes. JSX, optional chaining, nullish coalescing, private class fields, top-level await, and import/export all parse without configuration. Files that use TypeScript type annotations need the TypeScript Formatter instead, which handles both .ts and .tsx.

#Is it safe to paste proprietary code?

Yes. Prettier runs locally in your browser, and the editor is an isolated frame that blocks network requests, so the code is never uploaded or stored on a server. Your settings are remembered on this device. The code itself is kept only if you turn on "Remember my last input".

#What is the difference between Format and Minify?

Format makes code readable for people; Minify makes it small for browsers. Minify runs Terser, which removes whitespace and comments, shortens local names and drops unreachable code. The JavaScript Minifier offers the same engine with switches for mangling, compression, module mode and license comments.

Settings start at Prettier's own defaults: print width 80, 2-space indentation, semicolons on, double quotes and trailing commas everywhere. Two things are not configurable, by design. Prettier reprints the whole file from its syntax tree, so your original line breaks are mostly ignored; the exception is blank lines between statements, where one is kept. And it never renames, reorders or removes code — the output is equivalent to the input. The reasoning behind each default is covered in Prettier Defaults Explained.

Format the markup around your scripts with the HTML Formatter, tidy stylesheets with the CSS Formatter, or browse every code tool in the code category.