Add PDF functionality with Svelte

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
View example

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.

  1. Add the following <script> tag in your app.html file:

    app.html
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
      </head>
      <body data-sveltekit-preload-data="hover">
        <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.9.1/nutrient-viewer.js"></script>
        <div style="display: contents">%sveltekit.body%</div>
      </body>
    </html>

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

Rendering a PDF

  1. Load the PDF file into a component — for example, +page.svelte — using NutrientViewer:

    +page.svelte
    <script lang="ts">
      import { onMount } from "svelte";
    

      let container: HTMLDivElement | null = null;
    

      onMount(() => {
        const { NutrientViewer } = window;
        if (container && NutrientViewer) {
          NutrientViewer.load({
            container,
            document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
          });
        }
    

        return () => {
          NutrientViewer?.unload(container);
        };
      });
    </script>
    

    <div class="container" bind:this={container}></div>
    

    <style>
      /* we also need to set the container height and width */
      .container {
        height: 100vh;
        width: 100%;
      }
    </style>

  2. Start the development server:

    Terminal window
    npm run dev

  3. You’ll see the PDF rendered in the Nutrient Web SDK user interface (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 the package manager installation. For the CDN installation, follow the steps below.

  1. Add the Nutrient Web SDK dependency, if not done previously. You need the package installed locally to reference the types:

    Terminal window
    npm i @nutrient-sdk/viewer

  2. Add a reference for built-in types for the SDK in app.d.ts:

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

    // See https://svelte.dev/docs/kit/types#app.d.ts
    // for information about these interfaces
    declare global {
      namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface PageState {}
        // interface Platform {}
      }
    

      interface Window {
        // Nutrient Web SDK will be available on window.NutrientViewer once loaded
        NutrientViewer?: typeof NutrientViewer;
      }
    }
    

    export {};

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

Optimizing the CDN installation

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.

Test without installing
View example