Skip to content

Configuration

You can configure the widget globally via JavaScript or per-instance via HTML data attributes.

Set global defaults before loading the widget script using window.PONDPILOT_CONFIG.

<script>
window.PONDPILOT_CONFIG = {
theme: 'dark',
autoInit: true,
baseUrl: 'https://my-data-server.com/assets',
initQueries: ["INSTALL httpfs;", "LOAD httpfs;"]
};
</script>
<script src="https://unpkg.com/pondpilot-widget"></script>
OptionTypeDefaultDescription
selectorstring".pondpilot-snippet, ..."CSS selector for elements to auto-initialize.
baseUrlstringhttps://app.pondpilot.ioBase URL for resolving relative file paths.
themestring"light"Default theme ("light", "dark", "auto", or custom).
autoInitbooleantrueAutomatically initialize widgets on DOM ready.
editablebooleantrueAllow users to edit the SQL code.
showPoweredBybooleantrueShow the “Powered by PondPilot” footer.
initQueriesstring[][]SQL statements to run once when DuckDB loads (e.g., loading extensions).
resetQueriesstring[][]SQL statements to run every time the “Reset” button is clicked.

Override configuration for specific widgets using data- attributes on the <pre> element.

<pre
class="pondpilot-snippet"
data-theme="dark"
data-editable="false"
data-base-url="https://cdn.example.com"
data-init-queries='["LOAD spatial;"]'
>
SELECT * FROM 'maps/world.parquet';
</pre>
AttributeValue ExampleDescription
data-theme"dark", "sunset"Override the theme.
data-base-url"https://cdn.com"Override base URL for file paths.
data-editable"false"Disable editing for this snippet.
data-show-powered-by"false"Hide the branding footer.
data-init-queriesJSON array or stringSpecific init queries for this widget.
data-reset-queriesJSON array or stringSpecific reset queries for this widget.

Use initQueries to load DuckDB extensions or set up the environment before any user queries run. These run once per page load (or per shared DuckDB instance).

window.PONDPILOT_CONFIG = {
initQueries: [
"INSTALL httpfs;",
"LOAD httpfs;",
"SET s3_region='us-east-1';"
]
};

Use resetQueries to clean up state when a user clicks “Reset”. This is useful if your example creates tables that need to be dropped to run the example again cleanly.

<pre
class="pondpilot-snippet"
data-reset-queries='["DROP TABLE IF EXISTS my_table;"]'
>
CREATE TABLE my_table AS SELECT 1;
SELECT * FROM my_table;
</pre>