Skip to main content

Tools

Overview​

In Kritzel, a Tool represents an active state that determines how user input (like mouse clicks, touches, and pen strokes) behaves on the canvas. Because Kritzel is a state machine, only one tool can be active at a time. The active tool intercepts all pointer events and executes its specific logic to perform actions such as drawing, selecting, or erasing.

Kritzel provides a versatile set of default tools like the Selection Tool, Brush Tool, Line Tool, Shape Tool, and Text Tool. You can also customize existing tools or register entirely custom tools to extend functionality.

Disabling and Enabling Tools​

If your application needs to temporarily lock the canvas to prevent user interaction (for example, during a loading state or when opening a modal), you can disable and enable tool interactions.

Customizing the Toolbar​

If you want a focused editing experience, pass a custom controls array to <KritzelEditor>. The editor will register and render only the tools you provide. In this example, the controls are limited to select, brush, and text. Use isDefault to specify the default active tool.

Adding Custom Tools​

You can register a custom tool configuration and then surface it in the controls panel. This example registers a custom highlighter built from KritzelBrushTool and adds it to the toolbar controls alongside selection, pen, and text.

Programmatically Changing the Active Tool​

You can programmatically change the currently active tool using the API. This is useful when you want to build your own custom toolbar or trigger tool changes via keyboard shortcuts.

  • Tool activation (changeActiveTool())
  • Tool configuration (registerTool())
  • Tool interaction (enable(), disable())

For a comprehensive view, see the API Reference.