A feature-rich, headless PDF viewer and annotation library built on PDF.js. Highlight text, add notes, draw shapes, embed images, and export annotated PDFs. All processing happens in the browser.
A comprehensive set of annotation tools built for modern React applications.
Select and highlight text passages with customizable colors. Positions stored in viewport-independent coordinates.
Create draggable, editable sticky notes with styling options. Click to edit, drag to reposition.
Upload images or draw signatures with mouse/touch. Drag to reposition, resize with aspect ratio preservation.
Draw directly on PDFs with customizable stroke color and width. Stored as PNG for export compatibility.
Add rectangles, circles, and arrows. Hold Alt while dragging for area selection on non-text content.
Export annotated documents with all highlights permanently embedded. Progress callback included.
Get started in minutes with npm or yarn
1. Install the package
npm install react-pdf-highlighter-plus2. Import the styles
import "react-pdf-highlighter-plus/style/style.css";3. Basic usage example
import {
PdfLoader,
PdfHighlighter,
TextHighlight,
AreaHighlight,
useHighlightContainerContext,
} from "react-pdf-highlighter-plus";
function App() {
const [highlights, setHighlights] = useState([]);
return (
<PdfLoader document="https://example.com/doc.pdf">
{(pdfDocument) => (
<PdfHighlighter
pdfDocument={pdfDocument}
highlights={highlights}
enableAreaSelection={(e) => e.altKey}
>
<HighlightContainer />
</PdfHighlighter>
)}
</PdfLoader>
);
}Zoom in/out while maintaining annotation positions with viewport-independent coordinate storage.
Exposed styling on all components. Extend the Highlight interface with custom properties.
Notes, images, and signatures can be repositioned by dragging. Toolbar appears on hover.
Full TypeScript support with comprehensive type definitions for all components and utilities.
Embed all annotations permanently into downloadable PDF files. Supports text highlights, area highlights, freetext notes, images, signatures, and drawings.
import { exportPdf } from "react-pdf-highlighter-plus";
const handleExport = async () => {
const pdfBytes = await exportPdf(pdfUrl, highlights, {
textHighlightColor: "rgba(255, 226, 143, 0.5)",
onProgress: (current, total) =>
console.log(`${current}/${total} pages`),
});
const blob = new Blob([pdfBytes], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
// Download the file...
};MIT licensed and free to use in personal and commercial projects. No strings attached.
Built with the latest React, TypeScript, and PDF.js for optimal performance and developer experience.
All processing happens in the browser. Your documents never leave your device.
Get started with:
npm install react-pdf-highlighter-plususePdfHighlighterContext()Viewer utilities: scrollToHighlight, setTip, getCurrentSelection
useHighlightContainerContext()Per-highlight: highlight object, viewportToScaled, screenshot
Experience all the annotation features with our interactive demo. Upload your own PDF or use our sample document.
Launch Demo