Create PDF annotations using JavaScript

Since Nutrient Web SDK 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 Nutrient Web SDK with Document Engine, 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 edited, they’ll need to be persisted. This is done by saving them. Save them to external storage or embed them into the document. They can also be exported to XFDF or Instant JSON. If you’re using Web SDK with Document Engine, they can be synced with the backend.