This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/annotations/stamp-annotation-configuration.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Customizing PDF stamp annotations using JavaScript | Nutrient

Customizing stamp annotations

Markdown version of this page, suitable for AI agents and automation
Try for free Launch demo

To change the default stamp annotation templates available in the stamp picker UI, modify NutrientViewer.defaultStampAnnotationTemplates and pass the modified Array in the NutrientViewer.load function call:

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 });

As of 1.16.0, StampAnnotation also supports:

  • Multiline text via multiline
  • Custom font styling via font, fontSize, fontColor, isBold, and isItalic
  • Embedded images via imageAttachmentId and imageContentType
  • Image placement within the stamp text flow via imagePosition

Get the current list of stamp annotation templates available in a loaded instance from Instance#stampAnnotationTemplates.

Stamp picker dialog with a custom set of default stamps

Change the default stamp size

The size of a stamp placed from the stamp picker comes from the boundingBox of the stamp annotation template the user selects. Annotation presets don’t set this size. A boundingBox on the stamp preset, set through the annotationPresets configuration option or the Instance#setAnnotationPresets method, has no effect on the stamp size.

To change the size, scale the boundingBox of each template and pass the templates as stampAnnotationTemplates in the NutrientViewer.load function call. This example halves the width and height of the boundingBox of every default template:

var stampAnnotationTemplates = NutrientViewer.defaultStampAnnotationTemplates.map(
  function(template) {
    // Halve the width and height of the template, keeping its proportions.
    return template.set("boundingBox", template.boundingBox.scale(0.5));
  }
);


NutrientViewer.load({
  container: "#pspdfkit",
  document: "document.pdf",
  stampAnnotationTemplates: stampAnnotationTemplates
})
  .then(function(instance) {
    console.log("Nutrient Web SDK loaded", instance);
  })
  .catch(function(error) {
    console.error(error.message);
  });

To resize the templates of a loaded instance instead of at load time, map over the current templates with the Instance#setStampAnnotationTemplates method:

instance.setStampAnnotationTemplates(function(stampAnnotationTemplates) {
  return stampAnnotationTemplates.map(function(template) {
    // Halve the width and height of the template, keeping its proportions.
    return template.set("boundingBox", template.boundingBox.scale(0.5));
  });
});

For more information on adding and replacing templates, see modifying the stamp annotation templates.

Add image annotations to the stamp annotation templates

Nutrient supports stamp annotation templates generated from an image annotation. These annotations are still image annotations, but they can be added to the stamp picker UI as well:

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;
      });
    });
  });