react-pdf-marker

Based on react-pdf-highlighter by agentcooper

Set of React components for PDF annotation.

Features:

• Built on top of PDF.js
• Text and image highlights
• Popover text for highlights
• Scroll to highlights

Importing CSS

The bundled CSS include the CSS for pdfjs.

import "react-pdf-marker/style.css";

pdf.js worker

Configure a bundled worker for production instead of relying on the CDN fallback — either pass workerSrc to PDFLoader, or set it globally once:

// Vite example
import { GlobalWorkerOptions } from "pdfjs-dist";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";

GlobalWorkerOptions.workerSrc = workerUrl;

PDFLoader respects an already-configured GlobalWorkerOptions.workerSrc and only falls back to a CDN copy (with a console warning) when nothing is set.

Read-only mode

Pass readOnly to PDFMarker to display markings without creating new ones. Native text selection (and copy) behaves normally in this mode.

Drawing tools

Pass drawingMode to activate a drawing tool (pen, rect, ellipse, line, arrow, text, eraser, select). While a tool other than select is active, native text selection is suspended. The select tool keeps text selectable and copyable: its surface is transparent to pointer events, and clicking, moving, resizing and double-click-to-edit on drawings work through document-level listeners. Creating markings from a text selection stays disabled for any non-null drawingMode.

Note for consumers: marking overlays keep pointer-events: auto, so in select mode a text selection starting on top of an existing marking may be intercepted by it — neutralize the marking layer with CSS on the host app if that matters (e.g. [class*="Marking"] { pointer-events: none } while the select tool is active).

Changing documents

pdfDocument is immutable. To display another document, remount the component — PDFLoader already does this between loads; if you drive PDFMarker yourself, use key={url}.

Example

To run the example app locally:

pnpm install
pnpm start

Install

npm install react-pdf-marker

How to use

See ./example/src/App.tsx for the React component API example.