zinejs

Getting started

Install zinejs and mount a flipbook on any element in a few lines.

Install

Install the core engine and the PDF package. 

pnpm add @zinejs/core @zinejs/pdf

Images without PDF? Just install @zinejs/core. Click to see images flipbook example .

Minimal example

Give Zine a container and a content source. Size follows the container’s CSS unless you pass fixed width / height. 

import { Zine } from '@zinejs/core'
import { PdfSource } from '@zinejs/pdf'

new Zine(document.getElementById('book'), {
  source: new PdfSource('/brochure.pdf'),
})

Gestures

  • Drag a page corner (or click near an edge) to flip
  • Double-click, pinch, or Ctrl/⌘+wheel to zoom
  • When zoomed, drag to pan

Browser support

WebGL2 is used when available; otherwise the CSS renderer takes over automatically. Image books need ordinary DOM, canvas, and fetch. PDF books use pdf.js's legacy build by default for broader reach. See PDF for legacy: false (modern build) and engine notes.

Next