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.

Define a ToolDefinition (engine) and TsdrawCustomTool (UI): 
import { Tsdraw, type TsdrawCustomTool } from '@tsdraw/react'
import { ToolDefinition, StateNode } from '@tsdraw/core'

class StampIdleState implements StateNode {
  readonly id = 'idle'
  onPointerDown(info) {
    info.context.editor.setDrawStyle({ color: 'violet' })
  }
}

const stampTool: TsdrawCustomTool = {
  id: 'stamp',
  label: 'Stamp',
  icon: <span>🔖</span>,
  definition: {
    id: 'stamp',
    initialStateId: 'idle',
    stateConstructors: [() => new StampIdleState()],
  },
}

function App() {
  return <Tsdraw customTools={[stampTool]} />
}

​
StateNode Interface

Implement these methods to handle events:
  • onEnter / onExit
  • onPointerDown / onPointerMove / onPointerUp
  • onKeyDown / onKeyUp
Transition via info.context.transition(stateId).

​
Style Panels

Enable styles for your tool: 
const stampTool: TsdrawCustomTool = {
  // ...
  stylePanel: { parts: ['colors', 'sizes'] },
}
Available: 'colors', 'dashes', 'fills', 'sizes'.