Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt

Use this file to discover all available pages before exploring further.

Most devs only really need @tsdraw/react, which includes the react component: 
npm install @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

PackageDescriptionDependencies
@tsdraw/coreBase engine, tools, shapes, viewport, persistenceperfect-freehand
@tsdraw/reactReact 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.