Tldraw：基于 React 的开源无限画板工具库

Tldraw 是面向 React 的开源无限画布开发库，支持在网页中构建具备绘图、文本输入、媒体嵌入等功能的交互式白板应用。

packages：存放核心功能包，如绘图引擎、工具集等

apps：示例应用模块，包含多个演示项目

templates：项目模板，用于快速初始化开发环境

开发环境搭

1、克隆代码仓库： git clone https://github.com/tldraw/tldraw.git 2、安装依赖：先通过 npm i -g corepack 启用 Yarn 核心包管理，然后执行 yarn 安装所有依赖 3、启动本地开发服务器：运行 yarn dev 后，访问 http://localhost:5420 查看示例应用

tldraw从基础集成到功能扩展

基础集成

通过 NPM 安装核心包： 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>
  );
}

此时会呈现一个基础画布，支持画笔绘制、文本输入、缩放平移、撤销重做等功能。

数据持久化

通过 persistenceKey 属性开启本地存储：

<Tldraw persistenceKey="your-project-key" />

该配置会使用浏览器本地存储，实现画布内容在刷新页面或跨标签页时的同步。

实时协作功能 1、安装协作库： npm install @tldraw/sync 2、使用协作钩子创建共享存储：

import { useSyncDemo } from '@tldraw/sync';

const store = useSyncDemo({ roomId: 'unique-room-id' });
<Tldraw store={store} />

不同设备或窗口访问相同 roomId 时，可实现实时 cursor 同步、用户状态显示、视角跟随等协作功能。

通过 API 控制画布

利用 onMount 回调获取编辑器实例，实现程序化操作：

const handleMount = (editor) => {
  // 创建文本形状
  editor.createShape({
    type: 'text',
    x: 200,
    y: 200,
    props: { richText: toRichText('Hello world!') }
  });
  // 全选并平滑缩放至选中内容
  editor.selectAll();
  editor.zoomToSelection({ animation: { duration: 5000 } });
};

<Tldraw onMount={handleMount} />

Editor 实例提供丰富 API，可控制形状创建、选择、变换、布局等操作，更多内容参考官方 API 文档 tldraw.dev/docs/api/editor 。