# Customizing the document editor toolbar and footer

In Nutrient Web SDK 2021.4, we added support for customizing the Document Editor toolbar and footer. It’s now possible to customize the look and feel of built-in items in the toolbar and footer, as well as alter the entire list of items or add custom ones with your own logic to handle document operations.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/toolbar-customization/)

## Customizing the toolbar![Customized document editor toolbar](@/assets/guides/web/customizing-the-interface/customizing-document-editor-toolbar-and-footer/document-editor-custom-toolbar.png)

### NutrientViewer.defaultDocumentEditorToolbarItems

The toolbar already includes a number of predefined items. You can retrieve all the predefined items using [`NutrientViewer.defaultDocumentEditorToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultDocumentEditorToolbarItems):

```js

const defaultToolbarItems = NutrientViewer.defaultDocumentEditorToolbarItems;
console.log(defaultToolbarItems);

```

Items in the toolbar are plain JavaScript objects with the shape of a [`NutrientViewer.DocumentEditorToolbarItem`](https://www.nutrient.io/api/web/NutrientViewer.DocumentEditorToolbarItem.html).

### Loading the custom toolbar

You can use the list of default toolbar items to customize the toolbar while loading Nutrient Web SDK by using the [`NutrientViewer.Configuration#documentEditorToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#documentEditorToolbarItems) option:

```js

// Get the default toolbar items.
const defaultToolbarItems = NutrientViewer.defaultDocumentEditorToolbarItems;

// Reverse the list.
defaultToolbarItems.reverse();

// Add a custom item to the list.
defaultToolbarItems.push(customItem);

// Finally, use the desired set of toolbar items in the Nutrient configuration.
NutrientViewer.load({...otherOptions,
  documentEditorToolbarItems: defaultToolbarItems
});

```

At any time, you can retrieve the current list of `NutrientViewer.DocumentEditorToolbarItem`s with [`instance.documentEditorToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#documentEditorToolbarItems):

```js

NutrientViewer.load(config).then((instance) => {
  console.log(instance.documentEditorToolbarItems);
});

```

### Updating the toolbar

Once the Web SDK instance has loaded, you can use [`instance.setDocumentEditorToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setDocumentEditorToolbarItems) to update the Document Editor toolbar:

```js

instance.setDocumentEditorToolbarItems((items) => {
  items.reverse();
  return items;
});

console.log(instance.documentEditorToolbarItems); // This will set the reversed items array as visible in the UI.

```

You can also pass an array of `NutrientViewer.DocumentEditorToolbarItem`s directly instead of using a callback:

```js

instance.setDocumentEditorToolbarItems(newItems);

```

### Custom toolbar items

As mentioned before, items in the toolbar are plain JavaScript objects with the shape of a `NutrientViewer.DocumentEditorToolbarItem`. Most of the time, they’re buttons that perform an action upon being clicked.

The main differentiator between built-in toolbar items and user-defined ones is the `type`. For the former, it’s one of the [`NutrientViewer.defaultDocumentEditorToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultDocumentEditorToolbarItems), and for the latter, it’s `custom`:

```js

const item = {
  type: "custom",
  id: "my-button",
  title: "Custom Button",
  onPress: (event) => {
    alert("I was clicked");
  }
};

```

When the `icon` for an item is missing, the `title` will be displayed instead. This is useful if you want to create text-only buttons.

`onPress` is a function that’s invoked when an item is either clicked or tapped (on touch devices). This function receives an event object as its first argument, and a [`NutrientViewer.DocumentEditorUIHandler`](https://www.nutrient.io/api/web/NutrientViewer.DocumentEditorUIHandler.html) as the second argument. The event object is a standard DOM event, and the `NutrientViewer.DocumentEditorUIHandler` is a helper object that can be used to perform document operations through the `setOperations()` and `getSelectedPageIndexes()` methods:

```js

const item = {
  type: "custom",
  id: "my-flattening-button",
  title: "Flatten annotations",
  onPress: (event, { setOperations, getSelectedPageIndexes }) => {
    setOperations(
      (operations) =>
        operations.push({
          type: "flattenAnnotations",
          pageIndexes: getSelectedPageIndexes()
        }),
      false
    );
  }
};

```

You can also add a custom node to the toolbar:

```js

const node = document.createElement("button");
node.innerText = "Flatten annotations";

const item = {
  type: "custom",
  id: "my-flattening-button",
  node,
  onPress: (event, { setOperations, getSelectedPageIndexes }) => {
    setOperations(
      (operations) =>
        operations.push({
          type: "flattenAnnotations",
          pageIndexes: getSelectedPageIndexes()
        }),
      false
    );
  }
};

```

Once the custom button is ready, it’s possible to insert it into the current list:

```js

instance.setDocumentEditorToolbarItems((items) => {
  items.push(item);
  return items;
});

```

### Customizing built-in toolbar items

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

- `className`

Refer to the [Document Editor Toolbar API documentation](https://www.nutrient.io/api/web/NutrientViewer.DocumentEditorToolbarItem.html) to learn more about each individual property:

```js

instance.setDocumentEditorToolbarItems((items) =>
  items.map((item) => {
    if (item.type === "add") {
      item.className = "Custom-ClassName";
    }
    return item;
  })
);

```

## Customizing the footer![Customized document editor footer](@/assets/guides/web/customizing-the-interface/customizing-document-editor-toolbar-and-footer/document-editor-custom-footer.png)

### NutrientViewer.defaultDocumentEditorFooterItems

Just like the toolbar, the footer includes a number of predefined items. You can retrieve all the predefined items using [`NutrientViewer.defaultDocumentEditorFooterItems`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultDocumentEditorFooterItems):

```js

const defaultFooterItems = NutrientViewer.defaultDocumentEditorFooterItems;
console.log(defaultFooterItems);

```

Items in the toolbar are plain JavaScript objects with the shape of a [`NutrientViewer.DocumentEditorFooterItem`](https://www.nutrient.io/api/web/NutrientViewer.DocumentEditorFooterItem.html).

### Loading the custom footer

You can use the list of default footer items to customize the footer while loading Nutrient Web SDK by using the [`NutrientViewer.Configuration#documentEditorFooterItems`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#documentEditorFooterItems) option:

```js

const defaultFooterItems = NutrientViewer.defaultDocumentEditorFooterItems;

defaultFooterItems.reverse();

defaultFooterItems.push(customItem);

NutrientViewer.load({...otherOptions,
  documentEditorToolbarItems: defaultFooterItems
});

```

At any time, you can retrieve the current list of `NutrientViewer.DocumentEditorFooterItem`s with [`instance.documentEditorFooterItems`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#documentEditorFooterItems):

```js

NutrientViewer.load(config).then((instance) => {
  console.log(instance.documentEditorFooterItems);
});

```

### Updating the footer

Once the Web SDK instance has loaded, you can use [`instance.setDocumentEditorFooterItems`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setDocumentEditorFooterItems) to update the document editor footer:

```js

instance.setDocumentEditorFooterItems((items) => {
  items.reverse();
  return items;
});

console.log(instance.documentEditorFooterItems); // This will set the reversed items array as visible on the UI.

```

You can also pass an array of `NutrientViewer.DocumentEditorFooterItem`s directly instead of a callback:

```js

instance.setDocumentEditorFooterItems(newItems);

```

### Custom footer items

Items in the footer are plain JavaScript objects with the shape of a `NutrientViewer.DocumentEditorFooterItem`. Most of the time, they’re buttons that perform an action upon being clicked. But in this case, the buttons are different from each other.

The main differentiator between built-in footer items and user-defined ones is the `type`. For the former, it’s one of the [`NutrientViewer.defaultDocumentEditorFooterItems`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultDocumentEditorFooterItems), and for the latter, it’s `custom`. A custom item should always have the `node` property:

```js

const node = document.createElement("button");
node.innerText = "Flatten annotations";

const item = {
  type: "custom",
  id: "my-flattening-button",
  node,
  onPress: (event, { setOperations, getSelectedPageIndexes }) => {
    setOperations(
      (operations) =>
        operations.push({
          type: "flattenAnnotations",
          pageIndexes: getSelectedPageIndexes()
        }),
      false
    );
  }
};

```

Once the custom button is ready, it’s possible to insert it into the current list:

```js

instance.setDocumentEditorFooterItems((items) => {
  items.push(item);
  return items;
});

```

### Customizing built-in footer items

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

- `onPress`

- `className`

Refer to the [Document Editor footer API documentation](https://www.nutrient.io/api/web/NutrientViewer.DocumentEditorFooterItem.html) to learn more about each individual property.
---

## Related pages

- [UI for editing PDF documents](/guides/web/user-interface/document-editor.md)