---
title: "Custom HTML PDF annotations | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/samples/custom-annotations/"
md_url: "https://www.nutrient.io/guides/web/samples/custom-annotations.md"
last_updated: "2026-05-23T00:08:18.187Z"
description: "Learn how to customize PDF annotations using HTML and SVG images. Explore our guide for more resources on enhancing PDF annotation functionality."
---
# Custom HTML PDF annotations using JavaScript
Use custom HTML to replace or enhance existing PDF annotations. In this example, we check the `formFieldName` value to decide whether an additional SVG image should be drawn next to the annotation. Get additional resources by visiting our guide about [PDF annotation customization](/guides/web/annotations/custom-rendered-annotations.md).
[Get Started](https://www.nutrient.io/sdk/web/getting-started.md)
[All Samples](https://www.nutrient.io/guides/web/samples.md)
[Download](https://www.nutrient.io/guides/web/downloads.md)
[Launch Demo](https://www.nutrient.io/demo/)
---
```js
import PSPDFKit from "@nutrient-sdk/viewer";
// Node creation helper, it returns a new `div` with the provided class name,
// and appends the html content to it if provided, plus an icon for signature fields.
const createNode = (html, className) => {
const div = document.createElement("div");
div.className = className;
if (!html) {
return div;
}
// Only the signature widget nodes use the icon
div.innerHTML = html;
const container = document.createElement("div");
container.appendChild(div);
const divIcon = document.createElement("div");
divIcon.className = "signatureIcon";
divIcon.innerHTML =
'';
container.appendChild(divIcon);
return container;
};
const renderConfigurations = {};
const getAnnotationRenderers = ({ annotation }) => {
// Use cached render configuration
if (renderConfigurations[annotation.id]) {
return renderConfigurations[annotation.id];
}
switch (true) {
case annotation.formFieldName === "Signature Provider 2":
renderConfigurations[annotation.id] = {
// DOM node to be rendered along, or instead of, the normal annotation appearance.
node: createNode(
'
',
"signHereRight"
),
// Optional, default: false. Set to true if the node should be appended instead of replacing the normal annotation appearance.
append: true,
};
break;
case annotation.formFieldName === "Signature Provider 3":
renderConfigurations[annotation.id] = {
node: createNode(
'
',
"signHereLeft"
),
append: true,
};
break;
case annotation instanceof PSPDFKit.Annotations.WidgetAnnotation:
renderConfigurations[annotation.id] = {
node: createNode(null, "emptyField"),
append: true,
};
break;
default:
renderConfigurations[annotation.id] = {
node: createNode(null, ""),
append: true,
};
}
return renderConfigurations[annotation.id] || null;
};
export function load(defaultConfiguration) {
// Add a callback to the 'Annotation' key in the `customRenderers` configuration field to customize
// the annotation's appearance by adding a DOM node to it (or replacing the annotation's content
// entirely wit the node).
const customRenderers = {
Annotation: getAnnotationRenderers,
};
return PSPDFKit.load({...defaultConfiguration,
styleSheets: ["/customize-annotations/static/style.css"],
customRenderers,
}).then((instance) => {
instance.addEventListener("formFieldValues.update", (formFields) => {
for (let i = 0; i < instance.totalPageCount; i++) {
instance.getAnnotations(i).then((annotations) => {
annotations.forEach((annotation) => {
const formField = formFields.find(
(formField) => annotation.formFieldName === formField.name
);
if (formField) {
getAnnotationRenderers({ annotation }).node.className =
formField.value == null? "emptyField" : "filledField";
}
});
});
}
});
return instance;
});
}
```
This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case.
---
## Related pages
- [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md)
- [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md)
- [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md)
- [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md)
- [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md)
- [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md)
- [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md)
- [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md)
- [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md)
- [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md)
- [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md)
- [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md)
- [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md)
- [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md)
- [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md)
- [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md)
- [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md)
- [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md)
- [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md)
- [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md)
- [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md)
- [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md)
- [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md)
- [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md)
- [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md)
- [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md)
- [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md)
- [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md)
- [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md)
- [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md)
- [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)
