tldraw SDK 文档编写指南 - 技术文档规范与MDX组件使用教程

write-docs by tldraw/tldraw

221 周安装量

46,200 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/tldraw/tldraw --skill write-docs

JavaScript 框架技术文档开源项目

🇨🇳中文介绍

编写文档

此技能涵盖如何编写和更新 tldraw SDK 文档。

位置

所有文档都位于 apps/docs/content/ 目录下。主要类别包括：

目录	用途
`docs/`	SDK 文档文章
`releases/`	发布说明（参见 write-release-notes 技能）
`examples/`	示例文档
`getting-started/`	快速入门和设置指南

流程

1. 理解范围

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

4. 使用 MDX 组件

使用 [ClassName](?) 或 [ClassName#methodName](?) 进行 API 引用：

[Editor](?) 类有许多方法。使用 [Editor#createShapes](?) 来创建形状。

使用 <FocusLines> 来高亮特定行：

<FocusLines lines={[2,6,10]}>

\`\`\`tsx
import { Tldraw } from 'tldraw'
import { useSyncDemo } from '@tldraw/sync'
\`\`\`

</FocusLines>

<Image
	src="/images/api/events.png"
	alt="显示事件被发送到编辑器的图表。"
	title="此处为标题文字。"
/>

使用表格来列出方法、选项或属性：

| 方法                       | 描述                                     |
| ------------------------ | ---------------------------------------------- |
| [Editor#screenToPage](?) | 将屏幕空间中的点转换为页面空间。 |
| [Editor#pageToScreen](?) | 将页面空间中的点转换为屏幕空间。 |



| 值         | 描述                                          |
| --------- | ---------------------------------------------------- |
| `default` | 将初始缩放设置为 100%。                       |
| `fit-x`   | X 轴将完全填充视口边界。 |

检查以下内容：

代码示例确实有效
API 链接解析正确
图片有替代文本
标题使用句子大小写
没有 AI 痕迹（参见风格指南）

风格指南：有关语气、语调和格式约定，请参见 ../shared/docs-guide.md。

🇺🇸English

Write documentation

This skill covers how to write and update tldraw SDK documentation.

Location

All documentation lives in apps/docs/content/. The main categories are:

Directory	Purpose
`docs/`	SDK documentation articles
`releases/`	Release notes (see write-release-notes skill)
`examples/`	Example documentation
`getting-started/`	Quickstart and setup guides

Process

1. Understand the scope

Before writing:

Identify the target audience (new users, experienced developers, API reference)
Check existing docs that cover related topics
Look at relevant examples in apps/examples/
Read the API types and comments in the source code

2. Create the file

Create a new .mdx file in the appropriate directory with frontmatter:

---
title: Feature name
status: published
author: steveruizok
date: 3/22/2023
order: 1
keywords:
  - keyword1
  - keyword2
---

3. Write the content

Follow the structure:

Overview — 1-2 paragraphs on what and why
Basic usage — The simplest working example
Details — Deeper explanation with more examples
Edge cases — Advanced patterns, gotchas
Links — Related docs and examples

4. Use MDX components

API links

Use [ClassName](?) or [ClassName#methodName](?) for API references:

The [Editor](?) class has many methods. Use [Editor#createShapes](?) to create shapes.

Code highlighting

Use <FocusLines> to highlight specific lines:

<FocusLines lines={[2,6,10]}>

\`\`\`tsx
import { Tldraw } from 'tldraw'
import { useSyncDemo } from '@tldraw/sync'
\`\`\`

</FocusLines>

Images

<Image
	src="/images/api/events.png"
	alt="A diagram showing an event being sent to the editor."
	title="Caption text here."
/>

Tables for API documentation

Use tables for listing methods, options, or properties:

| Method                   | Description                                    |
| ------------------------ | ---------------------------------------------- |
| [Editor#screenToPage](?) | Convert a point in screen space to page space. |
| [Editor#pageToScreen](?) | Convert a point in page space to screen space. |



| Value     | Description                                          |
| --------- | ---------------------------------------------------- |
| `default` | Sets the initial zoom to 100%.                       |
| `fit-x`   | The x axis will completely fill the viewport bounds. |

5. Verify

Check that:

Code examples actually work
API links resolve correctly
Images have alt text
Headings use sentence case
No AI tells (see style guide)

References

Style guide : See ../shared/docs-guide.md for voice, tone, and formatting conventions.

Weekly Installs

171

Repository

tldraw/tldraw

GitHub Stars

46.0K

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli141

opencode135

codex129

antigravity125

github-copilot125

cursor118

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,800 周安装