Nutrient Web SDK
    Preparing search index...

    Namespace UI

    UI Namespace - types for the slot-based UI customization API.

    Every visible piece of the SDK UI is a slot - a named placeholder you can fully replace with your own DOM, partially customize (header/body/footer sub-slots), or hide entirely.

    Slots are organized by feature domain in UI.Configuration:

    Group Slots
    tools main (always-visible), contextual (mode-specific)
    annotations actions, status, textMarkupInline, deleteConfirm, link, note
    contentEditor exitConfirm, downloadConfirm, cannotSavePrompt, fontMismatch, subsetFont
    signatures create, list, digitalSigning, digitalStatus
    stamps create, list
    measurements calibration, settings
    documentComparison controls, view
    formCreator propertyEditor
    sidebar container, plus dynamic custom sidebar panels
    standalone commentThread, search, documentEditor, attachmentPreview, passwordPrompt, reloadConfirm, aiAssistant

    Every slot accepts one of two forms:

    1. Full replacement - a callback (instance, id) => SlotConfiguration that returns render, onMount, and onUnmount. The SDK renders whatever DOM node render returns.
    2. Sub-slot customization - an object { header?, body?, footer? } where each region is its own callback. Regions you omit keep their default rendering.

    To hide a slot entirely, return null from render:

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

    The slot callback (instance, id) => { render, onMount?, onUnmount? } is called once when the SDK prepares to render the component. render(params) is called on every re-render. onMount(id) fires once after the DOM is inserted. onUnmount(id) fires on teardown.

    Full replacement - custom comment thread with lifecycle:

    NutrientViewer.load({
      ui: {
        commentThread: (instance, id) => {
          const root = document.createElement("div");
          return {
            render: (params) => {
              root.innerText = `Custom comment thread: ${id}`;
              return root;
            },
            onMount: (id) => console.log("Mounted", id),
            onUnmount: (id) => console.log("Unmounted", id),
          };
        },
      },
    });

    Sub-slot customization - add a banner above the search panel:

    NutrientViewer.load({
      ui: {
        search: {
          header: (instance, id) => ({
            render: () => {
              const div = document.createElement("div");
              div.textContent = "Custom search header";
              return div;
            },
          }),
        },
      },
    });

    Hide a slot entirely:

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

    Preset - hide everything, then selectively restore:

    NutrientViewer.load({
      ui: {
        preset: "minimal", // hides all UI
        search: (instance, id) => ({
          render: () => {
            const div = document.createElement("div");
            div.textContent = "Only search is visible";
            return div;
          },
        }),
      },
    });

    Runtime update - switch between custom and default UI:

    // Apply custom UI at runtime:
    instance.setUI({
      annotations: {
        actions: (instance, id) => ({
          render: () => {
            const div = document.createElement("div");
            div.textContent = "Custom annotation actions";
            return div;
          },
        }),
      },
    });

    // Reset to default:
    instance.setUI({});

    Interfaces

    Configuration

    Type Aliases

    AnnotationSlots
    BaseSlot
    CommentThreadUI
    CommentUI
    ContentEditorSlots
    DocumentComparisonSlots
    DocumentEditorUI
    ElectronicSignaturesUI
    FormCreatorSlots
    MeasurementSlots
    SidebarUI
    SignaturePickerUI
    SignatureSlots
    SlotConfiguration
    SlotConfigurationCallback
    StampCreationUI
    StampListUI
    StampSlots
    ToolsSlots

    Settings

    Member Visibility

    On This Page

    OverviewCustomization modesLifecycle
    Interfaces
    Type Aliases