Easiest way to display and interact with PDFs from your web app.
npm install @swiftgum/pdfreader
A dead simple, stylable, React PDF reader component.
Docs: https://swiftgum.github.io/pdfreader/
> Important: This component is still in development and not ready for production use.
- [x] Zoom in and out
- [x] Text layer
- [x] Annotation layer
- [x] Canvas layer
- [x] Page navigation
- [x] Outline view
- [x] Thumbnail view
- [ ] Two-sided view
- [ ] Search and highlight
- [ ] Annotation placement
``bash`
npm i @swiftgum/pdfreader react pdfjs-dist@4.4
Note: this package requires React 18 or 19, and pdfjs-dist 4.4 or higher. Note: pdfjs-dist 5 is not supported yet.
You can add and remove parts of the reader by adding or removing the related components. NB: the Viewport component always needs to have Pages and Page as direct children.
!Sample Reader with Tailwind Styling
`jsx
import React from 'react';
import { Root, CurrentPage, ZoomOut, Zoom, ZoomIn, Outline, OutlineItem, OutlineChildItems, Viewport, Pages, Page, CanvasLayer, TextLayer, AnnotationLayer } from '@swiftgum/pdfreader';
export const Reader = ({ fileURL }: { fileURL: string }) => {
return (
);
};
``
This project is sponsored by Swiftgum.
This project was sponsored by Fileforge.