tldraw
活跃简介
tldraw 是 React 无限画布 SDK,为 AI Agent 与生成式 UI 提供可嵌入的可视化交互界面,是多家 Agent 产品的首选前端。
核心特性
- 无限画布 SDK — React 组件化,可嵌入任意 Web 应用
- 生成式 UI 友好 — 被多家 Agent 产品作为可视化前端
- 完整的设计系统 — 形状、连接线、文本、图像与图层
- 协作能力 — 内置多人光标、选择同步与持久化
- 高度可定制 — 样式、工具与行为可深度配置
适用场景
💡 为 AI Agent 应用提供可视化工作流编辑器
💡 搭建支持多人协作的 AI 创意白板
💡 把 Agent 的思考路径以图形化方式呈现给用户
💡 作为生成式 UI 的底层画布承载各种交互
优势与不足
✅ 优势
- • 活跃维护,近期持续更新
- • 社区热度高(49.8k stars)
- • 项目有一定历史沉淀(已维护 5 年)
- • Issue 响应及时,积压少
⚠️ 不足
- • 缺少明确的开源许可证
分类
快速开始
# 安装 tldraw SDK
npm install tldraw
# 在 React 应用中使用
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return <div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
}