Skip to main content
CodeLint.Dev Dev Tools

Code Formatter — CSS, HTML, SQL & XML

Re-indent minified or machine-generated code in four languages, each according to its own conventions rather than one generic rule.

Input
Output

Output will appear here

What formatting means in each language

These are four genuinely different problems, which is why a single generic indenter produces poor results for all of them:

  • CSS —One declaration per line, consistent brace placement, blank lines between rules. The subtlety is at-rules — media queries and container queries nest, and their contents indent one level further.
  • HTML —The hard part is knowing which elements are inline. Breaking a line inside a run of text introduces whitespace that renders, so a formatter that indents <span> like <div> can visibly change the page. Void elements and <pre> contents are also left alone.
  • SQL —Keywords are cased consistently and major clauses — SELECT, FROM, WHERE, GROUP BY, JOIN — each start a line, with join conditions and boolean operators indented beneath. This is what makes a long query readable at a glance.
  • XML —Child elements indent, attributes keep their document order, and text nodes with significant whitespace are preserved. CDATA sections pass through untouched.

A formatter is not a linter

Worth being precise about, because the two are often conflated and they solve different problems.

A formatter changes only how code is laid out. It will not tell you that a CSS property name is misspelled, that an HTML attribute is invalid, or that a SQL query will scan the whole table. Run it on broken code and you get neatly indented broken code.

A linter analyses meaning and reports problems — unused rules, accessibility violations, likely bugs. Stylelint, ESLint, HTMLHint and sqlfluff are linters.

This tool is a formatter. That said, formatting is often a useful first diagnostic step: a mis-nested HTML tag or an unbalanced CSS brace usually becomes obvious the moment indentation makes the structure visible, even though the formatter never says a word about it.

When formatting goes wrong

Formatted HTML renders with unexpected gaps between elements

Cause:Whitespace between inline elements is significant in HTML. Breaking <code>&lt;a&gt;x&lt;/a&gt;&lt;a&gt;y&lt;/a&gt;</code> onto two lines inserts a rendered space between the links.

Fix:For inline-sensitive markup, format the surrounding block but leave the inline run on one line. In modern layouts, flex or grid containers ignore this whitespace, which is why the problem shows up mainly in older or inline-block layouts.

SQL formatting mangles a dialect-specific construct

Cause:Vendor extensions the parser does not recognise — PostgreSQL dollar-quoted function bodies, T-SQL hints, BigQuery array syntax.

Fix:Select the correct dialect before formatting. Unrecognised syntax is passed through rather than rewritten, so the query stays valid even when its layout is not improved.

Formatted output is not what a project’s linter wants

Cause:This is a general-purpose formatter with its own defaults. A project with Prettier, dprint or a house style will have different rules.

Fix:Use the project’s own formatter for files in that project. This tool is for code you have pasted from somewhere else — a log, a minified asset, a Slack message.

Minified CSS formats but variable names are meaningless

Cause:Build tools mangle class names and remove comments. That information is discarded at build time and cannot be recovered by formatting.

Fix:If a source map is available, use it to recover the original. Formatting makes structure readable but cannot restore names that no longer exist in the file.

About

The Code Formatter handles four languages in a single tool: CSS, HTML, XML, and SQL. Select the language, paste your code, and the formatter normalises indentation, adds consistent line breaks, aligns attributes, and — for SQL — uppercases reserved keywords and places each clause on its own line. The indentation style is configurable: choose 2 spaces, 4 spaces, or hard tabs to match your project conventions. Formatted output can be downloaded as a file, making it easy to replace the original without copying and pasting. All formatting runs locally in your browser — no code is ever uploaded to a server — so it is safe to format internal stylesheets, proprietary database queries, or any code you cannot share with an external service.

How to use

  1. 1 Select the language (CSS, HTML, XML, or SQL) from the language dropdown at the top of the editor.
  2. 2 Paste your code into the input panel, or click Upload to open a file from your computer.
  3. 3 Choose your preferred indentation style — 2 spaces, 4 spaces, or tabs — from the options bar.
  4. 4 Click Format; the beautified code appears in the output panel immediately.
  5. 5 Click Copy to copy the formatted code to your clipboard, or click Download to save it as a file.
  6. 6 Use the shareable URL button to generate a link that encodes the current code and language for easy sharing.
Which languages does the code formatter support?
The formatter supports CSS, HTML, XML, and SQL. Each uses a dedicated formatting engine: SQL keywords are uppercased and major clauses (SELECT, FROM, WHERE, JOIN) are placed on separate lines; HTML and XML attributes are consistently aligned; CSS declarations are placed one per line with normalised spacing. JavaScript, TypeScript, Python, and other languages are not currently supported.
How is this different from a formatter built into my code editor?
Editor formatters require installation, configuration, and often a language server. This tool works instantly in any browser with no installation — making it useful for quickly formatting a snippet from Stack Overflow, a config file emailed by a colleague, or a SQL query copied from a database client. It is also useful in environments where you cannot install extensions.
Can I format minified CSS or HTML with this tool?
Yes. Paste any minified or single-line CSS, HTML, XML, or SQL and the formatter expands it with proper indentation and line breaks, making it fully readable and editable.
Does formatting change the behaviour of my code?
No. The formatter only modifies whitespace, indentation, and — for SQL — keyword casing. It never changes selectors, property values, attribute values, or query logic. The formatted output is functionally identical to the original input.
Is my code sent to a server?
No. All formatting runs entirely in your browser. Your stylesheets, markup, or SQL queries are never uploaded anywhere. This makes the tool safe to use with proprietary code, internal database schemas, or any source you would not want processed by an external service.