### Setup and Run Nutrient Web SDK with Webpack

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

Commands to clone the repository, install project dependencies using npm, and start the web application. These steps are essential for setting up the example project.

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

```bash
npm run start
```

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

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

### Clone and Install Dependencies

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

Steps to clone the repository and install project dependencies using npm. This is the initial setup required before running the Electron application.

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

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

### Project Setup and Running Commands

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

Provides essential bash commands for cloning the repository, installing project dependencies using npm, and running the React application in development or production modes.

```bash
git clone https://github.com/PSPDFKit/pspdfkit-web-example-react.git
cd pspdfkit-web-example-react
npm install
npm start
npm run build
npx serve -s build
```

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

### Run the Electron Application

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

Command to start the Electron application after installing dependencies. This command launches the developed application.

```bash
npm run start
```

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

### Run the Nutrient Web Example App

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

Starts the Typescript application. After installation, this command launches the example, typically making it accessible via a local development server.

```bash
npm start
```

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

### Project Setup and Development Commands

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

Essential shell commands for managing the Vue project. Includes installing dependencies, starting the development server with hot-reloading, and building the project for production.

```sh
pnpm install
```

```sh
pnpm dev
```

```sh
pnpm build
```

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

### Install Project Dependencies

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

Installs all necessary project dependencies for the PWA example using npm.

```bash
npm install
```

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

### Run the Electron Application

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

Command to start the PSPDFKit Electron application after dependencies are installed. The application will launch automatically.

```bash
npm run start
```

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

### Run the Elm Example Application

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

Starts the Elm example application, typically by launching a local development server.

```bash
npm run start
```

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

### Run Nutrient Web Example in Development

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

Starts the Nutrient Web SDK PWA example in development mode, allowing for live testing and debugging.

```bash
npm run start
```

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

### Install electron-packager

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

Installs the `electron-packager` globally, a tool recommended for building production bundles for Electron applications.

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

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

### Clone and Install Project Dependencies

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

Commands to clone the PSPDFKit Electron example repository and install its Node.js dependencies using npm.

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

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

### Clone and Navigate Nutrient Web Examples

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

Clones the example repository from GitHub and navigates into the specific Laravel example directory for further setup.

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

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

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

### Clone Nutrient Web Example Repo

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

Clones the example project repository from GitHub. This is the first step to get the project files onto your local machine. It requires Git to be installed.

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

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

### Install and Use Electron Packager

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

Commands to globally install `electron-packager` and then use it to build production packages for different platforms like macOS, Windows, and Linux.

```bash
npm install -g electron-packager

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)
```

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

### Install Project Dependencies

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

Installs the necessary project dependencies using npm. This command downloads and sets up all required packages for the Typescript example.

```bash
npm install
```

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

### Environment File Setup

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

Copies the example environment file to the actual environment file, which is a common practice in Laravel for configuration.

```windows-cmd
copy .env.example .env
```

```unix-cmd
cp .env.example .env
```

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

### Install Project Dependencies with npm

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

Installs the necessary project dependencies for the Next.js example using npm. This command downloads and sets up all required packages for the application.

```shell
npm install
```

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

### Run the Angular Example Application

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

Starts the Angular development server to run the Nutrient Web SDK example. The application will be accessible at http://localhost:4200.

```bash
npm start
```

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

### Install Project Dependencies

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

Installs the necessary project dependencies using npm for the Elm example.

```bash
npm install
```

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

### Run Development Server

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

Starts the Svelte development server, making the application accessible in your browser.

```bash
npm run dev
```

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

### Build Production Artifacts

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

Builds a production-ready version of the Nutrient Web SDK PWA example, creating deployable artifacts.

```bash
npm run build
```

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

### Clone Nutrient Web SDK Example Repository

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

Clones the Nutrient Web SDK example repository from GitHub to your local machine. This is the first step to get the project files for integration.

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

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

### Develop Svelte Project with npm (bash)

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

