✅ Quick start

Now, to begin…

Firstly, install @tsdraw/react (it includes the core engine):

npm install @tsdraw/react

Then import the component and styles, and render:

import { Tsdraw } from '@tsdraw/react'
import '@tsdraw/react/tsdraw.css'

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

You now have a functional canvas with drawing, erasing, selection, and panning. That’s literally it. Now, let’s add some more cool features…

Persistence

Persistence is when the state of the canvas stays constant. To enable persistence, pass a persistenceKey to the Tsdraw component. The state now lives in your browser.

<Tsdraw persistenceKey="my-canvas" />

Backgrounds

Want a grid, lines, or dots as the background of your canvas? Just pass a background prop to the Tsdraw component. I told you, tsdraw is truly that customizable.

<Tsdraw background={{ type: 'grid' }} />

The Editor

Now, to access the Editor instance, which manages shapes, tools, and the viewport, just pass a onMount callback to the Tsdraw component.

import { Tsdraw, type TsdrawMountApi } from '@tsdraw/react'

function App() {
  const handleMount = (api: TsdrawMountApi) => {
    console.log('Editor ready. Bomb deploying...', api.editor)
  }

  return <Tsdraw onMount={handleMount} />
}

Next steps

Now that you have a working canvas:

Learn more about the editor and what it can do
Explore the built-in shapes and tools, and make your own custom tools
Customize the user interface to your liking

Introduction

Learn tsdraw

Features

Community

✅ Quick start

Now, to begin…

Persistence

Backgrounds

The Editor

Next steps

​Now, to begin…

​Persistence

​Backgrounds

​The Editor

​Next steps

Now, to begin…

Persistence

Backgrounds

The Editor

Next steps