> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/annotationmanager/annotationmanager.md).

# Introduction to the AnnotationManager

Learn how to interact with annotations using the AnnotationManager for web. Access, fetch, add, and delete annotations easily with this essential tool. Master annotation management now! The Apryse Web

By now, you should have [setup](/web/get-started/npm.md) WebViewer and read all about the [DocumentViewer](/web/documentviewer/documentviewer.md), but a very common use case is interacting with annotations.

The main way to access and work with annotations is through the [`AnnotationManager`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html). Like with the DocumentViewer when using the WebViewer UI, this is also available through the [`Core`](/web/what-is-webviewer/usage.md#core-namespace) 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).

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager, Annotations } = instance.Core;

annotationManager.getAnnotationsList().forEach(annot => {
  if (annot instanceof Annotations.RectangleAnnotation) {
      // Do something with annotation
  }
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList)

### Getting annotations by ID

If you know the ID of your annotation, you can use [`getAnnotationById`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationById) to get it.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

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

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.getAnnotationById](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationById)

### 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:

* [getAnnotationByMouseEvent](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationByMouseEvent__anchor)
* [getAnnotationsByMouseEvent](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsByMouseEvent__anchor)

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { documentViewer, annotationManager } = instance.Core;

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

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.getAnnotationByMouseEvent](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationByMouseEvent) [AnnotationManager.getAnnotationsByMouseEvent](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsByMouseEvent)

## Adding annotations

Adding new annotations is also done through the AnnotationManager with the [`addAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) or [`addAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotations) API. Be sure to check out how to [create annotations](/web/annotation/create-annotations.md) in our other guide.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
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),
});

annotationManager.addAnnotation(rect);
// Always redraw annotation if rendering was updated
annotationManager.redrawAnnotation(rect);
```

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.addAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotations) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation__anchor)

{% hint style="info" %}
When adding annotations or changing their properties directly, always call **redrawAnnotation** to rerender the annotation.
{% endhint %}

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-e9de61d733cda78e7c866e2af3f065b9ac4d755d%2F0aa998c7e679b3164a18abde746c906449538988-386x274.png?alt=media)

## Removing annotations

Like with adding annotations, the AnnotationManager provides the [`deleteAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deleteAnnotation) and [`deleteAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deleteAnnotations) APIs to delete annotations. You must have a reference to the annotation to use these methods.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

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

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.deleteAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deleteAnnotation) [AnnotationManager.deleteAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deleteAnnotations)

## Next steps

Now that you know how to add annotations, learn how to [create](/web/annotation/create-annotations.md) them!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/web/annotation/annotationmanager/annotationmanager.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.