TheDocumentation Index
Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
Use this file to discover all available pages before exploring further.
@tsdraw/react package uses several internal hooks to manage canvas state. These are not exported as public API, but understanding them helps when building custom integrations.
useTsdrawCanvasController
The primary hook that wires up the editor, canvas element, event listeners, and rendering loop. It returns:| Field | Type | Description |
|---|---|---|
canvasRef | RefObject<HTMLCanvasElement> | Ref to attach to the canvas element |
editor | Editor | The core editor instance |
currentTool | ToolId | Currently active tool |
drawStyle | DrawStyleState | Current color, dash, fill, size |
canUndo | boolean | Whether undo is available |
canRedo | boolean | Whether redo is available |
setTool | (id: ToolId) => void | Switch tools |
applyDrawStyle | (partial) => void | Update draw style |
undo | () => void | Undo last action |
redo | () => void | Redo last action |
Persistence hooks
WhenpersistenceKey is set, the component internally manages:
- IndexedDB storage via
TsdrawLocalIndexedDb— saves document and session snapshots - Cross-tab sync via
BroadcastChannel— other tabs with the same key receive updates - Session ID via
getOrCreateSessionId— tracks the browser session for conflict resolution
Rendering loop
The canvas controller sets up arequestAnimationFrame loop that:
- Reads the current viewport and shapes from the editor
- Calls the renderer to draw the background and shapes
- Draws selection and tool overlays on top