Add PDF functionality with JavaScript + Vite

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 Web SDK 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.

View example

Prefer to jump straight into code? View the example repo on GitHub.

Installation

You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option.

CDN Installation
Local installation

Add the following <script> tag in your index.html file:
index.html
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.7.0/nutrient-viewer.js"></script>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```
You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in the client-side code.

Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer
If you tried CDN installation first, make sure to remove the script tag:
index.html
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.7.0/nutrient-viewer.js"></script>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```
Add a configuration in Vite to copy the SDK assets to the public directory. Install the rollup-plugin-copy package:
- npm
- pnpm
- yarn
Terminal window
npm i -D rollup-plugin-copy
Terminal window
pnpm add -D rollup-plugin-copy
Terminal window
yarn add -D rollup-plugin-copy
The SDK loads additional resources at runtime (web workers, fonts, icons) that must be served from your domain. The rollup-plugin-copy package automatically copies these assets from node_modules to your public directory during the build process.
Configure asset copying in your Vite configuration:
vite.config.js
```
import copy from "rollup-plugin-copy";

export default {
  plugins: [
    copy({
      targets: [
        {
          // Nutrient Web SDK requires its assets to be in the `public` directory so it can load them at runtime.
          src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
          dest: "public/",
        },
      ],
      hook: "buildStart", // Copy assets when the build starts.
    }),
  ],
};
```

Update main.js to use the locally installed SDK:

(async () => {
  const container = document.getElementById("app");

  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;

  // Ensure there's only one `NutrientViewer` instance.
  NutrientViewer.unload(container);

  if (container && NutrientViewer) {
    NutrientViewer.load({
      container,
      // You can also specify a file in the public directory — for example, `/nutrient-web-demo.pdf`.
      document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
      // `baseUrl` where the SDK should load its assets from (copied by `rollup-plugin-copy`).
      baseUrl: `${window.location.protocol}//${window.location.host}/${
        import.meta.env.PUBLIC_URL ?? "" // Usually empty for Vite, but supports custom deployments.
      }`,
    })
      .then((instance) => {
        console.log("Nutrient loaded", instance);
      })
      .catch((error) => {
        console.error(error.message);
      });
  }
})();

You’re now ready to use Nutrient Web SDK locally in your JavaScript + Vite app.

CSS setup requirements

Nutrient Web SDK requires that the mounting container has an explicit width and height before calling NutrientViewer.load(). The container cannot be 0×0 pixels or the SDK will fail to initialize.

For new Vite projects — Remove conflicting CSS from your style.css file. The default Vite template includes CSS that might interfere with container dimensions:
```
/* style.css - Remove these conflicting styles if present */
body {
  display: flex;
  place-items: center;
}
```
Ensure your viewer container has explicit dimensions. The examples in this guide use inline styles (style="height: 100vh; width: 100vw;") which is the recommended approach for most projects.
For existing projects — Check for any CSS framework styles that might interfere with container positioning or dimensions and override them as needed.

Rendering a PDF

Load the PDF file in main.js:
main.js
```
const container = document.getElementById("app");

// Ensure there’s only one `NutrientViewer` instance.
window.NutrientViewer.unload(container);

const { NutrientViewer } = window;
if (container && NutrientViewer) {
  NutrientViewer.load({
    container,
    // You can also specify a file in the public directory — for example, `/nutrient-web-demo.pdf`.
    document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
  })
    .then((instance) => {
      console.log("Nutrient loaded", instance);
    })
    .catch((error) => {
      console.error(error.message);
    });
}
```
Ensure your HTML has the container element:
index.html
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.7.0/nutrient-viewer.js"></script>
    <div id="app" style="height: 100vh; width: 100vw;"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```
Start the development server:
- npm
- pnpm
- yarn
Terminal window
npm run dev
Terminal window
pnpm run dev
Terminal window
yarn run dev
You should see the PDF rendered in the Nutrient Web SDK UI.

Next steps

This section outlines additional steps for setting up your project.

TypeScript with the CDN installation

Nutrient Web SDK comes with built-in support for TypeScript. This should work out of the box for local installation. For the CDN installation, follow the steps mentioned in the TypeScript with CDN installation section of the TypeScript guide.

Optimizing the CDN installation

If you use the CDN installation approach in production, Nutrient recommends considering optimizations such as prefetching(opens in a new tab).

Troubleshooting

If you encounter issues, refer to the common issues guide.

Note for developers using AI coding assistants: To get accurate troubleshooting help, copy the content from the troubleshooting guide and include it in your prompt, along with your specific error.