Set of modern React components for PDF highlighting
npm install react-pdf-highlighter-plus
A powerful React library for annotating PDF documents
Text highlights • Area highlights • Freetext notes • Images & signatures • Freehand drawing • PDF export
---
react-pdf-highlighter-plus provides a highly customizable annotation experience for PDF documents in React applications. Built on PDF.js, it stores highlight positions in viewport-independent coordinates, making them portable across different screen sizes.
| Feature | Description |
|---------|-------------|
| Text Highlights | Select and highlight text passages |
| Area Highlights | Draw rectangular regions on PDFs |
| Freetext Notes | Draggable, editable sticky notes with custom styling |
| Images & Signatures | Upload images or draw signatures directly on PDFs |
| Freehand Drawing | Draw freehand annotations with customizable stroke |
| PDF Export | Export annotated PDF with all highlights embedded |
| Light/Dark Theme | Eye-friendly dark mode with customizable intensity |
| Zoom Support | Full zoom functionality with position-independent data |
| Fully Customizable | Exposed styling on all components |
| Resource | Link |
|----------|------|
| Live Demo | View Demo |
| Documentation | API Docs |
| NPM Package | npm |
---
``bash`
npm install react-pdf-highlighter-plus
`tsx`
import "react-pdf-highlighter-plus/style/style.css";
---
`tsx
import {
PdfLoader,
PdfHighlighter,
TextHighlight,
AreaHighlight,
useHighlightContainerContext,
} from "react-pdf-highlighter-plus";
import "react-pdf-highlighter-plus/style/style.css";
function App() {
const [highlights, setHighlights] = useState([]);
return (
{(pdfDocument) => (
highlights={highlights}
enableAreaSelection={(e) => e.altKey}
>
)}
);
}
function HighlightContainer() {
const { highlight, isScrolledTo } = useHighlightContainerContext();
return highlight.type === "text" ? (
) : (
);
}
`
---
Select text in the PDF to create highlights.
`tsx`
isScrolledTo={isScrolledTo}
style={{ background: "rgba(255, 226, 143, 1)" }}
/>
Hold Alt and drag to create rectangular highlights.
`tsx`
// ...
>
Create draggable, editable text annotations with customizable styling.
`tsx
import { FreetextHighlight } from "react-pdf-highlighter-plus";
onFreetextClick={(position) => {
addHighlight({ type: "freetext", position, content: { text: "Note" } });
}}
>
// In your highlight container:
onChange={handlePositionChange}
onTextChange={handleTextChange}
onStyleChange={handleStyleChange}
color="#333333"
backgroundColor="#ffffc8"
fontSize="14px"
/>
`
Features:
- Drag to reposition
- Click to edit text
- Built-in style panel (colors, font size, font family)
- Toolbar appears on hover
Upload images or draw signatures and place them on PDFs.
`tsx
import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-plus";
// Signature pad modal
onComplete={(dataUrl) => setPendingImage(dataUrl)}
onClose={() => setIsOpen(false)}
/>
// In your highlight container:
onChange={handlePositionChange}
onEditStart={() => toggleEditInProgress(true)}
onEditEnd={() => toggleEditInProgress(false)}
/>
`
Features:
- Upload any image format
- Draw signatures with mouse or touch
- Drag to reposition
- Resize while maintaining aspect ratio
- Toolbar appears on hover
Draw freehand annotations directly on PDFs.
`tsx
import { DrawingHighlight } from "react-pdf-highlighter-plus";
onDrawingComplete={(position, dataUrl) => {
addHighlight({ type: "drawing", position, content: { image: dataUrl } });
}}
drawingConfig={{
strokeColor: "#ff0000",
strokeWidth: 2,
}}
>
// In your highlight container:
onChange={handlePositionChange}
/>
`
Features:
- Freehand drawing with mouse or touch
- Customizable stroke color and width
- Stored as PNG for PDF export compatibility
- Drag to reposition
---
Toggle between light and dark modes with customizable styling for comfortable reading.
`tsx
// Enable dark mode
theme={{ mode: "dark" }}
highlights={highlights}
>
// Customize dark mode intensity and colors
theme={{
mode: "dark",
darkModeInvertIntensity: 0.85, // Softer (0.8-1.0)
containerBackgroundColor: "#3a3a3a",
scrollbarThumbColor: "#6b6b6b",
scrollbarTrackColor: "#2c2c2c",
}}
highlights={highlights}
>
`
Features:
- Eye-friendly dark mode using CSS filter inversion
- Customizable inversion intensity (0.8-1.0)
- Preserve original highlight colors in dark mode
- Custom scrollbar styling
- Full theming control for container background
Inversion Intensity Guide:
| Value | Result | Use Case |
|-------|--------|----------|
| 1.0 | Pure black | High contrast |0.9
| | Dark gray (~#1a1a1a) | Recommended |0.85
| | Softer gray (~#262626) | Long reading sessions |0.8
| | Medium gray (~#333333) | Maximum comfort |
---
Export your annotated PDF with all highlights embedded.
`tsx
import { exportPdf } from "react-pdf-highlighter-plus";
const handleExport = async () => {
const pdfBytes = await exportPdf(pdfUrl, highlights, {
textHighlightColor: "rgba(255, 226, 143, 0.5)",
areaHighlightColor: "rgba(255, 226, 143, 0.5)",
onProgress: (current, total) => console.log(${current}/${total} pages),
});
// Download the file
const blob = new Blob([pdfBytes], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "annotated.pdf";
a.click();
URL.revokeObjectURL(url);
};
`
Supported highlight types:
- Text highlights (colored rectangles)
- Area highlights (colored rectangles)
- Freetext notes (background + wrapped text)
- Images & signatures (embedded PNG/JPG)
- Freehand drawings (embedded PNG)
---
``
┌─────────────────────────────────────────────────────┐
│ PdfLoader │
│ Loads PDF document via PDF.js │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ PdfHighlighter │ │
│ │ Manages viewer, events, coordinate systems │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ User-defined HighlightContainer │ │ │
│ │ │ Renders highlights using context hooks │ │ │
│ │ │ │ │ │
│ │ │ • TextHighlight │ │ │
│ │ │ • AreaHighlight │ │ │
│ │ │ • FreetextHighlight │ │ │
│ │ │ • ImageHighlight │ │ │
│ │ │ • DrawingHighlight │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
| Hook | Purpose |
|------|---------|
| usePdfHighlighterContext() | Viewer utilities: scrollToHighlight, setTip, getCurrentSelection |useHighlightContainerContext()
| | Per-highlight utilities: highlight, viewportToScaled, screenshot |
---
The library uses two coordinate systems:
| System | Description | Use Case |
|--------|-------------|----------|
| Viewport | Pixel coordinates relative to current zoom | Rendering on screen |
| Scaled | Normalized (0-1) coordinates relative to page | Storage & retrieval |
`tsx
// Converting between systems
const { viewportToScaled } = useHighlightContainerContext();
// Save position (viewport → scaled)
const scaledPosition = viewportToScaled(boundingRect);
// Highlights are automatically converted to viewport when rendering
`
---
`tsx
interface MyHighlight extends Highlight {
category: string;
comment?: string;
author?: string;
}
// Use the generic type
const { highlight } = useHighlightContainerContext
`
`tsx
// Via props
style={{ background: categoryColors[highlight.category] }}
/>
// Via CSS classes
.TextHighlight { }
.AreaHighlight { }
.FreetextHighlight { }
.ImageHighlight { }
.DrawingHighlight { }
`
`tsx
import { MonitoredHighlightContainer } from "react-pdf-highlighter-plus";
position: highlight.position,
content:
}}
>
`
---
`bash`
git clone https://github.com/QuocVietHa08/react-pdf-highlighter-plus.git
cd react-pdf-highlighter-plus
npm install
npm run dev
---
See the full API Reference for detailed documentation on all components and types.
---
Contributions are welcome! Please:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
For bugs, please open an issue with clear reproduction steps.
---
MIT
---
Originally forked from react-pdf-highlighter` with significant architectural changes including context-based APIs, zoom support, freetext/image/drawing highlights, and PDF export functionality.