FC FlipCraft Guide Start a flipbook
← All tools Tool review · Library

flipbook-viewer

Higher-level open-source viewer that handles PDF rendering for you.

flipbook-viewer is one tier higher than StPageFlip and turn.js — it bundles PDF.js for page rendering, handles touch gestures, includes a toolbar (zoom, fullscreen, download) and exposes the whole thing as a single web component. You point it at a PDF URL and it renders a flipbook. That makes it the closest open-source equivalent to a hosted SaaS without giving up the freedom to host things yourself. The trade-off is the larger bundle size (PDF.js is heavy) and less freedom to customise the viewer chrome.

What it does well

  • Takes a PDF URL and renders the flipbook — no rendering pipeline required
  • Includes toolbar (zoom, fullscreen, download)
  • Touch gestures tuned for iOS and Android out of the box
  • MIT-licensed, free for any use
  • Embeddable as a web component — works with React, Vue or plain HTML

Where it falls short

  • PDF.js bundle is ~600KB; not ideal for marketing pages
  • Less control over the viewer chrome
  • Performance on huge PDFs (300+ pages) needs careful pagination
Worth reading alongside: an independent buyer's guide to open-source flipbook libraries from our editorial partners.

Pricing snapshot

Free under the MIT licence. Self-hosted; infrastructure costs are yours.

Best fit for

Indie developers who want an open-source SaaS-style viewer, intranet publishers who cannot use hosted platforms, and product teams that want to ship a flipbook without building the rendering pipeline.

Step-by-step: turn a PDF into a flipbook with flipbook-viewer

  1. Step 1. Install via npm: npm install flipbook-viewer (or grab the script tag build).
  2. Step 2. Drop the <flipbook-viewer> custom element into your HTML.
  3. Step 3. Set the src attribute to the URL of your source PDF.
  4. Step 4. Style the host element with CSS for sizing.
  5. Step 5. Listen to page-change events for analytics.
  6. Step 6. Self-host the PDF and the script bundle.

Where it sits versus the rest

flipbook-viewer is the highest-level open-source option. StPageFlip and react-pageflip give you more control but require a rendering pipeline. turn.js is the legacy choice. Pick flipbook-viewer when you want self-hosted convenience.

Compare it head-to-head: react-pageflip vs flipbook-viewer

Use-cases this tool fits

Below are the FlipCraft Guide use-case playbooks where flipbook-viewer is one of the recommended tools.