The language of structured data. SQL stores information in tables and lets you query, join and aggregate it with one declarative sentence. This page runs a real database in your browser.
A relational database is a set of tables linked by keys. We created two: users and orders. Every order points at a user via orders.user_id → users.id.
This is not a fake. A full SQLite engine is running inside this page (compiled to WebAssembly). Type any SQL and run it — the real results render below. Try editing one of the presets.
A JOIN stitches rows from two tables together using a matching key. Here every order is paired with the user who placed it — that's why you can write one query and get the customer's name beside their product.
SELECT u.name, o.product, o.amount FROM orders o JOIN users u ON u.id = o.user_id ORDER BY o.amount DESC;
Click the JOIN preset above and run it to see the real output of this exact statement.
SQL excels at summarising. GROUP BY collapses many rows into one per group, and aggregate functions like COUNT, SUM and AVG compute over each group. This is how dashboards get their numbers.
SELECT u.city, COUNT(o.id) AS orders, SUM(o.amount) AS revenue FROM users u JOIN orders o ON o.user_id = u.id GROUP BY u.city ORDER BY revenue DESC;
SQL is a standard language; many engines speak it. SQLite (running here) is file-based and embedded. The others are server-based — a long-running process your app connects to over a network.
The core syntax — SELECT … FROM … WHERE … JOIN … GROUP BY — is nearly identical across all of them. Learn it once, use it everywhere.
users and orders tables, and executes whatever SQL you type against the genuine engine — the tables you see are real query results, not mock-ups. MySQL, PostgreSQL and MS SQL Server are the popular server-based variants of SQL; they speak the same language but run as a network service rather than inside the page. The shared CSS shell provides the page styling.