FlipCatalog

Home / Use cases / PageFlip.js / Lookbooks

// Library × use-case · Lookbooks

PageFlip.js for Lookbooks

A working recipe for building a lookbook flipbook with PageFlip.js, setup, the use-case-specific patterns that matter, and the alternatives worth checking.

★ 807 MIT TypeScript Use case: Lookbooks

Why PageFlip.js fits a lookbook build

Fashion lookbooks live or die on colour fidelity and seasonal navigation. The audience is buyers and editors who care that the magenta on page eight matches the actual garment in the showroom, not an approximation. PageFlip.js is the engine; your image pipeline is the differentiator.

PageFlip.js sits at 807 GitHub stars, ships under the MIT license, and is written primarily in TypeScript. Evergreen browsers. ESM and UMD bundles available; works with Vite, Webpack, Rollup, and plain script tags. If your lookbook audience falls inside that support window, you can move on to implementation; if it does not, jump down to the alternatives section before writing any code. our editorial picks for Lookbooks are updated on every re-seed.

The right setup for a lookbook

Install PageFlip.js with the same command as a generic build, the use-case differentiation lives in the surrounding markup, the loading strategy, and the analytics, not in the install:

npm install page-flip
import { PageFlip } from 'page-flip';

The minimum-viable initialisation is intentionally close to the library’s minimum working example so you can see a page-turn working before customising:

const pageFlip = new PageFlip(el, {
  width: 600, height: 800,
  size: 'stretch',
  showCover: true
});
pageFlip.loadFromImages(['/p1.jpg','/p2.jpg','/p3.jpg','/p4.jpg']);

What matters specifically for a lookbook

Treat the image pipeline as a first-class concern. Export every lookbook image at sRGB or Display P3 with embedded colour profiles, and serve the highest-resolution variant the viewer’s connection can handle. The flipbook viewer is responsible for the page-turn; it is not responsible for guessing your colour space.

Add a ‘collection’ section navigation to the chrome: buyers want to jump from looks 1-15 (resort) to looks 16-30 (pre-fall) in one click. Build a second, smaller index page that lives outside the flipbook and links into specific spreads; that page is what your wholesale partners will bookmark.

The mistake to avoid

Compressed JPEGs ruin lookbooks. Ship at the highest defensible resolution, even if the file size jumps; your readers are evaluating fabric and colour, not browsing news. further reading on this pattern covers the recovery playbook in detail.

Alternative libraries for a lookbook

If PageFlip.js turns out to be the wrong fit, the libraries below are the next-best open-source picks for the same use case, sorted by GitHub star count. Each one has a deep-dive page with feature matrix, browser support, and code samples.

What to read next