首页 > 其他分享 >15.3K Star,超好用的开源协作式数字白板:tldraw

15.3K Star,超好用的开源协作式数字白板:tldraw

时间:2023-09-13 11:33:11浏览次数:45  
标签:15.3 Star 白板 tldraw 开源 https 使用 com

大家好,我是TJ

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

tldraw

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

在线体验

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

tldraw在线体验

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

开发整合

如果你要把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/

tldraw开发文档

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

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

标签:15.3,Star,白板,tldraw,开源,https,使用,com
From: https://www.cnblogs.com/didispace/p/17699151.html

相关文章

  • 如何理解Spring Boot中的Starters,以及Starter的工作原理
    如何理解SpringBoot中的StartersStarters可以理解为启动器,你可以一站式集成Spring及其他技术,而不需要到处找示例代码和依赖包。如你想使用SpringJPA访问数据库,只要加入spring-boot-starter-data-jpa启动器依赖就能使用了。Starter的工作原理:SpringBoot在启动的时候会......
  • 关于Kubernetes-v1.23-pod-生命周期-postStart-preStop-terminationGracePeriodSecond
    我们在一个pod的yaml配置文件中,有时会看到,terminationGracePeriodSeconds选项,与containers:同级,一般可以放于spec:下面即可是当pod,变为删除的状态后,会给pod一个宽限期,让pod去执行一些清理或者销毁操作另外还有两个选项,postStart,preStop,这两个是位于lifecycle,属于pod生命周期......
  • Proj. CRR Paper Reading: Optimal Speedup of Las Vegas Algorithms, Adaptive resta
    TitleAdaptiverestartforstochasticsynthesisPLDI2021TaskDistributethepowerbetweenmultiplerunsinstochasticprogramsynthesistoaccelerateHere,astochasticprogramsynthesisprogramcanbesummarizedasfollows:Givenasetof<input,ou......
  • [Writeup]2022 NewstarCTF_Week2(Web部分)
    一只网络安全菜鸟--(˙<>˙)/--写博客主要是想记录一下自己的学习过程,过两年毕业了也能回头看看自己都学了些啥东西。由于本人水平有限内容难免有错误、疏漏、逻辑不清、让人看不懂等各种问题,恳请大家批评指正如果我写的东西能对你有一点点帮助,那真是再好不过了......
  • Hack The Box 闭坑指南---Starting Point---Meow(第0层)
    0x00实验环境靶场:windows笔记本、kali虚拟机 0x01实验前提(1)注册HackTheBox(自行注册)注册htb:https://www.hackthebox.com/ (2)连接htb靶场环境:登录htb: https://app.hackthebox.com/machines访问machines——>点击CONNECTTOHTB——>StartingPoint 点击OpenV......
  • 通过StarWindV2VConverter将VMWare的CentOS7虚拟机转换成Hyper-V产生所warning: /dev/
    1.在VMWare中将CentOS7虚拟机导出ovf,在StarWindV2VConverter中将其转换为VHDX2.在Hyper-V中新建虚拟机2.1在选择代数时要注意一定要选择“第一代”2.2在选择选择虚拟硬盘时,选择已转换好的VHDX文件3.启动Hyper-V中新建的虚拟机3.1出现了如下的问题-------------3.2处理方法在......
  • Exception starting filter struts2(Caught exception while loading file struts-def
    2008-9-1811:31:57org.apache.catalina.core.StandardContextfilterStart严重:Exceptionstartingfilterstruts2Caughtexceptionwhileloadingfilestruts-default.xml-[unknownlocation] atcom.opensymphony.xwork2.config.providers.XmlConfigurationProvider.lo......
  • 银河麒麟使用kickstart二次打包制作安装镜像ISO
    系统:银河麒麟V10SP2服务器:百信恒山TS02F-F30安装方式:服务器挂载ISO镜像进行安装 1、安装mkisofs软件包:#yuminstallgenisoimage2、将SP2系统文件拷贝到工作目录里:#mkdir/mnt/isodir#mkdir/mnt/buidiso#mount-oloopKylin-Server-10-SP2-x86-Release-Build......
  • 关于Kubernetes-v1.23.6-StartupProbe-启动探针的效果演示及说明
    本文,还是以一个nginx为例,创建一个nginx-demo的pod,并且引入启动探针StartupProbe,探针选项,位于spec:下面的containers:下面,与image选项同级的位置1、先看如下nginx-demo.yaml文件,内容如下:[root@k8s-masterqq-5201351]#catnginx-demo.yamlapiVersion:v1#api文档......
  • Cannot deserialize value of type `com.xx.xxxx` from Array value (token `JsonToke
    点击提交按钮的时候,直接服务器端报上面的错,意思是json不能解析。因为程序中用到了递归,就是自己引用了自己(实体类)。原因:实体类中children定义的是对象的形式,但是前端定义的是数组[]的形式。解决:前端改成对象形式,{},这样前后端一致就可以正常传值了。  上面children赋值了......