Supported slots for UI customization

Nutrient Web SDK provides slot-based UI customization for every major component. Slots are organized by feature domain; you configure them under the ui property when loading the SDK or at runtime via instance.setUI().

Every slot accepts one of two forms:

• Full replacement — A function (getInstance, id) => { render, onMount?, onUnmount? } that returns your own DOM. getInstance() returns the live SDK instance (or null for preload slots); see accessing the SDK instance from a slot.
• Sub-slot customization — An object { header?, body?, footer? } where each region is its own callback. Omitted regions keep their default rendering. A region only renders when the underlying default UI has that region wired up, e.g. aiAssistant.footer is mechanically valid but won’t render if the default panel has no footer container.

To hide any slot, return null from render:

ui: {
  search: (getInstance, id) => ({ render: () => null }),
}

Slot inventory

Slots are grouped by the component they customize. Each subsection lists the available slot keys, what they cover, and any sub-slots they expose.

Tools

The tools group exposes two surfaces: primary tools that are always visible and contextual tools tied to specific modes. The names describe when the tools are visible, not how they are laid out, so the SDK can change the visual presentation without breaking the API:

ui: {
  tools: {
    main: ...,  // Always-visible tools (zoom, page nav, modes, print, export).
    contextual: ...,  // Mode-specific tools (annotation properties, content editor bar, form designer, etc.).
  },
}

Annotations

Slots for viewing, selecting, and managing annotations:

ui: {
  annotations: {
    actions: ...,  // Actions for selected annotations.
    status: ...,  // Read-only/locked indicator on hover.
    textMarkupInline: ...,  // Inline toolbar for text selection markup.
    deleteConfirm: ...,  // Delete confirmation dialog.
    link: ...,  // Link annotation editor.
    note: ...,  // Note annotation text popup.
  },
}

Content editor

Confirmations and warnings during content editing sessions. Use instance.saveContentEditingSession() and instance.discardContentEditingSession() to control content editing programmatically:

ui: {
  contentEditor: {
    exitConfirm: ...,  // Exit with unsaved changes confirmation.
    downloadConfirm: ...,  // Download during editing confirmation.
    cannotSavePrompt: ...,  // Cannot save changes prompt.
    fontMismatch: ...,  // Font mismatch warning.
    subsetFont: ...,  // Subset font warning.
  },
}

Signatures

Electronic signature creation/selection and digital signature verification. These are two distinct features:

• Electronic signatures (create, list): Hand-drawn or typed signatures applied as annotations. Use instance.getStoredSignatures() to access saved signatures.
• Digital signatures (digitalSigning, digitalStatus): Cryptographic signatures with certificates for document integrity. Use instance.getSignaturesInfo() to access validation data.

ui: {
  signatures: {
    create: ...,  // Electronic signature creation (draw, type, upload).
    list: ...,  // Saved electronic signatures picker.
    digitalSigning: ...,  // Digital signing flow (certificate-based).
    digitalStatus: ...,  // Digital signature validation status.
  },
}

Stamps

Stamp creation and template selection:

ui: {
  stamps: {
    create: ...,  // Custom stamp creation.
    list: ...,  // Stamp template picker.
  },
}

Measurements

Scale calibration and measurement display settings:

ui: {
  measurements: {
    calibration: ...,  // Scale calibration.
    settings: ...,  // Display settings (precision, unit).
  },
}

Document comparison

Controls and diff view for comparing documents:

ui: {
  documentComparison: {
    controls: ...,  // Comparison controls (tabs, toggles, exit).
    view: ...,  // Comparison diff view.
  },
}

Form creator

Form field design tools:

ui: {
  formCreator: {
    propertyEditor: ...,  // Form field property editor.
  },
}

Sidebar

The sidebar group contains the sidebar container slot and supports dynamic custom sidebar panels:

ui: {
  sidebar: {
    container: ...,  // The sidebar container itself.
    myCustomPanel: ...,  // Any custom sidebar panel (dynamic key).
  },
}

Comment thread

The comment thread is a standalone slot with rich sub-slot support:

ui: {
  commentThread: ...,  // Full replacement or sub-slots.
}

For detailed comment thread examples, see the comment thread example guide.

Standalone slots

These are single-feature components at the root level of the ui configuration:

ui: {
  documentEditor: ...,  // Page management (reorder, rotate, delete, add).
  search: ...,  // Document text search with result navigation.
  loader: ...,  // Document loading UI.
  attachmentPreview: ...,  // Embedded file attachment preview.
  passwordPrompt: ...,  // Password prompt for protected documents.
  reloadConfirm: ...,  // Reload document confirmation.
  aiAssistant: ...,  // AI assistant panel.
}

Preset

The preset key applies a baseline configuration. Currently supported:

• 'minimal' — Hides all UI, leaving only the bare page canvas. Individual slot overrides take precedence, allowing selective restoration.

// Canvas-only:
NutrientViewer.load({
  ui: { preset: 'minimal' },
});

// Canvas + custom search only:
NutrientViewer.load({
  ui: {
    preset: 'minimal',
    search: (getInstance, id) => ({
      render: () => {
        const div = document.createElement("div");
        div.textContent = "Custom search";
        return div;
      },
    }),
  },
});

// Reset to full UI at runtime:
instance.setUI({});

Quick reference

Full slot key paths at a glance.