---
title: "Rearrange annotation tools in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/annotation-toolbar/rearrange/"
md_url: "https://www.nutrient.io/guides/web/user-interface/annotation-toolbar/rearrange.md"
last_updated: "2026-05-30T02:20:01.425Z"
description: "Learn how to rearrange Nutrient's annotation toolbar items using the API to enhance PDF annotation experience for users."
---

# Rearranging annotation tools in our viewer toolbar

Nutrient Web SDK 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:

```js

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

    return defaultAnnotationToolbarItems;
  }
});

```

We can also change the annotation toolbar once the PDF has loaded using [`instance.setAnnotationToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setAnnotationToolbarItems):

```js

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

    return defaultAnnotationToolbarItems;
  }
);

```
---

## Related pages

- [Create a new annotation tool in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/create-a-new-tool.md)
- [Customizing an existing annotation tool in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/customize-existing-tools.md)
- [Creating a custom annotation toolbar for mobile devices](/guides/web/user-interface/annotation-toolbar/mobile-responsiveness.md)
- [Removing an annotation tool from our viewer toolbar](/guides/web/user-interface/annotation-toolbar/remove-a-tool.md)