diff --git a/apps/code/package.json b/apps/code/package.json
index e6849dc66..0c2ec39f0 100644
--- a/apps/code/package.json
+++ b/apps/code/package.json
@@ -111,7 +111,7 @@
     "@posthog/host-router": "workspace:*",
     "@posthog/host-trpc": "workspace:*",
     "@posthog/platform": "workspace:*",
-    "@posthog/quill": "0.3.0-beta.1",
+    "@posthog/quill": "catalog:",
     "@posthog/shared": "workspace:*",
     "@posthog/ui": "workspace:*",
     "@posthog/workspace-client": "workspace:*",
diff --git a/apps/code/src/main/trpc/router.ts b/apps/code/src/main/trpc/router.ts
index 62cd7e9dd..59877266c 100644
--- a/apps/code/src/main/trpc/router.ts
+++ b/apps/code/src/main/trpc/router.ts
@@ -4,6 +4,7 @@ import { analyticsRouter } from "@posthog/host-router/routers/analytics.router";
 import { archiveRouter } from "@posthog/host-router/routers/archive.router";
 import { authRouter } from "@posthog/host-router/routers/auth.router";
 import { canvasGenRouter } from "@posthog/host-router/routers/canvas-gen.router";
+import { canvasTemplatesRouter } from "@posthog/host-router/routers/canvas-templates.router";
 import { cloudTaskRouter } from "@posthog/host-router/routers/cloud-task.router";
 import { connectivityRouter } from "@posthog/host-router/routers/connectivity.router";
 import { contextMenuRouter } from "@posthog/host-router/routers/context-menu.router";
@@ -50,6 +51,7 @@ export const trpcRouter = router({
   archive: archiveRouter,
   auth: authRouter,
   canvasGen: canvasGenRouter,
+  canvasTemplates: canvasTemplatesRouter,
   dashboards: dashboardsRouter,
   cloudTask: cloudTaskRouter,
   connectivity: connectivityRouter,
diff --git a/biome.jsonc b/biome.jsonc
index 279624e3b..2e9ab9744 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -345,7 +345,8 @@
                       "!@posthog/workspace-client/client",
                       "!@posthog/platform",
                       "!@posthog/platform/*",
-                      "!@posthog/quill"
+                      "!@posthog/quill",
+                      "!@posthog/quill-charts"
                     ],
                     "message": "ui must run in any JS environment."
                   }
