HelpBot Assistant

How can I help you?

Redaction annotation in TypeScript PDF Viewer

13 Feb 20265 minutes to read

Redaction annotations permanently remove sensitive content from a PDF. You can draw redaction marks over text or graphics, redact entire pages, customize overlay text and styling, and apply redaction to finalize.

Toolbar with the Redaction tool highlighted

Add Redaction Annotation

Add redaction annotations in UI

  • Use the Redaction tool from the toolbar to draw over content to hide it.
  • Redaction marks can show overlay text (for example, “Confidential”) and can be styled.

Drawing a redaction annotation on the page

Redaction annotations are interactive:

  • Movable
    Moving a redaction annotation
  • Resizable
    Resizing a redaction annotation

You can also add redaction annotations from the context menu by selecting content and choosing Redact Annotation.

Context menu showing Redact Annotation option

NOTE

Ensure the Redaction tool is included in the toolbar. See RedactionToolbar for configuration.

Add redaction annotations programmatically

Use the addAnnotation method with the Redaction type to add redaction annotations programmatically.

<button id="addRedactAnnot">Add Redaction Annotation</button>
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
  });
});

Track additions using the annotationAdd event.

viewer.annotationAdd = (args) => {
  console.log('Annotation added:', args);
};

Edit Redaction Annotations

Edit redaction annotations in UI

Use the viewer to select, move, and resize Redaction annotations. Use the context menu for additional actions

Edit the properties of redaction annotations in UI

Use the property panel or context menu Properties to change overlay text, font, fill color, and more.

Redaction Property Panel Icon
Redaction Property Panel via Context Menu

Edit redaction annotations programmatically

Use editAnnotation to modify overlay text, colors, fonts, etc.

<button id="editRedactAnnotation">Edit Redact Annotation</button>
document.getElementById('editRedactAnnotation')?.addEventListener('click', () => {
  for (let i = 0; i < viewer.annotationCollection.length; i++) {
    if (viewer.annotationCollection[i].subject === 'Redaction') {
      viewer.annotationCollection[i].overlayText = 'EditedAnnotation';
      viewer.annotationCollection[i].markerFillColor = '#22FF00';
      viewer.annotationCollection[i].markerBorderColor = '#000000';
      viewer.annotationCollection[i].isRepeat = true;
      viewer.annotationCollection[i].fillColor = '#F8F8F8';
      viewer.annotationCollection[i].fontColor = '#333333';
      viewer.annotationCollection[i].fontSize = 14;
      viewer.annotationCollection[i].fontFamily = 'Symbol';
      viewer.annotationCollection[i].textAlign = 'Right';
      viewer.annotationCollection[i].beforeRedactionsApplied = false;
      viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
    }
  }
});

Delete redaction annotations

Delete in UI

  • Right-click and select Delete
    Context menu showing Delete for a redaction
  • Use the Delete button in the toolbar
    Toolbar delete icon for redaction
  • Press Delete key

Delete programmatically

Delete by id using deleteAnnotationById:

<button id="deleteAnnotationbyId">Delete Annotation By Id</button>
document.getElementById('deleteAnnotationbyId')?.addEventListener('click', () => {
  viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
});

Redact pages

Redact pages in UI

Use the Redact Pages dialog to mark entire pages:

Page Redaction Panel

Options include Current Page, Odd Pages Only, Even Pages Only, and Specific Pages.

Add page redactions programmatically

<button id="addPageRedactions">Add Page Redaction</button>
document.getElementById('addPageRedactions')?.addEventListener('click', () => {
  viewer.annotation.addPageRedactions([1, 3, 5, 7]);
});

Apply redaction

Apply redaction in UI

Click Apply Redaction to permanently remove marked content.

Redact Button Icon
Apply Redaction Dialog

NOTE

Redaction is permanent and cannot be undone.

Apply redaction programmatically

<button id="redact">Apply Redaction</button>
document.getElementById('redact')?.addEventListener('click', () => {
  viewer.annotation.redact();
});

NOTE

Applying redaction is irreversible.

Default redaction settings during initialization

Configure defaults with redactionSettings:

viewer.redactionSettings = {
  overlayText: 'Confidential',
  markerFillColor: '#FF0000',
  markerBorderColor: '#000000',
  isRepeat: false,
  fillColor: '#F8F8F8',
  fontColor: '#333333',
  fontSize: 14,
  fontFamily: 'Symbol',
  textAlign: 'Right'
};

View Sample on GitHub

See also