---
title: "Create inline text selection tool in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/inline-text-selection-toolbar/create-a-new-tool/"
md_url: "https://www.nutrient.io/guides/web/user-interface/inline-text-selection-toolbar/create-a-new-tool.md"
last_updated: "2026-06-08T16:48:26.996Z"
description: "Nutrient Web SDK comes with a customizable inline text selection toolbar that, by default, includes some predefined items."
---

# Create a new inline text selection tool in the viewer toolbar

Nutrient Web SDK comes with a customizable inline text selection toolbar that, by default, includes some predefined items. You can customize the toolbar items using the API.

You can customize a number of UI elements such as the [annotation toolbar](https://www.nutrient.io/guides/web/user-interface/annotation-toolbar/customize-existing-tools.md), the [color picker](https://www.nutrient.io/guides/web/user-interface/color-picker/custom-presets.md), and the [sidebar](https://www.nutrient.io/guides/web/user-interface/sidebar/customization.md).

The items in the toolbar are plain JavaScript objects with the shape of a [`NutrientViewer.ToolItem`](https://www.nutrient.io/api/web/NutrientViewer.ToolItem.html). Usually, they’re buttons that perform an action upon being clicked.

The main differentiator between built-in and user-defined toolbar items is the `type`. The `type` of built-in toolbar items is one of the predefined items. The `type` of user-defined toolbar items is `custom`.

The predefined item types are:

- `comment`

- `highlight`

- `redact-text-highlighter`

- `squiggle`

- `strikeout`

- `underline`

Optionally, `custom` items can also have an `id` to uniquely identify them:

```js

const item = {
  type: "custom",
  id: "my-button",
  title: "My Button",
  onPress: (event) => {
    alert("hello from my button");
  }
};

```

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 callback invoked when the item is either clicked or tapped (on touch devices).

After creating the custom button, add it to the current list:

```js

instance.setInlineTextSelectionToolbarItems(
  ({ defaultItems, hasDesktopLayout }, selection) => {
    console.log(selection);
    // Add custom button only on desktop.
    if (hasDesktopLayout) {
      return [...defaultItems, item];
    }
    return defaultItems;
  }
);

```

Alternatively, pass the custom button to the list of toolbar items when loading the SDK:

```js

NutrientViewer.load({
  inlineTextSelectionToolbarItems: (
    { defaultItems, hasDesktopLayout },
    selection
  ) => {
    console.log(selection);
    // Add custom button only on desktop.
    if (hasDesktopLayout) {
      return [...defaultItems, item];
    }
    return defaultItems;
  }
});

```

## Adding a custom DOM node

You can specify the `node` property and provide your own DOM node for the custom toolbar item you’re adding:

```js

const node = document.createElement("node");
node.innerText = "Custom Node Item";

const item = {
  type: "custom",
  id: "author",
  node: node,
  onPress: () => alert("Custom node pressed!")
};

instance.setInlineTextSelectionToolbarItems(({ defaultItems }) => {
  return [...defaultItems, item];
});

```
---

## Related pages

- [Customizing existing tools in our inline text selection toolbar](/guides/web/user-interface/inline-text-selection-toolbar/customize-existing-tools.md)
- [Rearranging inline text selection tools in the viewer toolbar](/guides/web/user-interface/inline-text-selection-toolbar/rearrange-items.md)
- [Remove inline text selection tools](/guides/web/user-interface/inline-text-selection-toolbar/remove-a-tool.md)
- [Remove all tools from the inline text selection toolbar](/guides/web/user-interface/inline-text-selection-toolbar/remove-all-tools.md)
- [Customize the text selection tooltip in our viewer](/guides/web/user-interface/inline-text-selection-toolbar/tooltip.md)