How to Use a React PDF Viewer: Apryse WebViewer SDK

React is a great library that enables developers to build responsive, powerful web apps using JavaScript. When these applications need secure, reliable PDF capabilities, developers often rely on open-source libraries like react-pdf, or rely on the browser’s built-in viewer, such as by using an iframe.

However, we’ve found that while these inexpensive, lightweight solutions are great for standing up an application, they quickly fall short as projects scale, with more users handling larger documents, and wanting to do more with those documents. When this happens, developers turn to Apryse WebViewer because it provides a single toolkit for a wide range of document capabilities, and it’s stable, polished and supported. Choosing WebViewer solves the PDF problems so developers can focus on other requirements.

In addition to PDF viewing, WebViewer provides:

A commercial SDK (like Apryse) beats free options and in-house development when it meets these key requirements:

Prefer to build a fully custom UI on top of Apryse's rendering engine? See our guide to building a custom React PDF viewer.

Building a PDF viewer from scratch involves much more than simply rendering pages. Production applications often need fast document loading, smooth navigation, annotation tools, form filling, search, editing capabilities, and support for multiple document types. Users need an accessible, intuitive experience.

Apryse WebViewer SDK packages these capabilities into a single JavaScript SDK that integrates cleanly with React, allowing developers to focus on building application workflows instead of implementing document functionality.

In a recent case study, we explored how Blue Voice, an AI-powered policy reference app for police officers, is built in React. In early stages, the company used open-source PDF viewer libraries to provide document viewing, annotation and form filling capabilities. However, the engineering team flagged that this code was starting to cause more problems than it solved, with users wanting a better experience, product wanting more features, and the engineering team wanting a more stable, low-maintenance build.

By integrating Apryse WebViewer, Blue Voice eliminated the work of building PDF functionality, allowing developers to focus on what differentiated the product, such as its AI features. Check out the case study for the full story.

That Blue Voice experience of consolidating vendors to reduce dependencies and streamline the stack is a common one. While open-source libraries are great for basic functionality, Apryse offers add-on modules and a Server SDK that sets up your project for modular expansion, allowing your document capabilities to grow without running into dependency issues.

Beyond simply displaying PDFs, WebViewer provides a complete document experience from a single SDK. Developers can:

These capabilities can be enabled without assembling multiple libraries or building custom document tools. While some features are licensed seperately as add-ons, you can try everything free with your trial key.

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

To start, we'll create a new React with Vite application using npm. In your terminal, go to the directory where you want to create the project. Then, create a new webviewer-react project using a minimal setup:

If prompted to install with npm and start now, select No. Next, navigate to your new React project directory and install dependencies:

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:

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. From your project root, create the public/lib/webviewer directory if it doesn't already exist:

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

Your project should now include a similar structure:

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.

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

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.

A successful output looks similar to:

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

Now, you're ready to check out the usage, WebViewer guides, samples, and API reference.

Apryse WebViewer SDK lets developers add a production-ready React PDF viewer with viewing, annotation, editing, and customization capabilities.

Get your trial key to start building a React PDF viewer with Apryse WebViewer SDK, or contact sales with questions.

Q: How do I add a PDF viewer to React?

A: Install Apryse WebViewer SDK, create a container with useRef, initialize WebViewer in useEffect, and pass the PDF path through initialDoc.

Q: Can I annotate PDFs in React?

A: Yes. Apryse WebViewer includes annotation tools such as highlights, comments, shapes, free text, and markup workflows.

Q: Can I edit PDFs in React?

A: Yes. Apryse WebViewer supports PDF viewing, annotation, and editing workflows in the browser.

Q: Does Apryse WebViewer only support PDFs?

A: No. WebViewer supports PDFs and other formats including Office documents, images, videos, audio, and CAD files.

Q: Is Apryse WebViewer compatible with Vite?

A: Yes. Apryse provides a React and Vite getting-started guide for building a PDF viewer and editor.