文章目录
- tldraw：用 React 搭建无限画布应用的开源 SDK
tldraw：用 React 搭建无限画布应用的开源 SDK
tldraw 是一个开源的无限画布引擎，基于 React 构建，目前在 GitHub 上拿到了超过 48000 颗 Star。
tldraw 的定位不是一款白板应用，而是一个 SDK。它提供了一整套画布基础设施，开发者可以在上面构建自己的画布产品，包括自定义形状、工具、绑定关系和 UI 组件。
核心能力
tldraw 的功能覆盖了画布应用开发的大部分需求。
多人协作方面，tldraw 内置了实时协作能力，基于@tldraw/sync实现，支持自托管。底层使用了 Cloudflare Durable Objects，和 tldraw.com 官方产品是同一套技术栈。
绘图和图表功能包括压感手绘、几何形状、富文本编辑、箭头连接、形状吸附、边缘滚动、图片和视频支持，以及图片导出。这些能力开箱即用，不需要额外集成。
运行时 API 是 tldraw 的一个重点。Editor API 允许开发者在运行时直接操控画布，实现动态内容生成、批量操作、状态查询等逻辑。这对于需要程序化控制画布内容的场景非常有用。
扩展性方面，tldraw 支持自定义形状、自定义工具、自定义绑定、自定义 UI 组件，还支持副作用和事件钩子。画布上的几乎所有行为都可以被覆盖或扩展。
AI 集成是 tldraw 近期的重点方向。SDK 提供了画布原语，用于和大语言模型配合构建 AI 应用。官方提供了多个 Starter Kit，其中 Agent Kit 专门用于构建能读取、理解和修改画布内容的 AI 代理，Chat Kit 用于构建画布驱动的 AI 对话界面，Branching Chat Kit 支持可视化的对话分支。
DOM 画布是 tldraw 的技术特点之一。它基于浏览器原生渲染，理论上浏览器能渲染的内容都可以嵌入画布，包括 YouTube 视频、Figma 设计稿、GitHub 页面等。
兼容性方面，tldraw 支持桌面浏览器、触屏、平板和移动端。
谁在用 tldraw
tldraw 的用户列表比较长。Google、Shopify、BlackRock、Autodesk、ClickUp、Replit、Luma、Runway、Padlet 等产品都在使用 tldraw SDK 构建画布体验。这些公司的使用场景各不相同，有的用于协作白板，有的用于可视化编程，有的用于 AI 交互界面。
快速上手
安装 tldraw 只需要一行命令：
npm i tldraw然后在 React 项目中引入组件即可：
import { Tldraw } from 'tldraw' import 'tldraw/tldraw.css' export default function App() { return ( <div style={{ position: 'fixed', inset: 0 }}> <Tldraw /> </div> ) }官方提供了npx create-tldraw@latest命令来快速创建项目。内置的 Starter Kit 包括 Multiplayer（多人协作）、Agent（AI 代理）、Workflow（可视化编程）、Chat（AI 对话）、Image Pipeline（图像生成管线）、Branching Chat（分支对话）和 Shader（WebGL 着色器）。
本地开发需要 Node.js 20 以上版本。克隆仓库后启用 corepack，安装依赖并启动开发服务器：
npm i -g corepack yarn yarn dev开发服务器会在 localhost:5420 运行示例应用。
文档和许可
文档托管在 tldraw.dev，包括 API 参考和版本发布说明。从 5.1.x 版本开始，npm 包内附带了 DOCS.md 和 RELEASE_NOTES.md 文件，方便离线查阅或供 AI 编码工具使用。
SDK 采用 tldraw 许可证，开发阶段可以免费使用。生产环境需要获取许可证密钥，定价详情在 tldraw.dev 上可以查看。
用。
SDK 采用 tldraw 许可证，开发阶段可以免费使用。生产环境需要获取许可证密钥，定价详情在 tldraw.dev 上可以查看。
