This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/user-interface/annotations/replicating-built-in-tool-variants.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Replicate built-in annotation tool variants in a custom UI | Nutrient

Replicating built-in annotation tool variants (custom UI)

Markdown version of this page, suitable for AI agents and automation

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 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, 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 or register your own IDs with 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:

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 modeBuilt-in preset IDs
INKink, highlighter, ink-signature, es-signature
TEXT_HIGHLIGHTERhighlight, text-highlighter, underline, squiggle, strikeout
REDACT_TEXT_HIGHLIGHTERredaction
SHAPE_LINEline, arrow
SHAPE_RECTANGLErectangle, cloudy-rectangle, dashed-rectangle
SHAPE_ELLIPSEellipse, cloudy-ellipse, dashed-ellipse
SHAPE_POLYGONpolygon, cloudy-polygon, dashed-polygon
SHAPE_POLYLINEpolyline
DISTANCEdistance
PERIMETERperimeter
RECTANGLE_AREArectangle-area
ELLIPSE_AREAellipse-area
POLYGON_AREApolygon-area
REDACT_SHAPE_RECTANGLEredaction
NOTEnote
TEXTtext

The defaults also include stamp, image, and widget in the annotation presets 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