EmbedPDF

https://www.embedpdf.com/docs
Admin
EmbedPDF is an open-source, fast, customizable, and framework-agnostic PDF viewer for modern web...
Tokens:204,858
Snippets:2,166
Trust Score:7.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run the development server

Source: https://www.embedpdf.com/docs/vue/headless/full-example

Start the Vite development server for the Vuetify example.

```bash
pnpm --filter @embedpdf/example-vue-vuetify run dev
```

--------------------------------

### Run the development server

Source: https://www.embedpdf.com/docs/react/headless/full-example

Start the Vite development server for the React MUI example.

```bash
pnpm --filter @embedpdf/example-react-mui run dev
```

--------------------------------

### Run the development server

Source: https://www.embedpdf.com/docs/svelte/headless/full-example

Start the Vite development server for the Svelte example.

```bash
pnpm --filter @embedpdf/example-svelte-tailwind run dev
```

--------------------------------

### Install Viewport Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-viewport

Installation commands for various package managers.

```bash
npm install @embedpdf/plugin-viewport
```

```bash
pnpm add @embedpdf/plugin-viewport
```

```bash
yarn add @embedpdf/plugin-viewport
```

```bash
bun add @embedpdf/plugin-viewport
```

--------------------------------

### Install dependencies

Source: https://www.embedpdf.com/docs/react/headless/full-example

Install all required project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install @embedpdf/svelte-pdf-viewer

Source: https://www.embedpdf.com/docs/svelte/viewer/getting-started

Installation commands for various package managers.

```bash
npm install @embedpdf/svelte-pdf-viewer
```

```bash
pnpm add @embedpdf/svelte-pdf-viewer
```

```bash
yarn add @embedpdf/svelte-pdf-viewer
```

```bash
bun add @embedpdf/svelte-pdf-viewer
```

--------------------------------

### Install PDFium Library

Source: https://www.embedpdf.com/docs/pdfium/getting-started

Commands to install the library using various package managers.

```bash
npm i @embedpdf/pdfium
```

```bash
pnpm add @embedpdf/pdfium
```

```bash
yarn add @embedpdf/pdfium
```

```bash
bun add @embedpdf/pdfium
```

--------------------------------

### Install Commands Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-commands

Installation commands for various package managers.

```bash
npm install @embedpdf/plugin-commands
```

```bash
pnpm add @embedpdf/plugin-commands
```

```bash
yarn add @embedpdf/plugin-commands
```

```bash
bun add @embedpdf/plugin-commands
```

--------------------------------

### Install View Manager Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-view-manager

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-view-manager @embedpdf/plugin-document-manager
```

```bash
pnpm add @embedpdf/plugin-view-manager @embedpdf/plugin-document-manager
```

```bash
yarn add @embedpdf/plugin-view-manager @embedpdf/plugin-document-manager
```

```bash
bun add @embedpdf/plugin-view-manager @embedpdf/plugin-document-manager
```

--------------------------------

### Install Rotate Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-rotate

Commands to install the plugin using various package managers.

```bash
npm install @embedpdf/plugin-rotate
```

```bash
pnpm add @embedpdf/plugin-rotate
```

```bash
yarn add @embedpdf/plugin-rotate
```

```bash
bun add @embedpdf/plugin-rotate
```

--------------------------------

### Install Selection Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-selection

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
pnpm add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
yarn add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
bun add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

--------------------------------

### Basic Usage Example

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/open-document-url

Demonstrates opening a password-protected PDF using async/await.

```javascript
// Assuming 'engine' is an initialized PdfiumEngine instance
 
const fileUrl = { id: 'my-doc', url: '/path/to/document.pdf' };
 
try {
  // Use .toPromise() to work with async/await
  const document = await engine.openDocumentUrl(fileUrl, { password: 'my-secret-password' }).toPromise();
 
  console.log(`Successfully opened document with ${document.pageCount} pages.`);
 
  // Now you can use the 'document' object with other engine methods
  // e.g., engine.renderPage(document, document.pages[0]);
 
} catch (error) {
  console.error('Failed to open document:', error);
}
```

--------------------------------

### Build core packages

Source: https://www.embedpdf.com/docs/react/headless/full-example

Build the local workspace packages required by the example.

```bash
pnpm run build --filter "./packages/*"
```

--------------------------------

### Install the Zoom Plugin

Source: https://www.embedpdf.com/docs/react/headless/understanding-plugins

Commands to install the zoom plugin package using various package managers.

```bash
npm install @embedpdf/plugin-zoom
```

```bash
pnpm add @embedpdf/plugin-zoom
```

```bash
yarn add @embedpdf/plugin-zoom
```

```bash
bun add @embedpdf/plugin-zoom
```

--------------------------------

### Install Thumbnail Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-thumbnail

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-thumbnail @embedpdf/plugin-render
```

```bash
pnpm add @embedpdf/plugin-thumbnail @embedpdf/plugin-render
```

```bash
yarn add @embedpdf/plugin-thumbnail @embedpdf/plugin-render
```

