From npm install to an embedded PDF viewer in under a minute.

// Owns the SDK's options; nothing runs until the first call.
// In next.config.ts, add to your config so the browser bundle has it:
//   env: { KERNSTRA_LICENSE: process.env.KERNSTRA_LICENSE },
import { Kernstra } from '@kernstra/pdf-web-sdk';

export const initKernstra = () =>
  Kernstra.init({ license: process.env.KERNSTRA_LICENSE ?? '' });

'use client';

import dynamic from 'next/dynamic';

// The React tab's component; its ../lib/kernstra import is
// lib/kernstra.ts, which reads process.env.KERNSTRA_LICENSE.
// It needs the browser, so it never renders on the server.
export const DocumentViewer = dynamic(
  () => import('@/components/DocumentViewer').then((m) => m.DocumentViewer),
  { ssr: false, loading: () => <div style={{ height: '80vh' }} /> },
);

import { Suspense } from 'react';
import { DocumentViewer } from './viewer';

type Params = Promise<{ id: string }>;

// New apps prerender a static shell (cacheComponents), so
// params is read inside <Suspense>, not at the top.
export default function Page({ params }: { params: Params }) {
  return (
    <Suspense fallback={<div style={{ height: '80vh' }} />}>
      <Viewer params={params} />
    </Suspense>
  );
}

async function Viewer({ params }: { params: Params }) {
  const { id } = await params;
  return <DocumentViewer url={`/api/documents/${id}`} />;
}

// The one module that owns the SDK's options. Nothing runs
// until the first call; every later call gets the same promise.
// In vite.config.ts, add envPrefix: ['VITE_', 'KERNSTRA_'].
import { Kernstra } from '@kernstra/pdf-web-sdk';

export const initKernstra = () =>
  Kernstra.init({ license: import.meta.env.KERNSTRA_LICENSE });

<!-- Opens its url once: give it :key="url" to switch documents. -->
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { PDFDocument, PDFViewer } from '@kernstra/pdf-web-sdk';
import { initKernstra } from '../lib/kernstra';

const props = defineProps<{ url: string }>();
const el = ref<HTMLDivElement>();
let doc: PDFDocument | undefined;
let viewer: PDFViewer | undefined;
let unmounted = false;

async function open() {
  await initKernstra();
  const opened = await PDFDocument.fromUrl(props.url);
  if (unmounted) return opened.close();
  doc = opened;
  viewer = new PDFViewer(el.value!, doc, {
    toolbar: { layout: 'ribbon' },
  });
}

onMounted(() => {
  open().catch(console.error); // log a failed load, keep the page
});

onBeforeUnmount(() => {
  unmounted = true;
  viewer?.destroy();
  void doc?.close();
});
</script>

<template>
  <div ref="el" style="height: 80vh" />
</template>

// Owns the SDK's options. nuxt.config.ts:
//   runtimeConfig: { public: { kernstraLicense: '' } }
// Nuxt fills it from NUXT_PUBLIC_KERNSTRA_LICENSE: in .env for
// nuxi dev (Nuxt skips .env.local), in the server's environment
// in production.
import { Kernstra } from '@kernstra/pdf-web-sdk';

// Call it in setup; await what it returns once mounted.
export const useKernstra = () => {
  const { kernstraLicense } = useRuntimeConfig().public;
  return () => Kernstra.init({ license: kernstraLicense });
};

<!-- The .client suffix keeps it out of server rendering. -->
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { PDFDocument, PDFViewer } from '@kernstra/pdf-web-sdk';

const initKernstra = useKernstra(); // auto-imported composable

const props = defineProps<{ url: string }>();
const el = ref<HTMLDivElement>();
let doc: PDFDocument | undefined;
let viewer: PDFViewer | undefined;
let unmounted = false;

async function open() {
  await initKernstra();
  const opened = await PDFDocument.fromUrl(props.url);
  if (unmounted) return opened.close();
  doc = opened;
  viewer = new PDFViewer(el.value!, doc, {
    toolbar: { layout: 'ribbon' },
  });
}

