npm i react-pdf-ner-annotator


A React component to annotate named entities directly onto a PDF.

by Maarten Bloemen

3.3.2 (see all)License:MITTypeScript:Built-In
Categories:React PDF Viewer
npm i react-pdf-ner-annotator


A React component to annotate named entities directly onto a PDF.

Live demo


  • NER annotation
  • Area annotation
  • OCR on scanned PDFs


The package can be installed through NPM.

npm install react-pdf-ner-annotator


For simple example usage you can refer to example/src/App.tsx.

import Annotator from 'react-pdf-ner-annotator';
// import the css
import 'react-pdf-ner-annotator/lib/css/style.css';
// OR import the sass
import 'react-pdf-ner-annotator/lib/scss/style.scss';
<Annotator url={'http://example.pdf'} />


NameTypeRequiredDefault valueDescription
urlstringEither url or data is requiredundefinedThe URL of the PDF.
dataUint8ArrayBufferSourcestringEither data or url is required
httpHeaders{ [key: string]: string }noundefinedExtra fields for in the HTTP header when for example authentication is needed.
initialScalenumberno1.5The initial scale to display the PDF as. Must be between 1 and 2.
tokenizerRegExpnoA Regular expression for the tokenization of the paragraphs.
disableOCRbooleannofalseYou can set this value to true if your PDF doesn't have a text layer and you don't want the frontend to run OCR.
entityEntitynoundefinedThe active Entity to annotate on the PDF.
initialTextmapArray<TextLayer>noundefinedA array of TextLayer if you want to provide your own TextLayer for the PDF instead of letting the frontend generate one.
defaultAnnotationsArray<Annotation>no[]An array of Annotation to show on the PDF.
refrefnoundefinedA ref to pass to the Annotator, this ref can be used to call removeAnnotation.

Callback methods

NameParametersReturn typeRequiredDescription
getAnnotationsannotations: ArrayvoidyesProvide a method that takes an array of Annotation as input. This method can be the set of a useState hook for example. This is to subscribe to changes of the annotations made on the PDF.
getTextMapsmaps: ArrayvoidnoSame as the annotations but for the text layers. This will only return text layers of pages with annotations on them.

Local development