Create PDF Annotations Using JavaScript

Since PSPDFKit for Web implements an optimistic UI, you can easily create annotations directly on the client using JavaScript.

Try for Free Launch Demo

Whenever you create an annotation via our API, the client generates a ULID for the annotation. If you’re integrating with a backend, such as when using the Web Server-Backed operational mode, this ID enables you and the client to work with the ID that the server would use in the future (even though the server doesn’t know about it yet).

Annotations can be created by using the annotation constructors and the Instance#create endpoint. This will return a promise that will resolve to created annotations with generated IDs set.

Following the optimistic UI approach, the changes will be instantly visible in the UI, but they aren’t persisted until the annotations are saved:

const { List } = PSPDFKit.Immutable;
const { DrawingPoint, Rect } = PSPDFKit.Geometry;
const { InkAnnotation } = PSPDFKit.Annotations;

PSPDFKit.load(configuration).then(async (instance) => {
  var annotation = new InkAnnotation({
    pageIndex: 0,
    boundingBox: new Rect({ width: 100, height: 100 }),
    lines: List([
      List([
        new DrawingPoint({ x: 0, y: 0 }),
        new DrawingPoint({ x: 100, y: 100 })
      ])
    ])
  });

  const [createdAnnotation] = await instance.create(annotation);
  console.log(createdAnnotation.id); // => '01BS964AM5Z01J9MKBK64F22BQ'
});

Once annotations have been created, 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.