OptionalaiAI Assistant panel — the conversational AI interface for document queries and actions.
Return null from render to hide it entirely.
OptionalannotationsAnnotations — slots for viewing, selecting, and managing annotations.
Includes: actions (selected annotation actions), status (read-only indicator),
textMarkupInline (text selection markup), deleteConfirm, link (link editor), note (note popup).
Optionalactions?: BaseSlotCustomize or hide the actions for selected annotations.
Note:
This slot replaces customization previously done via annotationTooltipCallback.
Use instance.getSelectedAnnotations() to access the selected annotation(s).
OptionaldeleteConfirm?: BaseSlotCustomize or hide the delete annotation confirmation. Return null from render to skip the confirmation entirely.
Optionallink?: BaseSlotCustomize or hide the link annotation editor (shown when interacting with a link annotation).
Optionalnote?: BaseSlotCustomize or hide the note annotation expanded view.
Note: This controls the popup showing the note's text content - not the note indicator icon on the canvas. The popup's appearance is determined by the PDF reader (per PDF spec §12.5.6.4), making it UI that customers may want to customize.
Optionalstatus?: BaseSlotCustomize or hide the locked/read-only annotation status indicator (shown when hovering locked or read-only annotations).
OptionaltextMarkupInline?: BaseSlotCustomize or hide the text markup inline toolbar (toolbar shown when text is selected for markup).
Custom actions toolbar for selected annotations:
NutrientViewer.load({
ui: {
annotations: {
actions: (instance, id) => ({
render: () => {
const bar = document.createElement("div");
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.onclick = async () => {
const selected = instance?.getSelectedAnnotations();
if (selected?.size) await instance?.delete(selected.first().id);
};
bar.appendChild(deleteBtn);
return bar;
},
}),
},
},
});
OptionalattachmentAttachment preview — displays embedded file attachments.
Return null from render to hide it entirely.
OptionalcommentReplace the entire comment thread component UI with a custom implementation by passing a function. Or customize it partly by passing an object configuration.
The UI customization function is invoked when the SDK is ready to render a comment thread.
Fully replace the comment thread UI:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (instance, id) => ({
render: (params) => {
// Return a DOM Node
const div = document.createElement("div");
div.innerText = `This is a custom UI for the comment thread: ${id}`;
return div;
},
}),
},
});
Customize the header slot within comment thread:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: {
header: () => {
return {
render: () => {
const div = document.createElement("div");
div.style.backgroundColor = "lightgreen";
div.style.padding = "5px";
div.innerText = "This is a custom header for the comment thread.";
return div;
},
};
},
},
},
});
OptionalcontentContent editor — confirmations and warnings during content editing sessions.
Includes: exitConfirm, downloadConfirm, cannotSavePrompt, fontMismatch, subsetFont.
Use instance.saveContentEditingSession() and instance.discardContentEditingSession()
to control content editing programmatically from custom UI.
OptionalcannotSavePrompt?: BaseSlotCustomize or hide the "cannot save changes" prompt (shown when the content editor cannot save).
OptionaldownloadConfirm?: BaseSlotCustomize or hide the download document confirmation (shown when downloading during content editing).
OptionalexitConfirm?: BaseSlotCustomize or hide the exit content editor confirmation (shown when leaving content editor with unsaved changes).
OptionalfontMismatch?: BaseSlotCustomize or hide the font mismatch warning (shown when a font used in the document is not available).
OptionalsubsetFont?: BaseSlotCustomize or hide the subset font warning (shown when a font is only partially embedded).
OptionaldocumentDocument comparison — controls and diff view for comparing documents.
OptionaldocumentDocument editor — full-page management UI (reorder, rotate, delete, add pages).
Pass a function to fully replace, or an object with { toolbar?, body?, footer? } sub-slots.
Add a custom footer to the document editor:
NutrientViewer.load({
ui: {
documentEditor: {
footer: (instance, id) => ({
render: () => {
const footer = document.createElement("div");
const saveBtn = document.createElement("button");
saveBtn.textContent = "Save & Close";
saveBtn.onclick = () => instance?.setViewState(v => v.set("interactionMode", null));
footer.appendChild(saveBtn);
return footer;
},
}),
},
},
});
OptionalformForm creator — form field design tools.
Currently contains propertyEditor — the form field property editor shown when
a form field is selected in designer mode.
OptionalpropertyEditor?: BaseSlotCustomize or hide the form field property editor (shown when a form field is selected in form designer mode). Configure field name, type, validation, and appearance.
OptionalmeasurementsMeasurements — scale calibration and measurement display settings.
OptionalpasswordPassword prompt — shown when opening a password-protected document.
Custom password prompt:
NutrientViewer.load({
ui: {
passwordPrompt: (instance, id) => ({
render: () => {
const form = document.createElement("div");
const input = document.createElement("input");
input.type = "password";
input.placeholder = "Enter document password";
form.appendChild(input);
return form;
},
}),
},
});
OptionalpresetApply a named UI preset as a baseline configuration.
'minimal' - hides all UI components, leaving only the bare page canvas.
Individual slot overrides specified alongside preset take precedence, so you can
selectively restore specific components on top of the preset.The preset key is resolved at load time (and when calling instance.setUI()) and is
not stored in the SDK state - the result is always a plain slot configuration.
OptionalreloadReload document confirmation — shown when the document needs to be reloaded.
Return null from render to skip the confirmation.
OptionalsearchSearch panel — document text search with result navigation.
Use instance.startUISearch(term) and instance.search(term) to control search programmatically.
Replace with a custom search UI:
NutrientViewer.load({
ui: {
search: (instance, id) => ({
render: () => {
const panel = document.createElement("div");
const input = document.createElement("input");
input.placeholder = "Search...";
input.onkeyup = (e) => {
if (e.key === "Enter") instance?.startUISearch(input.value);
};
panel.appendChild(input);
return panel;
},
}),
},
});
OptionalsidebarUI Customization for custom sidebars. Use this to render a custom sidebar by passing a function.
Adding a custom sidebar myCustomSidebar:
NutrientViewer.load({
// ... Your configuration.
ui: {
sidebar: {
myCustomSidebar: (instance, id) => ({
render: (params) => {
const div = document.createElement("div");
div.innerText = "This is my custom sidebar!";
div.style.padding = "10px";
div.style.color = "#ccc";
return div;
},
}),
},
},
});
OptionalsignaturesSignatures — electronic signature creation/selection and digital signature verification.
Electronic signatures (create, list) are drawn/typed signatures applied as annotations.
Digital signatures (digitalSigning, digitalStatus) are cryptographic signatures with certificates.
Optionalcreate?: BaseSlotCustomize or hide the electronic signature creation view (draw, type, or upload a signature).
OptionaldigitalSigning?: BaseSlotCustomize or hide the digital signing flow (cryptographic signing with certificates).
OptionaldigitalStatus?: BaseSlotCustomize or hide the digital signature validation status (certificate chain, integrity, timestamp).
Optionallist?: BaseSlotCustomize or hide the saved electronic signatures list (pick from previously stored signatures).
OptionalstampsStamps — stamp creation and stamp template selection.
create — custom stamp creation view.list — stamp picker showing available templates.OptionaltoolsTools — the primary and contextual tool surfaces.
main — always-visible tools (zoom, page navigation, mode switching, etc.)contextual — mode-specific tools (annotation properties, content editor bar, form designer, etc.)Optionalcontextual?: BaseSlotCustomize 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.
Optionalmain?: BaseSlotCustomize or hide the main (always-visible) tools - zoom, page navigation, mode switching, etc. Return null from render to hide it entirely.
Hide the main tools, keep contextual:
NutrientViewer.load({
ui: {
tools: {
main: (instance, id) => ({ render: () => null }),
},
},
});
Replace the main tools with a minimal custom bar:
NutrientViewer.load({
ui: {
tools: {
main: (instance, id) => ({
render: () => {
const bar = document.createElement("div");
bar.style.cssText = "display:flex;gap:8px;padding:8px;background:#1a1a1a;";
["Prev", "Next"].forEach((label, i) => {
const btn = document.createElement("button");
btn.textContent = label;
btn.onclick = () => {
const page = instance?.viewState.currentPageIndex ?? 0;
instance?.setViewState(v => v.set("currentPageIndex", page + (i === 0 ? -1 : 1)));
};
bar.appendChild(btn);
});
return bar;
},
}),
},
},
});
UI Customization configuration.
Use this to customize various components of the SDK's user interface.
Example
Fully replace the comment thread UI:
Example
Customize a slot within comment thread:
See