Plain JavaScript

npm

npm i @openpageflip/core

pnpm

pnpm add @openpageflip/core

yarn

yarn add @openpageflip/core

CDN

No bundler? One script tag puts createBook on window.OpenPageFlip, and it works the same from there.

index.html

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

Pages are elements

Put the pages inside one container, in reading order. Any element can be a page - a div, an img, a whole article. Give a page data-density="hard" and it turns as one stiff sheet instead of bending, which is what you want for covers.

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 an edge</h3>
    <p>Hover the outer edge and it furls. Take hold 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>Click a page's outer edge and it turns. The middle is yours: text selects, links open. On a touch screen, a swipe anywhere turns the page.</p>
  </div>
  <div class="page">
    <h3>Hard and soft</h3>
    <p>Covers are hard, so they swing as one stiff sheet. Inner pages bend along the fold, the way paper does.</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 (it only handles the geometry, so your pages look however you style them), 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 an edge

Hover the outer edge and it furls. Take hold and pull: let go past the middle and the page turns; let go early and it settles back.

Or just click

Click a page's outer edge and it turns. The middle is yours: text selects, links open. On a touch screen, a swipe anywhere turns the page.

Hard and soft

Covers are hard, so they swing as one stiff sheet. Inner pages bend along the fold, the way paper does.

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

What comes back is a Book:

• flipNext(), flipPrev() and flipTo(page) animate a turn and give you a promise that resolves when the page lands. turnTo(page) just jumps there.
• book.on("flip", ({ page }) => ...) fires whenever a different spread is showing. on hands back the unsubscribe function.
• A press that starts on a link, button or form field never starts a flip, so pages can hold real controls.
• book.destroy() stops everything and puts your DOM back the way it was.

Every option and event is in the reference, generated from the source on every build.