React PDF viewer built for your UI
Embed a PDF viewer in React without an iframe or somebody else’s toolbar. Render pages, select text, follow links, and fill forms entirely in the browser.
Works with vanilla JavaScript and most popular frameworks
A complete PDF viewer SDK in your browser
Our PDF viewer SDK renders the document and exposes its state. Your React components decide how the viewer looks and behaves.
Render PDF pages
Render the complete document in a continuously scrolling viewport. Visible pages are prepared and painted lazily, so an off-screen page does not block the first view.
- Viewport
- PageCanvas
Select and copy text
Switch to the native text-selection tool so users can select and copy real document text instead of interacting with a picture of the page.
- useSetInteractionMode()
- textSelect tool
Zoom and fit
Build zoom buttons, fit-to-width and fit-to-height controls from hooks. Trackpad, Ctrl/Cmd-wheel, and mobile pinch gestures work directly in the viewport.
- useViewportScale()
- useViewportFitScale()
Navigate pages
Read the complete page list, follow the page currently in view, and scroll to any page from your own toolbar or navigation rail.
- usePages()
- useCurrentPageId()
- useScrollToPage()
Follow PDF links
External URLs behave like safe browser links. Internal PDF destinations scroll to the right page without changing the host application’s URL.
- CONTENT_POLICY_PRESET.PDF_VIEWER
Fill PDF forms
Keep document content read-only while text fields, choices, checkboxes, radio buttons, and push buttons remain interactive. Save entered values back into a real PDF.
- useWidgetValue()
- useDocumentSaving()
Build a thumbnail rail
Render any page of the open document into a standalone canvas for thumbnails and previews. The thumbnail and the main viewport use the same rendering engine; thumbnails that pick up edits are coming soon.
- PageCanvas
- usePages()
Match the host application
Style the viewport, page surface, canvas, and form controls with your own classes and React layout. There is no iframe boundary and no viewer theme to override.
- PdfProviders
- theme.classNames
- theme.styles
Turn viewing into editing
The viewer and editor use the same document model and viewport. Change the content policy at runtime when a user receives edit access, with no second integration or document reload.
- PDF_VIEWER
- PDF_EDITOR
How to set up your PDF viewer React component
The SDK supplies the PDF engine, viewport, and hooks. The toolbar, sidebar, loading state, and surrounding workflow stay in your application.
Load bytes and render the viewport
Wrap the viewer in PdfProviders, load a Uint8Array, and render Viewport. The viewer policy locks document content while keeping links and form fields interactive.
import {
CONTENT_POLICY_PRESET,
PdfProviders,
Viewport,
useLoadPdf,
type Config,
} from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
const viewerConfig = {
initialContentPolicy: CONTENT_POLICY_PRESET.PDF_VIEWER,
initialInteractionTool: { type: 'textSelect' },
} satisfies Partial<Config>;
function Viewer() {
const [state, loadPdf] = useLoadPdf();
if (state.status === 'initial') {
return (
<input
type="file"
accept=".pdf"
onChange={async (event) => {
const file = event.target.files?.[0];
if (!file) return;
const bytes = await file.arrayBuffer();
await loadPdf(new Uint8Array(bytes));
}}
/>
);
}
if (state.status === 'loading') return <p>Loading PDF…</p>;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export const App = () => (
<PdfProviders {...viewerConfig}>
<Viewer />
</PdfProviders>
);Install one package and deploy nothing extra
Parsing and rendering run inside the browser. This React PDF SDK sends only a usage count for billing, never the document, and needs no hosted viewer, worker directory, WASM binary, or font bundle.
'use client';
import dynamic from 'next/dynamic';
const Viewer = dynamic(() => import('./viewer'), { ssr: false });
export default function Page() {
return <Viewer />;
}- 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
- File formats
- PDF only
PDFSDK vs other React PDF viewer libraries
A prebuilt viewer ships its own UI. PDFSDK ships the engine and the primitives, so the UI stays yours.
| Library | Viewer chrome | React composition | PDF engine | Editing path | Runtime assets |
|---|---|---|---|---|---|
| Yours | Components and hooks | Included | Same SDK | None | |
| react-pdf-viewer | Default layout | Plugin components | PDF.js | No | PDF.js worker |
| react-pdf | None | Page components | PDF.js | No | PDF.js worker |
| PDF.js | Sample viewer | Not React-specific | Included | No text editing | Worker, cmaps, fonts |
Go beyond viewing
React PDF Editor
Let permitted users edit existing paragraph text with live reflow in the same viewport.
Explore text editingPDF Forms SDK
Read, fill, and create AcroForm fields without moving the workflow into another viewer.
Build a form workflowPlayground
Try text editing, form filling, and page management in complete browser workflows.
Open the playgroundQuestions engineers ask
It is a headless React PDF viewer SDK. It supplies the rendering engine, viewport, page canvases, and state hooks. You supply the toolbar, sidebar, loading UI, and product workflow, so the viewer looks and behaves like the rest of your application.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch