Flippy Real 3D FlipBook PDF Viewer

Flippy — The most powerful WebGL 3D Flipbook PDF & image viewer for your website

Flippy Flipbook displays your PDFs or images as ultra-realistic 3D flipbooks inside your website. No flash needed, 100% HTML5. Easy to use. Customizable UI. Customizable flipbooks. Fully responsive, optimized for mobile. Single page view, deep linking, interactive pages, PDF text search, PDF hyperlinks, unlimited books and pages, lightbox, and much more.

Bring flat PDFs to life with Flippy, a conversion-ready landing kit that showcases a WebGL-powered flipbook viewer, immersive demos, and full product documentation. Ideal for agencies, SaaS teams, and template marketplaces, Flippy ships as a static site—no build steps required—yet stays modular for modern stacks.

Flippy Flipbook transforms your documents into ultra-realistic 3D flipbooks with page flip animations, lights, and shadows. Easy to use and fully customizable. No flash needed, 100% HTML5. No server-side conversion is required; everything is done at runtime. You simply set the PDF file URL or images. It supports dynamic HTML content on pages, adds YouTube videos, text, images, links, and iframes, and styles them with inline CSS. PDF flipbook supports internal and external links and text search with keyword highlighting. It comes with multiple view modes: realistic WebGL mode, fast 3D & 2D mode (CSS only), and Swipe mode with horizontal swipe page transitions. You can choose a different view mode for mobile and desktop. It is a mature product that offers the best reading experience on all platforms and devices. All future updates are free. Source files and documentation included.

Why Buyers Will Love It

• Instant immersion: Hero section, interactive demos, and bold gradients create immediate visual impact.
• Three live viewers: Inline embed, lightbox experience, and drag‑and‑drop importer are ready to ship.
• Tailwind-inspired styling: Clean utility classes in `style.css` make re-theming fast.
• Full documentation: `/docs/docs.html` includes setup, configuration tables (30+ options), analytics hooks, monetization tips, and troubleshooting.
• Accessible & mobile-first: Gesture support, keyboard-friendly controls, dark/light mode toggle, and responsive navigation.
• Drop-in friendly: Pure HTML/CSS/JS package; optional ES module imports for bundlers.

Feature Highlights

• WebGL 3D flipbook with realistic page physics and optional audio.
• Live drag-and-drop PDF upload demo with status feedback.
• Lightbox flipbook for marketing campaigns or CTA popups.
• Theme toggle with localStorage persistence.
• Mobile drawer navigation with focus trapping and scroll locking.
• Gradient hero, capability grid, FAQ, and download CTA sections.
• Analytics-ready event hooks (`flippy: ready`, `flippy:pageChange`, etc.).
• Documentation portal with light/dark toggle and responsive layout.

What’s Included

• `index.html`, `style.css`, `index.js` (ES module entry)
• `/books` sample PDFs
• `/src` modules (`flippy.*`, `pdfservice`, `touchswipe`, `screenfull`, `jquery.module.js`)
• `/docs/docs.html` – the light/dark documentation portal
• Icons (Unicons), gradients, and supporting assets

Ideal Use Cases

• Digital catalogs, lookbooks, magazines
• SaaS product marketing landing pages
• Client-ready flipbook services and demos
• Template shops on WrapMarket or agency portfolios

Technical Notes

• Stack: HTML5, CSS (Tailwind-inspired), vanilla ES modules, WebGL, PDF.js, jQuery
• Dependencies: None required for static use; optional npm tooling compatible
• Browsers: Chrome, Edge, Safari, Firefox (latest); responsive down to 360 px
• Customization: Update `flippyBook` options, swap PDFs/images, edit gradients, or integrate with Vite/Next.js

Easy to use

Creating flipbooks is fast and easy, with a couple of lines of JavaScript code. There are many ready-to-use HTML examples provided with the plugin.

Create flipbooks from PDF or images

You can create a 3D book directly from the PDF file. All links inside the PDF will automatically work inside the flipbook. You can also create a flipbook from JPG images. flipbook flipbook Flippy Flipbook uses WebGL to create ultra-realistic 3D flipbooks with page bending, shiny pages, lights, and shadows.

3D & 2D Flipbook

Ultra-fast and lightweight flipbook made with CSS3, without the use of WebGL. If your priority is fast page loading and high performance, then CSS flipbook is the best option.

Swipe Flipbook from PDF or images

Touch-friendly swipe mode can be used only on mobile or as the default viewer. Swipe mode displays documents with horizontal swipe instead of flip, which is more natural on mobile devices. Swipe mode detects screen size and orientation to display a single page or a double-page layout.

Customizable UI and Flipbooks

Flippy Flipbook fits perfectly in any theme because you can customize the user interface completely. You can change menu colors, button colors, shape, size, border, shadows, and hide buttons you don’t need. Each menu button can be positioned left, right, or center, top, or bottom. Top and bottom menu bars can be full-width, centered, or transparent. Buttons on a transparent menu bar can have a different design from regular buttons. Order of buttons is customizable. Choose from 3 predefined skins and 4 predefined UI layouts. Choose between the Unicon icon sets. Use advanced UI options to further customize everything.

Create a flipbook that fits your content perfectly by customizing anything from page flip speed, page flip sound, paper thickness, camera angle, lights, page shininess, page metalness, zoom levels, and much more.

Optimized for Mobile

Flippy flipbook works well on all platforms – desktop & mobile. The default WebGL mode offers realistic 3D page flip animations with page bending, lights, and shadows. This mode is supported on desktop browsers. There is an alternative CSS3D mode that uses only CSS3 animations. There is also the single-page mode that can be used as the default or only on mobile devices.

Lightbox mode, responsive mode, fullscreen mode

With lightbox mode, you can put a text link or an image link anywhere on your site, and by clicking on a link, the flipbook will be opened in a lightbox. This way, you can have multiple books/magazines/brochures on the same page.

Responsive mode creates a flipbook with an optional size that can be put anywhere inside a page or post.

With Fullscreen mode, the flipbook will cover the entire page

Single page view

Flipbook layout can be changed based on the device type. Besides the standard double-page view, there is a single-page view that can be used either on mobile devices or on both desktop and mobile. Single-page view offers a better reading experience on smaller screens but still keeps the 3D flipping effect and shadows.