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.

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

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:

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 — The full measurement feature area.
• Configure measurements — Set scale, precision, and default configurations.
• Color presets — The shared cross-namespace pattern also used by measurement annotations.
• Measurement namespace API — The API reference for instance.annotations.measurement.