✅ Installation

Most devs only really need @tsdraw/react, which includes the react component:

npm install @tsdraw/react

yarn add @tsdraw/react

pnpm add @tsdraw/react

Remember to import the stylesheet in your app:

import '@tsdraw/react/tsdraw.css'

Requirements

React 18.0+ or 19.0+
A bundler supporting CSS imports (Vite, Next.js, Webpack, etc.)

Core engine (Headless)

If you’re using another framework, install the core engine directly:

npm install @tsdraw/core

@tsdraw/core is framework-agnostic and provides the Editor, shape system, tools, and rendering (but you have to do the rest yourself).

Package overview

Package	Description	Dependencies
`@tsdraw/core`	Base engine, tools, shapes, viewport, persistence	`perfect-freehand`
`@tsdraw/react`	React component, toolbar, style panel, touch/keyboard handling	`@tsdraw/core`, `@tabler/icons-react`

Verifying the installation

After installing, create a short component to make sure everything works:

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

export default function App() {
  return (
    <div style={{ width: '100%', height: 400 }}>
      <Tsdraw />
    </div>
  )
}

For @tsdraw/core, since this is more complex, you probably should look through the source code or reference for more information.

Introduction

Learn tsdraw

Features

Community

✅ Installation

Requirements

Core engine (Headless)

Package overview

Verifying the installation

​Requirements

​Core engine (Headless)

​Package overview

​Verifying the installation

Requirements

Core engine (Headless)

Package overview

Verifying the installation