tldraw 让每个 React 开发者都能轻松构建专业级的画布应用。这个开源 SDK 提供了完整的无限画布引擎，将复杂的绘图、协作和交互功能封装为简单易用的 React 组件，让开发者专注于业务逻辑而非底层实现。
tldraw：重新定义无限画布的 React SDK
tldraw 是一个为 React 开发者设计的无限画布 SDK，可用于在项目中添加白板功能或构建自定义画布体验[36]。它定位为无限画布引擎的基础设施，提供完整的绘图和图表功能[37]。
作为 GitHub 上活跃的开源项目，tldraw 拥有完善的文档和社区支持。其核心价值在于显著降低画布应用的开发门槛，让开发者无需从零实现复杂的绘图引擎、实时协作和交互逻辑。当前版本 4.5.8 发布于 2026 年 4 月，每周下载量约 3 万次[38]。
核心特性与功能亮点
tldraw SDK 提供了一系列专业级的画布功能：
- 无限画布引擎：支持无限扩展的画布空间，内置缩放、平移、边缘滚动等交互能力
- 绘图与图表功能：支持压力感应绘图、几何形状、富文本、箭头、图像和视频支持[37]
- 实时协作：基于
@tldraw/sync的自托管多人协作能力，支持自托管的实时协作 - 自定义扩展：支持自定义形状、工具、绑定和 UI 组件，使用库的原始构建块创建全新的形状和交互
- MCP 集成：支持 MCP（Model Context Protocol）应用，让 AI agent 能够绘制和协作[36]
该 SDK 还提供运行时 API 驱动画布，支持 DOM 画布渲染（包括嵌入 YouTube、Figma、GitHub 等网站），并在所有浏览器和设备上广泛支持。
技术架构与实现原理
tldraw 采用 React 优先的设计理念，完全基于现代 React 生态构建，支持 React 19 等最新特性[37]。其架构设计注重性能和可扩展性。
架构优势
- 基于 React 生态：完全集成到 React 开发流程中
- 模块化设计：组件和插件可独立使用和扩展
- 高性能渲染：针对大型画布和复杂图形的优化
- 类型安全：完整的 TypeScript 支持
技术特点
- 现代工具链：使用 oxfmt 和 oxlint 保证代码质量[37]
- 状态管理：高效的状态同步机制
- 插件系统：支持热插拔功能扩展
- 社区维护：活跃的开源社区持续改进
架构上采用分层设计，包括背景层、世界层、叠加层和 UI 层，支持节点层次结构和变换。渲染器架构允许在不重写产品逻辑的情况下演进，适用于浏览器应用和桌面/移动堆栈。
快速上手与集成指南
安装与基础使用
通过 npm 安装 tldraw 包：
npm i tldraw
基础使用只需导入 Tldraw 组件和样式：
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
本地开发环境
启动开发服务器运行示例应用：
npm run dev
开发服务器运行在 localhost:5420[37]。克隆仓库后，启用 corepack 获取正确的 yarn 版本：
npm i -g corepack
yarn
yarn dev
持久化存储示例
实现画布状态持久化：
import { Tldraw, createTLStore, defaultShapeUtils } from "tldraw"
export function PersistentCanvas() {
const store = createTLStore({ shapeUtils: defaultShapeUtils })
// 从 localStorage 加载
const savedData = localStorage.getItem("canvas")
if (savedData) {
store.loadSnapshot(JSON.parse(savedData))
}
// 自动保存
store.listen(() => {
const snapshot = store.getSnapshot()
localStorage.setItem("canvas", JSON.stringify(snapshot))
})
return (
<div style={{ position: "fixed", inset: 0 }}>
<Tldraw store={store} />
</div>
)
}
应用场景与生态整合
多样化应用场景
在线白板应用广泛用于远程协作、头脑风暴和设计评审。教育工具方面，tldraw 可创建交互式教学材料和在线评估工具。产品设计场景中，它支持原型设计、用户流程图和界面线框图制作。
AI 协作生态
2026 年 3 月发布的 tldraw MCP App 标志着重要的生态整合[36]。该应用为 AI agent 提供三种主要工具：创建形状、编辑形状和删除形状。AI 可以像用户一样与画布交互，当前状态会传回聊天上下文，使 agent 能够理解变化。
支持场景包括：让 Cursor 规划新用户系统并映射登录流程，更新图表包含通过 Google 和 GitHub 的社交登录，或让 Cursor 根据草图实现想法。支持扩展到 Visual Studio Code、ChatGPT 和 Claude 等 MCP 应用。
企业级集成
tldraw 可集成到企业内部系统，支持定制化工作流程。其自托管的实时协作能力特别适合需要数据隐私和安全的企业环境。启动工具包提供 MIT 许可的常见应用所需的自定义形状、工具和用户界面。
社区生态与发展趋势
发展历程
社区活跃度
tldraw 在 GitHub 上保持高活跃度，拥有完善的贡献者指南和问题处理流程。项目采用现代开发工具链，包括 oxfmt 进行导入排序[37]和 oxlint 进行代码检查，确保代码质量。
许可证与商业政策
从 4.0 版本开始，tldraw 经历了许可证变更[37]。生产使用需要许可证密钥，商业用户需访问 tldraw.dev 了解详细信息。商标方面，tldraw 名称和徽标是 tldraw Inc. 的商标，使用需遵循商标指南。
tldraw 与其他画布方案的对比
tldraw 核心优势
- React 原生支持：深度集成 React 生态
- 完整功能套件：开箱即用的白板功能
- 活跃开源社区：持续更新和改进
- 免费开源：MIT 许可证的启动工具包
- AI 集成：MCP 应用支持 AI 协作
- 实时协作：自托管的多人协作能力
技术选型考虑
- 学习曲线：需要理解画布概念和 API
- 自定义复杂度：高级定制需要深入理解架构
- 性能优化：大型画布需要额外优化
- 商业许可：生产环境需要许可证
- 生态系统：相比成熟商业方案生态较小
- 维护责任：自托管需要自行维护
方案对比分析
与原生 Canvas API 相比，tldraw 提供更高的开发效率和更完整的功能，但牺牲了底层控制灵活性。相比 Fabric.js、Konva.js 等通用画布库，tldraw 专门针对白板/无限画布场景优化，提供更丰富的内置功能。
与 Excalidraw 的对比显示，Excalidraw 专注于手绘风格，每周下载量约 8 万次，而 tldraw 提供更通用的无限画布 SDK[38]。Miro SDK 作为平台 SDK，适合在 Miro 生态内构建，而 tldraw 适合构建独立的白板应用。
技术选型建议
选择 tldraw 的场景包括：需要快速构建功能完整的白板应用、项目基于 React 技术栈、需要高度自定义的绘图体验、关注开源和自托管能力。对于简单绘图需求、非 React 技术栈或需要成熟商业支持的项目，可能需要考虑替代方案。
技术选型关键点：tldraw 最适合需要完整白板功能、React 技术栈和自定义扩展能力的项目。对于简单需求或非 React 环境，其他方案可能更合适。
