Nutrient Web SDK Examples

https://github.com/pspdfkit/nutrient-web-examples
Admin
This project provides framework integration examples for the Nutrient Web SDK, showcasing how to...
Tokens:7,830
Snippets:157
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start the application

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/elm/README.md

Launch the development server to view the example in the browser.

```bash
npm run start
```

--------------------------------

### Start development server

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/svelte-kit/README.md

Launch the development environment after installing dependencies.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Example Management Commands

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/AGENTS.md

Common CLI commands for installing dependencies, formatting code, running tests, and auditing examples.

```bash
# Install all example dependencies
npm run install-dependencies

# Format code (Biome)
npm run format

# Run e2e smoke tests (starts each example, checks PSPDFKit loads)
npm run e2e-tests

# Run Playwright directly for a single example
SERVER_DIR=examples/javascript-vite npm run test

# Audit and fix vulnerabilities across all examples
npm run audit-fix

# Bump Nutrient SDK version in all examples
npm run update-nutrient-version
```

--------------------------------

### Clone the React Example Repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/react/README.md

Use these commands to download the example project and navigate into the directory.

```bash
git clone https://github.com/PSPDFKit/pspdfkit-web-example-react.git
cd pspdfkit-web-example-react
```

--------------------------------

### Clone and Navigate to Blazor Example

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/blazor/README.md

Use these commands to download the repository and enter the Blazor example directory.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git

cd nutrient-web-examples/examples/blazor
```

--------------------------------

### Build and serve the application

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/vue/README.md

Compile the project and start the development server.

```bash
npm run build
npm run serve
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/nuxtjs/README.md

Download the example project from the official repository.

```bash
git clone https://github.com/PSPDFKit/pspdfkit-web-example-nuxtjs.git
cd pspdfkit-web-example-nuxtjs
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/asp-net/README.md

Initial step to obtain the example project files.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/asp-net
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/angular/README.md

Download the example project from the official repository.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/angular
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/javascript-vite/README.md

Initial step to obtain the example project files.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/javascript-vite
```

--------------------------------

### Install project dependencies

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/vue-composition-api/README.md

Run this command to install all required project dependencies.

```sh
pnpm install
```

--------------------------------

### Install electron-packager

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/README.md

Global installation command for the electron-packager utility.

```bash
npm install -g electron-packager
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron/README.md

Commands to clone the repository and install necessary project dependencies.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/electron
```

```bash
npm install
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/elm/README.md

Download the example project from the official GitHub repository.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/elm
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/README.md

Commands to clone the repository and install necessary project dependencies.

```bash
git clone https://github.com/PSPDFKit/pspdfkit-electron-example.git
cd pspdfkit-electron-example
```

```bash
npm install
```

--------------------------------

### Start the development server

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/angular/README.md

Launch the Angular application locally.

```bash
npm start
```

--------------------------------

### Install dependencies

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/angular/README.md

Install the required project dependencies using npm.

```bash
npm install
```

--------------------------------

### Start development server

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/vue-composition-api/README.md

Launches the development server with hot-reload capabilities.

```sh
pnpm dev
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/nextjs/Readme.md

Download the example project from the official repository and navigate to the Next.js directory.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples
cd nutrient-web-examples/examples/nextjs
```

--------------------------------

### Run the application

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/gatsbyjs/README.md

Commands to start the development server or build and serve the production version of the application.

```bash
npm run start
```

```bash
npm run build
nom run serve
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/laravel/README.md

Initial step to download the example project and navigate to the Laravel directory.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git

cd nutrient-web-examples/examples/laravel
```

--------------------------------

### Install Nutrient Web SDK

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/wasm-benchmark/README.md

Install the required npm package and move the distribution files to the public vendor directory.

```bash
npm install --save @nutrient-sdk/viewer
mkdir -p public/vendor
cp -R node_modules/@nutrient-sdk/viewer/dist public/vendor/nutrient
```

--------------------------------

### Install project dependencies

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/salesforce/README.md

Install the required npm modules using either npm or Yarn.

```npm
npm install
```

```yarn
yarn install
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/pwa/README.md

