多人实时协作
基于自研同步引擎实现同时编辑与即时更新，包含实时光标、视口跟随和光标聊天等在线状态显示。
价格100 天免费试用，无需信用卡；生产使用需商业授权
平台Web
归类其他 AI 工具
收录2026-10-10
复核2026-10-10
编辑评分
4.3 / 5
★★★★☆
tldraw.dev编辑总结
tldraw SDK 是给开发者用的无限画布和白板开发工具，用 TypeScript 和 React 写出，官网提供 npm 安装的 tldraw 包，几行代码就能跑出一个可绘制、可缩放、可撤销的单人画布。它把多人协作同步、选区变形、数据管理、布局排版等生产级画布功能都提前做好了，并提供开箱即用的默认图形、工具和界面组件，Google、Autodesk、ClickUp、Mobbin、Padlet 等团队都在用它做产品。价格采用价值定价，提供 100 天免费试用，无需信用卡，业余项目可申请免费 hobby 许可。短板是商业生产使用必须拿到授权，且官网未公开具体费率数字。
tldraw.dev是什么？
tldraw.dev 是 tldraw SDK 的官方网站。这是一套面向开发者的无限画布开发套件，让团队用 React 和 TypeScript 直接构建白板、图表和各类画布工具，而不是从零搭画布底层。
官网把它的能力归纳为几块：企业级多人同步、持久化与性能优化；复制粘贴、撤销重做、跨标签页同步这类基础功能已经内置；还提供默认图形、工具和界面组件库，并支持通过运行时 API 自定义图形、交互、主题、样式和界面。提供 tldraw 与 @tldraw/sync 等 npm 包，quick start 页面给出的入门方式是 npm create tldraw@latest 或 npm install tldraw，之后在 React 组件里渲染 Tldraw 并引入样式即可。
普通产品团队可以把它当作现成白板底座，省掉画布搭建工作；开发者可以用运行时 API 深入控制画布内容与行为；有协作需求的产品则通过 @tldraw/sync 接入多人实时编辑。
tldraw.dev核心功能
选区与变形
完整的选区逻辑，支持平移、缩放、旋转和嵌套变换，并用一套几何系统做灵活命中测试。
偏好与无障碍
内置深色模式与动效控制，支持屏幕阅读器、键盘导航和自适应界面。
数据管理
用高性能信号库和记录存储管理状态并观察变化，可通过事件与副作用对改动做出响应。
布局与排版
内置对齐与分布函数、重排序系统，并完整支持拖放操作。
可扩展主题
可自定义主题，控制画布样式的每一个方面。
本地持久化
给 Tldraw 组件传入 persistenceKey 属性即可把项目存进浏览器存储，刷新后仍在，并能在同 key 的其他标签页间同步。
tldraw.dev值不值得用？
当你要在 React 产品里快速做出一个白板或画布功能时，tldraw SDK 很值得考虑：默认图形、工具、界面组件和多人同步都提前做好了，quick start 里几行代码就能跑通一个可用画布，有团队用它替换了旧的白板底层。如果你的项目不是 React 技术栈，接入成本会明显上升，因为它主打 React 和 TypeScript。另外商业生产环境需要拿到授权，官网只说明提供 100 天免费试用和面向初创公司的折扣，没有公开具体金额，预算敏感的话需要先联系销售确认。纯做功能验证或个人练手，可以直接用免费的 hobby 许可。
建议选它的情况
- 用 React 做产品、需要在应用里嵌入白板或画布功能
- 需要多人实时协作、实时光标和视口跟随
- 想省掉画布底层搭建，直接使用现成图形、工具与界面组件
- 个人练手或非商业项目，可申请免费 hobby 许可
不建议选它的情况
- 项目不是 React 技术栈，接入成本会明显上升
- 需要事先看到明确价目表再决定预算的采购流程
- 只想用现成白板产品、没有开发能力的个人用户
tldraw.dev使用建议
入门先把路子走对
- 用命令行起步在终端运行 npm create tldraw@latest，几分钟内就能拉起一套 starter kit 体验默认画布。
- 先装包再渲染组件执行 npm install tldraw，在 React 项目里引入 Tldraw 组件和 tldraw/tldraw.css，放进全屏容器即可。
- 打开本地持久化给 Tldraw 组件加上 persistenceKey="example"，项目会存进浏览器存储，刷新不丢，还能跨标签页同步。
进阶省时间也省钱
- 接多人协作同步安装 @tldraw/sync 包，用其 demo hook 连接官方临时房间服务器，即可验证多用户实时编辑效果。
- 用运行时 API 深入控制借助运行时 API 以编程方式控制画布内容、效果与行为，比只改默认配置能做到更细的定制。
- 按需替换默认件默认图形、工具和界面都可以替换，先跑通再逐步改成符合自己产品的样式和交互。
tldraw.dev适合谁用？
React 产品团队
推荐需要在自家应用里嵌入白板或画布功能，直接用默认组件就能省下画布底层开发时间。
做协作工具的后端开发者
推荐通过 @tldraw/sync 接入多人实时同步，同步引擎已内置，无需自己搭同步服务。
个人练手开发者
推荐非商业用途可申请免费 hobby 许可，配合命令行脚手架可以低成本试做原型。
非 React 技术栈团队
有条件SDK 主打 React 与 TypeScript，换其他前端框架接入成本会明显上升。
预算需提前确认的采购方
有条件官网采用价值定价，未公开具体金额，只说明 100 天免费试用，需先联系销售询价。
tldraw.dev优点和缺点
优点
- npm 安装后几行代码即可跑通一个完整单人画布
- 多人同步、实时光标、视口跟随均已内置
- 默认图形、工具和界面组件开箱即用
- 支持自定义图形、主题、样式与界面
- 提供 100 天免费试用，无需信用卡
- 业余项目可申请免费 hobby 许可
缺点
- 生产使用需要商业授权，官网未公开具体价格
- 主打 React 与 TypeScript，非 React 项目接入成本高
- 涉及的高级模块仍在开发中
- SDK 面向开发者，普通用户无法直接拿来当白板用
tldraw.dev关键指标
| 指标 | 数值 | 数据来源 |
|---|---|---|
| GitHub 星标 | 50.8K | tldraw.dev 社区板块 |
| 每周下载量 | 430.7K weekly downloads | tldraw.dev 社区板块 |
tldraw.dev常见问题
tldraw SDK 怎么收费？＋
官网定价页说明先提供 100 天免费试用，无需信用卡；需要上生产则申请年度授权，采用价值定价，多人同步包含在授权内。新公司可申请折扣价，纯业余项目可申请免费 hobby 许可。没有公开具体金额，需要联系销售获取报价。
怎么最快跑起来一个画布？＋
quick start 给出两条路：急着看效果就在终端运行 npm create tldraw@latest 探索 starter kit；想接入自己的项目则执行 npm install tldraw，然后在 React 里引入 Tldraw 组件和 tldraw/tldraw.css，放进全屏容器即可得到一个可绘制、可缩放、可撤销的画布。
怎么做多人实时协作？＋
说明可以安装 @tldraw/sync 包，其 demo hook 会连接 tldraw 的演示服务器，该服务器托管临时房间，用于验证多用户同时编辑的效果。多人同步能力本身包含在 SDK 授权内，包含实时光标、视口跟随和光标聊天。
SDK 支持哪些能力？＋
包括的内置能力包括多人协作、选区与变形、偏好与无障碍、数据管理、布局与排版、可扩展主题，另外复制粘贴、撤销重做、跨标签页同步等基础功能也已内置，并提供默认图形、工具和界面组件。
有哪些公司在用？＋
展示的合作方包括 Google、Replit、BlackRock、Autodesk、ClickUp、Mobbin、Padlet 等。案例中提到 ClickUp 用它替换了旧的白板底层，Padlet 借此快速上线了 Sandbox，Mobbin 则用它做出了自研工具。
tldraw.dev竞品对比
| 工具 | 编辑评分 | 价格 | 核心功能 | 平台 |
|---|---|---|---|---|
| tldraw.dev本工具 | 4.3 | 100 天免费试用，无需信用卡；生产使用需商业授权 | 多人实时协作；选区与变形；偏好与无障碍；数据管理 | Web |
| MightyMeld | — | 未标价 | React 可视化开发工具 | Web |
| ReactAI Components | — | 未标价 | 使用 AI 快速构建 React 组件 | — |
| 滴滴技术 | — | 未标价 | CSDN | — |
| 华为移动服务 | — | 未标价 | CSDN | — |
| Virse | — | 未标价 | 用于创作统一、高质量视觉内容的 AI 画布平台 | — |
