Skip to main content
The Editor is the main entry point into the tsdraw engine. It coordinates the document store, viewport, input, tools, and rendering. In @tsdraw/react, access it via onMount: 
import { Tsdraw, type TsdrawMountApi } from '@tsdraw/react'

function App() {
  const handleMount = (api: TsdrawMountApi) => {
    const editor = api.editor
    // use the editor
  }

  return <Tsdraw onMount={handleMount} />
}

​
Subsystems

SubsystemPropertyDescription
Storeeditor.storeShape data and ordering
Viewporteditor.viewportCamera x, y, and zoom
Toolseditor.toolsActive tool and state routing
Renderereditor.rendererCanvas 2D rendering

​
Managing shapes

const shapes = editor.getShapes()
editor.deleteShape(id)
editor.clearAllShapes()

​
Draw styles

New shapes inherit the current style: 
editor.setDrawStyle({ color: 'blue', size: 'l', dash: 'solid' })
  • color — CSS color or palette key
  • size — 's', 'm', 'l', 'xl'
  • dash — 'draw', 'solid', 'dashed', 'dotted'
  • fill — 'none', 'semi', 'solid', 'blank'

​
Selecting tools

editor.setCurrentTool('pen')
editor.setCurrentTool('eraser')

​
Viewport control

editor.setViewport({ x: 0, y: 0, zoom: 1 })
editor.zoomIn()

​
Undo and redo

editor.undo()
editor.redo()

​
Snapshots

Snapshots are plain objects for serialization: 
const snapshot = editor.getSnapshot()
editor.loadSnapshot(snapshot)