onMounted(() => {
  open().catch(console.error); // log a failed load, keep the page
});

onBeforeUnmount(() => {
  unmounted = true;
  viewer?.destroy();
  void doc?.close();
});
</script>

<template>
  <div ref="el" style="height: 80vh" />
</template>

import { Injectable } from '@angular/core';
import { Kernstra } from '@kernstra/pdf-web-sdk';
// After `ng generate environments`, both environment files hold:
//   declare const KERNSTRA_LICENSE: string;
//   export const environment = { kernstraLicense: KERNSTRA_LICENSE };
// and the CLI fills it in from your variable:
//   ng serve --define "KERNSTRA_LICENSE='$KERNSTRA_LICENSE'"
import { environment } from '../environments/environment';

// Owns the SDK's options; nothing runs until init() is first called.
@Injectable({ providedIn: 'root' })
export class KernstraService {
  init() {
    return Kernstra.init({ license: environment.kernstraLicense });
  }
}

import {
  Component, ElementRef, afterRenderEffect, inject, input, viewChild,
} from '@angular/core';
import { PDFDocument, PDFViewer } from '@kernstra/pdf-web-sdk';
import { KernstraService } from './kernstra.service';

@Component({
  selector: 'app-document-viewer',
  template: `<div #host style="height: 80vh"></div>`,
})
export class DocumentViewer {
  readonly url = input.required<string>();
  private readonly host =
    viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly kernstra = inject(KernstraService);

  constructor() {
    // Browser only, so server rendering never runs it. Runs again when
    // url changes; the cleanup runs first, and on destroy.
    afterRenderEffect((onCleanup) => {
      const url = this.url();
      const host = this.host().nativeElement;
      let doc: PDFDocument | undefined;
      let viewer: PDFViewer | undefined;
      let canceled = false;
      onCleanup(() => {
        canceled = true;
        viewer?.destroy();
        void doc?.close();
      });
      void (async () => {
        await this.kernstra.init();
        const opened = await PDFDocument.fromUrl(url);
        if (canceled) return opened.close();
        doc = opened;
        viewer = new PDFViewer(host, opened, {
          toolbar: { layout: 'ribbon' },
        });
      })();
    });
  }
}

// The one module that owns the SDK's options. Nothing runs
// until the first call; every later call gets the same promise.
// In vite.config.ts, add envPrefix: ['VITE_', 'KERNSTRA_'].
import { Kernstra } from '@kernstra/pdf-web-sdk';

export const initKernstra = () =>
  Kernstra.init({ license: import.meta.env.KERNSTRA_LICENSE });

<script lang="ts">
  import { onMount } from 'svelte';
  import { PDFDocument, PDFViewer } from '@kernstra/pdf-web-sdk';
  import { initKernstra } from './kernstra';

  // Opens its url once: wrap it in {#key url} to switch documents.
  let { url }: { url: string } = $props();
  let el: HTMLDivElement;

  onMount(() => {
    let destroyed = false;
    let doc: PDFDocument | undefined;
    let viewer: PDFViewer | undefined;

    (async () => {
      await initKernstra();
      const opened = await PDFDocument.fromUrl(url);
      if (destroyed) return opened.close();
      doc = opened;
      viewer = new PDFViewer(el, doc, { toolbar: { layout: 'ribbon' } });
    })().catch(console.error);

    return () => {
      destroyed = true;
      viewer?.destroy();
      void doc?.close();
    };
  });
</script>

<div bind:this={el} style="height: 80vh"></div>

<script lang="ts">
  import { page } from '$app/state';
  // SvelteKit 2: '$lib/DocumentViewer.svelte'
  import DocumentViewer from '#lib/DocumentViewer.svelte';
</script>

<!-- The Svelte tab's two files, unchanged: onMount runs only in the
     browser. The key mounts a fresh viewer when the id changes. -->
{#key page.params.id}
  <DocumentViewer url={`/api/documents/${page.params.id}`} />
{/key}