zinejs

Getting started

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

Install

Add zinejs to your project. Image books work out of the box; PDF support is one extra package. 

pnpm add @zinejs/core

Minimal example

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

import { Zine, ImageSource } from '@zinejs/core';

const el = document.getElementById('book');

const book = new Zine(el, {
  source: new ImageSource([
    '/pages/01.png',
    '/pages/02.png',
    '/pages/03.png',
    '/pages/04.png',
  ]),
});

// book.flipNext();
// book.flipPrev();
// book.destroy();

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

Next