Creating annotations in WebViewer

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.

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:

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);
    });
  });

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.

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);
        }
    });
  });

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.

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);
    });
  });

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.

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