SQLPlay

Overview 

SQLPlay is an H2-Console-style SQL playground for JavaScript. It runs a real in-memory SQLite database — SQLite 3.49 compiled to WebAssembly via sql.js — entirely in the browser, so anyone can practice SQL with zero backend and zero setup. On top of the console it adds a LeetCode-style Challenge mode with 50 graded problems. It's published on npm and, from a single codebase, ships four ways: a `npx sqlplay` CLI, a headless library, an embeddable React console, and an Express middleware that runs an H2-style backend console.

The problem 

Java developers have the H2 Console for quickly practicing SQL against a throwaway database. JavaScript had no comparable zero-setup equivalent — you either installed a database locally or signed up for an online sandbox. There was a clear gap for an instant, local, no-install SQL playground — and no single package that could double as a headless query engine and a drop-in database console for other apps.

The solution 

SQLPlay puts a friendly console UI on top of sql.js (SQLite compiled to WebAssembly), so a full SQL database runs client-side in the browser with a query editor, schema-aware autocomplete, live schema browser, ER diagram, editable data grid, query history, and CSV/JSON import-export. The core is built around an injectable WASM loader, which lets the exact same engine be delivered four ways from one codebase — the `npx sqlplay` CLI, a headless `createDatabase()` library that also runs in Node, an embeddable `<SqlConsole />` React component, and an Express middleware that keeps the database in your Node process (the true H2 Console model). A Challenge mode compares your result set against a reference solution — order-sensitive where it matters, with numeric tolerance for floats.

Architecture 

SQLPlay is built around an injectable WASM loader, so one core is delivered four ways. In the browser there is no server — the React UI drives sql.js (SQLite compiled to WebAssembly) running a full in-memory database client-side. As an Express middleware the same engine runs inside your Node process, H2-Console style, with the browser talking to it over an API. The CLI is a tiny dependency-free static server that serves the built app.

Key features 

• A real in-memory SQLite database (SQLite 3.49) running 100% in the browser via WebAssembly (sql.js) — JOINs, subqueries, window functions, recursive CTEs, triggers, and JSON functions
• Packaged four ways from one codebase — a `npx sqlplay` CLI, a headless library (also runs in Node), an embeddable React console, and an Express middleware for an H2-style backend console
• Challenge mode — 50 graded problems (Easy → Hard) across three datasets, auto-checked against a reference result set with hints, solutions, and local progress tracking
• SQL editor with syntax highlighting, schema-aware autocomplete, keyboard-run (Ctrl / ⌘ + Enter), and run-selection
• Create and save your own datasets (full DDL with foreign keys) that persist in the browser, plus bundled HR, E-commerce, and University samples
• Live schema browser, an auto-laid-out ER diagram with foreign-key edges (exportable as SVG), and an inline editable data grid
• Query history, CSV/JSON import that auto-creates typed tables, and export to CSV or a real `.sqlite` file
• Shareable links that encode the dataset and query in the URL hash — nothing is ever sent to a server
• Published and versioned on npm — the SQLite WASM binary is embedded, so it works in Node and any bundler with zero configuration

Tech stack 

My role & impact 

• Designed the core around an injectable WASM loader, so a single engine ships four ways — CLI, headless library, React component, and Express middleware — without duplicating the SQL layer
• Embedded the SQLite WASM binary into the published package so it runs in Node and any bundler (Vite, webpack, Next.js) with zero configuration
• Built a Challenge mode that grades answers by comparing result sets — order-sensitive where it matters, with numeric tolerance for floats — plus hints, solutions, and locally tracked progress
• Kept everything client-side and shareable: datasets and queries encode into the URL hash, and user-created datasets and query history persist in the browser, so nothing is ever sent to a server
• Published and versioned it on npm, launchable instantly with `npx sqlplay`