react-pdf-highlighter
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.
Demo
For online demo check https://agentcooper.github.io/react-pdf-highlighter/.
To run the demo app locally:
npm install npm start
While docs are in progress, feel free to check the source annotated with Flow type signatures.
Installation
npm install react-pdf-highlighter
See demo/src/App.js
for React component API example.
Prior art
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:
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/
FAQ
Can I get a new PDF with the highlights embedded into the document?
No, but pdf-annotation-service might be helpful for you.
Wasn't this named react-pdf-annotator at some point?
Yes, but people from https://www.pdfannotator.com/ asked me to rename, since they have a trademark for PDF Annotator.
I'm trying the demo with my PDF and it is not loading!
Please check the CORS headers on your url. It is required for the cross-domain request.
Compatibility
Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet Explorer.