Add a PDF flipbook to any website with JavaScript

Not every site runs on WordPress, Shopify or Wix. A static site, a web app or a custom CMS can show the same flipbook with the Real3D Flipbook JavaScript library: a folder of files on your server and a few lines of code. It has no dependencies, so it works with plain HTML, React, Vue or anything else that renders a page.

This guide uses version 5.7 of the library. The full option list is in the JavaScript documentation.

1. Add the files

The download from CodeCanyon has three folders: build with the minified files for production, examples with ready-made HTML pages, and src with the unminified source. Copy the contents of build to your site, then add the stylesheet and the script to the page:

<link rel="stylesheet" href="css/flipbook.style.css">
<script src="js/flipbook.min.js"></script>

2. Create a flipbook from a PDF

Add an empty element where the book should go, and create the flipbook when the page has loaded:

<div id="catalog"></div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("catalog");
    new FlipBook(container, {
      pdfUrl: "pdf/catalog.pdf"
    });
  });
</script>

That is a working flipbook, with the realistic 3D page turn, the toolbar, zoom, thumbnails and search. If the PDF has bookmarks, they become the table of contents.

3. Or from images

Use pages instead of pdfUrl, with one image per page and an optional thumbnail:

new FlipBook(container, {
  pages: [
    { src: "book/1.jpg", thumb: "book/thumb1.jpg", title: "Cover" },
    { src: "book/2.jpg", thumb: "book/thumb2.jpg" },
    { src: "book/3.jpg", thumb: "book/thumb3.jpg", title: "Chapter 1" }
  ]
});

Pages with a title appear in the table of contents. Keep images around 1500 to 2000 pixels high, as JPG or WebP. Make a flipbook from images explains when images are a better choice than a PDF.

4. Open it in a lightbox

A flipbook in the page starts loading straight away. Behind a button, it loads nothing until someone opens it, which keeps the page fast, especially with several books on one page. Pass the button as the element and turn on lightBox:

<button id="read-catalog">Read the catalog</button>

<script>
  new FlipBook(document.getElementById("read-catalog"), {
    pdfUrl: "pdf/catalog.pdf",
    lightBox: true
  });
</script>

Any element works: an image of the cover, a link or a card.

5. Link to a page

Set a prefix, and every page gets its own address:

deeplinkingPrefix: "catalog_"

https://example.com/#catalog_12 now opens the book on page 12, and opens the lightbox first if the flipbook is in one. That is handy in newsletters and support replies. Navigating a long flipbook has more ideas.

6. Different settings for phones

Anything in mobile overrides the main options on phones. A common setup keeps the 3D page turn on desktop and shows one page at a time with swipe on phones:

new FlipBook(container, {
  pdfUrl: "pdf/catalog.pdf",
  viewMode: "webgl",
  mobile: {
    viewMode: "swipe",
    singlePageMode: true
  }
});

viewMode can be webgl, 3d, 2d, swipe, scroll or simple. Which flipbook view mode to use compares them.

Two errors almost everyone hits

It works on the server, not on my computer. Browsers block a page opened from a file (file://) from loading the PDF. Run a local web server instead, or test on the real site.

The PDF is on another domain. By default the PDF or images must come from the same domain as the page. To load them from a CDN or storage bucket, the server that holds them has to send an Access-Control-Allow-Origin header for your site. If nothing shows, the browser console usually says which of the two it is.

While you are on the server: make sure it supports range requests, so the flipbook can show the first pages before the whole PDF has arrived. Why a flipbook loads slowly covers that and the PDF itself.

License and price

The JavaScript library is sold on CodeCanyon. The regular license is $99, paid once, with future updates and six months of support. You activate it for the domain where it runs at verify.real3dflipbook.net, signing in with your Envato account.

Questions about the JavaScript flipbook

Does it need jQuery?

No. new FlipBook(element, options) works without any other library. Older code that calls jQuery("#container").flipBook(options) still works too.

Can I use it in React or Vue?

Yes. Create the flipbook after the component has rendered its container element, for example in useEffect in React or mounted in Vue.

Can I track readers in Google Analytics?

Yes. Set googleAnalyticsTrackingCode to your GA4 measurement ID, starting with G-. The events are the same as in the WordPress plugin, listed in flipbook analytics.

How do I make a PDF flipbook load faster?

Export the PDF for screen, with images at about 150 dpi, and save it as a web-optimized (linearized) PDF. For the fastest loading, a separate converter turns the PDF into page images and data, so the browser doesn’t need to load the PDF at all, while search and links keep working.

Is it the same flipbook as the WordPress plugin?

Yes. The WordPress plugin, the Shopify and Wix apps and the JavaScript library show books with the same viewer. The plugin and apps add an admin screen, and the JavaScript library gives you the options in code.