### Run Example Dev Server

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

Start the development server for the React MUI example using pnpm.

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

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

### Complete Viewport Setup Example

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

Demonstrates loading a document, passing the documentId to components, and creating a toolbar to control scrolling for a specific document. This example includes UI elements for scrolling control and displays the current scroll state.

```jsx
import {
  useEmbedPdf,
  useViewportCapability,
  useViewportScrollActivity,
} from "@react-pdf-viewer/core";
import React from "react";

const Toolbar = ({ documentId }) => {
  const { forDocument } = useViewportCapability();
  const { isScrolling } = useViewportScrollActivity(documentId);
  const viewport = forDocument(documentId);

  const scroll = (position) => {
    viewport?.scrollTo(position);
  };

  return (
    <div className="toolbar">
      <button onClick={() => scroll({ x: 0, y: 0 })} disabled={!viewport}>
        Top
      </button>
      <button
        onClick={() => scroll({ behavior: "smooth", center: true })}
        disabled={!viewport}
      >
        Middle
      </button>
      <button onClick={() => scroll("end")} disabled={!viewport}>
        Bottom
      </button>
      <div className="scroll-status">
        {isScrolling ? "Scrolling" : "Idle"}
      </div>
    </div>
  );
};

const App = () => {
  const { documentId, plugin } = useEmbedPdf({
    // ... your embed pdf options
  });

  return (
    <div className="app">
      <Toolbar documentId={documentId} />
      <div className="viewer">
        <Viewport documentId={documentId}>{plugin.viewport.Slot()}</Viewport>
      </div>
    </div>
  );
};

export default App;
```

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

### Run Vue Vuetify Example Dev Server

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

Start the development server for the Vue Vuetify example using pnpm. This command specifically targets the example package.

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

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

### Run the Svelte Example Dev Server

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

Start the development server for the Svelte Tailwind example using Vite. Access the viewer at http://localhost:3000.

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

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

### Viewport Plugin Live Example

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

Demonstrates a complete setup for loading a document, passing its ID to components, and creating a toolbar to control scrolling for that specific document.

```javascript
import {
	createStore,
	createEffect,
	createMemo,
	createSignal,
	For,
	Show,
	mergeProps,
	splitProps
} from 'solid-js';
import {
	createViewport,
	useViewportCapability,
	useViewportScrollActivity
} from '@shared/svelte/components/Viewport';
import {
	createDocumentStore,
	useDocument
} from '@shared/svelte/components/Document';
import {
	createToolbar,
	ToolbarButton,
	ToolbarDropdown,
	ToolbarSpacer
} from '@shared/svelte/components/Toolbar';
import {
	createScrollableContainer
} from '@shared/svelte/components/ScrollableContainer';

const DEFAULT_DOCUMENT_ID = 'doc-1';

function App(props) {
	const [documentId, setDocumentId] = createSignal(DEFAULT_DOCUMENT_ID);
	const [documentStore] = createDocumentStore(documentId);
	const [viewport] = createViewport(documentId);
	const [toolbar] = createToolbar({
		documentId,
		scrollableContainer: viewport.scrollableContainer
	});
	const viewportCapability = useViewportCapability();
	const viewportScrollActivity = useViewportScrollActivity(documentId);

	const isScrolling = createMemo(() => viewportScrollActivity.isScrolling);

	const onScrollTo = (position) => {
		viewportCapability.forDocument(documentId()).scrollTo(position);
	};

	return (
		<div class="flex h-screen overflow-hidden">
			<div class="flex-grow flex flex-col">
				<div class="p-2 border-b">
					<Toolbar
						{...toolbar.props}
						class="border rounded-md"
						style="--toolbar-background: #f8fafc; --toolbar-border: #e2e8f0;"
					>
						<ToolbarButton
							label="Scroll"
							tooltip="Scroll to position"
							menuItems={[
								{ label: 'Top', onClick: () => onScrollTo({ y: 0 }) },
								{ label: 'Middle', onClick: () => onScrollTo({ y: '50%' }) },
								{ label: 'Bottom', onClick: () => onScrollTo({ y: '100%' }) }
							]}
						/>
						<ToolbarSpacer />
						<div class="flex items-center gap-2 px-2">
							<label for="docId">Document ID:</label>
							<input
								id="docId"
								type="text"
								value={documentId()}
								onInput={(e) => setDocumentId(e.target.value)}
								class="w-32 p-1 border rounded"
							/>
						</div>
					</Toolbar>
				</div>
				<div class="flex-grow overflow-auto p-4" ref={viewport.containerRef}>
					<Document documentId={documentId()} />
				</div>
			</div>
			<div class="w-64 border-l p-4 flex flex-col gap-2">
				<h3 class="font-bold">Viewport Status</h3>
				<p>
					Scrolling:
					<span class="font-medium">{isScrolling() ? 'Yes' : 'No'}</span>
				</p>
				<p>
					Viewport Gap:
					<span class="font-medium">{viewportCapability.getViewportGap()}px</span>
				</p>
				<p>
					Viewport Mounted:
					<span class="font-medium">{viewportCapability.isViewportMounted(documentId()) ? 'Yes' : 'No'}</span>
				</p>
			</div>
		</div>
	);
}

function Document(props) {
	const document = useDocument(props.documentId);

	return (
		<div class="w-full h-[200vh] bg-gray-100 p-4">
			<p>Document Content for: {props.documentId}</p>
			<p>Scroll down to see the effect.</p>
			{/* Simulate a long document */} 
		</div>
	);
}

export default App;

```

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

