---
title: "Activate or deactivate tools in JavaScript viewer toolbar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api/"
md_url: "https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md"
last_updated: "2026-06-09T10:25:14.556Z"
description: "Learn how to programmatically customize the toolbar and manage interaction modes in Nutrient Web SDK for enhanced document viewing and annotation."
---

# Activate or deactivate tools in our viewer toolbar

It’s possible to control the main toolbar to programmatically activate or deactivate specific items or behaviors.

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

Currently, our default toolbar buttons allow you to control:

- The [`InteractionMode`](https://www.nutrient.io/api/web/NutrientViewer.html#.InteractionMode), which is the current interaction mode in the viewer.

- The [`SidebarMode`](https://www.nutrient.io/api/web/NutrientViewer.html#.SidebarMode), which determines which sidebar to show.

- One-off actions that don’t need a permanent (visual) activation state.

In addition, the main toolbar is completely customizable and can host custom toolbar items. Refer to the [customize existing tools](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md) guide for more details.

## Interaction mode

The interaction mode is part of the [`NutrientViewer.ViewState`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html) API, and it controls the current interaction mode of the viewer. For example, you can use it to activate or deactivate a tool like the text annotation one.

You can change this mode using the [`setViewState`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setViewState) instance method:

```js

instance.setViewState((viewState) =>
	viewState.set("interactionMode", NutrientViewer.InteractionMode.TEXT)
);

```

As a result of activating the interaction mode, Nutrient Web SDK will also enable the free text annotation button in the toolbar and the corresponding annotation type toolbar.

To reset the interaction mode and deactivate the button, you can then set its value to `null`:

```js

instance.setViewState(viewState => (
  viewState.set("interactionMode", null);
));

```

See the [API Reference](https://www.nutrient.io/api/web/) for a comprehensive list of the supported [interaction modes](https://www.nutrient.io/api/web/NutrientViewer.html#.InteractionMode).

## Sidebar mode

It’s possible to control the viewer sidebar by changing the [`ViewState#sidebarMode`](https://www.nutrient.io/api/web/NutrientViewer.html#.SidebarMode).

## One-off actions

A few items in the toolbar don’t activate a particular state, but instead trigger one-off actions like zooming or paginating.

See our [API reference](https://www.nutrient.io/api/web/) to discover how each of these can be controlled programmatically.

## Custom toolbar items

As mentioned above, it’s possible to customize the main toolbar to rearrange the default toolbar items or add new custom ones.

Custom items can even be grouped to create a dropdown menu. Refer to our [customize existing tools](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md) guide for more details.

To activate a custom item, you need to mark an item as `selected` and update the toolbar items:

```js

instance.setToolbarItems((items) => {
	return items.map((item) => {
		if (item.id === "my-item") {
			item.selected = true;
		}
		return item;
	});
});

```

Note that if your items define an `onPress` callback, activating an item won’t automatically invoke this function.
---

## Related pages

- [Create a new tool in PDF viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.md)
- [Configuring pager toolbar display behavior](/guides/web/user-interface/main-toolbar/pager-display.md)
- [Customizing tools in the JavaScript PDF viewer toolbar](/guides/web/user-interface/main-toolbar/customize-existing-tools.md)
- [Customize dropdown navigation in the viewer toolbar](/guides/web/user-interface/main-toolbar/dropdown-groups.md)
- [Customizing download/export buttons in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/download-export-button.md)
- [Hiding the toolbar in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/hide-the-toolbar.md)
- [Adjust the placement of the toolbar in our viewer](/guides/web/user-interface/main-toolbar/placement.md)
- [Adding page labels to navigation in our viewer](/guides/web/features/navigation-page-labels.md)
- [Customize the print button (hide/enable) in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/print-button.md)
- [Rearrange tools in our viewer toolbar](/guides/web/user-interface/main-toolbar/rearrange.md)
- [Removing a tool from the toolbar in our JavaScript viewer](/guides/web/customizing-the-interface/customizing-the-toolbar.md)
- [Customizing responsive navigation in our viewer toolbar](/guides/web/user-interface/main-toolbar/responsive-groups.md)