Getting Started

The ready-made viewer gives you a complete PDF experience with a small integration surface. Pick your stack in the sidebar; this page and every example will stay on that integration.

Installation#

Vanilla JavaScript can load the viewer directly from a CDN. Framework projects install their dedicated adapter with pnpm.

pnpm add @embedpdf/vue-pdf-viewer@next

Add your first viewer#

Give the viewer a PDF URL and a height. The adapter handles the engine, plugins, toolbar, and document lifecycle for you.

<template>
  <PDFViewer
    :config="{ src: 'https://snippet.embedpdf.com/ebook.pdf' }"
    :style="{ height: '500px' }"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import { PDFViewer } from '@embedpdf/vue-pdf-viewer';

function onReady(registry: unknown) {
  console.log('PDF viewer ready!', registry);
}
</script>

Built-in stamps#

The Insert tab’s stamps panel loads the standard rubber stamps from @embedpdf/default-stamps the first time it opens — one Acrobat-compatible PDF per locale, shipped as a lazy chunk of your own build (the CDN snippet carries it in its folder), in the language negotiated from the viewer’s locale and the browser’s. Nothing is fetched from a third party. The stamps option decides where that library comes from:

stamps: {
  defaultLibrary: false;
} // no built-in library, no request (air-gapped)
stamps: {
  defaultLibrary: 'https://your.cdn/stamps/{locale}/stamps.pdf';
} // self-host

A self-hosted URL is used exactly as given. Libraries a user creates — stamps made from selected annotations, PDFs imported into the panel — are kept in the browser across reloads. For the whole picture — the engine’s WebAssembly, workers, CSP — see Self-hosting & air-gapped deployments.

Fonts for text annotations#

Text annotations use the 14 standard PDF fonts out of the box. To offer more — a brand typeface, a script the standard fonts don’t cover — list them under annotations.fonts:

annotations: {
  fonts: [
    { key: 'brand-sans', url: '/fonts/BrandSans-Regular.ttf', label: 'Brand Sans' },
    { key: 'noto-sc', url: '/fonts/NotoSansSC-Regular.otf', label: 'Noto Sans SC' },
  ];
}

Each font is fetched once when the viewer mounts, registered on the engine under its key (a glyph subset is embedded in the PDF when you save), and mounted as a @font-face of the same name so the text editor shows the very face the document will carry. The style panel then lists it by label, next to bold, italic and underline (also Ctrl/Cmd+B/I/U while typing), which apply to the selected text or to the whole box. A key must not be one of the standard names (helvetica, times-roman, …); a URL that fails to load is skipped with a console warning. Fonts on the cloud engine are a server policy, so the option applies to the built-in local engine.

Where to go next#

• Configure the toolbar and available viewer controls.
• Listen to the ready event when you need access to the plugin registry.
• Switch to the Headless docs when you want to build the entire interface yourself.