This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/user-interface/annotation-toolbar/customize-existing-tools.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Customize annotation tool in JavaScript PDF viewer | Nutrient

Customizing an existing annotation tool in our viewer toolbar

Markdown version of this page, suitable for AI agents and automation

It’s possible to customize the following properties of built-in items:

  • title
  • className
  • disabled
  • onPress

In the example below, we add a custom onPress handler to the first item of the ink annotation toolbar:

NutrientViewer.load({
  // ...otherOptions
  annotationToolbarItems: (
    annotation,
    { defaultAnnotationToolbarItems }
  ) => {
    if (annotation instanceof NutrientViewer.Annotations.InkAnnotation) {
      defaultAnnotationToolbarItems[0].onPress = () =>
        alert("Custom onPress handler!");


      return defaultAnnotationToolbarItems;
    }


    return defaultAnnotationToolbarItems;
  }
});

See the API reference to learn more about each individual property.

When you set onPress, it’s added to the parent of the built-in annotation toolbar item.