Toolbox101 All tools

Formatters

Beautify JavaScript code with 4-space indentation

JavaScript Formatter re-indents the code you paste four spaces per nesting level and normalizes spacing around operators, so a minified one-liner comes back as statements you can actually read. Developers use it to inspect snippets recovered from build maps, restore structure to collapsed files, and align code before review. Strings, comments, and identifiers keep their exact content; only whitespace moves. Template literals, optional chaining, and arrow functions pass through in place.

Open JS Formatter in the app Browse all tools

How to use JS Formatter

  1. Open JS Formatter in the Toolbox101 app.
  2. Paste the JavaScript into the JavaScript box; a minified bundle fragment or a badly indented file works.
  3. Pick Indent: 2 spaces, 4 spaces (the default) or Tab.
  4. Read the re-indented code in the Output box, with spaces added around operators. Strings and comments keep their exact text, and modern syntax such as template literals is left in place.
  5. Click Copy to put the formatted code on your clipboard.

Worked example

JS Formatter returns the output below for this input.

Input

const users=[{id:1,name:"Ada"},{id:2,name:"Alan"}];function findUser(id){return users.find(u=>u.id===id)||null;}

Output

const users = [{
    id: 1,
    name: "Ada"
}, {
    id: 2,
    name: "Alan"
}];

function findUser(id) {
    return users.find(u => u.id === id) || null;
}

Check it yourself: open JS Formatter and enter the same input.

Frequently asked questions

Will formatting change what my code does?

No. The pass is purely lexical: indentation and line breaks move, and spaces appear around operators such as === and =>, but tokens keep their order and values, so the program behaves identically. Nothing is ever transpiled, renamed, or executed.

Does it minify JavaScript as well?

No, the direction is one-way: this tool adds indentation and line breaks for reading. To produce minified output, run your own build pipeline with a tool such as esbuild or terser after editing, rather than pasting code back and forth.

Does it format TypeScript or JSX?

js-beautify tokenizes rather than fully parses, so typical TypeScript and JSX can come out with odd indentation in places, and syntax errors are not reported. The page targets plain JavaScript, which is what its defaults are tuned for; use a dedicated tool for TypeScript.

Use JS Formatter now

Open JS Formatter in the app

Runs in your browser. Nothing you type is uploaded.