React PDF Library - WebViewer Get Started

This guide will show you how to integrate WebViewer Document Viewer & Editor into a React PDF application.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should have already installed Node and npm.

You should also have a React project to work in. If you do not have one, we recommend following our Vite guide as it is the easiest way to get started.

Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.

Run the following command in your Terminal or Command Line:

1npm i @pdftron/webviewer

We also have to copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. Typically, this will be a public folder.

In package.json we will add a command that copies these static assets to our public folder.

1{
2  "scripts": {
3    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
4    "dev": "npm run copy-webviewer && next dev",
5    "build": "npm run copy-webviewer && next build",
6  }
7}

You'll notice that we also updated our other scripts to run this command first - this is recommended to make sure your WebViewer assets are always in the right place.

Read more about copying static assets.

Import WebViewer into your component.

1import WebViewer from '@pdftron/webviewer';

Create a reference where WebViewer will be placed or mounted.

1import {useRef} from 'react';
2
3const MyComponent = () => {
4  const viewer = useRef(null);
5
6  return (
7    <div className="MyComponent">
8      <div className="header">React sample</div>
9      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
10    </div>
11  );
12};

Inside of a useEffect hook, initialize WebViewer. Ensure that the path property in the constructor points to where you copied your static assets earlier.

1import {useEffect, useRef} from 'react';
2import WebViewer from '@pdftron/webviewer'
3
4const MyComponent = () => {
5  const viewer = useRef(null);
6
7  useEffect(() => {
8    WebViewer(
9      {
10        path: '/lib/webviewer',
11        licenseKey: 'YOUR_LICENSE_KEY',
12        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
13      },
14      viewer.current,
15    ).then((instance) => {
16        const { documentViewer } = instance.Core;
17        // you can now call WebViewer APIs here...
18      });
19  }, []);
20
21  return (
22    <div className="MyComponent">
23      <div className="header">React sample</div>
24      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
25    </div>
26  );
27};

1import {useEffect, useRef} from 'react';
2import WebViewer from '@pdftron/webviewer'
3
4const MyComponent = () => {
5  const viewer = useRef(null);
6
7  useEffect(() => {
8    WebViewer(
9      {
10        path: '/lib/webviewer',
11        licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
12        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
13      },
14      viewer.current,
15    ).then((instance) => {
16        const { docViewer } = instance;
17        // you can now call WebViewer APIs here...
18      });
19  }, []);
20
21  return (
22    <div className="MyComponent">
23      <div className="header">React sample</div>
24      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
25    </div>
26  );
27};

You can now checkout other guides like sharing WebViewer instance across components, how to open your own documents or how to disable certain features.