大家好,我是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/

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

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

15.3K Star,超好用的开源协作式数字白板:tldraw的更多相关文章

  1. 超全的 Vue 开源项目合集,签收一下

    超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...

  2. 15个最受欢迎的Python开源框架

    以下是伯乐在线从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python Web应用开发框 ...

  3. 从GitHub中整理出来的15个最受欢迎的Python开源框架,你喜欢哪个

    从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python Web应用开发框架 Djang ...

  4. 【转】15个最受欢迎的Python开源框架

    以下是伯乐在线从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python Web应用开发框 ...

  5. 转载:15个最受欢迎的Python开源框架

    出自:http://python.jobbole.com/72306/?replytocom=57112 15个最受欢迎的Python开源框架 Django: Python Web应用开发框架 Dja ...

  6. 超详细!Github团队协作教程(Gitkraken版)

    超详细!Github团队协作教程(Gitkraken版) 一.前期工作 1. 在 Github 上创建 organization step1. 登录Github网站,点击右上角头像,选择 " ...

  7. GitHub 上 1.3k Star 的 strman-java 项目有值得学习的地方吗?源码视角

    大家好,我是沉默王二. 很多初学编程的同学,经常给我吐槽,说:"二哥,你在敲代码的时候会不会有这样一种感觉,写着写着看不下去了,觉得自己写出来的代码就好像屎一样?" 这里我必须得说 ...

  8. 深度学习动手入门:GitHub上四个超棒的TensorFlow开源项目

    作者简介:akshay pai,数据科学工程师,热爱研究机器学习问题.Source Dexter网站创办人. TensorFlow是Google的开源深度学习库,你可以使用这个框架以及Python编程 ...

  9. 【Redis】命令学习笔记——列表(list)+集合(set)+有序集合(sorted set)(17+15+20个超全字典版)

    本篇基于redis 4.0.11版本,学习列表(list)和集合(set)和有序集合(sorted set)相关命令. 列表按照插入顺序排序,可重复,可以添加一个元素到列表的头部(左边)或者尾部(右边 ...

  10. 15个具有高度影响力的Apache开源项目

    自1999年创立以来,Apache软件基金会如今已成了众多重要的开源软件项目之家.其中成功的项目有Geronimo,有Tomcat,有Hadoop,有如今成了大数据王国关键车毂的分布式计算系统. 虽然 ...

随机推荐

  1. Python之Excel表格数据处理

    正式开讲之前,我们需要先了解几个基本的知识点:1.Python字典(Dictionary) 的setdefault()方法描述:如果键不存在于字典中,将会添加键并将值设为默认值.语法:dict.set ...

  2. Elasticsearch 6.x 配置search-guard 插件

    前言   es之前版本一直无用户验证功能,不过官方有提供一x-pack,但是问题是付费.在es的6.3.2版本中,已经集成了x-pack,虽然es团队已经对x-pack开源,但是在该版本中如果需要使用 ...

  3. 【python基础】类-类属性

    在初始类中,我们介绍了如何访问类属性,除了访问类属性外还有其他操作类属性的情况,我们将在这里做详细介绍: 1.给类属性指定默认值 类中的每个属性都必须有初始值,哪怕这个值是0或者空字符串.在有些情况下 ...

  4. 【python基础】类-继承

    编写类时,并非总是要从空白开始.如果要编写的类时另一个现成类的特殊版本,可使用继承.一个类继承另一个类时,它将自动获得另一个类的所有属性和方法 原有的类称为父类,而新类被称为子类.子类继承了其父类的所 ...

  5. React后台管理系统09 菜单组件的抽取

    修改Home.tsx的内容:将主菜单的内容进行抽离,然后单独引入=>MainMenu import { Breadcrumb, Layout, Menu } from 'antd'; impor ...

  6. React学习时,outlet 路由配置 (prop传参处理,跳转的实现,父子数据共享)

    index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App' ...

  7. ASP.NET Core 6框架揭秘实例演示[42]:检查应用的健康状况

    现代化的应用及服务的部署场景主要体现在集群化.微服务和容器化,这一切都建立在针对部署应用或者服务的健康检查上.ASP.NET提供的健康检查不仅可能确定目标应用或者服务的可用性,还具有健康报告发布功能. ...

  8. Centos安装ELK

    目录 安装Elastic Search 安装 Java 安装Elastic Search 修改配置 开放端口 访问地址 相关命令 安装elasticsearch-head插件 安装Git 安装node ...

  9. 硬件管理平台 - 公共项目搭建(Nancy部分)

    项目变更 之前使用的是Nancy库进行项目搭建的,使用的Nuget版本及其他引用如下 <?xml version="1.0" encoding="utf-8&quo ...

  10. Pandas: title函数的作用

    代码演示 将首字母大写,其余小写 效果演示 参考链接 https://www.w3resource.com/pandas/series/series-str-title.php