Section:

Build a JavaScript PDF viewer with Apryse WebViewer SDK and npm

This guide demonstrates how to integrate the Apryse WebViewer SDK into a vanilla JavaScript application using Node Package Manager (npm), without a bundler. You’ll install the SDK, serve its assets, and load it directly in the browser using a script tag. The examples use a simple HTML‑based project to focus on the core integration steps. By the end, you’ll initialize WebViewer and render a PDF document in the UI.

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

Prerequisites

Before you start:

  • Install Node.js and npm. We recommend using the latest active LTS release.
  • Install Visual Studio Code or another code editor to develop and debug your code.
  • Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

1. Create your project

Set up your project by creating a folder and preparing a workspace for your WebViewer application.

  1. In your terminal, go to the directory where you want to create the project.
  2. Create a new project folder and move to it so you can start working with it:

Shell

1mkdir webviewer-npm-integration
2cd webviewer-npm-integration

3. Initialize your project and generate a default package.json file:

Shell

1npm init -y

2. Install WebViewer

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 application.

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

Shell

1npm i @pdftron/webviewer

3. Copy WebViewer assets

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. 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:

Shell

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:

Shell

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

3. Copy the webviewer.min.js library file from node_modules to the public directory:

Shell

1npx --yes cpy-cli node_modules/@pdftron/webviewer/webviewer.min.js public/lib/webviewer --flat

Your project should now include a similar structure:

Text

1webviewer-npm-integration/
2├── node_modules/
3│   └── @pdftron/
4│       └── webviewer/
5├── public/
6│   └── lib/
7│       └── webviewer/
8│           ├── core/
9│           ├── ui/
10│           └── webviewer.min.js
11├── package.json
12└── package-lock.json

Info

You can optionally automate asset copying. This is recommended for larger projects. It ensures the WebViewer runtime files are updated consistently as part of your build process.

4. Create PDF viewer

In this section, you'll create an HTML page for your WebViewer application, add the WebViewer script, define a container for the viewer, and initialize WebViewer so it can load and display a document.

  1. Open the webviewer-npm-integration folder in Visual Studio Code.
  2. Create a new index.html file in the webviewer-npm-integration/public folder.
  3. Add the following HTML to the index.html file:

HTML

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Basic WebViewer</title>
6    <meta
7      name="viewport"
8      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9    />
10    
11    
12    <!-- Import WebViewer as a script
13         The src path must point to the webviewer.min.js file
14         inside your project's WebViewer/lib folder -->
15    <script src="/lib/webviewer/webviewer.min.js"></script>
16  </head>
17
18  <body>
19    <!-- Container where WebViewer is rendered -->
20    <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
21  </body>
22</html>

Info

This guide uses a <script> tag to load WebViewer. To learn about other approaches, see framework compatibility and Importing sections.

4. Add the following JavaScript to your index.html file, placing it after the <div id="viewer"> element and before the closing </body> tag:

JavaScript (SDK v10.2+)

index.html

1<script>
2  WebViewer({
3    // Add path to Apryse 'lib' folder on your server
4    path: '/lib/webviewer',
5    // Replace with your license key, key signup at https://dev.apryse.com
6    licenseKey: 'YOUR_LICENSE_KEY',
7    // Specify an initial document to load on startup
8    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
9    // You can also use documents on your server
10    // initialDoc: '/path/to/my/file.pdf',
11  // Provide id of HTML element where WebViewer should be mounted
12  }, document.getElementById('viewer'))
13  .then(instance => {
14    const { documentViewer, annotationManager } = instance.Core;
15
16    // Call methods from instance, documentViewer, and annotationManager as needed
17
18    // You can also access major namespaces from the instance as follows:
19    // const Tools = instance.Core.Tools;
20    // const Annotations = instance.Core.Annotations;
21 
22    documentViewer.addEventListener('documentLoaded', () => {
23      // Call methods relating to the loaded document
24    });
25  });
26</script>

Related Links

Info

  • If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.
  • Starting in version 11, WebViewer instantiates using a web component instead of an iframe by default; however, both methods are available. See this guide for more information.

5. Save the index.html file.

5. Verify your output

Once your project files are in place, serve the webpage so that WebViewer can load its UI and display the PDF you added as the initial document in index.html. We use http-server to preview the page locally in your browser.

1. From your project directory, run the following command to start a local web server:

Shell

1npx http-server -a localhost

If prompted, press y to install http-server. A successful output looks similar to:

Shell

1Starting up http-server, serving ./public
2
3http-server version: 14.1.1
4
5http-server settings: 
6CORS: disabled
7Cache: 3600 seconds
8Connection Timeout: 120 seconds
9Directory Listings: visible
10AutoIndex: visible
11Serve GZIP Files: false
12Serve Brotli Files: false
13Default File Extension: none
14
15Available on:
16  http://localhost:8080

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

Get started video

In this 4-minute video, learn how to install WebViewer in a simple HTML-based project using npm.

Install the Apryse WebViewer SDK in an HTML-based project using npm.

Next Steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales