PondPilot Widget - Interactive SQL in the Browser

Quick Start

1

Include the Script

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

2

Add the Class

<pre class="pondpilot-snippet">
SELECT 'Hello World' as greeting;
</pre>

3

That's It!

Your SQL code blocks are now interactive. Users can modify and run queries directly in the browser.

Try It Live

Click "Run" on any of the examples below to see the widget in action. Feel free to modify the queries and experiment!

Basic Query

Start with a simple SELECT statement:

SELECT
    'Hello from PondPilot Widget!' as greeting,
    CURRENT_DATE::STRING as today,
    42 as answer_to_everything;

Working with Data

Create tables and analyze data entirely in the browser:

-- Create a sample products table
CREATE TABLE products AS
SELECT * FROM (VALUES
    ('Laptop', 'Electronics', 999.99, 50),
    ('Mouse', 'Electronics', 29.99, 200),
    ('Desk', 'Furniture', 299.99, 25),
    ('Chair', 'Furniture', 199.99, 40),
    ('Monitor', 'Electronics', 349.99, 75)
) AS t(name, category, price, stock);

-- Analyze inventory by category
SELECT
    category,
    COUNT(*) as product_count,
    ROUND(AVG(price), 2) as avg_price,
    SUM(stock) as total_stock,
    ROUND(SUM(price * stock), 2) as inventory_value
FROM products
GROUP BY category
ORDER BY inventory_value DESC;

Advanced Analytics

Window functions, CTEs, and complex queries work seamlessly:

-- Create sales data
CREATE TABLE daily_sales AS
SELECT
    date,
    ROUND(RANDOM() * 1000 + 500, 2) as revenue
FROM generate_series(
    DATE '2025-01-01',
    DATE '2025-01-14',
    INTERVAL 1 DAY
) AS t(date);

-- Calculate moving averages and growth
SELECT
    date::STRING as date,
    revenue,
    ROUND(AVG(revenue) OVER (
        ORDER BY date
        ROWS BETWEEN 2 PRECEDING AND CURRENT ROW
    ), 2) as ma_3day,
    ROUND(revenue - LAG(revenue) OVER (ORDER BY date), 2) as daily_change,
    ROUND(100.0 * (revenue - LAG(revenue) OVER (ORDER BY date)) /
          LAG(revenue) OVER (ORDER BY date), 1) as pct_change
FROM daily_sales
ORDER BY date;

External Data Sources

Query remote CSV and Parquet files directly:

-- Query a remote Parquet file
SELECT
  o_orderstatus,
  COUNT(*) AS total_orders,
  ROUND(AVG(o_totalprice), 2) AS avg_order_value
FROM
  'https://shell.duckdb.org/data/tpch/0_01/parquet/orders.parquet'
GROUP BY
  o_orderstatus
ORDER BY
  total_orders DESC;

Installation

CDN

Quick and easy - just include the script tag:

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

NPM

For modern build systems:

npm install pondpilot-widget

Yarn

Alternative package manager:

yarn add pondpilot-widget

Configuration

Customize the widget's appearance and behavior:

// Set theme
window.PondPilot.config.theme = 'dark'; // or 'light'

// Hide powered by footer
window.PondPilot.config.showPoweredBy = false;

// Set custom height
window.PondPilot.config.height = '400px';

// Enable syntax highlighting
window.PondPilot.config.highlightSyntax = true;

Perfect For

Educational Content

Teach SQL with hands-on, interactive examples

Documentation

Provide runnable examples in your technical docs

Technical Blogs

Engage readers with interactive data analysis

Data Portfolios

Showcase your SQL skills interactively

Workshops

Interactive SQL training and tutorials

Code Examples

Live demonstrations in presentations

PondPilot Widget Interactive SQL in the Browser