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.

For a full guide to the tool system, including state hierarchy, event handling, child states, tool lock, creating custom tools, and overriding defaults, see the Tools page.

Default and custom tools

The <Tldraw> component includes default tools like select, hand, draw, and arrow. 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, TLPointerEventInfo, Tldraw } from 'tldraw'

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

	onPointerDown(info: TLPointerEventInfo) {
		// Create a shape at the click position
	}
}

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

Changing tools

Change the active tool with editor.setCurrentTool:

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

Learn more

For comprehensive coverage of tools, see these guides:

• Tools — Full guide to the tool system: state hierarchy, event handling, child states, tool lock, creating custom tools, and overriding defaults
• Events — How the editor dispatches events and how to subscribe to them
• Input handling — Pointer tracking, keyboard state, and the editor.inputs API
• Ticks — Frame-synchronized updates for animations and continuous interactions

Examples

• Custom tool — A simple tool that adds stickers to the canvas
• Tool with child states — A tool with multiple states for complex interactions
• Screenshot tool — A tool for capturing canvas regions