Getting Started

The headless libraries give you the engine and the plugin system — you own every pixel of the UI. An app depends on two packages: the adapter for your framework, and an engine.

Installation#

npm install @embedpdf/svelte@next @embedpdf/engine@next

The Svelte adapter mirrors the React surface subpath-for-subpath — the same verticals, exposed as components and stores.

Your first viewer#

localEngine() creates the engine — synchronously, allocating nothing until first use, so a module-scope const engine = localEngine() is safe (even under SSR). Hand it to <Viewer>: the viewer warms it up on mount and PDFium boots in a worker in the background, so the stage and render layer draw the pages the moment a document is ready — no worker wiring, no lifecycle to manage. This is the whole app:

Loading live preview…

<script lang="ts">
  import { onMount } from 'svelte';
  import { localEngine } from '@embedpdf/engine';
  import type { DocumentHandle, OpenInput } from '@embedpdf/engine';
  import PdfPage from './PdfPage.svelte';

  // The Svelte adapter is in progress — this drives the framework-free engine
  // directly: App owns the engine and the document, PdfPage renders one page.
  let doc = $state<DocumentHandle>();

  // The engine is created synchronously and costs nothing until first use —
  // only opening a document does real work.
  const engine = localEngine();

  onMount(async () => {
    // The local engine opens bytes — fetch the sample and hand them over.
    const ebook: OpenInput = await fetch('https://snippet.embedpdf.com/ebook.pdf')
      .then((response) => response.arrayBuffer())
      .then((buffer) => ({ kind: 'bytes', id: 'ebook', bytes: new Uint8Array(buffer) }));
    doc = await engine.open(ebook);
  });
</script>

{#if doc}
  <PdfPage {doc} pageNumber={1} />
{:else}
  <p>Opening document…</p>
{/if}

Prefer the viewer to own the engine’s lifetime — created on mount, destroyed on unmount? Pass a thunk instead: engine={() => localEngine()}. See the Engine getting started for the ownership model, fallback fonts, cloud, and SSR.

Was this page helpful?

Your feedback goes directly to the documentation team.