OLPDF Documentation

Next.js

Because OlPDFEmbed interacts with the DOM directly, you must mark the file with 'use client'. Use useRef to get a stable reference to the container div, and useEffect to instantiate the editor after the component mounts. Return editor.destroy()from the effect cleanup so React Hot Reload and strict-mode double-invocation don't leak iframes.

'use client';
import { useEffect, useRef } from 'react';
import { OlPDFEmbed } from '@olpdf/embed';

interface PDFEditorProps {
  documentId: string;
  token: string;
  onSave?: (model: object) => void;
}

export default function PDFEditor({ documentId, token, onSave }: PDFEditorProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const editor = new OlPDFEmbed(containerRef.current, {
      host: 'https://olpdf.xyz',
      documentId,
      token,
    });

    // READY fires when the iframe is mounted and the editor is initialised
    editor.on('READY', () => console.log('OLPDF editor ready'));

    // MODEL_UPDATE carries the full AST after every edit
    editor.on('MODEL_UPDATE', ({ documentModel }) => {
      onSave?.(documentModel);
    });

    // PAGE_ADDED / PAGE_REMOVED fire when layout reflows overflow pages
    editor.on('PAGE_ADDED', ({ pageIndex, width, height }) => {
      console.log(`Page ${pageIndex + 1} added (${width}×${height}pt)`);
    });

    // Always destroy on unmount to remove the iframe and event listeners
    return () => editor.destroy();
  }, [documentId, token, onSave]);

  return (
    <div
      ref={containerRef}
      className="w-full h-screen"
      // Prevent parent scroll from interfering with the editor
      style={{ overflow: 'hidden' }}
    />
  );
}

Svelte

Use bind:this to obtain the DOM element, then instantiate inside onMount. Svelte guarantees the element exists by the time onMount fires. Destroy in onDestroy.

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { OlPDFEmbed } from '@olpdf/embed';

  export let documentId: string;
  export let token: string;

  let container: HTMLDivElement;
  let editor: OlPDFEmbed;

  onMount(() => {
    editor = new OlPDFEmbed(container, {
      host: 'https://olpdf.xyz',
      documentId,
      token,
    });

    editor.on('READY', () => console.log('Editor ready'));

    editor.on('MODEL_UPDATE', ({ documentModel }) => {
      // Persist or sync the full AST model
      console.log('Model updated', documentModel);
    });

    editor.on('EXPORT_COMPLETE', ({ url }) => {
      // url is a 24-hour signed download link
      window.open(url, '_blank');
    });
  });

  onDestroy(() => {
    editor?.destroy();
  });
</script>

<div bind:this={container} class="w-full h-screen overflow-hidden" />

Nuxt / Vue 3

Use the Composition API with ref() for the container element and onMounted for instantiation. In Nuxt, wrap in <ClientOnly> or add process.client guard to avoid SSR errors since the SDK requires a browser DOM.

<!-- components/PDFEditor.vue -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { OlPDFEmbed } from '@olpdf/embed';

const props = defineProps<{
  documentId: string;
  token: string;
}>();

const emit = defineEmits<{
  modelUpdate: [model: object];
}>();

const container = ref<HTMLDivElement | null>(null);
let editor: OlPDFEmbed | null = null;

function initEditor() {
  if (!container.value) return;
  editor?.destroy();

  editor = new OlPDFEmbed(container.value, {
    host: 'https://olpdf.xyz',
    documentId: props.documentId,
    token: props.token,
  });

  editor.on('MODEL_UPDATE', ({ documentModel }) => {
    emit('modelUpdate', documentModel);
  });
}

onMounted(initEditor);

// Re-init when props change
watch(() => [props.documentId, props.token], initEditor);

onUnmounted(() => editor?.destroy());
</script>

<template>
  <div ref="container" class="w-full h-screen overflow-hidden" />
</template>

Astro

Astro is server-first. Place the <script> tag inside the .astro file (not the frontmatter fence). Astro bundles and defers client-side scripts automatically. No client:* directive is needed since this is vanilla JS, not a framework component.

