Edit PDF Annotations Using JavaScript

In addition to an API for creating annotations, we also provide an API for updating those annotations directly on the client. Following the optimistic UI approach, the changes will be instantly visible in the UI, but they aren’t persisted until the annotations are saved.

To update annotations, you can use Instance#update:

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

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

Once annotations have been edited, they’ll need to be persisted. This is done by saving them. You can save them to external storage or embed them into the document. They can also be exported to XFDF or Instant JSON, or synced to the Web Server-Backed backend.