Developer Tools

SQL JOIN Visualizer

Visualize INNER, LEFT, RIGHT, FULL OUTER, CROSS, and SELF JOIN side by side. Edit two tables, see the SQL, the Venn diagram, and the joined result.

Pick a join

INNER JOIN. Keep only rows whose join keys match in both tables. Rows on either side without a match are dropped.

Left table (alias a)

CSV: header row, then data

Table name

Join key (a.)

5 rows parsed. Columns: id, name, dept_id

Right table (alias b)

CSV: header row, then data

Table name

Join key (b.)

4 rows parsed. Columns: dept_id, dept_name, location

Diagram

Shaded regions are the row groups this join keeps. Unshaded regions are excluded. CROSS JOIN is rendered as a grid because it pairs every row on one side with every row on the other rather than intersecting on a key.

SQL

SELECT *
FROM employees a
INNER JOIN departments b
  ON a.dept_id = b.dept_id;

Works in PostgreSQL and SQL Server as written. MySQL versions before 8.0 do not support FULL OUTER JOIN; the same effect is built with a UNION of a LEFT JOIN and the rows from the right table that did not match.

Result table

Computed in your browser using the same row-keeping rules a real database engine applies.

Both: 4Left only: 0Right only: 0

a.id	a.name	a.dept_id	b.dept_id	b.dept_name	b.location
1	Alice	10	10	Engineering	Berlin
2	Bob	20	20	Sales	London
3	Carol	10	10	Engineering	Berlin
4	Dan	40	40	Design	Berlin

All joins at a glance

INNER

INNER JOIN

Keep only rows whose join keys match in both tables. Rows on either side without a match are dropped.

LEFT

LEFT JOIN

Keep every row from the left table. Where the right table matches, attach its columns; where it does not, fill the right columns with NULL.

RIGHT

RIGHT JOIN

Mirror of LEFT JOIN. Keep every row from the right table and fill the left columns with NULL where the left table has no match.

FULL

FULL OUTER JOIN

Keep every row from both tables. Matched rows are merged; unmatched rows from either side appear with NULL on the missing side.

CROSS

CROSS JOIN

Cartesian product. Every row in the left table is paired with every row in the right table. There is no join condition.

SELF

SELF JOIN

Join a table to itself with two aliases. Useful for hierarchies (employees and their managers, reply chains, recursive lookups).

How to use

Pick a join type from the tab strip (INNER, LEFT, RIGHT, FULL, CROSS, SELF). The explanation, diagram, SQL, and result table update together.
Click a preset (Employees and Departments, Orders and Customers, Employees and their managers) to load realistic data in one click, or edit the CSV directly.
Set the table names and join keys. Rename the left or right table to match your real schema; the SQL and the column prefixes update on every keystroke.
Read the Venn diagram to see which row groups the join keeps, then scroll down to the result table to see the exact joined rows. Left-only rows are tinted blue, right-only rows are tinted amber, and NULL fills are highlighted.
Use the Both, Left only, and Right only counts to spot which rows survived. Switch between INNER and LEFT to see unmatched rows reappear with NULLs.
Click Copy SQL to paste the generated query into your editor or pull request.

About this tool

SQL JOIN Visualizer is an interactive playground for the six joins every SQL learner runs into: INNER, LEFT, RIGHT, FULL OUTER, CROSS, and SELF. Each join is rendered three ways at once so the relationship between the words and the result is unambiguous. The top panel switches between join types with one click and writes a one-paragraph explanation in plain English. A Venn-style SVG diagram below shades exactly the row groups the chosen join keeps: an INNER JOIN shades only the overlap, a LEFT JOIN shades the left circle plus the overlap, a FULL OUTER JOIN shades every region, and a CROSS JOIN renders as a paired grid because it is a Cartesian product and not a set operation. To the right, the canonical SQL is generated against the table names and join keys you supplied (with one-click copy). Below the diagram, a live result table is computed in your browser using the same row-keeping rules a real database engine applies: LEFT and FULL OUTER keep unmatched left rows with NULL fills, RIGHT and FULL OUTER keep unmatched right rows the same way, NULL keys never match (matching the standard SQL three-valued logic), SELF JOIN aliases the left table to itself, and CROSS JOIN pairs every row on one side with every row on the other. The table editors accept tolerant CSV with quoted commas, NULL or empty cells, and rebuild on every keystroke. Three editable presets seed realistic data in a single click: Employees and Departments, Orders and Customers, and a self-referential Employees-with-Managers table for the SELF JOIN case. Visual badges count matched, left-only, and right-only output rows so the consequence of switching from INNER to LEFT to FULL OUTER is obvious. The full at-a-glance card grid at the bottom doubles as a printable SQL JOIN cheat sheet. Useful for anyone who has typed sql join cheat sheet, inner join vs left join, sql join examples, or sql join venn diagram into a search box; for students working through their first database course; for senior engineers explaining why a missing row dropped out of an INNER JOIN; and for analysts sanity-checking a query before running it against production. All parsing and joining run locally; the CSV you paste here never leaves your browser.

Free to use. Works in your browser. No signup, no login.

Related tools

SQL JOIN Visualizer

How to use

About this tool

You may also like

SQL Formatter

SQL Minifier

SQL IN Clause Builder

CSV to SQL Converter

JSON to SQL Converter

Regex Tester