Integrations

Svelte integration

Install one package, import it, and mount the viewer. The render engine, its worker, and (for the framework wrappers) React all come bundled — nothing else to configure.

01 / Live preview

Open the full interactive demo →

This is the actual Svelte app built from the code below, running live in an iframe.

02 / Install

npm install @trupdf/svelte svelte

03 / Example

<script lang="ts">
  // One import, one package. mountTruPDF mounts the viewer into any <div>;
  // react / react-dom / the render engine / its worker all come bundled with @trupdf/svelte.
  import { mountTruPDF, type MountHandle } from '@trupdf/svelte';
  import '@trupdf/viewer/styles.css';

  let { source, secureMode = false }: { source: string | ArrayBuffer; secureMode?: boolean } =
    $props();

  let host: HTMLDivElement;
  let handle: MountHandle | undefined;

  $effect(() => {
    // Mount once the host element exists.
    if (host && !handle) {
      handle = mountTruPDF(host, { source, secureMode, theme: 'system' });
    }
    return () => {
      handle?.unmount();
      handle = undefined;
    };
  });

  // Re-render on prop change without tearing down the React root.
  $effect(() => {
    handle?.update({ source, secureMode, theme: 'system' });
  });
</script>

<div bind:this={host} style="width: 100%; height: 100%"></div>