### Split View Layout Example

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

Demonstrates a split-view layout using a grid system to render multiple ViewContext instances side-by-side. This example requires setup for 'ebook.pdf'.

```javascript
import {
  ViewManagerPlugin,
  ViewManagerPluginConfig
} from "@ தொகுப்பு/react-headless";
import {
  ViewContext,
  ViewContextProps
} from "@ தொகுப்பு/react-headless";
import React from "react";

interface ViewManagerPluginProps {
  config?: ViewManagerPluginConfig;
}

export const ViewManagerPluginComponent: React.FC<ViewManagerPluginProps> = ({
  config
}) => {
  return (
    <ViewManagerPlugin config={config}>
      <SplitViewLayout />
    </ViewManagerPlugin>
  );
};

const SplitViewLayout: React.FC = () => {
  const { createView, getAllViews } = useViewManagerCapability();
  const views = getAllViews();

  const addPane = () => {
    createView();
  };

  return (
    <div className="split-view-container">
      <div className="split-view-controls">
        <button onClick={addPane}>Add Pane</button>
      </div>
      <div className="split-view-panes">
        {views.map((view) => (
          <ViewContext key={view.id} viewId={view.id}>
            <ViewPane viewId={view.id} />
          </ViewContext>
        ))}
      </div>
    </div>
  );
};

interface ViewPaneProps {
  viewId: string;
}

const ViewPane: React.FC<ViewPaneProps> = ({ viewId }) => {
  const { documentIds, activeDocumentId, isFocused, focus, addDocument, removeDocument, setActiveDocument } = useView(viewId);

  const addDocumentToView = (docId: string) => {
    addDocument(docId);
  };

  const removeDocumentFromView = (docId: string) => {
    removeDocument(docId);
  };

  const switchActiveDocument = (docId: string) => {
    setActiveDocument(docId);
  };

  return (
    <div className={`view-pane ${isFocused ? "focused" : ""}`}>
      <h3>View: {viewId}</h3>
      <p>Documents: {documentIds.join(", ") || "None"}</p>
      <p>Active Document: {activeDocumentId || "None"}</p>
      <button onClick={() => addDocumentToView("ebook.pdf")}>Add ebook.pdf</button>
      {documentIds.includes("ebook.pdf") && (
        <button onClick={() => removeDocumentFromView("ebook.pdf")}>Remove ebook.pdf</button>
      )}
      {documentIds.length > 0 && (
        <button onClick={() => switchActiveDocument(documentIds[0])}>Switch to First Doc</button>
      )}
      <button onClick={focus}>Focus View</button>
    </div>
  );
};

export default ViewManagerPluginComponent;

```

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

### Install Viewport Plugin (bun)

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

Install the viewport plugin using bun.

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

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

### Install PDFium with bun

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

Install the PDFium package using bun.

```bash
bun add @embedpdf/pdfium

```

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

### Install Viewport Plugin (yarn)

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

Install the viewport plugin using yarn.

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

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

### RenderPlugin Configuration Example

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

Demonstrates how to configure the RenderPlugin to include annotations and form appearances when rendering PDF pages. This setup is applied globally.

```javascript
import { createHeadless } from '@oruga-ui/vue-next'
import { RenderPlugin } from '@oruga-ui/vue-next/plugins/render'

const app = createHeadless()

app.use(RenderPlugin, {
  withAnnotations: true,
  withForms: true
})
```

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

### Install Viewport Plugin (npm)

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

Install the viewport plugin using npm.

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

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