Shows how to start a development server for a Svelte project using `npm run dev`. Includes an option to automatically open the app in a new browser tab.

```bash
npm run dev

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

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web Examples repository from GitHub and navigates into the PWA example directory.

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

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

### Install Project Dependencies

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

Installs all necessary project dependencies using npm. This command should be run after cloning the repository.

```bash
npm install
```

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

### Run Nutrient Web Example App

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

Starts the Nuxt.js development server with hot reloading enabled, allowing for live updates as you make changes. It also provides commands for building the project for production and generating a static site. Requires Node.js and npm.

```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 Svelte Project for Production (bash)

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

Explains how to create a production-ready version of your Svelte app using `npm run build`. It also mentions previewing the build and the necessity of installing adapters for deployment.

```bash
npm run build

You can preview the production build with `npm run preview`.
```

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

### Run Next.js Development Server

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

Starts the Next.js development server, enabling you to preview the integrated Nutrient Web SDK example in your browser. The application will be accessible at http://localhost:3000.

```shell
npm run dev
```

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web SDK example repository from GitHub. This is the first step to get the example code onto your local machine.

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

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

### Install Project Dependencies

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

Installs all necessary project dependencies using npm. This command reads the package.json file and downloads the required libraries into the node_modules folder.

```bash
npm install
```

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

### Install Project Dependencies

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

Installs the necessary project dependencies using npm. This command downloads and sets up all required packages for the Vite.js application.

```shell script
npm install
```

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

### Clone Nutrient Web Examples Repository

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

Clones the project repository from GitHub to your local machine. This is the first step to get the example code.

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

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

### Clone Nutrient Web Example Repository

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

Clones the Nutrient Web SDK example repository from GitHub and navigates into the Gatsby.js example directory. This is the initial step to get the project code.

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

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

### Install Project Dependencies

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

Installs all necessary project dependencies using npm. This command reads the package.json file and downloads the required libraries into the node_modules directory. Requires Node.js and npm to be installed.

```bash
npm install
```

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

### Install Project Dependencies

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

Installs all other project dependencies required to run the benchmark, after the Nutrient Web SDK has been set up.

```bash
npm install
```

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

### Install Dependencies

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

Installs the necessary project dependencies using npm, which are required to run the Svelte application.

```bash
npm install
```

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

### Run Development Server

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

Starts the Vite development server for live previewing and hot module replacement. Access the application at http://localhost:5173.

```shell script
npm run dev
```

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

### Run Benchmark Server

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

Starts the local development server to run the WebAssembly benchmark. Ensure your license key is placed in `public/license-key` before running.

```bash
npm start
```

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

### Install Nutrient Web SDK Viewer

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

Installs the `@nutrient-sdk/viewer` npm package and copies its distribution files to the `public/vendor` directory for use in the benchmark project.

```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/laravel/README.md

Installs project dependencies using Composer for PHP and npm for JavaScript packages.

```bash
composer install
npm install
```

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web Examples repository and navigates into the ASP.NET example directory.

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

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

### Install Project Dependencies

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

Installs all necessary Node.js dependencies for the Gatsby.js project using npm. This command ensures all required packages are downloaded and configured.

```bash
npm install
```

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

### Create Svelte Project with sv CLI (bash)

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

Demonstrates how to create a new Svelte project using the `sv create` command. It shows options for creating a project in the current directory or a specified directory.

```bash
npx sv create

