tldraw：用 React 构建无限画布应用的开源 SDK
tldraw 是一个面向 React 开发者的无限画布引擎与 SDK，提供绘图、白板、图形、箭头、贴靠、实时协作、自定义形状/工具/UI 组件等功能，并支持与 LLM 结合的 AI 画布交互，被 Google、Shopify、BlackRock 等团队用于构建画布类产品。
社区作者 · zZz
它解决什么问题
tldraw 提供功能完整的无限画布引擎，可作任何画布应用的基础。核心能力包括：自托管实时多人协作（通过 @tldraw/sync）；压感绘制、几何图形、富文本、箭头、图形贴靠、边缘滚动、图片/视频支持和图片导出；可通过 Editor API 在运行时驱动画布；支持自定义形状、工具、绑定、UI 组件、副作用和事件钩子；具备画布原语，便于构建 LLM 的 AI 集成；基于 DOM 的渲染支持浏览器能呈现的任何内容，包括嵌入 YouTube、Figma、GitHub 等网站；兼容桌面、触屏、平板和移动设备浏览器。
官方还提供多种 Starter Kit，如多人协作、AI Agent、自动化工作流节点编辑器、画布 AI 聊天、图像处理管线、分支聊天、WebGL Shader 等。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
快速开始：在 React 应用中执行
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>); }。使用 Starter Kit 可运行 npx create-tldraw@latest。本地开发：需要 Node.js ^20.0.0。先全局安装 corepack：
npm i -g corepack。克隆仓库后，安装依赖并启动开发服务器：
yarn 和 yarn dev。开发服务器会在 localhost:5420 运行示例应用。从 5.1.x 起，发布的 npm 包还包含 DOCS.md 和 RELEASE_NOTES.md，可在 node_modules 中查看对应版本的文档与发布说明。
