---
title: "PDF stamp annotation using JavaScript | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/features/stamp-annotation-templates/"
md_url: "https://www.nutrient.io/guides/web/features/stamp-annotation-templates.md"
last_updated: "2026-06-08T14:31:27.884Z"
description: "Explore our guide on built-in stamps for annotations, enhancing your web projects with efficient tools and techniques for better clarity and organization."
---

# Adding stamp annotations to PDFs using JavaScript

[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

- [Customizing stamp annotations](/guides/web/annotations/stamp-annotation-configuration.md)