---
title: "Add stamp annotation using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/annotations/stamps/"
md_url: "https://www.nutrient.io/guides/web/user-interface/annotations/stamps.md"
last_updated: "2026-05-28T17:47:04.489Z"
description: "Discover how to effectively use built-in stamps for web annotations. Enhance your projects with our easy-to-follow guide and practical tips."
---

# Adding stamp annotations in our JavaScript PDF viewer

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

[Launch demo](http://pspdfkit.com/demo/add-stamp-annotation/)

Nutrient Web SDK supports stamp annotation templates, which are [stamp](https://www.nutrient.io/api/web/NutrientViewer.Annotations.StampAnnotation.html) and [image annotations](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html) that can be selected and used repeatedly within a document.

The SDK includes a default set of these templates with predefined text, subtitles, colors, background colors and box shapes, or images.

## User interface

It’s possible to select a stamp annotation template from the stamp annotation template picker, which shows the current list of available stamp annotation templates. In spite of what the name suggests, it can hold both stamp annotations and image annotations.

It’s also possible to create a custom stamp annotation with personalized text and settings in the custom stamp editor.

You can access the stamp annotation templates UI via the Stamp button in the toolbar.

Navigating between both components is easy when using the top right button of the stamp annotation templates’ modal window.

## Default stamp annotation templates

By default, Nutrient Web SDK includes some out-of-the-box stamp annotation templates. These are available in the stamp picker UI:

- Approved

- NotApproved

- Draft

- Final

- Completed

- Confidential

- ForPublicRelease

- NotForPublicRelease

- ForComment

- Void

- PreliminaryResults

- InformationOnly

- Accepted _(tick)_

- Rejected _(cross)_

- InitialHere

- SignHere

- Witness

- RejectedWithText _(with localized date and time)_

- Revised _(with localized date and time)_

- Custom

> **Note:** Custom is a special stamp type that can have the text, color, and subtitle modified. The custom stamp editor UI allows your users to edit this text and add the current time and/or date as the subtitle.

## Modifying the stamp annotation templates

You can modify the list of stamp annotation templates and add the modified list to the configuration object passed to `NutrientViewer.load`:

### JAVASCRIPT

```js

var stampAnnotationTemplates = NutrientViewer.defaultStampAnnotationTemplates;
stampAnnotationTemplates.push(
  new NutrientViewer.Annotations.StampAnnotation({
    stampType: "Custom",
    title: "My custom text",

    subtitle: "my custom subtitle",
    color: new NutrientViewer.Color({ r: 0, g: 0, b: 64 }),
    boundingBox: new NutrientViewer.Geometry.Rect({
      left: 0,
      top: 0,
      width: 300,
      height: 100
    })
  })
);
NutrientViewer.load({ stampAnnotationTemplates: stampAnnotationTemplates });

```

### ES6+

```js

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

```

You can also do this at any moment by setting the current list of stamp annotation templates with [`Instance#setStampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setStampAnnotationTemplates):

### JAVASCRIPT

```js

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

```

### ES6+

```js

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

```
---

## Related pages

- [Adding contextual tooltips to annotations in viewer](/guides/web/customizing-the-interface/annotation-tooltips.md)
- [Customizing the annotation inspector in our viewer](/guides/web/user-interface/annotations/inspector.md)
- [Hide the delete button in the annotation toolbar](/guides/web/user-interface/annotations/hide-the-delete-button.md)
- [Customizing annotation variant buttons in the toolbar](/guides/web/user-interface/annotations/variant-buttons.md)
- [Mastering annotation presets in your PDF viewer](/guides/web/user-interface/annotations/presets.md)