Add PDF functionality with TypeScript

Nutrient Web SDK is a PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web application.

This guide walks you through the necessary steps to integrate Nutrient Web SDK into your TypeScript project. By the end, you’ll be able to render a PDF document in the user interface (UI).

Test without installing
Jump to example

Prerequisites

Creating a new project

If you don’t yet have a project set up, you can create a new one using Vite’s TypeScript template.

  1. Run the following command to create a new Vite project with TypeScript:

    Terminal window
    npm create vite nutrient-typescript-example --template vanilla-ts

  2. Navigate to the project directory:

    Terminal window
    cd nutrient-typescript-example

  3. Install the dependencies (skip this if you already installed them during project creation):

    Terminal window
    npm install

Adding Nutrient Web SDK

The following instructions assume you’re working with the fresh Vite project created in the previous section. If you’re integrating Nutrient Web SDK into an existing TypeScript project, you’ll need to adapt these steps to fit your project structure.

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.

  1. Update your index.html file to add the CDN script tag:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Nutrient Web SDK viewer — TypeScript example</title>
      </head>
      <body>
        <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.9.1/nutrient-viewer.js"></script>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
      </body>
    </html>

  2. Install the Nutrient Web SDK package to get TypeScript types:

    Terminal window
    npm i @nutrient-sdk/viewer

    Even though you’re loading the SDK from the CDN, you need the package installed locally to access TypeScript type definitions. The package won’t be bundled into your client code; it’s only used by TypeScript’s compiler for type checking.

  3. Create a type declaration file, src/global.d.ts, to make window.NutrientViewer available with the proper types:

    src/global.d.ts
    import NutrientViewer from "@nutrient-sdk/viewer";
    

    declare global {
      interface Window {
        // Nutrient Web SDK will be available on `window.NutrientViewer` once loaded from the CDN.
        NutrientViewer?: typeof NutrientViewer;
      }
    }

  4. Ensure #app has an explicit height and width set:

    #app {
      height: 100dvh;
      width: 100dvw;
    }

    Nutrient Web SDK requires that the mounting container has an explicit width and height before calling NutrientViewer.load().

  5. Replace the contents of src/main.ts with code to create a container, and load a PDF using window.NutrientViewer:

    import "./style.css";
    

    function load() {
      const { NutrientViewer } = window;
    

      if (!NutrientViewer) {
        throw new Error("NutrientViewer is not available on window");
      }
    

      const container = document.getElementById("app");
    

      if (!container) {
        throw new Error("Container element not found");
      }
    

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

      NutrientViewer.load({
        container,
        document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
      })
        .then((instance) => {
          console.log("Nutrient loaded", instance);
        })
        .catch(console.error);
    }
    

    load();

  6. Start the development server:

    Terminal window
    npm run dev

  7. Open your browser and navigate to the URL displayed in the terminal (typically http://localhost:5173(opens in a new tab)). You’ll see the PDF document rendered in the viewer.

Next steps

If you use the CDN installation approach in production, we recommend 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.