Code Beautifier
Paste JavaScript, JSON, HTML, CSS, SQL or XML and get it back with consistent line breaks and indentation. Formatting runs in your browser.
About the Code Beautifier
Paste code that arrived as one long line or with inconsistent indentation, pick its language, and the Code Beautifier lays it out again with line breaks and the indentation you choose: 2 spaces, 4 spaces or tabs. It covers six languages, each with its own rules, and everything runs in your browser.
The JavaScript mode is the one most people come for. It starts a new line after {, ;, case labels and commas that sit directly inside curly braces, as in object literals, and indents by bracket depth. It is deliberately cautious: line breaks you already had are kept, strings, template literals, regular expressions and comments are copied unchanged, and spacing around operators is left as written. That way minified code such as function a(b){return b?1:0} becomes readable without joining lines that rely on automatic semicolon insertion. Variable names are not changed, so minified names like a and b stay as they are.
The SQL mode upper-cases keywords and starts each clause (SELECT, FROM, JOIN, WHERE, GROUP BY, ORDER BY, LIMIT) on its own line, with AND and OR conditions indented underneath, while leaving quoted strings and identifiers alone. JSON is parsed and printed again, so invalid JSON is reported instead of formatted. HTML, CSS and XML use the same engines as the single-purpose tools on this site.
If you mostly work with one of those formats, the dedicated pages offer more: the HTML Beautifier and CSS Minifier can also minify, and the JSON Formatter adds line and column numbers to errors.
How to use the Code Beautifier
- 1
Choose the language
Click JavaScript, JSON, HTML, CSS, SQL or XML above the options. Switching language clears the previous result.
- 2
Set the indentation
Pick 2 spaces or 4 spaces from the Indent menu, or tick Use tabs.
- 3
Paste your code
Paste the code into the Input Code box.
- 4
Click Beautify Code
The result appears under Beautified Output. If the input cannot be parsed, for example invalid JSON or XML, a message explains why.
- 5
Copy the result
Use the Copy button above the output.
What it can do
Six languages
JavaScript, JSON, HTML, CSS, SQL and XML, each formatted by its own rules rather than one generic re-indenter.
Cautious JavaScript re-indenting
Adds line breaks only where JavaScript allows them, keeps your existing line breaks, and never edits strings, template literals, regex literals or comments.
Readable SQL
Keywords are upper-cased and each clause starts on a new line; text inside quotes, backticks and comments is left untouched.
Parsing for JSON and XML
Both are parsed before formatting, so a syntax error is reported rather than producing broken output.
Indentation choice
2 spaces, 4 spaces or tabs, applied to every language.
Limitations
- The JavaScript mode re-indents but does not reflow: it does not add spaces around operators, wrap long lines or reorder anything, so it is not a full formatter like those built into code editors.
- JSX and other syntax that mixes markup into JavaScript is not laid out well.
- SQL formatting is keyword-based rather than dialect-aware, and unquoted names that match a keyword are upper-cased too.
- Minified variable names cannot be restored; only the layout changes.
- JSON integers longer than about 15 digits lose precision because they pass through JavaScript numbers.
Privacy
Your code is formatted by JavaScript running in this browser tab; it is not uploaded to FlexyPdf or anywhere else.
Frequently asked questions
Will beautifying change what my JavaScript does?
It should not. The formatter only inserts line breaks and indentation at points where JavaScript permits them, keeps every line break you already had, and leaves strings, template literals, regular expressions and comments exactly as they were. As with any automated change, run your tests before shipping reformatted code.
Can it un-minify a production bundle?
It can make one readable: a one-line bundle is split into statements and indented blocks. It cannot bring back the original variable names, comments or file structure that the minifier removed. Only a source map, if the site published one, can do that.
Which SQL dialects does it support?
It is not tied to one dialect. It recognises common keywords shared by MySQL, PostgreSQL, SQLite and SQL Server, puts the main clauses on new lines and indents AND/OR conditions. Dialect-specific syntax is passed through unchanged.
Why are some of my SQL column names in capitals now?
The SQL mode upper-cases every unquoted word it recognises as a keyword. A column or table named key, end or default is therefore upper-cased too. Most databases treat unquoted names case-insensitively, but put such names in quotes if their exact case matters.
Why did my JSON fail to format?
JSON is stricter than JavaScript: keys need double quotes, and trailing commas, comments and single-quoted strings are not allowed. The message comes from your browser’s JSON parser. The JSON Formatter converts a character position into a line and column to help you find the spot.
Ratings & Reviews
Rate Code Beautifier
Help others by sharing your experience. Your rating is shown without your name.
Works well with
More Developer Tools
View all →JSON Formatter & Validator
Validate, pretty-print or minify JSON
XML Validator
Check that XML is well-formed and see where it breaks
Markdown Editor
Write Markdown with a live GitHub-style preview
Live Code Editor
Edit HTML, CSS and JavaScript with a live preview