diff --git a/web/sections/PageBuilderPanel.tsx b/web/sections/PageBuilderPanel.tsx
index 2f85ad4..4b0a79d 100644
--- a/web/sections/PageBuilderPanel.tsx
+++ b/web/sections/PageBuilderPanel.tsx
@@ -1017,7 +1017,14 @@ export const PageBuilderPanel = () => {
           has no leading slash — Home's is the empty string, which the proxy resolves to the root. */}
       {/* `reloadToken` moves on every write, which refetches the document AND re-runs `onDocument` —
           so the decoration is redrawn against the sections that now exist. */}
-      <SitePreview port={devPort} path={page.slug} onDocument={onDocument} reloadToken={rendered} />
+      {/* A TEMPLATE is previewed against a real instance — its own slug is not an address. See
+          preview_slug, which the server fills from the first thing the template draws. */}
+      <SitePreview
+        port={devPort}
+        path={page.is_template ? (page.preview_slug ?? page.slug) : page.slug}
+        onDocument={onDocument}
+        reloadToken={rendered}
+      />
 
       <AddSectionDialog
         open={adding}
diff --git a/web/usePages.ts b/web/usePages.ts
index a7e0337..abc03b2 100644
--- a/web/usePages.ts
+++ b/web/usePages.ts
@@ -19,6 +19,14 @@ export type Page = {
    * place to learn — and marked so nothing offers to rename it, reorder it or put it in a menu.
    */
   is_template?: boolean;
+  /**
+   * A real page to preview a template against — `collections/70s`.
+   *
+   * A template has no page of its own, so previewing its own slug loaded `/collection` and got a 404
+   * in the frame while the same arrangement rendered perfectly in a tab. Null when there is nothing
+   * for it to draw yet, which shows as an empty preview rather than a broken one.
+   */
+  preview_slug?: string | null;
 };
 
 /**