Render Plugin

The Render Plugin is the visual heart of the PDF viewer. It’s responsible for taking the PDF data from the core engine and “painting” it onto the screen for the user to see. Its primary feature is the fundamental <RenderLayer /> component.

Installation

The plugin is available as a separate NPM package and is essential for any visual viewer.

npm install @embedpdf/plugin-render

pnpm add @embedpdf/plugin-render

yarn add @embedpdf/plugin-render

bun add @embedpdf/plugin-render

Registration

Import RenderPluginPackage and add it to the plugins array. This plugin has no configuration options.

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { RenderPluginPackage } from '@embedpdf/plugin-render/react'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
 
  // Register the render plugin
  createPluginRegistration(RenderPluginPackage),
]

Usage

The plugin can be used in two ways: the simple <RenderLayer /> component for displaying pages within the viewer, and the useRenderCapability hook for more advanced, on-demand rendering tasks.

Primary Usage: The <RenderLayer /> Component

This is the most common and straightforward way to render a PDF page. You should place the <RenderLayer /> component inside the renderPage prop of your <Scroller />. It will automatically render the correct page at the correct size and resolution as the user scrolls.

<Scroller
  renderPage={({ width, height, pageIndex, scale }) => (
    <div style={{ width, height, position: 'relative' }}>
      {/* The RenderLayer is responsible for drawing the page */}
      <RenderLayer pageIndex={pageIndex} scale={scale} />
    </div>
  )}
/>

Advanced Usage: On-Demand Rendering

For custom features that require rendering a page outside the main viewer—such as exporting a page as a high-resolution image—you can use the useRenderCapability hook. This gives you direct access to the plugin’s rendering functions.

import { useState } from 'react';
import { useRenderCapability } from '@embedpdf/plugin-render/react';
 
const ExportButton = () => {
  const { provides: render } = useRenderCapability();
  const [isExporting, setIsExporting] = useState(false);
 
  const exportPage = () => {
    setIsExporting(true);
    const task = render.renderPage({ pageIndex: 0, options: { scaleFactor: 3.0 } });
    task.wait(blob => {
      // ... trigger download from the blob ...
      setIsExporting(false);
    });
  };
 
  return <button onClick={exportPage}>{isExporting ? '...' : 'Export Page'}</button>
}

Live Example

This example shows a standard PDF viewer, but with a toolbar button that uses the useRenderCapability hook to export the first page as a high-resolution PNG file.

API Reference

Component: <RenderLayer />

The component that renders a single PDF page as an image.

Hook: useRenderCapability()

Connects your component to the render plugin’s low-level functions.

Returns

RenderCapability Methods

PdfRenderPageOptions