Redaction in JavaScript (ES6) PdfViewer

5 Dec 20254 minutes to read

Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.

Enable the redaction toolbar

To enable the redaction toolbar, configure the toolbarSettings.toolbarItems property of the PdfViewer instance to include the RedactionEditTool.

The following example shows how to enable the redaction toolbar:

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
    toolbarSettings: {
        toolbarItems: [
            'OpenOption',
            'UndoRedoTool',
            'PageNavigationTool',
            'MagnificationTool',
            'PanTool',
            'SelectionTool',
            'CommentTool',
            'SubmitForm',
            'AnnotationEditTool',
            'RedactionEditTool',   // Enables Redaction toolbar
            'FormDesignerEditTool',
            'SearchOption',
            'PrintOption',
            'DownloadOption'
        ]
    }
});

viewer.appendTo('#pdfViewer');

NOTE

Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.

Toolbar with the Redaction tool highlighted

Add Redaction Annotations

You can mark specific content for redaction using the toolbar or through code.

Select the Redaction tool and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity.

Drawing a redaction region over page content

Delete Redaction Annotations

Redaction annotations can be removed easily:

  • Click the Delete button on the toolbar, or
  • Select the annotation and press the Delete key.

Toolbar showing the Delete command for redaction

Redact Entire Pages

The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically.

Toolbar showing the Redact Page option

Apply Redaction

Once annotations are added, you can permanently apply them to the document. This action cannot be undone.

Use the Apply Redaction button on the toolbar or call the API method:

  • The button is disabled until at least one redaction annotation exists.
  • It becomes active when redaction annotations are present.

Toolbar showing the Apply Redaction button

A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.

Confirmation dialog for applying redaction

NOTE

After redaction is applied, the original content cannot be recovered.

Comment Support

Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction.

Comments can be added through the UI or API. For more details, see the Comments documentation.

Import and Export Redaction Annotations

You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions.

For more details, see the Export and import annotations documentation.

See also