Redaction annotation in JavaScript PDF Viewer

14 Jan 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 annotation in UI

  • Use the Redaction tool from the toolbar to draw over content to hide.
  • 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 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 RedactionToolbarfor configuration.

Add a redaction annotation programmatically

Use the addAnnotation method with the Redaction type.

<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 Annotation

Edit redaction annotation in UI

You can select, move, and resize Redaction annotations directly in the viewer. 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 a redaction annotation 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