tldraw：用 React 搭建无限画布应用的开源 SDK

文章目录tldraw用 React 搭建无限画布应用的开源 SDKtldraw用 React 搭建无限画布应用的开源 SDKtldraw 是一个开源的无限画布引擎基于 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 支持桌面浏览器、触屏、平板和移动端。谁在用 tldrawtldraw 的用户列表比较长。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-tldrawlatest命令来快速创建项目。内置的 Starter Kit 包括 Multiplayer多人协作、AgentAI 代理、Workflow可视化编程、ChatAI 对话、Image Pipeline图像生成管线、Branching Chat分支对话和 ShaderWebGL 着色器。本地开发需要 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 上可以查看。