SQL Join Visualizer
Visualize SQL JOINs interactively — INNER, LEFT, RIGHT, FULL OUTER, CROSS, anti-join, semi-join, and self-join — with row-accurate matching (not misleading Venn diagrams), live result preview, NULL-handling demonstration, duplicate-row multiplication explainer, step-through animation, and copyable generated SQL. 100% client-side, no DB required.
About SQL Join Visualizer
Visualize SQL JOINs interactively — INNER, LEFT, RIGHT, FULL OUTER, CROSS, anti-join, semi-join, and self-join — with row-accurate matching (not misleading Venn diagrams), live result preview, NULL-handling demonstration, duplicate-row multiplication explainer, step-through animation, and copyable generated SQL. 100% client-side, no DB required. Everything runs locally in your browser — your data never leaves your device.
How to use
- Enter your input in the tool above.
- Adjust any options to your preference.
- Use the Copy or Download buttons to save the result.
- Everything happens locally — your data never leaves your browser.
FAQ
How does the SQL Join Visualizer work?
Pick a join type (INNER, LEFT, RIGHT, FULL OUTER, CROSS, LEFT ANTI, LEFT SEMI, or self-join), choose two sample tables, set the ON condition, and the tool runs the join live in your browser — no database needed. The visualization shows exactly which rows match (a row-level 'checkered flag' style), how unmatched rows are NULL-filled, and how duplicate keys multiply rows in the result. You can edit the sample data and the join condition, and the result updates instantly.
Why a row-accurate visualization instead of a Venn diagram?
Coding Horror and many DB educators have shown that Venn diagrams misrepresent JOINs: they imply set union/intersection, but JOINs actually multiply rows (a single left row with N matching right rows produces N result rows), and they hide NULL behaviour (NULL join keys never match, not even to other NULLs). This tool shows the actual row-by-row matching so you can see exactly how the result is built, including row explosion and NULL handling.
Which join types and edge cases are covered?
INNER, LEFT [OUTER], RIGHT [OUTER], FULL [OUTER], CROSS, LEFT ANTI (left rows with no match), LEFT SEMI (left rows with at least one match, right columns dropped), and SELF JOIN (the same table aliased twice). Edge cases: NULLs in join keys never match, duplicate keys multiply rows, composite-key joins (multiple AND-ed conditions), and non-equi joins (e.g. t1.x < t2.y).
Can I run the join on my own sample data?
Yes. Both tables are editable — change column names, add or remove rows, and the join re-runs instantly. The result grid is shown side-by-side with the matched/unmatched rows color-coded so you can see exactly which rows contributed to each result row. The generated SQL is shown beneath and can be copied for use in your own database.
What extras does this visualizer offer versus others?
(1) Eight join types: INNER, LEFT, RIGHT, FULL, CROSS, LEFT ANTI, LEFT SEMI, SELF. (2) Row-accurate matching visualization (not Venn). (3) Live result preview that updates as you edit. (4) NULL-handling demonstration (NULL keys never match). (5) Duplicate-row multiplication explainer. (6) Composite-key joins. (7) Non-equi joins (<, <=, >, >=, <>). (8) Step-through animation of the matching process. (9) Color-coded matched/unmatched rows. (10) Three preset datasets (users+orders, departments+employees self-ref, tags many-to-many). (11) Editable sample tables. (12) Copyable generated SQL with proper identifier quoting. (13) localStorage history (max 20). (14) Shareable URL with base64-encoded state. (15) Honest educational notes ('Venn diagrams mislead; here's why').
Related tools
.bashrc / .zshrc Alias & Config Manager
Build shell aliases, functions, exports, and PATH edits in a visual editor, then export a clean, commented .aliases file sourced from both .bashrc and .zshrc — with shadowing detection against shell builtins and common CLI tools, function suggestions when args are needed, starter packs (git, docker, kubectl, navigation, safety, ls, dev, devops, data science), import of existing rc files, dedupe, history (localStorage), and shareable URL. 100% client-side.
Add / Subtract Date Calculator
Add or subtract years, months, weeks, days, hours, minutes and seconds from a starting date/time. Calendar-day or business-day mode with custom weekend + holiday list. Month-end policy toggle (clamp to last day vs overflow). Repeat/series mode (e.g. every 2 weeks x 10) with CSV export. Shareable URL. 100% client-side.
Age Calculator
Calculate exact age from a birth date in calendar years/months/days (no negative-day bugs) plus totals in months/weeks/days/hours/minutes/seconds. Next-birthday countdown with weekday. Feb-29 birthday policy toggle. Milestones (1,000 days, 10,000 days, 1 billion seconds). Zodiac sign + Chinese zodiac. Age gap comparison. Shareable URL. 100% client-side.