当前位置: 首页 > news >正文

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

大家好,我是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开发文档

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

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

欢迎关注我的公众号:程序猿DD。前沿技术早知道,弯道超车有希望!积累超车资本,从关注DD开始!

相关文章:

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

大家好&#xff0c;我是TJ 今天给大家推荐一个开源协作式数字白板&#xff1a;tldraw。 tldraw的编辑器、用户界面和其他底层库都是开源的&#xff0c;你可以在它的开源仓库中找到它们。它们也在NPM上分发&#xff0c;提供开发者使用。您可以使用tlDraw为您的产品创建一个临时…...

MGR新节点RECOVERING状态的分析与解决:caching_sha2_password验证插件的影响

起因 在GreatSQL社区上有一位用户提出了“手工构建MGR碰到的次节点一直处于recovering状态”&#xff0c;经过排查后&#xff0c;发现了是因为新密码验证插件caching_sha2_password导致的从节点一直无法连接主节点&#xff0c;帖子地址&#xff1a;(https://greatsql.cn/threa…...

git merging两边都被删除的文件

1. 场景&#xff1a; merge 另一个分支到当前分支&#xff0c;解决完冲突列表中的冲突后&#xff0c;发现项目任然在 merging 中&#xff0c;无法进行git下一步操作。 2. 原因&#xff1a; 通过 git status 发现一个文件&#xff0c;显示表面&#xff0c;该文件在当前分支和…...

项目--苍穹外卖

1.| constant | 存放相关常量类 | | context | 存放上下文类 | | enumeration | 项目的枚举类存储 | | exception | 存放自定义异常类 | | json | 处理json转换的类 | | properties | 存放SpringBoot相关的配置属性类 | | result | 返回结果类的封装 | | utils | 常用工具类 | …...

从零开发短视频电商 使用Spring WebClient发起远程Http调用

文章目录 依赖使用创建WebClient实例创建带有超时的WebClient实例示例 请求准备获取响应 高级过滤器自定义过滤器 自定义线程池自定义WebClient连接池开启日志错误处理最佳实践 示例异步请求同步请求上传文件重试过滤错误错误处理 参考 Spring WebClient 是 Spring WebFlux 项目…...

Python实现成语接龙

如图&#xff1a; 详细代码实现&#xff1a; # coding:utf-8 import string import pypinyin import sys import randomprint("初始化中&#xff0c;请稍等……")def main():f2 open(./idiom.txt, r, encodingutf-8)f f2.read() # 一次性读取完成new3_list f.sp…...

继续上一个爬虫,所以说selenium加browsermobproxy

继续&#xff0c;书接上回&#xff0c;这次我通过jsrpc&#xff0c;也学会了不少逆向的知识&#xff0c;感觉对于一般的网站应该都能应付了。当然我说的是简单的网站&#xff0c;遇到那些混淆的&#xff0c;还有那种猿人学里面的题目&#xff0c;还是免谈了。那种需要的水平太高…...

Sentinel服务熔断和流控

Sentinel服务熔断和流控 简介 Sentinel ​ 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式服务架构的流量控制组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来…...

01_TMS320F28004x系列MCU介绍和资料搜集

1. TI C2000 实时微控制器 TI公司在处理器方面的产品线有&#xff1a;基于ARM内核的微控制器/微处理器、MSP430微控制器、C2000系列实时微控制器、还有数字信号处理器&#xff08;DSP&#xff09;。 其中&#xff0c;C2000是TI公司专门针对实时控制推出的32位微控制器。TI公司…...

JavaScript中获取对象属性的不同方法

JavaScript中获取对象属性的不同方法 文章目录 JavaScript中获取对象属性的不同方法一、点记法二、方括号记法三、Object.keys()方法四、Object.values()方法五、Object.entries()方法六、Object.getOwnPropertyNames()方法七、Object.getOwnPropertyDescriptors()方法 JavaScr…...

【STM32教程】第四章 STM32的外部中断EXTI

案例代码及相关资料下载链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1hsIibEmsB91xFclJd-YTYA?pwdjauj 提取码&#xff1a;jauj 1 中断系统 1.1 中断的概念 中断系统的定义&#xff1a;中断是指在主程序运行过程中&#xff0c;出现了特定的中断触发条件…...

力扣第40天----第121题、第122题

# 力扣第40天----第121题、第122题 文章目录 一、第121题--买卖股票的最佳时机二、第122题--买卖股票的最佳时机II 一、第121题–买卖股票的最佳时机 ​ 分2种情况考虑&#xff0c;根据持有股票、不持有股票这2种情况&#xff0c;完成递推公式。另外&#xff0c;这里要求只买卖…...

Flask 使用 JWT(二)

