Build a React PDF viewer with Apryse WebViewer SDK and Vite

Create React App was once the standard for scaffolding React applications, but it has since been deprecated in favor of tools like Vite. This guide shows how to build a React PDF viewer using the Apryse WebViewer SDK with React and Vite. You’ll learn how to integrate the SDK into a React application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use GitHub sample to get started quickly, or explore the interactive Showcase demo to see WebViewer's full capabilities in action.

This guide assumes basic familiarity with React development. Before you start:

• Install Node.js and npm. See the Vite documentation for version details.
• Install Visual Studio Code or another code editor to develop and debug your code.
• Get your Apryse trial key.

In this section, you’ll create a new React with Vite application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a React app, skip this and continue to Install WebViewer.

1. In your terminal, go to the directory where you want to create the project.
2. Create a new webviewer-react project using a minimal setup:

1npx -y create-vite@latest webviewer-react --template react
2

3. If prompted to install with npm and start now, select No.

4. Navigate to your new React project directory and install dependencies:

1cd webviewer-react
2npm install

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your React application.

After navigating to your webviewer-react project directory, run the following command to install WebViewer:

1npm i @pdftron/webviewer

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a React project, you must copy these assets into the public directory so they can be served correctly. For more, see Copying WebViewer static assets.

1. In your terminal, create the public/lib/webviewer directory if it doesn't already exist:

1npx --yes shx mkdir -p public/lib/webviewer

2. Copy all WebViewer static assets from node_modules/@pdftron/webviewer/public into the new public/lib/webviewer directory:

1npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer

Your project should now include a similar structure:

1webviewer-react/
2├─ node_modules/
3├─ public/
4│  ├─ lib/
5│  │  └─ webviewer/
6│  │     ├─ core/
7│  │     └─ ui/
8│  ├─ favicon.svg
9│  └─ ...
10├─ src/
11└── ...

Next, instantiate the Apryse WebViewer SDK and mount it in your React project. This involves creating a container for the viewer and initializing WebViewer so it loads correctly at runtime.

1. In Visual Studio Code, replace the contents of the src/App.jsx file with the following and save:

1import { useEffect, useRef } from 'react';
2import * as WebViewerModule from '@pdftron/webviewer';
3
4/**
5 * Normalize WebViewer export to handle different module formats
6 * (ESM vs CommonJS, default vs named exports)
7 */
8function normalizeWebViewer(mod) {
9  if (typeof mod === 'function') return mod;
10  if (typeof mod?.default === 'function') return mod.default;
11  if (typeof mod?.WebViewer === 'function') return mod.WebViewer;
12  if (typeof mod?.default?.WebViewer === 'function') return mod.default.WebViewer;
13  if (typeof mod?.default?.default === 'function') return mod.default.default;
14  throw new Error('WebViewer function not found in module');
15}
16
17// Extract correct WebViewer constructor function
18const WebViewer = normalizeWebViewer(WebViewerModule);
19
20function App() {
21  // Create reference to DOM element where WebViewer will mount
22  const viewerRef = useRef(null);
23
24  useEffect(() => {
25    // Initialize WebViewer once when component mounts
26    WebViewer(
27      {
28        // Path to copied WebViewer static assets
29        path: '/lib/webviewer',
30        // Replace with your Apryse license key
31        licenseKey: 'YOUR_LICENSE_KEY',
32        // Initial document to load when WebViewer starts (optional)
33        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
34      },
35      // Attach WebViewer to container element
36      viewerRef.current
37    ).then((instance) => {
38      // Access WebViewer instance here if needed
39      // const { UI, Core } = instance;
40    });
41  // Empty dependency array ensures this runs only once  
42  }, []);
43  return (
44    // Container element for WebViewer
45    <div
46	    ref={viewerRef}
47	    style={{ height: '100vh', width: '100%', margin: '0 auto' }}
48	  />
49  );
50}
51
52export default App;

2. Replace the contents of the src/main.jsx file with the following and save:

1import { StrictMode } from 'react'; 
2import { createRoot } from 'react-dom/client';
3
4import App from './App.jsx';
5
6createRoot(document.getElementById('root')).render( 
7    <App /> 
8);

You can now load and display a PDF document in the WebViewer UI. Run your React application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

1npm run dev

A successful output looks similar to:

1> webviewer-react@0.0.0 dev
2> vite
3
4
5  VITE v8.0.16  ready in 1369 ms
6
7  ➜  Local:   http://localhost:5173/
8  ➜  Network: use --host to expose
9  ➜  press h + enter to show help

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

In this 7-minute video, learn how to install and integrate the Apryse WebViewer SDK into a React project built with Vite.