Driving the editor
You can drive the tldraw editor programmatically with the @tldraw/driver package. It wraps an Editor with an imperative, fluent API for simulating user input. You can use it for scripting, automation, REPL sessions, and writing tests.
Quick start
Install the package alongside tldraw:
npm install @tldraw/driverWrap an Editor instance with a Driver and dispatch input:
import { Driver } from '@tldraw/driver'
const driver = new Driver(editor)
driver.click(100, 200).pointerDown(300, 400).pointerMove(500, 600).pointerUp()
driver.keyPress('a')
driver.dispose()Every input method returns this, so calls can be chained. Call dispose when you're done so the driver can clean up its side-effect handlers.
Simulating input
Pointer, keyboard, wheel, and pinch events all flow through editor.dispatch, so they go through the editor's normal tool state machines. A pointerDown → pointerMove → pointerUp sequence with the draw tool active creates real draw shapes:
editor.setCurrentTool('draw')
driver.pointerDown(100, 100)
driver.pointerMove(150, 120)
driver.pointerMove(200, 140)
driver.pointerUp()Pointer coordinates are in screen space. For page-space positions, use editor.pageToScreen to convert before dispatching.
Keyboard helpers track modifier state automatically:
driver.keyDown('Shift')
driver.click(100, 100, { target: 'canvas' })
driver.keyUp('Shift')Manipulating the selection
Selection helpers work in page coordinates and convert to screen space internally, so you can move, rotate, and resize the current selection without computing pointer paths by hand:
driver.translateSelection(50, 0)
driver.rotateSelection(Math.PI / 4)
driver.resizeSelection({ scaleX: 2 }, 'bottom_right')Clipboard
The driver keeps its own in-memory clipboard, independent of the system clipboard. Useful for scripted copy/paste flows and testing:
driver.copy() // copies the current selection
driver.paste({ x: 400, y: 400 })Queries
The driver uses editor.sideEffects to track the shapes it creates, so you can grab the most recent result of a scripted action:
const shape = driver.getLastCreatedShape()
const lastFive = driver.getLastCreatedShapes(5)See Driver for the full list of query helpers (shape/selection page centers, rotations, arrows bound to a shape, etc.).