---
name: write-example
description: Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.
---

# write-example

Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.

# write-exampleby tldraw
Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.

`npx skills add https://github.com/tldraw/tldraw --skill write-example`Download ZIPGitHub

## Writing tldraw examples

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`.

## Example structure

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
`
```

## Folder name

* Lowercase kebab-case: `custom-canvas`, `button-demo`, `magical-wand`

* Used as the URL path for the example

## README.md

Required 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.
`
```

### Frontmatter fields

FieldDescriptiontitleSentence case, corresponds to folder namecomponentRelative path to example filecategoryOne of the valid category IDs (see below)priorityDisplay order within category (lower = higher)keywordsSearch terms (avoid obvious terms like "tldraw")

### Valid categories

`getting-started`, `configuration`, `editor-api`, `ui`, `layout`, `events`, `shapes/tools`, `collaboration`, `data/assets`, `use-cases`

## Example file

### Naming

* PascalCase ending with "Example": `CustomCanvasExample.tsx`, `ButtonExample.tsx`

* Name should correspond to the folder name and title

### Structure

```
`import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function MyExampleExample() {
return (
<div className="tldraw__editor">
<Tldraw />
</div>
)
}
`
```

Requirements:

* Must have a default export React component

* Use `tldraw__editor` class for full-page examples

* Import `tldraw/tldraw.css` for styles

### Layout

* Full page: wrap in `<div className="tldraw__editor">`

* Inset: see existing examples for page layout patterns

## Styles

* Put CSS in a separate file named after the example: `my-example.css`

* Import alongside tldraw CSS: `import './my-example.css'`

* Avoid extensive inline styles via the `style` prop

## Control panels

For 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;
}
`
```

## Comments

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.
*/
`
```

## Example types

### Tight examples

* Narrow focus on a specific SDK feature

* Minimal styling

* Meant to be read, not used

* Remove any extraneous code

### Use-case examples

* Show a recognizable user experience

* Prioritize clarity and completeness

* Category: `use-cases`

## Additional files

* Split complex code into separate files if it distracts from the example's purpose

* Example: complex input component in `Input.tsx`

* Keep the main example file focused on demonstrating the concept

## Important

* Follow React and TypeScript best practices

* Never use title case for titles - use sentence case

* Keep examples minimal and focused

## More skills from tldraw
write-issueby tldrawReference standards for writing and maintaining GitHub issues in the tldraw repository. Use as supporting guidance when another skill or workflow needs issue…write-prby tldrawReference standards for writing pull request titles and descriptions in the tldraw repository. Use as supporting guidance when another skill or workflow needs…write-release-notesby tldrawWriting release notes articles for tldraw SDK releases. Use when creating new release documentation, drafting release notes from scratch, or reviewing release…write-tbpby tldrawWriting technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.write-unit-testsby tldrawWriting unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or…clean-copyby tldrawReimplement the current branch on a new branch with a clean, narrative-quality git commit history. Use when asked to make a clean copy branch, clean up commit…commit-changesby tldrawCreate a git commit for the current changes. Use when asked to commit changes, make a commit, generate a commit message, or commit the current worktree with…issueby tldrawCreate and research a GitHub issue in the tldraw repository from a user description. Use when the user invokes issue, asks to create an issue, report a bug,…

---

**Source**: https://github.com/tldraw/tldraw/tree/HEAD/skills/write-example
**Author**: tldraw
**Discovered via**: mcpservers.org