### Install Viewport Plugin (pnpm)

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

Install the viewport plugin using pnpm.

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

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

### Install Document Manager Plugin (bun)

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

Install the Document Manager plugin using bun.

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

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

### Install PDFium with yarn

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

Install the PDFium package using yarn.

```bash
yarn add @embedpdf/pdfium

```

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

### Install Rotate Plugin with bun

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

Install the Rotate Plugin using bun.

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

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

### Install Dependencies

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

Install project dependencies using pnpm.

```bash
pnpm install
```

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

### Install Export Plugin with bun

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

Install the export plugin package using bun.

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

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

### Install Annotation Plugin with bun

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

Install the Annotation Plugin and its required dependencies using bun.

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

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

### Install PDFium with npm

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

Install the PDFium package using npm.

```bash
npm i @embedpdf/pdfium

```

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

### Install Document Manager Plugin (yarn)

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

Install the Document Manager plugin using yarn.

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

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

### Install Print Plugin

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

Install the Print Plugin using your preferred package manager.

```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 Core and Engines Packages

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

Install the necessary packages for the PDFium engine and core functionality.

```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
```

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

### Install Rotate Plugin with yarn

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

Install the Rotate Plugin using yarn.

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

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

### Install Vue PDF Viewer with bun

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

Install the @embedpdf/vue-pdf-viewer package using bun.

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

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

### Install Rotate Plugin with npm

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

Install the Rotate Plugin using npm.

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

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

### Install Rotate Plugin with pnpm

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

Install the Rotate Plugin using pnpm.

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

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

### Install Viewport Plugin

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

Install the Viewport Plugin using your preferred package manager.

```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 Spread Plugin

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

Install the Spread Plugin using your preferred package manager.

```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 Commands Plugin

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

Install the Commands Plugin using npm, pnpm, yarn, or bun.

```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 Annotation Plugin with npm

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

Install the Annotation Plugin and its required dependencies using npm.

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

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

### Install Document Manager Plugin (npm)

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

Install the Document Manager plugin using npm.

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

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

### Install Tiling Plugin and Dependencies (bun)

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

Install the Tiling plugin along with its required dependencies using bun.

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

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

### Install Layout Analysis Plugin (bun)

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

Install the Layout Analysis plugin along with its dependencies and `onnxruntime-web` using bun.

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

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

### Get Document Metadata Using Engine Reference

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

Access the PDF viewer's engine and document manager to retrieve metadata directly from the PDF document. This example demonstrates how to use a ref to get the engine and then call its methods.

```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' }} />
    </>
  );
}
```

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

### Rotate Toolbar Component

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

Use the useRotate hook to get the current rotation state and methods to change it. This example shows a basic toolbar for rotating a document.

```typescript
import { useRotate } from '@embedpdf/plugin-rotate/react'

export const RotateToolbar = ({ documentId }) => {
  const { rotation, provides: rotate } = useRotate(documentId)

  if (!rotate) {
    return null
  }

  return (
    <div className="toolbar">
      <span>Current Rotation: {rotation * 90}°</span>
      <button onClick={rotate.rotateBackward}>Rotate Left</button>
      <button onClick={rotate.rotateForward}>Rotate Right</button>
    </div>
  )
}
```

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

### Install Tiling Plugin and Dependencies (npm)

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

Install the Tiling plugin along with its required dependencies using npm.

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

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

### Trigger PDF Download in Vue

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

Use the `useExport` composable to get access to the plugin’s `download` method. Call this method from a button to start the download process.

```vue
<script setup lang="ts">
import { useExport } from '@embedpdf/plugin-export/vue';

const props = defineProps<{ documentId: string }>();
const { provides: exportApi } = useExport(() => props.documentId);
</script>

<template>
  <button @click="exportApi?.download()" :disabled="!exportApi">
    Download
  </button>
</template>

```

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

### Conditionally Render UI with useDocumentPermissions

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

Use the `useDocumentPermissions` hook to get reactive permission states. This example disables a 'Print Document' button if the user lacks print permissions.

```svelte
<script lang="ts">
  import { useDocumentPermissions } from '@embedpdf/core/svelte';
  
  let { documentId } = $props();
  // Returns effective permissions (after overrides)
  const perms = useDocumentPermissions(() => documentId);
</script>
 
<button 
  disabled={!perms.canPrint}
  style:opacity={perms.canPrint ? 1 : 0.5}
>
  Print Document
</button>
```

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

### Install Layout Analysis Plugin (npm)

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

Install the Layout Analysis plugin along with its dependencies and `onnxruntime-web` using npm.

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

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

