codipry.

Keyboard shortcuts

Use Ctrl on Windows/Linux or Command on macOS. Shortcuts respect focused text fields.

Ctrl/⌘ K
Open or close tool search
?
Open this reference outside text inputs
Escape
Close the active dialog
Ctrl/⌘ S
Save the current Playground project
Ctrl/⌘ Enter
Run the Playground preview
Tab
Move between controls; inside code typing, insert two spaces
Shift Tab
Move to the previous control

Monaco also provides its own command palette. Browser and operating-system shortcuts can take priority.

Start creating
Frontend PlaygroundcodeResponsive LabcodeGradient GeneratordesignBox Shadow GeneratordesignText Shadow GeneratordesignBorder Radius GeneratordesignFlexbox GeneratordesignCSS Grid GeneratordesignAnimation GeneratordesignGlassmorphism GeneratordesignClip Path GeneratordesignFluid Type GeneratordesignColor StudiodesignGit Command BuildergitGit VisualizergitMerge vs. RebasegitSQL Joins VisualizerdatabaseSQL Clause ExplorerdatabaseDatabase RelationshipsdatabaseSQL FormatterdatabaseSQL PlaygrounddatabaseTyping TestpracticeCode Typing TestpracticeJSON FormattercodeCSV / JSON ConvertercodeText DiffcodeRegex TestercodeEncoding ToolscodeHash GeneratorcodeTimestamp ConvertercodeCSS Transform GeneratordesignCSS Filter GeneratordesignDesign Token ExporterdesignGit Conflict TrainergitSQL Schema Explorerdatabase
Understand the rows behind the result

SQL Playground

Run real PostgreSQL in your browser with PGlite. Your queries stay on your device.

Opening the local SQL workspace…

How to use SQL Playground

SQL describes the result you want. A relational engine chooses how to execute that request. Codipry separates teaching models from real PostgreSQL so you can compare an explanation with an actual query.

  1. Joins Visualizer compares rows by the selected keys and keeps match provenance. Step through pairs or select an output row to highlight both sources. INNER keeps matches; LEFT/RIGHT retain the chosen unmatched side; FULL retains both; CROSS creates every pair. Choose Self join to use one source twice.
  2. Use Edit tables for validated JSON rows, up to 100 per source. JSON null represents SQL NULL; null keys never equal one another. Duplicate keys can multiply output rows, so count pairs rather than assuming one result per source row.
  3. Clause Explorer walks FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT. It is a conceptual logical order; the real planner may execute differently. Its limited operators are teaching controls, not a general SQL parser.
  4. SQL Playground starts real PGlite PostgreSQL only when requested, in a dedicated worker. A workspace opens its own IndexedDB-backed database. Run executes SQL; EXPLAIN shows the engine plan; EXPLAIN ANALYZE executes the statement while collecting measurements.
  5. Queries and a portable database snapshot are saved locally after a successful run. The Data & Storage backup includes saved snapshots. Reset replaces all SQL tables with the original selected dataset and requires confirmation. Keep independent backups before large or destructive queries.

A practical starting point

A left join keeps a person even when the department is missing. Put an optional-side filter in ON when you want to retain unmatched people; a restrictive WHERE condition can remove them.

SELECT e.name, d.name AS department
FROM employees AS e
LEFT JOIN departments AS d
  ON e.department_id = d.id
ORDER BY e.id;

Common mistakes

  • WHERE d.name = ... after a LEFT JOIN excludes NULL-extended rows. The location of a predicate can change the meaning of an outer join.
  • COUNT(*) counts rows, while COUNT(column) ignores NULL values. A join with duplicate keys can increase counts unless you group deliberately.
  • Without ORDER BY, a result has no guaranteed presentation order. Add a stable order before relying on LIMIT.
  • A 1,000-row display cap limits the table shown, not all work performed by PostgreSQL. Queries have a statement timeout and worker watchdog; expensive queries can still use significant memory. Stop/restart the worker after a timeout.
  • Opening the same persisted database concurrently is unsafe; supported browsers use a Web Lock to restrict a workspace to one active tab.

Frequently asked questions

Is this a pretend SQL engine?

The joins and clauses pages are labeled teaching models. SQL Playground runs actual PostgreSQL through PGlite/WASM; its EXPLAIN output comes from that engine.

Does a SQL query leave my device?

No. SQL runs in a worker in this browser. Only packaged application/WASM assets are fetched. Optional analytics never contains SQL or query results.

What does a backup include?

Workspace records include query text, sample schema, progress and the most recently saved compressed database snapshot. Successful ordinary runs save a new snapshot; save manually after EXPLAIN ANALYZE if it changed data.

Will a teaching join match every PostgreSQL feature?

No. The pure model demonstrates equality joins with JSON scalar values and explicit NULL behavior. Collation, coercions, arbitrary predicates and the optimizer belong to the real engine.