A single script that turns a plain PDF into an interactive flipbook — grab a corner and fold, tap to turn, zoom right in, go fullscreen — and it reflows to a single-page view on phones.
Try it — drag a page cornerDrop the script on the page, point a
div at your PDF, and give it a height.
pdf.js is fetched automatically from a CDN — nothing to install,
nothing to build.
<!-- anywhere in your page --> <div data-pdflipbook="brochure.pdf" style="height:600px"></div> <script src="pdflipbook.js"></script> <!-- or, with the JS API --> <script> const book = PDFlipbook.create(el, { url: 'brochure.pdf' }); book.next(); book.prev(); book.goTo(5); </script>
| Option | Default | What it does |
|---|---|---|
| url / data | — | PDF location, or raw bytes (ArrayBuffer) for file uploads |
| startPage | 1 | Open the book at a given page |
| duration | 520 | Full page-turn time in ms (auto-disabled for reduced motion) |
| edgeSize | 0.14 | Width of the grab/tap zone, as a fraction of the spread |
| cornerFold | true | Corner drags fold the paper over along a real crease; mid-edge grabs stay a straight flip |
| arrows | true | Show the previous / next buttons |
| pageNumbers | true | Show the page counter pill |
| displayMode | auto | auto, double, or single — auto picks single-page view on portrait screens |
| controls | true | Show the fullscreen, page-view and zoom buttons |
| zoomSteps | [1,1.5,2,3] | Zoom levels the +/− buttons step through (pinch is continuous) |
| shadow | fullscreen | Drop shadow under the book: none, normal, fullscreen, or always |
| pdfjsSrc / pdfWorkerSrc | CDN | Self-host pdf.js: point these at your own copies of pdf.min.mjs and pdf.worker.min.mjs |
Theme the chrome with CSS variables on the container —
--fb-bg, --fb-paper,
--fb-control-bg, --fb-control-fg,
--fb-counter-fg — and listen for
flipbook:pagechange events to sync your own UI.