tldraw 无限画布 SDK

tldraw 是什么

tldraw 是一个用 TypeScript 编写的 React 无限画布 SDK，目标是成为各类画布应用的地基：白板、图表、设计工具、AI 画布都能在它之上搭建。它既提供开箱即用的默认白板工具集，也暴露底层原语，让你定义全新的形状与交互。

核心能力

• 多人协作：基于 @tldraw/sync 的实时协作，可自托管。
• 绘图与图表：压感笔迹、几何图形、富文本、箭头、形状吸附、边缘滚动、图片与视频、图片导出。
• 运行时 API：通过 Editor API 在运行时驱动画布。
• 完全可扩展：自定义形状、工具、绑定、UI 组件、副作用与事件钩子。
• AI 集成：提供面向 LLM 的画布原语。
• DOM 渲染：可嵌入浏览器支持的任意内容，如 YouTube、Figma、GitHub。
• 多端支持：桌面、触屏、平板与移动端浏览器。

快速上手

安装依赖：

npm i tldraw

在 React 应用中使用 <Tldraw /> 组件：

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Tldraw />
    </div>
  )
}

Starter Kits

官方提供多套 MIT 许可的起步模板，可用 npx create-tldraw@latest 创建，覆盖多人协作、AI Agent、工作流节点、画布聊天、图片流水线、分支对话、WebGL Shader 等场景，适合直接改造成产品原型。

适用与注意

tldraw 适合需要成熟画布底座、又希望深度定制的团队。开发阶段可免费使用，生产环境需要 License Key；此外官方目前不接受外部贡献，遇到问题建议通过 Issue 反馈。

更多文档与示例见 tldraw.dev。