The examples/ workspace hosts small, focused applications that show how to build real UI with FAST using production-shaped tooling, app structure, and styling. It is aimed at contributors, library consumers, and anyone evaluating FAST patterns in a complete app context.

Example apps are grouped by rendering strategy. Client-side-rendered (CSR) apps live under examples/csr/ and server-side-rendered (SSR) apps live under examples/ssr/.

Every example app must consume @microsoft/fast-examples-design-system. The package is CSS-only — it ships a single stylesheet (tokens.css) and no JavaScript or TypeScript. Apps wire theme switching themselves using the data-theme attribute on <html>.

The package exposes a single import:

Style components with semantic tokens such as --fast-background-layer-primary-solid, --fast-foreground-ctrl-neutral-primary-rest, --fast-background-ctrl-brand-rest, --fast-text-global-body3-font-size, --fast-padding-content-medium, and --fast-corner-large. Never hard-code colors, font sizes, padding, gaps, corners, stroke widths, shadows, durations, or curves.

See:

• examples/design-system/README.md — quickstart, available imports, token catalog.
• examples/design-system/DESIGN.md — naming grammar, role catalog, theme model, and rules for adding tokens (the canonical authoring guide for both humans and coding agents).
• examples/DESIGN.md — workspace-level guidance for building new example apps on top of the design system.

1. Scaffold a new folder under the appropriate rendering-strategy subfolder (CSR apps go under examples/csr/<your-app>/; SSR apps go under examples/ssr/<your-app>/).
2. Use examples/csr/todo-app/ as a reference for CSR apps, or examples/ssr/chat-app/ / examples/ssr/webui-todo-app/ as a reference for SSR apps (package.json, tsconfig.json, build config, entry HTML).
3. Add "@microsoft/fast-examples-design-system": "^1.0.0" 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 the app entry point (typically src/main.ts or src/index.ts). For an intentionally single-theme app, hard-code <html data-theme="light"> (or "dark") in the entry HTML and never touch it from JavaScript.
5. Reference tokens via var(--fast-...) in component css template literals or .css files — do not hard-code design values.
6. If the app needs a theme toggle, set or remove the data-theme attribute on <html> from your app code:

   document.documentElement.setAttribute("data-theme", "dark");
   document.documentElement.removeAttribute("data-theme"); // restore system

   Do not import any JavaScript from the design-system package — it intentionally exposes none.
7. Add the new app to the table at the top of this file.

From the repository root:

npm install
npm start -w @microsoft/fast-<your-app>-example

For the existing example apps:

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

• Examples design guide
• Examples design-system package
• FAST repository README
• FAST documentation