SQL / CSS / HTML / JavaScript / TypeScript

SQL, CSS, HTML, JavaScript, and TypeScript Formatter Online

Paste messy or minified SQL, CSS, HTML, JavaScript, or TypeScript 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. JavaScript and TypeScript code is formatted with consistent semicolons, quotes, indentation, and line breaks using Prettier. Switch between languages with the tab bar and minify when you need compact output for production (SQL, CSS, and HTML only).

What is Code Formatting?

Code formatting (also called beautifying or pretty-printing) is the process of restructuring code to follow consistent indentation, spacing, and line break conventions without changing its logic. The goal is human readability: proper indentation reveals nesting, line breaks separate logical statements, and consistent keyword casing makes the code scannable. A formatter parses the source into an abstract syntax tree and re-emits it with uniform whitespace. This eliminates religious wars over tabs-vs-spaces and makes code reviews focus on logic rather than style. Minification is the reverse: stripping all unnecessary whitespace to produce the smallest possible output for production delivery.

How to Use

1. Select the language tab (SQL, CSS, HTML, JavaScript, or TypeScript)
2. Paste your code into the input editor on the left
3. Click Format to beautify or Minify to compress (SQL, CSS, and HTML only)
4. Adjust indentation with the dropdown (2 spaces, 4 spaces, or tabs)
5. 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. Try the pre-loaded Minify CSS example to see minification in action on a sample 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.

JavaScript and TypeScript Formatting

JavaScript and TypeScript formatting uses Prettier running in a web worker. Prettier parses your code into an AST and reprints it with a consistent style: semicolons, double quotes, trailing commas, and 2-space indentation. The web worker runs off the main thread so the UI stays responsive even with large files.

The formatter handles all modern JavaScript and TypeScript syntax: arrow functions, template literals, destructuring, async/await, classes, modules, optional chaining, nullish coalescing, and more. TypeScript-specific features like interfaces, type annotations, enums, generics, mapped types, and conditional types are fully supported. JSX and TSX are also handled correctly.

Prettier does not support minification. For JavaScript and TypeScript, the Minify button is disabled. If you need minified output, use a bundler like esbuild, Rollup, or Vite in production mode.

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.