### Initialize View Manager with Multiple Views

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

Demonstrates initializing the View Manager plugin with a specific number of default views. This setup is useful for creating multi-pane layouts from the start.

```javascript
new ViewManagerPlugin({
  defaultViewCount: 2
})
```

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

### Install Selection and Interaction Manager Plugins with bun

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

Install the Selection Plugin and its dependency, the Interaction Manager Plugin, using bun.

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

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

### Change Language Dynamically at Runtime

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

Switch the viewer's language dynamically without a page reload. This example demonstrates how to get the i18n plugin instance and use its `setLocale` method.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
 
const registry = ref<PluginRegistry | null>(null);
 
const handleReady = (r: PluginRegistry) => {
  registry.value = r;
};
 
const changeLanguage = (locale: string) => {
  const i18n = registry.value?.getPlugin('i18n')?.provides();
  i18n?.setLocale(locale);
};
</script>
 
<template>
  <button @click="changeLanguage('de')">German</button>
  <button @click="changeLanguage('fr')">French</button>
  <button @click="changeLanguage('en')">English</button>
 
  <PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>
```

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

### Install Tiling Plugin and Dependencies (pnpm)

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

Install the Tiling plugin along with its required dependencies using pnpm.

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

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

### Centralized Plugin Registration

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

Register all desired EmbedPDF plugins in a single array to configure the viewer's capabilities. This example shows the setup for various plugins like DocumentManager, Viewport, and Search.

```typescript
const plugins = [
  createPluginRegistration(DocumentManagerPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage, { /* ... */ }),
  createPluginRegistration(ScrollPluginPackage, { /* ... */ }),
  createPluginRegistration(RenderPluginPackage),
  createPluginRegistration(TilingPluginPackage, { /* ... */ }),
  createPluginRegistration(ZoomPluginPackage, { /* ... */ }),
  createPluginRegistration(SearchPluginPackage),
  createPluginRegistration(InteractionManagerPluginPackage),
  createPluginRegistration(PanPluginPackage),
  createPluginRegistration(RotatePluginPackage),
  createPluginRegistration(SpreadPluginPackage),
  createPluginRegistration(FullscreenPluginPackage),
  createPluginRegistration(ExportPluginPackage),
  createPluginRegistration(ThumbnailPluginPackage),
  createPluginRegistration(SelectionPluginPackage),
];
 
function App() {
  // ...
  return (
    <EmbedPDF engine={engine} plugins={plugins}> 
      {({ activeDocumentId }) =>
        activeDocumentId && (
          <DocumentContent documentId={activeDocumentId}> 
            {({ isLoaded }) =>
              isLoaded && (
                <>
                  <Toolbar documentId={activeDocumentId} />
                  <Viewport documentId={activeDocumentId}>
                    {/* Viewer UI with documentId passed to components */}
                  </Viewport>
                </>
              )
            }
          </DocumentContent>
        )
      }
    </EmbedPDF>
  );
}
```

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

### Build a Pan Tool Button with usePan Hook

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

Utilize the `usePan` hook to get the `isPanning` state for UI feedback and `provides` object with methods to control pan mode. This example shows how to create a button that toggles the pan mode and updates its appearance based on the active state.

```typescript
import { usePan } from '@embedpdf/plugin-pan/react';

export const PanToolbar = ({ documentId }) => {
  const { provides: pan, isPanning } = usePan(documentId);

  if (!pan) return null;

  return (
    <button
      onClick={pan.togglePan}
      className={isPanning ? 'active' : ''}
    >
      Hand Tool
    </button>
  );
};

```

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

### Initialize PDFium and PDFium Extension Library

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

This example demonstrates the complete initialization process for PDFium in a WebAssembly environment, including calling PDFiumExt_Init. It ensures PDFium is ready for PDF operations and follows best practices like using a singleton pattern.

```typescript
import { init, WrappedPdfiumModule } from '@embedpdf/pdfium';

// Create a singleton for PDFium instance
let pdfiumInstance: WrappedPdfiumModule | null = null;

async function initializePdfium() {
  // If already initialized, return the existing instance
  if (pdfiumInstance) return pdfiumInstance;
  
  // Load and initialize the WebAssembly module
  const pdfiumWasm = 'https://cdn.jsdelivr.net/npm/@embedpdf/pdfium/dist/pdfium.wasm';
  const response = await fetch(pdfiumWasm);
  const wasmBinary = await response.arrayBuffer();
  pdfiumInstance = await init({ wasmBinary });
  
  // Initialize the PDFium extension library
  // This MUST be called before any PDF operations
  pdfiumInstance.PDFiumExt_Init();
  
  console.log('PDFium initialized successfully');
  return pdfiumInstance;
}

