---
title: "Add PDF functionality with Electron"
canonical_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/electron/"
md_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/electron.md"
last_updated: "2026-05-15T19:10:05.144Z"
description: "Learn how to integrate Nutrient Web SDK into your Electron application. Step-by-step guide for adding PDF viewing, editing, and annotation features."
---
# Add PDF functionality with Electron
Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.
This guide walks you through the steps to integrate Nutrient into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).
**Test without installing**
You can test the SDK capabilities in our playground.
[Read more](https://nutrient.io/demo/sandbox)
**Jump to example**
Prefer to jump straight to code? View the example repo on GitHub.
[Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/electron)
## Installation
#### Note: Creating a new project (optional)
If you don’t yet have an Electron project set up, create one with:
```sh
npm create electron@latest nutrient-electron-example
```
**Steps:**
1. Add the Nutrient Web SDK (`@nutrient-sdk/viewer`) dependency:
```bash
npm install @nutrient-sdk/viewer
# or
yarn add @nutrient-sdk/viewer
# or
pnpm install @nutrient-sdk/viewer
```
## Rendering a PDF
**Steps:**
1. Rename the PDF document you want to display in your application to `document.pdf`, and place it in the `public` directory. You can use [this demo document](https://www.nutrient.io/downloads/nutrient-web-demo.pdf) as an example.
2. In the root folder of your application, add the following to the `index.html` file in the place where you want to add the PDF viewer:
```html
Nutrient for Electron Example App
```
> **Note:** Adding `useCDN: true` will load the SDK assets from the CDN if `baseUrl` isn’t provided. This flag was introduced in version 1.9.0. If your setup relies on the previous behavior of autodetecting the assets without `baseUrl`, you can omit this flag for now, but be aware that this behavior is deprecated. In future versions, loading from CDN will become a default when `baseUrl` isn’t explicitly provided. `useCDN: true` has no effect if `baseUrl` is set.
3. Make sure you’ve enabled the `file` protocol in your main process:
```js
// Make sure to enable access to the local file system. This is required
// to load PDF files and Nutrient dependencies from the local file system.
electron.protocol.registerSchemesAsPrivileged([
{
scheme: "file",
privileges: { secure: true, standard: true },
},
]);
```
4. Start the development server:
```bash
npm run start
# or
yarn start
# or
pnpm start
```
5. You’ll see the PDF rendered in the UI.
### Optimizing load performance
If your app doesn't open a PDF immediately — for example, the user navigates to a viewer on a different page — call [`NutrientViewer.preloadWorker()`](https://www.nutrient.io/api/web/functions/NutrientViewer.preloadWorker.html) early in your app to fetch and compile the WebAssembly artifacts in the background. When `NutrientViewer.load()` runs later, it can start rendering without waiting for them.
```js
// Call early — for example, on app init or after login.
NutrientViewer.preloadWorker();
```
Refer to the [performance best practices](https://www.nutrient.io/guides/web/best-practices/performance.md) guide for more optimization techniques.
## Troubleshooting
**Example**
View the example repo on GitHub.
[Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/electron)
**Facing issues?**
Visit the troubleshooting guide for solutions to some common errors.
[Read more](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md)
---
## Related pages
- [Add PDF functionality with ASP.NET](/sdk/web/getting-started/other-frameworks/aspnet.md)
- [Add PDF functionality with JavaScript + Vite](/sdk/web/getting-started/other-frameworks/javascript.md)
- [Add PDF functionality with Flutter](/sdk/web/getting-started/other-frameworks/flutter.md)
- [Add PDF functionality with Angular](/sdk/web/getting-started/other-frameworks/angular.md)
- [Add PDF functionality with PHP](/sdk/web/getting-started/other-frameworks/php.md)
- [Add PDF functionality with Nuxt](/sdk/web/getting-started/other-frameworks/nuxt.md)
- [Add PDF functionality with PWA](/sdk/web/getting-started/other-frameworks/pwa.md)
- [Add PDF functionality with jQuery](/sdk/web/getting-started/other-frameworks/jquery.md)
- [Add PDF functionality with Laravel](/sdk/web/getting-started/other-frameworks/laravel.md)
- [Add PDF functionality with Svelte](/sdk/web/getting-started/other-frameworks/svelte.md)
- [Add PDF viewing and editing to Vue applications](/sdk/web/getting-started/other-frameworks/vue.md)
- [Add PDF functionality with Blazor](/sdk/web/getting-started/other-frameworks/blazor.md)