---
// src/pages/editor/[id].astro
import Layout from '../layouts/Layout.astro';

const { id } = Astro.params;
// Fetch a short-lived embed token from your API
const token = await getEmbedToken(id);
---

<Layout>
  <div id="olpdf-container" class="w-full h-screen overflow-hidden"></div>
</Layout>

<script define:vars={{ documentId: id, token }}>
  // This script runs in the browser after hydration
  import { OlPDFEmbed } from '@olpdf/embed';

  const container = document.getElementById('olpdf-container');

  const editor = new OlPDFEmbed(container, {
    host: 'https://olpdf.xyz',
    documentId,
    token,
  });

  editor.on('READY', () => {
    console.log('OLPDF editor ready');
  });

  editor.on('MODEL_UPDATE', ({ documentModel }) => {
    // Send back to your server or store locally
    fetch('/api/save', {
      method: '700">POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ documentId, documentModel }),
    });
  });
</script>

Analog (Angular)

Analog is the meta-framework built on Angular. Use @ViewChild to obtain the native DOM element and ngAfterViewInit to instantiate the editor — this lifecycle hook guarantees the view is fully rendered. Implement OnDestroy to clean up.

// pdf-editor.component.ts
import {
  Component, Input, Output, EventEmitter,
  AfterViewInit, OnDestroy,
  ViewChild, ElementRef
} from '@angular/core';
import { OlPDFEmbed } from '@olpdf/embed';

@Component({
  selector: 'app-pdf-editor',
  standalone: true,
  template: `
    <div #container class=S3></div>
  `,
})
export class PDFEditorComponent implements AfterViewInit, OnDestroy {
  @Input() documentId!: string;
  @Input() token!: string;
  @Output() modelUpdate = new EventEmitter<object>();

  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>;

  private editor?: OlPDFEmbed;

  ngAfterViewInit(): void {
    this.editor = new OlPDFEmbed(this.containerRef.nativeElement, {
      host: 'https://olpdf.xyz',
      documentId: this.documentId,
      token: this.token,
    });

    this.editor.on('READY', () => {
      console.log('OLPDF ready');
    });

    this.editor.on('MODEL_UPDATE', ({ documentModel }) => {
      this.modelUpdate.emit(documentModel);
    });

    this.editor.on('EXPORT_COMPLETE', ({ url }) => {
      window.open(url, '_blank');
    });
  }

  ngOnDestroy(): void {
    this.editor?.destroy();
  }
}

Wix (Velo)

In Wix Velo, all custom code runs in the Page Code panel (not a file you upload). Add an HTML Component element to your page, give it an ID (e.g. #editorBox), then call $w('#editorBox').getEl() inside $w.onReady to get the underlying DOM element. Use the Wix NPM Packages panel to install @olpdf/embed.

// Page Code panel (Wix Velo)
import wixData from 'wix-data';
import wixUsers from 'wix-users';
import { OlPDFEmbed } from '@olpdf/embed';

$w.onReady(async () => {
  // Get the current user's session token for the embed
  const token = await wixUsers.currentUser.getToken();

  // #editorBox is an HTML Component element on your Wix page
  const containerEl = $w('#editorBox').getEl();

  const editor = new OlPDFEmbed(containerEl, {
    host: 'https://olpdf.xyz',
    documentId: $w('#documentIdInput').value,  // e.g. from a text input
    token,
  });

  editor.on('READY', () => {
    $w('#statusText').text = 'Editor loaded';
  });

  editor.on('MODEL_UPDATE', async ({ documentModel }) => {
    // Save the updated document model to Wix Data
    await wixData.save('Documents', {
      _id: $w('#documentIdInput').value,
      model: JSON.stringify(documentModel),
    });
    $w('#statusText').text = 'Saved ✓';
  });

  editor.on('EXPORT_COMPLETE', ({ url }) => {
    $w('#downloadButton').link = url;
    $w('#downloadButton').show();
  });
});