15.3K Star, super easy-to-use open source collaborative digital whiteboard: tldraw

Hello everyone, I'm TJ

Today I would like to recommend an open source collaborative digital whiteboard to you: tldraw .

tldraw

tldraw's editor, user interface, and other underlying libraries are all open source, and you can find them in its open source repository. They are also distributed on NPM for developers to use. You can use tlDraw to create a temporary whiteboard for your product, or use it as a tool for building your own applications.

online experience

The official website of tldraw is a demo for online experience. You can directly access it through https://www.tldraw.com/ to experience it.

tldraw online experience

You can see that the interface is very simple and the speed is very fast.

Development and integration

If you want to introduce tldraw into your own application, it is very simple. You only need to use it in a method similar to the following:

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'

export default function () {
    return (
        <div style={
   
   { position: 'fixed', inset: 0 }}>
            <Tldraw />
        </div>
    )
}

<Tlraw>You can build a default tldraw whiteboard using React components like above . You can also expand the shapes, tools, user interfaces, etc. you need based on this. tldraw also provides an editor API to support developers in creating, updating, and deleting whiteboard elements.

For specific and detailed development guides, you can go to the official development documents to learn and use: https://tldraw.dev/

tldraw development documentation

Finally, the old rule is to provide the relevant address. Interested friends can go and learn more about it:

Welcome to follow my public account: Programmer DD. If we had known about cutting-edge technology, there would be hope for overtaking on curves! To accumulate overtaking capital, start by paying attention to DD!

Guess you like

Origin blog.csdn.net/dyc87112/article/details/132848943