Build a JavaScript PDF viewer with Apryse WebViewer SDK using a manual setup

This guide shows how to manually integrate the Apryse WebViewer SDK into a web project without using a package manager or bundler. 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.

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.

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

mkdir webviewer-manual-integration
cd webviewer-manual-integration

2. Download WebViewer

In this step, you’ll manually 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 structure should look similar to this:

webviewer-manual-integration/
└── WebViewer/
    ├── doc/
    ├── lib/
    ├── licenses/
    ├── samples/
    ├── scripts/
    ├── package.json
    └── server.js

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

HTML

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic WebViewer</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    
    <!-- Import WebViewer as a script
         The src path must point to the webviewer.min.js file
         inside your project's WebViewer/lib folder -->
    <script src="WebViewer/lib/webviewer.min.js"></script>
  </head>

  <body>
    <!-- Container where WebViewer is rendered -->
    <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
  </body>
</html>

Info

This guide uses a <script> tag to load WebViewer. If you install the SDK manually, you can also use a hybrid approach and import WebViewer using ES module syntax with a bundler. For more, see Importing.

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

Web Component

<script>
  WebViewer({
    // Add path to Apryse 'lib' folder on your server
    path: 'WebViewer/lib',
    // Replace with your license key, key signup at https://dev.apryse.com
    licenseKey: 'YOUR_LICENSE_KEY',
    // Specify an initial document to load on startup
    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
    // You can also use documents on your server
    // initialDoc: '/path/to/my/file.pdf',
  // Provide id of HTML element where WebViewer should be mounted
  }, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    // Call methods from instance, documentViewer, and annotationManager as needed

    // You can also access major namespaces from the instance as follows:
    // const Tools = instance.Core.Tools;
    // const Annotations = instance.Core.Annotations;

    documentViewer.addEventListener('documentLoaded', () => {
      // Call methods relating to the loaded document
    });
  });
</script>

WebViewer() WebComponent() WebViewerOptions DocumentViewer.documentLoaded

Iframe

<script>
  // Uses iframe-based WebViewer, which was default through version 10

  WebViewer.Iframe({
    // Add path to Apryse 'lib' folder on your server
    path: 'WebViewer/lib',
    // Replace with your license key, key signup at https://dev.apryse.com
    licenseKey: 'YOUR_LICENSE_KEY',
  // Provide id of HTML element where WebViewer should be mounted  
  }, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core;
    
    // Call methods from UI, Core, instance, documentViewer, and annotationManager as needed

    documentViewer.addEventListener('documentLoaded', () => {
      // Call methods relating to loaded document
    });
    
    instance.UI.loadDocument('https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf');
  });
</script>

WebViewer() WebComponent() WebViewerOptions DocumentViewer.documentLoaded UI.loadDocument()

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 by default instead of an iframe. Both methods are still supported. See this guide for more information.

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

npx http-server -a localhost

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

Shell

Starting up http-server, serving ./public

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://localhost:8080

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

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 showing how to integrate WebViewer without a package manager.

Next steps

UsageGuidesSamplesAPI docs