Plain JavaScript

npm

npm i @openpageflip/core

pnpm

pnpm add @openpageflip/core

yarn

yarn add @openpageflip/core

Pages are elements

Put the pages inside one container, in reading order. Any element can be a page. data-density="hard" makes a page rigid, which is what covers want.

index.html

<div id="book">
  <div class="page page-cover" data-density="hard">
    <h2>OpenPageFlip</h2>
    <p>A page-turn effect for the web</p>
  </div>
  <div class="page">
    <h3>Drag a corner</h3>
    <p>Pick up any corner and pull. Let go past the middle and the page turns. Let go early and it settles back.</p>
  </div>
  <div class="page">
    <h3>Or just click</h3>
    <p>A click on either half turns the page that way. On a touch screen, a swipe does the same.</p>
  </div>
  <div class="page">
    <h3>Hard and soft</h3>
    <p>Covers are hard: they swing as one rigid sheet. Inner pages bend along the fold, like paper.</p>
  </div>
  <div class="page">
    <h3>Any HTML</h3>
    <p>Pages are ordinary elements. Text, images, forms, video: whatever a page holds keeps working.</p>
  </div>
  <div class="page page-cover" data-density="hard">
    <p>The end</p>
  </div>
</div>

Make the book

Import the stylesheet once, then hand the container to createBook. The book below runs this exact file, and so does the test suite.

OpenPageFlip

A page-turn effect for the web

Drag a corner

Pick up any corner and pull. Let go past the middle and the page turns. Let go early and it settles back.

Or just click

A click on either half turns the page that way. On a touch screen, a swipe does the same.

Hard and soft

Covers are hard: they swing as one rigid sheet. Inner pages bend along the fold, like paper.

Any HTML

Pages are ordinary elements. Text, images, forms, video: whatever a page holds keeps working.

The end

quickstart.ts

import "@openpageflip/core/styles.css";
import { type Book, createBook } from "@openpageflip/core";

/** The container's children are the pages, in reading order. */
export function mount(container: HTMLElement): Book {
  return createBook(container, {
    width: 400, // base page size; with size "stretch" only the ratio matters
    height: 560,
    size: "stretch", // scale to the container, portrait when it gets narrow
    cover: true, // first and last pages stand alone
  });
}

Then

• book.flipNext(), flipPrev() and flipTo(page) animate a turn and resolve when it lands. turnTo(page) is instant.
• book.on("flip", ({ page }) => ...) fires when a different spread is showing. on returns the unsubscribe function.
• Pointer events that start on links, buttons and form fields never start a flip, so pages can hold real controls.
• book.destroy() stops everything and puts the DOM back the way it was.

Every option and event is described in the reference, straight from the source.

Without a bundler

The package also ships a single-file build for a <script> tag. It exposes window.OpenPageFlip with the same createBook.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@openpageflip/core/dist/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/@openpageflip/core"></script>
<script>
const book = OpenPageFlip.createBook(document.getElementById("book"), { width: 400, height: 560 });
</script>