当前位置: 首页 > 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;一方面普通用户可以更加灵活、便快捷地获得中小额度的贷…...

实战对比:ext4 vs NTFS vs XFS vs Btrfs vs ZFS - 哪个文件系统最适合你的SSD?

SSD文件系统终极对决&#xff1a;ext4/NTFS/XFS/Btrfs/ZFS实战指南 当你把一块崭新的SSD插入电脑时&#xff0c;系统通常会默认分配一个文件系统——但这是最佳选择吗&#xff1f;作为从业十年的存储工程师&#xff0c;我见过太多用户因为文件系统选择不当而损失30%以上的SSD性…...

GetQzonehistory:数字记忆锚点——让QQ空间时光永不褪色的本地归档方案

GetQzonehistory&#xff1a;数字记忆锚点——让QQ空间时光永不褪色的本地归档方案 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 当你试图找回十年前那条深夜发布的QQ空间说说时&…...

C++ STL 容器线程安全的边界条件

C STL容器线程安全的边界条件探析 在多线程编程中&#xff0c;C标准模板库&#xff08;STL&#xff09;容器的高效使用一直是开发者关注的焦点。尽管STL容器在设计上并未原生支持线程安全&#xff0c;但其性能优势使得开发者仍需在并发环境中谨慎使用。理解STL容器线程安全的边…...

Cursor试用限制如何解决?go-cursor-help工具三合一方案详解

Cursor试用限制如何解决&#xff1f;go-cursor-help工具三合一方案详解 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro…...

高效命令行的OpenClaw搭配:nanobot镜像与zsh/fish集成

高效命令行的OpenClaw搭配&#xff1a;nanobot镜像与zsh/fish集成 1. 为什么需要命令行AI助手 作为一个长期与终端打交道的开发者&#xff0c;我发现自己每天要重复处理三类高频问题&#xff1a;记不清的命令参数、复杂的管道组合、报错信息的即时解读。传统解决方案要么依赖…...

AI读脸术本地运行:私有化部署人脸分析系统详细步骤

AI读脸术本地运行&#xff1a;私有化部署人脸分析系统详细步骤 1. 什么是AI读脸术&#xff1a;不联网也能识别人脸属性 你有没有想过&#xff0c;一张普通照片里藏着多少信息&#xff1f;比如这张自拍——不用上传到任何云端服务&#xff0c;也不用担心数据被谁看到&#xff…...

如何3步搞定黑苹果?这款零代码工具让你告别3天煎熬

如何3步搞定黑苹果&#xff1f;这款零代码工具让你告别3天煎熬 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是不是也曾被黑苹果配置折磨得焦头烂…...

基于Coze工作流实现内容智能分发:从公众号到多平台图文一键同步

1. 为什么你需要一个智能内容分发系统 每次写完公众号文章&#xff0c;你是不是也和我一样头疼&#xff1f;要把同样的内容搬运到小红书、抖音、视频号这些平台&#xff0c;每次都要重新排版、改标题、调整图片尺寸&#xff0c;一套流程下来至少得花上两小时。更糟的是&#xf…...

探索前沿技术:如何利用AI优化现代软件开发流程

1. AI如何改变现代软件开发的面貌 十年前我刚入行时&#xff0c;软件开发还停留在"人肉编程"阶段。每个功能都要手动敲代码&#xff0c;调试全靠print大法&#xff0c;项目管理用Excel表格记录进度。现在回想起来&#xff0c;当时的开发方式就像用手工织布机做衣服—…...

抖音无水印视频批量获取高效解决方案:从技术原理到场景落地

抖音无水印视频批量获取高效解决方案&#xff1a;从技术原理到场景落地 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容管理领域&#xff0c;高效获取抖音视频一直是内容创作者、研究者和企业运营…...