react-pdf-highlighter-plus · v1.1.4

The annotation layer your PDF viewer is missing.

Highlights, sticky notes, freehand drawing, shapes, signatures, and flattened export — a headless, fully-typed React toolkit on top of PDF.js. Every byte stays in the browser.

Launch the live demo
attention-is-all-you-need.pdf
120% Export
3.2 · Scaled Dot-Product Attention
We call our particular attention “Scaled Dot-Product Attention”. The input consists of queries and keys of dimension d_k, and values of dimension d_v. We compute the dot products of the query with all keys, divide each by √d_k.
AREA · fig.2
p. 4 / 15
Compare with additive attention →
Highlights4
“Scaled Dot-Product Attention”
text · p.4
Multi-head allows attending to different positions.
note · p.5
Figure 2 — attention diagram
area · p.4
Positional encoding sketch
drawing · p.6
// BUILT ONReact 19PDF.jsTypeScriptZustandTailwind CSS
// 01 — CAPABILITIES

Six annotation types. One coordinate system.

01

The full markup toolkit

Text highlights, draggable sticky notes, freehand ink, rectangles & arrows, images and hand-drawn signatures — each a first-class annotation with stable id, color and comment.

Highlight
Note
Draw
Shapes
Image
Sign
02

Flatten & export

Burn every annotation permanently into a downloadable PDF — with a per-page progress callback.

03

Private by default

100% client-side. Documents never touch a server — built for legal, medical and internal files.

04

Zoom-stable

Positions stored in viewport-independent coordinates — pinned through every zoom level.

05

Typed end to end

Full TypeScript definitions. Extend the Highlight interface with your own custom fields.

06

Headless core

Bring your own UI. A small tree of primitives you wire together however you like.

// 02 — ANATOMY

A viewer in three composable parts.

Loader fetches the document. Highlighter wires the events. Your container renders each annotation. Context hooks expose everything else.

PdfLoaderLoads the PDF document
PdfHighlighterViewer + event listeners
…ContainerRenders each highlight
App.tsx
// install · import "react-pdf-highlighter-plus/style.css"
import {
  PdfLoader, PdfHighlighter,
  TextHighlight, AreaHighlight,
} from "react-pdf-highlighter-plus";

<PdfLoader document={url}>
  {(pdf) => (
    <PdfHighlighter pdfDocument={pdf}
      enableAreaSelection={(e) => e.altKey}>
      <HighlightContainer />
    </PdfHighlighter>
  )}
</PdfLoader>
// 03 — CHANGELOG

Shipped recently

Full changelog
v1.2.1Apr 30, 2026

PDF search controls

In-document search via the new highlighter search utilities, plus copy-text in highlight toolbars.

v1.1.0Jan 2, 2026

Dual-panel layout

Outline & page thumbnails on the left, highlights on the right, with theme-aware page inversion.

v1.0.0Initial

First public release

Highlights, areas, notes, images, signatures, drawing, shapes, export & localStorage.

Drop a highlighter on your PDFs.

Upload your own document or use our sample. Annotate, then export a flattened copy — all in the browser.