PDF viewer

Render PDFs in SuperDoc. PDF is a separate document type with its own rendering pipeline (pdf.js), distinct from the DOCX editor surface.

PDF rendering is configured through modules.pdf today, but it isn’t a built-in UI surface: it’s a viewer for a different file type.

Install pdf.js

Install pdfjs-dist in your app:

npm i pdfjs-dist

Supported versions: >= 5.4.296.

Quick start

import { SuperDoc } from 'superdoc';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

const pathToWorker = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); // example in Vite

const superdoc = new SuperDoc({
  selector: '#viewer',
  document: fileBlob,
  modules: {
    pdf: {
      pdfLib: pdfjsLib, // required
      setWorker: true, // auto-configure worker
      workerSrc: pathToWorker, // path to worker (falls back to CDN if omitted)
    },
  },
  onPdfDocumentReady: () => {
    console.log('PDF ready');
  },
});

Worker setup (recommended)

This is the recommended approach because the worker is configured once for the whole application.

import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

pdfjsLib.GlobalWorkerOptions.workerSrc =
  new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

Then disable auto-setup:

modules: {
  pdf: {
    pdfLib: pdfjsLib,
    setWorker: false,
  },
}

Configuration

modules.pdf.pdfLib · Object · required

Preloaded pdf.js library instance

modules.pdf.workerSrc · string

PDF.js worker source URL (falls back to CDN when omitted)

modules.pdf.setWorker · boolean · default: "false"

Whether to auto-configure pdf.js worker

modules.pdf.textLayer · boolean · default: "false"

Enable text layer rendering (for text selection)

modules.pdf.outputScale · number · default: "2"

Canvas render scale (quality)

Events

pdf:document-ready

Fired when all PDF pages are rendered.

superdoc.on('pdf:document-ready', () => {
  console.log('PDF ready');
});

Notes

• outputScale affects render quality; zooming does not re-render the canvas.
• If you need text selection, enable textLayer: true.