---
title: "Replicate built-in annotation tool variants in a custom UI | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/annotations/replicating-built-in-tool-variants/"
md_url: "https://www.nutrient.io/guides/web/user-interface/annotations/replicating-built-in-tool-variants.md"
last_updated: "2026-08-12T16:33:26.258Z"
description: "Map built-in tools like arrow and highlighter to ViewState interaction mode plus annotation preset IDs when you build your own toolbar or slots UI."
---

# Replicating built-in annotation tool variants (custom UI)

Annotation tool variants are alternate configurations that apply different initial properties when creating annotations. For example, the arrow variant uses the line drawing mode with an `arrow` preset that adds an arrowhead; a dashed rectangle uses the rectangle drawing mode with a preset that applies a dashed border.

To reproduce a built-in variant in a custom UI, set both pieces of state that the [built-in toolbar](https://www.nutrient.io/guides/web/user-interface/annotations/variant-buttons.md) sets for you: the **interaction mode**, which controls the creation tool or drawing behavior, and the **current annotation preset**, which supplies the initial properties for the annotation. The preset ID is the string you pass to `setCurrentAnnotationPreset`, backed by the instance’s `annotationPresets`, or by `defaultAnnotationPresets` before you load the viewer. When you hide the default toolbar and [build your own tools](https://www.nutrient.io/guides/web/user-interface/ui-customization/introduction.md), set the pair that matches the tool you’re offering.

If a tool doesn’t use a named built-in variant, you can pass `null` for the preset. To change colors, stroke width, and other defaults, see [annotation presets](https://www.nutrient.io/guides/web/user-interface/annotations/presets.md) or register your own IDs with [`setAnnotationPresets`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setAnnotationPresets).

## Minimal recipe

In your click or selection handler, set the preset and the view state’s `interactionMode`. The order of these calls doesn’t matter; the important part is that they match the tool you’re offering. Here’s the same pairing the default “Arrow” tool uses:

```js

instance.setCurrentAnnotationPreset("arrow");
instance.setViewState((vs) =>
  vs.set("interactionMode", NutrientViewer.InteractionMode.SHAPE_LINE)
);

```

## Which preset goes with which interaction mode?

The first column lists `NutrientViewer.InteractionMode` values you set on the view state. The second column lists built-in preset IDs you can pass to `setCurrentAnnotationPreset` for that mode.

| Interaction mode          | Built-in preset IDs                                                   |
| ------------------------- | --------------------------------------------------------------------- |
| `INK`                     | `ink`, `highlighter`, `ink-signature`, `es-signature`                 |
| `TEXT_HIGHLIGHTER`        | `highlight`, `text-highlighter`, `underline`, `squiggle`, `strikeout` |
| `REDACT_TEXT_HIGHLIGHTER` | `redaction`                                                           |
| `SHAPE_LINE`              | `line`, `arrow`                                                       |
| `SHAPE_RECTANGLE`         | `rectangle`, `cloudy-rectangle`, `dashed-rectangle`                   |
| `SHAPE_ELLIPSE`           | `ellipse`, `cloudy-ellipse`, `dashed-ellipse`                         |
| `SHAPE_POLYGON`           | `polygon`, `cloudy-polygon`, `dashed-polygon`                         |
| `SHAPE_POLYLINE`          | `polyline`                                                            |
| `DISTANCE`                | `distance`                                                            |
| `PERIMETER`               | `perimeter`                                                           |
| `RECTANGLE_AREA`          | `rectangle-area`                                                      |
| `ELLIPSE_AREA`            | `ellipse-area`                                                        |
| `POLYGON_AREA`            | `polygon-area`                                                        |
| `REDACT_SHAPE_RECTANGLE`  | `redaction`                                                           |
| `NOTE`                    | `note`                                                                |
| `TEXT`                    | `text`                                                                |

The defaults also include `stamp`, `image`, and `widget` in the [annotation presets](https://www.nutrient.io/guides/web/user-interface/annotations/presets.md) map. They’re a good match if you’re implementing stamp, image, or widget tools and want the same out-of-the-box property bundles.

## See also

- [Replace the main toolbar with UI slots](https://www.nutrient.io/guides/web/user-interface/ui-customization/replace-main-toolbar-with-ui-slots.md) — Minimal preset, sidebar shell, and API map when you replace `tools.main`

- [Customizing variant buttons in the default toolbar](https://www.nutrient.io/guides/web/user-interface/annotations/variant-buttons.md)

- [UI customization (slots)](https://www.nutrient.io/guides/web/user-interface/ui-customization/introduction.md)

- [`ViewState`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html)

- [`setCurrentAnnotationPreset`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setCurrentAnnotationPreset)

- [`setAnnotationPresets`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setAnnotationPresets)
---

## Related pages

- [Adding contextual tooltips to annotations in viewer](/guides/web/customizing-the-interface/annotation-tooltips.md)
- [Hide the delete button in the annotation toolbar](/guides/web/user-interface/annotations/hide-the-delete-button.md)
- [Customizing the annotation inspector in our viewer](/guides/web/user-interface/annotations/inspector.md)
- [Mastering annotation presets in your PDF viewer](/guides/web/user-interface/annotations/presets.md)
- [Adding stamp annotations in our JavaScript PDF viewer](/guides/web/user-interface/annotations/stamps.md)
- [Customizing annotation variant buttons in the toolbar](/guides/web/user-interface/annotations/variant-buttons.md)