Tsdraw component - tsdraw

The Tsdraw component renders a complete drawing canvas with toolbar, style panel, and all built-in tools.

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

Basic usage

<Tsdraw />

A full-featured canvas with default settings. See props for all configuration options.

With persistence

<Tsdraw persistenceKey="my-canvas" />

With custom tools and UI

<Tsdraw
  customTools={[myTool]}
  initialToolId="pen"
  theme="dark"
  uiOptions={{
    toolbar: {
      parts: [['undo', 'redo'], ['pen', 'eraser', 'select']],
      draggable: true,
    },
  }}
  background={{ type: 'grid' }}
/>

Aliases

TsdrawCanvas is an alias for Tsdraw. Both export the same component:

import { TsdrawCanvas } from '@tsdraw/react'

Styling

The component fills its container by default. Set width and height props or use CSS on the parent element to control the size:

<div style={{ width: 800, height: 600 }}>
  <Tsdraw />
</div>

The className and style props are forwarded to the root element:

<Tsdraw className="my-canvas" style={{ borderRadius: 8 }} />