How to beautify JavaScript with this tool
- Paste your code into JavaScript input, or click Open file to load a .js file. The page opens with a one-line example so a result shows straight away.
- Pick Indent (2 spaces, 4 spaces or tab), Braces (same line as the statement, or own line) and Wrap lines at (Off, 80, 100 or 120 characters).
- Tick Decode \xNN and \uNNNN in strings to turn escapes such as
"\x68\x69"back into readable text. It is off by default because it changes how a string is written, though not what it means. - Read the result in Beautified JavaScript, then use Copy or Download.
How the formatting works
Formatting is done by the open source js-beautify library (version 2.0.3, MIT licence), which runs in your browser. It reads your code as tokens, so it knows where strings, template literals, regular expressions and comments begin and end. A comma inside a comment or a semicolon inside a regex is left alone. It then prints the tokens again with line breaks and indentation that follow your braces, brackets and parentheses. It does not add or remove semicolons, because automatic semicolon insertion means code written without them already runs, and changing them is not the job of a formatter.
Worked example
With the default settings (2 spaces, braces on the same line, wrapping off) the example input
function add(a,b){return a+b}const x=[1,2,3];if(x.length>0){console.log(x.map(n=>n*2))}
becomes
function add(a, b) {
return a + b
}
const x = [1, 2, 3];
if (x.length > 0) {
console.log(x.map(n => n * 2))
}
The status line reads "Formatted: 7 lines, 113 characters.". The input had no semicolon after a + b, so the output has none either.
Limits and edge cases
- The tool formats, it does not check your code. A syntax error goes in and comes out as untidy text, with no warning.
- Names that a minifier shortened to a, b and c stay a, b and c. Only a source map can restore the originals, and comments that were stripped cannot come back.
- JSX is kept exactly as written rather than reformatted. TypeScript and Flow are not supported, and type annotations can come out with odd spacing.
- Files up to 5 MB open with Open file. Above about 500,000 characters, click Beautify instead of waiting for live formatting.
- The first use downloads about 75 KB of formatter code from cdnjs. Your code is never sent anywhere.
Frequently asked questions
Does beautifying JavaScript change what my code does?
No. Only whitespace and line breaks change. Strings, template literals, regular expressions and comments keep their exact text. The one optional exception is Decode escapes, which rewrites how a string is spelled but keeps the same value.
How do I unminify a JavaScript file?
Paste the minified code into the input box or click Open file. The formatted version appears at once, one statement per line. The result is readable, but variable names and removed comments are gone for good.
Can it deobfuscate JavaScript?
Only partly. It restores line breaks and indentation, and with Decode escapes ticked it turns strings such as \x68\x69 back into hi. It cannot rename variables or unpack code that rebuilds itself while it runs.
Why does the output have no semicolons where my input had none?
The formatter never adds semicolons. JavaScript inserts them automatically at most line ends, so code written without them still runs, and adding them yourself is a style choice for a linter.
Going the other way? The JavaScript minifier shrinks code for production. For other formats try the HTML beautifier or the JSON formatter, and use the diff checker to compare two versions.
Sources: js-beautify 2.0.3 (github.com/beautifier/js-beautify); ECMAScript Language Specification, automatic semicolon insertion.