Create Annotations in WebViewer JavaScript PDF Viewer

The annotation tools can be found on the UI toolbar header. You can click on a tool to switch to it. The tool buttons container on the right will give you tools you can use interchangeably. Clicking the down arrow beside the tool will show the options for that tool.

Another way to switch tools is to right-click on the document which will bring up a context menu. From this menu you can select an annotation tool to switch to.

Once you have switched to an annotation tool, then you'll be able to click or click + drag (depending on the annotation type) to create the annotation.

Creating annotations programmatically

Most of the time your users will create annotations using the built in UI tools, but it's also possible to create them programmatically. You can find the properties and functions that are available on each type of annotation in the annotation API documentation.

You will also want to make sure that you add the annotation after the document has been loaded. For example, to add it immediately after the document loads use the documentLoaded event:

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      // Use object initializer to initialize annotation properties
      const annot = new Annotations.RectangleAnnotation({
        PageNumber: 1,
        X: 50,
        Y: 100,
        Width: 150,
        Height: 100,
      });
      
      annotationManager.addAnnotation(annot);
      // Always redraw annotation
      annotationManager.redrawAnnotation(annot);
    });
  });

DocumentViewer#documentLoaded RectangleAnnotation AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('documentLoaded', () => {
      const annot = new Annotations.RectangleAnnotation();
      annot.PageNumber = 1;
      annot.X = 50;
      annot.Y = 100;
      annot.Width = 150;
      annot.Height = 100;
      
      annotManager.addAnnotation(annot);
      // Always redraw annotation
      annotManager.redrawAnnotation(annot);
    });
  });

DocumentViewer#documentLoaded RectangleAnnotation AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

Annotations can be initialized with an object initializer which is a key-value object that initializes properties on the annotation on construction. The initializer can only initialize public properties on the annotations listed in our documentation. This is only available in WebViewer 8+ but setting the properties individually is also available.

Updating annotation contents

To programmatically change the contents of an Annotation, you can use the setContents method. In the case of a FreeText annotation this will change the text being displayed on the document. Keep in mind that the updateAnnotation method will also need to be called to render the new updated text.

In the below example, we will change the text on a FreeTextAnnotation once it's selected.

JavaScript (SDK v8.0+)

WebViewer(…)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationSelected', (annotations, action) => {
        const annotation = annotations[0];
        if (annotation instanceof Annotations.FreeTextAnnotation && action === 'selected') {
          // set the new content
          annotation.setContents('Redacted');
          // render the new update
          annotationManager.updateAnnotation(annotation);
        }
    });
  });

Annotation.setContents AnnotationManager.updateAnnotation

JavaScript (SDK v6.0+)

WebViewer(…)
  .then(instance => {
    const { annotManager, Annotations } = instance;

    annotManager.on('annotationSelected', (annotations, action) => {
        const annotation = annotations[0];
        if (annotation instanceof Annotations.FreeTextAnnotation && action === 'selected') {
          // set the new content
          annotation.setContents('Redacted');
          // render the new update
          annotManager.updateAnnotation(annotation);
        }
    });
  });

Annotation.setContents AnnotationManager.updateAnnotation

Cloning an annotation

Cloning an annotation is made possible with the getAnnotationCopy API on the AnnotationManager. You can use this API to deep clone an annotation regardless of whether it has been added to the document.

JavaScript (SDK v8.0+)

WebViewer(…)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
      // Clone a certain annotation on to another page
      const clone = annotationManager.getAnnotationCopy(annots[0]);
      clone.PageNumber = 2;

      annotationManager.addAnnotation(clone);
      annotationManager.redrawAnnotation(clone);
    });
  });

AnnotationManager.getAnnotationsList AnnotationManager.getAnnotationCopy

JavaScript (SDK v6.0+)

WebViewer(…)
  .then(instance => {
    const { docViewer, annotManager } = instance;

    docViewer.on('documentLoaded', () => {
      const annots = annotManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
      // Clone a certain annotation on to another page
      const clone = annotManager.getAnnotationCopy(annots[0]);
      clone.PageNumber = 2;

      annotManager.addAnnotation(clone);
      annotManager.redrawAnnotation(clone);
    });
  });

AnnotationManager.getAnnotationsList AnnotationManager.getAnnotationCopy

Examples

Creating rectangle annotations To create a rectangle annotation.

Creating stamp annotations To create a stamp annotation.

Creating free text annotations To create a free text annotation.

Creating highlight annotations To create a highlight annotation.

Creating file attachment annotations To create a file attachment annotation.

Creating custom annotations To create a customized annotation.

Next steps

Check out our custom annotation guide or learn how to programmatically create annotation replies!