---
title: "Customizing PDF stamp annotations using JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/annotations/stamp-annotation-configuration/"
md_url: "https://www.nutrient.io/guides/web/annotations/stamp-annotation-configuration.md"
last_updated: "2026-05-21T13:28:30.053Z"
description: "To change the default stamp annotation templates available in the stamp picker UI, modify NutrientViewer.defaultStampAnnotationTemplates."
---

# Customizing stamp annotations

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

[Launch demo](https://www.nutrient.io/demo/add-stamp-annotation/)

To change the [default stamp annotation templates](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultStampAnnotationTemplates) available in the stamp picker UI, modify [`NutrientViewer.defaultStampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultStampAnnotationTemplates) and pass the modified `Array` in the `NutrientViewer.load` function call:

### JAVASCRIPT

```js

var stampAnnotationTemplates = NutrientViewer.defaultStampAnnotationTemplates;
stampAnnotationTemplates.push(
  new NutrientViewer.Annotations.StampAnnotation({
    stampType: "Custom",
    title: "My custom text",
    color: new NutrientViewer.Color({ r: 0, g: 0, b: 64 }),
    subtitle: "my custom subtitle",
    boundingBox: new NutrientViewer.Geometry.Rect({
      left: 0,
      top: 0,
      width: 300,
      height: 100
    })
  })
);
NutrientViewer.load({ stampAnnotationTemplates: stampAnnotationTemplates });

```

### ES6+

```js

const stampAnnotationTemplates = NutrientViewer.defaultStampAnnotationTemplates;
const stampAnnotationTemplates.push(new NutrientViewer.Annotations.StampAnnotation({
  stampType: "Custom",
  title: "My custom text",
  color: new NutrientViewer.Color({ r: 0, g: 0, b: 64 }),
  subtitle: "my custom subtitle",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 0,
    top: 0,
    width: 300,
    height: 100
  })
}));
NutrientViewer.load({ stampAnnotationTemplates });

```

Get the current list of stamp annotation templates available in a loaded instance from [`Instance#stampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#stampAnnotationTemplates).![Stamp picker dialog with a custom set of default stamps](https://www.nutrient.io/@/assets/guides/web/annotations/picker-custom.png)

## Add image annotations to the stamp annotation templates

Nutrient supports stamp annotation templates generated from an [image annotation](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html). These annotations are still image annotations, but they can be added to the stamp picker UI as well:

### JAVASCRIPT

```js

var imageURL = "https://example.com/image.png";
fetch(imageURL).then(function(response) {
    return response.blob();
  }).then(function(file) {
    instance.createAttachment(file).then(function(imageAttachmentId) {
      var imageAnnotation = new NutrientViewer.Annotations.ImageAnnotation({
        imageAttachmentId: imageAttachmentId,
        contentType: "image/png",
        description: "Example",
        boundingBox: new NutrientViewer.Geometry.Rect({
          width: 300,
          height: 200,
          top: 0,
          left: 0
        })
      });
      instance.setStampAnnotationTemplates(function(stampAnnotationTemplates) {
        stampAnnotationTemplates.push(imageAnnotation);
        return stampAnnotationTemplates;
      });
    });
  });

```

### ES6+

```js

(async () => {
  const imageURL = "https://example.com/image.png";
  const file = await fetch(imageURL).then(response => response.blob());
  const imageAttachmentId = await instance.createAttachment(file);
  const imageAnnotation = new NutrientViewer.Annotations.ImageAnnotation({
    imageAttachmentId,
    contentType: "image/png",
    description: "Example",
    boundingBox: new NutrientViewer.Geometry.Rect({
      width: 300,
      height: 200,
      top: 0,
      left: 0
    })
  });
  instance.setStampAnnotationTemplates(stampAnnotationTemplates => [...stampAnnotationTemplates,
    imageAnnotation
  ]);
})();

```
---

## Related pages

- [Adding stamp annotations to PDFs using JavaScript](/guides/web/features/stamp-annotation-templates.md)