@printedjs/plugin-page-flip

Interactive 3D page flip and digital flipbook plugin for Printedjs.

Provides realistic page turning animations, drag-to-flip physics, corner curling, sound effects, and keyboard navigation for paginated document containers.

Credits & Attribution

This plugin is powered by and adapted from the open-source StPageFlip library created by Oleg Nodlik. Special thanks to the author for creating a flexible, dependency-free page flip engine.

Features

• Realistic 3D Physics — Canvas-backed page curl, dynamic shadows, and fold geometry.
• Interactive Controls — Mouse drag, touch swipe, corner click, and keyboard arrow keys.
• Audio Feedback — Integrated page turn sound synthesis and customizable audio hooks.
• Single & Double-Page Spread — Automatic portrait/landscape switching based on viewport aspect ratio.
• DOM Content Preservation — Works with live HTML page elements generated by Printedjs.
• Print Fallback — Automatically unrolls to static sequential pages under @media print.

Installation

pnpm add @printedjs/plugin-page-flip @printedjs/core

Usage

Register as a Printedjs Plugin

import { createRenderer } from "@printedjs/browser";
import { pageFlipPlugin } from "@printedjs/plugin-page-flip";

const renderer = createRenderer({
	target: document.querySelector("#book-container")!,
	plugins: [
		pageFlipPlugin({
			sound: true,
			showCover: true,
			drawShadow: true,
			flippingTime: 800,
		}),
	],
});

await renderer.render({
	content: {
		html: "<h1>My Flipbook</h1><p>Page 1 content...</p>",
	},
});

Programmatic Controller Access

import { PageFlipController } from "@printedjs/plugin-page-flip";

const pagesContainer = document.querySelector(".printedjs_pages") as HTMLElement;

const controller = new PageFlipController(pagesContainer, {
	sound: true,
	usePortrait: false,
	startPage: 0,
});

await controller.next();
await controller.prev();
await controller.flipTo(4);

// Cleanup listeners and DOM transformations
controller.destroy();

Options

| Option | Type | Default | Description | | :------------------- | :-------- | :------ | :--------------------------------------------------- | | flippingTime | number | 800 | Flip animation duration in milliseconds | | turnDurationMs | number | 800 | Duration alias for page turn transitions | | sound | boolean | true | Play paper rustle audio during flip animations | | showCover | boolean | true | Treat first page as single front cover | | drawShadow | boolean | true | Render realistic gradient drop shadows on page folds | | showPageCorners | boolean | true | Animate hover curl effect on page corners | | usePortrait | boolean | false | Force single-page view even on wide screens | | keyboardNavigation | boolean | true | Enable left/right arrow key navigation | | startPage | number | 0 | Initial 0-based page index to open |