Lector

This viewer renders a PDF with a canvas and a text layer. Complete installation, create pdf-setup.ts, and put a PDF at public/sample.pdf before using the code.

basic-viewer.tsx

"use client";
 
import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
import "./pdf-setup";
 
export default function BasicViewer() {
  return (
    <Root
      source="/sample.pdf"
      style={{ height: 600, overflow: "hidden" }}
      loader={<p role="status">Loading PDF…</p>}
    >
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}

The fixed height gives Pages a scrollable viewport. Remove TextLayer if you only need the page image. To follow your app theme, pass colorScheme="dark" or "light" to Root; the live example below follows the docs theme.

Continue with a toolbar, error handling, or links and form widgets.

Basic example

Live example

On this page