Section:

Get started with Apryse WebViewer SDK in a JavaScript app via manual install

This guide shows how to manually integrate the WebViewer SDK into a web project without using a package manager. The approach is useful when you need full control over asset hosting, or when npm or CDN-based setups aren’t an option. The examples use a simple HTML‑based project to focus on the core integration steps. By the end, you’ll successfully initialize WebViewer and render a PDF document in the UI.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

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. Create a new folder for your project by running the following command in your terminal:

Shell

1mkdir webviewer-manual-integration
2

2. Move into the project folder so you can start working in it:

Shell

1cd webviewer-manual-integration
2

2. Download WebViewer

In this step, you’ll download the WebViewer package and add it to your project.

  1. Download the WebViewer package, which includes the library files, samples, and documentation.
  2. Extract the downloaded WebViewer.zip file into the webviewer-manual-integration project folder. Your project folder should look like this:

Text

1webviewer-manual-integration/
2└── WebViewer/
3    ├── doc/
4    ├── lib/
5    ├── licenses/
6    ├── samples/
7    ├── scripts/
8    ├── package.json
9    └── server.js

3. Set up WebViewer

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-manual-integration folder in Visual Studio Code.
  2. Create a new index.html file in the webviewer-manual-integration folder.
  3. Open the index.html file and add the following HTML to it:

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    <!-- Import WebViewer as a script -->
12    <script src="WebViewer/lib/webviewer.min.js"></script>
13  </head>
14
15  <body>
16    <!-- Container where WebViewer is rendered -->
17    <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
18  </body>
19</html>

This file defines the basic structure of your WebViewer application:

  • Make sure the src path points to the webviewer.min.js file inside the WebViewer/lib folder.
  • This guide uses a <script> tag to load WebViewer. You can optionally import WebViewer as a CommonJS module.

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+)

1<script>
2  WebViewer({
3    // Add path to the Apryse 'lib' folder on your server
4    path: 'WebViewer/lib',
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 the 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

  • Set the path to the location of webviewer.min.js in your project.
  • Replace YOUR_LICENSE_KEY with your license key. If you're signed in with an Apryse account, your license key is automatically prepopulated.
  • Use initialDoc to define the document to load on startup.
  • Provide the ID of the HTML element where WebViewer should be mounted (in this example, viewer).

Info

Starting in version 11, WebViewer instantiates using a web component by default instead of an iframe. Both methods are still supported. See this guide for more information.

5. Save the index.html file.

4. 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 ./
2
3http-server version: 14.x.x
4
5Available on:
6  http://localhost:8080
7  http://127.0.0.1:8080
8
9Hit CTRL-C to stop the server
10
11[2026-01-01T12:00:00.000Z]  "GET /" "Mozilla/5.0"

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

(Optional) Import as a module

You can also import WebViewer as a CommonJS module when installed manually. It's recommended to install via npm if you have the option.

First, install the module. Replace PATH_TO_WEBVIEWER with the path from your package.json file to the WebViewer lib folder.

sh

1npm install PATH_TO_WEBVIEWER/lib

Then use the following import statement in your JavaScript file.

JavaScript

1import WebViewer from 'webviewer';
2// import Apryse instead of WebViewer for 4.0 ~ 5.0

Get started video

In this 5-minute video, learn how to manually install WebViewer in a simple HTML-based project without using npm or a package manager.

Manual installation video showing how to integrate WebViewer without a package manager.

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