TPTruPDF

Framework wrappers

The viewer chrome is React, but mountTruPDF(host, options) renders the viewer into any DOM element. Per-framework wrapper packages (@trupdf/react, @trupdf/vue, @trupdf/angular, @trupdf/svelte, all v0.4.8) provide idiomatic bindings on top. Each wrapper is a one-line install: the render engine and its worker are bundled — zero config, no asset copying, no worker path to set.

@trupdf/vue, @trupdf/angular, and @trupdf/svelte each export TruPDFSDK, EventBus, PluginAPI, and mountTruPDF.

mountTruPDF

const handle = mountTruPDF(hostEl, { source: '/file.pdf', licenseManager });
handle.update({ source: '/other.pdf' }); // re-render with new props
handle.unmount(); // tear down + free all resources
  • MountOptions = the full DocViewer prop shape plus className? — see Features → Viewer for the full list.
  • Returns a MountHandle { unmount(): void; update(options): void }. Call update whenever a bound prop changes; call unmount on teardown.

@trupdf/react

The most direct surface. Re-exports everything from @trupdf/viewer (so DocViewer comes from here too) and adds hooks:

import { DocViewer, useTruPDF, useAnnotations, useFormValues } from '@trupdf/react';

useTruPDF(engine)

Subscribe to ViewerEngine state:

const { currentPage, numPages, scale, rotation, secureMode, error, isLoading } = useTruPDF(engine);

useAnnotations(manager)

Live list of annotations:

const annotations = useAnnotations(manager); // readonly AnnotationRecord[]

useFormValues(manager)

Live value map + setter + field metadata (tuple):

const [values, setValue, fields] = useFormValues(manager);
setValue('firstName', 'Updated');

@trupdf/vue

<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { mountTruPDF } from '@trupdf/vue';
 
const host = ref(null);
const props = defineProps(['source']);
let handle;
 
onMounted(() => { handle = mountTruPDF(host.value, { source: props.source }); });
watch(() => props.source, (source) => handle?.update({ source }));
onUnmounted(() => handle?.unmount());
</script>
 
<template><div ref="host" /></template>

@trupdf/angular

import { mountTruPDF, type MountHandle } from '@trupdf/angular';
 
@Component({
  template: `<div #host></div>`,
})
export class ViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
  @ViewChild('host', { static: true }) host!: ElementRef<HTMLDivElement>;
  @Input() source!: string;
  private handle?: MountHandle;
 
  ngAfterViewInit() {
    this.handle = mountTruPDF(this.host.nativeElement, {
      source: this.source,
      licenseManager: this.license,
    });
  }
  ngOnChanges() {
    this.handle?.update({ source: this.source, licenseManager: this.license });
  }
  ngOnDestroy() {
    this.handle?.unmount();
  }
}

@trupdf/svelte

<script>
  import { onDestroy, onMount } from 'svelte';
  import { mountTruPDF } from '@trupdf/svelte';
 
  export let source;
  let host;
  let handle;
 
  onMount(() => { handle = mountTruPDF(host, { source, licenseManager }); });
  $: handle?.update({ source, licenseManager });
  onDestroy(() => handle?.unmount());
</script>
 
<div bind:this={host}></div>

Lifecycle contract

Every wrapper:

  • Returns a MountHandle from mountTruPDF — unmount() + update(options).
  • Calls licenseManager.destroy() only if the wrapper owns the manager — never if the host injected one.
  • Cleans up all timers, WebSocket connections, and document resources on unmount.