Learn SQL by watching a query transform your tables.
Open QueryTrace · Development guide · Report a bug
QueryTrace is a visual SQL learning tool for students, instructors, and anyone who wants to understand where a query's result comes from. Choose a lesson or write a query, then step through joins, filters, grouping, and projection.
- Follow the rows: see which source records contribute to each result.
- Learn at your pace: pause, step, scrub backward, and change playback speed.
- Bring your own schema: import supported SQL scripts into an in-browser database.
- Start without an account: SQLite runs locally in a Web Worker. Lesson progress and custom schemas are saved in browser storage when available.
- Open querytrace.net.
- Choose a guided lesson and run its query.
- Step through the stages and select a highlighted row to follow its connections.
All bundled lesson scenarios and records are fictional.
Install Node.js 24, then:
git clone https://github.com/twbdavis/querytrace.git
cd querytrace
npm ci
npm run devOpen http://localhost:3000. See the development guide for tests, production builds, hosting, and troubleshooting.
A personal learning project with automated tracing and browser checks. The app teaches logical query stages; it is not a display of SQLite's internal physical query plan. Queries written in MySQL / MariaDB, PostgreSQL, SQL Server or Oracle spelling are translated to SQLite and the rewrite is shown beside the result; the translation covers a defined subset, and some complex queries (CTEs, set operations, derived tables) show branch results plus the final SQLite result rather than a full trace. INSERT, UPDATE and DELETE run against the loaded schema and show the rows before and after the change. Browser storage is local to each browser profile and can be cleared by the browser.
Next.js · TypeScript · React · SQLite/WASM · React Flow · CodeMirror · Playwright
How tracing works · Contributing · Security
MIT © 2026 Thomas Davis.