01 / RENDERING
Real CSS-3D, not canvas hacks
Each page is a real DOM node. Rotation, perspective and depth are CSS transforms — the GPU already knows how to draw them.
v1.0 — released 2026
A PDF reader
with pages that
actually turn.
Real CSS-3D page-flip animation. Renders entirely in your browser — files never touch a server. Drops into any web page, ships with a WordPress plugin, MIT licensed.
or just share a PDF and get a link →
No upload, ever
Works offline
Keyboard, swipe, click
Renders ~600 pages
Modern browsers
What's inside
Built like a small, sharp tool — not a framework.
One class. One container. The rest is the browser doing what it already knows how to do — only better than you'd expect.
02 / RESPONSIVE
Two-page on desktop, single on mobile
Spread mode flips automatically at 768px. Resize the window, the book follows. Touch swipe and click-zone navigation built in.
03 / PRIVATE
Files never leave the browser
Documents are read with the Web File API and rendered locally by PDF.js. No upload, no cloud round-trip, no analytics pixel.
04 / LIGHTWEIGHT
~6 KB. No build step.
One JavaScript class, one stylesheet. Drop the script tag in, point it at a container, point it at a PDF, you're done.
05 / WORDPRESS
Plugin with shortcode + block
Install once, embed PDFs anywhere with [flippdf]. Gutenberg block hooks straight into the media library.
06 / OPEN
MIT licensed, vendor-friendly
Fork it. Ship it inside your own product. Bundle PDF.js however suits you. Attribution appreciated, never required.
Live demo
Drop your PDF in. Or use the bundled sample.
Whatever you drop here is read by your browser, not our server. Refresh the page when you're done — it disappears.
↓
Drop a PDF anywhere on this page
No upload. No cloud. The file is read in your browser using the Web File API and rendered locally.
← → flip · Home/End jump · Click edges · Swipe on touch
Install
Three ways to ship it.
Pick whichever matches the stack you're already in. The library underneath is the same — only the hosting story changes.
01 · WordPress
Install the plugin.
Upload the zip in Plugins → Add New → Upload. Then embed any PDF anywhere with a shortcode or the Gutenberg block — files come from your media library or any URL.
[flippdf]shortcode — works in posts, pages, widgets- Gutenberg "PDF Flipbook" block with a media-library picker
- Per-instance height, page-mode, flip duration, render quality
- Self-hostable PDF.js via the
flippdf_pdfjs_urlfilter - Loads only on pages that actually use it
/* shortcode in any post or page */
[flippdf id="123"]
[flippdf url="/wp-content/uploads/handbook.pdf"]
[flippdf id="42" height="80vh" mode="double"]
/* or, from a template */
<?php echo do_shortcode('[flippdf id="123"]'); ?>
/* self-host PDF.js (functions.php) */
add_filter('flippdf_pdfjs_url', function () {
return get_template_directory_uri()
. '/lib/pdf.min.js';
});
02 · HTML embed (CDN)
Three script tags into any HTML page.
No build step, no package manager, no install. Paste the snippet, give the container a height, point at a PDF — done. The assets are served from flippablepdf.com over HTTPS with caching.
- Works in plain HTML, static-site generators, custom CMSes, web apps
- No npm, no bundler, no React, no nothing
- The PDF can live anywhere — your server, an S3 bucket, a CDN of your own
- Same library as the WordPress plugin and the self-hosted bundle
Drop-dead simplest path. If you'd rather own the bytes — for an offline build, an intranet, or a vendor-locked deploy — see method 03 below.
<!-- paste this into any HTML page -->
<!-- 1. styles + library -->
<link rel="stylesheet"
href="https://flippablepdf.com/cdn/flippable-pdf.css">
<script src="https://flippablepdf.com/cdn/pdf.min.js"></script>
<script src="https://flippablepdf.com/cdn/flippable-pdf.js"></script>
<!-- 2. a sized container -->
<div id="my-flipbook"
style="width:100%; height:70vh;"></div>
<!-- 3. point the worker, then mount -->
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://flippablepdf.com/cdn/pdf.worker.min.js";
new FlippablePDF("#my-flipbook", {
pdfUrl: "/files/handbook.pdf"
});
</script>
03 · Self-hosted
Own the bytes.
Download the library bundle, drop it into /lib/, ship it with your app. Works offline, works on intranets, works in vendor-locked environments where outbound HTTPS is filtered. No runtime callbacks to flippablepdf.com — once you have the files, you own them.
- Includes
flippable-pdf.js,flippable-pdf.css, vendored PDF.js, anexample.html, and a README - Total weight ~1.4 MB — most of which is the PDF.js worker
- Auto-init via
data-flippdf-pdfattributes, or call the JS API directly - MIT licensed (PDF.js is Apache-2.0)
<!-- with the bundle dropped into /lib/flippable-pdf/ -->
<link rel="stylesheet"
href="/lib/flippable-pdf/flippable-pdf.css">
<script src="/lib/flippable-pdf/pdf.min.js"></script>
<script src="/lib/flippable-pdf/flippable-pdf.js"></script>
<div id="my-flipbook"
style="width:100%; height:70vh;"></div>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc =
"/lib/flippable-pdf/pdf.worker.min.js";
new FlippablePDF("#my-flipbook", {
pdfUrl: "/files/handbook.pdf"
});
</script>
/* or auto-init: tag the container, no JS needed */
<script>
window.FLIPPDF_CONFIG = {
workerSrc: "/lib/flippable-pdf/pdf.worker.min.js"
};
</script>
<div class="flippdf-embed"
data-flippdf-pdf="/files/handbook.pdf"
style="height:70vh;"></div>
FAQ
Questions that come up. Answers.
Does this work with very large PDFs?
Yes. Pages render lazily as you flip. The default preload window is two pages on either side of the current one. Canvases are capped at ~2200 pixels wide so compositing stays smooth. You can lower the renderQuality option for snappier flipping on long documents.
How is this different from a regular PDF iframe or browser viewer?
The default browser PDF viewer is a scroll-and-zoom UI. Useful, but it's not a book. FlippablePDF presents your document as a real spread, page-by-page, with the GPU-accelerated turn animation that makes it actually feel like reading something rather than scrolling.
Is anything sent to a server?
No. The library is fully client-side. The only network requests this page makes are to load itself — open your browser's DevTools network tab and verify. The WordPress plugin loads PDF.js from a CDN by default, but you can self-host it via the flippdf_pdfjs_url filter.
What does the WordPress plugin actually add?
A [flippdf] shortcode and a Gutenberg block called "PDF Flipbook". Both let you pick a PDF from your media library or paste a URL. The plugin only loads its CSS / JS on pages that actually use the shortcode or block — no global bloat.
Can I use this in a commercial product?
Yes. The library is MIT licensed. Fork it, vendor it, rebrand it, ship it inside whatever you're building. Attribution is appreciated but not required.
Which browsers are supported?
Any modern Chromium-based browser, Firefox, and Safari from the last few major versions. The library uses standard CSS 3D transforms, ResizeObserver, and the File API — all widely supported since 2020.