DEV Community

sharefun2023
sharefun2023

Posted on

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

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>)
Enter fullscreen mode Exit fullscreen mode

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

  1. Web Workers are underrated — they turn a potentially laggy text processor into a buttery-smooth UX
  2. 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
  3. 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

Top comments (0)