---
title: "Effective annotation event management"
canonical_url: "https://www.nutrient.io/guides/web/events/annotation/"
md_url: "https://www.nutrient.io/guides/web/events/annotation.md"
last_updated: "2026-06-09T10:25:14.536Z"
description: "Seamlessly manage annotation events in your web app with our APIs for loading, updating, and deleting annotations."
---

# Manage annotations effectively with our API

In addition to managing annotations with the [create, update, and delete APIs](https://www.nutrient.io/../../annotations/introduction-to-annotations/), we also provide events that let you intercept annotation changes made through the user interface (UI) or synced from the server.

| Event                        | Use case                                                                                 |
| ---------------------------- | ---------------------------------------------------------------------------------------- |
| [`annotations.load`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsLoadEvent)       | Triggered when annotations are loaded from the document.                                 |
| [`annotations.willChange`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsWillChangeEvent) | Triggered before a user modifies an annotation through the UI (for example, by drawing). |
| [`annotations.change`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsChangeEvent)     | Triggered when annotations change due to a user action or API call.                      |
| [`annotations.create`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsCreateEvent)     | Triggered when new annotations are created.                                              |
| [`annotations.update`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsUpdateEvent)     | Triggered when existing annotations are updated.                                         |
| [`annotations.delete`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#~AnnotationsDeleteEvent)     | Triggered when annotations are deleted.                                                  |

### JAVASCRIPT

```js

instance.addEventListener("annotations.load", loadedAnnotations => {
  console.log(loadedAnnotations);
});
instance.addEventListener("annotations.willChange", event => {
  if (event.reason === NutrientViewer.AnnotationsWillChangeReason.DRAW_START) {
    console.log("The user is drawing...");
  }
});
instance.addEventListener("annotations.change", () => {
  console.log("Something in the annotations has changed.");
});
instance.addEventListener("annotations.create", createdAnnotations => {
  console.log(createdAnnotations);
});
instance.addEventListener("annotations.update", updatedAnnotations => {
  console.log(updatedAnnotations);
});
instance.addEventListener("annotations.delete", deletedAnnotations => {
  console.log(deletedAnnotations);
});

```
---

## Related pages

- [Subscribe or unsubscribe to API events](/guides/web/customizing-the-interface/observing-changes-with-events.md)
- [Manage bookmarks efficiently with event-driven updates](/guides/web/events/bookmarks.md)
- [Forms](/guides/web/events/forms.md)
- [Events and notifications in our JavaScript viewer](/guides/web/events.md)
- [Text Selection](/guides/web/events/text-selection.md)