Build a PDF viewer with Lector
Start with a readable document, then add the controls your app needs.
Lector is a headless PDF viewer for React. PDF.js loads and renders the document; Lector provides page virtualization, composable layers, and hooks for navigation, search, and selection. You own the toolbar, layout, and application state.
Start here
- Install Lector and configure the PDF.js worker.
- Build your first viewer with selectable text, a toolbar, and a visible loading state.
- Load your own documents, including authenticated URLs and local files.
Already integrating Lector? Keep the API reference and troubleshooting guide nearby.
Add a feature
| I want to… | Guide |
|---|---|
| See a minimal viewer running | Basic example |
| Go to a page or build previous/next buttons | Page navigation |
| Fit a document to its container | Zoom controls |
| Navigate using page previews | Thumbnails |
| Find text and jump to a match | Search |
| Draw a citation or a saved region | Highlights |
| Capture selected text and its coordinates | Text selection |
| Enable links inside a PDF | PDF links |
| Fill and download a PDF form | PDF forms |
| Render light text on dark paper | Dark mode |
What your application supplies
Lector supplies primitives, not a finished reader. Give the viewer a bounded height, label its controls, and decide how to handle errors and save user data. Search reads a PDF's existing text; it does not perform OCR. Highlight overlays live in memory until your application stores them, and they do not modify the PDF file.
These docs track the repository's main branch. If an API is missing from your installed package, compare its version with the releases. The current source declares React 19+ and pdfjs-dist ^5.5.207 as peer dependencies.
Contributing to Lector itself? See the contributor guide.