```bash
bun add @embedpdf/plugin-thumbnail @embedpdf/plugin-render
```

--------------------------------

### Install Render Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-render

Commands to install the Render Plugin package using various package managers.

```bash
npm install @embedpdf/plugin-render
```

```bash
pnpm add @embedpdf/plugin-render
```

```bash
yarn add @embedpdf/plugin-render
```

```bash
bun add @embedpdf/plugin-render
```

--------------------------------

### Install Signature Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-signature

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-signature @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
pnpm add @embedpdf/plugin-signature @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
yarn add @embedpdf/plugin-signature @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
bun add @embedpdf/plugin-signature @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

--------------------------------

### Open Document from Buffer in Node.js

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/open-document-buffer

Example demonstrating how to read a file from the filesystem and open it as a PDF document using an engine instance.

```javascript
import { readFile } from 'fs/promises';
 
// Assuming 'engine' is an initialized PdfiumEngine instance
 
try {
  const pdfBuffer = await readFile('path/to/my-document.pdf');
 
  const document = await engine.openDocumentBuffer(
    { id: 'local-file', content: pdfBuffer },
    { password: 'optional-password' }
  ).toPromise();
 
  console.log(`Document loaded with ${document.pageCount} pages.`);
} catch (error) {
  console.error('Failed to load document from buffer:', error);
}
```

--------------------------------

### Install Export Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-export

Commands to install the plugin package using various package managers.

```bash
npm install @embedpdf/plugin-export
```

```bash
pnpm add @embedpdf/plugin-export
```

```bash
yarn add @embedpdf/plugin-export
```

```bash
bun add @embedpdf/plugin-export
```

--------------------------------

### Install Document Manager Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-document-manager

Install the plugin package using your preferred package manager.

```bash
npm install @embedpdf/plugin-document-manager
```

```bash
pnpm add @embedpdf/plugin-document-manager
```

```bash
yarn add @embedpdf/plugin-document-manager
```

```bash
bun add @embedpdf/plugin-document-manager
```

--------------------------------

### Initialize PDFium Module

Source: https://www.embedpdf.com/docs/pdfium/getting-started

Setup the PDFium instance and initialize the extension library, which is required before any PDF operations.

```typescript
import { init, WrappedPdfiumModule } from '@embedpdf/pdfium';
 
const pdfiumWasm = 'https://cdn.jsdelivr.net/npm/@embedpdf/pdfium/dist/pdfium.wasm';
 
let pdfiumInstance: WrappedPdfiumModule | null = null;
 
async function initializePdfium() {
  if (pdfiumInstance) return pdfiumInstance;
  
  const response = await fetch(pdfiumWasm);
  const wasmBinary = await response.arrayBuffer();
  pdfiumInstance = await init({ wasmBinary });
  
  // Initialize the PDFium extension library
  // This is required before performing any PDF operations
  pdfiumInstance.PDFiumExt_Init();
  
  return pdfiumInstance;
}
 
const pdfium = await initializePdfium();
```

--------------------------------

### Install Form Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-form

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-form @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
pnpm add @embedpdf/plugin-form @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
yarn add @embedpdf/plugin-form @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
bun add @embedpdf/plugin-form @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

--------------------------------

### Complete air-gapped configuration

Source: https://www.embedpdf.com/docs/snippet/airgapped

Full example demonstrating how to self-host WASM, fonts, and disable external stamp and UI font requests.

```javascript
import EmbedPDF from '@embedpdf/snippet';
import { FontCharset } from '@embedpdf/models';
 
EmbedPDF.init({
  target: document.getElementById('pdf-viewer'),
  src: '/document.pdf',
 
  // 1. Self-hosted wasm
  wasmUrl: '/assets/pdfium.wasm',
 
  // 2. Self-hosted font fallback (or set to null to disable)
  fontFallback: {
    fonts: {
      [FontCharset.SHIFTJIS]: '/fonts/NotoSansJP-Regular.otf',
      [FontCharset.GB2312]: '/fonts/NotoSansSC-Regular.otf',
    },
  },
 
  // 3. No external webfonts for UI or signature modal.
  fonts: {
    ui: null,
    signature: null,
  },
 
  // 4. No default stamp library fetched from the CDN.
  stamp: { manifests: [] },
});
```

--------------------------------

### Install Tiling Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-tiling

Install the Tiling plugin along with its required dependencies using your preferred package manager.

```bash
npm install @embedpdf/plugin-tiling @embedpdf/plugin-render @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
pnpm add @embedpdf/plugin-tiling @embedpdf/plugin-render @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
yarn add @embedpdf/plugin-tiling @embedpdf/plugin-render @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
bun add @embedpdf/plugin-tiling @embedpdf/plugin-render @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

--------------------------------

### Install Pan Plugin Dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-pan

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-pan @embedpdf/plugin-viewport @embedpdf/plugin-interaction-manager
```

```bash
pnpm add @embedpdf/plugin-pan @embedpdf/plugin-viewport @embedpdf/plugin-interaction-manager
```

```bash
yarn add @embedpdf/plugin-pan @embedpdf/plugin-viewport @embedpdf/plugin-interaction-manager
```

