> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/libraries-and-frameworks/electron.md).

# Build an Electron PDF viewer with Apryse WebViewer SDK

Create an Electron PDF viewer and editor with Apryse WebViewer. Learn how to integrate the SDK into your Electron app and render PDFs in the viewer UI.

This guide shows how to build an Electron PDF viewer using the Apryse [WebViewer SDK](/web/what-is-webviewer/overview.md). You'll learn how to integrate the SDK into an [Electron](https://www.electronjs.org/docs/latest/) application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use [GitHub sample](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-electron) to get started quickly, or explore the interactive [Showcase demo](https://showcase.apryse.com/) to see WebViewer's full capabilities in action.

## Prerequisites

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

* Install [Node.js](https://nodejs.org/en/download) and npm. See the [Electron documentation](https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites#nodejs-and-npm) for version details.
* Install [Visual Studio Code](https://code.visualstudio.com/Download) or another code editor to develop and debug your code.
* Get your Apryse trial key.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}

## 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](#id-2.-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:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
mkdir webviewer-electron
cd webviewer-electron
npm init -y
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm pkg set main='main.js'
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm pkg set scripts.start="electron ."
```

{% endcode %}
{% endtab %}
{% endtabs %}

The final `package.json` should look like this:

{% tabs %}
{% tab title="JSON" %}
{% code title="package.json" lineNumbers="true" %}

```json
{
  "name": "webviewer-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

5. In your project directory, install Electron:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm install --save-dev electron
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 2. Install WebViewer

Next, install the Apryse WebViewer SDK using npm. This command adds the [WebViewer package](https://www.npmjs.com/package/@pdftron/webviewer) 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:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm i @pdftron/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 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](/web/get-started/copy-assets.md).

1. From your project root, create the `public/lib/webviewer` directory if it doesn't already exist:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes shx mkdir -p public/lib/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Copy all WebViewer static assets from `node_modules/@pdftron/webviewer/public` into the new `public/lib/webviewer` directory:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**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.
{% endhint %}

Your project should now include a similar structure:

{% code lineNumbers="true" %}

```
webviewer-electron/
├─ node_modules/
├─ public/
│  └─ lib/
│     └─ webviewer/
│        ├─ core/
│        ├─ ui/
│        └─ webviewer.min.js
├─ package-lock.json
└─ package.json
└─ ...
```

{% endcode %}

{% hint style="info" %}
**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.
{% endhint %}

## 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:

{% tabs %}
{% tab title="HTML" %}
{% code title="index.html" lineNumbers="true" %}

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Electron WebViewer</title>
    <!-- Load WebViewer library before render.js runs -->
    <script src="./public/lib/webviewer/webviewer.min.js"></script>
  </head>

  <body style="margin: 0; padding: 0; height: 100vh;">
    <!-- WebViewer mounts into this container from render.js -->
    <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
    <!-- Initialize WebViewer after DOM load -->
    <script defer src="render.js">render.js</script>
  </body>
</html>
```

{% endcode %}
{% endtab %}
{% endtabs %}

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:

{% tabs %}
{% tab title="JavaScript" %}
{% code title="main.js" lineNumbers="true" %}

```js
const { app, BrowserWindow } = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // Main entry point
  win.loadFile('index.html');
};

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

<pre class="language-js" data-line-numbers><code class="lang-js">// Get the HTML element where WebViewer will be mounted
const viewerElement = document.getElementById('viewer');

WebViewer(
  {
    // Path to the copied WebViewer static assets
    path: './public/lib/webviewer',
    // Initial document to load when WebViewer starts
    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
    // Replace with your Apryse license key
    licenseKey: '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>',
  },
  // Attach WebViewer to the container element
  viewerElement
).then((instance) => {
  // WebViewer is initialized and ready to use
});
</code></pre>

{% hint style="info" %}
**Info**

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.
{% endhint %}

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:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm start
```

{% endcode %}
{% endtab %}
{% endtabs %}

A successful output looks similar to:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
> webviewer-electron@1.0.0 start
> electron .

Downloading Electron binary...
```

{% endcode %}
{% endtab %}
{% endtabs %}

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.

{% embed url="<https://www.youtube.com/embed/Kp41vkQYxzI?si=m0VN0pi5M5DT-i9->" %}
Integrate the WebViewer SDK in an Electron application.
{% endembed %}

## Next steps

Check out the resources below.

<a href="/web/what-is-webviewer/usage.md" class="button primary">Usage</a><a href="/web/get-started/guides.md" class="button primary">Guides</a><a href="/web/get-started/samples.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/libraries-and-frameworks/electron.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.