Embedding Annotations in a PDF

Embedding annotations into a PDF document using PSPDFKit for Web can be done either with the UI or programmatically using the public API.

In both cases, the API can be used to persist the annotations to the document automatically or on demand.

Persisting Annotations Automatically

The annotations are automatically saved to the document without needing to change any setting; the auto saving mechanism, which is enabled by default, will take care of persisting any new changes as they take place:

PSPDFKit.load({
  autoSaveMode: PSPDFKit.AutoSaveMode.INTELLIGENT // <- default autoSaveMode
}).then((instance) => {
  instance.addEventListener("annotations.didSave", (annotations) => {
    console.log("Annotations saved!", annotations.toJS());
  });
});

Persisting Annotations on Demand

If you need more control over when annotations are persisted to the document, you can disable auto saving and call instance.save() at the necessary moment instead:

PSPDFKit.load({
  autoSaveMode: PSPDFKit.AutoSaveMode.DISABLED
}).then((instance) => {
  instance.addEventListener("annotations.create", (annotations) => {
    instance.save();
  });
});

ℹ️ Note: Annotations should be saved before exporting or printing the document, so as to ensure all changes are included.

When exporting a document, you have several options. Refer to our guides on flattening annotations and incremental saving for more details.

Auto saving can be configured for different scenarios and use cases. You can find more information in our auto save guide.