Annotation Notes

PSPDFKit for Web supports a full UI for displaying and editing annotation notes. Annotation notes allow you to set textual notes on most annotation types, with the exception of NoteAnnotation, TextAnnotation, WidgetAnnotation, and CommentMarkerAnnotation.

Creating an Annotation with a Note

Programmatically creating an annotation with a note can be done with the note property:

const annotation = new PSPDFKit.Annotations.RectangleAnnotation({
  note: "This is a note",
  pageIndex: 0,
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 10,
    top: 10,
    width: 100,
    height: 100
  }),
  cloudyBorderIntensity: 2,
  cloudyBorderInset: new PSPDFKit.Geometry.Inset({
    left: 9,
    top: 9,
    right: 9,
    bottom: 9
  })
});

Adding a Note to an Existing Annotation

You can add a note to an existing annotation using the API for updating annotations:

PSPDFKit.load(configuration).then(async (instance) => {
  const annotations = await instance.getAnnotations(0);
  const annotation = annotations.get(0);
  const updatedAnnotation = annotation.set("note", "new note");
  await instance.update(updatedAnnotation);

  console.log("Annotation updated.");
});

These notes are fully compatible with other PSPDFKit products and Adobe Acrobat.

By default, PSPDFKit shows the annotation note, but this behavior can be changed by setting PSPDFKit.ViewState#showAnnotationNotes to false.

ℹ️ Note: Annotation notes are not to be confused with note annotations, even though their UI is similar. Note annotations are a type of annotation supported by PSDPFKit; they’re “sticky notes” attached to a point in a PDF document. Annotation notes are, as mentioned earlier, notes set on annotations — they aren’t considered annotations.