Quick start

Render a PDF in a few lines. Give the viewer a height so the virtualized canvas can size correctly.

Basic example

Import DocumentViewer, pass a source, and mount it in a full-height container:

tsx

import { DocumentViewer } from "lumipdf";
import "lumipdf/styles";

export function App() {
  return (
    <div style={{ height: "100vh" }}>
      <DocumentViewer
        source={{ kind: "url", url: "/report.pdf" }}
        theme="light"
      />
    </div>
  );
}

Load and page events

Hook into document lifecycle and navigation with optional callbacks:

tsx

import { DocumentViewer } from "lumipdf";

export function Viewer() {
  return (
    <DocumentViewer
      source={{ kind: "url", url: "/contract.pdf" }}
      onDocumentLoad={(model) => {
        console.log("pages", model.pageCount);
      }}
      onPageChange={(page, pageCount) => {
        console.log(page, "of", pageCount);
      }}
      onError={(error) => {
        console.error(error);
      }}
    />
  );
}

What next?

Learn how to load from files and buffers in Document sources, or browse the full DocumentViewer API.