---
title: "Headless measurement annotations | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/headless/measurement/"
md_url: "https://www.nutrient.io/guides/web/headless/measurement.md"
last_updated: "2026-05-25T18:42:17.823Z"
description: "Use the Nutrient Web SDK measurement annotation namespace from your own UI, read resolved measurement color presets, and pair them with custom measurement workflows."
---

# Headless measurement annotations

The `instance.annotations.measurement` namespace exposes measurement-specific annotation helpers for custom or headless-style integrations in Nutrient Web SDK. Today, it provides access to resolved measurement color presets, and it works alongside the broader measurement APIs on `Instance` for scale, precision, snapping, and other measurement behavior.

View the measurement-related entries in the [supported slots reference](https://www.nutrient.io/guides/web/user-interface/ui-customization/supported-slots.md). This page covers the programmatic surface you’ll call from inside that custom UI.

## When to use this

Reach for the headless measurement API when you’re building:

- A custom measurement color picker outside the viewer container.

- A branded measurement toolbar or palette that still respects the SDK’s resolved color presets.

- A custom or headless-style measurement workflow where your app owns the UI and reads measurement color presets from the SDK.

## API reference

| Method                                               | Notes                                                                                                                                            |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `instance.annotations.measurement.getColorPresets()` | Returns the resolved stroke color presets for measurement annotations. Respects `annotationToolbarColorPresets` and filters transparent presets. |

Measurement annotation creation and configuration use the broader measurement APIs in the SDK. Use `instance.annotations.measurement` for the measurement-specific color preset UI, and pair it with the measurement guides and `Instance` measurement APIs for scale, precision, snapping, and tool behavior.

You can use this namespace both in `headless: true` integrations and in mounted viewer integrations where your app replaces part or all of the built-in UI.

## Example: Render a custom measurement color palette

This example reads the same measurement swatches the default UI would use and renders them in a host-app palette:

```js

const instance = await NutrientViewer.load({
  headless: true,
  document: "floor-plan.pdf"
});

const presets = instance.annotations.measurement.getColorPresets();
const palette = document.getElementById("measurement-palette");

presets.strokeColor.presets.forEach((preset) => {
  const swatch = document.createElement("button");
  swatch.className = "color-swatch";
  swatch.style.backgroundColor = preset.color.toCSSValue();

  const label =
    preset.localization.defaultMessage || preset.localization.id;

  swatch.title = label;
  swatch.setAttribute("aria-label", label);

  swatch.onclick = () => {
    console.log("Use this color in your measurement workflow:", preset.color);
  };

  palette.appendChild(swatch);
});

```

## Related

- [Measurements overview](https://www.nutrient.io/guides/web/measurements.md) — The full measurement feature area.

- [Configure measurements](https://www.nutrient.io/guides/web/measurements/configure-measurements.md) — Set scale, precision, and default configurations.

- [Color presets](https://www.nutrient.io/guides/web/headless/color-presets.md) — The shared cross-namespace pattern also used by measurement annotations.

- [Measurement namespace API](https://www.nutrient.io/api/web/types/MeasurementAnnotationsNamespace.html) — The API reference for `instance.annotations.measurement`.
---

## Related pages

- [Headless color presets](/guides/web/headless/color-presets.md)
- [Headless](/guides/web/headless.md)
- [Annotation clipboard](/guides/web/headless/clipboard.md)
- [Headless callout annotations](/guides/web/headless/callout.md)
- [Headless image annotations](/guides/web/headless/image.md)
- [Headless ink annotations](/guides/web/headless/ink.md)
- [Headless note annotations](/guides/web/headless/note.md)
- [Headless link annotations](/guides/web/headless/link.md)
- [Programmatic notes panel](/guides/web/headless/notes-panel.md)
- [Headless stamp annotations](/guides/web/headless/stamp.md)
- [Headless shape annotations](/guides/web/headless/shape.md)
- [Headless text annotations](/guides/web/headless/text-annotations.md)
- [Headless redaction annotations](/guides/web/headless/redactions-from-selection.md)
- [Headless text markup](/guides/web/headless/text-markup.md)