Some test text!

Hamburger Icon

Web / Guides / Introduction

Introduction to the AnnotationManager

By now, you should have setup WebViewer and read all about the DocumentViewer , but a very common use case is interacting with annotations.

The main way to access and work with annotations is through the AnnotationManager. Like with the DocumentViewer when using the WebViewer UI, this is also available through the Core namespace and is one of the main objects you will likely interact with.

Reading annotations

Fetching a list of annotations in the document can be done via the AnnotationManager. This is done through the getAnnotationsList API. This list is the complete list so it will include link annotations and widgets (form controls).

const { annotationManager, Annotations } = instance.Core;

annotationManger.getAnnotationsList().forEach(annot => {
  if (annot instanceof Annotations.RectangleAnnotation) {
      // Do something with annotation

Getting annotations by ID

If you know the ID of your annotation, you can use getAnnotationById to get it.

const { annotationManager } = instance.Core;

const annot = annotationManger.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');

Getting annotations under cursor

If you are working with user interactions and would like to get the annotations under the cursor at some point, the AnnotationManager provides two methods that will help depending on what you want to do:

const { documentViewer, annotationManager } = instance.Core;

documentViewer.addEventListener('mouseLeftUp', (e) => {
  const annotations = annotationManager.getAnnotationsByMouseEvent(e);

Adding annotations

Adding new annotations is also done through the AnnotationManager with the addAnnotation or addAnnotations API. Be sure to check out how to create annotations in our other guide.

const { annotationManager, Annotations } = instance.Core;

// Create an annotation using an object initializer
const rect = new Annotations.RectangleAnnotation({
  X: 50,
  Y: 50,
  Width: 150,
  Height: 50,
  StrokeColor: new Annotations.Color(255, 0, 0, 1),

// Always redraw annotation if rendering was updated
When adding annotations or changing their properties directly, always call redrawAnnotation to rerender the annotation.

Newly added rectangle

Removing annotations

Like with adding annotations, the AnnotationManager provides the deleteAnnotation and deleteAnnotations APIs to delete annotations. You must have a reference to the annotation to use these methods.

const { annotationManager } = instance.Core;

const annot = annotationManger.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');

Next steps

Now that you know how to add annotations, learn how to create them!

Get the answers you need: Chat with us