Free JavaScript (JS) Formatter Online

What this page is for

A minified script is one dense block of code. This page runs the source through a bundled JavaScript beautifier, which inserts line breaks, indents nested blocks with four spaces and spaces out operators. Comments are kept. The result is a readable copy that you can inspect, review or use as a starting point for a repair.

The page opens with JavaScript and Beautify already selected and accepts up to 200,000 characters per run. The beautifier is a legacy, ES5-oriented implementation, and that limitation matters. Read the section on modern syntax before you run it on a current codebase.

How the beautifier works

The script is tokenised and reprinted according to a set of formatting rules. Blocks such as functions, if statements, loops and classes receive a new line and an extra level of indentation. Operators receive surrounding spaces. A closing brace returns to the previous level. The output uses four spaces per level and does not add semicolons that were missing from the input.

Because it is a reprint rather than a parse-and-compile pass, it does not rename identifiers or evaluate expressions. It also does not check that the result is valid JavaScript. That is why the output must be tested, especially when the input uses syntax newer than the beautifier.

What it handles well

Classic function declarations, if/else chains, for and while loops, object literals, arrays, try/catch blocks and constructor functions all format predictably. Class declarations with fields and methods also format in testing. Line comments and block comments are preserved, which makes the output useful for understanding an unfamiliar vendor file.

A typical ES5 function comes back with the body indented, each statement on its own line and the braces aligned. That is enough to trace control flow and find a missing branch.

Where modern syntax breaks

This is the most important limitation on the page. The bundled beautifier does not understand several features that are common in modern JavaScript, and it can split their tokens into invalid code:

• Arrow functions: the arrow token can be separated into an equals sign and a greater-than sign, which is not valid syntax.
• Optional chaining: the question mark and dot can be separated by a space, changing the operator into something the engine rejects.
• Nullish coalescing: the two question marks can be separated, with the same effect.
• Template literals: an interpolation can be broken across lines and spaces, corrupting the string.

These are not cosmetic differences. The output may look plausible at a glance and still fail to parse. If the script contains any of these features, do not replace the original with the beautified copy. Use an editor or formatter that supports the syntax, and treat this page as unsuitable for that file.

JSX and TypeScript

JSX and TypeScript are not JavaScript. Angle-bracket components, type annotations, interfaces and generics use syntax the beautifier does not model. It may format parts of the file and corrupt others. Compile or strip the types first, or use a formatter built for those languages.

Comments are kept

Line comments and block comments survive the pass in testing, including a comment at the top of the file and a block comment at the end. That is useful when you are reading a vendored library and the license or explanation matters. It also means the output is not a minified file; it is a reading copy.

What it does not change

Identifiers, string contents, numeric literals and the presence or absence of semicolons are left alone. The beautifier does not add missing semicolons, remove dead branches, rename variables or convert syntax. If the input is already valid, the output should be the same program with different whitespace, provided the syntax is supported.

When to use it

Use it on an older vendor script that you need to inspect. Use it on a small ES5 file you inherited and want to step through. Use it when a stack trace points to a compact file and you need line breaks to find the relevant block. Do not use it as a commit-time formatter for a modern application, and do not use it on a file you cannot restore from version control.

Step by step

1. Keep a copy of the original file. This is not optional when modern syntax may be present.
2. Paste the script into Manual Code, or load it through the URL tab.
3. Confirm the language is JavaScript and the mode is Beautify.
4. Press Process Code.
5. Scan the output for split operators, broken template strings and stray spaces before replacing anything.
6. Copy the result, or download it as beautify-output.js.
7. Run the output through a syntax check before using it.

Fetching a script from a URL

The URL tab downloads a public script on the server and places the response in the editor. The fetch is capped at 200,000 characters. CDN links usually work; authenticated or bot-protected links usually do not. The server fetches the raw response, so an HTML error page will fail to format as JavaScript.

Checking the output

The quickest check is a syntax parser. Save the output as a .js file and run it through Node with the check flag, or paste it into a browser console inside a try block. A parse error tells you the beautifier broke the file. If it parses, compare the behaviour with the original on a test page; formatting should not change behaviour, but token splitting can change meaning before it changes syntax.

Working from a stack trace

A production stack trace gives a line and column in a compact file. After beautifying, the line numbers change, so use the column and the surrounding tokens to find the frame. Search for a distinctive string from the trace, such as an error message or a function name that survived minification. This minifier does not rename identifiers, so a function name from the trace is usually still searchable. Once you find the block, read upward to see which branch called it.

Formatting a fragment

You do not have to paste the whole bundle. If you only need to read one function, copy that function plus any helper it calls into the editor. A smaller input is easier to check and less likely to hit an unsupported construct. Keep the fragment in a scratch file and never paste the formatted fragment back into the bundle.

Limits

One script per run, 200,000 characters, JavaScript mode on this page. Processing happens on the server and the result is returned; it is not stored. The tool does not lint, type-check, transpile or guarantee that the output is valid for modern engines.

Frequently Asked Questions