JavaScript Beautifier

Magically transform messy or unreadable JS into clean code

JavaScript Tool

Style Preset

Advanced

Break Chained Methods Unescape Strings (\xHH to char)

Beautiful Code

Make cramped JavaScript readable again

Minified bundles, code pasted from a chat and scripts written in a hurry often arrive as one long line or with wildly inconsistent indentation. This beautifier reformats the code with proper line breaks and consistent indentation so you can follow the logic, review a change or debug a third-party script. It uses the well-known js-beautify library, loaded from a CDN, and runs in your browser.

Formatting your script

Paste the code into the Messy Source box. Load Sample inserts a one-line function so you can see the effect, and Clear empties the box.
Pick a Style Preset: Modern uses four spaces with braces on the same line, Compact uses two-space indentation, and Legacy places opening braces on their own line in Allman style.
Tick the options you want under Advanced: Break Chained Methods puts each call in a chain such as .then().catch() on its own line, and Unescape Strings converts escapes like \x41 into the characters they represent.
Press Beautify Script and read the result in the Beautiful Code panel. Use Copy to take it away.

What the presets change

Modern and Compact differ only in indent width, while Legacy changes the brace placement, so an if block starts with the brace on the next line. Up to two blank lines from the original are preserved, so your own paragraph-style spacing survives. Since the preset and the checkboxes are independent, you can combine Legacy with chain breaking, for instance.

Typical situations

Reading a minified library or a vendor script while tracking down a bug.
Cleaning up a snippet before adding it to a pull request or a documentation page.
Unwrapping a long promise chain to see each step.
Making the hex-escaped strings in a suspicious script readable.

Limits to remember

Beautifying changes only whitespace and layout; it does not rename variables, so minified names like a, b and c stay as they are, and it cannot restore comments that a minifier removed. The tool does not check that your code is valid, so broken input produces oddly formatted output rather than an error. If the formatting library fails to load, for example when you are offline, the code comes back unchanged. There is no download button, so copy the result from the panel. For a very large file, formatting in your editor or a build tool may be more comfortable.

Related Articles

JavaScript Minification: What It Is and Why It Matter

Related Tools

Frequently Asked Questions

What is the difference between the three style presets?

Modern indents with four spaces and keeps opening braces on the same line. Compact uses two-space indentation. Legacy also uses four spaces but puts opening braces on a new line, known as Allman style.

What does Break Chained Methods do?

It puts each call in a method chain, such as promise.then().catch().finally(), on its own line. That makes long chains easier to read and to compare in a diff. Leave it unticked to keep chains compact.

What does Unescape Strings do?

It converts hexadecimal escape sequences inside strings, like \x48\x69, into the characters they represent. This is helpful when reading obfuscated or generated code, but it can change how a string looks, so review the result.

Will it rename variables in minified code?

No. The beautifier only changes spacing, indentation and line breaks. Short names produced by a minifier remain short, and removed comments cannot be recovered, so the result is readable in layout but not in meaning.

Why did my code come back unchanged?

The formatting library is loaded from a CDN, and if it cannot load, for instance when you are offline or a content blocker stops it, the tool returns your code as it was. Reload the page with a working connection and try again.