The ultimate React PDF viewer for your next project. Choose our pre-built viewer for instant results, or use our headless components to build a completely custom UI.
Works seamlessly with your favorite libraries
Choose the level of control that fits your project
A complete, polished PDF viewer with toolbar and thumbnails. Drop it in and you're done.
Use our powerful components to build a viewer that perfectly matches your design system.
Get a fully featured PDF viewer in your React app with just a few lines of code.
import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function App() {
return (
<PDFViewer
config={{ src: 'https://snippet.embedpdf.com/ebook.pdf' }}
style={{ height: '500px' }}
onReady={(registry) => {
console.log('PDF viewer ready!', registry);
}}
/>
);
}This is the default UI you get with the <PDFViewer /> component.
Want a different look? Scroll down to see our headless architecture.
Pick only the features you need. Each plugin is a separate package—your bundle stays lean, your app stays fast.
import { EmbedPDF, createPluginRegistration }
from '@embedpdf/core/react';
import { ZoomPluginPackage, useZoom }
from '@embedpdf/plugin-zoom/react';
// Register only what you need
const plugins = [
createPluginRegistration(DocumentManagerPluginPackage),
createPluginRegistration(ZoomPluginPackage, {
defaultZoomLevel: ZoomMode.FitPage
}),
];
// Build your own UI with hooks
const { zoomIn, zoomOut, currentZoomLevel } = useZoom(documentId);
Use useZoom(), useSelection(), or any hook with your own buttons, sliders, and components.
Technical excellence you can rely on. Designed for high-performance applications.
Not an afterthought. Every prop, hook, and event is fully typed, giving you a superior developer experience with robust autocomplete.
Handle documents with thousands of pages. We only render what is visible in the viewport, keeping your application memory usage low and frame rates high.
Works seamlessly with Server Side Rendering. Components handle client-only logic gracefully, so you don't have to fight with hydration errors.
Don't ship a 5MB viewer when you only need to show a simple invoice. Our modular architecture means you import only the parts you need, keeping your initial bundle size tiny.
Everything you need to know about integrating the viewer.
Most React libraries wrap PDF.js. EmbedPDF uses a custom WebAssembly engine powered by PDFium (Google Chrome's PDF engine). This delivers significantly faster rendering, better accuracy, and a true headless architecture that gives you full UI control.
Yes! All components are designed to work seamlessly with Next.js. We handle the client-side browser APIs (like Canvas) gracefully, so you don't get hydration mismatches. Just import our components in your Client Components.
Absolutely. Since our headless components don't render any opinionated styles, you have full control. You can pass Tailwind classes directly to our viewport, layers, and custom toolbar buttons.
No. The viewer runs entirely in the user's browser using WebAssembly. Your documents stay on the client, and you don't need to pay for any cloud processing or manage API keys.
We use a virtualization engine (similar to react-window) that only renders the pages currently visible in the viewport. This keeps memory usage low and scrolling smooth, even for documents with 1000+ pages.
Yes. The core library and all standard plugins are MIT licensed. You can use them in personal, commercial, and enterprise projects without any restrictions or hidden fees.
Join thousands of developers using EmbedPDF to create amazing experiences.