JavaScript Formatter
Indent a script so you can read it, entirely in your browser. No line break you wrote is ever removed.
Runs entirely in your browser. Nothing is uploaded, logged or stored.
Paste a minified or badly indented script and read it properly. The formatting happens in your browser, and nothing about the code is changed beyond its whitespace.
How it works
The script is split into pieces — comments, strings, template literals, regular expressions, numbers, names, operators, brackets — and then written back out. A block gets its own lines and one level of indentation, a statement gets a line, and an object literal spread over several lines gets one entry per line.
No line break you wrote is ever removed, and that is the rule the rest follows from. In JavaScript the end of a line can end a statement — automatic semicolon insertion — so two lines joined into one can change what a program does, or stop it parsing. Breaks are only added: around a block's braces, after a statement's semicolon, between the entries of an object, and between a closing brace and the word that starts the next statement. None of those can change a meaning.
A line the source broke in the middle of a statement — a chained call, a long condition, the arms of a conditional — is indented one level in from the line above, so that it still reads as part of it.
Examples
| Case | Input | Result |
|---|---|---|
| A function written on one line | function add(a,b){const total=a+b;return total} | function add(a, b) { const total = a + b; return total } |
Frequently asked questions
Is my code sent anywhere?
No. The formatter is JavaScript running in this page. Nothing is uploaded, nothing is logged and nothing is stored — you can turn off your network connection and the tool still works.
Will it add the semicolons I left out?
No. A semicolon that was not written is sometimes a semicolon that must not be written, and telling those apart needs a parser rather than a layout pass. The formatter leaves the question alone: it never adds a semicolon and it never removes a line break, so code written without them keeps working exactly as it did.
Does it minify as well?
No, and that is a decision rather than an omission. Minifying means renaming, rewriting and deciding which line breaks carry meaning — three judgements this tool exists in order not to make. Getting any of them wrong breaks a program in a way you find out about in production.
Does it understand TypeScript or JSX?
Partly, and honestly. Both are read as the tokens they are, so nothing is lost and the brackets still nest, but a type annotation and a tag are not things the layout knows the shape of. Expect a sensible result rather than an idiomatic one.
Will it tell me whether my script is valid?
No. It has no grammar, so it cannot: it knows where one piece of code ends and the next begins, which is enough to lay a file out and not enough to judge it. A file it cannot read at all — an unclosed string, comment or template literal — is refused rather than reformatted into something plausible.
Good to know
- The output holds exactly the pieces the input held. Nothing is added, nothing is dropped and nothing is reordered — only the whitespace between them moves.
- A slash is either a division or the start of a regular expression, and no tokenizer can be certain which without a grammar. This one decides from the token before it, and reads a literal that would have to span a line break as a division, since a regular expression cannot contain one. A wrong guess costs tidiness and nothing else, because every piece is copied out exactly as it was written.
- A template literal comes back character for character, backtick to backtick. Its whitespace is the text your page will show, so it is not whitespace the formatter may touch.
- The layout is deterministic: the same script and the same option always produce the same output, and formatting an already formatted script changes nothing.