What is visualdb?

VisualDB is a web app that teaches SQL and database concepts by showing how a query actually runs, rather than just teaching the syntax needed to write one. Most SQL tutorials show students how to write something like an inner join or a group by clause, but leave the question of why a query returns the rows it does, or how the database works it out step by step, largely unanswered. VisualDB breaks the SQL execution process apart and uses animations and interactive traces to show exactly how rows get scanned, filtered, grouped, and sorted as a query runs. It is aimed at college students, teachers, coding bootcamp attendees, and anyone learning databases on their own. The whole application runs entirely in the browser, with no backend server or real database behind it. It is built with React 19 and Vite, styled with Tailwind CSS, and uses a library called node-sql-parser to turn typed SQL text into a structured representation the app can step through and animate. A live demo is hosted on Vercel where anyone can try it without installing anything. The project is deliberately structured so new contributors do not need compiler or database internals experience to add a new visualization. A single execution engine module parses the SQL and manages the step-by-step state, while separate React components simply read that state and render it visually, so building a new module mostly means writing a UI component that hooks into the existing engine. As of this writing the tool already visualizes SELECT, WHERE, ORDER BY, LIMIT, GROUP BY, INNER JOIN, LEFT JOIN, and a free-form query playground with play, pause, and speed controls. The project's roadmap includes future modules covering database design concepts like primary and foreign keys, ER diagrams, and normalization, as well as more advanced internals such as transactions, indexing, and query optimization. The maintainers describe this as the first piece of a larger planned family of visual computer science learning tools. It is open source under the MIT License.