PDF annotation SDK for React
Render existing PDF markup, edit supported annotations, place image stamps, and save the result in the browser, under your own React UI.
Annotations are in early access
Leave your email and we’ll reach out with access
By sending us your email, you agree to our Privacy policy
Works with vanilla JavaScript and most popular frameworks
What you can do with PDF markup
This PDF markup editor for React works with the markup already in your files. Here are the PDF markup tools available today and the public APIs behind each one.
Render existing annotations
Viewport draws the annotations already in the file on top of the pages, no iframe. Supported types get the interactive layer; other types can render from their saved appearance stream.
- Viewport
Preserve text markup
Existing Highlight, Underline, StrikeOut, and Squiggly load together with the text and are written back into the saved PDF.
- Viewport
Edit shapes and drawings
Existing Square, Circle, Line, Polygon, PolyLine, and Ink annotations select and move. Rectangular shapes and Ink resize; lines and polygons expose their vertices for editing.
- useMoveSelection()
Place image stamps
stageImage() validates and measures an image, then the addImage tool places it on the page as a Stamp annotation. The Stamp moves, resizes, duplicates, and deletes like any selection.
- stageImage()
- addImage tool
Selection actions
Nudge the selected annotation from the keyboard or your own toolbar, duplicate it, or delete it. Every command lands in the shared document history.
- useMoveSelection()
- useDuplicateSelection()
- useDeleteSelection()
Read-only and editable modes
Switch the same view between viewing and editing at runtime. The annotation permission applies to the whole document, not to a single type.
- CONTENT_POLICY_PRESET
- useSetInteractionMode()
Undo and redo
Moves, resizes, duplicates, deletions, and placed Stamps are undone and redone through the common history API, together with every other edit in the document.
- useUndoRedo()
Save annotations into the PDF
prepareDocument() returns the edited PDF as a Uint8Array; downloadDocument() hands the file straight to the user.
- useDocumentSaving()
How to annotate a PDF in React
Here is the shortest path to React PDF annotation: load the file, turn on annotation editing, connect your controls, and serialize the result in the browser.
Load an annotation-aware viewport
Wrap the application in PdfProviders, load a Uint8Array, and render Viewport. Start from the viewer policy, then make annotations editable while keeping document text read-only.
import { useEffect } from 'react';
import {
CONTENT_POLICY_PRESET,
PdfProviders,
Viewport,
useLoadPdf,
} from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
const annotationPolicy = {
...CONTENT_POLICY_PRESET.PDF_VIEWER,
annotations: 'editable',
} as const;
function AnnotationView({ file }: { file: Uint8Array }) {
const [state, loadPdf] = useLoadPdf();
useEffect(() => {
void loadPdf(file);
}, [file, loadPdf]);
if (state.status !== 'ready') return null;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export function App({ file }: { file: Uint8Array }) {
return (
<PdfProviders initialContentPolicy={annotationPolicy}>
<AnnotationView file={file} />
</PdfProviders>
);
}
Connect annotation tools to your own UI
The public PDF annotation API covers interaction mode, image stamps, selection commands, undo and redo, and saving.
import {
CONTENT_POLICY_PRESET,
stageImage,
useSetInteractionMode,
} from '@sdk-pdf/react';
const annotationPolicy = {
...CONTENT_POLICY_PRESET.PDF_VIEWER,
annotations: 'editable',
} as const;
export function StampPicker() {
const setInteractionMode = useSetInteractionMode();
const placeStamp = async (file: File) => {
const image = await stageImage(file);
setInteractionMode({ type: 'addImage', image, width: 180 }, annotationPolicy);
};
return (
<label>
Place stamp
<input
type="file"
accept="image/*"
onChange={(event) => {
const file = event.target.files?.[0];
if (file) void placeStamp(file);
}}
/>
</label>
);
}Runs in the browser, no extra setup
This PDF annotation library for React doesn’t need an annotation service, workers, WASM binaries, or font files to host. Install one PDF SDK package, add one stylesheet and one bundler alias, and the PDF goes in and comes out as bytes.
'use client';
import dynamic from 'next/dynamic';
const AnnotationView = dynamic(() => import('./annotation-view'), {
ssr: false,
});
export default function Page() {
return <AnnotationView />;
}- Framework
- React 19, with react and react-dom as peer dependencies
- Module format
- ESM only; use a bundler (Vite, Next.js, or equivalent)
- Runtime
- Browser only. In Next.js, use a client component with ssr: false
- Bundle
- 277 KB gzipped; CJK character maps are code-split and lazy
- Assets to host
- None. Everything the engine needs is in the module graph
- Bundler
- Alias the unused canvas require once (see config snippets)
- Strict Mode
- Off for now. The simulated unmount kills the engine
- Encrypted files
- Pass { password } to loadPdf. RC4, AES-128, and AES-256
- Input
- Uint8Array, one PDF loaded at a time
- Output
- Uint8Array with the saved PDF, or a browser download
How it compares to other React PDF libraries
PDF libraries range from renderers to low-level writers and full review SDKs. If you are choosing a React PDF viewer, React PDF editor, or deciding whether this PDF annotation library fits, the key difference is how much annotation behavior and UI you have to build yourself.
| Library | Renders existing markup | Creates markup | Edits geometry | Comments and replies | Saves a PDF |
|---|---|---|---|---|---|
| Yes | Image Stamp today | Supported types | Not yet | Yes | |
| PDF.js | Yes | Viewer editor layer | Editor-layer types | Viewer implementation | Yes |
| react-pdf | Via PDF.js | Bring your own | Bring your own | Bring your own | Bring your own |
| pdf-lib | No renderer | Low-level/manual | Low-level/manual | No review UI | Yes |
Where to go next
React PDF Editor
Edit document text, place images, manage pages, and save the finished PDF with the same browser engine.
Editor pageReact PDF Viewer
Render annotations in a read-only document alongside selectable text, links, forms, navigation, and zoom.
Viewer pagePDF Forms SDK
Read, fill, and create AcroForm fields with the same React providers and document model.
Forms pageQuestions engineers ask
No, it’s not a full PDF annotation editor yet. The current release renders existing annotations, edits the geometry of the supported types, places image Stamps, and saves the PDF. Creating text markup, shapes, Ink, notes, and review threads is not published yet.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch