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

Test without installing You can test the SDK capabilities in our playground.

View example Prefer to jump straight to 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 a good way to get started. For more control and flexibility, you can use local installation.

CDN Installation
Local installation

Add the following <script> tag in your 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/[email protected]/nutrient-viewer.js"></script>
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

You're now ready to use the 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:

<!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/[email protected]/nutrient-viewer.js"></script>
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

We'll add a config in Vite to copy the SDK assets to the static 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

Update your Vite config:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import copy from "rollup-plugin-copy";

export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
          dest: "static/",
        },
      ],
      hook: "buildStart",
    }),
    sveltekit(),
  ],
});

You can include the SDK assets static/nutrient-viewer-lib in your .gitignore file to avoid committing them to your repository.

Update +page.svelte to reference NutrientViewer locally:

<script lang="ts">
  import { onDestroy, onMount } from "svelte";

  let container: HTMLDivElement | null = null;
  let NutrientViewer: typeof import("@nutrient-sdk/viewer").default | undefined;

  onMount(async () => {
    NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
    if (container && NutrientViewer) {
      NutrientViewer.load({
        container,
        // you may also specify a file in public directory e.g. /document.pdf
        document: "https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf",
        // baseUrl tells the SDK where to load the assets from
        baseUrl: `${window.location.protocol}//${window.location.host}/${import.meta.env.PUBLIC_URL ?? ""}`,
      });
    }
  });

  onDestroy(() => {
    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>

You're now ready to use the Nutrient Web SDK locally in your Svelte app.

Render a PDF

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

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

  let container: HTMLDivElement | null = null;

  onMount(() => {
    const { NutrientViewer } = window;
    if (container && NutrientViewer) {
      NutrientViewer.load({
        container,
        // you may also specify a file in static directory e.g. /document.pdf
        document: "https://www.nutrient.io/downloads/pspdfkit-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>

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

Further steps to set 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 these steps:

Add the Nutrient Web SDK dependency, if not done previously:
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer

Add reference for built-in types for the SDK in 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 {};

Restart the TS server or your editor if needed.

Optimize CDN installation

If you use the CDN installation approach in production, Nutrient recommends considering optimizations such as prefetching.

Troubleshooting

Example View the example repo on GitHub.

Facing issues? Visit the troubleshooting guide for solutions to some common errors.