apps/examples

Active contributors: Steve Ruiz, Mime Čuvalo, Mitja Bezenšek, Lu Wilson

Purpose

apps/examples/ is the development host for the SDK and the public examples gallery on tldraw.dev. yarn dev runs this app at http://localhost:5420; every example renders the SDK in a different configuration.

Directory layout

apps/examples/
├── package.json
├── vite.config.ts
├── playwright.config.ts
├── writing-examples.md
├── public/
├── e2e/
├── scripts/
└── src/
    ├── ExamplePage.tsx              # individual example wrapper
    ├── ExampleWrapper.tsx
    ├── examples/                    # one folder per example
    │   ├── basic/
    │   ├── multiplayer/
    │   ├── custom-shapes/
    │   └── ...
    ├── examples.tsx                 # registry of all examples
    ├── index.tsx
    ├── styles.css
    ├── icons/
    ├── hooks/
    └── misc/

How it works

Each example is a folder under apps/examples/src/examples/<kebab-name>/ containing at minimum:

• A React component default-exported from <Name>Example.tsx.
• A README.md with frontmatter (title, description, category, tags) — these drive the gallery on tldraw.dev.

The Vite app loads them via dynamic imports. Examples can show off custom shapes, tools, bindings, UI overrides, sync, AI agents, performance tweaks, and embeds.

The writing-examples.md file in the workspace lists conventions: lowercase kebab-case folders, sentence-case titles, a working "open in CodeSandbox" link.

E2E

Playwright tests under apps/examples/e2e/ exercise the SDK against live examples. yarn e2e runs them; CI runs them in .github/workflows/playwright-examples.yml. Performance tests live in playwright-perf.yml and run nightly.

Integration points

• Imports. tldraw, @tldraw/sync, @tldraw/state, plus per-example deps.
• Used by. Local development (yarn dev), CI Playwright workflows, and the docs site (the gallery embeds these examples).

Related

• @tldraw/tldraw
• Testing
• skills/write-example for the example-writing conventions.