Undo and Redo Annotations in React PDF Viewer

14 Aug 20262 minutes to read

The PDF Viewer supports undo and redo for annotations.

Undo-redo

Undo and redo actions can be performed using either of the following methods:

  1. Using keyboard shortcuts (desktop):
    After performing an annotation action, press Ctrl+Z to undo and Ctrl+Y to redo on Windows and Linux. On macOS, use Command+Z to undo and Command+Shift+Z to redo.
  2. Using the toolbar:
    Use the Undo and Redo tools in the toolbar.

Refer to the following code snippet to call undo and redo actions from the client side.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';

function getViewer() { return document.getElementById('container').ej2_instances[0]; }

function undoAnnotation() {
  getViewer().undo();
}

function redoAnnotation() {
  getViewer().redo();
}

function App() {
  return (
    <>
      <div style={{ marginBottom: '8px', display: 'flex', gap: '8px' }}>
        <button onClick={undoAnnotation}>Undo</button>
        <button onClick={redoAnnotation}>Redo</button>
      </div>
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style={{ height: '650px' }}
      >
        <Inject services={[Toolbar, Annotation, TextSelection]} />
      </PdfViewerComponent>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

See also