A production-ready code component that opens any PDF in a clean, full-screen overlay. No iframes, no browser toolbar. Just your document rendered crisp on a canvas using Mozilla's PDF.js.

Single Page — one page at a time with arrow navigation

Two-Page Spread — side-by-side view for presentations and magazines

Continuous Scroll — scroll through the entire document seamlessly

Zoom in / out

Fit to width / Fit to page

Previous / Next page buttons

Arrow key keyboard navigation

Page indicator

Download button

All toggleable from Framer's property panel.

Default button — fully styled via Property Controls (text, colors, radius, padding, font size, hover state)

Custom trigger — provide a remote Framer component URL and it replaces the default button automatically

PDF File — upload or URL

View Mode — single / double / scroll

Overlay Color and Overlay Opacity

Show/Hide — zoom, navigation, download, page indicator

Keyboard Navigation — on/off

Button Styling — text, background, text color, radius, padding, font size, hover color

Rendered via PDF.js loaded from CDN. No npm install needed

Single .tsx file — paste into Framer and publish

Smooth open/close via framer-motion AnimatePresence

Body scroll lock when modal is open

Lazy loads PDF only when modal opens