SQL Formatter

The SQL Formatter is a regular-expression beautifier that runs entirely in your browser with no external SQL parsing library. When you click Format SQL, it first collapses all runs of whitespace to single spaces (sql.replace(/\s+/g, ' ')), then walks a fixed list of roughly ninety keywords (SELECT, FROM, WHERE, JOIN, GROUP/BY, HAVING, ORDER/BY, LIMIT, INSERT, INTO, VALUES, UPDATE, SET, DELETE, CREATE, TABLE, WITH, UNION, plus type names like VARCHAR, SERIAL, DECIMAL, TIMESTAMP and functions like COUNT, COALESCE, NULLIF and NOW) and rewrites each whole-word match to your chosen keyword case via a case-insensitive \b regex. It then inserts line breaks before every major clause, pushes each AND, OR, and ON onto its own indented line, and breaks on commas. Because it only recognizes the words in its built-in SQL_KEYWORDS list, identifiers, vendor-specific functions, or newer keywords outside that set are left untouched in whatever case you typed them.

Layout is controlled by three on-screen dropdowns whose values persist in the page URL (via useUrlStates) so a configured formatter can be shared as a link: keyword case (UPPERCASE, lowercase, Capitalize), indent width, and comma position. The indent dropdown offers '2 spaces,' '4 spaces,' and '1 tab,' but indentation is built with the JavaScript expression ' '.repeat(indentSize) where the '1 tab' option maps to indentSize=1, so all three options produce spaces and '1 tab' yields a single space rather than an actual tab character. Comma position can be set to 'After (item,)' (trailing) or 'Before (, item)' (leading). The formatter always normalizes the statement to end with a semicolon, appending one if your input lacks it. Subquery nesting is handled with a light touch: an opening parenthesis immediately followed by SELECT gets a newline and one level of indent, and a doubled closing parenthesis ')\s*)' is split onto separate lines, but there is no true bracket-depth tracking, so deeply nested queries may not indent perfectly.

Although the type SqlDialect (standard, mysql, postgresql, sqlite, mssql) and a default 'standard' value exist in the component's URL state, there is no dialect dropdown rendered in the interface and the dialect value is never read by either the formatting or the minifying logic, so output is identical regardless of dialect; the only visible settings are keyword case, indent, and comma position. Alongside formatting, a Minify button strips the query to a single line by collapsing whitespace and removing the spaces around commas, parentheses, and equals signs (=). The formatted output is shown with regex-based syntax highlighting that colors single-quoted strings green (text-green-400), numeric literals orange (text-orange-400), recognized keywords blue (text-blue-400), and -- line comments gray (text-gray-500), and you can copy it, download it as formatted.sql, or read the live stats panel showing original and formatted character counts, total line count, and the count of recognized keywords. Seven preset sample queries (simple, complex, subquery, cte, insert, update, create) are available as one-click loaders.