Customize annotation selectors in TypeScript PDF Viewer

16 Feb 20261 minute to read

Customize the annotation selector using the annotationSelectorSettings property of the PDF Viewer.

Example: Customize the selector of a shape annotation

 <button id="annotationSelector">annotationSelector</button>

document.getElementById('annotationSelector').addEventListener('click', () => {
  viewer.rectangleSettings.annotationSelectorSettings.resizerShape = 'Circle';
  viewer.annotationModule.editAnnotation(viewer.annotationCollection[0]);
});

The resizerShape property accepts values such as Circle or Square to change the appearance of the annotation resize handles. The example assumes at least one annotation exists; to avoid errors, verify viewer.annotationCollection.length > 0 before calling editAnnotation.

Sample: How to customize the annotation selector

Accessibility: Use descriptive button labels and add an aria-label when a button uses an icon-only label. Ensure the toolbar or control used to trigger selector changes is reachable by keyboard navigation.