React component for embedding PDF documents
npm install @embedpdf/react-pdf-viewer
The easiest way to embed PDF files in your React application with a complete, readyโtoโuse interface.
---
The full walkthrough, advanced examples, and API reference live in our docs site:
๐ https://www.embedpdf.com/react-pdf-viewer
---
The @embedpdf/react-pdf-viewer package provides a complete, production-ready PDF viewing experience for React applications.
It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSSโit just works.
- Ready-to-use UI โ Includes a polished toolbar, sidebar, and thumbnails.
- Responsive โ Adapts seamlessly to mobile and desktop screens.
- Themable โ Built-in light/dark modes and support for custom brand colors.
- Configurable โ Easily disable features you don't need (e.g., printing or downloading).
- TypeScript โ Fully typed for a great developer experience.
- Next.js Ready โ Works flawlessly with Next.js App Router and SSR.
---
``bash`
npm install @embedpdf/react-pdf-vieweror
pnpm add @embedpdf/react-pdf-vieweror
yarn add @embedpdf/react-pdf-viewer
---
Import the PDFViewer component and render it with a PDF source.
`tsx
import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function App() {
return (
That's it! You now have a fully functional PDF viewer.
$3
The component works seamlessly with Next.js. Since it uses browser APIs (Canvas, WebAssembly), make sure to use it in a Client Component:
`tsx
'use client';import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function ViewerPage() {
return (
config={{
src: 'https://snippet.embedpdf.com/ebook.pdf',
}}
/>
);
}
`---
๐จ Customization
$3
The viewer includes a robust theming system. You can set the preference to
'light', 'dark', or 'system', and even override specific colors to match your brand.`tsx
config={{
src: '/document.pdf',
theme: {
preference: 'system',
light: {
accent: {
primary: '#9333ea', // Custom brand color (Purple)
},
},
},
}}
/>
`$3
Easily customize the UI by disabling features you don't need via the
disabledCategories option:`tsx
config={{
src: '/document.pdf',
disabledCategories: ['annotation', 'print', 'export'],
}}
/>
`Available categories include:
zoom, annotation, redaction, document, page, panel, tools, selection, and history.---
โ๏ธ Configuration Options
The
config prop accepts the following top-level options:| Option | Type | Description |
| :------------------- | :---------------------------------- | :--------------------------------------------- |
|
src | string | URL or path to the PDF document. |
| theme | object | Theme configuration (preference, overrides). |
| tabBar | 'always' \| 'multiple' \| 'never' | Control visibility of the document tab bar. |
| disabledCategories | string[] | Hide specific UI features by category. |
| i18n | object | Configure locales and translations. |
| annotations | object | Configure annotation defaults (author, tools). |
| zoom | object | Configure default zoom levels and limits. |
| scroll | object | Configure scroll direction and logic. |---
๐ Accessing the Engine & Registry
For advanced use cases, you can access the underlying PDFium engine or the plugin registry using a ref.
`tsx
import { useRef } from 'react';
import { PDFViewer, PDFViewerRef } from '@embedpdf/react-pdf-viewer';function App() {
const viewerRef = useRef(null);
const getMetadata = async () => {
// Access the plugin registry
const registry = await viewerRef.current?.registry;
if (!registry) return;
// Access the engine directly
const engine = registry.getEngine();
console.log('Engine ready:', engine);
};
return (
<>
>
);
}
`---
๐งฉ Headless Mode
Need complete control over the UI? Building a custom design system?
Check out our Headless Components which provide hooks and logic without the UI:
`bash
npm install @embedpdf/core @embedpdf/plugin-zoom ...
``Read the Headless Documentation for more details.
---
EmbedPDF is MIT licensed. Commercial use is welcomeโjust keep the copyright headers intact.