From 13a31dc834aebce20703e2b8e92ac3004c9f550d Mon Sep 17 00:00:00 2001
From: Jane Chu <janechu@users.noreply.github.com>
Date: Thu, 21 May 2026 11:55:07 -0700
Subject: [PATCH] feat: add chat-app and webui-todo-app SSR examples with
 design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add examples/ssr/chat-app/ — declarative FAST chat demo using
  @microsoft/fast-build for SSR pre-rendering and hidden-iframe
  streaming for assistant replies. Uses the dark theme statically.
- Add examples/ssr/webui-todo-app/ — todo app using @microsoft/webui for
  server-side prerendering and @microsoft/fast-html for hydration. Uses
  the light theme statically.
- Both apps consume @microsoft/fast-examples-design-system tokens via
  CSS custom properties. No hard-coded design values; no runtime theme
  switching.
- Add 'examples/ssr/*' to the root workspaces config and update the
  workspace-level README.md, DESIGN.md, and .github/copilot-instructions
  to describe the new ssr/ subfolder.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .github/copilot-instructions.md               |   7 +
 examples/DESIGN.md                            |  15 +-
 examples/README.md                            |  23 +-
 examples/ssr/chat-app/.gitignore              |   2 +
 examples/ssr/chat-app/DESIGN.md               | 164 +++++
 examples/ssr/chat-app/README.md               |  69 ++
 examples/ssr/chat-app/build-markup.mjs        |  36 +
 examples/ssr/chat-app/entry.html              |  16 +
 examples/ssr/chat-app/fast-build.config.json  |   6 +
 examples/ssr/chat-app/package.json            |  33 +
 examples/ssr/chat-app/public/styles.css       | 323 +++++++++
 examples/ssr/chat-app/src/chat-app.ts         | 202 ++++++
 examples/ssr/chat-app/src/chat-card.ts        |  16 +
 examples/ssr/chat-app/src/chat-data.ts        |  86 +++
 examples/ssr/chat-app/src/chat-message.ts     |  16 +
 examples/ssr/chat-app/src/chat-suggestion.ts  |  20 +
 examples/ssr/chat-app/src/design-system.d.ts  |   1 +
 examples/ssr/chat-app/src/exports.ts          |   5 +
 examples/ssr/chat-app/src/main.ts             |  14 +
 examples/ssr/chat-app/state.json              |   5 +
 examples/ssr/chat-app/templates.html          |  84 +++
 examples/ssr/chat-app/tsconfig.json           |  19 +
 examples/ssr/chat-app/vite.config.ts          |  13 +
 examples/ssr/webui-todo-app/DESIGN.md         | 142 ++++
 examples/ssr/webui-todo-app/README.md         | 124 ++++
 examples/ssr/webui-todo-app/data/state.json   |  23 +
 examples/ssr/webui-todo-app/package.json      |  36 +
 examples/ssr/webui-todo-app/src/index.html    |  30 +
 examples/ssr/webui-todo-app/src/index.ts      |  36 +
 .../webui-todo-app/src/todo-app/todo-app.css  |  75 ++
 .../webui-todo-app/src/todo-app/todo-app.html |  29 +
 .../webui-todo-app/src/todo-app/todo-app.ts   |  99 +++
 .../src/todo-item/todo-item.css               |  71 ++
 .../src/todo-item/todo-item.html              |  11 +
 .../webui-todo-app/src/todo-item/todo-item.ts |  29 +
 examples/ssr/webui-todo-app/tsconfig.json     |  16 +
 package-lock.json                             | 643 +++++++++++++++++-
 package.json                                  |   3 +-
 38 files changed, 2529 insertions(+), 13 deletions(-)
 create mode 100644 examples/ssr/chat-app/.gitignore
 create mode 100644 examples/ssr/chat-app/DESIGN.md
 create mode 100644 examples/ssr/chat-app/README.md
 create mode 100644 examples/ssr/chat-app/build-markup.mjs
 create mode 100644 examples/ssr/chat-app/entry.html
 create mode 100644 examples/ssr/chat-app/fast-build.config.json
 create mode 100644 examples/ssr/chat-app/package.json
 create mode 100644 examples/ssr/chat-app/public/styles.css
 create mode 100644 examples/ssr/chat-app/src/chat-app.ts
 create mode 100644 examples/ssr/chat-app/src/chat-card.ts
 create mode 100644 examples/ssr/chat-app/src/chat-data.ts
 create mode 100644 examples/ssr/chat-app/src/chat-message.ts
 create mode 100644 examples/ssr/chat-app/src/chat-suggestion.ts
 create mode 100644 examples/ssr/chat-app/src/design-system.d.ts
 create mode 100644 examples/ssr/chat-app/src/exports.ts
 create mode 100644 examples/ssr/chat-app/src/main.ts
 create mode 100644 examples/ssr/chat-app/state.json
 create mode 100644 examples/ssr/chat-app/templates.html
 create mode 100644 examples/ssr/chat-app/tsconfig.json
 create mode 100644 examples/ssr/chat-app/vite.config.ts
 create mode 100644 examples/ssr/webui-todo-app/DESIGN.md
 create mode 100644 examples/ssr/webui-todo-app/README.md
 create mode 100644 examples/ssr/webui-todo-app/data/state.json
 create mode 100644 examples/ssr/webui-todo-app/package.json
 create mode 100644 examples/ssr/webui-todo-app/src/index.html
 create mode 100644 examples/ssr/webui-todo-app/src/index.ts
 create mode 100644 examples/ssr/webui-todo-app/src/todo-app/todo-app.css
 create mode 100644 examples/ssr/webui-todo-app/src/todo-app/todo-app.html
 create mode 100644 examples/ssr/webui-todo-app/src/todo-app/todo-app.ts
 create mode 100644 examples/ssr/webui-todo-app/src/todo-item/todo-item.css
 create mode 100644 examples/ssr/webui-todo-app/src/todo-item/todo-item.html
 create mode 100644 examples/ssr/webui-todo-app/src/todo-item/todo-item.ts
 create mode 100644 examples/ssr/webui-todo-app/tsconfig.json

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 7f0567668bf..a1fd845644f 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -35,9 +35,16 @@ Each package includes a DESIGN.md file, read that to gain a general understandin
 
 ### Example projects
 
+Example apps are grouped by rendering strategy. Client-side-rendered (CSR)
+apps live under `examples/csr/`; server-side-rendered (SSR) apps — including
+those that pre-render their initial markup with `@microsoft/fast-build` or
+`@microsoft/webui` — live under `examples/ssr/`.
+
 - `examples/design-system/` — Shared semantic design tokens (`@microsoft/fast-examples-design-system`) consumed by all example apps.
 - `examples/csr/todo-app/` — A simple To-Do app demonstrating FAST usage patterns and using the shared `@microsoft/fast-examples-design-system` tokens.
 - `examples/csr/todo-mobx-app/` — A To-Do app demonstrating how to integrate MobX state with `@microsoft/fast-element` using a single `autorun` per component (no custom bridge code).
+- `examples/ssr/chat-app/` — A declarative chat app that pre-renders its shell with `@microsoft/fast-build` and streams canned assistant replies, styled with the shared design-system tokens (dark theme, no runtime toggle).
+- `examples/ssr/webui-todo-app/` — A To-Do app that pre-renders with `@microsoft/webui` (`webui serve --plugin=fast`) and hydrates with `@microsoft/fast-html`, styled with the shared design-system tokens (light theme, no runtime toggle).
 
 ## Skills
 
diff --git a/examples/DESIGN.md b/examples/DESIGN.md
index 9d908241f3a..61b186bfdc2 100644
--- a/examples/DESIGN.md
+++ b/examples/DESIGN.md
@@ -1,7 +1,9 @@
 # FAST example apps — design guidance
 
 This document is the workspace-level guide for building UI in `examples/*`
-and its rendering-strategy subfolders (currently `examples/csr/`). It
+and its rendering-strategy subfolders (`examples/csr/` for client-side
+rendered apps, `examples/ssr/` for apps whose initial markup is pre-rendered
+on the server with `@microsoft/fast-build` or `@microsoft/webui`). It
 explains how the apps share a visual language, the constraints every example
 must follow, and the rules that humans and coding agents should apply when
 making changes. The token vocabulary itself lives in
@@ -26,8 +28,8 @@ alongside this one.
 
 ## Goals
 
-- Give every app in `examples/*` (across all rendering-strategy subfolders)
-  a shared, consistent visual language.
+- Give every app in `examples/*` (across both `csr/` and `ssr/` rendering
+  strategies) a shared, consistent visual language.
 - Provide a single source of truth for shared visual tokens.
 - Stay framework-free and dependency-free by exposing CSS custom properties
   only. No theme runtime, no helper API, no component layer.
@@ -157,8 +159,11 @@ document.documentElement.removeAttribute("data-theme"); // restore system
 ```
 
 For an intentionally single-theme app — like
-[`todo-app`](./todo-app/) — hard-code the attribute in markup
-(`<html data-theme="light">`) and never touch it from JavaScript.
+[`csr/todo-app`](./csr/todo-app/), [`csr/todo-mobx-app`](./csr/todo-mobx-app/),
+or [`ssr/webui-todo-app`](./ssr/webui-todo-app/) (all light), and
+[`ssr/chat-app`](./ssr/chat-app/) (dark) — hard-code the attribute in markup
+(`<html data-theme="light">` or `<html data-theme="dark">`) and never touch
+it from JavaScript.
 
 ## Authoring rules
 
diff --git a/examples/README.md b/examples/README.md
index dbc01138c1e..0dfb0de2655 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -12,10 +12,14 @@ FAST patterns in a complete app context.
 | `design-system` | `@microsoft/fast-examples-design-system` | Shared CSS design tokens (no JS) consumed by every example app. |
 | `csr/todo-app` | `@microsoft/fast-todo-app-example` | A To-Do app demonstrating `@microsoft/fast-element` patterns end to end, styled with the shared design-system tokens (light theme, no runtime toggle). |
 | `csr/todo-mobx-app` | `@microsoft/fast-todo-mobx-app-example` | A To-Do app showing how to integrate MobX state with `@microsoft/fast-element` using a single `autorun` per component (no custom bridge code), styled with the shared design-system tokens. |
+| `ssr/chat-app` | `@microsoft/fast-chat-app-example` | A declarative chat app whose initial shell is pre-rendered with `@microsoft/fast-build` and whose assistant replies stream into the transcript through a hidden iframe, styled with the shared design-system tokens (dark theme, no runtime toggle). |
+| `ssr/webui-todo-app` | `@microsoft/fast-webui-todo-app-example` | A To-Do app pre-rendered with `@microsoft/webui` (`webui serve --plugin=fast`) and hydrated with `@microsoft/fast-html`, styled with the shared design-system tokens (light theme, no runtime toggle). |
 
 Example apps are grouped by rendering strategy. Client-side-rendered (CSR)
-apps live under [`examples/csr/`](./csr/); future server-side-rendered (SSR)
-apps will live alongside them under their own subfolder.
+apps live under [`examples/csr/`](./csr/). Server-side-rendered (SSR) apps —
+those that pre-render their initial markup on the server with
+`@microsoft/fast-build` or `@microsoft/webui` and then hydrate on the client —
+live under [`examples/ssr/`](./ssr/).
 
 ## Shared design system
 
@@ -50,10 +54,15 @@ See:
 
 ## Creating a new example app
 
-1. Scaffold a new folder under the appropriate rendering-strategy subfolder
-   (CSR apps go under `examples/csr/<your-app>/`).
-2. Use [`examples/csr/todo-app/`](./csr/todo-app/) as a reference for
-   `package.json`, `tsconfig.json`, `vite.config.ts`, and `index.html`.
+1. Scaffold a new folder under the appropriate rendering-strategy subfolder.
+   CSR apps go under `examples/csr/<your-app>/`; SSR apps (those that
+   pre-render their initial markup with `@microsoft/fast-build` or
+   `@microsoft/webui`) go under `examples/ssr/<your-app>/`.
+2. Use [`examples/csr/todo-app/`](./csr/todo-app/) as a reference for CSR
+   apps. For SSR apps, use [`examples/ssr/chat-app/`](./ssr/chat-app/) when
+   pre-rendering with `@microsoft/fast-build` or
+   [`examples/ssr/webui-todo-app/`](./ssr/webui-todo-app/) when pre-rendering
+   with `@microsoft/webui`.
 3. Add `"@microsoft/fast-examples-design-system": "workspace:*"` to the new
    app's `dependencies` and run `npm install` from the repo root.
 4. Import `@microsoft/fast-examples-design-system/tokens.css` exactly once at
@@ -86,6 +95,8 @@ For the existing example apps:
 ```shell
 npm start -w @microsoft/fast-todo-app-example
 npm start -w @microsoft/fast-todo-mobx-app-example
+npm start -w @microsoft/fast-chat-app-example
+npm start -w @microsoft/fast-webui-todo-app-example
 ```
 
 ## Useful links
diff --git a/examples/ssr/chat-app/.gitignore b/examples/ssr/chat-app/.gitignore
new file mode 100644
index 00000000000..070d1ee9985
--- /dev/null
+++ b/examples/ssr/chat-app/.gitignore
@@ -0,0 +1,2 @@
+# Generated by build-markup.mjs from entry.html + state.json + templates.html
+index.html
diff --git a/examples/ssr/chat-app/DESIGN.md b/examples/ssr/chat-app/DESIGN.md
new file mode 100644
index 00000000000..b6e84f12877
--- /dev/null
+++ b/examples/ssr/chat-app/DESIGN.md
@@ -0,0 +1,164 @@
+# Chat App Example Design
+
+## Overview
+
+`examples/ssr/chat-app` is a small end-to-end FAST example that combines three ideas:
+
+1. **Declarative FAST** custom elements defined with `declarativeTemplate()`.
+2. **Initial markup generated by `@microsoft/fast-build`** from an entry document, state file, and declarative `<f-template>` definitions.
+3. **Streaming assistant replies** with the hidden-iframe + `document.write()` technique described in Jake Archibald's article, “Fun hacks for faster content” (<https://jakearchibald.com/2016/fun-hacks-faster-content/>).
+
+The example intentionally keeps the conversation simple and deterministic so the streaming mechanism is easy to observe.
+
+## Design system
+
+This example consumes the shared `@microsoft/fast-examples-design-system`
+workspace package.
+
+- `src/main.ts` imports `@microsoft/fast-examples-design-system/tokens.css`
+  before hydration and custom-element definition so the tokens are registered
+  before any component renders.
+- Every design value in `public/styles.css` is referenced through
+  `var(--fast-...)`; colors, type sizes and line heights, spacing, corners,
+  stroke widths, shadows, durations, and curves are not hard-coded.
+- The theme is hard-coded in markup with `<html data-theme="dark">` in
+  `entry.html`, and the FAST build step carries that attribute into generated
+  `index.html`. The example does not implement a runtime theme toggle. Apps
+  that want one can set, change, or remove the attribute with the standard DOM
+  API described in [`../../design-system/README.md`](../../design-system/README.md)
+  and [`../../design-system/DESIGN.md`](../../design-system/DESIGN.md).
+
+## Folder structure
+
+This example follows the same top-level shape as `examples/csr/todo-app/` and adds the extra declarative-rendering source files needed for FAST build:
+
+- `package.json` — workspace scripts for build/start/test.
+- `tsconfig.json` — copied from `todo-app` with the example-specific LSP route.
+- `vite.config.ts` — same shape as `todo-app`, building into `www/`.
+- `entry.html` — source HTML passed to `@microsoft/fast-build`; hard-codes `data-theme="dark"`.
+- `state.json` — initial SSR state for the shell.
+- `templates.html` — declarative `<f-template>` definitions for every custom element.
+- `build-markup.mjs` — regenerates `index.html` and injects `<f-template>` definitions for hydration.
+- `index.html` — generated output consumed by Vite.
+- `public/styles.css` — shared token-based stylesheet loaded by the page and every component shadow root.
+- `src/chat-app.ts` — root element, queueing, exact-match lookup, and iframe streaming logic.
+- `src/chat-data.ts` — canned turn data.
+- `src/chat-message.ts` — message bubble custom element.
+- `src/chat-card.ts` — supporting card callout custom element.
+- `src/chat-suggestion.ts` — copyable/clickable next-prompt custom element.
+- `src/design-system.d.ts` — declares the shared `tokens.css` side-effect import for TypeScript.
+- `src/main.ts` — imports the shared tokens, enables hydration, and defines the custom elements.
+- `src/exports.ts` — barrel for the example runtime.
+
+## Build flow
+
+`npm run build` for this example performs three steps:
+
+1. `npm run build:markup`
+   - runs the `@microsoft/fast-build` CLI against `fast-build.config.json`
+   - renders `entry.html` + `state.json` + `templates.html` into `index.html`
+   - injects the raw `<f-template>` definitions before the module script so `declarativeTemplate()` can resolve them during hydration
+2. `tsgo -p tsconfig.json`
+   - type-checks and emits the TypeScript source into `dist/`
+3. `vite build`
+   - bundles the hydrated browser entry into `www/`
+
+## Runtime flow
+
+### Hydration and declarative templates
+
+`src/main.ts` imports the shared design tokens, calls `enableHydration()`, then defines:
+
+- `chat-message`
+- `chat-card`
+- `chat-suggestion`
+- `chat-app`
+
+Each class uses `template: declarativeTemplate()`, so the runtime resolves the matching `<f-template name="...">` from `templates.html`.
+
+### Conversation model
+
+`src/chat-data.ts` stores six canned turns. Each turn has:
+
+- the **exact** user message that must be entered (comparison uses `trim()` only)
+- the bot's full HTML response (`responseHtml`)
+- the same response broken into visible streaming chunks (`responseChunks`)
+- the next suggested user message shown after the reply
+
+Unknown input maps to a single fallback turn.
+
+### Queueing
+
+The textarea stays enabled while a reply is streaming. To keep the conversation stable, `chat-app` uses a FIFO queue:
+
+1. submit message
+2. append the user bubble immediately
+3. look up the canned bot turn (or fallback)
+4. queue the bot turn
+5. process one bot turn at a time
+
+This lets the user queue the next line while the current assistant turn is still streaming.
+
+### Streaming via iframe + `document.write`
+
+The implementation follows the article's approach closely:
+
+1. create a hidden iframe
+2. wait for it to load
+3. write a dummy `<streaming-element>` tag into the iframe document
+4. move that element into the real chat transcript
+5. continue calling `iframe.contentDocument.write(...)` asynchronously for each HTML chunk
+6. close the streaming element and the iframe document when done
+
+Because the HTML parser keeps the open element on its stack, later `document.write()` calls continue filling the moved element even after it has been appended into the transcript.
+
+The example adds a small artificial delay between chunks so the streaming is obvious during a quick manual smoke test.
+
+## Custom elements
+
+### `<chat-app>`
+
+The root shell element. It renders:
+
+- the title and intro copy
+- the transcript container
+- the textarea composer
+- the initial assistant prompt and first suggestion
+
+It also owns:
+
+- exact-match response lookup
+- submit handling
+- Enter vs. Shift+Enter behavior
+- streaming queue management
+- suggestion click handling
+
+### `<chat-message>`
+
+A simple bubble wrapper with a slot. `kind="bot"` and `kind="user"` switch the visual treatment.
+
+### `<chat-card>`
+
+A small callout card used inside every assistant turn so each reply mixes native HTML with at least one FAST custom element.
+
+### `<chat-suggestion>`
+
+Renders the next suggested user prompt as selectable text and emits a `use-suggestion` event when clicked so `chat-app` can paste it into the textarea.
+
+## Canned conversation data
+
+| User message | Next suggested message |
+| --- | --- |
+| `Hi` | `How are you?` |
+| `How are you?` | `What's the weather like?` |
+| `What's the weather like?` | `Tell me a joke` |
+| `Tell me a joke` | `What can you do?` |
+| `What can you do?` | `Goodbye` |
+| `Goodbye` | `Hi` |
+| fallback | `Hi` |
+
+## Notable decisions
+
+- The initial welcome bubble is static shell content rather than part of the exact-match turn table, so the canned conversation can start from the first user message.
+- All page and component styling lives in a single external `public/styles.css` file. It is linked from the document `<head>` (render-blocking, so the bytes are loaded before the rest of the body is processed) and from inside every `<template shadowrootmode="open">` in `templates.html`. The browser fetches the file once and applies it to each shadow root, so styles are isolated per component but maintained in one place. Each design value references the shared `--fast-*` tokens.
+- Dynamic messages are appended at runtime with DOM APIs (and streamed bot HTML) while the overall shell and component authoring remain declarative FAST.
diff --git a/examples/ssr/chat-app/README.md b/examples/ssr/chat-app/README.md
new file mode 100644
index 00000000000..70ea720cc02
--- /dev/null
+++ b/examples/ssr/chat-app/README.md
@@ -0,0 +1,69 @@
+# Chat App Example
+
+A small declarative FAST chat demo that pre-renders its initial markup with `@microsoft/fast-build` and streams canned assistant replies with a hidden iframe plus `document.write()`.
+
+## Design system
+
+This example consumes the shared `@microsoft/fast-examples-design-system`
+workspace package. The design-system package is **CSS-only** — `src/main.ts`
+imports `@microsoft/fast-examples-design-system/tokens.css` once, and
+`public/styles.css` references the registered `--fast-*` tokens through
+`var(...)`.
+
+The app uses the **dark** theme statically. `<html data-theme="dark">` is set
+in [`entry.html`](./entry.html), so the FAST build step carries that attribute
+into the generated `index.html`. The example does not implement a runtime
+theme toggle.
+
+For the shared package overview, the token catalog, and authoring rules, see
+[`../../design-system/README.md`](../../design-system/README.md) and
+[`../../design-system/DESIGN.md`](../../design-system/DESIGN.md).
+
+## What it demonstrates
+
+- declarative FAST custom elements via `declarativeTemplate()`
+- initial markup rendered from `entry.html` + `templates.html`
+- chunked assistant response streaming with the Jake Archibald iframe technique
+- mixed native HTML and FAST custom elements in each canned reply
+- exact-match canned prompts with a fallback response
+
+## Suggested prompts
+
+Use these exact prompts to walk through the conversation:
+
+- `Hi`
+- `How are you?`
+- `What's the weather like?`
+- `Tell me a joke`
+- `What can you do?`
+- `Goodbye`
+
+## Run locally
+
+From the repository root:
+
+```bash
+npm run build -w @microsoft/fast-chat-app-example
+npm run start -w @microsoft/fast-chat-app-example
+```
+
+Or from this folder:
+
+```bash
+npm run build
+npm start
+```
+
+The build first regenerates `index.html` from `entry.html`, `state.json`, and `templates.html`, then runs TypeScript and Vite.
+
+## Files
+
+- `entry.html` — source document for the FAST build step
+- `state.json` — initial state used while pre-rendering the page shell
+- `templates.html` — declarative FAST templates for the custom elements
+- `build-markup.mjs` — runs `@microsoft/fast-build` and injects the templates into `index.html`
+- `public/styles.css` — token-based shared stylesheet for the page shell and component shadow roots
+- `src/` — runtime classes, canned conversation data, and hydration bootstrap
+- `index.html` — generated pre-rendered page used by Vite
+
+See [DESIGN.md](./DESIGN.md) for architecture details, design-system notes, and the canned conversation data.
diff --git a/examples/ssr/chat-app/build-markup.mjs b/examples/ssr/chat-app/build-markup.mjs
new file mode 100644
index 00000000000..f7a936ed13d
--- /dev/null
+++ b/examples/ssr/chat-app/build-markup.mjs
@@ -0,0 +1,36 @@
+import { execFileSync } from "node:child_process";
+import { readFileSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const cwd = path.dirname(fileURLToPath(import.meta.url));
+const fastCli = require.resolve("@microsoft/fast-build/bin/fast.js");
+const configPath = path.join(cwd, "fast-build.config.json");
+const templatesPath = path.join(cwd, "templates.html");
+const indexPath = path.join(cwd, "index.html");
+const scriptTag = '<script type="module" src="./src/main.ts"></script>';
+
+execFileSync(process.execPath, [fastCli, "build", `--config=${configPath}`], {
+    cwd,
+    stdio: "inherit",
+});
+
+const templates = readFileSync(templatesPath, "utf8").trim();
+const rendered = readFileSync(indexPath, "utf8");
+
+if (!rendered.includes(scriptTag)) {
+    throw new Error("Unable to find the module script while injecting f-templates.");
+}
+
+writeFileSync(
+    indexPath,
+    rendered.replace(
+        scriptTag,
+        `${templates}
+
+        ${scriptTag}`,
+    ),
+    "utf8",
+);
diff --git a/examples/ssr/chat-app/entry.html b/examples/ssr/chat-app/entry.html
new file mode 100644
index 00000000000..9ffa4346306
--- /dev/null
+++ b/examples/ssr/chat-app/entry.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+    <head>
+        <meta charset="utf-8">
+        <title>FAST Chat App</title>
+        <link rel="stylesheet" href="/styles.css">
+    </head>
+    <body>
+        <chat-app
+            welcome-title="{{welcomeTitle}}"
+            composer-placeholder="{{composerPlaceholder}}"
+            initial-suggestion="{{initialSuggestion}}"
+        ></chat-app>
+        <script type="module" src="./src/main.ts"></script>
+    </body>
+</html>
diff --git a/examples/ssr/chat-app/fast-build.config.json b/examples/ssr/chat-app/fast-build.config.json
new file mode 100644
index 00000000000..c291972cdad
--- /dev/null
+++ b/examples/ssr/chat-app/fast-build.config.json
@@ -0,0 +1,6 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html"
+}
diff --git a/examples/ssr/chat-app/package.json b/examples/ssr/chat-app/package.json
new file mode 100644
index 00000000000..0f34310e183
--- /dev/null
+++ b/examples/ssr/chat-app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@microsoft/fast-chat-app-example",
+  "version": "1.0.0",
+  "description": "Declarative FAST chat app example with iframe streaming",
+  "main": "dist/exports.js",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build:markup": "node ./build-markup.mjs",
+    "build": "npm run build:markup && tsgo -p tsconfig.json && vite build",
+    "start": "npm run build:markup && vite",
+    "test": "npm run build"
+  },
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "homepage": "https://www.fast.design/",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "examples/ssr/chat-app"
+  },
+  "dependencies": {
+    "@microsoft/fast-element": "^3.0.0-rc.1",
+    "@microsoft/fast-examples-design-system": "^1.0.0",
+    "tslib": "^2.6.3"
+  },
+  "devDependencies": {
+    "@microsoft/fast-build": "*"
+  }
+}
diff --git a/examples/ssr/chat-app/public/styles.css b/examples/ssr/chat-app/public/styles.css
new file mode 100644
index 00000000000..a70050a22aa
--- /dev/null
+++ b/examples/ssr/chat-app/public/styles.css
@@ -0,0 +1,323 @@
+/*
+ * Chat app styles.
+ *
+ * Loaded twice on purpose:
+ *   1. From <head> in entry.html — render-blocks the document so the file is
+ *      fetched and cached before the HTML body is processed.
+ *   2. From inside each <template shadowrootmode="open"> in templates.html —
+ *      applies the styles inside each component's shadow root using the same
+ *      cached file.
+ *
+ * Because the same stylesheet is loaded into the document and multiple shadow
+ * roots, document-level rules stay limited to the page shell and component
+ * rules remain scoped with :host(<tag>) so they don't bleed across roots.
+ */
+
+html,
+body {
+    background: var(--fast-background-web-page-primary);
+    color: var(--fast-foreground-ctrl-neutral-primary-rest);
+}
+
+body {
+    margin: 0;
+}
+
+/* ----- chat-app ----- */
+
+:host(chat-app),
+:host(chat-app) *,
+:host(chat-app) *::before,
+:host(chat-app) *::after {
+    box-sizing: border-box;
+}
+
+:host(chat-app) {
+    color: var(--fast-foreground-ctrl-neutral-primary-rest);
+    display: block;
+    font-family: var(--fast-text-style-default-regular-font-family);
+    font-size: var(--fast-text-global-body3-font-size);
+    line-height: var(--fast-text-global-body3-line-height);
+}
+
+:host(chat-app) .app-shell {
+    background: var(--fast-background-layer-primary-solid);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-subtle);
+    border-radius: var(--fast-corner-large);
+    box-shadow: var(--fast-shadow-card-rest);
+    margin: var(--fast-gap-between-content-x-large) auto;
+    max-width: 760px;
+    padding: var(--fast-padding-content-x-large);
+}
+
+:host(chat-app) .eyebrow {
+    color: var(--fast-foreground-ctrl-neutral-secondary-rest);
+    font-size: var(--fast-text-global-caption1-font-size);
+    font-weight: var(--fast-text-style-default-header-weight);
+    line-height: var(--fast-text-global-caption1-line-height);
+    margin: 0 0 var(--fast-gap-between-content-x-small);
+    text-transform: uppercase;
+}
+
+:host(chat-app) h1 {
+    font-size: var(--fast-text-global-display2-font-size);
+    font-weight: var(--fast-text-style-default-display-weight);
+    line-height: var(--fast-text-global-display2-line-height);
+    margin: 0;
+}
+
+:host(chat-app) .intro {
+    color: var(--fast-foreground-ctrl-neutral-secondary-rest);
+    font-size: var(--fast-text-global-body2-font-size);
+    line-height: var(--fast-text-global-body2-line-height);
+    margin: var(--fast-gap-between-content-small) 0 0;
+}
+
+:host(chat-app) code {
+    font-family: var(--fast-text-style-code-regular-font-family);
+}
+
+:host(chat-app) .transcript {
+    background: var(--fast-background-layer-secondary);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-default);
+    border-radius: var(--fast-corner-large);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fast-gap-between-content-small);
+    margin-top: var(--fast-gap-between-content-x-large);
+    max-height: 520px;
+    min-height: 340px;
+    overflow: auto;
+    padding: var(--fast-padding-content-large);
+}
+
+:host(chat-app) streaming-element {
+    display: contents;
+}
+
+:host(chat-app) .composer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fast-gap-between-content-small);
+    margin-top: var(--fast-gap-between-content-large);
+}
+
+:host(chat-app) label {
+    font-size: var(--fast-text-global-body3-font-size);
+    font-weight: var(--fast-text-style-default-header-weight);
+    line-height: var(--fast-text-global-body3-line-height);
+}
+
+:host(chat-app) textarea {
+    background: var(--fast-background-layer-secondary);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-ctrl-on-outline-rest);
+    border-radius: var(--fast-corner-medium);
+    color: inherit;
+    font: inherit;
+    min-height: 112px;
+    padding: var(--fast-padding-content-small) var(--fast-padding-content-medium);
+    resize: vertical;
+    transition:
+        background var(--fast-duration-fast) var(--fast-curve-easy-ease),
+        border-color var(--fast-duration-fast) var(--fast-curve-easy-ease),
+        outline-color var(--fast-duration-fast) var(--fast-curve-easy-ease);
+}
+
+:host(chat-app) textarea::placeholder {
+    color: var(--fast-foreground-ctrl-hint-default);
+}
+
+:host(chat-app) textarea:focus-visible {
+    border-color: var(--fast-ctrl-focus-outer-stroke);
+    outline: var(--fast-ctrl-focus-outer-stroke-width) solid
+        var(--fast-ctrl-focus-outer-stroke);
+    outline-offset: var(--fast-stroke-width-default);
+}
+
+:host(chat-app) .composer__hint {
+    color: var(--fast-foreground-ctrl-neutral-secondary-rest);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--fast-text-global-caption1-font-size);
+    line-height: var(--fast-text-global-caption1-line-height);
+    gap: var(--fast-gap-between-content-x-small) var(--fast-gap-between-content-medium);
+}
+
+:host(chat-app) button {
+    align-self: flex-start;
+    background: var(--fast-background-ctrl-brand-rest);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-brand);
+    border-radius: var(--fast-corner-circular);
+    color: var(--fast-foreground-ctrl-on-brand-rest);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--fast-text-global-body3-font-size);
+    font-weight: var(--fast-text-style-default-header-weight);
+    line-height: var(--fast-text-global-body3-line-height);
+    padding: var(--fast-padding-content-x-small) var(--fast-padding-content-small);
+    transition:
+        background var(--fast-duration-fast) var(--fast-curve-easy-ease),
+        border-color var(--fast-duration-fast) var(--fast-curve-easy-ease);
+}
+
+:host(chat-app) button:hover {
+    background: var(--fast-background-ctrl-brand-hover);
+}
+
+:host(chat-app) button:active {
+    background: var(--fast-background-ctrl-brand-pressed);
+}
+
+:host(chat-app) button:focus-visible {
+    outline: var(--fast-ctrl-focus-outer-stroke-width) solid
+        var(--fast-ctrl-focus-outer-stroke);
+    outline-offset: var(--fast-stroke-width-default);
+}
+
+@media (max-width: 640px) {
+    :host(chat-app) .app-shell {
+        border-radius: var(--fast-corner-none);
+        margin: 0;
+        min-height: 100vh;
+    }
+
+    :host(chat-app) .transcript {
+        min-height: 50vh;
+    }
+}
+
+/* ----- chat-message ----- */
+
+:host(chat-message) {
+    display: block;
+}
+
+:host(chat-message) article {
+    background: var(--fast-background-layer-primary-solid);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-subtle);
+    border-radius: var(--fast-corner-medium);
+    box-shadow: var(--fast-shadow-card-rest);
+    color: var(--fast-foreground-ctrl-neutral-primary-rest);
+    font-size: var(--fast-text-global-body2-font-size);
+    line-height: var(--fast-text-global-body2-line-height);
+    padding: var(--fast-padding-content-medium);
+}
+
+:host(chat-message[kind="user"]) article {
+    background: var(--fast-background-ctrl-brand-rest);
+    border-color: var(--fast-stroke-divider-brand);
+    color: var(--fast-foreground-ctrl-on-brand-rest);
+    margin-left: calc(
+        var(--fast-padding-content-xxx-large) +
+        var(--fast-gap-between-content-xx-large)
+    );
+}
+
+:host(chat-message[kind="bot"]) article {
+    margin-right: calc(
+        var(--fast-padding-content-xxx-large) +
+        var(--fast-gap-between-content-xx-large)
+    );
+}
+
+:host(chat-message) ::slotted(p),
+:host(chat-message) ::slotted(ul),
+:host(chat-message) ::slotted(ol),
+:host(chat-message) ::slotted(chat-card) {
+    display: block;
+    margin: 0 0 var(--fast-gap-between-content-small);
+}
+
+:host(chat-message) ::slotted(p) {
+    white-space: pre-wrap;
+}
+
+@media (max-width: 640px) {
+    :host(chat-message[kind="user"]) article,
+    :host(chat-message[kind="bot"]) article {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+/* ----- chat-card ----- */
+
+:host(chat-card) {
+    display: block;
+}
+
+:host(chat-card) article {
+    background: var(--fast-background-layer-secondary);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-default);
+    border-radius: var(--fast-corner-medium);
+    color: var(--fast-foreground-ctrl-neutral-primary-rest);
+    padding: var(--fast-padding-content-small) var(--fast-padding-content-medium);
+}
+
+:host(chat-card) strong {
+    color: var(--fast-foreground-ctrl-brand-rest);
+    display: block;
+    font-size: var(--fast-text-global-body3-font-size);
+    font-weight: var(--fast-text-style-default-header-weight);
+    line-height: var(--fast-text-global-body3-line-height);
+    margin-bottom: var(--fast-gap-between-content-xx-small);
+}
+
+:host(chat-card) ::slotted(p),
+:host(chat-card) ::slotted(ul),
+:host(chat-card) ::slotted(ol) {
+    display: block;
+    margin: 0 0 var(--fast-gap-between-content-x-small);
+}
+
+/* ----- chat-suggestion ----- */
+
+:host(chat-suggestion) {
+    display: block;
+}
+
+:host(chat-suggestion) .suggestion {
+    background: var(--fast-background-layer-primary-solid);
+    border: var(--fast-stroke-width-default) dashed var(--fast-stroke-divider-brand);
+    border-radius: var(--fast-corner-medium);
+    color: var(--fast-foreground-ctrl-brand-rest);
+    cursor: pointer;
+    margin: 0 0 0 auto;
+    max-width: 420px;
+    padding: var(--fast-padding-content-x-small) var(--fast-padding-content-small);
+    transition:
+        background var(--fast-duration-fast) var(--fast-curve-easy-ease),
+        border-color var(--fast-duration-fast) var(--fast-curve-easy-ease),
+        color var(--fast-duration-fast) var(--fast-curve-easy-ease);
+    user-select: text;
+}
+
+:host(chat-suggestion) .suggestion:hover {
+    background: var(--fast-background-ctrl-subtle-hover);
+}
+
+:host(chat-suggestion) .suggestion:active {
+    background: var(--fast-background-ctrl-subtle-pressed);
+}
+
+:host(chat-suggestion) .label {
+    color: var(--fast-foreground-ctrl-neutral-secondary-rest);
+    display: block;
+    font-size: var(--fast-text-global-caption1-font-size);
+    font-weight: var(--fast-text-style-default-header-weight);
+    line-height: var(--fast-text-global-caption1-line-height);
+    margin-bottom: var(--fast-gap-between-content-xx-small);
+    text-transform: uppercase;
+}
+
+:host(chat-suggestion) code {
+    background: var(--fast-background-layer-secondary);
+    border-radius: var(--fast-corner-medium);
+    color: inherit;
+    display: inline-block;
+    font-family: var(--fast-text-style-code-regular-font-family);
+    font-size: var(--fast-text-global-body3-font-size);
+    line-height: var(--fast-text-global-body3-line-height);
+    padding: var(--fast-padding-content-xx-small) var(--fast-padding-content-x-small);
+    white-space: pre-wrap;
+}
diff --git a/examples/ssr/chat-app/src/chat-app.ts b/examples/ssr/chat-app/src/chat-app.ts
new file mode 100644
index 00000000000..9bb98ed8279
--- /dev/null
+++ b/examples/ssr/chat-app/src/chat-app.ts
@@ -0,0 +1,202 @@
+import type { FASTElementTemplateResolver } from "@microsoft/fast-element";
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import type { ChatTurn } from "./chat-data.js";
+import { cannedTurnMap, fallbackTurn } from "./chat-data.js";
+
+function escapeAttribute(value: string): string {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+
+function renderSuggestion(text: string): string {
+    return `<chat-suggestion text="${escapeAttribute(text)}"></chat-suggestion>`;
+}
+
+export class ChatApp extends FASTElement {
+    @attr({ attribute: "welcome-title" })
+    public welcomeTitle: string = "FAST Chat Demo";
+
+    @attr({ attribute: "composer-placeholder" })
+    public composerPlaceholder: string = "Type one of the suggested prompts exactly.";
+
+    @attr({ attribute: "initial-suggestion" })
+    public initialSuggestion: string = "Hi";
+
+    public composer: HTMLTextAreaElement | null = null;
+    public transcript: HTMLElement | null = null;
+
+    private readonly _queue: ChatTurn[] = [];
+    private _isStreaming = false;
+
+    public handleSubmit(event: Event): void {
+        event.preventDefault();
+        this.sendCurrentMessage();
+    }
+
+    public handleComposerKeydown(event: KeyboardEvent): void {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            this.sendCurrentMessage();
+        }
+    }
+
+    public handleSuggestion(event: Event): void {
+        const suggestionEvent = event as CustomEvent<string>;
+        const suggestion = suggestionEvent.detail;
+
+        if (!this.composer || typeof suggestion !== "string") {
+            return;
+        }
+
+        this.composer.value = suggestion;
+        this.composer.focus();
+        this.composer.setSelectionRange(suggestion.length, suggestion.length);
+    }
+
+    private sendCurrentMessage(): void {
+        if (!this.composer || !this.transcript) {
+            return;
+        }
+
+        const message = this.composer.value.trim();
+
+        if (!message) {
+            return;
+        }
+
+        this.appendUserMessage(message);
+        this.composer.value = "";
+        this.scrollTranscript();
+
+        this._queue.push(cannedTurnMap.get(message) ?? fallbackTurn);
+        void this.processQueue();
+    }
+
+    private appendUserMessage(message: string): void {
+        if (!this.transcript) {
+            return;
+        }
+
+        const messageElement = document.createElement("chat-message");
+        const paragraph = document.createElement("p");
+
+        messageElement.setAttribute("kind", "user");
+        paragraph.textContent = message;
+        messageElement.append(paragraph);
+        this.transcript.append(messageElement);
+    }
+
+    private async processQueue(): Promise<void> {
+        if (this._isStreaming) {
+            return;
+        }
+
+        const nextTurn = this._queue.shift();
+
+        if (!nextTurn) {
+            return;
+        }
+
+        this._isStreaming = true;
+
+        try {
+            await this.streamTurn(nextTurn);
+        } finally {
+            this._isStreaming = false;
+        }
+
+        if (this._queue.length > 0) {
+            void this.processQueue();
+        }
+    }
+
+    private async streamTurn(turn: ChatTurn): Promise<void> {
+        await this.streamIntoTranscript([
+            ...turn.responseChunks,
+            renderSuggestion(turn.nextSuggestedUserMessage),
+        ]);
+    }
+
+    private streamIntoTranscript(chunks: readonly string[]): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const iframe = document.createElement("iframe");
+
+            iframe.setAttribute("aria-hidden", "true");
+            iframe.tabIndex = -1;
+            iframe.style.display = "none";
+            document.body.append(iframe);
+
+            iframe.onload = () => {
+                iframe.onload = null;
+
+                const iframeDocument = iframe.contentDocument;
+
+                if (!iframeDocument || !this.transcript) {
+                    iframe.remove();
+                    reject(new Error("Streaming iframe failed to initialize."));
+                    return;
+                }
+
+                iframeDocument.write("<streaming-element>");
+
+                const streamingElement =
+                    iframeDocument.querySelector("streaming-element");
+
+                if (!streamingElement) {
+                    iframe.remove();
+                    reject(new Error("Unable to create the streaming element."));
+                    return;
+                }
+
+                this.transcript.append(streamingElement);
+
+                const writeChunks = async (): Promise<void> => {
+                    for (const chunk of chunks) {
+                        iframeDocument.write(chunk);
+                        this.scrollTranscript();
+                        await this.delay(600);
+                    }
+
+                    iframeDocument.write("</streaming-element>");
+                    iframeDocument.close();
+                    this.scrollTranscript();
+                    iframe.remove();
+                    resolve();
+                };
+
+                void writeChunks().catch(error => {
+                    iframe.remove();
+                    reject(error);
+                });
+            };
+
+            iframe.src = "";
+        });
+    }
+
+    private scrollTranscript(): void {
+        if (!this.transcript) {
+            return;
+        }
+
+        this.transcript.scrollTop = this.transcript.scrollHeight;
+    }
+
+    private delay(ms: number): Promise<void> {
+        return new Promise(resolve => {
+            window.setTimeout(resolve, ms);
+        });
+    }
+}
+
+export const chatAppDefinition = {
+    name: "chat-app",
+    template: declarativeTemplate() as unknown as FASTElementTemplateResolver<
+        typeof ChatApp
+    >,
+};
diff --git a/examples/ssr/chat-app/src/chat-card.ts b/examples/ssr/chat-app/src/chat-card.ts
new file mode 100644
index 00000000000..99276f478cf
--- /dev/null
+++ b/examples/ssr/chat-app/src/chat-card.ts
@@ -0,0 +1,16 @@
+import type { FASTElementTemplateResolver } from "@microsoft/fast-element";
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+
+export class ChatCard extends FASTElement {
+    @attr
+    public heading?: string;
+}
+
+export const chatCardDefinition = {
+    name: "chat-card",
+    template: declarativeTemplate() as unknown as FASTElementTemplateResolver<
+        typeof ChatCard
+    >,
+};
diff --git a/examples/ssr/chat-app/src/chat-data.ts b/examples/ssr/chat-app/src/chat-data.ts
new file mode 100644
index 00000000000..d295ac6ccb8
--- /dev/null
+++ b/examples/ssr/chat-app/src/chat-data.ts
@@ -0,0 +1,86 @@
+export interface ChatTurn {
+    userMessage: string;
+    responseHtml: string;
+    responseChunks: readonly string[];
+    nextSuggestedUserMessage: string;
+}
+
+function createTurn(
+    userMessage: string,
+    responseChunks: readonly string[],
+    nextSuggestedUserMessage: string,
+): ChatTurn {
+    return {
+        userMessage,
+        responseHtml: responseChunks.join(""),
+        responseChunks,
+        nextSuggestedUserMessage,
+    };
+}
+
+export const cannedTurns: readonly ChatTurn[] = [
+    createTurn(
+        "Hi",
+        [
+            `<chat-message kind="bot"><p><strong>Hi there!</strong> I'm doing a short round of friendly small talk.</p>`,
+            `<chat-card heading="First stop"><p>I stream this answer a piece at a time through a hidden iframe.</p></chat-card>`,
+            `</chat-message>`,
+        ],
+        "How are you?",
+    ),
+    createTurn(
+        "How are you?",
+        [
+            `<chat-message kind="bot"><p>I'm doing well—steady, <em>predictable</em>, and very chatty today.</p>`,
+            `<chat-card heading="Status"><p>My replies are canned, but the parser-driven streaming is real.</p></chat-card>`,
+            `</chat-message>`,
+        ],
+        "What's the weather like?",
+    ),
+    createTurn(
+        "What's the weather like?",
+        [
+            `<chat-message kind="bot"><p>I don't check real forecasts, but here's a cheerful pretend report:</p>`,
+            `<ul><li>clear skies</li><li>light breeze</li><li><strong>perfect</strong> demo weather</li></ul>`,
+            `<chat-card heading="Forecast"><p>Ask for a joke if you want to keep the conversation moving.</p></chat-card></chat-message>`,
+        ],
+        "Tell me a joke",
+    ),
+    createTurn(
+        "Tell me a joke",
+        [
+            `<chat-message kind="bot"><p>Why did the chat bot bring a ladder?</p>`,
+            `<p>Because the conversation kept going to the <code>next level</code>.</p>`,
+            `<chat-card heading="Comedy review"><p>I'll admit that one lands best with a generous audience.</p></chat-card></chat-message>`,
+        ],
+        "What can you do?",
+    ),
+    createTurn(
+        "What can you do?",
+        [
+            `<chat-message kind="bot"><p>I can walk through a tiny scripted chat and show a few interface patterns:</p>`,
+            `<ul><li>exact message matching</li><li>streamed HTML chunks</li><li>FAST custom elements inside each reply</li></ul>`,
+            `<chat-card heading="Try the ending"><p>Say goodbye and I'll wrap the demo up.</p></chat-card></chat-message>`,
+        ],
+        "Goodbye",
+    ),
+    createTurn(
+        "Goodbye",
+        [
+            `<chat-message kind="bot"><p><strong>Goodbye!</strong> Thanks for trying the demo.</p>`,
+            `<chat-card heading="Loop it again"><p>If you want another pass, paste <code>Hi</code> back into the composer.</p></chat-card></chat-message>`,
+        ],
+        "Hi",
+    ),
+];
+
+export const cannedTurnMap = new Map(cannedTurns.map(turn => [turn.userMessage, turn]));
+
+export const fallbackTurn = createTurn(
+    "fallback",
+    [
+        `<chat-message kind="bot"><p>I only know a small scripted set of lines in this example.</p>`,
+        `<chat-card heading="Try this instead"><p>Use the suggested prompt so the exact-match lookup can find a canned reply.</p></chat-card></chat-message>`,
+    ],
+    "Hi",
+);
diff --git a/examples/ssr/chat-app/src/chat-message.ts b/examples/ssr/chat-app/src/chat-message.ts
new file mode 100644
index 00000000000..f0a8c6c45ca
--- /dev/null
+++ b/examples/ssr/chat-app/src/chat-message.ts
@@ -0,0 +1,16 @@
+import type { FASTElementTemplateResolver } from "@microsoft/fast-element";
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+
+export class ChatMessage extends FASTElement {
+    @attr
+    public kind?: string;
+}
+
+export const chatMessageDefinition = {
+    name: "chat-message",
+    template: declarativeTemplate() as unknown as FASTElementTemplateResolver<
+        typeof ChatMessage
+    >,
+};
diff --git a/examples/ssr/chat-app/src/chat-suggestion.ts b/examples/ssr/chat-app/src/chat-suggestion.ts
new file mode 100644
index 00000000000..3f1a3214b48
--- /dev/null
+++ b/examples/ssr/chat-app/src/chat-suggestion.ts
@@ -0,0 +1,20 @@
+import type { FASTElementTemplateResolver } from "@microsoft/fast-element";
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+
+export class ChatSuggestion extends FASTElement {
+    @attr
+    public text?: string;
+
+    public emitSuggestion(): void {
+        this.$emit("use-suggestion", this.text ?? "");
+    }
+}
+
+export const chatSuggestionDefinition = {
+    name: "chat-suggestion",
+    template: declarativeTemplate() as unknown as FASTElementTemplateResolver<
+        typeof ChatSuggestion
+    >,
+};
diff --git a/examples/ssr/chat-app/src/design-system.d.ts b/examples/ssr/chat-app/src/design-system.d.ts
new file mode 100644
index 00000000000..320cbb073c5
--- /dev/null
+++ b/examples/ssr/chat-app/src/design-system.d.ts
@@ -0,0 +1 @@
+declare module "@microsoft/fast-examples-design-system/tokens.css";
diff --git a/examples/ssr/chat-app/src/exports.ts b/examples/ssr/chat-app/src/exports.ts
new file mode 100644
index 00000000000..7b3af7b6305
--- /dev/null
+++ b/examples/ssr/chat-app/src/exports.ts
@@ -0,0 +1,5 @@
+export * from "./chat-app.js";
+export * from "./chat-card.js";
+export * from "./chat-data.js";
+export * from "./chat-message.js";
+export * from "./chat-suggestion.js";
diff --git a/examples/ssr/chat-app/src/main.ts b/examples/ssr/chat-app/src/main.ts
new file mode 100644
index 00000000000..4a73ca97f25
--- /dev/null
+++ b/examples/ssr/chat-app/src/main.ts
@@ -0,0 +1,14 @@
+import "@microsoft/fast-examples-design-system/tokens.css";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { ChatApp, chatAppDefinition } from "./chat-app.js";
+import { ChatCard, chatCardDefinition } from "./chat-card.js";
+import { ChatMessage, chatMessageDefinition } from "./chat-message.js";
+import { ChatSuggestion, chatSuggestionDefinition } from "./chat-suggestion.js";
+
+enableHydration();
+
+await FASTElement.define(ChatMessage, chatMessageDefinition);
+await FASTElement.define(ChatCard, chatCardDefinition);
+await FASTElement.define(ChatSuggestion, chatSuggestionDefinition);
+await FASTElement.define(ChatApp, chatAppDefinition);
diff --git a/examples/ssr/chat-app/state.json b/examples/ssr/chat-app/state.json
new file mode 100644
index 00000000000..57ea21b2f7d
--- /dev/null
+++ b/examples/ssr/chat-app/state.json
@@ -0,0 +1,5 @@
+{
+    "welcomeTitle": "FAST Chat Demo",
+    "composerPlaceholder": "Type one of the suggested prompts exactly.",
+    "initialSuggestion": "Hi"
+}
diff --git a/examples/ssr/chat-app/templates.html b/examples/ssr/chat-app/templates.html
new file mode 100644
index 00000000000..d47eb844000
--- /dev/null
+++ b/examples/ssr/chat-app/templates.html
@@ -0,0 +1,84 @@
+<f-template name="chat-app">
+    <template>
+        <link rel="stylesheet" href="/styles.css">
+
+        <section class="app-shell">
+            <header>
+                <p class="eyebrow">FAST example</p>
+                <h1>{{ welcomeTitle }}</h1>
+                <p class="intro">
+                    A declarative FAST shell that pre-renders with
+                    <code>@microsoft/fast-build</code>
+                    and streams each assistant reply with a hidden iframe plus
+                    <code>document.write()</code>.
+                </p>
+            </header>
+
+            <div
+                class="transcript"
+                f-ref="{transcript}"
+                @use-suggestion="{handleSuggestion($e)}"
+            >
+                <chat-message kind="bot">
+                    <p>
+                        <strong>Welcome!</strong>
+                        Send the exact suggested prompt to step through the canned chat.
+                    </p>
+                    <chat-card heading="How to use it">
+                        <p>
+                            Each assistant turn mixes native HTML with FAST custom
+                            elements and streams into the transcript a chunk at a time.
+                        </p>
+                    </chat-card>
+                </chat-message>
+                <chat-suggestion text="{{initialSuggestion}}"></chat-suggestion>
+            </div>
+
+            <form class="composer" @submit="{handleSubmit($e)}">
+                <label for="chat-composer">Message</label>
+                <textarea
+                    id="chat-composer"
+                    rows="4"
+                    placeholder="{{composerPlaceholder}}"
+                    f-ref="{composer}"
+                    @keydown="{handleComposerKeydown($e)}"
+                ></textarea>
+                <div class="composer__hint">
+                    <span>Enter sends the message.</span>
+                    <span>Shift+Enter inserts a newline.</span>
+                </div>
+                <button type="submit">Send</button>
+            </form>
+        </section>
+    </template>
+</f-template>
+
+<f-template name="chat-message">
+    <template>
+        <link rel="stylesheet" href="/styles.css">
+
+        <article><slot></slot></article>
+    </template>
+</f-template>
+
+<f-template name="chat-card">
+    <template>
+        <link rel="stylesheet" href="/styles.css">
+
+        <article>
+            <strong>{{ heading }}</strong>
+            <slot></slot>
+        </article>
+    </template>
+</f-template>
+
+<f-template name="chat-suggestion">
+    <template>
+        <link rel="stylesheet" href="/styles.css">
+
+        <p class="suggestion" @click="{emitSuggestion()}">
+            <span class="label">Next suggested user message</span>
+            <code>{{ text }}</code>
+        </p>
+    </template>
+</f-template>
diff --git a/examples/ssr/chat-app/tsconfig.json b/examples/ssr/chat-app/tsconfig.json
new file mode 100644
index 00000000000..7ebdc5928a0
--- /dev/null
+++ b/examples/ssr/chat-app/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "pretty": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "importHelpers": true,
+        "experimentalDecorators": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "noEmitOnError": true,
+        "strict": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "lib": ["dom", "esnext"]
+    },
+    "include": ["src"]
+}
diff --git a/examples/ssr/chat-app/vite.config.ts b/examples/ssr/chat-app/vite.config.ts
new file mode 100644
index 00000000000..431215bc572
--- /dev/null
+++ b/examples/ssr/chat-app/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    build: {
+        outDir: "www",
+        emptyOutDir: true,
+        sourcemap: true,
+    },
+    server: {
+        port: 9000,
+        open: !process.env.CI,
+    },
+});
diff --git a/examples/ssr/webui-todo-app/DESIGN.md b/examples/ssr/webui-todo-app/DESIGN.md
new file mode 100644
index 00000000000..e6f15347c2d
--- /dev/null
+++ b/examples/ssr/webui-todo-app/DESIGN.md
@@ -0,0 +1,142 @@
+# WebUI Todo App — design and architecture
+
+This document describes the SSR todo example in
+`examples/ssr/webui-todo-app/`. For the shared token catalog and naming rules,
+see [`../../design-system/README.md`](../../design-system/README.md) and
+[`../../design-system/DESIGN.md`](../../design-system/DESIGN.md).
+
+## Purpose
+
+This example demonstrates three pieces working together:
+
+- FAST declarative templates stored as co-located `*.html` and `*.css` files.
+- `@microsoft/webui` prerendering on the server, including Declarative Shadow
+  DOM output.
+- Client-side hydration through `@microsoft/fast-html`, so the prerendered UI
+  becomes interactive without re-rendering from scratch.
+
+The app stays intentionally small: a single todo list with add, toggle, and
+delete behavior backed by a JSON state file.
+
+## Folder structure
+
+```text
+examples/ssr/webui-todo-app/
+├── DESIGN.md
+├── README.md
+├── data/
+│   └── state.json
+├── src/
+│   ├── index.html
+│   ├── index.ts
+│   ├── todo-app/
+│   │   ├── todo-app.css
+│   │   ├── todo-app.html
+│   │   └── todo-app.ts
+│   └── todo-item/
+│       ├── todo-item.css
+│       ├── todo-item.html
+│       └── todo-item.ts
+├── package.json
+└── tsconfig.json
+```
+
+### File roles
+
+- `src/index.html` — document shell, page-level layout, and static
+  `data-theme="light"` selection.
+- `src/index.ts` — hydration entry; imports shared `tokens.css`, registers the
+  custom elements, and defines `<f-template>`.
+- `src/todo-app/` — root template, styles, and list management logic.
+- `src/todo-item/` — per-row template, styles, and event dispatch for toggle
+  and delete actions.
+- `data/state.json` — initial server state consumed by `webui serve`.
+
+## Build and serve flow
+
+1. `npm run build -w @microsoft/fast-webui-todo-app-example` runs esbuild on
+   `src/index.ts`.
+2. Esbuild emits `dist/index.js` for hydration and bootstrap code.
+3. Because `src/index.ts` imports
+   `@microsoft/fast-examples-design-system/tokens.css`, esbuild also emits
+   `dist/index.css`.
+4. `webui serve ./src --state ./data/state.json --plugin=fast --servedir ./dist`
+   uses `./src` as the source root for HTML templates and exposes the bundled
+   assets from `./dist`.
+5. On each request, `webui` reads `src/index.html`, resolves `{{}}` bindings
+   from `data/state.json`, renders Declarative Shadow DOM, and returns
+   prerendered HTML.
+6. In the browser, `/index.js` defines the FAST custom elements and hydrates the
+   prerendered DOM in place.
+7. `/index.css` makes the shared `--fast-*` tokens available to both the page
+   shell and shadow-root component styles.
+
+## Component model
+
+### `todo-app`
+
+`todo-app` is the root custom element. It:
+
+- reads the prerendered `<todo-item>` children during `prepare()`,
+- converts them into an observable `items` array,
+- tracks `remainingCount`,
+- handles add, toggle, and delete operations, and
+- re-renders the list through FAST bindings after hydration.
+
+### `todo-item`
+
+`todo-item` is a focused row component. It accepts `id`, `title`, and `state`
+attributes, then emits `toggle-item` and `delete-item` events that the parent
+handles.
+
+## Design system wiring
+
+This example consumes the shared
+`@microsoft/fast-examples-design-system` workspace package.
+
+- `src/index.ts` imports `@microsoft/fast-examples-design-system/tokens.css`
+  exactly once.
+- `src/index.html` links the generated `/index.css` bundle before its inline
+  page-shell styles.
+- `<html dir="{{textdirection}}" lang="en" data-theme="light">` hard-codes the
+  light theme at document level.
+- There is no runtime theme toggle, no theme persistence, and no JavaScript
+  that mutates `data-theme`.
+
+The design-system package is CSS-only. This example just consumes the
+registered custom properties through `var(--fast-...)`.
+
+## Representative tokens
+
+The component styles rely on shared tokens rather than hard-coded design
+values. Representative examples include:
+
+- Page shell: `--fast-background-web-page-primary`,
+  `--fast-foreground-ctrl-neutral-primary-rest`,
+  `--fast-padding-content-xx-large`.
+- Root card and section chrome: `--fast-background-layer-primary-solid`,
+  `--fast-stroke-divider-subtle`, `--fast-corner-large`,
+  `--fast-shadow-card-rest`.
+- Typography: `--fast-text-style-default-regular-font-family`,
+  `--fast-text-global-body3-font-size`,
+  `--fast-text-global-body3-line-height`,
+  `--fast-text-global-title1-font-size`,
+  `--fast-text-global-title1-line-height`.
+- Brand actions: `--fast-background-ctrl-brand-rest`,
+  `--fast-background-ctrl-brand-hover`,
+  `--fast-background-ctrl-brand-pressed`,
+  `--fast-foreground-ctrl-on-brand-rest`.
+- Focus and motion: `--fast-ctrl-focus-outer-stroke`,
+  `--fast-ctrl-focus-outer-stroke-width`, `--fast-duration-fast`,
+  `--fast-curve-easy-ease`.
+- Status states: `--fast-status-success-tint-foreground`,
+  `--fast-status-success-tint-background`,
+  `--fast-status-danger-tint-foreground`,
+  `--fast-status-danger-tint-background`.
+
+## Why this example lives under `examples/ssr/`
+
+Although the UI hydrates into client-side FAST components, the initial render is
+produced through `@microsoft/webui` on the server. The important example
+behavior is therefore SSR + prerendering + hydration, not a purely client-only
+bootstrap.
diff --git a/examples/ssr/webui-todo-app/README.md b/examples/ssr/webui-todo-app/README.md
new file mode 100644
index 00000000000..26c8c286b25
--- /dev/null
+++ b/examples/ssr/webui-todo-app/README.md
@@ -0,0 +1,124 @@
+# WebUI Todo App
+
+A Todo app demonstrating FAST declarative HTML templates with
+[webui](https://github.com/microsoft/webui) prerendering and hydration.
+
+This example shows how to combine `@microsoft/fast-html` declarative templates
+with `@microsoft/webui` for server-side prerendering, producing a fast initial
+render that hydrates into a fully interactive FAST web component application.
+
+## Features
+
+- **Declarative templates**: Uses `.html` and `.css` files instead of
+  imperative `html`/`css` tagged template literals
+- **Server-side prerendering**: `webui serve` compiles declarative templates
+  and renders initial state into static HTML
+- **Client-side hydration**: `@microsoft/fast-html` picks up prerendered DOM
+  and attaches FAST reactive bindings
+- **Todo functionality**: Add items, toggle completion, delete items,
+  remaining count
+
+## Prerequisites
+
+From the monorepo root, install dependencies and build packages:
+
+```bash
+npm ci
+npm run build
+```
+
+## Running
+
+```bash
+# Build client bundle and start the webui dev server
+npm start -w @microsoft/fast-webui-todo-app-example
+```
+
+The app will be available at `http://localhost:8081`.
+
+For development with live reloading, run the client and server in separate
+terminals:
+
+```bash
+# Terminal 1: Watch and rebuild client bundle
+npm run start:client -w @microsoft/fast-webui-todo-app-example
+
+# Terminal 2: Start webui dev server with --watch
+npm run start:server -w @microsoft/fast-webui-todo-app-example
+```
+
+## Design system
+
+This example consumes the shared `@microsoft/fast-examples-design-system`
+workspace package. The design-system package is **CSS-only** — there are no
+JavaScript or TypeScript exports. `src/index.ts` imports
+`@microsoft/fast-examples-design-system/tokens.css` once, and the rest of the
+app references the registered `--fast-*` design tokens through `var(...)`.
+
+The app uses the **light** theme. `<html data-theme="light">` is set
+statically in [`src/index.html`](./src/index.html); the app does not implement
+a runtime theme toggle. (The shared design-system package supports dark and
+system-preference themes via the same `data-theme` attribute — see
+[`../../design-system/README.md`](../../design-system/README.md) — but this
+example deliberately keeps the SSR surface area minimal and demonstrates only
+token consumption.)
+
+For the shared package overview, the token catalog, and authoring rules, see
+[`../../design-system/README.md`](../../design-system/README.md) and
+[`../../design-system/DESIGN.md`](../../design-system/DESIGN.md).
+
+## Architecture
+
+### Server-side (`webui serve`)
+
+The `webui` CLI serves the app with the `--plugin=fast` flag, which enables
+FAST-aware template processing:
+
+1. Scans `./src` for declarative HTML templates (`.html` files wrapped in
+   `<f-template>` or containing `<template shadowrootmode="open">`)
+2. Reads initial state from `./data/state.json`
+3. Renders templates server-side with `{{}}` bindings resolved from state
+4. Injects Declarative Shadow DOM for instant first paint
+5. Serves the bundled client assets from `./dist`
+
+`src/index.ts` imports `@microsoft/fast-examples-design-system/tokens.css`.
+When esbuild bundles the entry point, it emits both `dist/index.js` and
+`dist/index.css`. `src/index.html` links `/index.css` so the shared `--fast-*`
+tokens are available during prerendering and after hydration.
+
+### Templates (`src/todo-app/`, `src/todo-item/`)
+
+Each component uses co-located files:
+
+- `*.html` — Declarative template with `<template shadowrootmode="open">`
+  and FAST bindings
+- `*.css` — Scoped styles loaded via `<link rel="stylesheet">` in the shadow
+  DOM
+- `*.ts` — Component class using `RenderableFASTElement` mixin with
+  `defineAsync`
+
+### Client entry (`src/index.ts`)
+
+Bootstraps hydration by:
+
+1. Importing components (side-effect registration via `defineAsync`)
+2. Configuring `TemplateElement` with observer maps for reactive attribute
+   tracking
+3. Defining `<f-template>` to trigger hydration of prerendered shadow DOM
+
+### Binding syntax
+
+| Syntax | Scope | Example |
+|---|---|---|
+| `{{expr}}` | Server + client | `{{title}}` — HTML-escaped value |
+| `{{{expr}}}` | Server + client | Raw unescaped HTML |
+| `{expr}` | Client-only | `{onClick(e)}` — event handlers, refs |
+| `@event="{handler}"` | Client-only | `@click="{onAddClick()}"` |
+| `f-ref="{prop}"` | Client-only | `f-ref="{addInput}"` — element reference |
+
+### Template directives
+
+| Directive | Purpose | Example |
+|---|---|---|
+| `<for each="item in items">` | Iteration | `<for each="item in items"><todo-item>...</todo-item></for>` |
+| `<if condition="expr">` | Conditional | `<if condition="state == 'done'">...</if>` |
diff --git a/examples/ssr/webui-todo-app/data/state.json b/examples/ssr/webui-todo-app/data/state.json
new file mode 100644
index 00000000000..2d660332c34
--- /dev/null
+++ b/examples/ssr/webui-todo-app/data/state.json
@@ -0,0 +1,23 @@
+{
+    "textdirection": "ltr",
+    "language": "en",
+    "title": "FAST Todos",
+    "remainingCount": 2,
+    "items": [
+        {
+            "id": "1",
+            "title": "Buy groceries",
+            "state": "done"
+        },
+        {
+            "id": "2",
+            "title": "Write documentation",
+            "state": "pending"
+        },
+        {
+            "id": "3",
+            "title": "Ship feature",
+            "state": "pending"
+        }
+    ]
+}
diff --git a/examples/ssr/webui-todo-app/package.json b/examples/ssr/webui-todo-app/package.json
new file mode 100644
index 00000000000..4083b47715d
--- /dev/null
+++ b/examples/ssr/webui-todo-app/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "@microsoft/fast-webui-todo-app-example",
+    "version": "1.0.0",
+    "description": "A Todo app demonstrating FAST declarative HTML with webui prerendering.",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --metafile=dist/meta.json",
+        "start:client": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --sourcemap --watch",
+        "start:server": "webui serve ./src --state ./data/state.json --plugin=fast --servedir ./dist --port 8081 --watch",
+        "start": "npm run build && npm run start:server",
+        "test": "npm run build"
+    },
+    "author": {
+        "name": "Microsoft",
+        "url": "https://discord.gg/FcSNfg4"
+    },
+    "homepage": "https://www.fast.design/",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Microsoft/fast.git",
+        "directory": "examples/ssr/webui-todo-app"
+    },
+    "dependencies": {
+        "@microsoft/fast-element": "^2.10.3",
+        "@microsoft/fast-examples-design-system": "^1.0.0",
+        "@microsoft/fast-html": "*",
+        "@microsoft/webui": "^0.0.6",
+        "tslib": "^2.6.3"
+    },
+    "devDependencies": {
+        "esbuild": "^0.25.0",
+        "typescript": "^5.8.0"
+    }
+}
diff --git a/examples/ssr/webui-todo-app/src/index.html b/examples/ssr/webui-todo-app/src/index.html
new file mode 100644
index 00000000000..85af70955f4
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html dir="{{textdirection}}" lang="en" data-theme="light">
+    <head>
+        <meta charset="utf-8">
+        <title>{{ title }}</title>
+        <link rel="stylesheet" href="/index.css">
+        <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: var(--fast-text-style-default-regular-font-family);
+            max-width: 640px;
+            margin: 0 auto;
+            padding: var(--fast-padding-content-xx-large);
+            background: var(--fast-background-web-page-primary);
+            color: var(--fast-foreground-ctrl-neutral-primary-rest);
+        }
+        </style>
+    </head>
+
+    <body>
+        <todo-app title="{{title}}"></todo-app>
+
+        <script type="module" src="/index.js"></script>
+    </body>
+</html>
diff --git a/examples/ssr/webui-todo-app/src/index.ts b/examples/ssr/webui-todo-app/src/index.ts
new file mode 100644
index 00000000000..c8ae1704843
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/index.ts
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * WebUI todo-app entry point — bootstraps FAST-HTML hydration.
+ *
+ * The server pre-renders HTML with hydration markers via `webui serve --plugin=fast`.
+ * This script:
+ *   1. Registers custom elements (todo-app, todo-item) via defineAsync
+ *   2. Configures FAST-HTML observation maps for reactive attribute tracking
+ *   3. Defines <f-template>, triggering hydration of pre-rendered shadow DOM
+ */
+
+performance.mark("todo-hydration-started");
+
+import "@microsoft/fast-examples-design-system/tokens.css";
+import { TemplateElement } from "@microsoft/fast-html";
+
+// Side-effect imports — register custom elements via defineAsync
+import "./todo-app/todo-app.js";
+import "./todo-item/todo-item.js";
+
+// Configure and start hydration
+TemplateElement.options({
+    "todo-app": { observerMap: "all" },
+    "todo-item": { observerMap: "all" },
+})
+    .config({
+        hydrationComplete() {
+            performance.measure("todo-hydration-completed", "todo-hydration-started");
+            console.log("Hydration complete!");
+        },
+    })
+    .define({
+        name: "f-template",
+    });
diff --git a/examples/ssr/webui-todo-app/src/todo-app/todo-app.css b/examples/ssr/webui-todo-app/src/todo-app/todo-app.css
new file mode 100644
index 00000000000..31c9ea150d1
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-app/todo-app.css
@@ -0,0 +1,75 @@
+:host {
+    display: block;
+    padding: var(--fast-padding-content-medium);
+    max-width: 480px;
+}
+
+h1 {
+    font-size: var(--fast-text-global-title1-font-size);
+    line-height: var(--fast-text-global-title1-line-height);
+    font-weight: var(--fast-text-style-default-header-weight);
+    margin-bottom: var(--fast-gap-between-content-medium);
+    color: var(--fast-foreground-ctrl-brand-rest);
+}
+
+.add-form {
+    display: flex;
+    gap: var(--fast-gap-between-content-x-small);
+    margin-bottom: var(--fast-gap-between-content-medium);
+}
+
+.add-input {
+    flex: 1;
+    padding: var(--fast-padding-content-x-small) var(--fast-padding-content-small);
+    font-size: var(--fast-text-global-body3-font-size);
+    line-height: var(--fast-text-global-body3-line-height);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-ctrl-on-outline-rest);
+    border-radius: var(--fast-corner-large);
+    outline: none;
+    font-family: inherit;
+}
+
+.add-input:focus {
+    border-color: var(--fast-ctrl-focus-outer-stroke);
+    outline: var(--fast-ctrl-focus-outer-stroke-width) solid
+        var(--fast-ctrl-focus-outer-stroke);
+    outline-offset: var(--fast-stroke-width-default);
+}
+
+.add-button {
+    padding: var(--fast-padding-content-x-small) var(--fast-padding-content-large);
+    font-size: var(--fast-text-global-body3-font-size);
+    line-height: var(--fast-text-global-body3-line-height);
+    font-family: inherit;
+    background: var(--fast-background-ctrl-brand-rest);
+    color: var(--fast-foreground-ctrl-on-brand-rest);
+    border: none;
+    border-radius: var(--fast-corner-large);
+    cursor: pointer;
+    transition: background var(--fast-duration-fast) var(--fast-curve-easy-ease);
+}
+
+.add-button:hover {
+    background: var(--fast-background-ctrl-brand-hover);
+}
+
+.add-button:active {
+    background: var(--fast-background-ctrl-brand-pressed);
+}
+
+.todo-list {
+    background: var(--fast-background-layer-primary-solid);
+    border: var(--fast-stroke-width-default) solid var(--fast-stroke-divider-subtle);
+    border-radius: var(--fast-corner-large);
+    box-shadow: var(--fast-shadow-card-rest);
+    overflow: hidden;
+}
+
+.footer {
+    margin-top: var(--fast-gap-between-content-medium);
+    padding: var(--fast-padding-content-x-small);
+    text-align: center;
+    font-size: var(--fast-text-global-caption1-font-size);
+    line-height: var(--fast-text-global-caption1-line-height);
+    color: var(--fast-foreground-ctrl-neutral-secondary-rest);
+}
diff --git a/examples/ssr/webui-todo-app/src/todo-app/todo-app.html b/examples/ssr/webui-todo-app/src/todo-app/todo-app.html
new file mode 100644
index 00000000000..cd7af8dab12
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-app/todo-app.html
@@ -0,0 +1,29 @@
+<template
+    shadowrootmode="open"
+    @toggle-item="{onToggleItem(e)}"
+    @delete-item="{onDeleteItem(e)}"
+>
+    <h1>{{ title }}</h1>
+
+    <div class="add-form">
+        <input
+            class="add-input"
+            placeholder="What needs to be done?"
+            f-ref="{addInput}"
+            @keydown="{onAddKeydown(e)}"
+        >
+        <button type="button" class="add-button" @click="{onAddClick()}">Add</button>
+    </div>
+
+    <div class="todo-list">
+        <for each="item in items">
+            <todo-item
+                id="{{item.id}}"
+                title="{{item.title}}"
+                state="{{item.state}}"
+            ></todo-item>
+        </for>
+    </div>
+
+    <div class="footer"><span>{{ remainingCount }} items remaining</span></div>
+</template>
diff --git a/examples/ssr/webui-todo-app/src/todo-app/todo-app.ts b/examples/ssr/webui-todo-app/src/todo-app/todo-app.ts
new file mode 100644
index 00000000000..9aef5d55f85
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-app/todo-app.ts
@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { attr, FASTElement, observable } from "@microsoft/fast-element";
+import { RenderableFASTElement } from "@microsoft/fast-html";
+
+interface TodoItemData {
+    id: string;
+    title: string;
+    state: string;
+}
+
+export class TodoApp extends RenderableFASTElement(FASTElement) {
+    @attr title = "";
+    @observable items!: TodoItemData[];
+    @observable remainingCount!: number;
+
+    addInput!: HTMLInputElement;
+
+    private nextId = 100;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+    }
+
+    async prepare(): Promise<void> {
+        const items: TodoItemData[] = [];
+
+        for (const el of this.shadowRoot!.querySelectorAll("todo-item")) {
+            items.push({
+                id: el.getAttribute("id") || "",
+                title: el.getAttribute("title") || "",
+                state: el.getAttribute("state") || "pending",
+            });
+        }
+
+        this.items = items;
+
+        if (items.length > 0) {
+            this.nextId = Math.max(...items.map(i => Number(i.id) || 0)) + 1;
+        }
+
+        this.updateCount();
+    }
+
+    onToggleItem(e: CustomEvent<{ id: string }>): void {
+        const item = this.items.find(i => i.id === e.detail.id);
+
+        if (item) {
+            item.state = item.state === "done" ? "pending" : "done";
+        }
+
+        this.updateCount();
+    }
+
+    onDeleteItem(e: CustomEvent<{ id: string }>): void {
+        this.items = this.items.filter(item => item.id !== e.detail.id);
+        this.updateCount();
+    }
+
+    onAddKeydown(e: KeyboardEvent) {
+        if (e.key === "Enter") {
+            this.addTodo();
+        }
+
+        return true;
+    }
+
+    onAddClick(): void {
+        this.addTodo();
+    }
+
+    private addTodo(): void {
+        const input = this.addInput;
+
+        if (!input) return;
+
+        const text = input.value.trim();
+
+        if (!text) return;
+
+        this.items = [
+            ...this.items,
+            { id: String(this.nextId++), title: text, state: "pending" },
+        ];
+        this.updateCount();
+        input.value = "";
+        input.focus();
+    }
+
+    private updateCount(): void {
+        this.remainingCount = this.items.filter(i => i.state !== "done").length;
+    }
+}
+
+TodoApp.defineAsync({
+    name: "todo-app",
+    templateOptions: "defer-and-hydrate",
+});
diff --git a/examples/ssr/webui-todo-app/src/todo-item/todo-item.css b/examples/ssr/webui-todo-app/src/todo-item/todo-item.css
new file mode 100644
index 00000000000..dd9b391c49a
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-item/todo-item.css
@@ -0,0 +1,71 @@
+:host {
+    display: block;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: var(--fast-gap-between-content-x-small);
+    padding: var(--fast-padding-content-x-small) var(--fast-padding-content-small);
+    border-bottom: var(--fast-stroke-width-default) solid
+        var(--fast-stroke-divider-subtle);
+}
+
+.title {
+    flex: 1;
+    font-size: var(--fast-text-global-body3-font-size);
+    line-height: var(--fast-text-global-body3-line-height);
+}
+
+:host([state="done"]) .title {
+    text-decoration: line-through;
+    color: var(--fast-foreground-ctrl-hint-default);
+}
+
+.toggle {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: var(--fast-stroke-width-divider-strong) solid
+        var(--fast-stroke-ctrl-on-outline-rest);
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: var(--fast-text-global-caption1-font-size);
+    line-height: var(--fast-text-global-caption1-line-height);
+    color: var(--fast-status-success-tint-foreground);
+}
+
+:host([state="done"]) .toggle {
+    border-color: var(--fast-status-success-tint-stroke);
+    background: var(--fast-status-success-tint-background);
+}
+
+.delete {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: var(--fast-text-global-body1-font-size);
+    line-height: var(--fast-text-global-body1-line-height);
+    color: var(--fast-foreground-ctrl-hint-default);
+    border-radius: var(--fast-corner-medium);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity var(--fast-duration-fast) var(--fast-curve-easy-ease);
+}
+
+.item:hover .delete {
+    opacity: 1;
+}
+
+.delete:hover {
+    color: var(--fast-status-danger-tint-foreground);
+    background: var(--fast-status-danger-tint-background);
+}
diff --git a/examples/ssr/webui-todo-app/src/todo-item/todo-item.html b/examples/ssr/webui-todo-app/src/todo-item/todo-item.html
new file mode 100644
index 00000000000..2347f439bb6
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-item/todo-item.html
@@ -0,0 +1,11 @@
+<template shadowrootmode="open" @click="{onClick(e)}">
+    <div class="item">
+        <button type="button" class="toggle" data-action="toggle" title="Toggle complete">
+            <if condition="state == 'done'"> <span class="check">&#10003;</span> </if>
+        </button>
+        <span class="title">{{ title }}</span>
+        <button type="button" class="delete" data-action="delete" title="Delete">
+            &times;
+        </button>
+    </div>
+</template>
diff --git a/examples/ssr/webui-todo-app/src/todo-item/todo-item.ts b/examples/ssr/webui-todo-app/src/todo-item/todo-item.ts
new file mode 100644
index 00000000000..7bb71ade03d
--- /dev/null
+++ b/examples/ssr/webui-todo-app/src/todo-item/todo-item.ts
@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { attr, FASTElement } from "@microsoft/fast-element";
+import { RenderableFASTElement } from "@microsoft/fast-html";
+
+export class TodoItem extends RenderableFASTElement(FASTElement) {
+    @attr id = "";
+    @attr title = "";
+    @attr state = "";
+
+    onClick(e: MouseEvent): void {
+        const target = e.composedPath()[0] as HTMLElement;
+        const action = target.closest("[data-action]")?.getAttribute("data-action");
+
+        if (!action) return;
+
+        if (action === "toggle") {
+            this.$emit("toggle-item", { id: this.id });
+        } else if (action === "delete") {
+            this.$emit("delete-item", { id: this.id });
+        }
+    }
+}
+
+TodoItem.defineAsync({
+    name: "todo-item",
+    templateOptions: "defer-and-hydrate",
+});
diff --git a/examples/ssr/webui-todo-app/tsconfig.json b/examples/ssr/webui-todo-app/tsconfig.json
new file mode 100644
index 00000000000..18044303e73
--- /dev/null
+++ b/examples/ssr/webui-todo-app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "target": "ESNext",
+        "strict": true,
+        "experimentalDecorators": true,
+        "useDefineForClassFields": false,
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "sourceMap": true,
+        "incremental": true
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
+}
diff --git a/package-lock.json b/package-lock.json
index 95b8affe34d..de686651961 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "packages/*",
         "sites/*",
         "examples/*",
