Full Example: React MUI PDF Viewer

While the previous guides show how to use individual plugins, it’s often helpful to see how they all come together in a complete application. This page showcases a feature-rich, responsive PDF viewer built with EmbedPDF and Material-UI.

This example serves as a practical blueprint, demonstrating how to build a polished and cohesive user experience by combining EmbedPDF’s headless components with a popular UI library.

• Live Demo: mui.embedpdf.com
• Source Code: View on GitHub

Features Showcase

The MUI example integrates numerous plugins to create a comprehensive viewing experience.

Core Concepts Illustrated

1. Centralized Plugin Registration

All features are enabled and configured in a single plugins array. This makes it easy to see what capabilities the viewer has and to add or remove features.

const plugins = [
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage, { /* ... */ }),
  createPluginRegistration(ScrollPluginPackage, { /* ... */ }),
  createPluginRegistration(RenderPluginPackage),
  createPluginRegistration(TilingPluginPackage, { /* ... */ }),
  createPluginRegistration(ZoomPluginPackage, { /* ... */ }),
  createPluginRegistration(SearchPluginPackage),
  createPluginRegistration(InteractionManagerPluginPackage),
  createPluginRegistration(PanPluginPackage),
  createPluginRegistration(RotatePluginPackage),
  createPluginRegistration(SpreadPluginPackage),
  createPluginRegistration(FullscreenPluginPackage),
  createPluginRegistration(ExportPluginPackage),
  createPluginRegistration(ThumbnailPluginPackage),
  createPluginRegistration(SelectionPluginPackage),
];
 
function App() {
  // ...
  return (
    <EmbedPDF engine={engine} plugins={plugins}>
      {/* Viewer UI */}
    </EmbedPDF>
  );
}

2. Composable UI Components

The UI is broken down into logical, reusable components (<Toolbar />, <Sidebar />, <Search />, etc.). Each component is responsible for a specific piece of the UI and uses EmbedPDF hooks to interact with the relevant plugins.

For example, the <Toolbar /> component uses multiple hooks to manage different functionalities like panning, rotating, and changing the page layout.

import { usePan } from '@embedpdf/plugin-pan/react';
import { useRotateCapability } from '@embedpdf/plugin-rotate/react';
import { useSpread } from '@embedpdf/plugin-spread/react';
// ... other imports
 
export const Toolbar = () => {
  const { provides: panProvider, isPanning } = usePan();
  const { provides: rotateProvider } = useRotateCapability();
  const { spreadMode, provides: spreadProvider } = useSpread();
  // ...
 
  return (
    <AppBar>
      <MuiToolbar>
        {/* ... */}
        <ToggleIconButton isOpen={isPanning} onClick={() => panProvider?.togglePan()}>
          <BackHandOutlinedIcon />
        </ToggleIconButton>
        {/* ... other buttons for rotate, spread, etc. */}
      </MuiToolbar>
    </AppBar>
  );
};

3. Responsive Design

The example uses MUI’s built-in responsive utilities and a custom useIsMobile hook to adapt the layout for smaller screens. On mobile, sidebars collapse into a bottom sheet, and some toolbar icons are hidden to save space, providing a more native-like experience.

Running the Example Locally

You can run the full MUI example on your machine to experiment with the code.

Prerequisites: You’ll need Node.js 18+ and pnpm.

1. Clone the repository:

git clone https://github.com/embedpdf/embed-pdf-viewer.git
cd embed-pdf-viewer

2. Install dependencies:

pnpm install

3. Build the core packages

The example imports the core EmbedPDF packages from the local workspace. You need to build them once.

pnpm run build --filter "./packages/*"

4. Run the example’s dev server:

pnpm --filter @embedpdf/example-react-mui run dev

Vite will start the development server, and you can access the viewer at http://localhost:3000.