Code Beautifier

Format and beautify minified JS, CSS, HTML, or JSON code.

Make minified or messy code readable again

Code Beautifier takes a compressed or badly formatted blob of JavaScript, JSON, CSS or HTML and re-lays it out with line breaks and four-space indentation. It is useful when you have inherited a minified file, copied a response from a network panel, or received a config squashed onto one line and need to read it. The formatting runs in the browser page as soon as you press the button.

Formatting your code

Paste your code into the Input Data box. Sample loads a one-line JavaScript function to try, and Clear empties the box.
Open the Language drop-down and pick Auto Detect, JavaScript / JSON, CSS or HTML.
Press Process Now. An empty box shows an error asking for code.
Read the formatted output, which is labelled with the language used, then press Copy or Download to save it as result.txt.

How each language is handled

JSON: if the text is valid JSON, it is parsed and re-printed with four-space indents, which gives clean, reliable output.
JavaScript: if it is not valid JSON, the tool breaks lines around curly braces and after semicolons, then indents according to brace depth.
CSS: spacing is normalised and each declaration goes on its own indented line, with a blank line between rules.
HTML: a line break is inserted between adjacent tags, and nested tags are indented one level per parent.

Auto Detect looks at the start of your text: a leading angle bracket means HTML, a leading brace or square bracket means JavaScript or JSON, and text containing braces, colons and semicolons is treated as CSS. Everything else is handled as JavaScript. If it guesses wrong, choose the language yourself.

Typical uses

Reading a minified script to trace a bug in a third-party widget.
Pretty-printing an API response so its structure is visible.
Tidying a one-line stylesheet snippet before editing it.
Making pasted HTML from an email template legible.

What to expect

The JavaScript and CSS modes use simple text rules, not a full parser. A semicolon inside a for loop header or a string will cause an extra line break, nested at-rules in CSS will not gain extra indentation, and text inside HTML elements is not re-wrapped. Comments in JSON make it invalid, which sends it down the less precise JavaScript route. The result is a readability aid, so check important code before committing it.

Related Tools

Frequently Asked Questions

Which languages can the beautifier format?

JavaScript, JSON, CSS and HTML. The Language drop-down lets you pick one, or you can leave it on Auto Detect. The tool does not handle other languages such as PHP, Python or SQL, and using it on them gives unreliable results.

How does Auto Detect choose a language?

It checks the beginning of your trimmed text. A leading angle bracket is treated as HTML, a leading curly or square bracket as JavaScript or JSON, and text with braces, a colon and a semicolon as CSS. Anything else defaults to JavaScript. Pick a language manually if it guesses wrong.

Why does my JavaScript look odd after formatting?

For non-JSON code the tool inserts breaks around braces and after every semicolon using text rules, not a real parser. Semicolons inside for loop headers or strings therefore split lines. Use the output for reading, and rely on a dedicated formatter in your editor for production code.

Does it change what my code does?

It only alters whitespace and line breaks, and for valid JSON it re-serialises the same data. However, splitting on semicolons or braces inside a string could change that string's contents, so avoid running it on code you plan to deploy without reviewing the result.

What indentation does it use?

Four spaces per level for all supported languages. There is no option to change it, so if you prefer tabs or two spaces, paste the output into your editor and reformat it there.