Beautify and format code in one place
The Code Beautifier turns minified, compressed or badly indented code back into something you can read. Paste HTML, CSS, JavaScript or JSON — the language is detected automatically — and get neatly indented code with one statement per line, consistent spacing and your preferred brace style.
It is the quickest way to inspect a minified script from a website, tidy up a stylesheet that grew messy over the years, read an API response, or format a template before committing it. HTML, CSS and JavaScript are formatted with the well-known open-source js-beautify engine; JSON is formatted by a dedicated formatter that keeps every number, key and key order exactly as it was.
The code never leaves your browser, which makes the tool safe for proprietary source code, configuration files and API data containing personal information.
How to use the Code Beautifier
- Paste code into the Code to beautify box, drop a file onto it, or press Load file. The badge shows which language was detected.
- If the guess is wrong, pick the right one in the Language menu.
- Choose an Indent (2 spaces, 4 spaces or tabs), a Brace style and whether to Wrap lines at 80, 100 or 120 characters.
- Press Beautify code. After the first run, the output refreshes automatically as you edit or change options.
- Press Copy or Download to save the formatted file with the right extension.
Code Beautifier features
Four languages, one tool
HTML (including embedded <style> and <script> blocks), CSS, JavaScript and JSON.
Automatic language detection
Valid JSON, markup and stylesheets are recognised from their structure; anything else is treated as JavaScript.
Your code style
Two or four spaces or tabs, four brace styles, optional line wrapping and control over blank lines and the final newline.
Lossless JSON
Large numbers such as 12345678901234567890 and key order are preserved exactly, which re-serialising JSON in JavaScript would not do.
Precise JSON errors
Invalid JSON is reported with the line and column of the problem, such as a trailing comma or a missing quote.
Loads only what it needs
Each formatter is downloaded the first time you use it, so the page opens instantly even on a slow phone connection.
Brace styles explained
The brace style decides where opening braces go in JavaScript and CSS. Pick the one your team or style guide uses:
| Option | Result | Common in |
|---|---|---|
| { on the same line | if (ok) { … } else { | Most JavaScript style guides and CSS (also called K&R or “collapse”) |
| { on its own line | if (ok)⏎{ | C#-style and Allman-style codebases |
| Same line, else on new line | }⏎else { | Teams that like else and catch to start a line |
| Same line, keep short blocks | Leaves { a: 1 } and one-line functions on one line | Code with many small object literals |
Beautifying minified code
Beautifying restores layout, not information. Minifiers remove comments and often rename local variables to single letters, so a beautified file will be readable but may still contain names like e, t and n. If you need the original names, look for a source map (a .map file) published next to the script.
Formatting never changes what code does: only whitespace and line breaks are added or removed. That makes it safe to beautify, edit and then shrink the file again with the JS Minifier or CSS Minifier.
Tips
- For deeper work with JSON — tree view, validation and minifying — use the dedicated JSON Formatter.
- SQL queries have their own rules for keywords and clauses; format them with the SQL Formatter.
- Turn on “One HTML attribute per line” for elements with long class lists or many data attributes, so diffs in version control stay readable.
- Text inside <pre> and <textarea> is left untouched, because changing it would change what the page shows.
Code Beautifier FAQ
Is this code beautifier free and safe to use?
Yes. It is free with no sign-up, and formatting runs entirely in your browser. Your code is not uploaded, stored or logged anywhere.
Can it unminify JavaScript?
It can restore indentation, line breaks and spacing so minified JavaScript becomes readable. It cannot bring back comments or original variable names that the minifier removed.
Which languages does the code formatter support?
HTML (with embedded CSS and JavaScript), CSS, JavaScript (including modern syntax such as classes, async/await and optional chaining) and JSON. For SQL and XML, use the SQL Formatter and XML Formatter.
Why was my code detected as the wrong language?
Short snippets can look like more than one language. Choose the correct language from the Language menu and the code is formatted with that language’s rules.
Does beautifying change how my code works?
No. Only whitespace and line breaks change. One exception to watch for is HTML where inline elements sit next to each other: adding or removing a line break there can add or remove a visible space.
Can I use tabs instead of spaces?
Yes. Choose “Tabs” in the Indent menu. Spaces are still used for alignment inside lines.