---
title: "Edit PDF annotations using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/edit/"
md_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/edit.md"
last_updated: "2026-05-21T20:35:01.073Z"
description: "In addition to an API for creating annotations, we also provide an API for updating those annotations directly on the client."
---

# Edit PDF annotations using JavaScript

In addition to an API for creating annotations, we also provide an API for updating those annotations directly on the client. Following the optimistic UI approach, the changes will be instantly visible in the UI, but they aren’t persisted until the annotations are saved.

To update annotations, use [`Instance#update`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#update). Try this example in the [Playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImJhc2ljLnBkZiJ9LCJqcyI6Ik51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG59KS50aGVuKGFzeW5jIChpbnN0YW5jZSkgPT4ge1xuICAvLyBGaXJzdCBjcmVhdGUgYW4gYW5ub3RhdGlvbiB0byBlZGl0XG4gIGNvbnN0IHsgUmVjdCB9ID0gTnV0cmllbnRWaWV3ZXIuR2VvbWV0cnk7XG4gIGNvbnN0IGFubm90YXRpb24gPSBuZXcgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuUmVjdGFuZ2xlQW5ub3RhdGlvbih7XG4gICAgcGFnZUluZGV4OiAwLFxuICAgIGJvdW5kaW5nQm94OiBuZXcgUmVjdCh7IGxlZnQ6IDUwLCB0b3A6IDUwLCB3aWR0aDogMjAwLCBoZWlnaHQ6IDEwMCB9KSxcbiAgICBzdHJva2VDb2xvcjogTnV0cmllbnRWaWV3ZXIuQ29sb3IuQkxVRSxcbiAgICBmaWxsQ29sb3I6IE51dHJpZW50Vmlld2VyLkNvbG9yLkxJR0hUX0JMVUUsXG4gICAgbGluZVdpZHRoOiAyXG4gIH0pO1xuICBhd2FpdCBpbnN0YW5jZS5jcmVhdGUoYW5ub3RhdGlvbik7XG5cbiAgLy8gTm93IHJldHJpZXZlIGFuZCB1cGRhdGUgdGhlIGFubm90YXRpb25cbiAgY29uc3QgYW5ub3RhdGlvbnMgPSBhd2FpdCBpbnN0YW5jZS5nZXRBbm5vdGF0aW9ucygwKTtcbiAgY29uc3QgZmlyc3RBbm5vdGF0aW9uID0gYW5ub3RhdGlvbnMuZ2V0KDApO1xuICBjb25zdCB1cGRhdGVkQW5ub3RhdGlvbiA9IGZpcnN0QW5ub3RhdGlvbi5zZXQoXCJvcGFjaXR5XCIsIDAuNSk7XG4gIGF3YWl0IGluc3RhbmNlLnVwZGF0ZSh1cGRhdGVkQW5ub3RhdGlvbik7XG5cbiAgY29uc29sZS5sb2coXCJBbm5vdGF0aW9uIHVwZGF0ZWQgd2l0aCA1MCUgb3BhY2l0eS5cIik7XG59KTsiLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuXHQifQ==):

```js

NutrientViewer.load(configuration).then(async (instance) => {
    try {
      const annotations = await instance.getAnnotations(0);
      console.log(`Found ${annotations.size} annotations`);

      if (annotations.size === 0) {
        console.warn("No annotations found on page 0");
        return;
      }

      const annotation = annotations.get(0);
      const updatedAnnotation = annotation.set("opacity", 0.5);
      await instance.update(updatedAnnotation);
      console.log("Annotation updated.");
    } catch (error) {
      console.error("Failed to update annotation:", error.message);
    }
  }).catch((error) => {
    console.error("Failed to load NutrientViewer:", error.message);
  });

```

Once annotations have been edited, they’ll need to be persisted. This is done by saving them. [Save them to external storage](https://www.nutrient.io/guides/web/annotations/save/to-external-storage.md) or [embed them into the document](https://www.nutrient.io/guides/web/annotations/save/embed-into-pdf.md). They can also be exported to [XFDF](https://www.nutrient.io/guides/web/importing-exporting/xfdf-support.md) or [Instant JSON](https://www.nutrient.io/guides/web/importing-exporting/instant-json.md). If you’re using Web SDK with Document Engine, they can be [synced with the backend](https://www.nutrient.io/guides/web/annotations/import-and-export/server-backed.md).
---

## Related pages

- [Add image annotations to PDFs using JavaScript](/guides/web/annotations/create-edit-and-remove/add-image.md)
- [Defining the author of an annotation](/guides/web/annotations/annotation-author-name.md)
- [Annotation flags](/guides/web/annotations/annotation-flags.md)
- [Create PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/create.md)
- [Detect changes in annotations](/guides/web/annotations/detecting-if-annotations-have-changed.md)
- [Cut, copy, paste, and duplicate annotations in PDF using JavaScript](/guides/web/annotations/create-edit-and-remove/cut-copy-duplicate.md)
- [Select PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/multiple-selection.md)
- [Customizing annotation permissions](/guides/web/annotations/create-edit-and-remove/permissions.md)
- [Remove PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/remove.md)
- [Rich text in PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/rich-text.md)
- [Undo and redo annotations](/guides/web/annotations/create-edit-and-remove/undo-redo.md)