How To Build a Customizable React PDF Viewer?

Finding a React PDF viewer that renders accurately, runs fast on large files, and keeps document data private is harder than it should be. Many open-source options stall on complex PDFs, lack annotation and form support, or quietly route content through a server. Commercial alternatives solve some of that but introduce their own trade-offs around licensing and customization.

This guide shows how to build a PDF viewer demo using React and the Apryse Web SDK (WebViewer). We'll cover project setup, installation, and component integration, ending with a viewer that renders entirely client-side in the browser. Along the way, we'll explain why the client-side model matters for performance and security, show how to extend the viewer with annotations and forms, and compare Apryse honestly against PDF.js, react-pdf, Nutrient, and Syncfusion.

Before the code, it's worth understanding what you get. WebViewer is a pure client-side JavaScript library to view, annotate, and edit documents, compatible with any JavaScript framework. For React developers, that means a viewer that mounts inside a DOM element and processes documents locally, with no third-party cloud API in the loop.

Apryse WebViewer renders and manipulates documents entirely on the client-side using WebAssembly (WASM). That single architectural choice drives most of the value:

This is what we mean by without data ever leaving the platform. The same proprietary engine that powers the Apryse Server SDK runs in the browser, so you get high-fidelity output without sending files anywhere.

WebViewer gives you far more than a page renderer. Out of the box you get:

You can adopt the prebuilt UI as-is or fork the WebViewer project to build a completely custom experience. Either way, you start from a tested foundation rather than assembling a viewer from primitives.

This tutorial follows the official React Get Started guide for Apryse WebViewer SDK, which walks through building a viewer with React and Vite. We'll get you from an empty directory to a running demo.

You'll need:

Create a new React application with Vite. If you already have a React app, skip ahead to the next step.

This scaffolds a minimal React project and installs its base dependencies.

Install the WebViewer package from npm:

WebViewer ships static assets (its core engine, workers, and UI files) that the browser needs to load at runtime. Copy those assets from node_modules into your project’s public directory so they are served alongside your app:

This step is required because WebViewer reads its resources from a public path at runtime, and skipping it is the most common reason a first integration fails to render.

Replace the contents of src/App.jsx with the following. The component initializes WebViewer once when it mounts and points it at the copied assets.

Then replace the contents of src/main.jsx with the following:

A few things worth explaining:

That's the complete integration. No server, no backend route, no document upload endpoint.

Start the Vite development server:

Vite prints a local URL in the terminal, typically http://localhost:5173/. Open it in your browser and you'll see WebViewer render the document with its full UI: a toolbar, thumbnail panel, search, zoom controls, and annotation tools. The PDF is rendered entirely in the browser.

For a faster start, you can also clone the official webviewer-react sample on GitHub and run npm i to install its dependencies, or watch the Apryse WebViewer in React walkthrough video that builds the same project step by step.

A static viewer is the starting point. The same SDK scales to full document manipulation (like search, redaction, and more) and you can layer those features on without changing your architecture.

WebViewer exposes managers and tool modes you can drive programmatically. From the instance returned during initialization, you can reach the annotation system and switch the active tool. Here's a conceptual snippet that enables a highlight tool when the document loads:

From here you can fill forms with JSON data, flatten forms into page content, build custom digital signature workflows, and import or export annotations to support collaborative review. For a deeper build, see How to Edit & Manipulate PDFs With React.

The WebViewer UI is highly configurable and open-source. You can toggle individual features, switch between light and dark themes, change reader modes, or rearrange the toolbar through configuration. When you need full control, fork the UI project and rebuild the experience around your engine access.

If you'd rather skip the prebuilt UI entirely, you can build directly on the rendering engine and construct your own interface. The guide How To Build a Customizable React PDF Viewer? shows how to use Apryse's proprietary engine to display PDFs with custom scroll, zoom, search, and highlighting, giving you a headless-style integration with a UI you own end to end.

React developers usually choose between open-source renderers and commercial SDKs. Here's a comparison across the dimensions that matter for production apps.

A few notes for context:
PDF.js is a capable, lightweight renderer for displaying PDFs, but it ships no annotation, form, or signature tooling, so you build those layers yourself.

The same applies to react-pdf, which is a React renderer for creating and displaying PDFs in the browser or on the server rather than a full interactive viewer.

Worth noting: in Nutrient's own 2026 roundup of top JavaScript PDF viewers, they list PDF.js as "best for lightweight apps" and react-pdf as "best for React apps," reflecting the narrower scope of those tools.

Among commercial options, Nutrient runs client-side via WebAssembly and offers a headless mode, while Syncfusion advertises a 4.5/5 G2 rating from 700+ reviews and instant loading for large technical manuals.

Where Apryse stands apart is the combination: a single client-side engine that powers the complete PDF SDK across web, server, and mobile, 30+ supported file formats, an open-source WCAG 2.2 AA UI, and the option to deploy with no third-party server dependencies at all. For commercial and enterprise applications that need dedicated support, scalable licensing, and a security model where documents never leave the client, that breadth is the deciding factor open-source tools can't match.

Apryse’s proprietary engine comes with a lot of functionality, straight out-of-the-box. In addition to being great at rendering PDFs, it also supports:

Almost all functionality is performed directly within the browser (using WASM), making it extremely fast and keeping your documents secure rather than them being transferred over the internet and processed on a remote server.

How do I embed a PDF viewer in a React app?

Install the SDK with npm i @pdftron/webviewer, copy the WebViewer static assets from node_modules into your public directory, then mount the viewer in a useEffect hook targeting a div referenced with useRef. The full walkthrough is in the official React Get Started guide, and the complete component code is in the example above.

Is the Apryse React PDF viewer free?

Apryse offers a free trial with a license key, and there are no feature limitations during the trial. You can evaluate the entire SDK before committing. A commercial license is required for production use.

Does Apryse WebViewer work without a server?

Yes. WebViewer is a pure client-side JavaScript library that renders and processes documents in the browser using WebAssembly. There are no server-side dependencies for viewing, annotation, or editing, which makes it suitable for cloud, on-premises, hybrid, and air-gapped environments.

What PDF features does the React SDK support?

WebViewer supports high-fidelity viewing, 30+ annotation types, form filling and flattening, digital signatures, redaction, advanced search with RegEx and wildcards, content extraction, and page manipulation. The UI is open-source and WCAG 2.2 AA compliant. You can use the prebuilt interface or build a custom one on top of the engine.

How does Apryse compare to PDF.js for React apps?

PDF.js is a lightweight, open-source renderer that's great for simply displaying a PDF, but it includes no annotation, form, or signature tooling, so you build those features yourself. Apryse WebViewer is a complete document SDK with those capabilities built in, high-fidelity rendering, an open-source customizable UI, and dedicated enterprise support, all running client-side.

Building a fast, secure, feature-rich PDF viewer in React is straightforward with the Apryse SDK. With one npm install, an asset copy step, and a single useEffect-driven component, you get a working viewer that renders entirely in the browser.

The client-side WebAssembly architecture is what makes this approach both fast and secure: no server latency on rendering, and no document ever leaving the user's browser. And because the same proprietary engine scales from simple viewing to annotations, forms, signatures, and full document manipulation, your starting demo grows into a production workflow without rearchitecting.

Ready to build? Sign up for a free trial key and start with the React PDF Editor documentation, or browse the Apryse SDK getting-started options to pick the right toolkit for web, server, or mobile.