-        "examples/csr/*"
+        "examples/csr/*",
+        "examples/ssr/*"
       ],
       "devDependencies": {
         "@ast-grep/cli": "0.37.0",
@@ -80,6 +81,638 @@
       "version": "1.0.0",
       "license": "MIT"
     },
+    "examples/ssr/chat-app": {
+      "name": "@microsoft/fast-chat-app-example",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@microsoft/fast-element": "^3.0.0-rc.1",
+        "@microsoft/fast-examples-design-system": "^1.0.0",
+        "tslib": "^2.6.3"
+      },
+      "devDependencies": {
+        "@microsoft/fast-build": "*"
+      }
+    },
+    "examples/ssr/chat-app/node_modules/@microsoft/fast-element": {
+      "version": "3.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-3.0.0-rc.1.tgz",
+      "integrity": "sha512-c4gtNzySRViqRQAhJKHLzIWZiWFwYXJGfFW0G5nKE1lovIPGnNhnVwOASDHKkAlL/cAHz/C65rsqYSo+Jbfq4Q==",
+      "license": "MIT"
+    },
+    "examples/ssr/webui-todo-app": {
+      "name": "@microsoft/fast-webui-todo-app-example",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@microsoft/fast-element": "^2.10.3",
+        "@microsoft/fast-examples-design-system": "^1.0.0",
+        "@microsoft/fast-html": "*",
+        "@microsoft/webui": "^0.0.6",
+        "tslib": "^2.6.3"
+      },
+      "devDependencies": {
+        "esbuild": "^0.25.0",
+        "typescript": "^5.8.0"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui/-/webui-0.0.6.tgz",
+      "integrity": "sha512-jRuccYga426tEHghakJFJpJ28Rl1nakEhrf0+Cwlu+ThhMSveSIKk9vQV2/8Bs4p4C7O4YVXYegWdzVA+PDbcg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "webui": "bin/webui"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@microsoft/webui-darwin-arm64": "0.0.6",
+        "@microsoft/webui-darwin-x64": "0.0.6",
+        "@microsoft/webui-linux-arm64": "0.0.6",
+        "@microsoft/webui-linux-x64": "0.0.6",
+        "@microsoft/webui-win32-arm64": "0.0.6",
+        "@microsoft/webui-win32-x64": "0.0.6"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-darwin-arm64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-darwin-arm64/-/webui-darwin-arm64-0.0.6.tgz",
+      "integrity": "sha512-J+3k/yLWsEA1WYy+9L4yo+HX12RJSUSJZdGC8/XiGXCNcopn+P4V2SGr68XKS5h1P4ehGh0Xlrh50DVmzzIfug==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-darwin-x64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-darwin-x64/-/webui-darwin-x64-0.0.6.tgz",
+      "integrity": "sha512-nMFBBMOKhmbYR9M7jpgXrZdGhM7jB/O1XrSrHat9s9QnfYBIwU6Li+S5pRx+faTQXHC7LxBCjkVwqP11yCLbCA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-linux-arm64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-linux-arm64/-/webui-linux-arm64-0.0.6.tgz",
+      "integrity": "sha512-qI3X2B/IXQiMUDLkAFq2JlyzVhgSyKt8Hmhszqho7N6IW1sDf/U1GBXgWZ9F4jwp3QJXTeM48H5yKxlENEI/VQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-linux-x64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-linux-x64/-/webui-linux-x64-0.0.6.tgz",
+      "integrity": "sha512-/4MJYVvK99FBqx2CqDmLj2fjBxpY5yaBPZsz7lR6BqDZwDvVNHF0EnMswKDLRPN/B7D2i+sAiRA4Ewc7UqAknA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-win32-arm64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-win32-arm64/-/webui-win32-arm64-0.0.6.tgz",
+      "integrity": "sha512-km5gxthrUuzOCGZ1cJv4xuzrYohwruRXQq+0BcPOCncMlU0FhuRidOTn20SZo0hl5e5l/SXVz2lhL57Ws8PH8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/@microsoft/webui-win32-x64": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/webui-win32-x64/-/webui-win32-x64-0.0.6.tgz",
+      "integrity": "sha512-9nhFzdK6PWC4MWZfl7EwCdkCeu1aYol6bbeecukkgZLb40zNt0wXfTy5M9dK4jP7BN2nPqjbIL0cm9YdbkVabg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "examples/ssr/webui-todo-app/node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "examples/ssr/webui-todo-app/node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "examples/todo-app": {
       "name": "@microsoft/fast-todo-app-example",
       "version": "1.0.0",
@@ -1566,6 +2199,10 @@
       "resolved": "build",
       "link": true
     },
+    "node_modules/@microsoft/fast-chat-app-example": {
+      "resolved": "examples/ssr/chat-app",
+      "link": true
+    },
     "node_modules/@microsoft/fast-element": {
       "resolved": "packages/fast-element",
       "link": true
@@ -1598,6 +2235,10 @@
       "resolved": "examples/csr/todo-mobx-app",
       "link": true
     },
+    "node_modules/@microsoft/fast-webui-todo-app-example": {
+      "resolved": "examples/ssr/webui-todo-app",
+      "link": true
+    },
     "node_modules/@microsoft/tsdoc": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.16.0.tgz",
diff --git a/package.json b/package.json
index 6e0c04befad..87c97505cdd 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "packages/*",
     "sites/*",
     "examples/*",
-    "examples/csr/*"
+    "examples/csr/*",
+    "examples/ssr/*"
   ],
   "engines": {
     "npm": ">=10.0.0",