```bash
bun add @embedpdf/plugin-pan @embedpdf/plugin-viewport @embedpdf/plugin-interaction-manager
```

--------------------------------

### Install Spread Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-spread

Commands to install the Spread Plugin package using various package managers.

```bash
npm install @embedpdf/plugin-spread
```

```bash
pnpm add @embedpdf/plugin-spread
```

```bash
yarn add @embedpdf/plugin-spread
```

```bash
bun add @embedpdf/plugin-spread
```

--------------------------------

### Install the PDF Viewer package

Source: https://www.embedpdf.com/docs/react/viewer/getting-started

Use your preferred package manager to add the viewer to your project dependencies.

```bash
npm install @embedpdf/react-pdf-viewer
```

```bash
pnpm add @embedpdf/react-pdf-viewer
```

```bash
yarn add @embedpdf/react-pdf-viewer
```

```bash
bun add @embedpdf/react-pdf-viewer
```

--------------------------------

### Install Print Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-print

Commands to install the @embedpdf/plugin-print package using various package managers.

```bash
npm install @embedpdf/plugin-print
```

```bash
pnpm add @embedpdf/plugin-print
```

```bash
yarn add @embedpdf/plugin-print
```

```bash
bun add @embedpdf/plugin-print
```

--------------------------------

### Install PDFium Engine dependencies

Source: https://www.embedpdf.com/docs/react/headless/engine

Commands to install the core and engine packages using various package managers.

```bash
npm install @embedpdf/core @embedpdf/engines
```

```bash
pnpm add @embedpdf/core @embedpdf/engines
```

```bash
yarn add @embedpdf/core @embedpdf/engines
```

```bash
bun add @embedpdf/core @embedpdf/engines
```

--------------------------------

### Log Annotations for First Page

Source: https://www.embedpdf.com/docs/engines/annotations/get-page-annotations

Example demonstrating how to retrieve and iterate through annotations on the first page of a document.

```javascript
// Assuming 'engine' and an open 'document' object are available
 
async function logAnnotationsForFirstPage(doc) {
  try {
    const firstPage = doc.pages[0];
    const annotations = await engine.getPageAnnotations(doc, firstPage).toPromise();
 
    console.log(`Found ${annotations.length} annotations on page 0.`);
 
    annotations.forEach(anno => {
      console.log(`- Annotation ID: ${anno.id}, Type: ${anno.type}`);
    });
  } catch (error) {
    console.error('Failed to get page annotations:', error);
  }
}
```

--------------------------------

### Install Capture Plugin Dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-capture

Commands to install the Capture plugin along with its required dependencies using various package managers.

```bash
npm install @embedpdf/plugin-capture @embedpdf/plugin-render @embedpdf/plugin-interaction-manager
```

```bash
pnpm add @embedpdf/plugin-capture @embedpdf/plugin-render @embedpdf/plugin-interaction-manager
```

```bash
yarn add @embedpdf/plugin-capture @embedpdf/plugin-render @embedpdf/plugin-interaction-manager
```

```bash
bun add @embedpdf/plugin-capture @embedpdf/plugin-render @embedpdf/plugin-interaction-manager
```

--------------------------------

### Install EmbedPDF packages

Source: https://www.embedpdf.com/docs/engines/installation

Use these commands to install the required packages via npm, pnpm, yarn, or bun.

```bash
npm i @embedpdf/engines @embedpdf/pdfium
```

```bash
pnpm add @embedpdf/engines @embedpdf/pdfium
```

```bash
yarn add @embedpdf/engines @embedpdf/pdfium
```

```bash
bun add @embedpdf/engines @embedpdf/pdfium
```

--------------------------------

### Destroying the Engine Instance

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/destroy

Example showing how to call destroy on an initialized engine instance and handle the resulting promise.

```javascript
// Assuming 'engine' is an initialized engine instance that is no longer needed
 
async function cleanupPdfProcessor() {
  try {
    await engine.destroy().toPromise();
    console.log('PDF engine has been shut down and resources are freed.');
  } catch (error) {
    console.error('Failed to destroy PDF engine:', error);
  }
}
 
// Call this when your component unmounts or your application closes.
cleanupPdfProcessor();
```

--------------------------------

### Initialize PDFium Engine with EmbedPDF

Source: https://www.embedpdf.com/docs/react/headless/engine

Example of using the usePdfiumEngine hook to provide an engine instance to the EmbedPDF provider.

```tsx
import { usePdfiumEngine } from '@embedpdf/engines/react';
import { EmbedPDF } from '@embedpdf/core/react';
// ... import your desired plugins and components
 
function MyViewer() {
  const { engine, isLoading, error } = usePdfiumEngine();
 
  if (isLoading) {
    return <div>Loading PDF Engine...</div>;
  }
  if (error) {
    return <div>Error loading engine: {error.message}</div>;
  }
  
  // The engine is ready and initialized. Pass it to the provider.
  return (
    <EmbedPDF engine={engine} plugins={/* ... your plugins ... */}>
      {/* ... your viewer components like <Viewport />, <Toolbar />, etc. ... */}
    </EmbedPDF>
  );
}
```

