@pdf-reader/web-component

Framework-agnostic PDF reader custom element.

<pdf-reader height="100vh"></pdf-reader>

const reader = document.querySelector("pdf-reader");

reader.configure({
  totalPages: 1000,
  loadPage: async (pageNumber, { signal }) => ({
    pageNumber,
    image,
    textLayer
  })
});

reader.scrollToPage(100);
reader.setHighlights([{ pageNumber: 100, start: 0, end: 20 }]);

The loader can use PDF.js, PDFium WASM, or a remote service. The component only needs rendered page image data and optional text layer data.