小编点评

**开源协作式数字白板：tldraw** tldraw 是一个开源的编辑器、用户界面和其他底层库的数字白板。它提供以下功能： * **在线体验：**可以在官网的 demo 页面中体验 tldraw。 * ** React 组件：**可基于此组件构建自定义白板。 * **编辑器 API：**支持开发者对白板元素的创建、更新和删除。 * **NPM 存储库：**可用于开发应用程序，使用 tldraw。 * **开源仓库：**包含编辑器、用户界面和其他库的源代码。 **开发整合** 使用 tldraw 构建应用程序非常简单。您可以使用以下方法： 1. **导入库：**导入 `tldraw` 的库。 2. **使用组件：**基于 `Tldraw` 的组件创建白板。 3. **自定义样式：**使用 `tldraw.css` 样式组件。 **资源** * 官方网站：tldraw.com * 开源地址：github.com/tldraw/tldraw * 开发文档：tldraw.dev * 官方公众号：程序猿DD

正文

大家好，我是TJ

今天给大家推荐一个开源协作式数字白板：tldraw。

tldraw的编辑器、用户界面和其他底层库都是开源的，你可以在它的开源仓库中找到它们。它们也在NPM上分发，提供开发者使用。您可以使用tlDraw为您的产品创建一个临时白板，或者将其作为构建自己应用的工具来使用。

在线体验

tldraw的官方网站就是一个在线体验的demo，大家可以通过https://www.tldraw.com/直接访问进入体验。

可以看到界面非常的简洁，速度也非常快。

开发整合

如果你要把tldraw引入自己的应用中，非常简单，只需要通过类似下面的方法使用即可：

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

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

您可以像上面这样使用<Tlraw>的React组件构建一个默认的tldraw白板。你也可以基于此，扩展自己需要的形状、工具和用户接口等。tldraw还提供了编辑器API以支持开发者对白板元素的创建、更新和删除。

具体详细的开发指南，可以前往官方提供的开发文档学习使用：https://tldraw.dev/

最后，老规矩奉上相关地址，感兴趣的小伙伴去深入了解一下吧：

• 官方网站：https://tldraw.com/
• 开源地址：https://github.com/tldraw/tldraw

欢迎关注我的公众号：程序猿DD。第一时间了解前沿行业消息、分享深度技术干货、获取优质学习资源