Interface: AnnotationRenderConfiguration


This object defines the properties of a custom annotation renderer.

It's returned from a PSPDFKit.CustomRenderers.AnnotationCustomRendererCallback function.

Note that when append=false (which is the default value for the property), the default appearance of the annotation is not rendered, including the pointer event listeners.

This means that, if you want you custom content to select the annotation when clicked, you'll have to add some logic to support it.

You can add an event listener to your node in your custom renderer code, and also supply a callback to the onDisappear property to remove the listener:

  customRenderers: {
    Annotation: ({ annotation }) => {
      function selectAnnotation(event) {
      const node = document.createElement("div").appendChild(document.createTextNode("Custom rendered!"));
      node.addEventListener("pointerdown", selectAnnotation, {
        capture: true
      return {
        append: false,
        onDisappear: () => {
          node.removeEventListener("pointerdown", selectAnnotation, {
            capture: true
Name Type Attributes Default Description
node Node

DOM node to be rendered.

append boolean <nullable>

Whether the DOM node should be appended after the annotation, or replace it.

noZoom boolean <nullable>

Whether to automatically zoom the DOM node as the current PSPDFKit.ViewState#zoomLevel changes.

onDisappear function <nullable>

Callback to be called whenever the custom DOM node is unmounted.