tldraw
Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.
bunx add-skill tldraw/tldraw -s write-exampleLoadingβ¦
The examples project (apps/examples) contains minimal demonstrations of how to use the tldraw SDK. Examples are embedded on the docs site and deployed to examples.tldraw.com.
Standards for examples in apps/examples/src/examples.
Each example lives in its own folder:
apps/examples/src/examples/
βββ my-example/
βββ README.md # Required metadata
βββ MyExampleExample.tsx # Main example file
βββ my-example.css # Optional styles
custom-canvas, button-demo, magical-wandRequired frontmatter format:
---
title: Example title
component: ./ExampleFile.tsx
category: category-id
priority: 1
keywords: [keyword1, keyword2]
---
One-line summary of what this example demonstrates.
---
Detailed explanation of the example. Include code snippets here if they help explain concepts not obvious from the example code itself.
| Field | Description |
|---|---|
| title | Sentence case, corresponds to folder name |
| component | Relative path to example file |
| category | One of the valid category IDs (see below) |
| priority | Display order within category (lower = higher) |
| keywords | Search terms (avoid obvious terms like "tldraw") |
getting-started, configuration, editor-api, ui, layout, events, shapes/tools, collaboration, data/assets, use-cases
CustomCanvasExample.tsx, ButtonExample.tsximport { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function MyExampleExample() {
return (
<div className="tldraw__editor">
<Tldraw />
</div>
)
}
Requirements:
tldraw__editor class for full-page examplestldraw/tldraw.css for styles<div className="tldraw__editor">my-example.cssimport './my-example.css'style propFor examples that need buttons or controls, use the TopPanel component slot with TldrawUiButton:
import { Tldraw, TldrawUiButton, useEditor } from 'tldraw'
import 'tldraw/tldraw.css'
import './my-example.css'
function MyControls() {
const editor = useEditor()
return (
<div className="tlui-menu my-controls">
<TldrawUiButton type="normal" onClick={() => editor.zoomIn()}>
Zoom in
</TldrawUiButton>
<TldrawUiButton type="normal" onClick={() => editor.zoomOut()}>
Zoom out
</TldrawUiButton>
</div>
)
}
export default function MyExampleExample() {
return (
<div className="tldraw__editor">
<Tldraw components={{ TopPanel: MyControls }} />
</div>
)
}
CSS for control panels:
.my-controls {
display: flex;
flex-wrap: wrap;
margin: 8px;
}
Use footnote format with numbered references:
import { Tldraw, type TLComponents } from 'tldraw'
import 'tldraw/tldraw.css'
// [1]
const components: TLComponents = {
PageMenu: null,
}
export default function CustomComponentsExample() {
return (
<div className="tldraw__editor">
{/* [2] */}
<Tldraw components={components} />
</div>
)
}
/*
[1]
Define component overrides outside the React component so they're static.
If defined inside, use useMemo to prevent recreation on every render.
[2]
Pass component overrides via the components prop.
*/
use-casesInput.tsxUse when you need to run Flow type checking, or when seeing Flow type errors in React code.
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.