Section:

Build an Electron PDF viewer with Apryse WebViewer SDK

This guide shows how to build an Electron PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into an Electron application to render, view, and interact with PDF documents using the WebViewer UI.

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

Prerequisites

This guide assumes basic familiarity with Electron development. Before you start:

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 an Electron project

In this section, you’ll create a new Electron application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have an Electron app, skip this and continue to Install WebViewer.

  1. In your terminal, go to the directory where you want to create the project.
  2. Create a new project directory, initialize your project, and generate a package.json file:

Shell

1mkdir webviewer-electron
2cd webviewer-electron
3npm init -y

3. Update the main entry point in the package.json file to main.js :

Shell

1npm pkg set main='main.js'

4. Update the scripts section and the start command in the package.json:

Shell

1npm pkg set scripts.start="electron ."

The final package.json should look like this:

JSON

package.json

1{
2  "name": "webviewer-electron",
3  "version": "1.0.0",
4  "description": "",
5  "main": "main.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "start": "electron ."
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC",
13  "type": "commonjs"
14}

5. In your project directory, install Electron:

Shell

1npm install --save-dev electron

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

After navigating to your webviewer-electron 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. In an Electron project, you must copy these assets into the public directory so they can be served correctly. For more, see Copying WebViewer static assets.

1. In your terminal, 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

Info

Unlike frameworks such as Vite, Nuxt, or Next.js, Electron doesn't use a module bundler by default to resolve dependencies and prepare them for the browser. As a result, you must manually include the webviewer.min.js file in your HTML before using it.

Your project should now include a similar structure:

Text

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

Info

The path option used when initializing WebViewer must point to this directory (for example, /lib/webviewer). If the path is incorrect, WebViewer will fail to load.

4. Create the PDF viewer

In this section, you’ll add WebViewer to your Electron app by creating an HTML interface and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

  1. Open Visual Studio Code.
  2. Create an index.html file in your project root and add the following to define your app UI:

HTML

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Electron WebViewer</title>
7    <!-- Load WebViewer library before render.js runs -->
8    <script src="./public/lib/webviewer/webviewer.min.js"></script>
9  </head>
10
11  <body style="margin: 0; padding: 0; height: 100vh;">
12    <!-- WebViewer mounts into this container from render.js -->
13    <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
14    <!-- Initialize WebViewer after DOM load -->
15    <script defer src="render.js">render.js</script>
16  </body>
17</html>

3. Create a main.js file in your project root, then add the following code to open an Electron window and load your index.html file:

JavaScript

main.js

1const { app, BrowserWindow } = require('electron');
2
3const createWindow = () => {
4  const win = new BrowserWindow({
5    width: 800,
6    height: 600,
7  });
8
9  // Main entry point
10  win.loadFile('index.html');
11};
12
13app.whenReady().then(() => {
14  createWindow();
15
16  app.on('activate', () => {
17    if (BrowserWindow.getAllWindows().length === 0) {
18      createWindow();
19    }
20  });
21});
22
23app.on('window-all-closed', () => {
24  if (process.platform !== 'darwin') {
25    app.quit();
26  }
27});

4. Create a render.js file in your project root, then add the following code to initialize WebViewer inside the HTML UI:

JavaScript

render.js

1// Get the HTML element where WebViewer will be mounted
2const viewerElement = document.getElementById('viewer');
3
4WebViewer(
5  {
6    // Path to the copied WebViewer static assets
7    path: './public/lib/webviewer',
8    // Initial document to load when WebViewer starts
9    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
10    // Replace with your Apryse license key
11    licenseKey: 'YOUR_LICENSE_KEY',
12  },
13  // Attach WebViewer to the container element
14  viewerElement
15).then((instance) => {
16  // WebViewer is initialized and ready to use
17});

5. Save all files modified in this section.

5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your Electron application to launch WebViewer and view the PDF inside the app window.

1. From your project directory, run the following command to start the application:

Shell

1npm start

A successful output looks similar to:

Shell

1> webviewer-electron@1.0.0 start
2> electron .
3
4Downloading Electron binary...

2. The Electron app opens and displays the WebViewer UI with the PDF loaded.

Get started video

In this 5-minute video, learn how to install and integrate the Apryse WebViewer SDK into an Electron project.

Integrate the WebViewer SDK in an Electron application.

Next steps

Check out the resources below.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales
Electron PDF viewer & editor | Get with Apryse WebViewer SDK | Apryse documentation