> 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/annotation-selection.md).

# Working with annotation selection using the AnnotationManager

Learn how to efficiently work with annotation selection using the AnnotationManager. Select, deselect, and jump to annotations easily for a seamless viewer experience using web. The Apryse Web SDK str

Annotation selection is intuitively understood as selecting and/or clicking on a visible annotation in the viewer. The [`AnnotationManager`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html) allows you to get the selected annotations at any point in time. This could be helpful in serializing only selected annotations after pressing a button.

The AnnotationManager can also be used to select and deselect annotations. This may be helpful to batch select annotations and bring them into attention in the viewer for a review process.

{% hint style="info" %}
When annotations are selected or deselected, whether through the viewer or programmatically, this will trigger the [**annotationsSelected**](/web/events/events.md#annotationselected) event on the AnnotationManager.
{% endhint %}

## Getting selected annotations

Aside from the [`annotationSelected`](/web/events/events.md#annotationselected) event, the AnnotationManager provides the [`getSelectedAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getSelectedAnnotations) API that can be called on demand instead of hooking into an event.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
// Save Button in HTML

<button onclick="saveXFDF()">Save XFDF</button>

// JavaScript
const { annotationManager } = instance.Core;

async function saveXFDF() {
  const selected = annotationManager.getSelectedAnnotations();
  const xfdf = await annotationManager.exportAnnotations({ annotationList: selected });
  // Save XFDF
}
```

{% endcode %}

[AnnotationManager.getSelectedAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getSelectedAnnotations)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
// Save Button in HTML
<button onclick="saveXFDF()">Save XFDF</button>

// JavaScript
const { annotManager } = instance;

async function saveXFDF() {
  const selected = annotManager.getSelectedAnnotations();
  const xfdf = await annotManager.exportAnnotations({ annotList: selected });
  // Save XFDF
}
```

{% endcode %}

[AnnotationManager.getSelectedAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getSelectedAnnotations)
{% endtab %}
{% endtabs %}

## Selecting annotations

Selecting annotations through the AnnotationManager is done using either the [`selectAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotation) or [`selectAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotations) APIs.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

// Select all the annotations on the first page when annotations first load
documentViewer.addEventListener('annotationsLoaded', () => {
  const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
  annotationManager.selectAnnotations(annots);
});
```

{% endcode %}

[AnnotationManager.selectAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotation) [AnnotationManager.selectAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotations)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { docViewer, annotManager } = instance;

// Select all the annotations on the first page when annotations first load
docViewer.on('annotationsLoaded', () => {
  const annots = annotManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
  annotManager.selectAnnotations(annots);
});
```

{% endcode %}

[AnnotationManager.selectAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotation) [AnnotationManager.selectAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#selectAnnotations)
{% endtab %}
{% endtabs %}

## Deselecting annotations

Deselecting annotations can be done in a similar way using the [`deselectAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotation) and [`deselectAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotations) APIs. This could be potentially used to deselect certain annotations after selecting a group of annotations.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

// Immediately deselect any FreeText annotations that become selected
annotationManager.addEventListener('annotationSelected', (annotations, action) => {
  const freetextAnnots = annotations.filter(annot => annot instanceof Annotations.FreeTextAnnotation);
  annotationManager.deselectAnnotations(freetextAnnots);
});
```

{% endcode %}

[AnnotationManager.deselectAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotation) [AnnotationManager.deselectAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotations)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager, Annotations } = instance;

// Immediately deselect any FreeText annotations that become selected
annotManager.on('annotationSelected', (annotations, action) => {
  const freetextAnnots = annotations.filter(annot => annot instanceof Annotations.FreeTextAnnotation);
  annotManager.deselectAnnotations(freetextAnnots);
});
```

{% endcode %}

[AnnotationManager.deselectAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotation) [AnnotationManager.deselectAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAnnotations)
{% endtab %}
{% endtabs %}

Alternatively, you can use [`deselectAllAnnotations`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#deselectAllAnnotations) to deselect all selected annotations.

## Jumping to annotations

When selecting an annotation via the notes panel, you will notice that the viewer will jump to the selected annotation. This can be triggered with the [`jumpToAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#jumpToAnnotation) API on the AnnotationManager. You can then use this API to focus on certain selected annotations or simply jumping to an annotation after creation.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

annotationManager.addEventListener('annotationSelected', (annotations, action) => {
  if (action === 'selected') {
    // Jumps to the first annotation in the selection when a selection is performed
    annotationManager.jumpToAnnotation(annotations[0]);
  }
});
```

{% endcode %}

[AnnotationManager.jumpToAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#jumpToAnnotation)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { annotManager } = instance;

annotManager.addEventListener('annotationSelected', (annotations, action) => {
  if (action === 'selected') {
    // Jumps to the first annotation in the selection when a selection is performed
    annotManager.jumpToAnnotation(annotations[0]);
  }
});
```

{% endcode %}

[AnnotationManager.jumpToAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#jumpToAnnotation)
{% endtab %}
{% endtabs %}

## Next steps

You can customize how selection models look and work on annotations. See how you can customize it in our [custom annotation guide](/web/annotation/customize/custom-annotations.md).


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.