Rearranging Annotation Tools in Our Viewer Toolbar

PSPDFKit for Web comes with a customizable annotation toolbar that, by default, includes a number of predefined items. You can rearrange toolbar items using our API.

In the example below, we’re reversing the order in which the items appear on the annotation toolbar when loading the PDF:

PSPDFKit.load({
  // ...otherOptions
  annotationToolbarItems: (
    annotation,
    { defaultAnnotationToolbarItems }
  ) => {
    if (annotation instanceof PSPDFKit.Annotations.InkAnnotation) {
      return defaultAnnotationToolbarItems.reverse();
    }

    return defaultAnnotationToolbarItems;
  }
});

We can also change the annotation toolbar once the PDF has loaded using instance.setAnnotationToolbarItems:

instance.setAnnotationToolbarItems(
  (annotation, { defaultAnnotationToolbarItems }) => {
    if (annotation instanceof PSPDFKit.Annotations.InkAnnotation) {
      return defaultAnnotationToolbarItems.reverse();
    }

    return defaultAnnotationToolbarItems;
  }
);