Commands to clone the example repository and navigate to the PWA directory.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/pwa
```

--------------------------------

### Run the development server

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/nextjs/Readme.md

Start the Next.js development server to view the application locally.

```shell
npm run dev
```

--------------------------------

### Launch the application

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/laravel/README.md

Commands to compile assets and start the local Laravel development server.

```bash
npm run dev
php artisan serve
```

--------------------------------

### Run CDN Approach

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/webpack/README.md

Commands to start the application using the default CDN-based SDK loading method.

```bash
npm run start
```

```bash
npm run start:dev
```

--------------------------------

### Copy environment file

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/laravel/README.md

Commands to initialize the .env file from the example template based on the operating system.

```bash
copy .env.example .env
```

```bash
cp .env.example .env
```

--------------------------------

### Clone the repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/gatsbyjs/README.md

Commands to clone the example repository and navigate to the Gatsby.js project directory.

```bash
git clone https://github.com/PSPDFKit/nutrient-web-examples.git
cd nutrient-web-examples/examples/gatsbyjs
```

--------------------------------

### Update SDK Version

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/AGENTS.md

Updates the @nutrient-sdk/viewer version across all example directories.

```bash
./scripts/update-nutrient-in-examples.sh <new-version>
```

--------------------------------

### Application Initialization and Document Loading

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron/src/index.html

Handles the setup of the Nutrient viewer instance, platform detection, and document loading logic.

```javascript
import { dragAndDrop } from "./lib/drag-and-drop.js"; import { makeToolbarItems } from "./lib/toolbar.js"; /** * We append `process.platform` ass a CSS class to `<body>` so we can offset * the frame less window alternative on macOS. * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos */ document.body.classList.add( `platform-${window.electron.processPlatform()}` ); /** * We store the `NutrientViewer.Instance` in this variable so we can access it from * everywhere. */ let instance = null; const { documentExport, documentImport, askUserToDiscardChanges } = window.electron; /** * Creates an onAnnotationsChange handler that keeps track of changes. * * We skip the first call since `annotations.change` fires when the PDF is * initialized and populated with annotations. */ let hasUnsavedAnnotations = false; function createOnAnnotationsChange() { let initialized = false; return () => { if (initialized) { hasUnsavedAnnotations = true; } else { initialized = true; } }; } /** * If there is an existing running instance of Nutrient, it is destroyed before * a creating a new one. * * This process will make sure that the WebAssembly module is optimally reused. */ async function load(document) { if (instance) { NutrientViewer.unload(instance); hasUnsavedAnnotations = false; instance = null; } // Create our custom toolbar const toolbarItems = makeToolbarItems( NutrientViewer.defaultToolbarItems, function exportFile() { documentExport(instance, () => (hasUnsavedAnnotations = false)); }, function importFile() { if (hasUnsavedAnnotations) { askUserToDiscardChanges(() => documentImport(load)); } else { documentImport(load); } } ); // Set up the configuration object. A custom style sheet is used to customize // the look and feel of Nutrient. const configuration = { document, container: "#root", styleSheet: ["./nutrient.css"], // appName must match the license's bundle ID appName: "nutrient-electron-example", // Add when using a license key // licenseKey: "LICENSE KEY GOES HERE", }; instance = await NutrientViewer.load(configuration); instance.setToolbarItems(toolbarItems); instance.addEventListener( "annotations.change", createOnAnnotationsChange() ); dragAndDrop(instance, (file) => { if (hasUnsavedAnnotations) { askUserToDiscardChanges(() => load(file)); } else { load(file); } }); } // Open a default document, when the app is started. window.onload = () => load("./assets/example.pdf");
```

--------------------------------

### View Repository Structure

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/AGENTS.md

Displays the directory layout of the nutrient-web-examples repository, including framework-specific examples and utility scripts.

```text
nutrient-web-examples/
├── examples/
│   ├── angular/              # Angular (ng serve)
│   ├── asp-net/              # ASP.NET (C#, no Node)
│   ├── blazor/               # Blazor Server + WASM (C#, no Node)
│   ├── electron/             # Electron (preload pattern)
│   ├── electron-nodeintegration/  # Electron (nodeIntegration)
│   ├── elm/                  # Elm
│   ├── gatsbyjs/             # Gatsby (⚠️ deprecated framework)
│   ├── javascript-vite/      # Vanilla JS + Vite ← simplest starting point
│   ├── laravel/              # Laravel + PHP
│   ├── nextjs/               # Next.js
│   ├── nuxtjs/               # Nuxt.js
│   ├── pwa/                  # Progressive Web App
│   ├── react/                # React (create-react-app)
│   ├── salesforce/           # Salesforce LWC
│   ├── svelte/               # Svelte
│   ├── svelte-kit/           # SvelteKit
│   ├── typescript/           # TypeScript + Webpack
│   ├── typescript-vite/      # TypeScript + Vite
│   ├── vite/                 # Vanilla JS + Vite (alternate)
│   ├── vue/                  # Vue 3
│   ├── vue-composition-api/  # Vue 3 Composition API
│   ├── wasm-benchmark/       # WASM performance benchmark
│   └── webpack/              # Webpack
├── tests/
│   └── load.test.ts          # Playwright smoke test (shared across examples)
├── scripts/
│   ├── install-dependencies.sh    # Install deps in all examples
│   ├── e2e-tests.sh              # Run Playwright against each example
│   ├── audit-dependencies.sh     # npm audit fix across examples
│   ├── update-nutrient-in-examples.sh  # Bump SDK version everywhere
│   ├── update-nutrient-in-cdn.js       # Update CDN URLs
│   └── check-biome-version.sh    # Verify Biome version consistency
├── playwright.config.ts      # Playwright config (uses SERVER_DIR env var)
└── biome.json                # Biome formatter config
```

--------------------------------

### Run Playwright Smoke Test

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/AGENTS.md

Executes the Playwright smoke test suite for a specific example directory.

```bash
SERVER_DIR=examples/<framework-name> npm run test
```

--------------------------------

### Run local npm package development and production commands

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/javascript-vite/README.md

Commands for running the application in development or building for production using the local npm package installation.

```bash
npm run dev:npm
```

```bash
npm run build:npm
npm run preview:npm
```

--------------------------------

### Build and Serve for Production

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/react/README.md

Create a production-ready build and serve it locally.

```bash
npm run build
npx serve -s build
```

--------------------------------

### Build and preview production

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/typescript-vite/README.md

Create a production-ready build and serve it locally.

```shell
npm run build
npm run preview
```

--------------------------------

### Configure and Run npm Package Approach

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/webpack/README.md

Steps to switch to the npm package approach by modifying the HTML and running the appropriate build commands.

```html
<!-- Comment this line: -->
<!-- <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.17.0/nutrient-viewer.js"></script> -->
```

```bash
npm run start:npm
```

```bash
npm run start:dev:npm
```

--------------------------------

### Build Production Version

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/wasm-benchmark/README.md

Create an optimized production build, specifying the public URL path for hosting.

```bash
PUBLIC_URL="/webassembly-benchmark" npm run build
```

--------------------------------

### Create a Svelte project

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/svelte-kit/README.md

Initialize a new Svelte project using the sv CLI tool.

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### Build Production Packages

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/README.md

Commands to build the application for different platforms.

```bash
npm run package-mac-intel
npm run package-mac-apple (Apple Silicon)
npm run package-win (requires Wine: `brew cask install xquartz`, `brew install wine`)
npm run package-linux (requires `apt-get install libgconf-2-4` on target Linux)
```

--------------------------------

### Initialize Renderer Process

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/src/index.html

Appends the current platform to the body class list and requires the renderer script.

```javascript
/** * We append `process.platform` ass a CSS class to <body> so we can offset * the frame less window alternative on macOS. * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos */ document.body.classList.add(`platform-${process.platform}`); /** * Invoke the JavaScript for the renderer process. */ require("./renderer.js");
```

--------------------------------

### Run the Nuxt.js application

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/nuxtjs/README.md

Commands for development, production builds, and static site generation.

```bash
# serve with hot reload at localhost:3000
npm run dev

# build for production and launch server
npm run build
npm start

# generate static project
npm run generate
```

--------------------------------

### Build production artifacts

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/pwa/README.md

Command to generate production-ready files in the dist directory.

```bash
npm run build
```

--------------------------------

### Configure Nutrient Viewer with License Key

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron/README.md

Pass the license key and bundle ID to the configuration object when loading the viewer.

```js
NutrientViewer.load({
  // other options
  licenseKey: "LICENSE KEY GOES HERE",
  electronAppName: "BUNDLE ID GOES HERE",
});
```

--------------------------------

### Run CDN-based development and production commands

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/javascript-vite/README.md

Commands for running the application in development or building for production using the default CDN approach.

```bash
npm run dev
```

```bash
npm run build
npm run preview
```

--------------------------------

### Build for production

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/vue-composition-api/README.md

Performs type-checking, compilation, and minification for production deployment.

```sh
pnpm build
```

--------------------------------

### Clone the Nutrient Salesforce SDK repository

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/salesforce/README.md

Use this command to download the project source code from GitHub.

```bash
git clone https://github.com/PSPDFKit/salesforce.git
```

--------------------------------

### Authenticate with Salesforce CLI

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/salesforce/README.md

Initiate the authentication flow to connect the CLI to your Salesforce organization.

```bash
sfdx force:auth:web:login --setalias mySalesforceOrg --instanceurl https://login.salesforce.com --setdefaultusername
```

--------------------------------

### Deploy source to Salesforce

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/salesforce/README.md

Deploy the project source files to the authenticated Salesforce organization using the package manifest.

```bash
sfdx force:source:deploy -x manifest/package.xml
```

--------------------------------

### Enable Developer Tools

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/README.md

Uncomment this line in index.js to open the DevTools within the Electron window.

```javascript
// Open the DevTools.
mainWindow.webContents.openDevTools();
```

--------------------------------

### Retrieve SDK download URL

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/asp-net/README.md

Use curl and jq to fetch the latest tarball URL for the Nutrient Web SDK from the npm registry.

```bash
curl https://registry.npmjs.org/@nutrient-sdk/viewer/ | jq '.versions[."dist-tags".latest].dist.tarball'
```

--------------------------------

### Initialize Sidebar Visibility

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/pwa/src/index.html

Sets the initial sidebar visibility class based on screen width and local storage preferences.

```javascript
if ( document.body.clientWidth >= 1080 && localStorage.getItem("sidebarVisible") !== "false" ) { document.documentElement.classList.add("root--sidebar-visible"); }
```

--------------------------------

### Define Electron Window Styles

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/electron-nodeintegration/src/index.html

Sets the base layout for the application, including handling for macOS frameless window drag regions.

```css
html, body { margin: 0; padding: 0; background: #f6f7fa; } header { display: none; } #root { width: 100vw; height: 100vh; } /** * Offset the frame less window alternative on macOS. * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos */ body.platform-darwin header { -webkit-app-region: drag; display: block; height: 22px; background-color: rgb(252, 253, 254); } body.platform-darwin #root { height: calc(100vh - 22px); }
```

--------------------------------

### Configure Nutrient Web SDK version

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/salesforce/README.md

Update the script tag in the Visualforce page to point to the desired CDN version.

```html
<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.0.0/nutrient-viewer.js" type="text/javascript"></script>
```

--------------------------------

### Register and Manage Service Worker

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/pwa/src/index.html

Registers a service worker and listens for updates to trigger a page reload when a new version is available.

```javascript
let newWorker; let isReloading = false; function checkSwReload() { // Has service worker state changed? if (newWorker.state === "installed") { if (navigator.serviceWorker.controller) { if ( window.confirm( "An update is available. Would you like to update and reload?" ) ) { newWorker.postMessage({ action: "skipWaiting" }); } } } } // Register the Service Worker to enable offline capabilities // and caching. if ("serviceWorker" in navigator) { window.addEventListener("load", function() { navigator.serviceWorker .register("./serviceWorker.js") .then(function(reg) { if (reg.waiting) { newWorker = reg.waiting; checkSwReload(); } else { reg.addEventListener("updatefound", function() { console.log("New service worker update found."); newWorker = reg.installing; newWorker.addEventListener("statechange", function() { // New service worker should be installed now. checkSwReload(); }); }); } }); navigator.serviceWorker.addEventListener( // Fired when the service worker updates "controllerchange", function() { if (isReloading) { console.log("Already refreshing.. "); return; } console.log("Reloading now..."); window.location.reload(); isReloading = true; } ); }); }
```
Tokens:
Raw