npx sv create my-app
```

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

### Run ASP.NET Example

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

Builds and runs the ASP.NET example application using the .NET CLI. This command watches for file changes and automatically restarts the application.

```bash
dotnet watch run
```

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

### Run Gatsby.js Development Server

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

Starts the Gatsby.js development server, allowing you to preview the application in real-time. This command is used for local development and testing.

```bash
npm run start
```

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

### Build and Preview Production

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

Creates a production build of the application and serves it locally for preview. The build command optimizes assets, and the preview command starts a server at http://localhost:4173.

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

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web Examples repository from GitHub to your local machine. This command sets up the project directory for the Vite.js example.

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

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

### Clone Nutrient Web Examples Repository

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

Clones the PSPDFKit Nutrient Web Examples repository from GitHub. This is the initial step to obtain the project files for Blazor integration.

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

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

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

### Clone Repository

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

Clones the Nutrient Web SDK examples repository from GitHub to your local machine.

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

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web Examples repository from GitHub and navigates into the Elm example directory.

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

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

### Clone Nutrient Web Examples Repository

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

Clones the Nutrient Web SDK example repository from GitHub using Git. This is the initial step to obtain the project files for the Next.js integration example.

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

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

### Run Laravel Development Server

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

Starts the Laravel development server to host the application locally, typically on port 8000.

```bash
php artisan serve
```

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

### Build Production Packages

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

Commands to build production packages for different platforms using `electron-packager`. Note that specific platform builds may have additional dependencies or require platform-specific configurations.

```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)
```

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

### Build and Serve the Vue Example

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

Builds the Vue.js application for production and then serves it locally. The application will be accessible via http://localhost:4173.

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

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

### Run Development Build

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

Executes the development build script, often used for compiling assets or starting a hot-reloading server for frontend development.

```bash
npm run dev
```

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

### Clone Nutrient Salesforce SDK Repository

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

Clone the official Nutrient Salesforce SDK repository from GitHub to start your integration. This command downloads the project files necessary for setting up the SDK within your Salesforce environment.

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

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

### Load PSPDFKit with License Key

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

Demonstrates how to load the PSPDFKit library in an Electron app, including passing a license key and the bundle ID for proper configuration. This ensures the application works correctly with a valid license.

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

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

### Install Nutrient Web SDK npm Module

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

Install the Nutrient Web SDK as an npm module within your project directory. This step ensures all necessary client-side dependencies for the SDK are downloaded and available.

```npm
npm install
```

```yarn
yarn install
```

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

### Build and Serve Gatsby.js Production App

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

Creates a production-ready build of the Gatsby.js application and then serves it. This is used to test the final deployed version of the app.

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

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

### robots.txt Configuration Example

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/react/public/robots.txt

This snippet demonstrates a basic robots.txt file configuration. It specifies rules for web crawlers, indicating which parts of the website they should or should not access. The 'User-agent' directive targets specific crawlers, and 'Disallow' directives specify paths to be excluded.

```robots.txt
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: 

```

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

### Electron App Styling and Layout

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

CSS rules for styling the main application window and handling platform-specific adjustments for frameless windows on macOS.

```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);
}
```

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

### Open Electron Developer Tools

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

Instructions to uncomment a line in the main entry point file to open the Electron developer tools. This is useful for debugging the application.

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

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

### Build and Run Blazor Application

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

Commands to build and run the Blazor Server or Blazor WASM application using .NET watch. This command allows for live reloading during development.

```bash
dotnet watch run
```

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

### Open Developer Tools in Electron

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

JavaScript snippet to uncomment in `index.js` to open the Electron developer tools within the running application for debugging.

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

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

### JavaScript for Platform Class and Renderer

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

Appends the current platform as a CSS class to the `<body>` element to enable platform-specific styling. It also invokes the renderer process 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");
```

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

### Generate Laravel Application Key

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

Generates a new application encryption key for the Laravel application, essential for security and session handling.

```bash
php artisan key:generate
```

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

### PSPDFKitFileStore for IndexedDB

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

Illustrates the PSPDFKitFileStore library, a wrapper around the IndexedDB API using 'idb' for persisting PDFs locally. Designed to work independently and support older browsers like Internet Explorer 11.

```javascript
// src/scripts/PSPDFKitFileStorage.js
// This file contains the PSPDFKitFileStore implementation.
// It uses the 'idb' library for IndexedDB operations.

// Example usage (conceptual):
// const fileStorage = new PSPDFKitFileStore('my-pdf-db');
// fileStorage.storeFile('document-id', fileBlob);
// fileStorage.listFiles().then(files => console.log(files));
// fileStorage.deleteFile('document-id');
```

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

