Format SQL, HTML and minified code, step by step

Formatting code means rewriting it with line breaks and indentation so you can read it, without changing what it does. With the SQL formatter, the HTML formatter and the beautify mode of Minify, you turn a pasted one-liner into tidy code, in your browser and without uploading it to a server. That matters when the code contains table names, internal paths or company data.

SQL: from a wall of text to a clear query

A query on a single line:

select u.id,u.name,count(o.id) as orders from users u left join orders o on o.user_id=u.id where u.active=1 and u.created_at>'2026-01-01' group by u.id,u.name order by orders desc

with the PostgreSQL dialect, 2 spaces and uppercase keywords, comes out as:

SELECT
  u.id,
  u.name,
  count(o.id) AS orders
FROM
  users u
  LEFT JOIN orders o ON o.user_id = u.id
WHERE
  u.active = 1
  AND u.created_at > '2026-01-01'
GROUP BY
  u.id,
  u.name
ORDER BY
  orders DESC

Each clause gets its own line, columns sit one per row and logical operators such as AND lead the line. You can see at a glance what is joined, what is filtered and how it is grouped.

The SQL formatter's options

1. Dialect: standard SQL, MySQL, PostgreSQL, SQLite, BigQuery, MS SQL Server, MariaDB and Oracle PL/SQL. The right one matters because each engine has its own functions and quoting.
2. Indentation: 2 or 4 spaces.
3. Keywords: UPPERCASE, lowercase or left as written.

The tool can also go the other way and minify a query, respecting quoted strings and comments, so that a line ending in -- doesn't swallow the rest of the query.

An example of the third option: with select, from and where in lowercase, the uppercase option turns them into SELECT, FROM and WHERE, the lowercase option does the opposite, and the preserve option leaves each word as you typed it. Many teams fix one of the first two in their style guide so every query in a repository looks the same in code review.

HTML: tidying a squashed page

The HTML formatter uses Prettier to re-indent. Its options: 2 or 4 spaces or tabs, removing comments, shortening self-closing tags, and a whitespace-sensitive mode that's on by default. That mode respects the fact that in HTML a space between two inline elements, such as between a link and a word, can be part of the content. Turn it off and the result may look cleaner but could change how text renders, so compare before replacing your file.

A typical fragment, as it comes out of a visual editor or a template:

<div class="card"><h2>Title</h2><p>Text with <a href="#">a link</a>, <strong>bold</strong>.</p><ul><li>One</li><li>Two</li></ul><img src="a.png" alt="x"/></div>

With 2-space indentation and the whitespace-sensitive mode on, it becomes:

<div class="card">
  <h2>Title</h2>
  <p>Text with <a href="#">a link</a>, <strong>bold</strong>.</p>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
  <img src="a.png" alt="x" />
</div>

Block elements (div, ul, li) are split across lines, while inline ones (a, strong) stay inside their paragraph, precisely so the spacing of the text is untouched.

Unminifying JS, CSS and more

For code someone minified, the Unminify / Beautify mode of Minify reformats it with line breaks and indentation and detects the language automatically. The limit to keep in mind is the one the tool itself states: it can't recover comments or variable names the minifier removed or shortened. If the code had userCounter and it became a, unminifying hands you back a with nice indentation, not the original name. To see what minifying does, read minify JavaScript, CSS and HTML: a practical guide.

When formatting pays off

• Reviewing a query copied from a log or an ORM that came out on one line.
• Before comparing two versions of a file, so indentation doesn't show up as changes: see see what changed between two versions of a text.
• Debugging HTML copied from the browser's developer tools.
• Documenting a query in a ticket or an email.

Common mistakes when formatting

• Picking the wrong dialect. Paste a SQL Server query, which wraps names in square brackets, with the MySQL dialect and the formatter may not recognize those quotes or some functions. Switch dialect before hunting for an error in your query.
• Formatting something that isn't plain SQL. A stored-procedure block with engine-specific syntax reads better with that engine's dialect, for example Oracle PL/SQL.
• Replacing HTML without comparing. If you turn the whitespace-sensitive mode off, check the page in the browser: a space that vanishes between a link and the next word is easy to spot.
• Expecting original names after unminifying. If you need the real names, the right source is the project's own code or a source map, not the minified file.
• Pasting secrets. Even though everything runs in your browser, remove passwords or tokens from the query before you share the result in a ticket.

What a formatter doesn't do

It doesn't fix syntax errors or check that tables exist, doesn't optimize a slow query and doesn't repair badly nested HTML. It only changes appearance. If your query has an error, the formatter may report that it can't parse it, and you'll need to fix it by hand.

Frequently asked questions

Related tools

• SQL Formatter: eight dialects, indentation and keyword case.
• HTML Formatter: re-indent with Prettier, with whitespace and comment options.
• Minify: shrink JS, CSS and HTML, and unminify code.
• JSON Formatter: validate and format JSON.

You might also like: 13 developer tools that respect your privacy and JSON vs YAML vs XML: which one to pick?.