33.4K star!一款爆火的基于Web的可自托管白板绘图项目！

* 戳上方蓝字「 开源先锋 」关注我

推荐阅读：

大家好，我是开源君！

在数字化时代，远程协作和创意表达的需求日益增长。特别是在设计、教育和企业会议等领域，需要一个能够支持多人实时协作的平台，以促进思维的可视化和信息的共享。

今天开源君要为大家介绍一个非常有趣的开源项目 - tldraw 。

简介

tldraw 是一个用于在Web上创建无限画布体验的项目，它基于React库开发，非常适合用来构建数字白板。通过tldraw，开发者可以轻松地在自己的应用中实现协作绘图、设计和演示等功能。

这个项目的核心是一个名为Tldraw的组件，它能够嵌入到任何React应用中，提供全屏的画布渲染。tldraw 的设计哲学是简洁和灵活，让开发者能够快速上手并创造出丰富的应用。

目前项目在Github上面收获了33.4K star！

性能特色

快速安装使用

要快速开始使用 tldraw，可以按照以下步骤操作：

1、通过 npm 安装 tldraw 包

npm install tldraw


2、创建或编辑 index.css 文件，并添加以下内容：

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("tldraw/tldraw.css");
body {
font-family: "Inter";
}

3、渲染 Tldraw 组件：在 React 应用中导入并渲染 <Tldraw /> 组件：

import { Tldraw } from 'tldraw'
import './index.css'
export default functionApp() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
 )
}

当然，官方提供了非常多的组件样式供参考。

如果要进行本地开发的话，可以依次尝试下面的命令：

git clone https://github.com/tldraw/tldraw.git 
yarn
yarn dev


然后浏览器打开 localhost:5420 即可体验。

项目体验展示

官方提供了一个在线体验的demo站：

https://www.tldraw.com


界面很简洁，速度也挺快的。

上面菜单栏是当前项目文件的一些设置选择

中间下面的工具栏，可以选择不同的元素，如画笔，箭头，文字，图片，各种图形等。

右边的属性栏里，可以调整元素的颜色，大小，线条，层叠位置等属性。

我们在进行创作的时候，可以随时对项目进行保存，生成本地的.tldr文件。

一旦需要还原之前的内容时候，可以直接将保存的.tldr文件导入或者直接鼠标拖入进来即可。

如果要将你的画板分享给别人，可以直接共享 URL 给别人。

小结

tldraw 是一个功能强大且灵活的开源项目，为Web应用开发者提供了一个功能强大且易于集成的画布解决方案，还通过其丰富的API和自定义选项，使得开发者能够根据自己的需求定制功能和界面。无论是用于教育、设计还是商业演示，tldraw都能够提供出色的用户体验和协作能力。

更多细节功能，感兴趣的可以到项目地址查看：

项目地址：
https://github.com/tldraw/tldraw