### Nutrient Electron SDK Initialization and Event Handling

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

JavaScript code for initializing the Nutrient Viewer in an Electron app. It includes setting up custom toolbar items, handling document export/import, managing unsaved annotation changes, and integrating drag-and-drop functionality.

```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");

```

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

### Check Biome Version Command

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

Command to manually check the Biome version consistency between package.json and CI workflows. Ensures development environment integrity and prevents commits with mismatched versions.

```shell
npm run check-biome-version

```

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

### CSS for Frameless Window Styling (macOS)

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

Applies specific CSS rules to style frameless windows on macOS, including making the header draggable and adjusting the root element's height. This targets the `platform-darwin` class.

```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); }
```

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

### Workbox Configuration for Service Worker

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

Details the Workbox configuration file used to manage service worker generation and pre-caching strategies for the PWA. This configuration automates the creation of a Manifest file for ServiceWorker pre-cache.

```javascript
// src/workbox-config.js
// Configuration for Workbox CLI to generate service worker and precache manifest.

module.exports = {
  globDirectory: '.',
  globPatterns: [
    '**/*.{js,html,css,png,jpg,gif,svg,woff2}'
  ],
  swDest: 'service-worker.js',
  // Additional Workbox configuration options can be added here
  // e.g., runtimeCaching, navigateFallback, etc.
};
```

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

### Copy Nutrient Viewer Assets

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

Manually copies the Nutrient Web SDK viewer JavaScript file and its associated library files from the node_modules directory to the static folder. This is essential for the web application to load the SDK assets.

```javascript
// Copy ./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer.js to ./static/nutrient-viewer.js.
// Copy ./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib/ to ./static/nutrient-viewer-lib/.
```

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

### Build Production Version

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

Builds an optimized production version of the benchmark application. The `PUBLIC_URL` environment variable should be set to the application's deployment path.

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

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

### Deploy Nutrient Salesforce SDK to Salesforce

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

Deploy the Nutrient Salesforce SDK components to your Salesforce organization. This command uses the Salesforce CLI to deploy the source code defined in the package.xml manifest file.

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

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

### React UI Structure

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

The user interface for the benchmark is built using React. The main entry point for the application logic is located in `src/index.js`.

```javascript
// src/index.js
// Main entry point for the React UI application.
// Imports and renders the main benchmark component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './ui/App'; // Assuming App component is in ./ui/App

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```

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

### Configure Nutrient Web SDK CDN Version

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

Update the script tag in the Nutrient_InitNutrient.page file to point to the desired version of the Nutrient Web SDK hosted on the CDN. This allows you to specify which version of the SDK your Salesforce integration will use, bypassing Salesforce's asset size limits.

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

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

### Authenticate Salesforce CLI

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

Log in to your Salesforce organization using the Salesforce CLI. This command initiates the authentication process, allowing the CLI to interact with your Salesforce instance for deployment and management tasks.

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

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

### Control Sidebar Visibility Based on Screen Width and Local Storage

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

Adds a CSS class to the root element to control sidebar visibility based on the client's screen width (>= 1080px) and a 'sidebarVisible' flag in local storage. This allows for responsive UI adjustments.

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

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

### robots.txt Directives

Source: https://github.com/pspdfkit/nutrient-web-examples/blob/main/examples/laravel/public/robots.txt

Defines rules for web crawlers (robots) to follow when accessing a website. It specifies which parts of the site should not be crawled.

```robots.txt
User-agent: *
Disallow: 

```

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

### Register Service Worker for PWA Offline and Caching

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

Registers a service worker to enable offline capabilities and caching for the PWA. It handles updates, including skipping waiting for new service workers and reloading the page when a new controller is active. This relies on the browser's ServiceWorker API.

```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;
      }
    );
  });
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.