---
title: "JavaScript image annotation library | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/annotations/annotate-on-images/create-edit-and-remove/"
md_url: "https://www.nutrient.io/guides/web/annotations/annotate-on-images/create-edit-and-remove.md"
last_updated: "2026-05-30T02:20:01.385Z"
description: "Learn how to add annotations on images using JavaScript. Discover step-by-step guidance to enhance interactivity and improve user experience."
---

# Adding annotations to images using JavaScript

This guide shows you how to annotate images in Nutrient Web SDK. The process involves converting an image to a PDF, configuring annotation tools and the user interface (UI) to display only relevant options, and extracting the image data upon saving.

[Try for free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch demo](https://www.nutrient.io/demo/image-viewer)

This feature requires the [**Image Documents**](https://www.nutrient.io/sdk/features-list/) component to be enabled in your license.

## Loading image documents

To load an image as a document in Nutrient Web SDK, use the [`PSPDFKit#load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load) method. You can pass a blob, an array buffer, or a URL to the `document` option, and the SDK will treat the image as a PDF document:

```js

NutrientViewer.load({
  document: image
});

```

For more information on loading options, see our guides on [importing a PDF document](https://www.nutrient.io/guides/web/open-a-document.md#guides-for-opening-a-document).

## Adding images as annotations

You can annotate images using the annotation API provided by the SDK. Below is an example of how to create an image annotation and add it to a document:

```js

const request = await fetch("https://example.com/image.jpg");
const blob = await request.blob();
const imageAttachmentId = await instance.createAttachment(blob);
const annotation = new NutrientViewer.Annotations.ImageAnnotation({
  pageIndex: 0, // The page to place the annotation on.
  isSignature: true, // Indicates this is a signature annotation.
  contentType: "image/jpeg", // MIME type of the image.
  imageAttachmentId, // Reference to the attached image.
  description: "Example Image Annotation", // Annotation description.
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 10, // Left coordinate.
    top: 20, // Top coordinate.
    width: 150, // Annotation width.
    height: 150 // Annotation height.
  })
});

instance.create(annotation);

```

The example above fetches an image, attaches it to the document, and places it on the specified page. For more details on creating annotations, refer to the guide on how to [create PDF annotations](https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/create.md).

## Exporting image documents

Once your annotations are complete, you can export the image document as a PDF using the [`Instance#exportPDF()`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#exportPDF) method. This enables you to download the file, as explained in the [save a document to local storage](https://www.nutrient.io/guides/web/save-a-document/to-local-storage.md) guide.
---

## Related pages

- [Enhance your image annotation experience effortlessly](/guides/web/annotations/annotate-on-images/specification.md)