Interactive SQL Playgrounds

Transform static SQL into interactive DuckDB sessions. Embed in documentation, blogs, and workshops. Zero backend required.

Get Started View on npm

-- Try it! Edit and run with Ctrl+Enter
SELECT
  species,
  COUNT(*) as count,
  AVG(weight_kg) as avg_weight
FROM (
  VALUES
    ('Mallard', 1.2),
    ('Mallard', 1.1),
    ('Wood Duck', 0.9),
    ('Teal', 0.4),
    ('Mallard', 1.3),
    ('Wood Duck', 0.8)
) AS ducks(species, weight_kg)
GROUP BY species
ORDER BY count DESC;

Features

Built for developers and educators

Everything you need to add interactive SQL to your content

DuckDB Powered

Full SQL analytics with the latest DuckDB runtime - no server latency

Custom Theming

Complete control over fonts, colors, and syntax highlighting with built-in themes

Init/Reset Queries

Automated setup and teardown workflows for data preparation

Event-Driven Results

pondpilot:results event emits structured row data for custom visualizations

Keyboard Shortcuts

Ctrl/Cmd+Enter executes queries directly - familiar developer experience

Zero Backend

Lightweight, CSP-ready, works on any static HTML platform

Themes

Beautiful built-in themes

Choose from pre-built themes or customize your own

Midnight Neon

Dark synthwave aesthetic with electric blues and cyan accents

SELECT 'Midnight Neon' as theme, 42 as answer;

Sunset Sorbet

Light theme with warm oranges and soft browns

SELECT 'Sunset Sorbet' as theme, 42 as answer;

Retro Terminal

Vintage terminal with IBM Plex Mono, neon green and amber

SELECT 'Retro Terminal' as theme, 42 as answer;

Quick Start

CDN / Script Tag

<script src="https://unpkg.com/pondpilot-widget@1.4.0"></script>

<pre class="pondpilot-snippet">
SELECT 'Hello DuckDB' AS greeting;
</pre>

Add the script tag and mark your SQL blocks with the pondpilot-snippet class.

npm / Programmatic

npm install pondpilot-widget

Then use programmatically:

import 'pondpilot-widget';

const el = document.querySelector('#report');
new PondPilot.Widget(el, {
  theme: 'dark',
  duckdbInstance: dbPromise,
  showPoweredBy: false
});

Frameworks

Works everywhere

Drop it into any platform or framework

Documentation

Docusaurus, VitePress, Astro, and any Markdown-based docs platform.

React & Next.js

Import as an ES module and use programmatically in your components.

Workshops

Create interactive SQL workshops and presentation tools.

Static Sites

Plain HTML with a single script tag - no build step required.

Ready to add interactive SQL?

Start embedding powerful SQL examples in minutes. Free, open-source, and privacy-focused.

Get Started View on npm

Part of the PondPilot Flock