// Usage
async function workWithPdf() {
  try {
    const pdfium = await initializePdfium();
    
    // Now you can start working with PDFs...
    console.log('Ready to work with PDFs!');
    
    // Load a document, render pages, etc.
  } catch (error) {
    console.error('Failed to initialize PDFium:', error);
  }
}

workWithPdf();

```

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

### Install Tiling Plugin and Dependencies

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

Install the Tiling plugin along with its required dependencies (Render, Scroll, Viewport) using npm, pnpm, yarn, or bun.

```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 PDFium with pnpm

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

Install the PDFium package using pnpm.

```bash
pnpm add @embedpdf/pdfium

```

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

### Install Capture Plugin with bun

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

Install the Capture Plugin along with its required dependencies (Render and Interaction Manager) using bun.

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

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

### Install Tiling Plugin and Dependencies (yarn)

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

Install the Tiling plugin along with its required dependencies using yarn.

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

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

### Building a Custom Zoom Toolbar with useZoom Store

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

Connect UI components to zoom logic and state using the `useZoom` store. This example shows how to display the current zoom level and provide buttons to zoom in, out, reset, and toggle area zoom.

```svelte
<script lang="ts">
import { useZoom, ZoomMode } from '@embedpdf/plugin-zoom/svelte';

let { documentId }: { documentId: string } = $props();
const zoom = useZoom(() => documentId);
</script>

{#if zoom.provides}
  <div class="toolbar">
    <span>{Math.round(zoom.state.currentZoomLevel * 100)}%</span>

    <button onclick={() => zoom.provides?.zoomOut()}>-</button>
    <button onclick={() => zoom.provides?.zoomIn()}>+</button>
    <button onclick={() => zoom.provides?.requestZoom(ZoomMode.FitPage)}>Reset</button>

    <button onclick={() => zoom.provides?.toggleMarqueeZoom()}>Area Zoom</button>
  </div>
{/if}
```

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

### Install Layout Analysis Plugin (pnpm)

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

Install the Layout Analysis plugin along with its dependencies and `onnxruntime-web` using pnpm.

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

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

### Install @embedpdf/engines with bun

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

Install the EmbedPDF engines package using bun.

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

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

### Install Layout Analysis Plugin (yarn)

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

Install the Layout Analysis plugin along with its dependencies and `onnxruntime-web` using yarn.

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

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

### Install @embedpdf/engines with yarn

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

Install the EmbedPDF engines package using yarn.

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

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

### Install Pan Plugin and Dependencies (bun)

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

Install the Pan plugin along with its required dependencies, Viewport and Interaction Manager, using bun.

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

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

### Install @embedpdf/engines with pnpm

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

Install the EmbedPDF engines package using pnpm.

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

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

### Install @embedpdf/engines with npm

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

Install the EmbedPDF engines package using npm.

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

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

### Building a Split View Layout with useAllViews

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

This example demonstrates how to create a dynamic split view layout using the `useAllViews` composable. It iterates over available views and applies grid classes based on the number of views to create a responsive layout.

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { useAllViews } from '@embedpdf/plugin-view-manager/vue';
 
const views = useAllViews();
 
// Simple grid based on number of views
const gridClass = computed(() => views.value.length > 1 ? 'grid-cols-2' : 'grid-cols-1');
</script>
 
<template>
  <div :class="['grid', 'h-full', gridClass, 'gap-4']">
    <MyViewPane v-for="view in views" :key="view.id" :view-id="view.id" />
  </div>
</template>
```

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

### Install Scroll and Viewport Plugins

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

Install the Scroll and Viewport plugins 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
```

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

### Install Vue PDF Viewer with yarn

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

Install the @embedpdf/vue-pdf-viewer package using yarn.

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

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

### Integrating GlobalPointerProvider for Smooth Panning

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

This example demonstrates how to wrap the `<Viewport>` component with `<GlobalPointerProvider>` to ensure continuous mouse event tracking, even when the cursor leaves the viewport boundaries. This is essential for a seamless panning experience.

```svelte
<script lang="ts">
import { GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/svelte';

let { documentId }: { documentId: string } = $props();
</script>

<GlobalPointerProvider {documentId}>
  <Viewport {documentId}>
    <Scroller {documentId} {renderPage} />
  </Viewport>
</GlobalPointerProvider>
```