JavaScript Formatter
Normalize JS indentation, spacing and brace layout - or minify it - while preserving your semicolons, quotes and structure.
JavaScript is the language where formatting fights back: one developer writes two spaces, another four, one expands braces and another keeps them tight, and a single style-inconsistent file makes diffs unreadable. This formatter normalizes whitespace and indentation - expanding blocks and object literals, aligning braces, and spacing operators - while deliberately never rewriting your code.
The honest limit matters: this is a tokenizing beautifier, not a transpiler. It does not add semicolons you did not write, does not convert quotes, and does not reorder anything. If your code runs before formatting, it runs after. When something is genuinely broken - an unclosed brace or an unterminated string - you get the exact line and column instead of a silent mangling.
Minify mode strips comments, drops the redundant final semicolon inside blocks, and compresses whitespace to a single compact line, handy when a snippet has to fit somewhere size-sensitive.
Features
- Normalizes indentation, brace placement and operator spacing for blocks, objects and arrays.
- Expands single-line object literals to one property per line.
- Distinguishes regex literals from division: const re = /ab+c/g vs const d = 4 / 2.
- Comments are preserved and placed on their own lines.
- Syntax errors report the exact line and column: unclosed braces, mismatched delimiters, unterminated strings and templates.
- Minify removes comments and compresses whitespace without changing behavior.
How to Use
- 1
Paste the code
Drop a whole file or a single expression into the input box.
- 2
Pick your settings
Choose the indentation width; the formatter applies it to every level of the output.
- 3
Format or minify
Press Format to beautify, or switch to Minify for the compact single-line version.
- 4
Copy or download
Export the result as a .js file or copy it straight into your project.
Example
Before
function greet(name){const msg=`Hello, ${name}`;if(name==="world"){return msg.toUpperCase();}return msg;}↓
function greet(name) {
const msg = `Hello, ${name}`;
if (name === "world") {
return msg.toUpperCase();
}
return msg;
}Common Problems
Unclosed brace
A missing } is reported with the line and column of the brace that opened the block, so you can jump straight to the fix.
Regex vs division
The formatter decides whether a slash starts a regex by looking at the previous token, so const re = /ab+c/g and const d = 4 / 2 both come out right.
Semicolons are preserved
The formatter does not add or remove semicolons. Code written without them formats without them; code with them keeps them. If you want them added, add them in the source.
Template literals
Multi-line template strings are kept intact, including any interpolation, and a template that is never closed is reported with its starting line and column.
Nested object literals
Objects inside objects expand at every level, giving each property its own line, which is what makes deep configuration objects readable.
Arrow functions
Short arrow bodies like (a, b) => a + b stay on one line, while braced bodies are expanded - never rewritten into implicit returns.
Comment preservation
Both line and block comments are kept during formatting; minify removes them because a minified file is for shipping, not reading.
Brackets inside strings
An unbalanced brace inside a string or template literal is not counted, because strings are tokenized whole; only real delimiters are matched.
Objects vs blocks
A single-line object literal is expanded to one property per line, while a block used as a statement body is expanded to one statement per line - the same intent, formatted by what the tokens actually contain.
Technical Details
The formatter tokenizes JavaScript into words, numbers, strings, template literals, comments, regexes, operators and punctuation, with line and column tracked for every token and a newline flag that drives the multiline decisions.
A bracket-matching pass runs first and pairs every ( [ { with its closer; an unexpected closer, a mismatched pair, or an unclosed opener is rejected with the exact line and column of both endpoints.
The regex-vs-division heuristic looks at the previous significant token: after =, (, [, {, return and the operators a slash starts a regex; anywhere else it is division - how /ab+c/g and 4 / 2 are told apart without a full parser.
The beautify pass decides whitespace token by token: control keywords get a space before ( (if (), calls do not (foo()), object keys keep their colon glued (a: 1), and binary operators are padded on both sides.
Single-line object literals are expanded to one property per line, mirroring what a full beautifier produces, while call arguments and array literals stay inline unless the source itself broke them across lines.
A newline flag carried on each token lets the formatter respect the line breaks you already chose: content you wrote across lines stays across lines, and content you wrote on one line is only expanded for object literals.
Everything runs synchronously and locally. No code is transmitted, stored or logged.
Frequently Asked Questions
Is this as good as Prettier?
For whitespace and indentation it produces Prettier-like output on most code. It is deliberately not a full parser, so it will not auto-fix structural things like semicolons, quote style or trailing commas - and it never claims to.
Why are my semicolons missing?
They were missing in the source. The formatter preserves semicolons exactly as written; add them if you want them, and they will be kept.
Will it break my regex?
No. The slash is classified as a regex or division using the previous token, and the whole literal is kept opaque, so flags and character classes survive.
What if my code has an unclosed brace?
You get an error naming the line and column of the opening brace, rather than a mangled half-formatted file.
Can it minify my file?
Yes - comments are removed and whitespace compressed, with the redundant semicolon before a closing brace dropped. It is not a compiler-grade minifier, but it covers the common cases; for heavier compression, pair it with a bundler in your build pipeline.
Does it support TypeScript?
Mostly. The tokenizer understands the syntax TypeScript adds - generics, type annotations, enums - as regular tokens, so they are spaced and indented. It does not validate types.
Is my code uploaded?
No. Everything is processed locally in your browser.
Data & Privacy
Your data stays in your browser. Nothing is uploaded.
- Processing
- Local
- Upload
- None
- Server Storage
- None
- Account
- Not required
Related Tools
SQL Formatter
Beautify messy SQL with clause-aware indentation, choose UPPER or lower keywords, and minify a query to a single line.
Code & Formatting
HTML Formatter
Re-indent HTML by nesting depth, keep inline elements flowing, and minify without corrupting pre and script content.
Code & Formatting
CSS Formatter
Give every CSS declaration its own line, indent nested at-rules, normalize hex colors and minify without corrupting strings.
Code & Formatting
Markdown Preview
Live Markdown preview with GFM tables, fenced code and nested lists - plus copy or download the generated HTML.
Code & Formatting
JSON Formatter
Format, validate and beautify JSON directly in your browser.
JSON & Data
Regex Tester
Test regex patterns against your text with live highlighting, capture groups and common-pattern shortcuts.
Regex & Text