Skip to content
PondPilot Docs
Blog

Getting Started

This guide will walk you through adding the PondPilot Widget to your webpage.

Basic Usage

Section titled “Basic Usage”

The widget is designed to be “drop-in”. By default, it looks for <pre> elements with the class pondpilot-snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PondPilot Widget Demo</title>
</head>
<body>
    <h1>My SQL Blog</h1>


    <p>Here is an interactive query:</p>


    <!-- 1. Create a container with the target class -->
    <pre class="pondpilot-snippet">
    SELECT * FROM generate_series(1, 5) AS t(n);
    </pre>


    <!-- 2. Load the widget script -->
    <script src="https://unpkg.com/pondpilot-widget"></script>
</body>
</html>

Using with Data Files

Section titled “Using with Data Files”

The widget shines when querying data files like Parquet, CSV, or JSON.

Loading Remote Files

Section titled “Loading Remote Files”

You can query files directly via URL:

SELECT * FROM 'https://example.com/data.parquet' LIMIT 10;

Relative Paths

Section titled “Relative Paths”

The widget automatically resolves relative paths based on the current page URL or a configured baseUrl.

If you have a file sales.parquet in the same directory as your HTML file:

<pre class="pondpilot-snippet">
SELECT * FROM 'sales.parquet';
</pre>

Supported formats include:

  • 'data.parquet'
  • './data.parquet'
  • '/data.parquet'

Bundler Integration

Section titled “Bundler Integration”

If you are using a modern JavaScript framework or bundler:

  1. Install the package:

    Terminal window
    npm install pondpilot-widget

  2. Import it:

    import 'pondpilot-widget';

    The import automatically registers window.PondPilot and runs the auto-initializer (unless disabled).

Keyboard Shortcuts

Section titled “Keyboard Shortcuts”
  • Ctrl + Enter (or Cmd + Enter on Mac): Run the current query when the editor is focused.

Next Steps

Section titled “Next Steps”