Tools

In tldraw, a tool is a top-level state in our state chart. The select tool, draw tool, and arrow tool are all examples of tools—each defines how the editor responds to user input while that tool is active.

The first level of states in the state chart are known as tools.

Default and custom tools

The <Tldraw> component includes default tools like SelectTool, HandTool, DrawShapeTool, and ArrowShapeTool. The core @tldraw/editor package has no built-in tools. If you use <TldrawEditor> directly, you provide your own.

You can create custom tools by extending StateNode and passing them to the tools prop:

import { StateNode, Tldraw, toRichText } from 'tldraw'

class StampTool extends StateNode {
	static override id = 'stamp'

	override onPointerDown() {
		const { x, y } = this.editor.inputs.getCurrentPagePoint()
		this.editor.createShape({ type: 'text', x, y, props: { richText: toRichText('❤️') } })
	}
}

export default function App() {
	return <Tldraw tools={[StampTool]} />
}

Registering a tool adds it to the state chart but not to the toolbar. To add a toolbar button and keyboard shortcut, see the add tool to toolbar example. Tools with multiple states declare child states with static children(); see the Tools guide.

Changing tools

Change the active tool with Editor.setCurrentTool, and read it with Editor.getCurrentToolId:

editor.setCurrentTool('select')
editor.setCurrentTool('hand')
editor.setCurrentTool('draw')
editor.getCurrentToolId() // 'draw'

Learn more

Examples