5QL

A visual, bi-directional SQL query builder that runs entirely in your browser.

5QL is a client-side, no-build SQL query builder. The web version is a single HTML file: SQLite is compiled to WebAssembly (sql.js) and runs inside the browser tab — there is no backend and no install. Tick columns in a schema tree and the SQL is written for you; type or paste SQL and the tree, the criteria grid and the results all move to match it. Neither side is the "source of truth" — they are kept in sync.

There is also a Windows desktop client (a Tauri build) — again a single executable, no install — that adds live connections to other databases such as PostgreSQL and MySQL.

---

Two core ideas

• The editor is bi-directional. Editor → SQL and SQL → Editor. There is no "generate" button; both views describe the same query and change together. A hand-written WHERE (a OR b) AND c round-trips into nested groups in the Criteria area, not a flat list.

• Relationships and meta-data live in a table in the database, which both assists this editor and any AI tooling. Each connection can name an instructive table — by default called Claude — that acts like a CLAUDE.md for the schema: a per-object dictionary of descriptions, datatypes and, crucially, join information. 5QL reads it on load, so it already knows that Books.AuthorKey points at Authors.ID before you touch anything. An AI assistant can read the same table.

---

The "Claude" data-dictionary table

The instructive table is an ordinary table — one row per schema object:

CREATE TABLE Claude (
    Key       INTEGER PRIMARY KEY AUTOINCREMENT,
    Value     JSON,        -- Name + arbitrary attributes
    ValueType TEXT,        -- DATABASE | TABLE | COLUMN
    Parent    INTEGER      -- Key of the owning object
);

Example rows for a Books & Authors schema:

Key	Value (JSON)	ValueType	Parent
1	{"Name":"Books & Authors","Database":"SQLite"}	DATABASE	—
2	{"Name":"Books"}	TABLE	1
3	{"Name":"Title","Description":"Full display title of the book"}	COLUMN	2
4	{"Name":"AuthorKey","Join":"Authors.ID"}	COLUMN	2
5	{"Name":"Authors"}	TABLE	1
6	{"Name":"Name","Description":"Author's full name"}	COLUMN	5

Row 4 is the interesting one: the "Join" attribute on AuthorKey is how the app learns the Books → Authors relationship. Descriptions (rows 3 & 6) become searchable and show up in the Attributes editor. Tables can also be flagged "LookupTable":"True" or "LinkTable":"True" to mark reference/code tables and many-to-many junctions.

The Claude table is treated as metadata, so it never appears as a normal table in the tree or in generated SQL.

---

The regions of the app

5QL is a single screen: the left column is where you build, the right column is where you see the result, and the bottom row shows the filtering and ordering that shape it.

• Query tabs — each query is a tab; + opens another.
• Query search — find saved queries in the connection's repository.
• AI prompt bar — describe a query in English, get SQL back.
• Tree search — find any column by any of its attributes.
• Tool buttons — ƒ function column, CASE, scalar subquery.
• Selection area — the schema tree; tick columns to build the SELECT.
• View tabs — Data grid / raw SQL / AI-chosen chart.
• Result grid — the rows the current query returns.
• Attributes — data-dictionary editor for the selected object.
• Criteria / Grouping — the WHERE builder, plus GROUP BY / HAVING.
• Sorting Order — ORDER BY / GROUP BY / HAVING / LIMIT.
• Sidebar — the visibility eye and the settings gear.

---

What you can do

Build joins from the tree

Because the join information came from the Claude table, a foreign-key column is not a dead end — it is an expandable node. Expand Books.AuthorKey, tick Name under it, and that single click creates the join: the app emits LEFT OUTER JOIN Authors ON Books.AuthorKey = Authors.ID for you.

Travel joins in reverse (backlinks)

A join is symmetric, so 5QL also surfaces it from the far side as a backlink (marked with a ♦ diamond). Open Authors and you'll find ♦ Books — inferred from the same single join fact — so you can build "authors and their books" just as naturally as "books and their authors."

Fold away lookup & link tables

