PDF Redaction Toolbar

"use client";

import { createPluginRegistration } from "@embedpdf/core";

About#

Redaction happens in two steps. Marking is reversible — a mark is a pending item you can clear or add to. Applying is not. It rewrites the affected pages, and the content underneath stops existing: it can't be copied, searched, or extracted afterwards.

<PdfRedactionToolbar /> covers both steps: a mode toggle for marking, a Clear button, and an Apply button that counts what's pending and confirms before it runs.

Redaction is a heavy-tier plugin, so <PdfViewer /> does not register it for you. The plugin and the layer that draws the marks both have to be added — see Usage.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/redaction-toolbar
Copy

Usage#

Copyimport { createPluginRegistration } from "@embedpdf/core";
import { RedactionPluginPackage } from "@embedpdf/plugin-redaction/react";
 
// Outside the component — a new array identity on every render tears the
// engine down and rebuilds it, losing scroll and zoom state.
const plugins = [
  createPluginRegistration(RedactionPluginPackage, { drawBlackBoxes: true }),
];

Copy<PdfViewer
  documents={[{ url: "/sample.pdf" }]}
  plugins={plugins}
  className="h-[720px]"
>
  <PdfToolbar>
    <PdfRedactionToolbar />
  </PdfToolbar>
  <PdfViewerContent
    pageLayers={({ documentId, pageIndex }) => (
      <RedactionLayer documentId={documentId} pageIndex={pageIndex} />
    )}
  />
</PdfViewer>

Without the layer, marks are still tracked and the count still climbs — they just aren't drawn, which makes marking impossible to aim. The toolbar and the layer are two halves of the same feature.

Examples#

Default#

"use client";

import { createPluginRegistration } from "@embedpdf/core";

Marking modes#

Two modes are offered, and they map to how the region is chosen rather than to what applying does:

• Mark text selects text the way a cursor does, and redacts what the selection covers. Use it when the content is text and you want the mark to follow the words.
• Mark area drags a rectangle, ignoring what's underneath. Use it for images, signatures, or scanned pages with no text layer.

The plugin has a third, unified mode that accepts both at once, but it depends on the annotation plugin being registered too. This toolbar deliberately doesn't offer it, so it works with redaction registered alone.

When editing is disabled#

Applying a redaction rewrites the page contents, so the whole toolbar reads the active document's modify-contents permission and disables itself — with a tooltip explaining why — when the flag is denied. The demo below forces the flag off with a permissions override; a real document carries it in its own flags. See Permissions for the full model.

"use client";

import { createPluginRegistration } from "@embedpdf/core";

Accessibility#

The mode toggle is a <ToggleGroup />, so arrow keys move between modes and the armed mode is exposed through its pressed state rather than colour alone. Both modes carry an aria-label matching their tooltip.

Applying is behind an <AlertDialog />, which moves focus to the dialog and traps it there until the user chooses — so a destructive action can't be triggered by a stray keypress on a focused button. The dialog's description states what is lost, not just that the action is permanent.

Marking a region requires a pointer; there is no keyboard equivalent for selecting text or dragging an area on the page.

API Reference#

PdfRedactionToolbar#

A div carrying data-slot="pdf-redaction-toolbar", holding the mode toggle, Clear, and Apply. Accepts every div prop.

Returns null when the document isn't loaded or the redaction plugin isn't registered.

Clear and Apply are disabled while nothing is pending, and while an apply is in flight — applying a long document rewrites every affected page, so Apply shows a spinner rather than appearing to do nothing.