JavaScript Formatter

How to Use the JavaScript Formatter

1. Paste your JavaScript code into the box.
2. Click "Format".
3. Review the re-indented code and click "Copy to Clipboard".

How the Formatter Works

This tool reads your code one character at a time and rebuilds the whitespace from scratch. It does not build a full syntax tree the way an editor plugin does. Instead it follows a small set of rules:

• An opening curly brace ends the current line and increases the indent by one level. Each level is two spaces.
• A closing curly brace goes on its own line, one level less indented. If a semicolon follows it directly, the semicolon is kept on the same line.
• A semicolon ends the line, unless it is inside round brackets. That exception keeps the three parts of a for loop header together on one line.
• Any run of spaces, tabs or line breaks elsewhere is collapsed into a single space. No space is kept after a comma, colon or opening bracket, and blank lines are removed.
• Text inside single quotes, double quotes and backtick template literals is copied exactly, as are block comments and line comments, so a brace or semicolon inside a string never triggers a line break.

Example: Expanding Minified Code

Suppose you copied this one-line function out of a minified bundle or a browser console:

function greet(name){if(!name){return 'Hi';}else{return 'Hello, '+name;}}

After clicking Format, the output is:

function greet(name) {
  if(!name) {
    return 'Hi';
  }
  else {
    return 'Hello, '+name;
  }
}

The nesting is now visible at a glance. Notice two things the formatter does not do: it leaves operators such as + without surrounding spaces, and it puts else on the line after the closing brace rather than on the same line. Both are style choices, and the code runs exactly as before.

When This Tool Is Useful

• Reading a snippet from a minified file, an analytics or ad tag, or a third-party widget to see what it actually does.
• Tidying code pasted from a chat message, email or PDF where the indentation was lost.
• Finding a missing or extra closing brace. If the last line of the output is still indented, a brace was never closed.
• Quick formatting on a computer where you cannot install an editor or a Node.js toolchain. The formatting runs entirely in your browser.

Limitations to Know Before You Paste

• Code that relies on automatic semicolon insertion is a problem. Because line breaks are only created at semicolons and braces, two statements written on separate lines without a semicolon are joined into one line, which is no longer valid JavaScript. Add semicolons first, or use a full formatter such as Prettier for that style of code.
• Regular expression literals are not recognised. A regex that contains a quote character or two forward slashes can be mistaken for the start of a string or a comment, and the rest of the line may come out unformatted.
• Object literals are expanded like code blocks, so every pair of curly braces gets its own indentation level, but the properties inside one object stay on one line separated by commas.
• Code that follows a closing brace, such as the closing bracket of a callback or the comma before a second argument, starts on a new line. This is valid but looks different from common style guides.

For production code, keep using your project's formatter and linter. This page is meant for reading and quick clean-up, not for rewriting a codebase.

Frequently Asked Questions

Related Calculators

• HTML Formatter
• ·
• CSS Minifier
• ·
• Regex Tester