The visibility toggle (the eye in the sidebar) uses the LookupTable / LinkTable flags. Turned one way you see the raw schema; turned the other, 5QL folds reference detail away — lookup tables collapse into plain columns on the tables that use them, junction tables disappear behind a direct ♦ backlink — leaving just the tables you actually think in.

Choose the join type

Joins default to LEFT OUTER JOIN. The app surfaces this in the Criteria grid as informational Exists rows — one per table guaranteed to appear in the result. Promote a join to INNER (by naming a joined table in a criteria field) and the joined table gains its own Exists row. The baseline is a per-connection Default Join Type setting (LEFT OUTER / RIGHT OUTER / INNER / FULL OUTER); the bundled SQLite runs all four for real.

See Data & SQL, both ways

Tree → SQL is live, with no "generate" button. SQL → everything: edit or paste SQL and the tree re-checks the right columns, the criteria grid rebuilds its WHERE, and the grid re-runs.

Edit the data dictionary in place

Select any object — database, table, or column — and the Attributes panel shows its dictionary entry, every value editable inline. Edits are persisted back into the Claude table (an in-memory UPDATE) and mirrored into the live model, so a description you add becomes immediately searchable. The last row is always Add New Attribute — define your own keys (Business Rule, Owner, PII…) per object.

Author WHERE clauses as a grid

Each row is one condition — pick a field, an operator, and a value from the field's distinct values or your own text. The value picker does Ctrl-click multi-select to produce an IN (…) list, plus a (None) sentinel that becomes IS NULL. Grouping is visual: click the tall cells to cycle AND → OR → !AND → !OR, and drag across rows to wrap them in a sub-group. It round-trips if you type the SQL instead.

Shape and compose

• Sorting Order summarises GROUP BY / ORDER BY / HAVING / LIMIT; sort terms are interactive (flip ASC/DESC, drop with ×, add with +) and stick across tree edits.
• Temp tables & set operations — below the tree, the + bar materialises the current query into a genuine SQLite temp table you can query further, or combines two independent queries with UNION / INTERSECT / EXCEPT. Picking a set operator arms a second, fully independent tree for the other half. Panels stack, so you can chain several steps.

Extra column types

• ƒ function columns — an arbitrary expression aliased into the SELECT (e.g. COUNT(*)).
• CASE columns — build CASE WHEN … THEN … ELSE … END with each WHEN/ELSE edited inline.
• Scalar subqueries — a (SELECT …) AS Name column, built in its own linked query tab with the same tree tools.

AI features

• AI prompt bar turns a natural-language request into a SQLite SELECT, using LLM credentials configured in Settings (Anthropic or OpenAI).
• Graph view — a third Data-area tab where an LLM picks the chart type and column mapping and Chart.js renders it.

---

Running it

Open the HTML file directly via file:// — that is the only supported way to run the web version. No web server, ever, and no build step.

Because browsers block fetch()/XHR to file:// URLs, everything needed at load time avoids fetch: sql.js uses the self-contained asm.js build (no .wasm to fetch) and all third-party libraries are vendored locally, so it also works fully offline.

Works under file://: the built-in books-demo / publishers-demo samples, and loading a database through the SQLite File picker (which reads the chosen file via file.arrayBuffer()).

Does not work under file:// (they rely on fetch): the LLM API-key file fetch (so the AI prompt bar and AI chart selection need a key supplied another way).

---

Two build targets

• Web (what runs today): the file://-only browser page above. Its only real engine is sql.js/SQLite, because that's what runs sandboxed in a browser tab without a server. The connection manager lists PostgreSQL / SQLite / MySQL, but in the web build only SQLite (via the file picker) is wired to a real engine; the others just capture connection metadata.
• Desktop (Tauri): the same UI wrapped into small native Windows/Mac(soon) executables. Because the Tauri backend is native (Rust), it isn't limited to the browser sandbox — this is the build meant to make the PostgreSQL / MySQL options connect to a live server.

---

source

5QL is a project by Sophie Broderick

5QL is hosted at fiveql.com

Source and issues: github.com/SophieBroderick/5QL