diff --git a/website/public/playground/playground.js b/website/public/playground/playground.js
index d78ceb4d0..1bd592748 100644
--- a/website/public/playground/playground.js
+++ b/website/public/playground/playground.js
@@ -4,7 +4,7 @@
import { DUCKDB_DIR, DUCKDB_WASM_BYTES } from './duckdb-version.js';
import { ENGINE_DIR, ENGINE_WASM_BYTES } from './engine-version.js';
-import { CAPTIONS, EXAMPLES, ROWS, SCHEMA } from './examples.js';
+import { CAPTIONS, EXAMPLE_GROUPS, EXAMPLES, ROWS, SCHEMA, stopLabel } from './examples.js';
import { escape, rendered, resultTable, underlined } from './spans.js';
const here = (path) => new URL(path, import.meta.url).href;
@@ -426,6 +426,13 @@ document.addEventListener('click', (event) => {
});
sqlBox.addEventListener('input', () => {
showCaption(null);
+ // Edited SQL is no longer the example, so neither the chip nor the link names it any more.
+ if (activeExample) {
+ setActiveExample(null);
+ const url = new URL(location.href);
+ url.searchParams.delete('example');
+ history.replaceState(null, '', url);
+ }
schedule();
});
schemaBox.addEventListener('input', schedule);
@@ -436,11 +443,45 @@ $('#pg-load-policy').addEventListener('click', async () => {
});
rowsBox.addEventListener('input', () => latest && duckdb && schedule());
sqlBox.addEventListener('scroll', () => (marks.scrollTop = sqlBox.scrollTop));
-$('#pg-example').addEventListener('change', (event) => {
- if (!EXAMPLES[event.target.value]) return;
- sqlBox.value = EXAMPLES[event.target.value];
- showCaption(event.target.value);
- event.target.value = '';
+
+// The example chips: one click loads an example and runs it, and the link names it
+// (`?example=
`) so it can be shared.
+const examples = EXAMPLE_GROUPS.flatMap((group) => group.examples);
+const examplesBox = $('#pg-examples');
+examplesBox.innerHTML = EXAMPLE_GROUPS.map(
+ (group) =>
+ `${escape(group.title)} ${escape(group.tagline)}
` +
+ '
' +
+ group.examples
+ .map(
+ (example) =>
+ ``,
+ )
+ .join('') +
+ '