☕️ Buy me a coffee

react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web. It is built on top of PDF.js by Mozilla. Text and rectangular highlights are supported. Highlight data format is independent of the viewport, making it suitable for saving on the server.

For online example check https://agentcooper.github.io/react-pdf-highlighter/.

To run the example app locally:

npm install
npm start

While docs are in progress, feel free to check the source annotated with Flow type signatures.

npm install react-pdf-highlighter

See packages/example/src/App.js for React component API example.

react-pdf and react-pdfjs only provide React wrappers for PDF.js and do not have built-in annotation functionality.

pdfjs-annotate does not provide text highlights out of the box.

PDF.js provides only viewer:

PDF.js is mainly written for reading PDF files, not editing them. Because of that we don't yet support adding any kind of annotations. We do however support rendering a number of annotation types for viewing.

See also:

• https://github.com/mozilla/pdf.js
• https://github.com/wojtekmaj/react-pdf
• https://github.com/erikras/react-pdfjs
• https://github.com/instructure/pdf-annotate.js/
• https://blogs.dropbox.com/tech/2016/11/annotations-on-document-previews/

No, but pdf-annotation-service might be helpful for you.

Yes, but people from https://www.pdfannotator.com/ asked me to rename, since they have a trademark for PDF Annotator.

Please check the CORS headers on your url. It is required for the cross-domain request.

Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet Explorer.

To publish a new version:

npx lerna version

cd ./packages/react-pdf-highlighter
npm publish

The default worker is an inline "fake" worker. To improve performance, either add the worker-loader (preferred) to your webpack config or use the inline loader syntax.

Use this if have your own config

{
  ...
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: 'worker-loader',
      },
      ...
    ]
  }
}

Use in Create React App projects

import PDFWorker from "worker-loader!pdfjs-dist/lib/pdf.worker";

import {setPdfWorker} from 'react-pdf-highlighter';

setPdfWorker(PDFWorker);
...