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 i create vite nutrient-typescript-example --template vanilla-ts

  2. Navigate to the project directory:

    Terminal window
    cd nutrient-typescript-example

  3. Install the dependencies:

    Terminal window
    npm i install

Adding Nutrient Web SDK

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. Add the following <script> tag in your index.html file:

    <!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.7.0/nutrient-viewer.js"></script>
        <div class="container"></div>
        <script type="module" src="/src/main.ts"></script>
      </body>
    </html>

  2. You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in the client-side code.

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.

  1. Update the src/style.css file with the following content. This declares the height of the viewer element:

    .container {
      height: 100vh;
    }

  2. Ensure your viewer container has explicit dimensions. The TypeScript examples in this guide use CSS classes, which is the recommended approach for most projects.

  3. 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

  1. Load the PDF file in src/main.ts:

    main.ts
    import "./style.css";
    

    function load() {
      const container = document.querySelector(".container") as HTMLElement;
    

      const { NutrientViewer } = window;
    

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

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

    load();

  2. Start the development server:

    Terminal window
    npm run dev

  3. 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 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 below.

  1. Add the Nutrient Web SDK dependency, if you haven’t already previously. You need the package installed locally to reference the types:

    Terminal window
    npm i @nutrient-sdk/viewer

  2. Create a module for custom typings (say global.d.ts in the src directory) to reference the built-in typings for the SDK:

    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.
        NutrientViewer?: typeof NutrientViewer;
      }
    }

  3. Restart the TypeScript server or your editor if needed.

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

Running the project

  1. Start the development server:

    Terminal window
    npm i run dev

  2. 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.

  3. To build for production, run:

    Terminal window
    npm i run build

  4. To preview the production build locally, run:

    Terminal window
    npm i run preview

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.