@microscope-js/renderer-pdf

PDF renderer for microscope-js, powered by pdfjs-dist v5. All parsing + canvas painting happens inside a Web Worker — the main thread stays responsive.

Install

pnpm add @microscope-js/renderer-pdf
Copy

pdfjs-dist is a real dependency (not a peer) so consumers get a deduplicated copy.

Use

import { createRegistry, mount } from '@microscope-js/core';
import { pdfRenderer } from '@microscope-js/renderer-pdf';

const registry = createRegistry([pdfRenderer]);
const handle = await mount({ source: file, container, registry });

// renderer-specific capabilities
const cap = handle.capabilities as { pageCount: number; scrollToPage(n: number): void };
console.log(cap.pageCount);
cap.scrollToPage(42);
Copy

Options

Pass via mount({ options: { … } }) or <Viewer options={{ … }} />.

Capabilities exposed on the RenderHandle

interface PdfHandle extends RenderHandle {
  readonly capabilities: {
    pageCount: number;
    scrollToPage(n: number): void;
  };
}
Copy

Security model

• pdfjs v5 disables runtime JS evaluation by default — no eval-style path is ever taken.
• disableAutoFetch: true — never re-fetches over the network during render.
• All rendering happens in the user's browser. The PDF byte stream never leaves the tab.
• The worker is sandboxed to its own thread; a malformed PDF can't read the main page's DOM or globals.
• maxBytes / maxPages defaults defend against pathological inputs ("PDF bombs").

Bundle notes

The pdfjs worker is loaded via new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url). Webpack 5, Vite, and Next.js handle that asset-module pattern out of the box. If you ship behind a CDN, pass options.workerSrc to point at your own hosted copy.

See also

• @microscope-js/react — <Viewer /> for React / Next.js
• @microscope-js/core — the registry that picks this renderer
• Repository · Live demo · API docs

License

MIT