--------------------------------

### Install Annotation Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-annotation

Install the required packages for annotation functionality, including interaction, selection, and history management.

```bash
npm install @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
pnpm add @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
yarn add @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
bun add @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

--------------------------------

### Render a PDF page to an image

Source: https://www.embedpdf.com/docs/engines/rendering/render-page

Example demonstrating how to render the first page of a document at 150% scale with annotations enabled.

```javascript
// Assuming 'engine' and an open 'document' object are available
 
async function renderFirstPage(doc) {
  try {
    const firstPage = doc.pages[0];
    
    const imageBlob = await engine.renderPage(doc, firstPage, {
      scaleFactor: 1.5, // Render at 150% zoom
      withAnnotations: true,
    }).toPromise();
 
    // In a browser, you can create a URL to display the image
    const imageUrl = URL.createObjectURL(imageBlob);
    document.getElementById('my-image-element').src = imageUrl;
 
  } catch (error) {
    console.error('Failed to render page:', error);
  }
}
```

--------------------------------

### Creating a Highlight Annotation

Source: https://www.embedpdf.com/docs/engines/annotations/create-page-annotation

Example demonstrating the construction of a highlight annotation object and its subsequent addition to a PDF page.

```typescript
import { 
  PdfAnnotationSubtype, 
  PdfHighlightAnnoObject, 
  uuidV4 
} from '@embedpdf/models';
 
// Assuming 'engine', 'document', and 'page' are available
 
async function addHighlight(doc, page) {
  // Construct a new highlight annotation object with its type
  const newHighlight: PdfHighlightAnnoObject = {
    id: uuidV4(),
    type: PdfAnnotationSubtype.HIGHLIGHT,
    pageIndex: page.index,
    rect: { origin: { x: 100, y: 100 }, size: { width: 200, height: 15 } },
    segmentRects: [{ origin: { x: 100, y: 100 }, size: { width: 200, height: 15 } }],
    color: '#FFD700', // Gold
    opacity: 0.5,
  };
 
  try {
    const newId = await engine.createPageAnnotation(doc, page, newHighlight).toPromise();
    console.log(`Successfully created annotation with ID: ${newId}.`);
    // Now you could re-render the page or call saveAsCopy()
  } catch (error) {
    console.error('Failed to create annotation:', error);
  }
}
```

--------------------------------

### Using Custom Headers for Authentication

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/open-document-url

Example of providing authorization headers when fetching a secure PDF.

```javascript
// Load a PDF that requires authentication
const fileUrl = { id: 'secure-doc', url: 'https://api.example.com/documents/123.pdf' };
 
const document = await engine.openDocumentUrl(fileUrl, {
  requestOptions: {
    headers: {
      'Authorization': 'Bearer your-access-token-here',
      'X-Custom-Header': 'custom-value'
    }
  }
}).toPromise();
```

--------------------------------

### Closing a Document Example

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/close-document

Demonstrates the proper way to close a document and handle potential errors using an async/await pattern.

```javascript
// Assuming 'engine' and an open 'document' object are available
 
console.log('Finished working with the document.');
 
try {
  await engine.closeDocument(document).toPromise();
  console.log('Document closed and resources freed successfully.');
} catch (error) {
  console.error('Failed to close the document:', error);
}
 
// Any subsequent calls using the 'document' handle will now fail.
// For example: await engine.renderPage(document, ...).toPromise(); -> REJECTION
```

--------------------------------

### Create a PDFViewer component

Source: https://www.embedpdf.com/docs/vue/headless/getting-started

Implement a minimal PDF viewer using Vue 3 script setup, initializing the engine and configuring necessary plugins.

```vue
<script setup lang="ts">
import { usePdfiumEngine } from '@embedpdf/engines/vue';
import { EmbedPDF } from '@embedpdf/core/vue';
import { createPluginRegistration } from '@embedpdf/core';
 
// Import the essential plugins
import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/vue';
import { ScrollPluginPackage, Scroller } from '@embedpdf/plugin-scroll/vue';
import {
  DocumentContent,
  DocumentManagerPluginPackage,
} from '@embedpdf/plugin-document-manager/vue';
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/vue';
 
// 1. Initialize the engine with the Vue composable
const { engine, isLoading } = usePdfiumEngine();
 
