Skip to main content
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 }} />