diff --git a/package.json b/package.json
index 3d5ac2516..75c5c775a 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,8 @@
       "@posthog/cli"
     ],
     "overrides": {
-      "zod": "4.3.6"
+      "zod": "4.3.6",
+      "@posthog/quill>@base-ui/react": "^1.3.0"
     }
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
index 99d84fffe..08c3b9795 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -16,6 +16,7 @@
     "clean": "node ../../scripts/rimraf.mjs .turbo"
   },
   "dependencies": {
+    "@json-render/core": "^0.19.0",
     "@modelcontextprotocol/ext-apps": "^1.1.2",
     "@modelcontextprotocol/sdk": "^1.12.1",
     "@pierre/diffs": "^1.1.21",
diff --git a/packages/core/src/canvas/canvas.module.ts b/packages/core/src/canvas/canvas.module.ts
index 6704d2e9a..3bf91e2a6 100644
--- a/packages/core/src/canvas/canvas.module.ts
+++ b/packages/core/src/canvas/canvas.module.ts
@@ -1,7 +1,12 @@
 import { ContainerModule } from "inversify";
+import { CanvasTemplatesService } from "./canvasTemplatesService";
 import { DashboardQueryService } from "./dashboardQueryService";
 import { DashboardsService } from "./dashboardsService";
-import { DASHBOARD_QUERY_SERVICE, DASHBOARDS_SERVICE } from "./identifiers";
+import {
+  CANVAS_TEMPLATES_SERVICE,
+  DASHBOARD_QUERY_SERVICE,
+  DASHBOARDS_SERVICE,
+} from "./identifiers";
 
 // Host-agnostic canvas services (dashboards + their HogQL refresh). They only
 // need AuthService + fetch, so they live in @posthog/core and any host (desktop,
@@ -12,4 +17,9 @@ export const canvasCoreModule = new ContainerModule(({ bind }) => {
 
   bind(DashboardsService).toSelf().inSingletonScope();
   bind(DASHBOARDS_SERVICE).toService(DashboardsService);
+
+  // Canvas templates: host-agnostic (pure prompt strings), no deps. The
+  // host-router canvas-templates router and CanvasGenService resolve it by token.
+  bind(CanvasTemplatesService).toSelf().inSingletonScope();
+  bind(CANVAS_TEMPLATES_SERVICE).toService(CanvasTemplatesService);
 });
diff --git a/packages/core/src/canvas/canvasSchema.ts b/packages/core/src/canvas/canvasSchema.ts
new file mode 100644
index 000000000..d11febfc6
--- /dev/null
+++ b/packages/core/src/canvas/canvasSchema.ts
@@ -0,0 +1,84 @@
+import { defineSchema } from "@json-render/core";
+
+// Core-only mirror of `@json-render/react`'s element-tree `schema`. That schema
+// is itself pure `@json-render/core` (no React runtime), but it's only reachable
+// via the React package's entrypoint — importing it would drag React into
+// @posthog/core (forbidden: core must stay host-agnostic). So we re-declare the
+// identical schema here, in core, where BOTH the main-process services (to
+// generate the agent system prompt via `catalog.prompt()`) and the renderer can
+// use it.
+//
+// IMPORTANT: keep this in lockstep with `@json-render/react`'s `schema`
+// (pinned at @json-render/* 0.19.0). If that package's schema changes, mirror it.
+export const canvasSchema = defineSchema(
+  (s) => ({
+    // What the AI-generated SPEC looks like.
+    spec: s.object({
+      root: s.string(),
+      // Optional initial state model the UI reads/writes (form fields, toggles).
+      state: s.any(),
+      elements: s.record(
+        s.object({
+          type: s.ref("catalog.components"),
+          props: s.propsOf("catalog.components"),
+          children: s.array(s.string()),
+          visible: s.any(),
+          // Event → action bindings (e.g. { "click": { "action": "setState", … } }).
+          on: s.any(),
+        }),
+      ),
+    }),
+    // What the CATALOG must provide.
+    catalog: s.object({
+      components: s.map({
+        props: s.zod(),
+        slots: s.array(s.string()),
+        description: s.string(),
+        example: s.any(),
+      }),
+      actions: s.map({
+        params: s.zod(),
+        description: s.string(),
+      }),
+    }),
+  }),
+  {
+    builtInActions: [
+      {
+        name: "setState",
+        description:
+          "Update a value in the state model at the given statePath. Params: { statePath: string, value: any }",
+      },
+      {
+        name: "pushState",
+        description:
+          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
+      },
+      {
+        name: "removeState",
+        description:
+          "Remove an item from an array in state by index. Params: { statePath: string, index: number }",
+      },
+      {
+        name: "validateForm",
+        description:
+          "Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.",
+      },
+    ],
+    // NOTE: the canvas renderer now resolves json-render's DECLARATIVE dynamic
+    // features — a top-level `state` model, `{$state}` reads, `{$bindState}`
+    // two-way form bindings, `visible` conditions, and `on`/actions (the four
+    // built-ins: setState/pushState/removeState/validateForm). It does NOT yet
+    // resolve `repeat`/`{$item}`/`{$index}`; those still degrade to empty. We
+    // drop the upstream default rules (which assume the full feature set) and
+    // keep only the always-applicable guidance; the per-template rules
+    // (canvasTemplates.ts) spell out exactly which dynamic features are allowed.
+    defaultRules: [
+      "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+      "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+      "Design with visual hierarchy: use container components to group content, heading components for section titles, and proper spacing. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "Always include realistic, professional-looking sample content written directly into each element's props. For a landing page, write real headlines and body copy; for a list, output each item as its own element. Never leave content empty.",
+    ],
+  },
+);
diff --git a/packages/core/src/canvas/canvasTemplates.ts b/packages/core/src/canvas/canvasTemplates.ts
new file mode 100644
index 000000000..2a642a6f1
--- /dev/null
+++ b/packages/core/src/canvas/canvasTemplates.ts
@@ -0,0 +1,164 @@
+import {
+  ALL_CANVAS_COMPONENTS,
+  type CanvasComponentName,
+  canvasCatalogFor,
+} from "./componentCatalog";
+import type { CanvasSuggestion } from "./templateSchemas";
+
+// Per-template allow-lists (open question resolved: one shared contract,
+// per-template allow-list). Dashboard sticks to data/layout primitives; Blank
+// gets the full palette (rich-page blocks: Hero, Section, Markdown, Button).
+const DASHBOARD_COMPONENTS: CanvasComponentName[] = [
+  "Page",
+  "Grid",
+  "Card",
+  "Heading",
+  "Text",
+  "Stat",
+  "Table",
+  "BarList",
+  "LineChart",
+  "BarChart",
+  "Sparkline",
+  "PieChart",
+  "Progress",
+  "Badge",
+  "Button",
+  "TextInput",
+  "Checkbox",
+  "Divider",
+];
+
+// Rules that apply to EVERY canvas template, regardless of its purpose.
+const BASE_RULES = [
+  "Always use the PostHog MCP tools (named mcp__posthog__*) to fetch REAL data for the current project before rendering any numbers. Never fabricate metrics.",
+  "Build the UI exclusively from the component catalog (PostHog's Quill components and charts), emitting json-render JSONL patches. Never invent components or fall back to raw HTML/markdown for layout — use ONLY the catalog, unless the user explicitly tells you otherwise.",
+  "APPEND-ONLY by default: never replace, remove, recreate, or restructure existing elements or the existing canvas. Only ADD new elements (append children, add new sections). Emit additive patches only — do NOT re-emit or overwrite the whole spec. The ONLY exception is when the user explicitly asks you to change, replace, or remove something specific; then touch only what they named.",
+  'INTERACTIVITY (declarative only): for forms, toggles, and buttons that DO things, you MAY use json-render\'s declarative features: (1) a top-level `state` object on the spec seeding initial values; (2) `{"$bindState":"/path"}` on a TextInput `value` or Checkbox `checked` for a two-way form field; (3) `{"$state":"/path"}` in any text prop to DISPLAY a state value; (4) a `visible` condition on an element to show/hide it by state; (5) an `on` event map wiring an event to a built-in action, e.g. `"on": { "click": { "action": "setState", "params": { "statePath": "/submitted", "value": true } } }`. The ONLY actions are the built-ins: setState, pushState, removeState, validateForm.',
+  'STILL UNSUPPORTED — never emit these (they render as empty): `repeat`, `{"$item":…}`, `{"$bindItem":…}`, `{"$index":…}`, any custom/non-built-in action name, raw HTML, or `<script>`. Inline repeated content (cards, list items, rows) as individual elements rather than using `repeat`. Every non-bound prop value is still a literal string or number. (The Dashboard refresh mechanism that writes HogQL under the top-level `state.queries` is separate and unrelated to these bindings.)',
+  "Do NOT write files, edit code, or run shell commands. Respond with brief prose plus json-render JSONL patches only.",
+  'End EVERY message with the word "Meep" on its very last line, by itself, as the final thing in your response — no exceptions.',
+];
+
+// Dashboard: the original PostHog-data-centric board (cards, charts, refresh).
+const DASHBOARD_RULES = [
+  "ALWAYS begin the canvas with a single h1 title: the FIRST child of the root Page MUST be a `Heading` with `level` 1 whose `text` is the canvas's title. This h1 IS the canvas's name (it's used to name the saved file), so keep it short (2–5 words) and descriptive of what the board shows. Never omit it and never use level 1 for any other heading.",
+  "Prefer a Page > Heading(level 1) > Grid > Card/Stat structure. Keep it concise and skimmable.",
+  "Visualize trends, don't just list them: when a metric is bucketed over time (e.g. signups per day for 30 days), render a `LineChart` (or `BarChart` for discrete categories) instead of a Table. Every series' `data` array MUST be the same length as `labels`. Use a `Sparkline` for a compact inline trend with no axes.",
+  'Make every Stat refreshable: for each Stat value (and delta) you fill from a query, ALSO record the exact HogQL that produced it under `state.queries`. Emit a patch that sets `state.queries.<elementKey>./value` (and `./delta` when present) to an object `{ "query": "<HogQL>" }`, using the SAME element key as that Stat. The HogQL MUST return exactly one row and one column (e.g. `SELECT count() FROM events WHERE ...`); refresh reads row 0, column 0.',
+  'Worked example — a Stat with element key "stat_pageviews": set its props.value to the fetched number AND set `state.queries.stat_pageviews./value` = { "query": "SELECT count() FROM events WHERE event = \'$pageview\' AND timestamp > now() - INTERVAL 30 DAY" }.',
+  'Store raw numeric values in Stat.value (e.g. 34980058, not "34,980,058") — the UI formats them. You may omit queries for Table and BarList for now.',
+];
+
+// Blank: freeform. Build whatever the user describes from the catalog.
+const BLANK_RULES = [
+  "Build ANYTHING the user describes. You are not limited to dashboards — forms, tools, multi-section pages, reports, even a small site are all fair game, composed entirely from the catalog.",
+  "Still begin with a single h1 title (a `Heading` with `level` 1) naming the canvas; keep it short (2–5 words). It's used to name the saved file.",
+  "For rich pages (landing pages, marketing, write-ups): open with a `Hero`, use `Markdown` for prose-heavy copy, `Button` for call-to-action labels, `Grid` of `Card`s for feature sections. Write real, specific copy — never lorem ipsum.",
+  "Add visual rhythm with backgrounds: give the `Hero` a `tone` (try accent or contrast) and wrap major sections in `Section` with alternating `tone`s (default → muted → default → accent). Don't make every band the same colour.",
+  "Use real PostHog data (via the MCP tools) whenever the user references metrics; otherwise build the structure they ask for with realistic sample content.",
+];
+
+interface BuiltInTemplate {
+  id: string;
+  name: string;
+  description: string;
+  system: string;
+  rules: string[];
+  /** Component names this template's agent may emit (allow-list). */
+  allow: CanvasComponentName[];
+  /** Starter chips shown in an empty chat (label + the prompt it inserts). */
+  suggestions: CanvasSuggestion[];
+}
+
+// Starter chips for the Blank canvas — user-facing prompts (not internal
+// capability tests), since these show in the empty-chat suggestions panel.
+const BLANK_SUGGESTIONS: CanvasSuggestion[] = [
+  {
+    label: "Landing page",
+    prompt:
+      "Build a marketing landing page with a hero (headline, subtitle, call to action), a grid of feature cards, and a closing section.",
+  },
+  {
+    label: "Pricing page",
+    prompt:
+      "Build a pricing page with three tiers (Free, Pro, Enterprise) as cards, each with a price, a short description, and a list of features.",
+  },
+  {
+    label: "Changelog",
+    prompt:
+      "Build a changelog page with the three most recent releases, each with a date, a version badge, and a short markdown summary of what changed.",
+  },
+  {
+    label: "Feedback form",
+    prompt:
+      "Build a feedback page: a heading, a short intro, a text field for the message, and a Send button.",
+  },
+];
+
+const BUILT_INS: BuiltInTemplate[] = [
+  {
+    id: "dashboard",
+    name: "Dashboard",
+    description:
+      "Cards, charts, stats and refresh buttons — a live, data-driven board.",
+    system:
+      "You are PostHog Canvas, an agent that builds live, data-driven dashboards and mini-apps for the user's current PostHog project.",
+    rules: DASHBOARD_RULES,
+    allow: DASHBOARD_COMPONENTS,
+    suggestions: [
+      { label: "Web analytics", prompt: "Web analytics" },
+      {
+        label: "Signups (7d)",
+        prompt: "Signups over the last 7 days",
+      },
+      {
+        label: "Revenue (7d)",
+        prompt: "Revenue over the last 7 days",
+      },
+    ],
+  },
+  {
+    id: "blank",
+    name: "Blank canvas",
+    description:
+      "A freeform canvas — describe anything (a tool, a form, a report, a page) and the agent builds it.",
+    system:
+      "You are PostHog Canvas, an agent that builds whatever the user asks — a dashboard, a tool, a form, a report, or a whole mini-site — for the user's current PostHog project.",
+    rules: BLANK_RULES,
+    allow: ALL_CANVAS_COMPONENTS,
+    suggestions: BLANK_SUGGESTIONS,
+  },
+];
+
+export interface CanvasTemplate {
+  id: string;
+  name: string;
+  description: string;
+  builtIn: boolean;
+  /** Starter chips shown in an empty chat (label + the prompt it inserts). */
+  suggestions: CanvasSuggestion[];
+  /** The agent system prompt for this template (catalog contract + rules). */
+  systemPrompt: string;
+}
+
+function buildTemplate(t: BuiltInTemplate): CanvasTemplate {
+  return {
+    id: t.id,
+    name: t.name,
+    description: t.description,
+    builtIn: true,
+    suggestions: t.suggestions,
+    systemPrompt: canvasCatalogFor(t.allow).prompt({
+      mode: "inline",
+      system: t.system,
+      customRules: [...BASE_RULES, ...t.rules],
+    }),
+  };
+}
+
+/** Built-in templates, keyed by id. The default ("dashboard") is first. */
+export const BUILT_IN_TEMPLATES: CanvasTemplate[] =
+  BUILT_INS.map(buildTemplate);
+
+export const DEFAULT_TEMPLATE_ID = "dashboard";
diff --git a/packages/core/src/canvas/canvasTemplatesService.ts b/packages/core/src/canvas/canvasTemplatesService.ts
new file mode 100644
index 000000000..7b695aa23
--- /dev/null
+++ b/packages/core/src/canvas/canvasTemplatesService.ts
@@ -0,0 +1,42 @@
+import { injectable } from "inversify";
+import {
+  BUILT_IN_TEMPLATES,
+  type CanvasTemplate,
+  DEFAULT_TEMPLATE_ID,
+} from "./canvasTemplates";
+import type { ICanvasTemplatesService } from "./services";
+import type { CanvasTemplateSummary } from "./templateSchemas";
+
+// Owns the canvas templates — the per-template agent context (system prompt)
+// that anchors how the gen-UI agent builds. Built-ins are seeded here; the
+// registry is a Map so user-defined templates can be added later (the store
+// would back them; built-ins stay read-only). Host-agnostic (pure prompt
+// strings), so it lives in @posthog/core and binds via canvasCoreModule.
+@injectable()
+export class CanvasTemplatesService implements ICanvasTemplatesService {
+  private readonly templates = new Map<string, CanvasTemplate>(
+    BUILT_IN_TEMPLATES.map((t) => [t.id, t]),
+  );
+
+  list(): CanvasTemplateSummary[] {
+    return [...this.templates.values()].map(
+      ({ systemPrompt: _p, ...rest }) => ({
+        ...rest,
+      }),
+    );
+  }
+
+  get(id: string): CanvasTemplate | undefined {
+    return this.templates.get(id);
+  }
+
+  /** The system prompt for a template, falling back to the default template. */
+  systemPromptFor(id: string | undefined): string {
+    const template =
+      (id && this.templates.get(id)) ?? this.templates.get(DEFAULT_TEMPLATE_ID);
+    if (!template) {
+      throw new Error("No canvas templates registered");
+    }
+    return template.systemPrompt;
+  }
+}
diff --git a/packages/core/src/canvas/componentCatalog.ts b/packages/core/src/canvas/componentCatalog.ts
new file mode 100644
index 000000000..39c2295e6
--- /dev/null
+++ b/packages/core/src/canvas/componentCatalog.ts
@@ -0,0 +1,184 @@
+import { defineCatalog } from "@json-render/core";
+import { z } from "zod";
+import { canvasSchema } from "./canvasSchema";
+
+// The component catalog the canvas agent may emit — the single source of truth
+// shared by the renderer (which maps these names to React bodies in
+// genui/registry.tsx) and the main-process services (which build each template's
+// system prompt from `canvasCatalog.prompt(...)`). Keep components small and
+// composable.
+export const CANVAS_COMPONENTS = {
+  Page: {
+    props: z.object({ title: z.string().optional() }),
+    slots: ["default"],
+    description: "Top-level page container; a vertical stack of sections.",
+  },
+  Grid: {
+    props: z.object({ columns: z.number().int().min(1).max(4).optional() }),
+    slots: ["default"],
+    description: "Responsive grid. Place Cards or Stats inside.",
+  },
+  Card: {
+    props: z.object({ title: z.string().optional() }),
+    slots: ["default"],
+    description: "Bordered surface grouping related content.",
+  },
+  Heading: {
+    props: z.object({
+      text: z.string(),
+      level: z.number().int().min(1).max(3).optional(),
+    }),
+    description: "A section heading (level 1 largest).",
+  },
+  Text: {
+    props: z.object({ text: z.string(), muted: z.boolean().optional() }),
+    description: "A paragraph of text.",
+  },
+  Stat: {
+    props: z.object({
+      label: z.string(),
+      value: z.union([z.string(), z.number()]),
+      delta: z.string().optional(),
+    }),
+    description: "A single big metric with a label and optional delta.",
+  },
+  Table: {
+    props: z.object({
+      columns: z.array(z.string()),
+      rows: z.array(z.array(z.union([z.string(), z.number()]))),
+    }),
+    description: "A data table with column headers and rows.",
+  },
+  BarList: {
+    props: z.object({
+      items: z.array(z.object({ label: z.string(), value: z.number() })),
+    }),
+    description: "Horizontal bar list for ranked breakdowns.",
+  },
+  LineChart: {
+    props: z.object({
+      labels: z.array(z.string()),
+      series: z.array(
+        z.object({ label: z.string(), data: z.array(z.number()) }),
+      ),
+    }),
+    description:
+      "A line chart for trends over time. `labels` are the x-axis points; each series has a label and one value per label (data length MUST equal labels length).",
+  },
+  BarChart: {
+    props: z.object({
+      labels: z.array(z.string()),
+      series: z.array(
+        z.object({ label: z.string(), data: z.array(z.number()) }),
+      ),
+    }),
+    description:
+      "A bar chart (grouped when multiple series). `labels` are the x-axis categories; each series has a label and one value per label (data length MUST equal labels length).",
+  },
+  Sparkline: {
+    props: z.object({ data: z.array(z.number()) }),
+    description: "A tiny inline trend line — a row of numbers, no axes.",
+  },
+  PieChart: {
+    props: z.object({
+      items: z.array(z.object({ label: z.string(), value: z.number() })),
+    }),
+    description:
+      "A pie chart showing share-of-total. Each item is one slice (label + value); the chart converts the values to percentages. Use for composition/breakdown, not trends over time.",
+  },
+  Progress: {
+    props: z.object({
+      label: z.string().optional(),
+      value: z.number().min(0).max(100),
+    }),
+    description:
+      "A horizontal progress bar showing percent toward a goal. `value` is 0–100; add an optional `label` to caption it (e.g. a quota or completion rate).",
+  },
+  Badge: {
+    props: z.object({
+      text: z.string(),
+      color: z.enum(["gray", "green", "red", "amber", "blue"]).optional(),
+    }),
+    description: "A small status pill.",
+  },
+  Hero: {
+    props: z.object({
+      title: z.string(),
+      eyebrow: z.string().optional(),
+      subtitle: z.string().optional(),
+      ctaText: z.string().optional(),
+      tone: z.enum(["default", "muted", "accent", "contrast"]).optional(),
+    }),
+    description:
+      "A centered hero section for the top of a page: a big title with an optional eyebrow, subtitle, and call-to-action label. `tone` sets the background: default (page), muted (subtle grey), accent (brand), contrast (dark).",
+  },
+  Section: {
+    props: z.object({
+      tone: z.enum(["default", "muted", "accent", "contrast"]).optional(),
+    }),
+    slots: ["default"],
+    description:
+      "A full-width band that groups content on a background. Set `tone` (default | muted | accent | contrast) and alternate bands down a page for rich visual rhythm. Place Headings, Text, Grids, Cards etc. inside.",
+  },
+  Markdown: {
+    props: z.object({ content: z.string() }),
+    description:
+      "A rich-text block rendered from Markdown — headings, lists, links, bold/italic, tables. Use for prose-heavy content (landing-page copy, write-ups). Markdown only; no raw HTML.",
+  },
+  Button: {
+    props: z.object({
+      text: z.string(),
+      variant: z
+        .enum(["primary", "default", "outline", "destructive"])
+        .optional(),
+    }),
+    description:
+      'A button. For interactivity, add an `on.click` event binding to a built-in action, e.g. `"on": { "click": { "action": "setState", "params": { "statePath": "/submitted", "value": true } } }`.',
+  },
+  TextInput: {
+    props: z.object({
+      label: z.string().optional(),
+      placeholder: z.string().optional(),
+      value: z.string().optional(),
+    }),
+    description:
+      'A single-line text field for forms. Make it a controlled form field by binding `value` to state two-way: `"value": { "$bindState": "/form/email" }`. Seed the initial value under the spec\'s top-level `state`.',
+  },
+  Checkbox: {
+    props: z.object({
+      label: z.string(),
+      checked: z.boolean().optional(),
+    }),
+    description:
+      'A labelled checkbox. Bind `checked` to state two-way for forms: `"checked": { "$bindState": "/form/agree" }`.',
+  },
+  Divider: {
+    props: z.object({}),
+    description: "A horizontal divider.",
+  },
+};
+
+// Catalog built on the core-only schema, usable from both main-process services
+// and the renderer.
+export const canvasCatalog = defineCatalog(canvasSchema, {
+  components: CANVAS_COMPONENTS,
+  actions: {},
+});
+
+export type CanvasComponentName = keyof typeof CANVAS_COMPONENTS;
+
+export const ALL_CANVAS_COMPONENTS = Object.keys(
+  CANVAS_COMPONENTS,
+) as CanvasComponentName[];
+
+// Build a catalog limited to an allow-list of component names. A template uses
+// this so the agent's system prompt only documents the components that template
+// is allowed to emit. The renderer registry stays single-source (it maps ALL
+// component names), so any saved canvas still renders — the allow-list only
+// constrains what each template's agent is told it may produce.
+export function canvasCatalogFor(names: readonly CanvasComponentName[]) {
+  const components = Object.fromEntries(
+    names.map((name) => [name, CANVAS_COMPONENTS[name]]),
+  );
+  return defineCatalog(canvasSchema, { components, actions: {} });
+}
diff --git a/packages/core/src/canvas/dashboardSchemas.ts b/packages/core/src/canvas/dashboardSchemas.ts
index a2824b3c1..4fd98e97b 100644
--- a/packages/core/src/canvas/dashboardSchemas.ts
+++ b/packages/core/src/canvas/dashboardSchemas.ts
@@ -11,6 +11,12 @@ export const dashboardRecordSchema = z.object({
   channelId: z.string().default(""),
   name: z.string(),
   spec: dashboardSpecSchema,
+  // The canvas template this board was built with. Defaults to "dashboard" so
+  // boards saved before templating still parse and behave as before.
+  templateId: z.string().default("dashboard"),
+  // Display name of whoever created the file-system row (from the backend's
+  // `created_by` user). Absent for rows the API returns without a creator.
+  createdBy: z.string().optional(),
   createdAt: z.number(),
   updatedAt: z.number(),
 });
@@ -26,6 +32,12 @@ export const dashboardFileMetaSchema = z.object({
   // The channel folder's stable file-system id. Stored here rather than derived
   // from the path so renaming/moving the channel folder can't reparent the board.
   channelId: z.string().optional(),
+  // The canvas template id this board was built with (absent = "dashboard").
+  templateId: z.string().optional(),
+  // Display name of the creator, stamped at create time. We can't rely on the
+  // FS row's `created_by` (the list endpoint doesn't expand it), so we store our
+  // own. Absent on boards created before this field existed.
+  createdBy: z.string().optional(),
   // Epoch ms. createdAt mirrors the row's created_at; updatedAt is ours because
   // the FileSystem row has no updated_at column to sort the dashboards list by.
   createdAt: z.number().optional(),
@@ -37,6 +49,8 @@ export const dashboardSummarySchema = z.object({
   id: z.string(),
   channelId: z.string(),
   name: z.string(),
+  templateId: z.string().default("dashboard"),
+  createdBy: z.string().optional(),
   updatedAt: z.number(),
   // The full spec is already loaded when listing (it rides in the FS row's
   // meta), so include it here to render grid previews without an N+1 of get()s.
@@ -50,6 +64,7 @@ export const createDashboardInput = z.object({
   channelId: z.string().min(1),
   name: z.string().min(1),
   spec: dashboardSpecSchema,
+  templateId: z.string().default("dashboard"),
 });
 
 export const updateDashboardInput = z.object({
diff --git a/packages/core/src/canvas/dashboardsService.ts b/packages/core/src/canvas/dashboardsService.ts
index 4b5d28d03..c99bc13e3 100644
--- a/packages/core/src/canvas/dashboardsService.ts
+++ b/packages/core/src/canvas/dashboardsService.ts
@@ -23,6 +23,13 @@ interface FsEntry {
   type?: string;
   meta?: DashboardFileMeta | null;
   created_at?: string;
+  // The backend's creator user (standard PostHog UserBasic shape). Absent on
+  // rows the API returns without an expanded creator.
+  created_by?: {
+    first_name?: string | null;
+    last_name?: string | null;
+    email?: string | null;
+  } | null;
 }
 
 /**
@@ -34,6 +41,11 @@ interface FsEntry {
  */
 @injectable()
 export class DashboardsService {
+  // The current user's display label, fetched once and reused (the creator is
+  // the same user for the app's lifetime). `undefined` = not fetched yet;
+  // `null` = fetched but unavailable (don't refetch on every create).
+  private userLabel: string | null | undefined;
+
   constructor(
     @inject(AUTH_SERVICE)
     private readonly authService: AuthService,
@@ -41,6 +53,37 @@ export class DashboardsService {
     private readonly dashboardQuery: DashboardQueryService,
   ) {}
 
+  // The signed-in user's display name (or email), for stamping `created by` onto
+  // canvases. Cached after the first lookup; never throws (returns undefined).
+  private async currentUserLabel(): Promise<string | undefined> {
+    if (this.userLabel !== undefined) return this.userLabel ?? undefined;
+    try {
+      const { apiHost } = await this.authService.getValidAccessToken();
+      const res = await this.authService.authenticatedFetch(
+        fetch,
+        `${apiHost}/api/users/@me/`,
+      );
+      if (!res.ok) {
+        this.userLabel = null;
+        return undefined;
+      }
+      const data = (await res.json()) as {
+        first_name?: string | null;
+        last_name?: string | null;
+        email?: string | null;
+      };
+      const name = [data.first_name, data.last_name]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+      this.userLabel = name || data.email || null;
+      return this.userLabel ?? undefined;
+    } catch {
+      this.userLabel = null;
+      return undefined;
+    }
+  }
+
   // Raw fetch against this project's desktop_file_system surface. `suffix` is
   // appended after `.../desktop_file_system/` (e.g. `<id>/` or a `?offset=` page).
   private async fsFetch(suffix: string, init?: RequestInit): Promise<Response> {
@@ -83,13 +126,25 @@ export class DashboardsService {
       )
       .map((e) => toRecord(e))
       .sort((a, b) => b.updatedAt - a.updatedAt)
-      .map(({ id, channelId: cid, name, updatedAt, spec }) => ({
-        id,
-        channelId: cid,
-        name,
-        updatedAt,
-        spec,
-      }));
+      .map(
+        ({
+          id,
+          channelId: cid,
+          name,
+          templateId,
+          createdBy,
+          updatedAt,
+          spec,
+        }) => ({
+          id,
+          channelId: cid,
+          name,
+          templateId,
+          createdBy,
+          updatedAt,
+          spec,
+        }),
+      );
   }
 
   async get(id: string): Promise<DashboardRecord | null> {
@@ -101,12 +156,15 @@ export class DashboardsService {
     channelId: string;
     name: string;
     spec: Record<string, unknown> | null;
+    templateId?: string;
   }): Promise<DashboardRecord> {
     const channelPath = await this.channelPath(input.channelId);
     const now = Date.now();
     const meta: DashboardFileMeta = {
       spec: input.spec,
       channelId: input.channelId,
+      templateId: input.templateId ?? "dashboard",
+      createdBy: await this.currentUserLabel(),
       createdAt: now,
       updatedAt: now,
     };
@@ -246,11 +304,25 @@ function toRecord(entry: FsEntry): DashboardRecord {
     channelId: meta.channelId ?? "",
     name: lastSegment(entry.path),
     spec: meta.spec ?? null,
+    templateId: meta.templateId ?? "dashboard",
+    // Prefer our stamped meta; fall back to the FS row's creator if present.
+    createdBy: meta.createdBy ?? creatorName(entry.created_by),
     createdAt,
     updatedAt: meta.updatedAt ?? createdAt,
   };
 }
 
+// Human-readable creator from the backend's `created_by` user: full name when
+// present, else email, else undefined (we don't render an id).
+function creatorName(createdBy?: FsEntry["created_by"]): string | undefined {
+  if (!createdBy) return undefined;
+  const name = [createdBy.first_name, createdBy.last_name]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+  return name || createdBy.email || undefined;
+}
+
 // Path segments are "/"-separated on the backend, so a name can't contain one.
 function sanitizeSegment(name: string): string {
   const cleaned = name.replace(/\//g, " ").replace(/\s+/g, " ").trim();
diff --git a/packages/core/src/canvas/genSchemas.ts b/packages/core/src/canvas/genSchemas.ts
index 4e630cc78..05c3949c4 100644
--- a/packages/core/src/canvas/genSchemas.ts
+++ b/packages/core/src/canvas/genSchemas.ts
@@ -5,11 +5,18 @@ export const canvasGenerateInput = z.object({
   threadId: z.string().min(1),
   prompt: z.string().min(1),
   /**
-   * The json-render system prompt describing the component catalog. Computed in
-   * the renderer from the shared catalog and applied once when the ephemeral
-   * agent session for this thread is created.
+   * The canvas template whose system prompt anchors the agent. Resolved to the
+   * template's prompt in main (CanvasTemplatesService) and applied once when the
+   * ephemeral agent session for this thread is created. Defaults to "dashboard".
    */
-  systemPrompt: z.string().min(1),
+  templateId: z.string().default("dashboard"),
+  /**
+   * The canvas's current spec, sent on the first turn of a thread so the agent
+   * session is seeded with it. Without this, reopening a saved canvas starts the
+   * main-side spec accumulator empty and the agent's first additive patches
+   * would render as if the board were blank (wiping it). null/absent = empty.
+   */
+  currentSpec: z.record(z.string(), z.unknown()).nullish(),
   model: z.string().optional(),
 });
 export type CanvasGenerateInput = z.infer<typeof canvasGenerateInput>;
diff --git a/packages/core/src/canvas/identifiers.ts b/packages/core/src/canvas/identifiers.ts
index c702d3d95..c3beb4822 100644
--- a/packages/core/src/canvas/identifiers.ts
+++ b/packages/core/src/canvas/identifiers.ts
@@ -3,6 +3,9 @@
 // without depending on the desktop app's main process (where the concrete
 // service classes are bound).
 export const CANVAS_GEN_SERVICE = Symbol.for("posthog.core.canvas.genService");
+export const CANVAS_TEMPLATES_SERVICE = Symbol.for(
+  "posthog.core.canvas.templatesService",
+);
 export const DASHBOARDS_SERVICE = Symbol.for(
   "posthog.core.canvas.dashboardsService",
 );
diff --git a/packages/core/src/canvas/services.ts b/packages/core/src/canvas/services.ts
index 2d303db58..7fc0d0775 100644
--- a/packages/core/src/canvas/services.ts
+++ b/packages/core/src/canvas/services.ts
@@ -8,6 +8,7 @@ import type {
   DashboardQueryResult,
   DashboardQueryRunInput,
 } from "./querySchemas";
+import type { CanvasTemplate, CanvasTemplateSummary } from "./templateSchemas";
 
 // Structural service interfaces the host-router routers depend on. The concrete
 // implementations live in the desktop app's main process and are bound to the
@@ -23,6 +24,13 @@ export interface ICanvasGenService {
   ): AsyncIterable<CanvasGenEventPayload>;
 }
 
+export interface ICanvasTemplatesService {
+  list(): CanvasTemplateSummary[];
+  get(id: string): CanvasTemplate | undefined;
+  /** The system prompt for a template, falling back to the default template. */
+  systemPromptFor(id: string | undefined): string;
+}
+
 export interface IDashboardsService {
   list(channelId: string): Promise<DashboardSummary[]>;
   get(id: string): Promise<DashboardRecord | null>;
@@ -30,6 +38,7 @@ export interface IDashboardsService {
     channelId: string;
     name: string;
     spec: Record<string, unknown> | null;
+    templateId?: string;
   }): Promise<DashboardRecord>;
   update(input: {
     id: string;
diff --git a/packages/core/src/canvas/templateSchemas.ts b/packages/core/src/canvas/templateSchemas.ts
new file mode 100644
index 000000000..1fbe1333d
--- /dev/null
+++ b/packages/core/src/canvas/templateSchemas.ts
@@ -0,0 +1,28 @@
+import { z } from "zod";
+
+// A starter chip shown in an empty chat: `label` is the short text on the chip
+// (often the capability under test), `prompt` is dropped into the composer.
+export const canvasSuggestionSchema = z.object({
+  label: z.string(),
+  prompt: z.string(),
+});
+export type CanvasSuggestion = z.infer<typeof canvasSuggestionSchema>;
+
+// What the create-picker needs to list templates (no heavy system prompt).
+export const canvasTemplateSummarySchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string(),
+  builtIn: z.boolean(),
+  suggestions: z.array(canvasSuggestionSchema),
+});
+export type CanvasTemplateSummary = z.infer<typeof canvasTemplateSummarySchema>;
+
+// The full template, including the agent system prompt.
+export const canvasTemplateSchema = canvasTemplateSummarySchema.extend({
+  systemPrompt: z.string(),
+});
+export type CanvasTemplate = z.infer<typeof canvasTemplateSchema>;
+
+export const getCanvasTemplateInput = z.object({ id: z.string().min(1) });
+export type GetCanvasTemplateInput = z.infer<typeof getCanvasTemplateInput>;
diff --git a/packages/host-router/src/router.ts b/packages/host-router/src/router.ts
index d03171118..cd9711903 100644
--- a/packages/host-router/src/router.ts
+++ b/packages/host-router/src/router.ts
@@ -5,6 +5,7 @@ import { analyticsRouter } from "./routers/analytics.router";
 import { archiveRouter } from "./routers/archive.router";
 import { authRouter } from "./routers/auth.router";
 import { canvasGenRouter } from "./routers/canvas-gen.router";
+import { canvasTemplatesRouter } from "./routers/canvas-templates.router";
 import { cloudTaskRouter } from "./routers/cloud-task.router";
 import { connectivityRouter } from "./routers/connectivity.router";
 import { contextMenuRouter } from "./routers/context-menu.router";
@@ -49,6 +50,7 @@ export const hostRouter = router({
   archive: archiveRouter,
   auth: authRouter,
   canvasGen: canvasGenRouter,
+  canvasTemplates: canvasTemplatesRouter,
   cloudTask: cloudTaskRouter,
   connectivity: connectivityRouter,
   contextMenu: contextMenuRouter,
diff --git a/packages/host-router/src/routers/canvas-templates.router.ts b/packages/host-router/src/routers/canvas-templates.router.ts
new file mode 100644
index 000000000..ebbb1305f
--- /dev/null
+++ b/packages/host-router/src/routers/canvas-templates.router.ts
@@ -0,0 +1,28 @@
+import { CANVAS_TEMPLATES_SERVICE } from "@posthog/core/canvas/identifiers";
+import type { ICanvasTemplatesService } from "@posthog/core/canvas/services";
+import {
+  canvasTemplateSchema,
+  canvasTemplateSummarySchema,
+  getCanvasTemplateInput,
+} from "@posthog/core/canvas/templateSchemas";
+import { publicProcedure, router } from "@posthog/host-trpc/trpc";
+import { z } from "zod";
+
+export const canvasTemplatesRouter = router({
+  list: publicProcedure
+    .output(z.array(canvasTemplateSummarySchema))
+    .query(({ ctx }) =>
+      ctx.container
+        .get<ICanvasTemplatesService>(CANVAS_TEMPLATES_SERVICE)
+        .list(),
+    ),
+  get: publicProcedure
+    .input(getCanvasTemplateInput)
+    .output(canvasTemplateSchema.nullable())
+    .query(
+      ({ ctx, input }) =>
+        ctx.container
+          .get<ICanvasTemplatesService>(CANVAS_TEMPLATES_SERVICE)
+          .get(input.id) ?? null,
+    ),
+});
diff --git a/packages/host-router/src/services/canvas-gen.service.ts b/packages/host-router/src/services/canvas-gen.service.ts
index 27c313ec9..35be67c7d 100644
--- a/packages/host-router/src/services/canvas-gen.service.ts
+++ b/packages/host-router/src/services/canvas-gen.service.ts
@@ -14,6 +14,8 @@ import {
   type CanvasStreamEvent,
   type CanvasThreadInput,
 } from "@posthog/core/canvas/genSchemas";
+import { CANVAS_TEMPLATES_SERVICE } from "@posthog/core/canvas/identifiers";
+import type { ICanvasTemplatesService } from "@posthog/core/canvas/services";
 import {
   ROOT_LOGGER,
   type RootLogger,
@@ -71,6 +73,8 @@ export class CanvasGenService extends TypedEventEmitter<CanvasGenEvents> {
     private readonly agentService: AgentService,
     @inject(AUTH_SERVICE)
     private readonly authService: AuthService,
+    @inject(CANVAS_TEMPLATES_SERVICE)
+    private readonly templatesService: ICanvasTemplatesService,
     @inject(ROOT_LOGGER)
     rootLogger: RootLogger,
   ) {
@@ -79,13 +83,20 @@ export class CanvasGenService extends TypedEventEmitter<CanvasGenEvents> {
   }
 
   async generate(input: CanvasGenerateInput): Promise<void> {
-    const { threadId, prompt, systemPrompt, model } = input;
+    const { threadId, prompt, templateId, model, currentSpec } = input;
     const taskRunId = `${TASK_RUN_PREFIX}${threadId}`;
+    const systemPrompt = this.templatesService.systemPromptFor(templateId);
 
     this.ensureForwarding();
 
     try {
-      await this.ensureSession(threadId, taskRunId, systemPrompt, model);
+      await this.ensureSession(
+        threadId,
+        taskRunId,
+        systemPrompt,
+        model,
+        currentSpec,
+      );
     } catch (err) {
       this.emitEvent(threadId, {
         type: "error",
@@ -94,6 +105,18 @@ export class CanvasGenService extends TypedEventEmitter<CanvasGenEvents> {
       return;
     }
 
+    // Re-seed the working spec from what the renderer currently shows, EVERY
+    // turn. Main keeps its own accumulator separate from the renderer; after a
+    // renderer reload (main process survives) or for a session started before
+    // the board hydrated, that accumulator is empty/stale. Without this, an edit
+    // patch like `add /elements/table` lands in a spec with no `root`, and the
+    // emit gate (root must exist) silently drops every update — the agent's
+    // changes never reach the canvas. The renderer's spec is the source of truth.
+    if (currentSpec) {
+      const thread = this.threads.get(threadId);
+      if (thread) thread.spec = { ...currentSpec };
+    }
+
     this.emitEvent(threadId, { type: "started" });
 
     const promptBlocks: ContentBlock[] = [{ type: "text", text: prompt }];
@@ -123,6 +146,7 @@ export class CanvasGenService extends TypedEventEmitter<CanvasGenEvents> {
     taskRunId: string,
     systemPrompt: string,
     model?: string,
+    currentSpec?: Record<string, unknown> | null,
   ): Promise<void> {
     if (this.startedSessions.has(threadId)) return;
 
@@ -147,13 +171,18 @@ export class CanvasGenService extends TypedEventEmitter<CanvasGenEvents> {
       ...(model ? { model } : {}),
     });
 
-    this.threads.set(threadId, this.createThreadState(threadId));
+    this.threads.set(threadId, this.createThreadState(threadId, currentSpec));
     this.startedSessions.add(threadId);
   }
 
-  private createThreadState(threadId: string): ThreadState {
+  private createThreadState(
+    threadId: string,
+    initialSpec?: Record<string, unknown> | null,
+  ): ThreadState {
     const state: ThreadState = {
-      spec: {},
+      // Seed with the saved spec so the agent appends onto the existing board
+      // instead of rebuilding from empty (which would wipe a reopened canvas).
+      spec: initialSpec ? { ...initialSpec } : {},
       parser: createMixedStreamParser({
         onText: (text) => {
           if (text.trim().length === 0) return;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d97408ae6..b41d484e9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -60,6 +60,7 @@
     "@posthog/git": "workspace:*",
     "@posthog/host-router": "workspace:*",
     "@posthog/platform": "workspace:*",
+    "@posthog/quill-charts": "0.3.0-beta.14",
     "@posthog/shared": "workspace:*",
     "@posthog/workspace-client": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",
diff --git a/packages/ui/src/features/canvas/TEMPLATES.md b/packages/ui/src/features/canvas/TEMPLATES.md
new file mode 100644
index 000000000..46eb0e265
--- /dev/null
+++ b/packages/ui/src/features/canvas/TEMPLATES.md
@@ -0,0 +1,319 @@
+# Canvas templates, open-ended building & data sources — design scope
+
+**Status:** Phases 1, 2, 2.5 (local interactivity) shipped; Phases 3–6 scoped below.
+**Owner:** canvas feature.
+**Branch:** `feat/canvases-rename` (builds on `feat/canvas` → `feat/canvas-quill`).
+
+## Vision
+
+A **canvas** is a freeform, agent-built surface — not a PostHog dashboard. At
+creation the user picks a **template** that injects its own agent context
+(prompt + component palette + data policy + optional starter spec). "Dashboard"
+becomes _one_ template; "Blank canvas" can become anything the user describes —
+a tool, a form, a whole mini-site. Data is not limited to product analytics: the
+agent can pull from any connected PostHog **data-warehouse source** (Stripe,
+Postgres, …) via HogQL.
+
+The rigid, PostHog-data-centric gen-UI is being generalised into a
+template-driven, source-aware canvas builder.
+
+## Locked decisions
+
+1. **Catalog + prompt move to main.** The component contract and the agent
+   system prompt are business logic; they leave the renderer.
+2. **Blank canvas = curated palette + sanitized rich text.** No arbitrary
+   `<script>`; "website" means composing many sanitized sections, not raw markup.
+3. **Design for user-defined templates from the start.** Templates are data
+   (records), not hardcoded. Built-ins are seeded; users can add their own later.
+4. **New warehouse sources: link out to PostHog.** We surface available/connected
+   sources and deep-link to PostHog to connect new ones — no in-app OAuth.
+5. **Both built-in templates are Declarative.** See the stance below.
+
+## Generative-UI stance: Controlled / Declarative / Open-ended
+
+Prior art: Shubham Saboo's "three patterns of Generative UI" (controlled →
+declarative → open-ended; CopilotKit / AG-UI / A2UI).
+
+- **Controlled** — pre-built components bound to tool names; the agent picks
+  which to render. Pixel-perfect but pays a per-turn token tax (~400 tok per
+  registered component) and mis-picks past ~25.
+- **Declarative** — the agent emits a **schema**; the app maps it to a **catalog**
+  of components with typed props. One tool, many UIs, flat token cost. The
+  pattern "built for the long tail: dashboards, results, forms, cards, widgets."
+- **Open-ended** — no catalog; the agent writes **raw HTML in a sandboxed
+  iframe**. Maximal freedom, but brand drift and brittleness — "never as the
+  primary surface," only for disposable/one-shot output.
+
+**Our canvas is Declarative** (json-render schema → shared catalog → React
+bodies with Zod props). That's deliberate and stays the model for BOTH built-in
+templates:
+
+- **Dashboard** — Declarative, data-focused catalog (Stat/charts/Table + refresh).
+- **Blank** — Declarative, _broader_ catalog (Hero/Section/Markdown/Button/tones)
+  + a looser prompt. NOT open-ended: saved canvases are primary, reopenable,
+  branded surfaces, so they must stay editable, on-brand, dark-mode-safe, and
+  data-bindable.
+- **Interactivity** (forms, buttons that _do_ things) is pursued the declarative
+  way: **actions in the schema** that fire an event back to the agent
+  (json-render already supports `on`/actions + bindings) — not by going
+  open-ended.
+- **Open-ended** is reserved for a possible future _disposable_ "quick sketch"
+  mode (a throwaway viz in chat), never the default for a saved canvas.
+
+## Current state (what we're changing)
+
+- One hardcoded `CANVAS_SYSTEM_PROMPT` and one `canvasCatalog`, both in the
+  renderer (`genui/catalog.ts`), passed to the agent at session start.
+- `canvas-gen` main service owns the agent session: `bypassPermissions`,
+  `repoPath = tmpdir`, `disallowedTools = [Bash, Write, Edit, MultiEdit,
+  NotebookEdit, WebFetch, WebSearch]`. The agent is read-only and can only reach
+  **PostHog MCP tools** (`mcp.posthog.com/mcp`).
+- A canvas record is `{ id, channelId, name, spec }` (desktop-fs `meta` blob).
+  No template or data-source field.
+- Warehouse data is **already queryable via HogQL** (the `dashboard-query`
+  refresh path runs HogQL; the MCP exposes `data-warehouse` / `external-data` /
+  `execute-sql` domains). The gap is _discoverability_ and _UI_, not reachability.
+
+## The model
+
+### `CanvasTemplate` (data, main-owned)
+
+```ts
+interface CanvasTemplate {
+  id: string;                 // "dashboard" | "blank" | <user-defined uuid>
+  name: string;
+  description: string;        // shown in the create picker
+  builtIn: boolean;           // seeded vs user-created
+  systemPrompt: string;       // agent context injection (per-template)
+  catalogId: string;          // which component palette the agent may emit
+  starterSpec?: Spec;         // optional scaffold rendered before the first turn
+  dataPolicy: DataPolicy;     // which sources the agent may query
+  createdAt: number;
+  updatedAt: number;
+}
+```
+
+- Templates are **records**, served by a `CanvasTemplatesService` (main),
+  exposed via a one-line tRPC router. Built-ins ("dashboard", "blank") are seeded
+  on first run; user templates persist alongside (same store as canvases, or a
+  dedicated templates store — see Open questions).
+- Today's `CANVAS_SYSTEM_PROMPT` + `canvasCatalog` become the **Dashboard**
+  template: cards, charts, Stats, refresh buttons, PostHog-data-centric.
+- **Blank** template: looser prompt ("build whatever the user asks"), a wider
+  curated palette (layout primitives + sanitized rich-text/markdown block).
+
+### Context injection
+
+- A canvas stores `templateId`. `canvas-gen.generate` resolves the template's
+  `systemPrompt` at **session start** (the agent's system prompt is frozen
+  there).
+- Per-turn we keep injecting the canvas title (already done) **plus a
+  data-source manifest** (below), so the agent always knows what it can pull.
+
+### Data sources & the warehouse
+
+- Add a main method to **list warehouse sources/tables** for the project
+  (PostHog `external_data` / warehouse API).
+- Inject a compact **manifest** into the agent context, e.g.
+  `Available data: events, persons, stripe_invoices(customer_id, amount, created)…`
+  so the agent writes correct HogQL against Stripe et al.
+- Warehouse-backed Stat refresh reuses the existing `dashboard-query` HogQL
+  path — no new mechanism.
+- Connecting a _new_ source is a PostHog-side flow: surface status and
+  **deep-link to PostHog** (decision 4). No in-app OAuth.
+
+## Architecture by layer (per CLAUDE.md)
+
+| Layer      | Change |
+| ---------- | ------ |
+| **shared** | The component **catalog contract** — names, Zod prop schemas, descriptions — moves to a shared module so one source feeds both the renderer registry and the main prompt builder. |
+| **main**   | New `CanvasTemplatesService` (list/get/create templates; compute `systemPrompt`). The `catalog.prompt()` generation moves to main. `canvas-gen.generate` takes a `templateId` and resolves prompt + catalog + data manifest. New warehouse-sources listing method (on a data service). Routers stay one-liners (R10). |
+| **renderer** | Template **picker** at create. `genui/registry.tsx` keeps mapping catalog component names → React bodies (it imports the shared contract). Thin tRPC calls only — no prompt/catalog logic left here. |
+
+**Catalog split (decision 1):** the _contract_ (what components exist + their
+prop schemas) is shared so the renderer can render it; the _prompt text_
+(`catalog.prompt(...)`) is generated in main as part of each template. The
+renderer no longer constructs or passes `CANVAS_SYSTEM_PROMPT`.
+
+## Blank canvas — rendering & safety (decision 2)
+
+- Blank gets a **broader curated palette** (more layout/content primitives) plus
+  a **sanitized** markdown/rich-text block (we already depend on
+  `rehype-sanitize`).
+- **No arbitrary `<script>`.** The agent's _tools_ are sandboxed, but its
+  _rendered output_ runs in our renderer — raw HTML/iframe is an
+  XSS/exfiltration surface, deferred and gated.
+- "Whole website" = composing many sanitized sections/components, not
+  unrestricted markup.
+- Interactivity (forms/buttons that _do_ things) → json-render already has
+  `actions`/bindings; treat as a deliberate later phase with its own review.
+
+## Data model / storage
+
+- Add `templateId: string` (default `"dashboard"` for back-compat) and optional
+  `dataSources?: string[]` to the canvas record + fs-meta schema. Existing boards
+  read as the Dashboard template.
+- Templates persisted as records (built-ins seeded; user templates addable).
+
+## The renderer's dynamic-feature support (Phase 1 → 2.5)
+
+Originally the canvas renderer (`genui/EditRenderer.tsx` + `bodies.tsx`) was a
+**fully static walk** — no `state`, `repeat`, `visible`, `on`/actions, or binding
+objects; a binding in a prop crashed the canvas (it now degrades to empty via
+`asText()`). Phase 2.5 added the **declarative runtime**: the walks are wrapped in
+`genui/CanvasProviders.tsx` so they resolve a top-level `state` model, `{$state}`
+reads, `{$bindState}` two-way bindings, `visible` conditions, and `on`/actions
+(the four built-ins). The walks stay hand-rolled (not `createRenderer`) because
+they need element **keys** for refresh + inline edit; the providers + json-render
+hooks (`useStateStore`, `useActions`, `useIsVisible`) plus `useResolvedProps`
+supply the dynamics. (Inputs read/write the store directly via `useStateStore` +
+`getByPath`, not `useBoundProp` — that hook only echoes the prop it's handed,
+which `createRenderer` pre-resolves but our manual walk does not.)
+
+Still NOT resolved: `repeat`/`{$item}`/`{$bindItem}`/`{$index}` (degrade to empty
+via `asText()`); the schema mirror + template rules tell the agent to inline
+repeated content instead. This keeps us firmly **Declarative** — never
+open-ended HTML. The remaining interactivity step is the A2UI agent round-trip
+(a button posting a structured event back to the agent), tracked under Phase 2.5
+/ Phase 6.
+
+## Phasing
+
+### Phase 1 — Template plumbing ✅ done
+
+- `@shared/canvas`: component contract + core-only schema mirror (no React in
+  main). One source for the renderer registry and the main prompt builder.
+- `CanvasTemplatesService` (main): built-in **Dashboard** + **Blank** templates,
+  record-shaped (`builtIn`, `suggestions`, `systemPrompt`) for future
+  user-defined ones. Prompt generated in main; `canvas-gen.generate` takes a
+  `templateId`.
+- `templateId` on canvas records (default `"dashboard"`, back-compat).
+- Renderer: thread carries `templateId`; `NewCanvasMenu` picker at create;
+  per-template chat **suggestions** (chips that fill + focus the composer, shown
+  only while the canvas is empty).
+- Hardening: static-only schema/rules + `asText()` so stray bindings can't crash
+  the canvas.
+
+### Phase 2 — Blank palette ✅ done
+
+- ✅ Widened the catalog: `Hero` (centered hero section), `Markdown` (sanitized
+  rich-text via `rehype-sanitize`, no `<script>`), `Button` (display CTA). Blank
+  template nudges the agent to use them for rich pages.
+- ✅ Catalog packaging / allow-list: one shared contract (`CANVAS_COMPONENTS`) +
+  per-template allow-list. `canvasCatalogFor(names)` builds a catalog limited to
+  a template's allowed components; each template's `systemPrompt` only documents
+  those. Dashboard allows data/layout primitives (no Hero/Section/Markdown/Button);
+  Blank allows all (`ALL_CANVAS_COMPONENTS`). The renderer registry stays
+  single-source (maps every name), so any saved canvas still renders — the
+  allow-list only constrains what each template's agent is told it may emit.
+
+### Phase 2.5 — Declarative interactivity (gates forms/tools) — ✅ v1 done
+
+Local interactivity shipped; the agent round-trip (A2UI) is the remaining
+follow-up.
+
+- ✅ **Renderer resolves the declarative runtime.** Both key-aware walks
+  (`ViewRenderer`, `EditRenderer`) and the thumbnail `createRenderer` are wrapped
+  in `genui/CanvasProviders.tsx` — json-render's `StateProvider` (store seeded
+  from the spec's top-level `state`) + `ActionProvider` + `ValidationProvider` +
+  `VisibilityProvider`. The walks were kept (not replaced by `createRenderer`)
+  because they need element **keys** for per-card refresh + inline edit, which
+  `createRenderer` hides; the providers + json-render hooks supply the dynamics.
+- ✅ **Supported features:** a top-level `state` model; `{$state}` reads in any
+  text prop (resolved in the walk via `useResolvedProps`); `{$bindState}`
+  two-way form binding on `TextInput`/`Checkbox` (read/write the store via
+  `useStateStore`); `visible` conditions (`useIsVisible`,
+  honoured in view); `on`/actions with the four built-ins
+  (setState/pushState/removeState/validateForm) dispatched via `useActions`.
+- ✅ **Minimal form inputs:** `TextInput` + `Checkbox` catalog components, bound
+  two-way to state. Unlocked for **both** templates (allow-lists updated).
+- ✅ Per-template static rules relaxed to document exactly these features (and to
+  keep forbidding the still-unsupported ones).
+- ⬜ **Still unsupported (deferred):** `repeat`/`{$item}`/`{$index}` (the walks
+  don't expand repeat scopes yet — they degrade to empty), and the **A2UI agent
+  round-trip** (a custom action that posts a structured event back to the agent
+  as a new turn — needs a new dispatch channel + `canvasGenerateInput` field).
+- This stays Declarative — NOT open-ended HTML.
+
+### Phase 3 — Source @mentions (data sources)
+
+Prior art: **Craft Agents' "sources"** (craft-ai-agents/craft-agents-oss) — a
+conversational abstraction where users `@mention` a source mid-chat and the
+agent gains its tools/schema, no restart. We adopt the *@mention* UX, not their
+connection layer: PostHog's Data Warehouse already owns connecting Stripe /
+Postgres / etc., and the canvas agent is hard-sandboxed (read-only), so we skip
+their in-chat OAuth and permission modes.
+
+- Main method to list the project's queryable sources (product-analytics
+  `events`/`persons` + warehouse tables via `external_data`). Expose for an
+  `@mention` autocomplete in the chat composer.
+- The user `@`-references the sources they want (`@events`, `@stripe_invoices`);
+  ONLY those table schemas are injected into the agent context (token-cheap,
+  precise) — instead of dumping the whole warehouse manifest. With no mention,
+  fall back to a small default set (events/persons).
+- Mentioned sources are recorded on the canvas's `dataSources` field (already
+  scoped) so the board remembers what it's built on. Warehouse-backed Stat
+  refresh reuses the existing `dashboard-query` HogQL path.
+
+### Phase 4 — Data UI
+
+- Surface a canvas's attached sources (from `dataSources`) and the `@mention`
+  picker in the composer; **link out to PostHog** to connect new warehouse
+  sources (no in-app OAuth); surface warehouse-backed refresh in the UI.
+
+### Phase 5 — User-defined templates
+
+- UI to save the current canvas (system prompt + palette/allow-list + starter
+  spec + suggestions) as a reusable template. `CanvasTemplatesService` is already
+  record-shaped; add a writable store (built-ins stay read-only).
+
+### Phase 6 — Later
+
+- Real interactivity/actions (depends on Phase 2.5), template sharing, more
+  built-in templates.
+- **Open-ended "quick sketch" mode** (optional): a third `renderMode` for
+  _disposable_, throwaway visualizations — agent writes sanitized HTML in a
+  sandboxed iframe (`sandbox="allow-scripts allow-forms"`, never
+  `allow-same-origin`). Per the prior art, this is NEVER the default for a saved
+  canvas — only an explicit, ephemeral surface.
+
+## Cross-cutting follow-ups (not phase-gated)
+
+- ✅ **Reloaded-board append-only seeding**: `canvas-gen.generate` now takes the
+  canvas's `currentSpec`; the thread's `state.spec` is seeded from it at session
+  start, and the agent prompt includes the current spec so it appends against
+  real element keys instead of rebuilding from empty.
+- **Chart tooltip vars**: `--color-bg-surface-*` / `--color-text-primary-inverse`
+  aren't in beta.14 quill CSS → tooltip styling falls back.
+- **vitest can't import `quill-charts`** (dayjs subpath) → add a resolve alias if
+  we want body unit tests.
+
+## Open questions
+
+- **Template store:** reuse the canvases desktop-fs store (a `type: template`
+  row) or a dedicated store? (Leaning: same desktop-fs backend, distinct type.)
+- **Per-template tool gating:** should Blank get a different `disallowedTools`
+  set than Dashboard? (Default: keep the read-only sandbox for all.)
+- **Data manifest size:** cap/scope the injected warehouse schema for large
+  projects to avoid blowing the context.
+
+## Resolved decisions
+
+- **Render mode (resolved):** both built-in templates are **Declarative**.
+  Blank is _not_ open-ended — saved canvases are primary surfaces, so they stay
+  declarative (editable, on-brand, data-bindable). Open-ended is reserved for a
+  future disposable mode only (Phase 6).
+- **Interactivity (resolved):** pursued declaratively via schema `on`/actions
+  (Phase 2.5), not raw HTML.
+- **Catalog packaging (resolved):** one shared contract (`CANVAS_COMPONENTS`)
+  with per-template allow-lists via `canvasCatalogFor(names)`, not separate
+  catalogs — the renderer registry stays single-source.
+
+## Related
+
+- Component contract & renderer: `genui/catalog.ts`, `genui/registry.tsx`,
+  `genui/bodies.tsx`.
+- Agent session: `main/services/canvas-gen/service.ts`.
+- Refresh / HogQL: `main/services/dashboard-query/service.ts`.
+- Storage: `main/services/dashboards/{schemas,service}.ts`.
+- Conventions: `features/canvas/AGENTS.md`.
diff --git a/packages/ui/src/features/canvas/components/CanvasChat.tsx b/packages/ui/src/features/canvas/components/CanvasChat.tsx
index 313829747..f68ad5be1 100644
--- a/packages/ui/src/features/canvas/components/CanvasChat.tsx
+++ b/packages/ui/src/features/canvas/components/CanvasChat.tsx
@@ -1,5 +1,7 @@
+import { isNonEmptySpec } from "@json-render/core";
 import { PaperPlaneRightIcon, SpinnerGapIcon } from "@phosphor-icons/react";
 import { Button } from "@posthog/quill";
+import { useCanvasTemplates } from "@posthog/ui/features/canvas/hooks/useCanvasTemplates";
 import {
   useCanvasChatStore,
   useCanvasThread,
@@ -10,11 +12,24 @@ import { useEffect, useRef, useState } from "react";
 // Chat panel hugging the right of the canvas: a thread plus a composer that
 // drives the canvas generation agent.
 export function CanvasChat({ threadId }: { threadId: string }) {
-  const { messages, isStreaming, lastTool, error } = useCanvasThread(threadId);
+  const { messages, isStreaming, lastTool, error, templateId, spec } =
+    useCanvasThread(threadId);
   const send = useCanvasChatStore((s) => s.send);
+  const templates = useCanvasTemplates();
+  // Suggestions only while the canvas itself is still empty (nothing built yet).
+  const suggestions = isNonEmptySpec(spec)
+    ? []
+    : (templates.find((t) => t.id === templateId)?.suggestions ?? []);
 
   const [draft, setDraft] = useState("");
   const threadRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Drop a suggestion into the composer and focus it (ready to edit or send).
+  const fillSuggestion = (text: string) => {
+    setDraft(text);
+    inputRef.current?.focus();
+  };
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on new content
   useEffect(() => {
@@ -44,10 +59,27 @@ export function CanvasChat({ threadId }: { threadId: string }) {
       <ScrollArea ref={threadRef} className="flex-1">
         <Flex direction="column" gap="3" p="3">
           {messages.length === 0 && (
-            <Text size="1" className="text-gray-10">
-              Describe the dashboard or app you want. The agent queries your
-              PostHog project and builds it live on the canvas.
-            </Text>
+            <Flex direction="column" gap="3">
+              <Text size="1" className="text-gray-10">
+                Describe the canvas or app you want. The agent queries your
+                PostHog project and builds it live on the canvas.
+              </Text>
+              {suggestions.length > 0 && draft.trim().length === 0 && (
+                <Flex direction="column" align="start" gap="1">
+                  {suggestions.map((suggestion) => (
+                    <Button
+                      key={suggestion.label}
+                      variant="outline"
+                      size="sm"
+                      className="max-w-full justify-start text-left"
+                      onClick={() => fillSuggestion(suggestion.prompt)}
+                    >
+                      {suggestion.label}
+                    </Button>
+                  ))}
+                </Flex>
+              )}
+            </Flex>
           )}
           {messages.map((message) => (
             <Flex
@@ -97,8 +129,9 @@ export function CanvasChat({ threadId }: { threadId: string }) {
       <Box className="shrink-0 border-gray-6 border-t p-2">
         <Flex gap="2" align="end">
           <TextArea
+            ref={inputRef}
             className="flex-1"
-            placeholder="Build a dashboard of…"
+            placeholder="Build a canvas of…"
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
             onKeyDown={(e) => {
diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx
index 14df0d78a..748d80e75 100644
--- a/packages/ui/src/features/canvas/components/ChannelsList.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx
@@ -193,7 +193,7 @@ function ChannelSection({ channel }: { channel: Channel }) {
         <CollapsibleContent>
           <Flex direction="column" gap="1" pt="1" pl="3">
             <NavButton
-              label="Dashboards"
+              label="Canvases"
               active={
                 pathname === base || pathname.startsWith(`${base}/dashboards`)
               }
diff --git a/packages/ui/src/features/canvas/components/NewCanvasMenu.tsx b/packages/ui/src/features/canvas/components/NewCanvasMenu.tsx
new file mode 100644
index 000000000..2136a040c
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/NewCanvasMenu.tsx
@@ -0,0 +1,83 @@
+import { PlusIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@posthog/quill";
+import { useCanvasTemplates } from "@posthog/ui/features/canvas/hooks/useCanvasTemplates";
+import { useCreateAndOpenDashboard } from "@posthog/ui/features/canvas/hooks/useDashboards";
+import { useState } from "react";
+
+// "New canvas" entry point: opens a dialog to pick a template (Dashboard,
+// Blank, …); the chosen template's agent context drives how the canvas is
+// built. Falls back to a plain create (default template) until templates load.
+export function NewCanvasMenu({
+  channelId,
+  variant = "outline",
+}: {
+  channelId: string | undefined;
+  variant?: "outline" | "primary";
+}) {
+  const [open, setOpen] = useState(false);
+  const templates = useCanvasTemplates();
+  const createAndOpen = useCreateAndOpenDashboard(channelId);
+
+  if (templates.length === 0) {
+    return (
+      <Button
+        variant={variant}
+        size="sm"
+        className="no-drag"
+        onClick={() => void createAndOpen()}
+      >
+        <PlusIcon size={14} />
+        New canvas
+      </Button>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={(props) => (
+          <Button variant={variant} size="sm" className="no-drag" {...props} />
+        )}
+      >
+        <PlusIcon size={14} />
+        New canvas
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Choose a template</DialogTitle>
+          <DialogDescription>
+            This gives the agent context for which guardrails to follow when
+            generating UI.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-2">
+          {templates.map((t) => (
+            <Button
+              key={t.id}
+              variant="default"
+              className="h-auto w-full flex-col items-start gap-0.5 whitespace-normal py-3 text-left"
+              onClick={() => {
+                setOpen(false);
+                void createAndOpen({ templateId: t.id });
+              }}
+            >
+              <span className="font-medium text-gray-12">{t.name}</span>
+              <span className="font-normal text-gray-10 text-xs [text-wrap:initial]">
+                {t.description}
+              </span>
+            </Button>
+          ))}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelsIndex.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelsIndex.tsx
index be81ae705..01e1534da 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelsIndex.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelsIndex.tsx
@@ -38,7 +38,7 @@ export function WebsiteChannelsIndex() {
           No channels yet
         </Text>
         <Text size="2" className="text-gray-10">
-          Create a channel to get its own dashboards, tasks, and settings.
+          Create a channel to get its own canvases, tasks, and settings.
         </Text>
       </Flex>
       <Button variant="primary" onClick={() => setModalOpen(true)}>
diff --git a/packages/ui/src/features/canvas/components/WebsiteDashboard.tsx b/packages/ui/src/features/canvas/components/WebsiteDashboard.tsx
index a75a8b539..4f5809fcc 100644
--- a/packages/ui/src/features/canvas/components/WebsiteDashboard.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteDashboard.tsx
@@ -15,9 +15,11 @@ export function WebsiteDashboard({ dashboardId }: { dashboardId: string }) {
   const editing = useIsDashboardEditing(dashboardId);
   const { dashboard, isLoading } = useDashboard(dashboardId);
   const ensureSpec = useCanvasChatStore((s) => s.ensureSpec);
+  const setTemplate = useCanvasChatStore((s) => s.setTemplate);
 
   const threadId = `dashboard:${dashboardId}`;
   const spec = dashboard?.spec as Spec | null | undefined;
+  const templateId = dashboard?.templateId;
 
   // Entering edit on an existing dashboard: seed the canvas thread with the
   // saved spec so the agent refines the current board instead of a blank
@@ -26,12 +28,18 @@ export function WebsiteDashboard({ dashboardId }: { dashboardId: string }) {
     if (editing && isNonEmptySpec(spec)) ensureSpec(threadId, spec);
   }, [editing, threadId, spec, ensureSpec]);
 
+  // Anchor the thread's agent to this canvas's template (so it builds with the
+  // right context — Dashboard vs Blank — from the first message).
+  useEffect(() => {
+    if (templateId) setTemplate(threadId, templateId);
+  }, [threadId, templateId, setTemplate]);
+
   if (editing) {
     return <WebsiteCanvas threadId={threadId} />;
   }
 
   return (
-    <ScrollArea className="h-full bg-gray-1">
+    <ScrollArea className="scroll-mask-4 h-full bg-background">
       {isNonEmptySpec(spec) ? (
         <ErrorBoundary name="dashboard-renderer" resetKey={spec}>
           <ViewRenderer spec={spec} dashboardId={dashboardId} />
@@ -46,11 +54,11 @@ export function WebsiteDashboard({ dashboardId }: { dashboardId: string }) {
           className="px-6 text-center"
         >
           <Text size="3" weight="bold" className="text-gray-12">
-            {isLoading ? "Loading…" : "Empty dashboard"}
+            {isLoading ? "Loading…" : "Empty canvas"}
           </Text>
           {!isLoading && (
             <Text size="2" className="text-gray-10">
-              Hit Edit to build this dashboard with the agent, then Save.
+              Hit Edit to build this canvas with the agent, then Save.
             </Text>
           )}
         </Flex>
diff --git a/packages/ui/src/features/canvas/components/WebsiteDashboardsIndex.tsx b/packages/ui/src/features/canvas/components/WebsiteDashboardsIndex.tsx
index 949426f25..669341cc8 100644
--- a/packages/ui/src/features/canvas/components/WebsiteDashboardsIndex.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteDashboardsIndex.tsx
@@ -1,25 +1,29 @@
 import { isNonEmptySpec } from "@json-render/core";
 import type { Spec } from "@json-render/react";
-import { DotsThreeIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { DotsThreeIcon, TrashIcon } from "@phosphor-icons/react";
 import type { DashboardSummary } from "@posthog/core/canvas/dashboardSchemas";
 import {
   Button,
+  Card,
+  CardContent,
   cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Text,
 } from "@posthog/quill";
 import { formatRelativeTimeShort } from "@posthog/shared";
+import { NewCanvasMenu } from "@posthog/ui/features/canvas/components/NewCanvasMenu";
 import { CanvasRenderer } from "@posthog/ui/features/canvas/genui/registry";
 import {
-  useCreateAndOpenDashboard,
   useDashboardMutations,
   useDashboards,
 } from "@posthog/ui/features/canvas/hooks/useDashboards";
+import { useSeedShowcase } from "@posthog/ui/features/canvas/hooks/useSeedShowcase";
 import { toast } from "@posthog/ui/primitives/toast";
 import { ErrorBoundary } from "@posthog/ui/shell/ErrorBoundary";
-import { Box, Flex, Grid, ScrollArea, Text } from "@radix-ui/themes";
+import { Box, Flex, Grid, ScrollArea } from "@radix-ui/themes";
 import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 
@@ -31,7 +35,8 @@ const PREVIEW_SCALE = 0.4;
 // live preview. Clicking a card opens the full dashboard.
 export function WebsiteDashboardsIndex({ channelId }: { channelId: string }) {
   const { dashboards, isLoading } = useDashboards(channelId);
-  const createAndOpen = useCreateAndOpenDashboard(channelId);
+  // Seed the built-in component showcase into this channel on first visit.
+  useSeedShowcase(channelId);
 
   if (isLoading) return null;
 
@@ -46,17 +51,14 @@ export function WebsiteDashboardsIndex({ channelId }: { channelId: string }) {
         className="px-6 text-center"
       >
         <Flex direction="column" gap="1">
-          <Text size="3" weight="bold" className="text-gray-12">
-            No dashboards yet
+          <Text size="lg" weight="semibold">
+            No canvases yet
           </Text>
-          <Text size="2" className="text-gray-10">
+          <Text size="sm" variant="muted">
             Create one and build it with the agent, then save it.
           </Text>
         </Flex>
-        <Button variant="primary" onClick={() => void createAndOpen()}>
-          <PlusIcon size={14} />
-          Create dashboard
-        </Button>
+        <NewCanvasMenu channelId={channelId} variant="primary" />
       </Flex>
     );
   }
@@ -92,11 +94,8 @@ function DashboardCard({
         params={{ channelId, dashboardId: summary.id }}
         className="no-underline"
       >
-        <Flex
-          direction="column"
-          className="overflow-hidden rounded-lg border border-gray-6 bg-gray-2 transition-colors hover:border-gray-8"
-        >
-          <Box className="relative h-44 overflow-hidden border-gray-6 border-b bg-gray-1">
+        <Card className="gap-0 overflow-hidden p-0">
+          <Box className="relative h-44 overflow-hidden border-border border-b bg-muted">
             {isNonEmptySpec(spec) ? (
               <Box
                 className="pointer-events-none absolute top-0 left-0 origin-top-left"
@@ -110,22 +109,27 @@ function DashboardCard({
                   resetKey={spec}
                   fallback={<PreviewPlaceholder label="Preview unavailable" />}
                 >
-                  <CanvasRenderer spec={spec} />
+                  <CanvasRenderer spec={spec} state={spec.state} />
                 </ErrorBoundary>
               </Box>
             ) : (
-              <PreviewPlaceholder label="Empty dashboard" />
+              <PreviewPlaceholder label="Empty canvas" />
             )}
           </Box>
-          <Flex direction="column" gap="1" className="p-3">
-            <Text size="2" weight="medium" className="truncate text-gray-12">
+          <CardContent className="flex flex-col gap-0.5 p-3">
+            <Text size="sm" weight="medium" className="truncate">
               {summary.name}
             </Text>
-            <Text size="1" className="text-gray-10">
+            <Text size="xxs" variant="muted">
               Updated {formatRelativeTimeShort(summary.updatedAt)}
             </Text>
-          </Flex>
-        </Flex>
+
+            <Text size="xxs" variant="muted">
+              Created by{" "}
+              {summary.createdBy ? `${summary.createdBy}` : "Unknown"}
+            </Text>
+          </CardContent>
+        </Card>
       </Link>
       {/* Sibling of the Link (not nested) so opening the menu or deleting never
           navigates into the dashboard. */}
@@ -140,7 +144,7 @@ function DashboardCardMenu({ id, name }: { id: string; name: string }) {
 
   const onDelete = () => {
     deleteDashboard(id).catch((error) => {
-      toast.error("Couldn't delete dashboard", {
+      toast.error("Couldn't delete canvas", {
         description: error instanceof Error ? error.message : String(error),
       });
     });
@@ -187,7 +191,7 @@ function PreviewPlaceholder({ label }: { label: string }) {
       justify="center"
       className="absolute inset-0 text-center"
     >
-      <Text size="1" className="text-gray-9">
+      <Text size="xs" variant="muted">
         {label}
       </Text>
     </Flex>
diff --git a/packages/ui/src/features/canvas/components/WebsiteLayout.tsx b/packages/ui/src/features/canvas/components/WebsiteLayout.tsx
index ae7c66364..72781c6b5 100644
--- a/packages/ui/src/features/canvas/components/WebsiteLayout.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteLayout.tsx
@@ -5,15 +5,14 @@ import {
   GitForkIcon,
   HashIcon,
   PencilSimpleIcon,
-  PlusIcon,
   XIcon,
 } from "@phosphor-icons/react";
 import { Button } from "@posthog/quill";
 import { DashboardRefreshControl } from "@posthog/ui/features/canvas/components/DashboardRefreshControl";
+import { NewCanvasMenu } from "@posthog/ui/features/canvas/components/NewCanvasMenu";
 import { dashboardTitleFromSpec } from "@posthog/ui/features/canvas/genui/dashboardTitle";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import {
-  useCreateAndOpenDashboard,
   useDashboard,
   useDashboardMutations,
 } from "@posthog/ui/features/canvas/hooks/useDashboards";
@@ -40,22 +39,6 @@ function threadIdFor(dashboardId: string): string {
   return `dashboard:${dashboardId}`;
 }
 
-// "New dashboard" action, shown in the top bar on the dashboards grid.
-function NewDashboardButton({ channelId }: { channelId: string }) {
-  const createAndOpen = useCreateAndOpenDashboard(channelId);
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      className="no-drag"
-      onClick={() => void createAndOpen()}
-    >
-      <PlusIcon size={14} />
-      New dashboard
-    </Button>
-  );
-}
-
 // Edit toggle + (in edit mode) Save / Save-as-fork for the active dashboard.
 // Lives in the top bar; refresh is a separate control in the toolbar below.
 function DashboardEditControls({
@@ -99,7 +82,7 @@ function DashboardEditControls({
     if (!hasSpec) return;
     try {
       const title =
-        dashboardTitleFromSpec(liveSpec) ?? dashboard?.name ?? "Dashboard";
+        dashboardTitleFromSpec(liveSpec) ?? dashboard?.name ?? "Canvas";
       const name = `${title} (fork)`;
       const record = await createDashboard(channelId, name, liveSpec);
       setEditing(record.id, true);
@@ -184,6 +167,14 @@ export function WebsiteLayout() {
   // The dashboards grid (a channel with no sub-view selected).
   const isDashboardsGrid = Boolean(channelId) && pathname === base;
   const editing = useIsDashboardEditing(dashboardId ?? "");
+
+  // The data toolbar (mock Filter + query refresh) is dashboard-template chrome:
+  // only Dashboard canvases have refreshable queries. A Blank canvas shows none
+  // of it. Legacy canvases (no templateId) default to "dashboard", so they keep
+  // the toolbar as before.
+  const { dashboard } = useDashboard(dashboardId ?? "");
+  const isDashboardTemplate =
+    (dashboard?.templateId ?? "dashboard") === "dashboard";
   const taskTitle = taskId
     ? tasks?.find((t) => t.id === taskId)?.title
     : undefined;
@@ -209,7 +200,7 @@ export function WebsiteLayout() {
       // dashboard's own name is the h1 below, so it isn't repeated as a crumb.
       crumbs.push(
         <ChannelGridLink key="dashboards" channelId={channelId}>
-          Dashboards
+          Canvases
         </ChannelGridLink>,
       );
     } else if (pathname === `${base}/new`) {
@@ -219,17 +210,19 @@ export function WebsiteLayout() {
     } else if (taskId) {
       crumbs.push(<CrumbText key="task">{taskTitle || "Task"}</CrumbText>);
     } else {
-      // The dashboards grid: "Dashboards" is the current (leaf) crumb, replacing
+      // The canvases grid: "Canvases" is the current (leaf) crumb, replacing
       // the old in-page h1.
-      crumbs.push(<CrumbText key="dashboards">Dashboards</CrumbText>);
+      crumbs.push(<CrumbText key="dashboards">Canvases</CrumbText>);
     }
 
     return (
-      <Flex align="center" gap="1" className="min-w-0">
+      <Flex align="center" gap="1" className="-ml-1 min-w-0">
         {crumbs.map((crumb, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: crumb order is stable
           <Fragment key={i}>
-            {i > 0 && <CaretRightIcon size={12} className="text-gray-8" />}
+            {i > 0 && (
+              <CaretRightIcon size={12} className="text-muted-foreground/50" />
+            )}
             {crumb}
           </Fragment>
         ))}
@@ -262,12 +255,13 @@ export function WebsiteLayout() {
             dashboardId={dashboardId}
           />
         ) : isDashboardsGrid && channelId ? (
-          <NewDashboardButton channelId={channelId} />
+          <NewCanvasMenu channelId={channelId} />
         ) : null}
       </Flex>
       {/* Toolbar: a (dead) Filter on the left, refresh on the right. Only on the
-          dashboards grid and a single dashboard — not on tasks/settings. */}
-      {(isDashboardsGrid || isDashboardDetail) && (
+          canvases grid and a single Dashboard-template canvas — not on a Blank
+          canvas (no queries to refresh), tasks, or settings. */}
+      {(isDashboardsGrid || (isDashboardDetail && isDashboardTemplate)) && (
         <Flex
           align="center"
           justify="between"
diff --git a/packages/ui/src/features/canvas/genui/CanvasProviders.tsx b/packages/ui/src/features/canvas/genui/CanvasProviders.tsx
new file mode 100644
index 000000000..19ab4afcd
--- /dev/null
+++ b/packages/ui/src/features/canvas/genui/CanvasProviders.tsx
@@ -0,0 +1,84 @@
+import {
+  createStateStore,
+  getByPath,
+  type StateStore,
+} from "@json-render/core";
+import {
+  ActionProvider,
+  type Spec,
+  StateProvider,
+  useStateStore,
+  ValidationProvider,
+  VisibilityProvider,
+} from "@json-render/react";
+import { type ReactNode, useMemo } from "react";
+
+// Wraps a canvas walk in json-render's declarative-runtime contexts so the
+// shared bodies (bodies.tsx) can resolve dynamic features via hooks:
+//   - StateProvider     — the {$state}/{$bindState} state model (form fields).
+//   - ActionProvider     — `on`/actions dispatch (built-ins: setState, pushState,
+//                          removeState, validateForm).
+//   - ValidationProvider — `validateForm` support.
+//   - VisibilityProvider — `visible` condition evaluation.
+//
+// The store is seeded once from the spec's initial `state`; after that the store
+// owns mutations (typing into a field must not be clobbered by a re-seed). It is
+// re-seeded only when the spec's `state` object identity changes (a new board
+// loads), not on every keystroke.
+export function CanvasProviders({
+  spec,
+  children,
+}: {
+  spec: Spec;
+  children: ReactNode;
+}) {
+  const store = useMemo<StateStore>(
+    () => createStateStore((spec.state ?? {}) as Record<string, unknown>),
+    [spec.state],
+  );
+  return (
+    <StateProvider store={store}>
+      <ActionProvider>
+        <ValidationProvider>
+          <VisibilityProvider>{children}</VisibilityProvider>
+        </ValidationProvider>
+      </ActionProvider>
+    </StateProvider>
+  );
+}
+
+// Replace `{ $state: "/path" }` refs in props with their live value from the
+// state store so read-only dynamic text (e.g. an echoed form value) renders.
+// `{ $bindState: … }` is left intact — the input bodies consume it for two-way
+// binding. `repeat`/`$item`/`$index` are NOT handled yet (they degrade to
+// empty via asText). Subscribes to state, so the node re-renders on change.
+export function useResolvedProps(
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  const { state } = useStateStore();
+  return useMemo(
+    () => resolveStateRefs(props, state) as Record<string, unknown>,
+    [props, state],
+  );
+}
+
+function resolveStateRefs(
+  value: unknown,
+  state: Record<string, unknown>,
+): unknown {
+  if (Array.isArray(value)) {
+    return value.map((v) => resolveStateRefs(v, state));
+  }
+  if (value && typeof value === "object") {
+    const obj = value as Record<string, unknown>;
+    if ("$bindState" in obj) return obj; // two-way binding — leave for inputs
+    if ("$state" in obj && typeof obj.$state === "string") {
+      return getByPath(state, obj.$state);
+    }
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(obj))
+      out[k] = resolveStateRefs(v, state);
+    return out;
+  }
+  return value;
+}
diff --git a/packages/ui/src/features/canvas/genui/EditRenderer.tsx b/packages/ui/src/features/canvas/genui/EditRenderer.tsx
index a545d1a23..aad998411 100644
--- a/packages/ui/src/features/canvas/genui/EditRenderer.tsx
+++ b/packages/ui/src/features/canvas/genui/EditRenderer.tsx
@@ -1,14 +1,23 @@
 import type { Spec } from "@json-render/react";
 import {
   type BodyCtx,
+  type ElementOn,
   PLAIN_CTX,
   renderBody,
 } from "@posthog/ui/features/canvas/genui/bodies";
+import {
+  CanvasProviders,
+  useResolvedProps,
+} from "@posthog/ui/features/canvas/genui/CanvasProviders";
 import { isEditableTextProp } from "@posthog/ui/features/canvas/genui/editable";
 import { useCanvasChatStore } from "@posthog/ui/features/canvas/stores/canvasChatStore";
 import { Tooltip } from "@radix-ui/themes";
 import { type ReactNode, useRef } from "react";
 
+// Stable empty-props ref so the resolve hook can run unconditionally (even for a
+// missing element) without re-resolving on every render.
+const EMPTY_PROPS: Record<string, unknown> = {};
+
 // Edit-mode renderer: a thin recursive walk over the json-render Spec (the map
 // key IS the element id, which createRenderer doesn't expose). Each element is
 // rendered via the SAME presentational bodies as view mode (bodies.tsx), wrapped
@@ -26,13 +35,15 @@ export function EditRenderer({
   interactive: boolean;
 }) {
   return (
-    <EditNode
-      spec={spec}
-      threadId={threadId}
-      elementKey={spec.root}
-      parentKey={null}
-      interactive={interactive}
-    />
+    <CanvasProviders spec={spec}>
+      <EditNode
+        spec={spec}
+        threadId={threadId}
+        elementKey={spec.root}
+        parentKey={null}
+        interactive={interactive}
+      />
+    </CanvasProviders>
   );
 }
 
@@ -50,7 +61,19 @@ function EditNode({
   interactive: boolean;
 }) {
   const element = spec.elements[elementKey];
-  if (!element) return null;
+  // Resolve {$state} reads for display (live echo while building). Hooks must run
+  // unconditionally, so call before the missing-element guard. Editability still
+  // keys off the RAW props (makeEditCtx below), so a {$state} value stays
+  // non-editable — only literal text is inline-editable.
+  const resolvedProps = useResolvedProps(element?.props ?? EMPTY_PROPS);
+  if (!element) {
+    // A parent lists this key in `children` but no element is defined for it
+    // (a dangling reference). View mode renders nothing; edit mode surfaces it
+    // so the gap is obvious instead of a mysterious empty card.
+    return interactive ? (
+      <BrokenRef label={`missing element "${elementKey}"`} />
+    ) : null;
+  }
 
   const childKeys = element.children ?? [];
   const children =
@@ -71,7 +94,20 @@ function EditNode({
     ? makeEditCtx(threadId, elementKey, element.type, element.props)
     : PLAIN_CTX;
 
-  const body = renderBody(element.type, element.props, children, ctx);
+  const body = renderBody(
+    element.type,
+    resolvedProps,
+    children,
+    ctx,
+    element.on as ElementOn | undefined,
+  );
+  // renderBody returns null for a component type not in the catalog. Stay silent
+  // in view mode; flag it in edit mode so unknown types aren't invisible.
+  if (body == null) {
+    return interactive ? (
+      <BrokenRef label={`unknown component "${element.type}"`} />
+    ) : null;
+  }
 
   // Root renders bare; children get a hover frame to signal they're editable.
   if (!interactive || parentKey === null) return body;
@@ -100,6 +136,16 @@ function makeEditCtx(
   };
 }
 
+// Edit-mode-only marker for a structural gap (dangling child / unknown type) so
+// it reads as a clear warning instead of an unexplained empty space.
+function BrokenRef({ label }: { label: string }) {
+  return (
+    <div className="rounded border border-amber-6 border-dashed bg-amber-2 px-3 py-2 text-amber-11 text-xs">
+      ⚠ {label}
+    </div>
+  );
+}
+
 function HoverFrame({ children }: { children: ReactNode }) {
   return (
     <div className="group/edit relative">
diff --git a/packages/ui/src/features/canvas/genui/ViewRenderer.tsx b/packages/ui/src/features/canvas/genui/ViewRenderer.tsx
index 29931493e..a7b6c7262 100644
--- a/packages/ui/src/features/canvas/genui/ViewRenderer.tsx
+++ b/packages/ui/src/features/canvas/genui/ViewRenderer.tsx
@@ -1,16 +1,28 @@
 import type { Spec } from "@json-render/react";
+import { useIsVisible } from "@json-render/react";
 import { ArrowClockwiseIcon } from "@phosphor-icons/react";
 import {
+  type ElementOn,
   PLAIN_CTX,
   renderBody,
 } from "@posthog/ui/features/canvas/genui/bodies";
+import {
+  CanvasProviders,
+  useResolvedProps,
+} from "@posthog/ui/features/canvas/genui/CanvasProviders";
 import { useRefreshDashboard } from "@posthog/ui/features/canvas/hooks/useRefreshDashboard";
 import { Box, IconButton } from "@radix-ui/themes";
 import type { ReactNode } from "react";
 
-// Read-only renderer for a saved dashboard. Mirrors the shared bodies (so it's
+// Stable empty-props reference so the resolve hook runs unconditionally (even
+// for a missing element) without churning on every render.
+const EMPTY_PROPS: Record<string, unknown> = {};
+
+// Read-only renderer for a saved canvas. Mirrors the shared bodies (so it's
 // pixel-identical to edit mode) but is a key-aware walk so each Card can carry a
 // hover "refresh this card" button — createRenderer doesn't expose element keys.
+// The walk is wrapped in CanvasProviders so the declarative dynamic features
+// (state, {$state}/{$bindState} bindings, `visible`, `on`/actions) resolve.
 export function ViewRenderer({
   spec,
   dashboardId,
@@ -20,12 +32,14 @@ export function ViewRenderer({
 }) {
   const { refresh, isRefreshing } = useRefreshDashboard(dashboardId);
   return (
-    <ViewNode
-      spec={spec}
-      elementKey={spec.root}
-      onRefreshCard={(cardKey) => refresh({ elementKeys: [cardKey] })}
-      isRefreshing={isRefreshing}
-    />
+    <CanvasProviders spec={spec}>
+      <ViewNode
+        spec={spec}
+        elementKey={spec.root}
+        onRefreshCard={(cardKey) => refresh({ elementKeys: [cardKey] })}
+        isRefreshing={isRefreshing}
+      />
+    </CanvasProviders>
   );
 }
 
@@ -41,7 +55,11 @@ function ViewNode({
   isRefreshing: boolean;
 }) {
   const element = spec.elements[elementKey];
-  if (!element) return null;
+  // Hooks must run unconditionally and in stable order, so call them before any
+  // early return (a missing/hidden element can't change the hook count).
+  const visible = useIsVisible(element?.visible);
+  const resolvedProps = useResolvedProps(element?.props ?? EMPTY_PROPS);
+  if (!element || !visible) return null;
 
   const childKeys = element.children ?? [];
   const children =
@@ -57,7 +75,13 @@ function ViewNode({
         ))
       : undefined;
 
-  const body = renderBody(element.type, element.props, children, PLAIN_CTX);
+  const body = renderBody(
+    element.type,
+    resolvedProps,
+    children,
+    PLAIN_CTX,
+    element.on as ElementOn | undefined,
+  );
 
   if (element.type === "Card") {
     return (
diff --git a/packages/ui/src/features/canvas/genui/bodies.tsx b/packages/ui/src/features/canvas/genui/bodies.tsx
index fee42ad6a..4edb1dc31 100644
--- a/packages/ui/src/features/canvas/genui/bodies.tsx
+++ b/packages/ui/src/features/canvas/genui/bodies.tsx
@@ -1,5 +1,73 @@
-import { Badge, Box, Flex, Grid, Heading, Table, Text } from "@radix-ui/themes";
-import type { ReactNode } from "react";
+import { type ActionBinding, getByPath } from "@json-render/core";
+import { useActions, useStateStore } from "@json-render/react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Checkbox,
+  Heading,
+  Input,
+  Label,
+  Progress,
+  ProgressIndicator,
+  ProgressTrack,
+  TableBody as QuillTableBody,
+  Separator,
+  Table,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+} from "@posthog/quill";
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  type Series,
+  Sparkline,
+  useChartTheme,
+} from "@posthog/quill-charts";
+import { MarkdownRenderer } from "@posthog/ui/features/editor/components/MarkdownRenderer";
+import { Box, Flex, Grid } from "@radix-ui/themes";
+import { type ReactNode, useId } from "react";
+import rehypeSanitize from "rehype-sanitize";
+
+// The agent's Badge palette (gray/green/red/amber/blue) mapped to Quill Badge's
+// semantic variants. Keeps the catalog contract stable while rendering in Quill.
+const BADGE_VARIANT: Record<
+  NonNullable<BadgeProps["color"]>,
+  "default" | "success" | "destructive" | "warning" | "info"
+> = {
+  gray: "default",
+  green: "success",
+  red: "destructive",
+  amber: "warning",
+  blue: "info",
+};
+
+// An element's event→action bindings (json-render `on` field). A single event
+// (e.g. "click") maps to one action or a list run in order.
+export type ElementOn = Record<string, ActionBinding | ActionBinding[]>;
+
+function bindingPath(value: unknown): string | undefined {
+  if (value && typeof value === "object" && "$bindState" in value) {
+    const path = (value as { $bindState: unknown }).$bindState;
+    return typeof path === "string" ? path : undefined;
+  }
+  return undefined;
+}
+
+function bindingsFor(
+  on: ElementOn | undefined,
+  event: string,
+): ActionBinding[] {
+  const b = on?.[event];
+  if (!b) return [];
+  return Array.isArray(b) ? b : [b];
+}
 
 // Presentational bodies for every catalog component, shared by both the view
 // renderer (registry.tsx → createRenderer) and the edit renderer
@@ -55,6 +123,69 @@ export interface BadgeProps {
   text: string;
   color?: "gray" | "green" | "red" | "amber" | "blue";
 }
+export type CanvasTone = "default" | "muted" | "accent" | "contrast";
+
+// Constrained, theme-aware backgrounds (no arbitrary CSS) so agent-built pages
+// stay on-brand and dark-mode-safe. Maps a tone to bg + text classes.
+const TONE_CLASS: Record<CanvasTone, string> = {
+  default: "",
+  muted: "bg-gray-3 text-gray-12",
+  accent: "bg-accent-3 text-gray-12",
+  contrast: "bg-gray-12 text-gray-1",
+};
+
+function toneClass(tone?: CanvasTone): string {
+  return TONE_CLASS[tone ?? "default"];
+}
+
+export interface HeroProps {
+  title: string;
+  eyebrow?: string;
+  subtitle?: string;
+  ctaText?: string;
+  tone?: CanvasTone;
+}
+export interface SectionProps {
+  tone?: CanvasTone;
+}
+export interface MarkdownProps {
+  content: string;
+}
+export interface ButtonProps {
+  text: string;
+  variant?: "primary" | "default" | "outline" | "destructive";
+}
+export interface TextInputProps {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+}
+export interface CheckboxProps {
+  label: string;
+  checked?: boolean;
+}
+export interface ChartSeriesInput {
+  label: string;
+  data: number[];
+}
+export interface LineChartProps {
+  labels: string[];
+  series: ChartSeriesInput[];
+}
+export interface BarChartProps {
+  labels: string[];
+  series: ChartSeriesInput[];
+}
+export interface SparklineProps {
+  data: number[];
+}
+export interface PieChartProps {
+  items: { label: string; value: number }[];
+}
+export interface ProgressProps {
+  label?: string;
+  value: number;
+}
 
 export function PageBody({
   props,
@@ -66,14 +197,14 @@ export function PageBody({
   ctx: BodyCtx;
 }) {
   return (
-    <Flex direction="column" gap="4" p="5">
+    <div className="flex flex-col gap-6 p-4">
       {props.title && (
-        <Heading size="6" className="text-gray-12">
-          {ctx.text("/title", props.title)}
+        <Heading size="lg" className="text-gray-12">
+          {ctx.text("/title", asText(props.title))}
         </Heading>
       )}
       {children}
-    </Flex>
+    </div>
   );
 }
 
@@ -102,14 +233,16 @@ export function CardBody({
   ctx: BodyCtx;
 }) {
   return (
-    <Box className="rounded-lg border border-gray-6 bg-gray-1 p-4">
+    <Card size="sm">
       {props.title && (
-        <Text size="2" weight="bold" className="mb-2 block text-gray-12">
-          {ctx.text("/title", props.title)}
-        </Text>
+        <CardHeader>
+          <Heading size="lg" className="font-bold text-foreground">
+            {ctx.text("/title", asText(props.title))}
+          </Heading>
+        </CardHeader>
       )}
-      {children}
-    </Box>
+      <CardContent className="flex flex-col gap-4">{children}</CardContent>
+    </Card>
   );
 }
 
@@ -122,10 +255,10 @@ export function HeadingBody({
 }) {
   return (
     <Heading
-      size={props.level === 1 ? "6" : props.level === 3 ? "3" : "4"}
-      className="text-gray-12"
+      size={props.level === 1 ? "2xl" : props.level === 3 ? "base" : "sm"}
+      className="font-bold text-gray-12"
     >
-      {ctx.text("/text", props.text)}
+      {ctx.text("/text", asText(props.text))}
     </Heading>
   );
 }
@@ -133,34 +266,47 @@ export function HeadingBody({
 export function TextBody({ props, ctx }: { props: TextProps; ctx: BodyCtx }) {
   return (
     <Text
-      size="2"
-      as="p"
-      className={props.muted ? "text-gray-10" : "text-gray-12"}
+      size="sm"
+      render={<p />}
+      className={props.muted ? "text-muted-foreground" : "text-foreground"}
     >
-      {ctx.text("/text", props.text)}
+      {ctx.text("/text", asText(props.text))}
     </Text>
   );
 }
 
 const numberFormat = new Intl.NumberFormat();
 
+// Spec props must be literal strings/numbers — this renderer doesn't resolve
+// json-render bindings ({$state}/{$item}/{$bindItem}). If the agent emits one
+// anyway, render nothing rather than letting React throw "Objects are not valid
+// as a React child" and blanking the whole canvas.
+function asText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return numberFormat.format(value as number | bigint);
+  }
+  return "";
+}
+
 // Group raw numbers (e.g. 34980058 → 34,980,058); leave pre-formatted strings.
-function formatStatValue(value: string | number): string {
-  return typeof value === "number" ? numberFormat.format(value) : value;
+function formatStatValue(value: unknown): string {
+  return typeof value === "number" ? numberFormat.format(value) : asText(value);
 }
 
 export function StatBody({ props, ctx }: { props: StatProps; ctx: BodyCtx }) {
   return (
     <Flex direction="column" gap="1">
-      <Text size="1" className="text-gray-10">
-        {ctx.text("/label", props.label)}
-      </Text>
-      <Text size="7" weight="bold" className="text-gray-12">
+      <Label className="text-muted-foreground">
+        {ctx.text("/label", asText(props.label))}
+      </Label>
+      <Heading size="2xl" className="font-bold text-gray-12">
         {ctx.data(formatStatValue(props.value))}
-      </Text>
+      </Heading>
       {props.delta && (
-        <Text size="1" className="text-gray-10">
-          {ctx.data(props.delta)}
+        <Text size="sm" className="text-gray-10">
+          {ctx.data(asText(props.delta))}
         </Text>
       )}
     </Flex>
@@ -169,26 +315,26 @@ export function StatBody({ props, ctx }: { props: StatProps; ctx: BodyCtx }) {
 
 export function TableBody({ props }: { props: TableProps; ctx: BodyCtx }) {
   return (
-    <Table.Root size="1" variant="surface">
-      <Table.Header>
-        <Table.Row>
+    <Table stickyHeader className="max-h-72 rounded-md border border-border">
+      <TableHeader>
+        <TableRow>
           {props.columns.map((col) => (
-            <Table.ColumnHeaderCell key={col}>{col}</Table.ColumnHeaderCell>
+            <TableHead key={asText(col)}>{asText(col)}</TableHead>
           ))}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
+        </TableRow>
+      </TableHeader>
+      <QuillTableBody>
         {props.rows.map((row, ri) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: spec rows have no id
-          <Table.Row key={ri}>
+          <TableRow key={ri}>
             {row.map((cell, ci) => (
               // biome-ignore lint/suspicious/noArrayIndexKey: spec cells have no id
-              <Table.Cell key={ci}>{String(cell)}</Table.Cell>
+              <TableCell key={ci}>{asText(cell)}</TableCell>
             ))}
-          </Table.Row>
+          </TableRow>
         ))}
-      </Table.Body>
-    </Table.Root>
+      </QuillTableBody>
+    </Table>
   );
 }
 
@@ -200,20 +346,24 @@ export function BarListBody({ props }: { props: BarListProps; ctx: BodyCtx }) {
       {items.map((item, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: spec items have no id
         <Flex key={i} align="center" gap="2">
-          <Box className="relative h-6 flex-1 overflow-hidden rounded bg-gray-3">
+          <Box className="relative h-6 flex-1 overflow-hidden rounded bg-muted">
             <Box
               className="absolute inset-y-0 left-0 rounded bg-accent-5"
               style={{ width: `${(item.value / max) * 100}%` }}
             />
             <Text
-              size="1"
-              className="absolute inset-y-0 left-2 flex items-center text-gray-12"
+              size="sm"
+              className="absolute inset-y-0 left-2 flex items-center"
             >
-              {item.label}
+              {asText(item.label)}
             </Text>
           </Box>
-          <Text size="1" weight="bold" className="w-12 text-right text-gray-11">
-            {item.value}
+          <Text
+            size="sm"
+            weight="semibold"
+            className="min-w-12 shrink-0 whitespace-nowrap text-right font-mono tabular-nums"
+          >
+            {asText(item.value)}
           </Text>
         </Flex>
       ))}
@@ -223,12 +373,274 @@ export function BarListBody({ props }: { props: BarListProps; ctx: BodyCtx }) {
 
 export function BadgeBody({ props, ctx }: { props: BadgeProps; ctx: BodyCtx }) {
   return (
-    <Badge color={props.color ?? "gray"}>{ctx.text("/text", props.text)}</Badge>
+    <Badge variant={BADGE_VARIANT[props.color ?? "gray"]}>
+      {ctx.text("/text", asText(props.text))}
+    </Badge>
+  );
+}
+
+// Map the LLM-friendly { label, data } catalog shape to quill-charts `Series`.
+// `key` keys React/stacked lookups; fall back to the index when labels collide.
+function toSeries(series: ChartSeriesInput[]): Series[] {
+  return (series ?? []).map((s, i) => ({
+    key: s.label || `series-${i}`,
+    label: s.label,
+    data: s.data ?? [],
+  }));
+}
+
+export function LineChartBody({
+  props,
+}: {
+  props: LineChartProps;
+  ctx: BodyCtx;
+}) {
+  const theme = useChartTheme();
+  // The chart root is `flex:1 1 0`, so it must fill a flex column with a
+  // definite height — a plain block lets it collapse to nothing.
+  return (
+    <Box className="flex h-64 w-full flex-col">
+      <LineChart
+        labels={props.labels ?? []}
+        series={toSeries(props.series)}
+        theme={theme}
+      />
+    </Box>
+  );
+}
+
+export function BarChartBody({
+  props,
+}: {
+  props: BarChartProps;
+  ctx: BodyCtx;
+}) {
+  const theme = useChartTheme();
+  return (
+    <Box className="flex h-64 w-full flex-col">
+      <BarChart
+        labels={props.labels ?? []}
+        series={toSeries(props.series)}
+        theme={theme}
+      />
+    </Box>
+  );
+}
+
+export function SparklineBody({
+  props,
+}: {
+  props: SparklineProps;
+  ctx: BodyCtx;
+}) {
+  const theme = useChartTheme();
+  // Sparkline sizes itself via its `height` prop (no flex container needed).
+  return (
+    <Box className="w-full">
+      <Sparkline data={props.data ?? []} theme={theme} height={48} />
+    </Box>
+  );
+}
+
+export function PieChartBody({
+  props,
+}: {
+  props: PieChartProps;
+  ctx: BodyCtx;
+}) {
+  const theme = useChartTheme();
+  // Each item is one slice: map to a single-value series (PieChart derives the
+  // slice magnitude from the series, so data: [value] is enough).
+  const series: Series[] = (props.items ?? []).map((it, i) => ({
+    key: it.label || `slice-${i}`,
+    label: it.label,
+    data: [it.value],
+  }));
+  return (
+    <Box className="flex h-64 w-full flex-col">
+      <PieChart series={series} theme={theme} />
+    </Box>
+  );
+}
+
+export function ProgressBody({
+  props,
+  ctx,
+}: {
+  props: ProgressProps;
+  ctx: BodyCtx;
+}) {
+  const value = Math.max(0, Math.min(100, Number(props.value) || 0));
+  return (
+    <Flex direction="column" gap="1">
+      {props.label && (
+        <Flex align="center" justify="between">
+          <Text size="sm" className="text-gray-11">
+            {ctx.text("/label", asText(props.label))}
+          </Text>
+          <Text size="sm" className="text-gray-11 tabular-nums">
+            {value}%
+          </Text>
+        </Flex>
+      )}
+      <Progress value={value}>
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      </Progress>
+    </Flex>
+  );
+}
+
+export function SectionBody({
+  props,
+  children,
+}: {
+  props: SectionProps;
+  children?: ReactNode;
+  ctx: BodyCtx;
+}) {
+  return (
+    <Box className={`rounded-xl px-6 py-8 ${toneClass(props.tone)}`}>
+      <Flex direction="column" gap="4">
+        {children}
+      </Flex>
+    </Box>
+  );
+}
+
+export function HeroBody({ props, ctx }: { props: HeroProps; ctx: BodyCtx }) {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      gap="3"
+      py="8"
+      className={`rounded-xl px-6 text-center ${toneClass(props.tone)}`}
+    >
+      {props.eyebrow && (
+        <Text size="sm" weight="semibold" className="text-accent-11 uppercase">
+          {ctx.text("/eyebrow", asText(props.eyebrow))}
+        </Text>
+      )}
+      <Heading size="2xl" className="max-w-3xl text-balance text-gray-12">
+        {ctx.text("/title", asText(props.title))}
+      </Heading>
+      {props.subtitle && (
+        <Text size="base" className="max-w-2xl text-pretty text-gray-10">
+          {ctx.text("/subtitle", asText(props.subtitle))}
+        </Text>
+      )}
+      {props.ctaText && (
+        <Button variant="primary" size="lg" className="mt-2">
+          {ctx.text("/ctaText", asText(props.ctaText))}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+export function MarkdownBody({
+  props,
+}: {
+  props: MarkdownProps;
+  ctx: BodyCtx;
+}) {
+  return (
+    <Box className="text-gray-12">
+      {/* Sanitized: Markdown only, raw HTML is stripped (untrusted agent text). */}
+      <MarkdownRenderer
+        content={asText(props.content)}
+        rehypePlugins={[rehypeSanitize]}
+      />
+    </Box>
+  );
+}
+
+export function ButtonBody({
+  props,
+  on,
+  ctx,
+}: {
+  props: ButtonProps;
+  on?: ElementOn;
+  ctx: BodyCtx;
+}) {
+  const actions = useActions();
+  const clickBindings = bindingsFor(on, "click");
+  const onClick =
+    clickBindings.length > 0
+      ? () => {
+          for (const binding of clickBindings) void actions.execute(binding);
+        }
+      : undefined;
+  return (
+    <Button variant={props.variant ?? "primary"} onClick={onClick}>
+      {ctx.text("/text", asText(props.text))}
+    </Button>
+  );
+}
+
+// Two-way text field. When `value` is `{ $bindState: "/path" }` it reads from /
+// writes to the state store (controlled). Without a binding it falls back to an
+// uncontrolled field so the user can still type (value just isn't persisted).
+// NB: unlike createRenderer, our manual walk does NOT pre-resolve the bound
+// value, so we read it from the store here — `useBoundProp` only echoes the prop
+// it's handed and would leave the field frozen.
+export function TextInputBody({
+  props,
+}: {
+  props: TextInputProps;
+  ctx: BodyCtx;
+}) {
+  const { state, set } = useStateStore();
+  const path = bindingPath((props as { value?: unknown }).value);
+  const bound = path !== undefined;
+  const value = bound
+    ? ((getByPath(state, path) as string | undefined) ?? "")
+    : undefined;
+  return (
+    <Flex direction="column" gap="1">
+      {props.label && <Text size="sm">{asText(props.label)}</Text>}
+      <Input
+        value={value}
+        defaultValue={bound ? undefined : asText(props.value)}
+        placeholder={props.placeholder}
+        onChange={bound ? (e) => set(path, e.target.value) : undefined}
+      />
+    </Flex>
+  );
+}
+
+export function CheckboxBody({
+  props,
+}: {
+  props: CheckboxProps;
+  ctx: BodyCtx;
+}) {
+  const id = useId();
+  const { state, set } = useStateStore();
+  const path = bindingPath((props as { checked?: unknown }).checked);
+  const bound = path !== undefined;
+  const checked = bound
+    ? getByPath(state, path) === true
+    : props.checked === true;
+  return (
+    <Flex align="center" gap="2">
+      <Checkbox
+        id={id}
+        checked={checked}
+        onCheckedChange={bound ? (c) => set(path, c === true) : undefined}
+      />
+      <Label htmlFor={id} className="text-foreground">
+        {asText(props.label)}
+      </Label>
+    </Flex>
   );
 }
 
 export function DividerBody() {
-  return <Box className="my-2 h-px bg-gray-6" />;
+  return <Separator />;
 }
 
 // Dispatch a spec element (untyped JSON props) to its presentational body.
@@ -238,6 +650,7 @@ export function renderBody(
   props: Record<string, unknown>,
   children: ReactNode,
   ctx: BodyCtx,
+  on?: ElementOn,
 ): ReactNode {
   const p = props as never;
   switch (type) {
@@ -269,8 +682,34 @@ export function renderBody(
       return <TableBody props={p} ctx={ctx} />;
     case "BarList":
       return <BarListBody props={p} ctx={ctx} />;
+    case "LineChart":
+      return <LineChartBody props={p} ctx={ctx} />;
+    case "BarChart":
+      return <BarChartBody props={p} ctx={ctx} />;
+    case "Sparkline":
+      return <SparklineBody props={p} ctx={ctx} />;
+    case "PieChart":
+      return <PieChartBody props={p} ctx={ctx} />;
+    case "Progress":
+      return <ProgressBody props={p} ctx={ctx} />;
     case "Badge":
       return <BadgeBody props={p} ctx={ctx} />;
+    case "Section":
+      return (
+        <SectionBody props={p} ctx={ctx}>
+          {children}
+        </SectionBody>
+      );
+    case "Hero":
+      return <HeroBody props={p} ctx={ctx} />;
+    case "Markdown":
+      return <MarkdownBody props={p} ctx={ctx} />;
+    case "Button":
+      return <ButtonBody props={p} on={on} ctx={ctx} />;
+    case "TextInput":
+      return <TextInputBody props={p} ctx={ctx} />;
+    case "Checkbox":
+      return <CheckboxBody props={p} ctx={ctx} />;
     case "Divider":
       return <DividerBody />;
     default:
diff --git a/packages/ui/src/features/canvas/genui/catalog.ts b/packages/ui/src/features/canvas/genui/catalog.ts
index 426b5b0fb..fd63eaf6b 100644
--- a/packages/ui/src/features/canvas/genui/catalog.ts
+++ b/packages/ui/src/features/canvas/genui/catalog.ts
@@ -1,87 +1,13 @@
 import { defineCatalog } from "@json-render/core";
 import { schema } from "@json-render/react";
-import { z } from "zod";
+import { CANVAS_COMPONENTS } from "@posthog/core/canvas/componentCatalog";
 
-// The component catalog the canvas agent may emit. Shared contract between the
-// renderer (which renders it, see registry.tsx) and the agent (which receives
-// CANVAS_SYSTEM_PROMPT describing it). Keep components small and composable.
+// Renderer-side catalog: built on @json-render/react's `schema` so the view +
+// edit renderers (registry.tsx → createRenderer) can render it. The component
+// contract lives in @posthog/core/canvas/componentCatalog (one source for both
+// renderer and main); the per-template agent system prompt is generated in the
+// main process (CanvasTemplatesService), no longer here.
 export const canvasCatalog = defineCatalog(schema, {
-  components: {
-    Page: {
-      props: z.object({ title: z.string().optional() }),
-      slots: ["default"],
-      description: "Top-level page container; a vertical stack of sections.",
-    },
-    Grid: {
-      props: z.object({ columns: z.number().int().min(1).max(4).optional() }),
-      slots: ["default"],
-      description: "Responsive grid. Place Cards or Stats inside.",
-    },
-    Card: {
-      props: z.object({ title: z.string().optional() }),
-      slots: ["default"],
-      description: "Bordered surface grouping related content.",
-    },
-    Heading: {
-      props: z.object({
-        text: z.string(),
-        level: z.number().int().min(1).max(3).optional(),
-      }),
-      description: "A section heading (level 1 largest).",
-    },
-    Text: {
-      props: z.object({ text: z.string(), muted: z.boolean().optional() }),
-      description: "A paragraph of text.",
-    },
-    Stat: {
-      props: z.object({
-        label: z.string(),
-        value: z.union([z.string(), z.number()]),
-        delta: z.string().optional(),
-      }),
-      description: "A single big metric with a label and optional delta.",
-    },
-    Table: {
-      props: z.object({
-        columns: z.array(z.string()),
-        rows: z.array(z.array(z.union([z.string(), z.number()]))),
-      }),
-      description: "A data table with column headers and rows.",
-    },
-    BarList: {
-      props: z.object({
-        items: z.array(z.object({ label: z.string(), value: z.number() })),
-      }),
-      description: "Horizontal bar list for ranked breakdowns.",
-    },
-    Badge: {
-      props: z.object({
-        text: z.string(),
-        color: z.enum(["gray", "green", "red", "amber", "blue"]).optional(),
-      }),
-      description: "A small status pill.",
-    },
-    Divider: {
-      props: z.object({}),
-      description: "A horizontal divider.",
-    },
-  },
+  components: CANVAS_COMPONENTS,
   actions: {},
 });
-
-// System prompt handed to the agent (inline mode = brief prose + JSONL patches).
-export const CANVAS_SYSTEM_PROMPT = canvasCatalog.prompt({
-  mode: "inline",
-  system:
-    "You are PostHog Canvas, an agent that builds live, data-driven dashboards and mini-apps for the user's current PostHog project.",
-  customRules: [
-    "Always use the PostHog MCP tools (named mcp__posthog__*) to fetch REAL data for the current project before rendering any numbers. Never fabricate metrics.",
-    "Build the UI exclusively from the component catalog, emitting json-render JSONL patches.",
-    "Do NOT write files, edit code, or run shell commands. Respond with brief prose plus json-render JSONL patches only.",
-    "ALWAYS begin the dashboard with a single h1 title: the FIRST child of the root Page MUST be a `Heading` with `level` 1 whose `text` is the dashboard's title. This h1 IS the dashboard's name (it's used to name the saved file), so keep it short (2–5 words) and descriptive of what the board shows. Never omit it and never use level 1 for any other heading.",
-    "Prefer a Page > Heading(level 1) > Grid > Card/Stat structure. Keep it concise and skimmable.",
-    'Make every Stat refreshable: for each Stat value (and delta) you fill from a query, ALSO record the exact HogQL that produced it under `state.queries`. Emit a patch that sets `state.queries.<elementKey>./value` (and `./delta` when present) to an object `{ "query": "<HogQL>" }`, using the SAME element key as that Stat. The HogQL MUST return exactly one row and one column (e.g. `SELECT count() FROM events WHERE ...`); refresh reads row 0, column 0.',
-    'Worked example — a Stat with element key "stat_pageviews": set its props.value to the fetched number AND set `state.queries.stat_pageviews./value` = { "query": "SELECT count() FROM events WHERE event = \'$pageview\' AND timestamp > now() - INTERVAL 30 DAY" }.',
-    'Store raw numeric values in Stat.value (e.g. 34980058, not "34,980,058") — the UI formats them. You may omit queries for Table and BarList for now.',
-  ],
-});
diff --git a/packages/ui/src/features/canvas/genui/dashboardTitle.ts b/packages/ui/src/features/canvas/genui/dashboardTitle.ts
index 94b7799ee..c316d3bb4 100644
--- a/packages/ui/src/features/canvas/genui/dashboardTitle.ts
+++ b/packages/ui/src/features/canvas/genui/dashboardTitle.ts
@@ -2,7 +2,8 @@ import type { Spec } from "@json-render/react";
 
 /**
  * The dashboard's title: the text of the top-level h1 Heading the canvas always
- * starts with (see CANVAS_SYSTEM_PROMPT). This h1 is the dashboard's name —
+ * starts with (see the per-template rules in core/canvas/canvasTemplates). This
+ * h1 is the dashboard's name —
  * editing it (by the agent or inline) renames the saved dashboard. Falls back to
  * the root Page's `title` prop, then to undefined when no title is present.
  */
diff --git a/packages/ui/src/features/canvas/genui/editable.ts b/packages/ui/src/features/canvas/genui/editable.ts
index 829322579..39f5f4adc 100644
--- a/packages/ui/src/features/canvas/genui/editable.ts
+++ b/packages/ui/src/features/canvas/genui/editable.ts
@@ -14,6 +14,8 @@ const EDITABLE_TEXT_PROPS: Record<string, readonly string[]> = {
   Text: ["/text"],
   Stat: ["/label"],
   Badge: ["/text"],
+  Hero: ["/title", "/eyebrow", "/subtitle", "/ctaText"],
+  Button: ["/text"],
 };
 
 export function isEditableTextProp(
diff --git a/packages/ui/src/features/canvas/genui/registry.tsx b/packages/ui/src/features/canvas/genui/registry.tsx
index 22029f3cf..f62adcea7 100644
--- a/packages/ui/src/features/canvas/genui/registry.tsx
+++ b/packages/ui/src/features/canvas/genui/registry.tsx
@@ -1,16 +1,28 @@
 import { createRenderer } from "@json-render/react";
 import {
   BadgeBody,
+  BarChartBody,
   BarListBody,
+  ButtonBody,
   CardBody,
+  CheckboxBody,
   DividerBody,
+  type ElementOn,
   GridBody,
   HeadingBody,
+  HeroBody,
+  LineChartBody,
+  MarkdownBody,
   PageBody,
+  PieChartBody,
   PLAIN_CTX,
+  ProgressBody,
+  SectionBody,
+  SparklineBody,
   StatBody,
   TableBody,
   TextBody,
+  TextInputBody,
 } from "@posthog/ui/features/canvas/genui/bodies";
 import { canvasCatalog } from "@posthog/ui/features/canvas/genui/catalog";
 
@@ -43,6 +55,43 @@ export const CanvasRenderer = createRenderer(canvasCatalog, {
   BarList: ({ element }) => (
     <BarListBody props={element.props} ctx={PLAIN_CTX} />
   ),
+  LineChart: ({ element }) => (
+    <LineChartBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  BarChart: ({ element }) => (
+    <BarChartBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  Sparkline: ({ element }) => (
+    <SparklineBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  PieChart: ({ element }) => (
+    <PieChartBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  Progress: ({ element }) => (
+    <ProgressBody props={element.props} ctx={PLAIN_CTX} />
+  ),
   Badge: ({ element }) => <BadgeBody props={element.props} ctx={PLAIN_CTX} />,
+  Section: ({ element, children }) => (
+    <SectionBody props={element.props} ctx={PLAIN_CTX}>
+      {children}
+    </SectionBody>
+  ),
+  Hero: ({ element }) => <HeroBody props={element.props} ctx={PLAIN_CTX} />,
+  Markdown: ({ element }) => (
+    <MarkdownBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  Button: ({ element }) => (
+    <ButtonBody
+      props={element.props}
+      on={element.on as ElementOn | undefined}
+      ctx={PLAIN_CTX}
+    />
+  ),
+  TextInput: ({ element }) => (
+    <TextInputBody props={element.props} ctx={PLAIN_CTX} />
+  ),
+  Checkbox: ({ element }) => (
+    <CheckboxBody props={element.props} ctx={PLAIN_CTX} />
+  ),
   Divider: () => <DividerBody />,
 });
diff --git a/packages/ui/src/features/canvas/genui/showcaseSpec.ts b/packages/ui/src/features/canvas/genui/showcaseSpec.ts
new file mode 100644
index 000000000..46e167928
--- /dev/null
+++ b/packages/ui/src/features/canvas/genui/showcaseSpec.ts
@@ -0,0 +1,337 @@
+import type { Spec } from "@json-render/react";
+
+// Name of the built-in showcase canvas. Seeding dedupes on this exact name, so
+// don't change it without a migration (a rename reseeds a second copy).
+export const SHOWCASE_CANVAS_NAME = "Dashboard component Showcase";
+
+// A static, code-shipped canvas spec that exercises every Dashboard-template
+// component with realistic sample data. Seeded into a channel as a real saved
+// canvas (see useSeedShowcase) so anyone opening the canvases grid sees a
+// working board and can confirm each component renders. Pure fixture — no live
+// queries (so refresh is a no-op), identical for every user.
+export const SHOWCASE_SPEC: Spec = {
+  root: "page",
+  elements: {
+    page: {
+      type: "Page",
+      props: {},
+      children: [
+        "title",
+        "h_metrics",
+        "g_stats",
+        "h_trends",
+        "g_trends",
+        "card_spark",
+        "h_breakdown",
+        "g_breakdown",
+        "h_data",
+        "g_data",
+        "h_components",
+        "g_components",
+      ],
+    },
+    title: {
+      type: "Heading",
+      props: { text: "Dashboard component Showcase", level: 1 },
+      children: [],
+    },
+
+    // --- Stats -------------------------------------------------------------
+    h_metrics: {
+      type: "Heading",
+      props: { text: "Key metrics", level: 2 },
+      children: [],
+    },
+    g_stats: {
+      type: "Grid",
+      props: { columns: 4 },
+      children: ["stat_pageviews", "stat_users", "stat_sessions", "stat_dur"],
+    },
+    stat_pageviews: {
+      type: "Stat",
+      props: { label: "Pageviews", value: 34980058, delta: "+12.4%" },
+      children: [],
+    },
+    stat_users: {
+      type: "Stat",
+      props: { label: "Unique users", value: 1284091, delta: "+3.1%" },
+      children: [],
+    },
+    stat_sessions: {
+      type: "Stat",
+      props: { label: "Sessions", value: 2910433, delta: "-1.2%" },
+      children: [],
+    },
+    stat_dur: {
+      type: "Stat",
+      props: { label: "Avg. duration", value: "4m 12s", delta: "+0.8%" },
+      children: [],
+    },
+
+    // --- Trends (Line / Bar / Sparkline) -----------------------------------
+    h_trends: {
+      type: "Heading",
+      props: { text: "Trends", level: 2 },
+      children: [],
+    },
+    g_trends: {
+      type: "Grid",
+      props: { columns: 2 },
+      children: ["card_line", "card_bar"],
+    },
+    card_line: {
+      type: "Card",
+      props: { title: "Signups vs activations (14d)" },
+      children: ["chart_line"],
+    },
+    chart_line: {
+      type: "LineChart",
+      props: {
+        labels: [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "10",
+          "11",
+          "12",
+          "13",
+          "14",
+        ],
+        series: [
+          {
+            label: "Signups",
+            data: [12, 18, 15, 22, 28, 24, 31, 35, 29, 38, 42, 39, 45, 51],
+          },
+          {
+            label: "Activations",
+            data: [5, 9, 7, 12, 15, 13, 18, 21, 17, 24, 27, 25, 29, 33],
+          },
+        ],
+      },
+      children: [],
+    },
+    card_bar: {
+      type: "Card",
+      props: { title: "Events by day" },
+      children: ["chart_bar"],
+    },
+    chart_bar: {
+      type: "BarChart",
+      props: {
+        labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        series: [
+          { label: "Web", data: [320, 410, 380, 450, 500, 210, 180] },
+          { label: "Mobile", data: [210, 260, 240, 300, 330, 140, 120] },
+        ],
+      },
+      children: [],
+    },
+    card_spark: {
+      type: "Card",
+      props: { title: "p95 latency (24h)" },
+      children: ["chart_spark"],
+    },
+    chart_spark: {
+      type: "Sparkline",
+      props: {
+        data: [
+          42, 44, 41, 47, 52, 49, 55, 53, 58, 54, 60, 57, 62, 59, 64, 61, 66,
+          63, 68, 65,
+        ],
+      },
+      children: [],
+    },
+
+    // --- Breakdown (Pie / Progress) ----------------------------------------
+    h_breakdown: {
+      type: "Heading",
+      props: { text: "Breakdown", level: 2 },
+      children: [],
+    },
+    g_breakdown: {
+      type: "Grid",
+      props: { columns: 2 },
+      children: ["card_pie", "card_progress"],
+    },
+    card_pie: {
+      type: "Card",
+      props: { title: "Sessions by browser" },
+      children: ["chart_pie"],
+    },
+    chart_pie: {
+      type: "PieChart",
+      props: {
+        items: [
+          { label: "Chrome", value: 62 },
+          { label: "Safari", value: 21 },
+          { label: "Firefox", value: 9 },
+          { label: "Edge", value: 8 },
+        ],
+      },
+      children: [],
+    },
+    card_progress: {
+      type: "Card",
+      props: { title: "Quarterly goals" },
+      children: ["prog_mau", "prog_rev", "prog_onb"],
+    },
+    prog_mau: {
+      type: "Progress",
+      props: { label: "MAU target", value: 68 },
+      children: [],
+    },
+    prog_rev: {
+      type: "Progress",
+      props: { label: "Revenue target", value: 84 },
+      children: [],
+    },
+    prog_onb: {
+      type: "Progress",
+      props: { label: "Onboarding completion", value: 42 },
+      children: [],
+    },
+
+    // --- Tables & lists -----------------------------------------------------
+    h_data: {
+      type: "Heading",
+      props: { text: "Tables & lists", level: 2 },
+      children: [],
+    },
+    g_data: {
+      type: "Grid",
+      props: { columns: 2 },
+      children: ["card_table", "card_barlist"],
+    },
+    card_table: {
+      type: "Card",
+      props: { title: "Top pages" },
+      children: ["table_pages"],
+    },
+    table_pages: {
+      type: "Table",
+      props: {
+        columns: ["Page", "Views", "Bounce"],
+        rows: [
+          ["/", 91204, "32%"],
+          ["/pricing", 41201, "28%"],
+          ["/docs", 38109, "19%"],
+          ["/blog", 22904, "44%"],
+        ],
+      },
+      children: [],
+    },
+    card_barlist: {
+      type: "Card",
+      props: { title: "Top referrers" },
+      children: ["barlist_ref"],
+    },
+    barlist_ref: {
+      type: "BarList",
+      props: {
+        items: [
+          { label: "google.com", value: 48201 },
+          { label: "twitter.com", value: 18230 },
+          { label: "github.com", value: 12044 },
+          { label: "direct", value: 9120 },
+        ],
+      },
+      children: [],
+    },
+
+    // --- Misc components (Badge / Text / Button / Divider / inputs) ---------
+    h_components: {
+      type: "Heading",
+      props: { text: "Components", level: 2 },
+      children: [],
+    },
+    g_components: {
+      type: "Grid",
+      props: { columns: 2 },
+      children: ["card_badges", "card_inputs"],
+    },
+    card_badges: {
+      type: "Card",
+      props: { title: "Badges, text, button, divider" },
+      children: [
+        "badge_grid",
+        "div_1",
+        "text_normal",
+        "text_muted",
+        "button_primary",
+      ],
+    },
+    badge_grid: {
+      type: "Grid",
+      props: { columns: 3 },
+      children: [
+        "badge_gray",
+        "badge_green",
+        "badge_red",
+        "badge_amber",
+        "badge_blue",
+      ],
+    },
+    badge_gray: {
+      type: "Badge",
+      props: { text: "Default", color: "gray" },
+      children: [],
+    },
+    badge_green: {
+      type: "Badge",
+      props: { text: "Healthy", color: "green" },
+      children: [],
+    },
+    badge_red: {
+      type: "Badge",
+      props: { text: "Error", color: "red" },
+      children: [],
+    },
+    badge_amber: {
+      type: "Badge",
+      props: { text: "Warning", color: "amber" },
+      children: [],
+    },
+    badge_blue: {
+      type: "Badge",
+      props: { text: "Info", color: "blue" },
+      children: [],
+    },
+    div_1: { type: "Divider", props: {}, children: [] },
+    text_normal: {
+      type: "Text",
+      props: { text: "Body text renders here." },
+      children: [],
+    },
+    text_muted: {
+      type: "Text",
+      props: { text: "Muted helper text.", muted: true },
+      children: [],
+    },
+    button_primary: {
+      type: "Button",
+      props: { text: "Primary action", variant: "primary" },
+      children: [],
+    },
+    card_inputs: {
+      type: "Card",
+      props: { title: "Inputs" },
+      children: ["input_search", "check_active"],
+    },
+    input_search: {
+      type: "TextInput",
+      props: { label: "Search", placeholder: "Type to filter…" },
+      children: [],
+    },
+    check_active: {
+      type: "Checkbox",
+      props: { label: "Only active users" },
+      children: [],
+    },
+  },
+};
diff --git a/packages/ui/src/features/canvas/hooks/useCanvasTemplates.ts b/packages/ui/src/features/canvas/hooks/useCanvasTemplates.ts
new file mode 100644
index 000000000..f9eea4b72
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useCanvasTemplates.ts
@@ -0,0 +1,12 @@
+import type { CanvasTemplateSummary } from "@posthog/core/canvas/templateSchemas";
+import { useHostTRPC } from "@posthog/host-router/react";
+import { useQuery } from "@tanstack/react-query";
+
+/** The canvas templates the create-picker offers (built-ins + future user ones). */
+export function useCanvasTemplates(): CanvasTemplateSummary[] {
+  const trpc = useHostTRPC();
+  const { data } = useQuery(
+    trpc.canvasTemplates.list.queryOptions(undefined, { staleTime: 60_000 }),
+  );
+  return data ?? [];
+}
diff --git a/packages/ui/src/features/canvas/hooks/useDashboards.ts b/packages/ui/src/features/canvas/hooks/useDashboards.ts
index 0c3acc0bd..c8dea34da 100644
--- a/packages/ui/src/features/canvas/hooks/useDashboards.ts
+++ b/packages/ui/src/features/canvas/hooks/useDashboards.ts
@@ -4,6 +4,7 @@ import type {
   DashboardSummary,
 } from "@posthog/core/canvas/dashboardSchemas";
 import { useHostTRPC } from "@posthog/host-router/react";
+import { useCanvasChatStore } from "@posthog/ui/features/canvas/stores/canvasChatStore";
 import { useDashboardEditStore } from "@posthog/ui/features/canvas/stores/dashboardEditStore";
 import { toast } from "@posthog/ui/primitives/toast";
 import { logger } from "@posthog/ui/shell/logger";
@@ -71,11 +72,17 @@ export function useDashboardMutations() {
         spec: spec as Record<string, unknown> | null,
         name,
       }),
-    createDashboard: (channelId: string, name: string, spec: Spec | null) =>
+    createDashboard: (
+      channelId: string,
+      name: string,
+      spec: Spec | null,
+      templateId?: string,
+    ) =>
       create.mutateAsync({
         channelId,
         name,
         spec: spec as Record<string, unknown> | null,
+        templateId,
       }),
     deleteDashboard: (id: string) => remove.mutateAsync({ id }),
     isSaving: save.isPending,
@@ -84,31 +91,37 @@ export function useDashboardMutations() {
   };
 }
 
-/** Create a blank dashboard in a channel, enter edit mode, and navigate to it. */
+/** Create an empty canvas in a channel, enter edit mode, and navigate to it. */
 export function useCreateAndOpenDashboard(
   channelId: string | undefined,
-): (name?: string) => Promise<void> {
+): (opts?: { templateId?: string; name?: string }) => Promise<void> {
   const navigate = useNavigate();
   const { createDashboard } = useDashboardMutations();
   const setEditing = useDashboardEditStore((s) => s.setEditing);
+  const setTemplate = useCanvasChatStore((s) => s.setTemplate);
 
   return useCallback(
-    async (name = "Untitled dashboard") => {
+    async (opts) => {
       if (!channelId) return;
+      const templateId = opts?.templateId ?? "dashboard";
+      const name = opts?.name ?? "Untitled canvas";
       try {
-        const record = await createDashboard(channelId, name, null);
+        const record = await createDashboard(channelId, name, null, templateId);
+        // Anchor the thread's agent to the chosen template before the first
+        // message (WebsiteDashboard re-asserts it once the record loads).
+        setTemplate(`dashboard:${record.id}`, templateId);
         setEditing(record.id, true);
         await navigate({
           to: "/website/$channelId/dashboards/$dashboardId",
           params: { channelId, dashboardId: record.id },
         });
       } catch (error) {
-        log.error("Failed to create dashboard", { error });
-        toast.error("Couldn't create dashboard", {
+        log.error("Failed to create canvas", { error });
+        toast.error("Couldn't create canvas", {
           description: error instanceof Error ? error.message : String(error),
         });
       }
     },
-    [channelId, createDashboard, navigate, setEditing],
+    [channelId, createDashboard, navigate, setEditing, setTemplate],
   );
 }
diff --git a/packages/ui/src/features/canvas/hooks/useRefreshDashboard.ts b/packages/ui/src/features/canvas/hooks/useRefreshDashboard.ts
index 6165e5d67..d21dab3a5 100644
--- a/packages/ui/src/features/canvas/hooks/useRefreshDashboard.ts
+++ b/packages/ui/src/features/canvas/hooks/useRefreshDashboard.ts
@@ -42,7 +42,7 @@ export function useRefreshDashboard(dashboardId: string): {
           );
         }
       } catch (error) {
-        toast.error("Couldn't refresh dashboard", {
+        toast.error("Couldn't refresh canvas", {
           description: error instanceof Error ? error.message : String(error),
         });
       }
diff --git a/packages/ui/src/features/canvas/hooks/useSeedShowcase.ts b/packages/ui/src/features/canvas/hooks/useSeedShowcase.ts
new file mode 100644
index 000000000..2d7c8a6c1
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useSeedShowcase.ts
@@ -0,0 +1,44 @@
+import {
+  SHOWCASE_CANVAS_NAME,
+  SHOWCASE_SPEC,
+} from "@posthog/ui/features/canvas/genui/showcaseSpec";
+import {
+  useDashboardMutations,
+  useDashboards,
+} from "@posthog/ui/features/canvas/hooks/useDashboards";
+import { useEffect, useRef } from "react";
+
+// Seed the built-in "Dashboard component Showcase" canvas into a channel the
+// first time its grid is opened, if it isn't already there. So a colleague who
+// opens a channel always finds a working board demonstrating every component.
+//
+// Dedupe is two-layered: by name across sessions (the canvas already exists →
+// skip) and by an in-session Set (claim the channel before the async create so
+// a quick re-render can't fire a second create). It's a pure fixture seed — no
+// domain decision — so it lives in the renderer where the spec does.
+export function useSeedShowcase(channelId: string | undefined): void {
+  const { dashboards, isLoading } = useDashboards(channelId);
+  const { createDashboard } = useDashboardMutations();
+  const claimed = useRef(new Set<string>());
+
+  // `createDashboard` is a fresh closure each render; keep it in a ref so it
+  // isn't an effect dependency (otherwise the effect re-runs every render).
+  const createRef = useRef(createDashboard);
+  createRef.current = createDashboard;
+
+  useEffect(() => {
+    if (!channelId || isLoading || claimed.current.has(channelId)) return;
+    if (dashboards.some((d) => d.name === SHOWCASE_CANVAS_NAME)) {
+      claimed.current.add(channelId);
+      return;
+    }
+    // Claim before the async create so a re-render mid-flight can't double-seed.
+    claimed.current.add(channelId);
+    createRef
+      .current(channelId, SHOWCASE_CANVAS_NAME, SHOWCASE_SPEC, "dashboard")
+      .catch(() => {
+        // Creation failed — release the claim so a later render can retry.
+        claimed.current.delete(channelId);
+      });
+  }, [channelId, isLoading, dashboards]);
+}
diff --git a/packages/ui/src/features/canvas/stores/canvasChatStore.ts b/packages/ui/src/features/canvas/stores/canvasChatStore.ts
index e813507ae..3a37a35bb 100644
--- a/packages/ui/src/features/canvas/stores/canvasChatStore.ts
+++ b/packages/ui/src/features/canvas/stores/canvasChatStore.ts
@@ -1,6 +1,6 @@
 import { isNonEmptySpec } from "@json-render/core";
 import type { Spec } from "@json-render/react";
-import { CANVAS_SYSTEM_PROMPT } from "@posthog/ui/features/canvas/genui/catalog";
+import { dashboardTitleFromSpec } from "@posthog/ui/features/canvas/genui/dashboardTitle";
 import { logger } from "@posthog/ui/shell/logger";
 import { create } from "zustand";
 import { hostClient } from "../hostClient";
@@ -18,6 +18,8 @@ export interface CanvasThreadState {
   messages: CanvasMessage[];
   /** Latest assistant-generated spec rendered on the canvas. */
   spec: Spec | null;
+  /** The canvas template driving the agent (see core/canvas/canvasTemplates). */
+  templateId: string;
   isStreaming: boolean;
   lastTool: string | null;
   error: string | null;
@@ -27,6 +29,7 @@ export interface CanvasThreadState {
 export const EMPTY_THREAD: CanvasThreadState = {
   messages: [],
   spec: null,
+  templateId: "dashboard",
   isStreaming: false,
   lastTool: null,
   error: null,
@@ -38,6 +41,8 @@ interface CanvasChatStore {
 
   send: (threadId: string, prompt: string) => Promise<void>;
   reset: (threadId: string) => Promise<void>;
+  /** Set the canvas template driving a thread's agent (from the saved record). */
+  setTemplate: (threadId: string, templateId: string) => void;
   /** Seed a thread's spec from a saved dashboard without clobbering live work. */
   ensureSpec: (threadId: string, spec: Spec) => void;
   /** Inline edit: set a prop on an element (propPath is a pointer like "/title"). */
@@ -60,6 +65,20 @@ function newId(): string {
   return crypto.randomUUID();
 }
 
+// Child keys referenced by some element but with no element defined — the cause
+// of silently-empty containers. Surfaced to the agent so it can repair them.
+function danglingChildKeys(spec: Spec | null): string[] {
+  const elements = spec?.elements;
+  if (!elements) return [];
+  const missing = new Set<string>();
+  for (const el of Object.values(elements)) {
+    for (const childKey of el.children ?? []) {
+      if (!elements[childKey]) missing.add(childKey);
+    }
+  }
+  return [...missing];
+}
+
 export const useCanvasChatStore = create<CanvasChatStore>()((set, get) => {
   const patch = (
     threadId: string,
@@ -100,11 +119,37 @@ export const useCanvasChatStore = create<CanvasChatStore>()((set, get) => {
         lastTool: null,
       }));
 
+      // The agent session's system prompt is frozen at session start, so the
+      // canvas identity + current contents ride the prompt — keeping the agent
+      // anchored to the open board (even after a reload) and letting it append
+      // against the real element keys instead of rebuilding from scratch.
+      let context: string;
+      if (isNonEmptySpec(current.spec)) {
+        const title = dashboardTitleFromSpec(current.spec);
+        const dangling = danglingChildKeys(current.spec);
+        context = [
+          `[Context] You are editing the existing canvas${title ? ` titled "${title}"` : ""}. APPEND to it — never recreate or replace existing elements. Reuse the element keys in the spec below; add new elements under new keys and attach them by appending to the relevant container's children.`,
+          dangling.length > 0
+            ? `BROKEN REFERENCES: these keys are listed as children but have NO element defined: ${dangling.map((k) => `"${k}"`).join(", ")}. Fix each by EITHER defining the missing element (op "add" at /elements/<key>) OR removing the dangling key from its parent's children. Do not leave them dangling.`
+            : "",
+          "Current canvas spec (json-render):",
+          "```json",
+          JSON.stringify(current.spec),
+          "```",
+        ]
+          .filter(Boolean)
+          .join("\n");
+      } else {
+        context = "[Context] You are starting a new, untitled canvas.";
+      }
+      const agentPrompt = `${context}\n\n${text}`;
+
       try {
         await hostClient().canvasGen.generate.mutate({
           threadId,
-          prompt: text,
-          systemPrompt: CANVAS_SYSTEM_PROMPT,
+          prompt: agentPrompt,
+          templateId: current.templateId,
+          currentSpec: current.spec as Record<string, unknown> | null,
         });
       } catch (error) {
         log.error("Canvas generate failed", { error });
@@ -122,6 +167,10 @@ export const useCanvasChatStore = create<CanvasChatStore>()((set, get) => {
         .catch(() => {});
     },
 
+    setTemplate: (threadId, templateId) => {
+      patch(threadId, (prev) => ({ ...prev, templateId }));
+    },
+
     ensureSpec: (threadId, spec) => {
       const cur = get().threads[threadId];
       // Don't overwrite a live stream or edits already in this session — only
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9822d6af..2b40a1080 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,8 +19,8 @@ catalogs:
       specifier: ^2.1.10
       version: 2.1.10
     '@posthog/quill':
-      specifier: 0.3.0-beta.1
-      version: 0.3.0-beta.1
+      specifier: 0.3.0-beta.14
+      version: 0.3.0-beta.14
     '@radix-ui/themes':
       specifier: ^3.2.1
       version: 3.3.0
@@ -84,6 +84,7 @@ catalogs:
 
 overrides:
   zod: 4.3.6
+  '@posthog/quill>@base-ui/react': ^1.3.0
 
 patchedDependencies:
   node-pty:
@@ -191,8 +192,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/platform
       '@posthog/quill':
-        specifier: 0.3.0-beta.1
-        version: 0.3.0-beta.1(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)
+        specifier: 'catalog:'
+        version: 0.3.0-beta.14(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)
       '@posthog/shared':
         specifier: workspace:*
         version: link:../../packages/shared
@@ -816,6 +817,9 @@ importers:
 
   packages/core:
     dependencies:
+      '@json-render/core':
+        specifier: ^0.19.0
+        version: 0.19.0(zod@4.3.6)
       '@modelcontextprotocol/ext-apps':
         specifier: ^1.1.2
         version: 1.2.2(@modelcontextprotocol/sdk@1.29.0(zod@4.3.6))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(zod@4.3.6)
@@ -1195,6 +1199,9 @@ importers:
       '@posthog/platform':
         specifier: workspace:*
         version: link:../platform
+      '@posthog/quill-charts':
+        specifier: 0.3.0-beta.14
+        version: 0.3.0-beta.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@posthog/shared':
         specifier: workspace:*
         version: link:../shared
@@ -1345,7 +1352,7 @@ importers:
         version: 2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@posthog/quill':
         specifier: 'catalog:'
-        version: 0.3.0-beta.1(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)
+        version: 0.3.0-beta.14(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)
       '@posthog/tsconfig':
         specifier: workspace:*
         version: link:../../tooling/typescript
@@ -3300,6 +3307,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react@0.27.19':
+    resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
@@ -4472,8 +4485,14 @@ packages:
   '@posthog/plugin-utils@1.0.1':
     resolution: {integrity: sha512-+x3LFZlUVPNUPQBx9kvRV/hXd1j3JcYf9iYClJCORjuuA0RV5FICUZMMFbwsSOPuKoW9rQAaW3zFoQMYEfM+YA==}
 
-  '@posthog/quill@0.3.0-beta.1':
-    resolution: {integrity: sha512-VOW3iuufIvYujBD1GWU9YNdGwWc9p4JkdP7aNaErCF41Lk6gQkwjiu/qNplHTJppjgbgItPSV0FoonwS9WmNrQ==}
+  '@posthog/quill-charts@0.3.0-beta.14':
+    resolution: {integrity: sha512-2TPVMecvAf1+ryhjTuTd7PESe/ZWfQI7uT7eqzwChSa0ZFaULF3gzPsxCUT7oOIsNqynJLDvN7ph1TrANcMB5Q==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+
+  '@posthog/quill@0.3.0-beta.14':
+    resolution: {integrity: sha512-TH+PFpPS2jc/U3JifAfzZx0wkjRPxOBoHKc7lzW6zxZi96XC7AjrG5JaB7trRlFoF1ffvmyJKenJYtSpNGdA8Q==}
     engines: {node: '>=20'}
     peerDependencies:
       react: ^18.3.1 || ^19.0.0
@@ -7554,6 +7573,42 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -7565,6 +7620,9 @@ packages:
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
+  dayjs@1.11.11:
+    resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
+
   dayjs@1.11.21:
     resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
@@ -9111,6 +9169,10 @@ packages:
   inline-style-prefixer@7.0.1:
     resolution: {integrity: sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==}
 
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   interpret@3.1.1:
     resolution: {integrity: sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==}
     engines: {node: '>=10.13.0'}
@@ -11930,6 +11992,9 @@ packages:
   simple-plist@1.3.1:
     resolution: {integrity: sha512-iMSw5i0XseMnrhtIzRb7XpQEXepa9xhWxGUojHBL43SIpQuDQkh3Wpy67ZbDzZVr6EKxvwVChnVpdl8hEVLDiw==}
 
+  simple-statistics@7.8.9:
+    resolution: {integrity: sha512-YT6MLqYsz7y1rQZOLFlOCCgSRpCi6bqY417yhoOLI7aVoBi29dD39EPrOE03W9DY25H0J0jizVsHZnkLzyGJFg==}
+
   simple-swizzle@0.2.4:
     resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
 
@@ -15606,6 +15671,14 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
+  '@floating-ui/react@0.27.19(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/utils': 0.2.11
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      tabbable: 6.4.0
+
   '@floating-ui/utils@0.2.11': {}
 
   '@fontsource-variable/inter@5.2.8': {}
@@ -16967,7 +17040,19 @@ snapshots:
     dependencies:
       cross-spawn: 7.0.6
 
-  '@posthog/quill@0.3.0-beta.1(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)':
+  '@posthog/quill-charts@0.3.0-beta.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react': 0.27.19(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      d3-array: 3.2.4
+      d3-color: 3.1.0
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      dayjs: 1.11.11
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      simple-statistics: 7.8.9
+
+  '@posthog/quill@0.3.0-beta.14(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.2.2)':
     dependencies:
       '@base-ui/react': 1.3.0(@types/react@19.2.11)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       class-variance-authority: 0.7.1
@@ -20442,6 +20527,40 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
   data-uri-to-buffer@4.0.1: {}
 
   data-urls@5.0.0:
@@ -20451,6 +20570,8 @@ snapshots:
 
   date-fns@4.1.0: {}
 
+  dayjs@1.11.11: {}
+
   dayjs@1.11.21: {}
 
   debounce-fn@6.0.0:
@@ -22171,6 +22292,8 @@ snapshots:
     dependencies:
       css-in-js-utils: 3.1.0
 
+  internmap@2.0.3: {}
+
   interpret@3.1.1: {}
 
   invariant@2.2.4:
@@ -25702,6 +25825,8 @@ snapshots:
       bplist-parser: 0.3.1
       plist: 3.1.0
 
+  simple-statistics@7.8.9: {}
+
   simple-swizzle@0.2.4:
     dependencies:
       is-arrayish: 0.3.4
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 58c524bd3..f3135be1f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
   '@hono/trpc-server': ^0.3.4
   '@parcel/watcher': ^2.5.6
   '@phosphor-icons/react': ^2.1.10
-  '@posthog/quill': 0.3.0-beta.1
+  '@posthog/quill': 0.3.0-beta.14
   '@radix-ui/themes': ^3.2.1
   '@tanstack/devtools-vite': ^0.7.0
   '@tanstack/react-devtools': ^0.10.5
@@ -53,6 +53,7 @@ minimumReleaseAgeExclude:
   - '@anthropic-ai/sdk'
   - '@pierre/diffs'
   - '@posthog/quill'
+  - '@posthog/quill-charts'
   - '@posthog/quill-tokens'
   - '@tanstack/devtools-core'
   - '@tanstack/devtools-vite'