Publish Sign in

Writing tldraw examples

Writing examples for the tldraw SDK examples app.

You say
Install this skill Read the source first Free Written by tldraw · unverified publisher
Context cost
1.2k tokensestimated from the bundle, loaded when it triggers
Bundle
1 file · 4.8 kBtext throughout, nothing executable
Licence
Source-availablefree to use
Last change
—no release on file
Servers it uses
Noneruns standalone

What it does

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

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Workflow

Runs a procedure end to end.

documentationwriting
Filed under

Learning & Documentation

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md4.8 kB · 202 lines
--- 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. ---
6# Writing tldraw examples
7
8The examples project (apps/examples) contains minimal demonstrations of how to use the tldraw SDK. Examples are embedded on the [docs site](https://tldraw.dev/examples) and deployed to [examples.tldraw.com](https://examples.tldraw.com).
9
10Standards for examples in apps/examples/src/examples.
11
12## Example structure
13
14Each example lives in its own folder:
15
16```
17apps/examples/src/examples/
18└── my-example/
19 ├── README.md # Required metadata
20 ├── MyExampleExample.tsx # Main example file
21 └── my-example.css # Optional styles
22```
23
24## Folder name
25
26- Lowercase kebab-case: custom-canvas, button-demo, magical-wand
27- Used as the URL path for the example
28
29## README.md
30
31Required frontmatter format:
32
33```md
34---
35title: Example title
36component: ./ExampleFile.tsx
37category: category-id
38priority: 1
39keywords: [keyword1, keyword2]
40---
41
42One-line summary of what this example demonstrates.
43
44---
45
46Detailed explanation of the example. Include code snippets here if they help explain concepts not obvious from the example code itself.
47```
48
49### Frontmatter fields
50
51| Field | Description |
52| --------- | ------------------------------------------------ |
53| title | Sentence case, corresponds to folder name |
54| component | Relative path to example file |
55| category | One of the valid category IDs (see below) |
56| priority | Display order within category (lower = higher) |
57| keywords | Search terms (avoid obvious terms like "tldraw") |
58
59### Valid categories
60
61getting-started, configuration, editor-api, ui, layout, events, shapes/tools, collaboration, data/assets, use-cases
62
63## Example file
64
65### Naming
66
67- PascalCase ending with "Example": CustomCanvasExample.tsx, ButtonExample.tsx
68- Name should correspond to the folder name and title
69
70### Structure
71
72```tsx
73import { Tldraw } from 'tldraw'
74import 'tldraw/tldraw.css'
75
76export default function MyExampleExample() {
77 return (
78 <div className="tldraw__editor">
79 <Tldraw />
80 </div>
81 )
82}
83```
84
85**Requirements:**
86
87- Must have a default export React component
88- Use tldraw__editor class for full-page examples
89- Import tldraw/tldraw.css for styles
90
91### Layout
92
93- Full page: wrap in <div className="tldraw__editor">
94- Inset: see existing examples for page layout patterns
95
96## Styles
97
98- Put CSS in a separate file named after the example: my-example.css
99- Import alongside tldraw CSS: import './my-example.css'
100- Avoid extensive inline styles via the style prop
101
102## Control panels
103
104For examples that need buttons or controls, use the TopPanel component slot with TldrawUiButton:
105
106```tsx
107import { Tldraw, TldrawUiButton, useEditor } from 'tldraw'
108import 'tldraw/tldraw.css'
109import './my-example.css'
110
111function MyControls() {
112 const editor = useEditor()
113 return (
114 <div className="tlui-menu my-controls">
115 <TldrawUiButton type="normal" onClick={() => editor.zoomIn()}>
116 Zoom in
117 </TldrawUiButton>
118 <TldrawUiButton type="normal" onClick={() => editor.zoomOut()}>
119 Zoom out
120 </TldrawUiButton>
121 </div>
122 )
123}
124
125export default function MyExampleExample() {
126 return (
127 <div className="tldraw__editor">
128 <Tldraw components={{ TopPanel: MyControls }} />
129 </div>
130 )
131}
132```
133
134CSS for control panels:
135
136```css
137.my-controls {
138 display: flex;
139 flex-wrap: wrap;
140 margin: 8px;
141}
142```
143
144## Comments
145
146Use footnote format with numbered references:
147
148```tsx
149import { Tldraw, type TLComponents } from 'tldraw'
150import 'tldraw/tldraw.css'
151
152// [1]
153const components: TLComponents = {
154 PageMenu: null,
155}
156
157export default function CustomComponentsExample() {
158 return (
159 <div className="tldraw__editor">
160 {/* [2] */}
161 <Tldraw components={components} />
162 </div>
163 )
164}
165
166/*
167[1]
168Define component overrides outside the React component so they're static.
169If defined inside, use useMemo to prevent recreation on every render.
170
171[2]
172Pass component overrides via the components prop.
173*/
174```
175
176## Example types
177
178### Tight examples
179
180- Narrow focus on a specific SDK feature
181- Minimal styling
182- Meant to be read, not used
183- Remove any extraneous code
184
185### Use-case examples
186
187- Show a recognizable user experience
188- Prioritize clarity and completeness
189- Category: use-cases
190
191## Additional files
192
193- Split complex code into separate files if it distracts from the example's purpose
194- Example: complex input component in Input.tsx
195- Keep the main example file focused on demonstrating the concept
196
197## Important
198
199- Follow React and TypeScript best practices
200- Never use title case for titles - use sentence case
201- Keep examples minimal and focused
202
In the file
SKILL.md638 words
Files1
LicenceSource-available
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈50
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
1,150
on trigger
The instruction body, read only when the skill fires.
0.60%
of a 200k window
Ten skills this size would take about 6% of the window before you open a file.
050k100k150k200k context window

1.2k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Middling. Fine to keep on in a project where you use it weekly, worth unloading in one where you never do.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for
Writes filesno
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

1 file, 4.8 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md4.8 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 1 file you can review in full before installing. The Source-available licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Writing tldraw examples · 1.2k tokens when loaded npx mcprush@latest skill add tldraw/writing-tldraw-examples

Writes to .claude/skills/writing-tldraw-examples/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referencetldraw/writing-tldraw-examples

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v
  • No earlier releases have been published to the marketplace.
Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

TL
tldraw

Publishes on mcprush.

0 servers listed8 skills listednot claimed
Profile
Publisher
Servers0
Claim this skill