Make every SQL example a playground.

Transform static SQL into interactive DuckDB sessions you can embed in documentation, blog posts, product tours, and workshops—no servers, no setup, only fun.

View on GitHub Install via npm
  • 🎨 Custom theme authoring with full font and color control.
  • ⚡ Init and reset queries for automated setup and teardown.
  • 📡 Event-driven results API for building custom visualizations.
1.4.0 Latest widget release
DuckDB 1.31.1 Bundled WASM runtime
Zero backend Everything stays in-browser 
SELECT
    o_orderstatus AS status,
    COUNT(*) AS total_orders,
    ROUND(AVG(o_totalprice), 2) AS avg_value
FROM 'https://shell.duckdb.org/data/tpch/0_01/parquet/orders.parquet'
GROUP BY status
ORDER BY total_orders DESC;
Instant results Runs DuckDB entirely in your browser
Drop-in ready Add a class and you're done
Trusted by developers for
Why PondPilot Widget

Ship interactive SQL stories without provisioning anything.

PondPilot Widget wraps the power of DuckDB WASM in a tiny package that drops into any page. It keeps queries local, renders beautiful editors, and makes sharing analytical narratives delightful.

🦆

DuckDB in the browser

Run full SQL analytics locally with the latest DuckDB 1.31.1 runtime—no round trips, no latency.

✨

Polished UX out of the box

Responsive editors, syntax highlighting, keyboard shortcuts, and light/dark theming tuned for docs and blogs.

🎨

Custom theme authoring

Create fully custom themes with your own fonts, colors, and sizes. Perfect for matching your brand.

⚡

Init and reset queries

Run setup SQL once per page and optional cleanup SQL whenever the editor resets. Perfect for data prep.

📡

Event-driven results

Listen to the pondpilot:results event to build custom visualizations, charts, and maps from query data.

📦

Zero backend required

CDN-friendly, CSP-ready, and only ~22KB. Works anywhere static HTML runs, from Markdown to Next.js.

Quick start

Give any <pre> superpowers in under a minute.

PondPilot auto-detects marked snippets and turns them into interactive notebooks on load. Prefer full control? Instantiate widgets programmatically and share a DuckDB instance across them.

  1. 01
    Load the script Use the CDN for instant demos or npm/yarn for bundlers.
  2. 02
    Tag your SQL Apply the pondpilot-snippet class to any <pre>.
  3. 03
    Optionally configure Toggle theming, branding, or provide your own DuckDB instance.
CDN unpkg.com 
<script src="https://unpkg.com/pondpilot-widget@1.4.0"></script>
<pre class="pondpilot-snippet">
SELECT 'Hello DuckDB' AS greeting;
</pre>
Programmatic init Docs 
import 'pondpilot-widget';

const el = document.querySelector('#report');
const dbPromise = window.createDuckDB?.();

new PondPilot.Widget(el, {
  theme: 'dark',
  duckdbInstance: dbPromise,
  showPoweredBy: false
});
Themes

Paint the widget to match your brand.

Start from a preset or author your own palette with full control over colors, typography, and syntax tokens.

Midnight Neon

Synthwave-inspired dark mode with electric blues and glowing controls.

SELECT
  'Midnight Neon' AS theme,
  'Electric glow for night mode' AS vibe;

Sunset Sorbet

Warm oranges and soft browns for a welcoming editorial feel.

SELECT
  'Sunset Sorbet' AS theme,
  'Citrus gradients meet code' AS flavor;

Retro Terminal

IBM Plex Mono, neon greens, and amber accents for a vintage terminal aesthetic.

SELECT
  'Retro Terminal' AS theme,
  'CRT glow with modern ergonomics' AS energy;

Browse the theme authoring guide for the full token list and deeper customization tips.

What's new in 1.4.0

Custom themes, init queries, and event-driven results.

The November 2025 release brings powerful customization and integration features. Author fully custom themes, automate data setup with init queries, and build visualizations with structured result events.

  • 🎨 Theme authoring API with full control over fonts, colors, and sizes.
  • ⚡ Init and reset queries for automated setup and teardown workflows.
  • 📡 pondpilot:results event emits structured row data for custom visualizations.
  • ⌨️ Keyboard shortcut (Ctrl/Cmd+Enter) to execute queries directly from the editor.
  • 🧪 Vitest test suite and React/Vue integration examples.
Read the changelog See the docs

Listen to query results

React to query results with the new pondpilot:results event. Perfect for building custom charts, maps, or any data visualization alongside your interactive SQL. 

widget.addEventListener('pondpilot:results', (e) => {
  const { rows, columns } = e.detail;

  // Build a chart, update a map, etc.
  updateVisualization(rows, columns);
});

// Or with init queries
new PondPilot.Widget(el, {
  initQuery: `CREATE TABLE data AS
              SELECT * FROM 'data.parquet';`,
  resetQuery: 'DROP TABLE IF EXISTS data;'
});

Enables powerful data storytelling with custom visualizations.

Works everywhere

From Markdown to modern frameworks.

Drop the widget into static sites, React, Vue, or your favorite docs stack—no build-step gymnastics required.

Markdown & docs

Add one script tag to Docusaurus, VitePress, Astro, or a plain HTML export and you're live.

// docusaurus.config.js
module.exports = {
  scripts: ['https://unpkg.com/pondpilot-widget@1.4.0']
};

React & Next.js

Import the package once, then wrap snippets in lightweight components for live tutorials.

import { useEffect, useRef } from 'react';
import 'pondpilot-widget';

export function SQLPlayground({ sql }) {
  const ref = useRef();
  useEffect(() => {
    const widget = new PondPilot.Widget(ref.current);
    return () => widget.destroy();
  }, []);
  return <pre ref={ref} className="pondpilot-snippet">{sql}</pre>;
}

Workshops & slides

Embed interactive SQL directly inside slides or LMS content to keep labs engaging.

<section data-auto-animate>
  <h2>Run the query</h2>
  <pre class="pondpilot-snippet">SELECT * FROM attendees;</pre>
</section>

Ready to make your SQL glow?

Install the PondPilot Widget, point it at your code blocks, and give your readers a playground they won't forget. No backend, no waiting, just instant insight.

Grab the CDN build npm install pondpilot-widget