PDFlipbook

Any PDF, reborn as a book

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 corner
Quick start

Two lines, one book

Drop 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>
Options

Tune it to taste

OptionDefaultWhat it does
url / dataPDF location, or raw bytes (ArrayBuffer) for file uploads
startPage1Open the book at a given page
duration520Full page-turn time in ms (auto-disabled for reduced motion)
edgeSize0.14Width of the grab/tap zone, as a fraction of the spread
cornerFoldtrueCorner drags fold the paper over along a real crease; mid-edge grabs stay a straight flip
arrowstrueShow the previous / next buttons
pageNumberstrueShow the page counter pill
displayModeautoauto, double, or single — auto picks single-page view on portrait screens
controlstrueShow the fullscreen, page-view and zoom buttons
zoomSteps[1,1.5,2,3]Zoom levels the +/− buttons step through (pinch is continuous)
shadowfullscreenDrop shadow under the book: none, normal, fullscreen, or always
pdfjsSrc / pdfWorkerSrcCDNSelf-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.