Type Alias ToolsSlots

Tools slot configuration - the primary and contextual tool surfaces.

main - always-visible tools: zoom, page navigation, mode switching, layout, print, export, etc.
contextual - mode-specific tools that appear when entering an annotation mode, content editor, form creator, measurement, document crop, or ink eraser. Shows annotation properties (color, opacity, border width) when an annotation is selected.

Note: The names main and contextual are intentionally presentation-agnostic - they describe when the tools are visible, not how they are laid out. This allows the SDK to change the visual presentation (e.g., from a horizontal bar to a sidebar panel) without breaking the API.

Type Alias

Example

Replace the main tools with a minimal zoom-only bar:

NutrientViewer.load({
  ui: {
    tools: {
      main: (getInstance, id) => ({
        render: () => {
          const bar = document.createElement("div");
          const zoomIn = document.createElement("button");
          zoomIn.textContent = "+";
          zoomIn.onclick = () => getInstance()?.setViewState(v => v.zoomBy(1.25));
          const zoomOut = document.createElement("button");
          zoomOut.textContent = "-";
          zoomOut.onclick = () => getInstance()?.setViewState(v => v.zoomBy(0.8));
          bar.append(zoomOut, zoomIn);
          return bar;
        },
      }),
    },
  },
});

Hide the contextual tools entirely:

NutrientViewer.load({
  ui: {
    tools: {
      contextual: (getInstance, id) => ({ render: () => null }),
    },
  },
});

Properties

contextual

Optional

BaseSlot

Customize or hide the contextual (mode-specific) tools - shown when entering annotations, content editor, form creator, etc. Also displays annotation properties when an annotation is selected. Return null from render to hide it entirely.

main