Five languages, one formatter
You’ve got a minified JSON blob from an API, a single-line SQL query from a log file, and some CSS that your CMS spat out as one long string. Opening three different formatting tools is annoying. This one handles JSON, HTML, CSS, XML, and SQL from a tabbed interface, each with its own formatting logic.
Pick the language tab, paste the mess, click format, copy the clean version. Two-space or four-space indentation, your choice.
What each formatter actually does
JSON: Parses it properly and re-serializes with indentation. If you’ve got a trailing comma or unquoted key, it’ll catch that and tell you.
HTML: Nests elements with proper indentation, puts each tag on its own line, handles void elements like <br> and <img> without trying to indent after them.
CSS: One property per line, consistent spacing around selectors and declarations, media queries nested correctly.
XML: Same idea as HTML but handles CDATA sections, processing instructions, and XML declarations properly.
SQL: Uppercases keywords (SELECT, FROM, WHERE), puts each major clause on its own line, indents AND/OR conditions under WHERE. Turns an unreadable one-liner into something you can actually debug.
When this beats Prettier
Look, if you’re in a project with Prettier or ESLint configured, use those. But not everything lives in a build pipeline. You’re reading a Stack Overflow answer with poorly indented XML. You pulled a SQL query from your monitoring dashboard. Someone Slacked you a blob of minified JSON. You just need it readable, right now, in a browser tab.
That’s what this is for. Ad-hoc formatting when you don’t want to spin up an editor or install a CLI tool.
For deeper formatting options on a specific language, there are also standalone tools on Toolsvu: the JSON Formatter, HTML Formatter, CSS Formatter, and SQL Formatter.
FAQ
Does formatting change my code’s behavior?
No. Only whitespace and indentation change. The logical structure stays identical.
Does my code get sent to a server?
Nope, client-side JavaScript, nothing leaves your browser. Fine for proprietary code.
Which indentation should I use?
Two spaces is standard for front-end work (JSON, HTML, CSS). Four spaces is more common in Java, Python, and SQL-heavy environments. Match your project’s conventions.
Does the SQL formatter handle subqueries?
Yes, subqueries inside parentheses get the same formatting treatment with proper nesting.