Formatters
JavaScript Formatter
The formatter your CI runs, in a browser tab — prettier-consistent JavaScript in one click.
In short
Format and pretty print JavaScript online with the prettier engine: consistent style for modern JS — arrow functions, template literals, JSX-ready. Free.
By NaveenKumar T · Updated
Learn: Pretty Print JSON in JavaScript: stringify and Beyond
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
JavaScript Formatter: input and output
A small fetch wrapper with retries, pasted the way it arrived from a chat window: mixed quotes, no semicolons, and the whole retry loop crammed onto two lines.
const api={baseUrl:'https://api.example.com',retries:3}
async function request(path,{method='GET',body,headers={}}={}){
let attempt=0
while(true){try{const res=await fetch(api.baseUrl+path,{method,headers:{'content-type':'application/json',...headers},body:body?JSON.stringify(body):undefined})
if(!res.ok)throw new Error('HTTP '+res.status);return await res.json()}catch(err){if(++attempt>=api.retries)throw err;await new Promise(r=>setTimeout(r,250*attempt))}}}
export default requestconst api = { baseUrl: "https://api.example.com", retries: 3 };
async function request(path, { method = "GET", body, headers = {} } = {}) {
let attempt = 0;
while (true) {
try {
const res = await fetch(api.baseUrl + path, {
method,
headers: { "content-type": "application/json", ...headers },
body: body ? JSON.stringify(body) : undefined,
});
if (!res.ok) throw new Error("HTTP " + res.status);
return await res.json();
} catch (err) {
if (++attempt >= api.retries) throw err;
await new Promise((r) => setTimeout(r, 250 * attempt));
}
}
}
export default request;
Note the trailing comma prettier adds to the wrapped `fetch` options object and the parentheses it puts around the single-parameter arrow `(r) =>`; every single-quoted string becomes double-quoted.
Learn more
Formatting JavaScript, properly
This page runs prettier — the de-facto standard JavaScript formatter — with full modern-syntax support: optional chaining, template literals, async generators, decorators, JSX. Output here matches what prettier produces in your repo, so formatted snippets drop into any codebase without style churn.
Reach for it when code arrives unformatted: snippets from Stack Overflow or chat, minified fragments from a stack trace, generated code from tooling. One pass yields review-ready style and — because formatting requires parsing — doubles as a syntax check with precise error positions.
Pretty-print minified JavaScript
Pretty printing and formatting are the same button here. Paste a minified bundle, an inline event handler lifted out of markup, or a one-liner that grew past readability, and the page expands it: one statement per line, nesting indented, long chains and argument lists wrapped. Because prettier parses before it prints, the expanded code is guaranteed to be the same program — and if it isn't valid JavaScript, you get a line and column instead of half-mangled output.
The one thing pretty printing cannot do is undo a minifier's other work. Line breaks come back; `!0`, `void 0`, single-letter parameter names and hoisted comma expressions do not — those are semantic rewrites, and reversing them needs a deobfuscator. If the input is too broken for prettier's parser to accept at all (a trimmed fragment, an unfamiliar dialect, a half-copied region of a bundle), switch to JSBeautifier, which re-indents token-by-token and tolerates what a strict parser refuses.
Where does prettier break a long line? It ignores your original line breaks entirely — apart from blank lines between statements, and whether an object literal's first key started on a new line — and rebuilds each statement from the syntax tree. Anything that fits within 80 columns prints on one line; anything longer breaks from the outside in: call arguments one per line, a chain of three or more method calls one call per line, ternaries and `&&`/`||` chains indented under their first operand. Joining or splitting lines by hand therefore never sticks; only the indentation width in the rail is yours to choose.
| Minifier did this | Pretty printing gives back | Why |
|---|---|---|
| Removed all line breaks | One statement per line | Line breaks are re-derived from the syntax tree |
| Removed indentation | Indentation at your chosen width | Nesting depth comes from the tree, not the source |
| Removed spaces around operators | Canonical spacing | Part of prettier's printed output |
| Wrote `!0` / `!1` | `!0` / `!1` — unchanged | A semantic rewrite, not whitespace |
| Wrote `void 0` for `undefined` | `void 0` — unchanged | Same reason |
| Chained statements with commas | The comma expression, on one line | Splitting it would change the parse tree |
| Renamed variables to `a`, `b`, `n` | The short names | Original names exist only in a source map |
| Stripped comments | Nothing — they are gone | Comments are not recoverable from code |
Formatter, beautifier or minifier?
Three tools sit next to each other on this site and it is worth being precise about which does what. This page is the formatter: it parses fully, applies one canonical style, and refuses code it cannot parse. JSBeautifier is the beautifier: it works token-by-token, tolerates broken and partial input, leaves your expressions and quoting exactly as written, and offers brace-style options prettier deliberately does not. A minifier goes the opposite direction entirely, stripping whitespace and shortening names for transport.
The practical rule: use the formatter for code you are about to commit, where a canonical style and a parse-backed guarantee are the point, and the beautifier for code you are only trying to read, where tolerance matters more than consistency. Both are lossless with respect to behaviour — formatting never changes what a program does, which is exactly why teams run it automatically on every commit.
Help
Frequently asked questions
Everything you need to know about the JavaScript Formatter.
01How do I format JavaScript code here?
Paste your JavaScript (or load a file/URL), choose an indentation width, and press Format. Prettier parses the code fully and reprints it in canonical style — quotes, semicolons and trailing commas normalized — reporting the exact line and column of anything it can't parse.
02Formatter vs. beautifier vs. minifier — which do I want?
A formatter (this page) applies one canonical style via a real parser. A beautifier (see JSBeautifier) re-indents with lighter rules — handy for quick de-minifying. A minifier goes the other way entirely. For code you'll commit, the formatter's parser-backed guarantees win.
03Why did my single quotes become double quotes, and where do the semicolons and trailing commas come from?
Those are prettier's stock defaults, applied here without a config file. `singleQuote` is off, so strings use double quotes unless the text contains more double than single quotes; `semi` is on, so every statement ends with a semicolon; and since prettier 3 `trailingComma` is `all`, so any array, object, parameter or argument list that wraps gets a trailing comma. Single-parameter arrows always get parentheses. The result matches a repo with an empty `.prettierrc`; only the indent width is adjustable here.
Keep working
Related tools
JSBeautifier
Formatters
TypeScript Formatter
Formatters
JSON Formatter
Format, beautify, and validate JSON instantly in a professional VS Code-style editor — free, fast, and 100% private.
JSON Pretty Print
Turn dense single-line JSON into beautifully indented, readable output — your choice of indentation, with optional alphabetical key sorting.
Babel Formatter
Formatters
Flow Formatter
Formatters