PDF Undo/Redo Buttons

"use client";

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

About#

Undo and redo buttons for a document's edit history. Each is disabled when its stack is empty, and both stay disabled until an editing tool records something to undo.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/undo-redo
Copy

Usage#

Copyimport { PdfUndoRedoButtons } from "@/components/pdf-undo-redo";

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <PdfToolbar>
    <PdfAnnotationToolbar />
    <PdfToolbarSeparator />
    <PdfUndoRedoButtons />
  </PdfToolbar>
  <PdfViewerContent />
</PdfViewer>

<PdfUndoRedoButtons /> reads the active document from <PdfViewer />, so it works anywhere inside the tree — not only in a <PdfToolbar />.

History records document edits, so both buttons stay disabled until an editing tool registers a command — in practice, the heavy-tier annotation or redaction tools. There's no point adding this control to a read-only viewer.

History is also the one plugin with no reactive hook, only a change event. The component bridges that event into React with useSyncExternalStore; if you build your own history UI, subscribe the same way rather than polling canUndo.

Examples#

Default#

"use client";

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

Accessibility#

Both controls are native <button>s with an aria-label — Undo and Redo — matching their tooltip, so the label is available whether or not the tooltip is shown. Each is disabled rather than hidden when its stack is empty, keeping tab order stable as edits come and go.

API Reference#

PdfUndoRedoButtons#

A <div> with data-slot="pdf-undo-redo-buttons" wrapping the undo and redo buttons, driven by the history plugin's change event. Accepts every div prop.