diff --git a/demo/index.html b/demo/index.html
index b177742..20782d5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,26 +16,10 @@
     </style>
   </head>
   <body>
-    <h1>Folk Canvas Primitives</h1>
+    <h1>Folk Canvas Demos</h1>
 
     <ul>
-      <li><a href="animated-shapes.html">Animated Shapes</a></li>
-      <li><a href="arrows.html">Arrows</a></li>
-      <li><a href="iframed-arrows.html">Iframed Arrows</a></li>
-      <li><a href="canvasify.html">Canvasify</a></li>
-      <li><a href="collision.html">Collision</a></li>
-      <li><a href="event-propagator.html">Event propagator</a></li>
-      <li><a href="ink.html">Ink</a></li>
-      <li><a href="maps.html">Maps</a></li>
-      <li><a href="music.html">Music</a></li>
-      <li><a href="perf.html">Perf</a></li>
-      <li><a href="shapes.html">Shapes</a></li>
-      <li><a href="spreadsheet.html">Spreadsheet</a></li>
-      <li><a href="spreadsheet-graph.html">Spreadsheet Graph</a></li>
-      <li><a href="spreadsheet-propagator.html">Spreadsheet Propagator</a></li>
-      <li><a href="wiggly.html">Wiggly</a></li>
-      <li><a href="semantic-zoom.html">Semantic Zoom</a></li>
-      <!-- <li><a href="chains-of-thought/index.html">Chains of thought</a></li> -->
+      {{ LINKS }}
     </ul>
   </body>
 </html>
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index 13ba4fd..5f3fffe 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,18 +1,39 @@
 import { resolve } from 'node:path';
 import { readdirSync } from 'node:fs';
-import { defineConfig } from 'vite';
+import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
+
+const files: string[] = readdirSync(__dirname).filter((file) => file.endsWith('.html'));
+
+const input: Record<string, string> = files.reduce((acc, file) => {
+  acc[file.replace('.html', '')] = resolve(__dirname, file);
+  return acc;
+}, {} as Record<string, string>);
+
+const linkGenerator = (): Plugin => {
+  return {
+    name: 'link-generator',
+    transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) {
+      if (!ctx.filename.endsWith('index.html')) return;
+
+      const links = files
+        .filter((file) => !file.includes('index'))
+        .sort()
+        .map((file) => {
+          const title = file.replace('.html', '').replaceAll('-', ' ');
+          return `<li><a href="${file}">${title}</a></li>`;
+        })
+        .join('\n');
+
+      return html.replace('{{ LINKS }}', links);
+    },
+  };
+};
 
 export default defineConfig({
+  plugins: [linkGenerator()],
   build: {
     target: 'esnext',
-    rollupOptions: {
-      input: readdirSync(__dirname)
-        .filter((file) => file.endsWith('.html'))
-        .reduce((acc, file) => {
-          acc[file.replace('.html', '')] = resolve(__dirname, file);
-          return acc;
-        }, {} as Record<string, string>),
-    },
+    rollupOptions: { input },
     modulePreload: {
       polyfill: false,
     },
