> 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/core/get-started/get-started/electron.md).

# Electron & Apryse PDF library integration

Learn how to integrate WebViewer Document Viewer & Editor into an Electron desktop app. Watch a step-by-step video guide, download samples, and get started easily. Get your Apryse trial key and start

This guide will show you how to integrate [WebViewer Document Viewer & Editor](https://apryse.com/products/webviewer) into an Electron desktop application.

You can watch a step-by-step [video](https://youtu.be/FyZ40lNE-pY/) to help you get started.

You can also download a ready-to-go sample on [GitHub](https://github.com/ApryseSDK/webviewer-electron-sample/).

## Prerequisites

Prior to starting, you should have already installed [Node](https://nodejs.org/) and [npm](https://www.npmjs.com/).

* Download and install [Electron](https://electronjs.org/docs/tutorial/installation/).
* [Platform specific prerequisites](https://electronjs.org/docs/development/build-instructions-gn/). Electron applications can be built for several platforms and each has its own prerequisites. Please ensure they are fulfilled for your required platform by referring to the `electron.js` documentation.
* Get your Apryse trial key.

{% @apryse-license-key/apryse-license-key platform="SERVER" variant="full" %}

## Get Started with the Sample

### 1. Clone the Sample

Clone the `webviewer-electron-sample` repository:

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

```sh
git clone https://github.com/ApryseSDK/webviewer-electron-sample.git
```

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

Enter the directory and run `npm install`:

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

```sh
cd webviewer-electron-sample
npm install
```

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

This will automatically download and extract the Apryse WebViewer Package.

### 2. Run the Sample

To run the sample, make sure you are in the `webviewer-electron-sample` directory and execute

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

```sh
npm start
```

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

You should see the application start up. It will load the WebViewer and display the PDF sample in `/public/files`:

![](https://3779731113-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fziw3GiL98Xfj63F3He8h%2Fuploads%2Fgit-blob-14c51e28bbe359547eafd76cb13651c818ffa973%2Fb139baca9ad9d1b75ebf67c94fecff1b4b9f003c-810x633.gif?alt=media)

If you run into issues with installing and/or running the application, please return and ensure you have the prerequisites installed.

### 3. Usage

To call more WebViewer APIs, open `/src/App.js` in your favorite text editor and add the API calls to the callback for the WebViewer instantiation. Add your own license key in place of 'YOUR\_LICENSE\_KEY'.:

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

Execute `npm start` again and the theme of the viewer will change:

![](https://3779731113-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fziw3GiL98Xfj63F3He8h%2Fuploads%2Fgit-blob-6742c1653e23134f591b65ef8d3cd91b5ef7aa38%2Fca7c0ac7bd33472bebf639510493ecc8057e2627-808x636.gif?alt=media)

## Troubleshooting

[Network Failure](/web/get-started/faq/viewer-showing-network-failure.md) More information about fixing the `Network Failure` issue on WebViewer.

## Next step

<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="https://github.com/iKettles/apryse-gitbook/tree/main/web/samples/README.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>

{% hint style="info" %}
**You can find the full source code for this project here.**
{% endhint %}


---

# 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/core/get-started/get-started/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.
