HelpBot Assistant

How can I help you?

Redaction UI interactions in React PDF Viewer

4 Mar 20265 minutes to read

Overview

This guide explains how to use the Redaction UI in the Syncfusion React PDF Viewer: drawing redaction marks, customizing their appearance, deleting marks, redacting whole pages, and applying redaction. The page provides step-by-step UI instructions to redact a PDF.

Prerequisites

  • A React project with PDF Viewer added to it. See getting started guide
  • The EJ2 React PDF Viewer version you use must include the Redaction feature.

Steps

  1. Enable the Redaction tool

  2. Add a redaction annotation from the toolbar

    • Select the Redaction tool in the toolbar, then draw a rectangle over the text or graphics to hide.

      Drawing a redaction annotation on the page

  3. Add a redaction annotation from the context menu

    • Select text or region, right‑click (or long‑press on mobile), and choose Redact Annotation.

      Context menu showing Redact Annotation option

  4. Move or resize a redaction annotation

    • Drag to move the box

      Moving a redaction annotation

    • Drag the handles to resize.

      Resizing a redaction annotation

  5. Update redaction properties using the property panel

    • Select an annotation and open the Property Panel from the toolbar icon or choose Properties from the context menu.

      Redaction Property Panel Icon

      Redaction Property Panel via Context Menu

    • General tab: set Overlay Text, Repeat Overlay Text, font, and final Fill Color (these values are used when you apply redaction).

      Overlay Text Options

      Fill Color in General Tab

    • Appearance tab: style the temporary annotation (fill, outline, opacity).

      Appearance Tab Settings

  6. Delete a redaction annotation

    • Right‑click the annotation and select Delete, press the Delete key, or click the toolbar Delete button.

      Context menu showing Delete for a redaction

      Toolbar delete icon for redaction

  7. Redact pages using the UI

    • Use Redact Pages from the toolbar to mark whole pages (Current, Odd, Even, or Specific page ranges). Click Save to apply page marks.

      Page Redaction Panel

  8. Apply redaction

    • Click Apply Redaction in the toolbar or select Apply redactions in context menu to permanently remove marked content.

      Redact Button Icon

      Redact option in context menu

    • A confirmation dialog appears before changes are flattened.

      Apply Redaction Dialog

    • After applying: the selected content is permanently removed, overlay text (if enabled) is burned in, and properties become read‑only.

Troubleshooting

  • Redaction tool not visible: ensure you added RedactionEditTool to toolbarSettings.toolbarItems and injected required services.
  • Apply Redaction disabled: there are no redaction annotations present; add at least one mark.
  • Final redacted content not editable: this is expected — applied redaction flattens content and becomes read‑only. Keep a backup of the original file before applying.