SQL, CSS, and HTML Formatter Online
Paste messy or minified SQL, CSS, or HTML and get properly indented, readable output. SQL keywords are uppercased and clauses are split onto separate lines. CSS properties are indented inside rule blocks with blank lines between selectors. HTML tags are nested with correct indentation while preserving inline elements and raw content blocks. Switch between the three languages with the tab bar and minify when you need compact output for production.
How to Use
- Select the language tab (SQL, CSS, or HTML)
- Paste your code into the input editor on the left
- Click Format to beautify or Minify to compress
- Adjust indentation with the dropdown (2 spaces, 4 spaces, or tabs)
- Copy the result with one click or use the keyboard shortcut
SQL Formatting
The SQL formatter tokenizes your query and restructures it for readability. Major clauses (SELECT, FROM, WHERE, JOIN, GROUP BY, ORDER BY) start on new lines at the base indentation level. Subclauses like AND, OR, and ON are indented one level. Subqueries inside parentheses get their own indentation block. Column lists after SELECT are split one per line after commas.
Multiword clauses like INNER JOIN, ORDER BY, and INSERT INTO are recognized as single units. All SQL keywords are uppercased while identifiers, string literals, and values are left untouched. The minifier strips whitespace and comments while preserving the necessary spaces between tokens.
CSS Formatting
The CSS formatter parses your stylesheet into tokens (selectors, properties, values, at rules) and rebuilds it with consistent indentation. Each property gets its own line inside a rule block. Nested at rules like @media and @keyframes are indented correctly at each nesting level. Blank lines are inserted between top level rules for visual separation.
Minification removes all comments, collapses whitespace, and strips unnecessary characters. The result is the smallest valid CSS representation of your stylesheet.
HTML Formatting
The HTML formatter parses tags, attributes, text nodes, and comments. Block level elements are indented one level inside their parent. Void elements (img, br, input, hr, meta, link) are treated as self closing and do not affect indentation depth. Content inside pre, script, style, and textarea tags is preserved exactly as written since whitespace is significant in those contexts.
Inline elements like a, strong, em, span, and code stay on the same line as adjacent text, matching how browsers actually render them. The minifier collapses all insignificant whitespace and strips comments while preserving raw content blocks.
Working with API responses? Format the JSON payload with the JSON Formatter, then encode the result for a URL parameter with the URL Encoder. Need to compare two versions of a query or stylesheet? Paste both into the Diff Checker.