JS Formatter
Format and indent JavaScript so it is easy to read.
Runs in your browser Your input never leaves your device.
Report a problem with this tool
About this tool
Paste JavaScript and the tool re-indents it and puts statements and blocks on separate lines using the js-beautify library, with a 2 or 4 space indent. It reformats whitespace only. It does not rename variables, add or remove semicolons, check your syntax or run your code, so a script with an error is still formatted as far as the tool can read it. Minified code becomes readable, but original variable names lost during minification do not come back. Everything runs in your browser and nothing you paste is uploaded.
How to use it
- Paste your JavaScript into the input box.
- Pick a 2 or 4 space indent.
- Read the formatted code in the output.
- Press Copy to use it.
Example
Existing semicolons are kept and missing ones are not added.
function add(a,b){return a+b}const x=add(1,2);function add(a, b) {
return a + b
}
const x = add(1, 2);Formatter, minifier or obfuscator?
A formatter can undo the layout part of minification and of simple obfuscation, but not lost names.
- Formatter (this tool)
- Adds line breaks and indentation so code is easy to read. Behaviour does not change.
- Minifier
- Removes whitespace and comments and can shorten names to make files smaller. Use the JS Minifier.
- Obfuscator
- Rewrites code so it is harder to read. Simple obfuscation can often be partly reversed with a formatter, but renamed or encoded parts stay unreadable.
What the formatter keeps
The tool uses js-beautify. It changes whitespace only: comments stay, existing blank lines are kept, braces stay on the same line as the statement that opens them, and semicolons are neither added nor removed. It does not check syntax, so code with an error is still formatted, sometimes with odd indentation from the error onwards.
Long lines are not wrapped, so a very long string or array literal stays on one line. Strings, regular expressions and template literals are left untouched.
Format JavaScript in a project
For files in a code base, a formatter that runs in your editor or build keeps every file consistent. Prettier is a common choice and is opinionated: it also adds semicolons and changes quotes by default. The Prettier Formatter page runs it in the browser, including for TypeScript. On the command line:
npx prettier --write src/app.js npx js-beautify -s 2 src/app.js
Common problems
- Minified variable names are still a, b, c
- Formatting cannot recover names that were removed when the code was minified.
- Output looks broken after a syntax error
- The formatter does not validate. Check for missing brackets or quotes in the source.
- JSON or TypeScript input
- Plain JavaScript is expected. JSON usually works; use the JSON Beautifier for it.
Frequently asked questions
Can it format TypeScript or JSX?
It is built for plain JavaScript and may lay out type annotations or JSX oddly. Use the Prettier Formatter for TypeScript.
Can it unminify a production bundle?
It makes the layout readable again, but names shortened by the minifier stay short. If the site ships a source map, the Source Map Analyzer can show the original sources it contains.