JavaScript Beautifier

Format and beautify JavaScript code for better readability

Code Tools

Tip: Paste your minified or messy JavaScript code and click Beautify to format it with proper indentation and line breaks.

Runs in your browser

Input JavaScript Code

Format minified or messy JavaScript

Paste JavaScript or open a .js file and press Beautify Code. The JavaScript beautifier puts each statement on its own line, indents every block by 2 spaces, and adds spaces around operators and after keywords such as if and for.

Some call it a JS formatter, some a JS beautifier; the result is the same: code you can read and edit. Formatting is done by js-beautify 1.14.11, and it changes only whitespace and line breaks. Names, strings, comments and the order of your code stay as they were.

JS beautifier example

One minified line of fetch code, formatted with the settings this page uses:

app.min.js

const api="/api/orders";async function load(id){const res=await fetch(`${api}/${id}`);if(!res.ok){throw new Error("HTTP "+res.status)}return res.json()}load(42).then(order=>{console.log(order.total)}).catch(err=>console.error(err));

app.js

const api = "/api/orders";
async function load(id) {
  const res = await fetch(`${api}/${id}`);
  if (!res.ok) {
    throw new Error("HTTP " + res.status)
  }
  return res.json()
}
load(42).then(order => {
  console.log(order.total)
}).catch(err => console.error(err));

No semicolons were added: the throw and return lines end as they did in the input. The .then() and .catch() calls stay on one line, because chained method calls are not split.

The formatting rules it applies

Rule	What it does
Indent	2 spaces per level
Braces	The opening `{` stays on the line of its `if`, `function` or `else`
Blank lines	Kept, but several in a row become one
Long lines	Never wrapped, however long
Chained calls	Kept on one line
Arrays	Re-indented like the code around them
Strings	Left as written, escapes such as `\x41` included

The rules are fixed on this page. If your project uses Prettier or another formatter with its own settings, run it on the result before you commit.

What formatting can't bring back

Watch for
Variable names like t and o

Why
A minifier renames variables, and the original names are not in the file any more. Formatting restores the structure, not the names. Only a source map from the build leads back to the original source.
Watch for
Syntax errors

Why
The beautifier doesn't check your code, so broken code is formatted as far as it goes, with no error. A missing } often shows as indentation that never returns to the left edge.
Watch for
Removed comments

Why
Comments in your input are kept, but those a minifier already removed are gone for good.

Ready to ship it again?

The JavaScript minifier compresses the code with Terser and shows how many bytes it saved.

JavaScript beautifier questions

No. Only the whitespace between tokens changes. Strings, template literals, regular expressions and comments are left as written, and no semicolons are added or removed.

Yes. Arrow functions, async and await, classes with private fields, optional chaining and template literals are all formatted.

Not on this page: it always indents with 2 spaces. Most editors can change the indentation of a whole file in one step after you paste the result.

The HTML beautifier indents <script> blocks but leaves the code inside them as it is. Copy a long inline script here to format it.

No. Formatting runs in your browser.