JavaScript Formatter

How it works

When you inspect a site's script, debug a bundle or try to understand code you copied from somewhere, JavaScript often comes as one long line with hundreds of functions glued together by semicolons. Paste it into the left panel and the right panel puts each statement on its own line, indents function bodies, if/else blocks and loops to the width you chose, and opens objects and arrays so their values are readable. You decide whether the opening brace stays on the same line (if (a) {) or moves to the next one. Spaces inside strings, template literals (`...`) and regular expressions (/a{2}/) are not touched, so the code behaves exactly as before; only its layout changes. Short variable names left by a minifier (a, b, n) do not come back, because the original names are no longer in the file, but the structure becomes readable. TypeScript and JSX are mostly indented correctly; type annotations are not guaranteed. Set What should happen? to Minified and the tool goes the other way: whitespace and comments are removed and local names shortened; if the code cannot be parsed, the line and column of the problem are shown.

This tool is also known as javascript formatter, js beautifier, javascript beautifier, unminify javascript, format js online, typescript formatter, react formatter, babel formatter.

What is JavaScript?

JavaScript is the programming language that makes web pages do things: opening a menu when you tap a button, checking a form before it is sent, updating a basket total instantly. Browsers read it without caring about lines and spaces; semicolons and curly braces separate the statements. That is why the same code can be written with readable indentation or on one line, and live sites usually ship the one-line version.

What is Beautifier?

A beautifier is a tool that changes only how code looks, never what it does: it adds line breaks, indents blocks and puts spaces around operators. Unlike development tools such as Prettier, it needs no configuration file or installation; you paste code once and take the result. This page runs the open-source js-beautify library inside your browser.

What is the difference between formatting and minifying JavaScript?

Formatting arranges code for people: it adds line breaks and indentation and changes no names or values. Minifying compresses code for browsers: it removes whitespace and comments, cuts local variable names to single letters and drops unused code. Formatting is fully reversible; minifying loses comments and original names for good, so formatting minified code only brings back the structure.

Does formatting change the code?

Not in indented mode: only spaces, line breaks and indentation are added, and JavaScript ignores them, so the formatted code runs the same. The one thing to watch is lines without semicolons: JavaScript treats some line breaks as the end of a statement, which is why the formatter never joins existing lines in a way that would change their meaning.

The tool does not run your code or check its syntax; broken code gets indented too. Formatting also cannot restore original names: if a minifier turned totalPrice into n, you will see n in the formatted code. The only way back to the original source is a source map, if the developer published one.

Indented or minified?

Indented code is for reading, debugging and working with other people. Minified code is for production: the smaller the script that reaches the browser, the sooner the page becomes interactive.

The Minified option here runs a standard terser pass: whitespace and comments go, local names get shorter and dead code is dropped, while /*! licence comments are kept. To decide for yourself whether names are shortened or console.log calls removed, and to see a before-and-after byte count, use the JavaScript minifier.

• Reading someone else's .min.js → Indented
• Bringing your own code to consistent indentation → Indented
• Shipping to production → Minified

Frequently asked questions

How do I unminify JavaScript?

Paste the code into the left panel on this page. Each statement gets its own line and blocks are indented. Shortened variable names do not come back, but the structure becomes readable. Copy the result or download it as a .js file.

Can I format TypeScript or React (JSX)?

Mostly yes: JSX tags and most TypeScript syntax are indented correctly. The formatter does not understand types, though, so complex type definitions and generics (<T>) may not be indented the way you expect. The meaning of the code does not change either way; only whitespace moves.

Will formatting break my code?

No. Indented mode only adds spaces and line breaks; strings, template literals and regular expressions are left alone. JavaScript ignores whitespace, so the code runs the same.

Is my code sent to a server?

No. Formatting and minifying both happen inside your browser; your code never leaves this page.