apps/docs/content/releases/v2.0.0.mdx
This is the initial public release of the tldraw SDK—a TypeScript library for creating infinite canvas experiences in React. After an extensive alpha and beta period, the SDK is ready for production use.
At the heart of tldraw is the Editor class, a single object that manages all editor state and provides the API for programmatic control. The editor maintains document state through a reactive store system containing JSON-serializable records.
import { Tldraw } from 'tldraw'
function App() {
return (
<Tldraw
onMount={(editor) => {
// Full programmatic control
editor.createShapes([{ type: 'geo', x: 100, y: 100 }])
editor.selectAll()
editor.zoomToFit()
}}
/>
)
}
The SDK ships with a complete set of default shapes:
A full set of tools for interacting with the canvas:
The SDK uses a reactive signals system for state management. All editor state is observable, with automatic dependency tracking to prevent unnecessary re-renders.
import { track, useEditor } from 'tldraw'
const SelectedShapeCount = track(() => {
const editor = useEditor()
return <div>{editor.getSelectedShapeIds().length} selected</div>
})
Document data lives in a TLStore—a reactive client-side database that supports:
Tools are implemented as hierarchical state machines using StateNode. Events flow through a state chart, enabling complex multi-step interactions:
class MyTool extends StateNode {
static id = 'my-tool'
onPointerDown(info) {
const point = this.editor.inputs.currentPagePoint
this.editor.createShape({ type: 'geo', x: point.x, y: point.y })
}
}
Every shape type has a ShapeUtil class defining its behavior—geometry, rendering, interactions, and more. Create custom shapes by extending ShapeUtil:
class CardShapeUtil extends ShapeUtil<CardShape> {
static type = 'card'
getGeometry(shape) {
return new Rectangle2d({ width: shape.props.w, height: shape.props.h })
}
component(shape) {
return <div className="card">{shape.props.title}</div>
}
}
A complete, responsive UI system with:
All UI components can be overridden or extended via the components prop.