Building a Client-Side SQL Formatter with Vanilla JS and Web Workers

sharefun2023 — Mon, 20 Jul 2026 15:35:46 +0000

Most SQL formatters process queries server-side. That means every time you click "Format", your SQL gets sent to a random backend — with no guarantee of what happens to it.

I wanted something different: a formatter where your data never leaves your browser.

The Stack

sqlformat.io is built with:

Vanilla JavaScript — no framework, no build step
sql-formatter — the formatting engine
Web Workers — formatting runs off the main thread so the UI stays snappy even on 1000+ line queries
Cloudflare Pages — zero-cost hosting with global edge caching

Architecture

User pastes SQL
  ↓
Main thread sends to Web Worker
  ↓
Worker calls sql-formatter with dialect-specific options
  ↓
Formatted SQL sent back to main thread
  ↓
Rendered with syntax highlighting (no library needed — just regex + <span>)

Key insight: the sql-formatter library alone is ~50KB gzipped. Running it in a Web Worker means the main thread never blocks, and the user can keep typing while large queries format in the background.

Why No Server?

Privacy — zero bytes leave the user browser
Offline — works after the page loads, no internet needed
Scale — no server costs, no rate limits, no API keys
Speed — no round trip, instant formatting

Lessons Learned

Web Workers are underrated — they turn a potentially laggy text processor into a buttery-smooth UX
SQL dialects are deceptively complex — MySQL vs PostgreSQL vs BigQuery all have different quoting rules, and the formatter needs to handle inline comments and dollar-quoted strings that span multiple lines
Regex-based syntax highlighting works surprisingly well for SQL — you do not need a parser, just a few well-placed regex patterns for keywords, strings, numbers, and comments

Try it: sqlformat.io

Source: github.com/sharefun2023/sqlformat.io

I Got Tired of Slow SQL Formatters That Upload My Queries — So I Built a Free One

sharefun2023 — Mon, 20 Jul 2026 15:35:08 +0000

I write a lot of SQL every day. And every online formatter I tried had the same problems:

Uploads queries to their server — privacy nightmare when you are working with production schema
Tiny text area — cannot handle 500+ line queries without lag
3 ads before you even see the formatted output

So I built sqlformat.io — a no-BS SQL formatter.

What It Does

Client-side only — everything runs in YOUR browser via Web Worker. Zero bytes leave your device
15+ SQL dialects — MySQL, PostgreSQL, SQLite, BigQuery, Snowflake, T-SQL, and more
No signup, no ads, no upload — ever
Instant — paste, click Format, done

Why I Built It

I got tired of copy-pasting production queries into random websites and wondering where they ended up. With sqlformat.io, you can disconnect your internet after the page loads and keep formatting offline.

Extra Tools Included

It is not just a formatter — the site has several free SQL tools:

Diff — compare two SQL queries side by side
Minify/Compress — strip whitespace for embedding in code
Validate — syntax check across dialects
ER Diagram — visualize table relationships
SQL to JSON — convert query results
Data Generator — generate test data
Explain Visualizer — MySQL/PostgreSQL EXPLAIN output as a tree

Tech Stack

Vanilla JS + sql-formatter library, hosted on Cloudflare Pages. All formatting runs in a Web Worker so the UI stays responsive even on huge queries.

Open source: github.com/sharefun2023/sqlformat.io

Would love feedback from folks who format SQL daily!

DEV Community: sharefun2023