EmbedPDF logo

React PDF Viewer

The easiest way to embed PDF files in your React application with a complete, readyโ€‘toโ€‘use interface.

Documentation Live Demo NPM Version
--- ## ๐Ÿ“š Documentation The full walkthrough, advanced examples, and API reference live in our docs site: ๐Ÿ‘‰ **[https://www.embedpdf.com/react-pdf-viewer](https://www.embedpdf.com/react-pdf-viewer)** --- ## ๐Ÿš€ Introduction 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. ### Key Features - **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. --- ## ๐Ÿ“ฆ Installation ```bash npm install @embedpdf/react-pdf-viewer # or pnpm add @embedpdf/react-pdf-viewer # or yarn add @embedpdf/react-pdf-viewer ``` --- ## ๐Ÿ›  Basic Usage 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. ### Next.js App Router 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 (
); } ``` --- ## ๐ŸŽจ Customization ### Theme 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 ``` ### Disabling Features Easily customize the UI by disabling features you don't need via the `disabledCategories` option: ```tsx ``` 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](https://www.embedpdf.com/docs/react/headless/introduction) for more details. --- ## ๐Ÿ“„ License EmbedPDF is [MIT licensed](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE). Commercial use is welcomeโ€”just keep the copyright headers intact.