在 Python 使用 JWT 主要的方案是 PyJWT 工具。 安装与基本使用 可以使用 pip 安装 PyJWT: $ pip install pyjwt编码与解码 编码函数 def encode( self, payload: Dict[str, Any], # payload 参数 key: str, …...

从0到1理解ChatGPT原理

目录 写在前面 1.Tansformer架构模型 2.ChatGPT原理 3.提示学习与大模型能力的涌现 3.1提示学习 3.2上下文学习 3.3思维链 4.行业参考建议 4.1拥抱变化 4.2定位清晰 4.3合规可控 4.4经验沉淀 机械工业出版社京东自购链接 写在前面 2022年11月30日&#xff0c;ChatG…...

如何解决 “Component cannot be used as a JSX component“

原因是react版本与types/react版本不一致导致的, 在tsconfig.json中加入以下代码,将依赖指向项目里的node_modules "paths": {"react": [ "./node_modules/types/react" ]}改完后代码大概是长这样的 {"compilerOptions": {..."…...

小程序自定义tabbar

前言 使用小程序默认的tabbar可以满足常规开发&#xff0c;但是满足不了个性化需求&#xff0c;如果想个性化开发就需要用到自定义tabbar,以下图为例子 一、在app.json配置 先按照以往默认的形式配置&#xff0c;如果中间的样式特殊则不需要配置 "tabBar": {&qu…...

分布式系统第五讲:分布式事务及实现方案

分布式系统第五讲&#xff1a;分布式事务及实现方案 事务是一个程序执行单元&#xff0c;里面的所有操作要么全部执行成功&#xff0c;要么全部执行失败。而分布式事务是指事务的参与者、支持事务的服务器、资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上。本…...

算法通关村17关 | 透析跳跃游戏

1. 跳跃游戏 题目 LeetCode55 给定一个非负整数数组&#xff0c;最初位于数组的第一个位置&#xff0c;数组中的每个元素代表你再该位置可以跳跃的最大长度&#xff0c;判断你是否能够达到最后一个位置。 思路 如果当前位置元素如果是3&#xff0c;我们无需考虑是跳几步&#…...

ARM接口编程—RTC(exynos 4412平台)

RTC简介 RTC(Real Time Clock)即实时时钟&#xff0c;它是一个可以为系统提供精确的时间基准的元器件&#xff0c;RTC一般采用精度较高的晶振作为时钟源&#xff0c;有些RTC为了在主电源掉电时还可以工作&#xff0c;需要外加电池供电。 RTC内部原理 RTC寄存器 RTC控制寄存器 …...

数据分享|WEKA信贷违约预测报告:用决策树、随机森林、支持向量机SVM、朴素贝叶斯、逻辑回归...

完整报告链接&#xff1a;http://tecdat.cn/?p28579 作者&#xff1a;Nuo Liu 数据变得越来越重要&#xff0c;其核心应用“预测”也成为互联网行业以及产业变革的重要力量。近年来网络 P2P借贷发展形势迅猛&#xff0c;一方面普通用户可以更加灵活、便快捷地获得中小额度的贷…...

逆市而行:如何在市场恐慌时保持冷静并抓住机会?

市场中的恐慌和波动是投资者所不可避免的。当市场出现恐慌情绪时&#xff0c;很多投资者会盲目跟从大众&#xff0c;导致决策出现错误。然而&#xff0c;聪明的投资者懂得在恐慌中保持冷静&#xff0c;并将其视为抓住机会的时机。本文将分享一些在市场恐慌时保持冷静并抓住机会…...

SpringBoot项目在Linux上启动、停止脚本

文章目录 SpringBoot项目在Linux上启动、停止脚本1. 在项目jar包同一目录&#xff0c;创建脚本xxx.sh【注: 和项目Jar同一目录】2. xxx.sh脚本内容&#xff0c;实际项目使用&#xff0c;只需修改jar包的名称&#xff1a;xxxxxx.jar3. 给xxx.sh赋予执行权限4. xxx.sh脚本的使用 …...

基于32位单片机的感应灯解决方案

感应灯是一种常见照明灯&#xff0c;提起感应灯&#xff0c;相信大家并不陌生&#xff0c; 它在一些公共场所、卫生间或者走廊等场所&#xff0c;使用的较为广泛&#xff0c;同时它使用起来也较为方便省电。“人来灯亮&#xff0c;人走灯灭”的特性&#xff0c;使他们在部分场景…...

机器学习——支持向量机(SVM)

机器学习——支持向量机&#xff08;SVM&#xff09; 文章目录 前言一、SVM算法原理1.1. SVM介绍1.2. 核函数&#xff08;Kernel&#xff09;介绍1.3. 算法和核函数的选择1.4. 算法步骤1.5. 分类和回归的选择 二、代码实现&#xff08;SVM&#xff09;1. SVR&#xff08;回归&a…...

HTTP协议初识·下篇

介绍 承接上篇&#xff1a;HTTP协议初识中篇_清风玉骨的博客-CSDN博客 本篇内容&#xff1a; 长链接 网络病毒 cookie使用&session介绍 基本工具介绍 postman 模拟客户端请求 fiddler 本地抓包的软件 https介绍 https协议原理 为什么加密 怎么加密 CA证书介绍 数字签名介绍…...

c++ 类的实例化顺序

其他类对象有作为本类成员&#xff0c;先构造类中的其他类对象&#xff0c; 释放先执行本对象的析构函数再执行包含的类对象的析构函数 #include <iostream> #include <string.h> using namespace std;class Phone { public:Phone(string name):m_PName(name){…...

Vue自动生成二维码并可下载二维码

遇到一个需求&#xff0c;需要前端自行生成用户的个人名片分享二维码&#xff0c;并提供二维码下载功能。在网上找到很多解决方案&#xff0c;最终吭哧吭哧做完了&#xff0c;把它整理记录一下&#xff0c;方便后续学习使用&#xff01;嘿嘿O(∩_∩)O~ 这个小东西有以下功能特点…...

应该下那个 ActiveMQ

最近在搞 ActiveMQ 的时候&#xff0c;发现有 2 个 ActiveMQ 可以下载。 应该下那个呢&#xff1f; JMS 即Java Message Service&#xff0c;是JavaEE的消息服务接口。 JMS主要有两个版本&#xff1a;1.1和2.0。 2.0和1.1相比&#xff0c;主要是简化了收发消息的代码。 所谓…...

【C语言】指针详解(3)

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解指针(2)&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一.函数指针数组二.指向函数指针数组的指针&#xff08;不重要&#xff09;三.回调函数 一.函…...

告别HR管理繁琐,免费低代码平台来帮忙

编者按&#xff1a;本文着重介绍了使用免费且高效的低代码平台实现的HR管理系统在一般日常人力资源管理工作中的关键作用。 关键词&#xff1a;低代码平台、HR管理系统 1.HR管理系统有什么作用&#xff1f; HR管理系统作为一款数字化工具&#xff0c;可为企业提供全方位的人力资…...

兰州新区建设厅网站/营销策略是什么

腾讯以山海经为题材的无缝开放世界手游《妄想山海》已于今日开启预约。《妄想山海》手游是2020年腾讯重磅推出的无缝开放世界手游&#xff0c;历经4年时间开发&#xff0c;力求打造超越想象的奇幻的山海经大荒世界。当前已进行过多轮万人规模测试&#xff0c;玩家好评如潮&…...

凡科网网站怎么设置会员登录板块/保定seo排名优化

滚 &#xff0c;滚去搬砖 今天又一次发现&#xff0c;公司里搬砖和教研室的区别&#xff0c;想想还是教研室做的事情比较高大尚&#xff0c;做的事情都时多年的高级架构师做的事情&#xff0c;起点一下子就高了很多&#xff0c;而不是从底层一步步的往上进阶&#xff0c;所以&a…...

产品做国外网站有哪些/深圳关键词推广整站优化

python解释器在加载 .py 文件中的代码时&#xff0c;会对内容进行编码&#xff08;默认ascill&#xff09;。python3现在编码是unicode. ASCII&#xff08;American Standard Code for Information Interchange&#xff0c;美国标准信息交换代码&#xff09;是基于拉丁字母的一…...

巴塘网站建设/凡科建站怎么建网站

来源&#xff1a;http://blog.csdn.net/chengyingzhilian/article/details/7894276 UIView表示屏幕上的一块矩形区域&#xff0c;它在App中占有绝对重要的地位&#xff0c;因为IOS中几乎所有可视化控件都是UIView的子类。负责渲染区域的内容&#xff0c;并且响应该区域内发生的…...

做弩的网站/seo站群优化技术

创建 JSF 受管 Bean 在本练习中&#xff0c;将创建一个 JSF 受管 Bean。受管 Bean 中的方法用于显示 JSF 页面中的数据&#xff0c;以及访问 helper 类中的方法以检索记录。JSF 2.0 规范允许在 Bean 类中使用标注以将类标识为 JSF 受管 Bean&#xff0c;以及指定范围和 Bean 名…...

迈网科技 官方网站/各类资源关键词

开篇&#xff1a;说清缘由 首先介绍一下我的个人背景&#xff0c;鄙人小康家庭&#xff0c;父母都是普通职业&#xff0c;供我读书长大不容易&#xff0c;好在我也算争气&#xff0c;高考发挥正常&#xff0c;考了个还算不错的大学&#xff0c;华南地区某211。今年的金三银四本…...