cosmodev ~/tools/sql-playground

Mga halimbawa

The SQLite engine loads in your browser. Nothing is sent anywhere.

Schema

CREATE TABLE users (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  role TEXT DEFAULT 'member',
  created_at TEXT
);

INSERT INTO users (id, name, email, role, created_at) VALUES
  (1, 'Alice Chen', 'alice@example.com', 'admin', '2024-01-10'),
  (2, 'Bob Smith', 'bob@example.com', 'member', '2024-02-14'),
  (3, 'Carol Díaz', 'carol@example.com', 'editor', '2024-03-05'),
  (4, 'Dan Kim', 'dan@example.com', 'member', '2024-04-20'),
  (5, 'Eve Johnson', 'eve@example.com', 'admin', '2024-05-01');

CREATE TABLE orders (
  id INTEGER PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  product TEXT NOT NULL,
  amount REAL NOT NULL,
  status TEXT DEFAULT 'pending',
  ordered_at TEXT
);

INSERT INTO orders (id, user_id, product, amount, status, ordered_at) VALUES
  (1, 1, 'Pro Plan', 29.99, 'completed', '2024-03-01'),
  (2, 1, 'Add-on Pack', 9.99, 'completed', '2024-03-15'),
  (3, 2, 'Basic Plan', 14.99, 'completed', '2024-04-01'),
  (4, 3, 'Pro Plan', 29.99, 'pending', '2024-04-10'),
  (5, 4, 'Basic Plan', 14.99, 'refunded', '2024-05-01'),
  (6, 1, 'Enterprise', 99.99, 'completed', '2024-06-01'),
  (7, 5, 'Pro Plan', 29.99, 'completed', '2024-06-15');

CREATE TABLE users (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  role TEXT DEFAULT 'member',
  created_at TEXT
);

INSERT INTO users (id, name, email, role, created_at) VALUES
  (1, 'Alice Chen', 'alice@example.com', 'admin', '2024-01-10'),
  (2, 'Bob Smith', 'bob@example.com', 'member', '2024-02-14'),
  (3, 'Carol Díaz', 'carol@example.com', 'editor', '2024-03-05'),
  (4, 'Dan Kim', 'dan@example.com', 'member', '2024-04-20'),
  (5, 'Eve Johnson', 'eve@example.com', 'admin', '2024-05-01');

CREATE TABLE orders (
  id INTEGER PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  product TEXT NOT NULL,
  amount REAL NOT NULL,
  status TEXT DEFAULT 'pending',
  ordered_at TEXT
);

INSERT INTO orders (id, user_id, product, amount, status, ordered_at) VALUES
  (1, 1, 'Pro Plan', 29.99, 'completed', '2024-03-01'),
  (2, 1, 'Add-on Pack', 9.99, 'completed', '2024-03-15'),
  (3, 2, 'Basic Plan', 14.99, 'completed', '2024-04-01'),
  (4, 3, 'Pro Plan', 29.99, 'pending', '2024-04-10'),
  (5, 4, 'Basic Plan', 14.99, 'refunded', '2024-05-01'),
  (6, 1, 'Enterprise', 99.99, 'completed', '2024-06-01'),
  (7, 5, 'Pro Plan', 29.99, 'completed', '2024-06-15');

Query

⌘/Ctrl + ↵

SELECT u.name, u.role, COUNT(o.id) AS orders, SUM(o.amount) AS total
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
GROUP BY u.id
ORDER BY total DESC;

I-run ang isang query para makakita ng resulta.

cosmodev ~/docs/sql-playground.md

(Nasa Ingles ang dokumentasyon)

What it does

The SQL Playground lets you write and run real SQL queries directly in your browser - no installs, no sign-ups, no data leaving your machine. It ships with a ready-to-query sample database (users + orders) so you can start exploring joins, aggregates, and filters the moment the page loads. Swap in your own schema at any time and the database rebuilds live.

It’s powered by sql.js, a full SQLite engine compiled to WebAssembly. That means you get real SQL behavior - transactions, constraints, aggregates, subqueries - running 100% client-side. Results render in a clean table with row counts and timing, and you can export them as CSV, JSON, or Markdown with one click.

How to use it

The Schema panel on the left is pre-loaded with a sample users + orders database. Edit it freely - the database rebuilds automatically when you stop typing, and a green “applied” badge confirms it worked.
Write your SQL in the Query panel on the right - both editors highlight SQL syntax as you type - or click one of the example query chips (Select all, Filter, Aggregate, Join, Sort + limit, CTE, Subquery, Having, Like + order, Union) to load a pre-built query.
Click Run (or press ⌘/Ctrl + Enter) to execute.
Read the Results table below - it shows column headers, typed values (NULLs are styled distinctly), a row count, a read-only badge for SELECT queries, and the elapsed time in milliseconds.
Use the CSV / JSON / Markdown toggle + Copy results to export the output in your preferred format.
Click Copy share link to encode your current schema and query into the URL - anyone who opens the link sees your exact setup.

Examples

Join two tables and aggregate

SELECT u.name, u.role, COUNT(o.id) AS orders, SUM(o.amount) AS total
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
GROUP BY u.id
ORDER BY total DESC;

Returns each user with their order count and spend total, sorted highest first. Users with no orders appear with 0 / NULL.

Filter with a subquery

SELECT name, email FROM users
WHERE id IN (SELECT user_id FROM orders WHERE amount > 20);

Returns only users who have placed an order over $20.

Inspect table structure

PRAGMA table_info(users);

Returns column index, name, type, nullability, and default value for every column in the users table - useful for exploring unfamiliar schemas.

Good to know

100% client-side. Your SQL and data never leave the browser - everything runs locally via sql.js (SQLite compiled to WebAssembly). Safe for sensitive schemas.
Live schema editing. Change the Schema panel and the database rebuilds automatically (debounced). Errors are shown inline - queries stay disabled until the schema is valid again.
SQLite dialect. This is real SQLite - you get window functions, CTEs, JSON functions, and most of the SQLite feature set. A few things (stored procedures, MySQL/Postgres-specific syntax) aren’t supported.
Shareable. Your schema and query are encoded in the URL, so a shared link reproduces your exact playground state.
Related tools: Regex Tester, JSON Formatter.

Playground ng SQL

What it does

How to use it

Examples

Good to know