Flipbook for TYPO3

Flipbooks looked impressive in 2012 but cost performance and accessibility today

The page-turning effect was one of the most popular display formats for catalogs, annual reports and magazines on corporate websites. A PDF is split into individual pages, displayed in the browser as a book and flipped via mouse click or swipe gesture. The technology originated in the Flash era. Since the end of Flash (2020), flipbook solutions are based on JavaScript and Canvas. But the core idea has not changed: it is about visually simulating a physical document.

The problem: flipbooks are performance killers. A 40-page PDF is converted into 40 individual images (200 to 500 KB each), plus the JavaScript library (100 to 300 KB minified). Result: 10 to 20 MB payload for a single content element. On mobile devices, flipbooks are barely usable, screen readers cannot read the content, and Google does not index the text because it is embedded in images.

Typical use cases

Annual reports and financial statements. Board members want to show the annual report “as printed” on the website. The print agency delivers a PDF, the marketing team wants to put it online as-is. Flipbook seems like the easiest solution. Gosign recommends an alternative: prepare the report as an HTML page (searchable, accessible, responsive) and place the PDF as a download link alongside it. This requires more effort but delivers SEO value and accessibility.

Product catalogs with many pages. Industrial companies with 200-page catalogs use flipbooks as “browseable catalogs” on the website. Reality: users flip through a maximum of 5 to 10 pages before abandoning. A searchable HTML catalog with filters and product detail pages converts better. If the flipping effect is desired, a lightbox slider with the most important pages as previews is sufficient.

Real estate brochures and marketing materials. Real estate offices show property brochures as flipbooks to give prospects a feel for the printed document. Here, an embedded PDF viewer (pdf.js) without the flipping effect often suffices - it works on all devices and keeps the text searchable.

Technical architecture

The flipbook extension for TYPO3 (like rflipbook, the other popular variant) works in three steps. First, the PDF is converted server-side into individual images (via ImageMagick, Ghostscript or an external service). Then the images are rendered in a Canvas-based JavaScript library (turn.js, StPageFlip or a commercial solution). The flipping effect is produced via CSS3 transforms and JavaScript animation.

The TYPO3 integration works as a content element: editor uploads a PDF, selects options (page range, thumbnail size, effect speed), the frontend renders the flipbook. The converted images are stored in fileadmin or a cache directory.

Dependencies: ImageMagick or Ghostscript must be installed on the server (for PDF conversion). The JavaScript library is included as an asset. For turn.js (the best-known library), jQuery must be loaded - an additional performance penalty on modern websites.

Common problems and solutions

Images are not generated. The PDF conversion fails when Ghostscript is not installed, the wrong version is running or write permissions are missing for the output directory. Solution: check gs --version on the server (minimum 9.50), grant write permissions for the output directory to the webserver user, contact the provider on shared hosting.

Loading time over 5 seconds. An 80-page PDF generates dozens of high-resolution images. Solution: reduce image quality (72 dpi instead of 150 dpi for web display), implement lazy loading for pages outside the visible area, use WebP instead of PNG/JPEG. Or ask the fundamental question: is a flipbook really necessary?

Mobile devices show rendering errors. The flipping effect works only partially on touch devices. The 3D page-turn effect is barely visible on small screens, and the swipe gesture conflicts with browser scrolling. Solution: automatically fall back to a simple slider or the native PDF viewer on mobile devices.

Migration and version compatibility

The flipbook extension has limited support for current TYPO3 versions. The last stable version supports TYPO3 v10 and v11. There is no official release for v12 and v13 (as of April 2026). rflipbook, the alternative extension, is in a similar situation.

Gosign recommends replacing the flipbook with one of the following alternatives during a TYPO3 upgrade: a PDF viewer based on pdf.js (open source, no conversion needed, text remains searchable), HTML preparation of the content (maximum SEO impact, full accessibility) or a lightbox slider with selected pages as images (visual compromise, good performance). The migration is typically completed in 1 to 2 days because the content already exists as PDF and only the display format changes.

For companies that regularly publish new materials (quarterly customer magazines, annual reports), an automated workflow pays off: upload PDF, render server-side via pdf.js, generate preview images, extract full text for search. TYPO3 can automate this process via a scheduler task so editors only upload the PDF and the display happens automatically. The initial effort for this workflow is 3 to 5 development days but saves 2 to 4 hours of manual work with each new publication.

Another aspect is accessibility. Flipbooks are completely inaccessible to screen reader users because the text is embedded in images. The European Accessibility Act (EAA), effective from June 2025, also applies to digital publications on corporate websites. The shift to HTML-based displays or pdf.js (which renders the original text) is therefore not just a performance question but also a legal necessity. Gosign checks during every relaunch project whether flipbooks or comparable image-based displays are present and proposes accessible alternatives before the legislation takes effect.