Tldraw 快速上手教程（GitHub README 中文整理）

是什么

Tldraw 是一个开源的无限画布 SDK，基于 React 构建。它提供了一套功能完备的无限画布引擎，你可以用它快速搭建自己的画布应用——无论是白板工具、流程图编辑器，还是 AI 对话界面，都能基于它实现。

能干什么

Tldraw 的核心能力包括：

• 多人协作：通过 @tldraw/sync 自托管实时协作功能，支持多人同时编辑同一画布
• 绘图与图表：支持压感绘画、几何图形、富文本、箭头、吸附对齐、边缘滚动、图片/视频嵌入，以及导出为图片
• 运行时 API：通过 Editor API 在运行时动态控制画布
• 完全可扩展：你可以自定义形状、工具、绑定关系、UI 组件、副作用和事件钩子
• AI 集成：提供画布原语，方便与大语言模型（LLM）配合使用
• DOM 画布：支持浏览器能渲染的任何内容，包括嵌入 YouTube、Figma、GitHub 等网站
• 广泛兼容：支持桌面、触屏、平板和手机等各类设备

许多知名产品都在使用 tldraw，例如 Google、Shopify、BlackRock、Autodesk、ClickUp、Replit 等。

怎么装

在你的 React 项目中，通过 npm 安装 tldraw 包：

npm i tldraw

怎么用第一个例子

安装完成后，在 React 组件中引入 <Tldraw /> 并添加样式：

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

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

这样你就拥有了一个完整的画布白板应用。你可以在此基础上添加自定义形状、工具，或接入多人协作功能。

如果想快速启动一个包含更多功能（如多人协作、AI 代理、工作流节点编辑器等）的项目，可以使用官方脚手架：

npx create-tldraw@latest

社区资源

• 官方文档：https://tldraw.dev/quick-start
• 示例代码：https://tldraw.dev/examples
• 脚手架模板：https://tldraw.dev/starter-kits/overview
• Discord 社区：https://discord.tldraw.com
• 案例展示：https://tldraw.dev/showcase

翻译整理自 GitHub README，原文：https://github.com/tldraw/tldraw