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.

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)