Headless PDF Components for React

EmbedPDF React is a headless UI toolkit for building powerful, fully-customized PDF viewing and editing experiences in React.

Unlike traditional PDF libraries that provide a monolithic, pre-styled <PDFViewer> component, @embedpdf/react gives you a set of unopinionated hooks and components. This gives you complete control over your application’s layout, styling, and functionality.

Think of it like this: instead of a pre-built car, we give you a high-performance engine (@embedpdf/engines), a chassis (<EmbedPDF>), and a set of quality parts (plugins, hooks, and components) that you assemble to build the exact vehicle you need.

What Does “Headless” Mean?

1. You Control the UI: We provide the logic, you provide the pixels. The library does not ship with any CSS or pre-built toolbars. You can use any styling solution you prefer, from vanilla CSS and CSS-in-JS to component libraries like Material UI or Tailwind CSS.

2. Composable by Design: You build your viewer by composing components together. Need a render layer? Add <RenderLayer />. Want a search UI? Use the useSearch hook and build the interface you want. This keeps your component tree clean and your bundle size minimal.

3. Total Layout Freedom: Our components are simple building blocks designed to fit inside your application’s layout, not the other way around. You decide where the viewport goes, where the sidebar lives, and how the toolbar is structured.

The Core Building Blocks

Your entire PDF experience is built from a few key concepts:

• <EmbedPDF> Component: The root provider that manages the core engine and orchestrates all the plugins.
• Plugins: These are the “brains” of your viewer, adding features like zooming, scrolling, searching, and more.
• Hooks: Functions like useZoom() or useScroll() that allow your components to read and react to the state of the PDF viewer.
• Components: Unstyled, functional components like <RenderLayer /> and <Scroller /> that handle the actual rendering and interaction within the DOM.

Ready to get started? Let’s build your first viewer!