// 2. Register the plugins you need
const plugins = [
  createPluginRegistration(DocumentManagerPluginPackage, {
    initialDocuments: [{ url: 'https://snippet.embedpdf.com/ebook.pdf' }],
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
];
</script>
 
<template>
  <div v-if="isLoading || !engine" class="loading-pane">
    Loading PDF Engine...
  </div>
 
  <!-- 3. Wrap your UI with the <EmbedPDF> provider -->
  <div v-else style="height: 500px">
    <EmbedPDF :engine="engine" :plugins="plugins" v-slot="{ activeDocumentId }">
      <DocumentContent
        v-if="activeDocumentId"
        :document-id="activeDocumentId"
        v-slot="{ isLoaded }"
      >
        <Viewport
          v-if="isLoaded"
          :document-id="activeDocumentId"
          style="background-color: #f1f3f5"
        >
          <Scroller :document-id="activeDocumentId">
            <template #default="{ page }">
              <div :style="{ width: page.width + 'px', height: page.height + 'px' }">
                <!-- The RenderLayer is responsible for drawing the page -->
                <RenderLayer
                  :document-id="activeDocumentId"
                  :page-index="page.pageIndex"
                />
              </div>
            </template>
          </Scroller>
        </Viewport>
      </DocumentContent>
    </EmbedPDF>
  </div>
</template>
 
<style scoped>
.loading-pane {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
```

--------------------------------

### Get PDF Page Count

Source: https://www.embedpdf.com/docs/pdfium/getting-started

Example workflow for loading a PDF document from a Uint8Array and retrieving its page count.

```typescript
import { init, WrappedPdfiumModule } from '@embedpdf/pdfium';
 
const pdfiumWasm = 'https://cdn.jsdelivr.net/npm/@embedpdf/pdfium/dist/pdfium.wasm';
 
let pdfiumInstance: WrappedPdfiumModule | null = null;
 
async function initializePdfium() {
  if (pdfiumInstance) return pdfiumInstance;
  
  const response = await fetch(pdfiumWasm);
  const wasmBinary = await response.arrayBuffer();
  pdfiumInstance = await init({ wasmBinary });
  
  // Initialize the PDFium extension library
  pdfiumInstance.PDFiumExt_Init();
  
  return pdfiumInstance;
}
 
async function getPdfPageCount(pdfData: Uint8Array) {
  // Step 1: Initialize PDFium
  const pdfium = await initializePdfium();
 
  // Step 2: Load the PDF document
  const filePtr = pdfium.pdfium.wasmExports.malloc(pdfData.length);
  pdfium.pdfium.HEAPU8.set(pdfData, filePtr);
  const docPtr = pdfium.FPDF_LoadMemDocument(filePtr, pdfData.length, 0);
 
  if (!docPtr) {
    const error = pdfium.FPDF_GetLastError();
    pdfium.pdfium.wasmExports.free(filePtr);
    throw new Error(`Failed to load PDF: ${error}`);
  }
 
  try {
    // Step 3: Get the page count
    const pageCount = pdfium.FPDF_GetPageCount(docPtr);
    return pageCount;
  } finally {
    // Step 4: Clean up
    pdfium.FPDF_CloseDocument(docPtr);
    pdfium.pdfium.wasmExports.free(filePtr);
  }
}
 
// Usage
fetch('sample.pdf')
  .then(response => response.arrayBuffer())
  .then(buffer => getPdfPageCount(new Uint8Array(buffer)))
  .then(pageCount => {
    console.log(`The PDF has ${pageCount} pages`);
  })
  .catch(error => console.error(error));
```

--------------------------------

### usePdfiumEngine(options)

Source: https://www.embedpdf.com/docs/svelte/headless/engine

Initializes the PDFium engine and returns a readable Svelte store containing the engine instance and its current loading state.

```APIDOC
## usePdfiumEngine(options)

### Description
Initializes the PDFium engine and returns a Svelte store that tracks the engine's lifecycle, including loading status, potential errors, and the initialized engine instance.

### Parameters
#### Configuration Options
- **wasmUrl** (string) - Optional - Custom URL for the WebAssembly file.
- **worker** (boolean) - Optional - Whether to run the engine in a Web Worker (default: true).
- **logger** (Logger) - Optional - Custom logger instance.

### Store Properties
- **engine** (PdfEngine | null) - The initialized engine instance, or null if not yet ready.
- **isLoading** (boolean) - Indicates if the engine is currently downloading or initializing.
- **error** (Error | null) - Contains an error object if initialization failed.
```

--------------------------------

### Install Scroll Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-scroll

Install the required packages using your preferred package manager.

```bash
npm install @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
pnpm add @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
yarn add @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

```bash
bun add @embedpdf/plugin-scroll @embedpdf/plugin-viewport
```

--------------------------------

### Clone the repository

Source: https://www.embedpdf.com/docs/react/headless/full-example

Download the source code and navigate into the project directory.

```bash
git clone https://github.com/embedpdf/embed-pdf-viewer.git
cd embed-pdf-viewer
```

--------------------------------

### Install I18n Plugin

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-i18n

Commands to install the @embedpdf/plugin-i18n package using various package managers.

```bash
npm install @embedpdf/plugin-i18n
```

```bash
pnpm add @embedpdf/plugin-i18n
```

```bash
yarn add @embedpdf/plugin-i18n
```

```bash
bun add @embedpdf/plugin-i18n
```

--------------------------------

### usePdfiumEngine()

Source: https://www.embedpdf.com/docs/vue/headless/engine

Initializes the PDFium engine and returns reactive state for the engine instance, loading status, and potential errors.

```APIDOC
## usePdfiumEngine(options?)

### Description
Initializes the PDFium engine. Returns reactive references to the engine instance, loading state, and any initialization errors.

### Parameters
- **options** (Object) - Optional - Configuration object for the engine.
  - **wasmUrl** (string) - Optional - Custom WebAssembly file URL.
  - **worker** (boolean) - Optional - Whether to run the engine in a Web Worker (default: true).
  - **logger** (Logger) - Optional - Custom logger instance.

### Return Values
- **engine** (Ref<PdfEngine | null>) - The initialized PdfEngine instance, or null while loading.
- **isLoading** (Ref<boolean>) - True while the engine is downloading and initializing.
- **error** (Ref<Error | null>) - Error object if initialization fails, otherwise null.
```

--------------------------------

### Install EmbedPDF Engines

Source: https://www.embedpdf.com/docs/engines/react-integration

Commands to install the @embedpdf/engines package using various package managers.

```bash
npm install @embedpdf/engines
```

```bash
pnpm add @embedpdf/engines
```

```bash
yarn add @embedpdf/engines
```

```bash
bun add @embedpdf/engines
```

--------------------------------

### Configure Initial Documents

Source: https://www.embedpdf.com/docs/vue/viewer/plugins/plugin-document-manager

Set up default documents and document limits via the PDFViewer configuration object.

```vue
<template>
  <PDFViewer
    :config="{
      documentManager: {
        // Load these files on startup
        initialDocuments: [
          { 
            url: 'https://snippet.embedpdf.com/ebook.pdf',
            autoActivate: true,
            documentId: 'ebook-embedpdf',
          },
          { 
            url: 'https://snippet.embedpdf.com/ebook.pdf',
            autoActivate: false 
          }
        ],
        maxDocuments: 10
      },
      tabBar: 'multiple'
    }"
  />
</template>
```

--------------------------------

### Initialize Viewer with Color Preference

Source: https://www.embedpdf.com/docs/snippet/theme

Set the initial color mode to 'light', 'dark', or 'system' during viewer initialization.

```javascript
const viewer = EmbedPDF.init({
  // ... other config
  theme: {
    // Options: 'light', 'dark', or 'system' (default)
    preference: 'dark' 
  }
});
```

--------------------------------

### Install EmbedPDF via Package Manager

Source: https://www.embedpdf.com/docs/snippet/getting-started

Install the core snippet package using your preferred package manager.

```bash
npm install @embedpdf/snippet
```

```bash
pnpm add @embedpdf/snippet
```

```bash
yarn add @embedpdf/snippet
```

```bash
bun add @embedpdf/snippet
```

--------------------------------

### Configure Document Manager

Source: https://www.embedpdf.com/docs/snippet/plugins/plugin-document-manager

Initialize the viewer with initial documents, tab limits, and tab bar visibility settings.

```javascript
const viewer = EmbedPDF.init({
  // ...
  documentManager: {
    // Load these files on startup
    initialDocuments: [
      { 
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        // By default, autoActivate is true. 
        // This document will open and become active.
        autoActivate: true,
        // OPTIONAL: Set a custom ID so you can easily reference
        // this document later (e.g. to scroll or close it).
        documentId: 'ebook-embedpdf',
      },
      { 
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        // If we don't set this to false, this document would
        // steal focus immediately after loading!
        autoActivate: false 
      }
    ],
    // Limit total open tabs (older ones may be closed)
    maxDocuments: 10
  },
  // Show the built-in tab bar if you want tabs inside the viewer
  tabBar: 'multiple' // 'always', 'multiple' (default), or 'never'
});
```

--------------------------------

### Install EmbedPDF dependencies

Source: https://www.embedpdf.com/docs/react/headless/getting-started

Install the core library, engine, and essential plugins using your preferred package manager.

```bash
npm install @embedpdf/core @embedpdf/engines @embedpdf/plugin-document-manager @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
```

```bash
pnpm add @embedpdf/core @embedpdf/engines @embedpdf/plugin-document-manager @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
```

```bash
yarn add @embedpdf/core @embedpdf/engines @embedpdf/plugin-document-manager @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
```

```bash
bun add @embedpdf/core @embedpdf/engines @embedpdf/plugin-document-manager @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
```

--------------------------------

### Install Stamp Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-stamp

Install the required packages for the Stamp Plugin and its dependencies using your preferred package manager.

```bash
npm install @embedpdf/plugin-stamp @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
pnpm add @embedpdf/plugin-stamp @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
yarn add @embedpdf/plugin-stamp @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

```bash
bun add @embedpdf/plugin-stamp @embedpdf/plugin-annotation @embedpdf/plugin-interaction-manager @embedpdf/plugin-selection @embedpdf/plugin-history
```

--------------------------------

### Initialize Engine in Node.js

Source: https://www.embedpdf.com/docs/engines/introduction

Configure the engine for Node.js environments using sharp for image conversion.

```typescript
import { readFile, writeFile } from 'fs/promises';
import sharp from 'sharp';
import { init } from '@embedpdf/pdfium';
import { PdfiumNative, PdfEngine } from '@embedpdf/engines/pdfium';
import { createNodeImageDataToBufferConverter } from '@embedpdf/engines/converters';
 
const imageConverter = createNodeImageDataToBufferConverter(sharp);
const pdfiumModule = await init();
 
// Create the native executor (initializes PDFium automatically)
const native = new PdfiumNative(pdfiumModule);
 
// Create the orchestrator with image converter
const engine = new PdfEngine(native, { imageConverter });
 
// Engine is ready to use immediately!
const pdfBuffer = await readFile('document.pdf');
const document = await engine
  .openDocumentBuffer({ id: 'sample', content: pdfBuffer })
  .toPromise();
 
const imageBuffer = await engine
  .renderPage(document, document.pages[0])
  .toPromise();
  
await writeFile('output.webp', imageBuffer);
```

--------------------------------

### Install Zoom Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-zoom

Install the required packages for the Zoom Plugin and the Interaction Manager using your preferred package manager.

```bash
npm install @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager
```

```bash
pnpm add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager
```

```bash
yarn add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager
```

```bash
bun add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager
```

--------------------------------

### Install Layout Analysis Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-layout-analysis

Commands to install the required packages for the Layout Analysis plugin using various package managers.

```bash
npm install @embedpdf/plugin-layout-analysis @embedpdf/plugin-ai-manager @embedpdf/ai @embedpdf/plugin-render onnxruntime-web
```

```bash
pnpm add @embedpdf/plugin-layout-analysis @embedpdf/plugin-ai-manager @embedpdf/ai @embedpdf/plugin-render onnxruntime-web
```

```bash
yarn add @embedpdf/plugin-layout-analysis @embedpdf/plugin-ai-manager @embedpdf/ai @embedpdf/plugin-render onnxruntime-web
```

```bash
bun add @embedpdf/plugin-layout-analysis @embedpdf/plugin-ai-manager @embedpdf/ai @embedpdf/plugin-render onnxruntime-web
```

--------------------------------

### Install Redaction Plugin dependencies

Source: https://www.embedpdf.com/docs/react/headless/plugins/plugin-redaction

Install the Redaction plugin along with the recommended Selection and Interaction Manager plugins using your preferred package manager.

```bash
npm install @embedpdf/plugin-redaction @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
pnpm add @embedpdf/plugin-redaction @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
yarn add @embedpdf/plugin-redaction @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

```bash
bun add @embedpdf/plugin-redaction @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager
```

--------------------------------

### Accessing the Engine Reference

Source: https://www.embedpdf.com/docs/react/viewer/engine

Demonstrates how to retrieve the engine instance from the viewer's plugin registry using a ref to perform direct operations.

```typescript
import { PDFViewer, PDFViewerRef, DocumentManagerPlugin } from '@embedpdf/react-pdf-viewer';
import { useRef } from 'react';
 
export default function App() {
  const viewerRef = useRef<PDFViewerRef>(null);
 
  const getDocumentMetadata = async () => {
    // Get the registry from the viewer
    const registry = await viewerRef.current?.registry;
    if (!registry) return;
 
    // Access the engine
    const engine = registry.getEngine();
 
    // Get the active document
    const documentManager = registry
      .getPlugin<DocumentManagerPlugin>('document-manager')
      ?.provides();
    const document = documentManager?.getActiveDocument();
 
    if (engine && document) {
      // Use engine methods directly
      const metadata = await engine.getMetadata(document).toPromise();
      console.log('Document metadata:', metadata);
    }
  };
 
  return (
    <>
      <button onClick={getDocumentMetadata}>Get Metadata</button>
      <PDFViewer ref={viewerRef} config={{ src: 'https://snippet.embedpdf.com/ebook.pdf' }} />
    </>
  );
}
```

--------------------------------

### Using Cookies for Authentication

Source: https://www.embedpdf.com/docs/engines/document-lifecycle/open-document-url

Example of including cookies in the request for session-based authentication.

```javascript
// Load a PDF using cookie-based authentication
const fileUrl = { id: 'session-doc', url: 'https://example.com/documents/secure.pdf' };
 
const document = await engine.openDocumentUrl(fileUrl, {
  requestOptions: {
    credentials: 'include' // Sends cookies with the request
  }
}).toPromise();
 
console.log(`Opened document with ${document.pageCount} pages using session cookies.`);
```

--------------------------------

### Delete Annotation Example

Source: https://www.embedpdf.com/docs/engines/annotations/remove-page-annotation

Demonstrates how to remove an annotation and handle the resulting task.

```javascript
// Assuming 'engine', 'document', and 'page' are available
 
async function deleteAnnotation(annotationToDelete) {
  try {
    const success = await engine.removePageAnnotation(document, page, annotationToDelete).toPromise();
    if (success) {
      console.log(`Annotation ${annotationToDelete.id} was successfully removed.`);
      // Re-render the page to reflect the change
    }
  } catch (error) {
    console.error('Failed to remove annotation:', error);
  }
}
```

--------------------------------

### Initialize Engine with usePdfiumEngine

Source: https://www.embedpdf.com/docs/engines/vue-integration

Basic implementation of the PDF engine within a Vue component using the Composition API.

```vue
<script setup>
import { usePdfiumEngine } from '@embedpdf/engines/vue';
 
// The composable returns reactive refs
const { engine, isLoading, error } = usePdfiumEngine();
</script>
 
<template>
  <div v-if="error">
    Error: {{ error.message }}
  </div>
  <div v-else-if="isLoading || !engine">
    Loading PDF Engine...
  </div>
  <div v-else>
    <p>PDF Engine is ready to use!</p>
    <!-- You can now pass the engine ref to other components -->
  </div>
</template>
```

--------------------------------

### Placeholder for Extracted Text

Source: https://www.embedpdf.com/docs/pdfium/examples/extract-text-from-pdf

Initial state display for the text extraction interactive example.

```text
No text extracted yet.
```

--------------------------------

### Exporting annotations with Svelte

Source: https://www.embedpdf.com/docs/svelte/headless/plugins/plugin-annotation

Demonstrates initializing the annotation plugin and exporting all annotations from a document.

```typescript
<script lang="ts">
  import { useAnnotation } from '@embedpdf/plugin-annotation/svelte';
 
  let { documentId }: { documentId: string } = $props();
  const annotation = useAnnotation(() => documentId);
 
  const handleExport = () => {
    annotation.provides?.exportAnnotations().wait(
      (exported) => {
        // exported: AnnotationTransferItem[]
        // Each entry has: { annotation, ctx? }
        // Stamps include ctx: { data: ArrayBuffer, mimeType: 'application/pdf' }
        console.log(`Exported ${exported.length} annotations`);
      },
      (error) => console.error('Export failed', error),
    );
  };
</script>
```

--------------------------------

### Render Zoomed Area Example

Source: https://www.embedpdf.com/docs/engines/rendering/render-page-rect

Demonstrates how to define a crop area and render it as an image blob.

```javascript
// Assuming 'engine' and an open 'document' object are available
 
async function renderZoomedArea(doc, page) {
  try {
    // Define a rectangle to capture the top-left quadrant of the page
    const cropArea = {
      origin: { x: 0, y: 0 },
      size: { 
        width: page.size.width / 2,
        height: page.size.height / 2
      },
    };
    
    const imageBlob = await engine.renderPageRect(doc, page, cropArea).toPromise();
 
    // Display the cropped image
    const imageUrl = URL.createObjectURL(imageBlob);
    document.getElementById('my-cropped-image').src = imageUrl;
 
  } catch (error) {
    console.error('Failed to render page rect:', error);
  }
}
```

--------------------------------

### Sync Theme with Application State

Source: https://www.embedpdf.com/docs/svelte/viewer/theme

Use the oninit callback and setTheme method to synchronize the viewer with an external theme toggle.

```svelte
<script lang="ts">
  import { PDFViewer, type EmbedPdfContainer } from '@embedpdf/svelte-pdf-viewer';
 
  interface Props {
    theme: 'light' | 'dark';
  }
 
  let { theme }: Props = $props();
 
  let container = $state<EmbedPdfContainer | null>(null);
 
  const handleInit = (c: EmbedPdfContainer) => {
    container = c;
  };
 
  $effect(() => {
    container?.setTheme({ preference: theme });
  });
</script>
 
<PDFViewer 
  oninit={handleInit}
  config={{
    src: 'https://snippet.embedpdf.com/ebook.pdf',
    theme: { preference: theme }
  }}
/>
```

--------------------------------

### Redrawing an Annotation

Source: https://www.embedpdf.com/docs/engines/rendering/render-page-annotation

Example showing how to render an annotation to a Blob and update an HTML image element.

```javascript
// Assuming 'engine', 'document', and 'page' objects are available
 
async function redrawAnnotation(annotation) {
  try {
    const imageBlob = await engine.renderPageAnnotation(
      document,
      page,
      annotation
    ).toPromise();
 
    // This blob can now be used to update an absolutely positioned
    // <img> element that overlays the PDF page viewer.
    const imageUrl = URL.createObjectURL(imageBlob);
    const annotationElement = document.getElementById(annotation.id);
    if (annotationElement) {
        annotationElement.src = imageUrl;
    }
 
  } catch (error) {
    console.error(`Failed to re-render annotation ${annotation.id}:`, error);
  }
}
```

--------------------------------

### PDFiumExt_Init()

Source: https://www.embedpdf.com/docs/pdfium/functions/PDFiumExt_Init

Initializes the PDFium extension library with the necessary configurations for WebAssembly. This function must be invoked once after the WebAssembly module is initialized and before any PDF operations occur.

```APIDOC
## PDFiumExt_Init()

### Description
Initializes the PDFium extension library with the proper configurations for operating in a WebAssembly environment. This function must be called after initializing the WebAssembly module but before performing any PDF operations.

### Parameters
This function does not take any parameters.

### Return Value
This function does not return a value.
```
Tokens:
Raw