@letter-ai/lector

Simple primitives to compose powerful PDF viewing experiences.
powered by PDF.js and React

lector

A composable, headless PDF viewer toolkit for React applications, powered by PDF.js. Build feature-rich PDF viewing experiences with full control over the UI and functionality.

Installation

npm install @letter-ai/lector pdfjs-dist

# or with yarn
yarn add @letter-ai/lector pdfjs-dist

# or with pnpm
pnpm add @letter-ai/lector pdfjs-dist

Basic Usage

Here's a simple example of how to create a basic PDF viewer:

import { CanvasLayer, Page, Pages, Root, TextLayer } from "@letter-ai/lector";
import "pdfjs-dist/web/pdf_viewer.css";

export default function PDFViewer() {
  return (
    <Root
      source="/sample.pdf"
      className="w-full h-[500px] border overflow-hidden rounded-lg"
      loader={<div className="p-4">Loading...</div>}
    >
      <Pages className="p-4">
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}

Features

• 📱 Responsive and mobile-friendly
• 🎨 Fully customizable UI components
• 🔍 Text selection and search functionality
• 📑 Page thumbnails and outline navigation
• 🌗 First-class dark mode support
• 🖱️ Pan and zoom controls
• 📝 Form filling support
• 🔗 Internal and external link handling

Contributing

We welcome contributions! Key areas we're focusing on:

• Performance optimizations
• Accessibility improvements
• Mobile/touch interactions
• Documentation and examples

Thanks

Special thanks to these open-source projects that provided inspiration:

• react-pdf-headless
• pdfreader

License

MIT © Unriddle AI