Create and modify annotations

14 Jan 20264 minutes to read

Use the PDF Viewer annotation tools to add, edit, and manage markups across your documents. This page provides a quick overview with convenient navigation to each annotation type and common ways to create and modify annotations.

Quick navigation to annotation types

Jump directly to a specific annotation type for detailed usage and examples:

TextMarkup Annotations:

Shape Annotations:

Measurement Annotations:

Other Annotations:

NOTE

Each annotation type page includes both UI steps and programmatic examples specific to that type.

Create annotations

Create via UI

  • Open the annotation toolbar in the PDF Viewer.
  • Choose the required tool (for example, Shape, Free Text, Ink, Stamp, Redaction).
  • Click or drag on the page to place the annotation.

Annotation toolbar

Notes:

  • When pan mode is active and you select a shape or stamp tool, the viewer switches to text select mode automatically.
  • Property pickers in the annotation toolbar let you choose color, stroke color, thickness, and opacity while drawing.

Create programmatically

Creation patterns vary slightly by type. Refer to the type pages above for tailored code. Example: creating a Redaction annotation using addAnnotation.

<button id="addRedactAnnot">Add Redaction Annotation</button>
// Requires a PdfViewer instance named `viewer`
document.getElementById('addRedactAnnot')?.addEventListener('click', () => {
  viewer.annotation.addAnnotation('Redaction', {
    bound: { x: 200, y: 480, width: 150, height: 75 },
    pageNumber: 1,
    markerFillColor: '#0000FF',
    markerBorderColor: 'white',
    fillColor: 'red',
    overlayText: 'Confidential',
    fontColor: 'yellow',
    fontFamily: 'Times New Roman',
    fontSize: 8,
    beforeRedactionsApplied: false
  });
});

See the individual annotation pages (links above) for enabling draw modes from UI buttons and other type-specific creation samples.

Modify annotations

Modify via UI

Use the annotation toolbar after selecting an annotation:

  • Edit Color: change the fill or text color (when applicable)
    Edit color
  • Edit Stroke Color: change the border/line color (shape and line types)
    Edit stroke color
  • Edit Thickness: adjust the border/line thickness
    Edit thickness
  • Edit Opacity: change transparency
    Edit opacity

Additional options such as Line Properties (for line/arrow) are available from the context menu (right-click > Properties) where supported.

Modify programmatically

Use editAnnotation to apply changes to an existing annotation. Common flow:

  • Locate the target annotation from annotationCollection
  • Update the desired properties
  • Call editAnnotation with the modified object
<button id="bulkEdit">Bulk edit matching annotations</button>
// Example: change color/opacity for matching annotations
// Requires a PdfViewer instance named `pdfviewer`
document.getElementById('bulkEdit')?.addEventListener('click', () => {
  for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
    const ann = pdfviewer.annotationCollection[i];
    // Example match: author/subject; customize the condition as needed
    if (ann.author === 'Guest User' || ann.subject === 'Corrections') {
      ann.color = '#ff0000';
      ann.opacity = 0.8;
      pdfviewer.annotation.editAnnotation(ann);
    }
  }
});

NOTE

For type-specific edit examples (for example, editing line endings, moving stamps, or updating sticky note bounds), see the corresponding annotation type page linked above.

See also