Example
Custom annotation actions with a delete button:
NutrientViewer.load({
ui: {
annotations: {
actions: (getInstance, id) => ({
render: () => {
const bar = document.createElement("div");
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.onclick = async () => {
const instance = getInstance();
const selected = instance?.getSelectedAnnotations();
if (selected?.size) await instance?.delete(selected.first().id);
};
bar.appendChild(deleteBtn);
return bar;
},
}),
},
},
});
Skip the delete confirmation and delete immediately:
NutrientViewer.load({
ui: {
annotations: {
deleteConfirm: { autoResolve: "accept" },
},
},
});
See Also
Properties
actions
Customize or hide the actions for selected annotations.
Note:
This slot replaces customization previously done via annotationTooltipCallback.
Use getInstance()?.getSelectedAnnotations() to access the selected annotation(s).
deleteConfirm
Customize or hide the delete annotation confirmation. Set autoResolve: "accept" to delete immediately without the prompt, or autoResolve: "reject" to always cancel.
link
Customize or hide the link annotation editor (shown when interacting with a link annotation).
note
Customize 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.
status
Customize or hide the locked/read-only annotation status indicator (shown when hovering locked or read-only annotations).
textMarkupInline
Customize or hide the text markup inline toolbar (toolbar shown when text is selected for markup).
Annotation-related slot configuration - UI surfaces for viewing, selecting, and managing annotations.
actionsannotationTooltipCallback.statustextMarkupInlinedeleteConfirmlinknote