My Tool Studio
Developer

JS Beautifier

This JS beautifier turns minified or messy JavaScript into clean, indented code you can read. Paste a one-line bundle or a snippet from DevTools, click Beautify, and every statement moves onto its own line. Choose the indent, brace style, how many blank lines to keep and where long lines wrap, and tick extras such as JSX support, break chained methods, keep array indentation or unescape \x and \u text. With Language on Auto-detect, HTML and CSS go to the matching formatter, so the same box handles all three. Upload a file, download the result, or click Minify instead to run Terser on the same code. It uses js-beautify, the library behind beautifier.io, and runs in your browser. Shortened variable names stay short.

Always freeNo sign upRuns in your browser
Output appears here...

How to use

01

Paste or upload code

Paste code into the Input pane, or click Upload file to load a .js, .jsx, .json, .html or .css file, which is formatted right away. Try sample loads a short minified script.

02

Set options and click Beautify

Pick Language, Indent, Braces, Blank lines and Wrap lines at, and tick any extra options. Click Beautify, or turn on Live mode so the output updates as you type.

03

Copy or download the code

Click Copy above the Output pane or download the file. Change an option to compare styles, or click Minify instead when you need the small version again.

Why JS Beautifier

JS Beautifier vs Prettier vs a minifier

These three tools are often mixed up. A beautifier and Prettier both make code readable, but they work differently. js-beautify, which powers this page, adjusts spacing and line breaks and respects some of your existing layout, such as blank lines. Prettier reprints the whole file in one fixed style with few options, which is why teams use it to stop arguments about formatting.

A minifier does the opposite job and makes code smaller for production. A common workflow is to beautify a minified third-party file to understand it, fix or copy what you need, then let your build minify the final code.

ToolWhat it doesGood for
JS Beautifier (js-beautify)Reformats layout with a few optionsQuick one-off formatting in the browser
PrettierReprints code in one consistent style; supports TypeScript, JSX and CSSTeam projects, formatting on save or in CI
JavaScript Minifier (Terser)Removes whitespace and comments, shortens namesProduction files

Common questions

Can a JS beautifier recover original variable names from minified code?
No. Minifiers replace names like calculateTotal with a or b, and that information is gone. The beautifier restores line breaks and indentation, which makes the logic easier to follow. If the site ships source maps, your browser's DevTools can show the original source instead.
How do I unminify a JavaScript file?
Click Upload file and choose it, or paste its contents and click Beautify. The download button saves the readable copy. Only the layout comes back; names and comments removed by the minifier do not.
What indent size should I use for JavaScript?
Two spaces is the most common choice today. It is Prettier's default and is used by popular style guides such as Airbnb's and Google's. Four spaces and tabs are also fine, so match what your project already uses.
Is it safe to paste private code into an online JS beautifier?
On this page, yes. Formatting runs in JavaScript inside your browser tab, and uploaded files are read locally, so nothing is sent to a server. Be more careful with tools that send code to a backend, especially if it contains API keys.
Does beautifying JavaScript change how it runs?
No. It changes whitespace and line breaks only, so the code does the same thing. It does not rename anything, add semicolons or reorder statements.
Can I beautify JSON or TypeScript with a JS beautifier?
JSON usually formats fine, but the JSON Formatter also validates it and points to errors. Simple TypeScript often formats acceptably, yet type annotations, generics and decorators may be laid out oddly. Prettier handles TypeScript fully.
What do the brace style options in the JS beautifier mean?
Same line keeps the opening brace at the end of the line, as in if (x) {. Own line moves every opening brace onto its own line, a style common in C#. Same line, else on new line keeps opening braces up but puts the closing brace and else on separate lines. Keep where they are leaves braces as you wrote them.
What do the Blank lines options do when formatting JavaScript?
Blank lines decides how many empty lines between statements survive. Keep up to 2, the default, keeps your own grouping without long gaps. Remove all gives a dense layout, and Keep all leaves every blank line in place.
Can this tool deobfuscate packed JavaScript?
No. Code packed with an eval(function(p,a,c,k,e,d)...) wrapper, or run through an obfuscator, stays hard to read, because this page only reformats. Ticking Unescape \xNN and \uNNNN text turns escaped strings back into readable characters, which helps a little, but it does not unpack code.
Can the JS beautifier format HTML and CSS too?
Yes. With Language on Auto-detect, input that starts with a tag goes to the HTML formatter and a stylesheet goes to the CSS formatter, and a note beside the buttons says which one was used. Pick a language yourself if the guess is wrong.

More Developer tools

View all

JSON Formatter

Beautify, minify and browse JSON as a tree

Developer

JSON Validator

Find JSON errors by line and fix them

Developer

JSON Minifier

Minify JSON and see the bytes saved

Developer

JSON to CSV Converter

Convert JSON arrays to CSV or Excel

Developer