zinejs

Options

Common constructor options. Defaults work for most embeds.

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

const book = new Zine(document.getElementById('book'), {
  source: new ImageSource([...urls]),

  // Fixed size in px (omit to let container CSS drive size)
  // width: 800,
  // height: 600,

  startPage: 0,
  direction: 'ltr',       // 'ltr' | 'rtl'
  cover: false,           // first page as a lone cover
  flipDuration: 500,      // ms
  singlePageThreshold: 640,

  clickToFlip: 'edge',    // 'edge' | 'half' | 'off'
  clickZoneSize: 64,      // px, when clickToFlip is 'edge'

  zoom: {
    enabled: true,
    max: 4,
    wheel: true,          // Ctrl/⌘ + wheel
    doubleClick: [1, 2, 4],
  },
});

Highlights

  • Sizing: omit width/height to size from CSS; pass them for fixed dimensions.
  • direction:'rtl' for right-to-left books.
  • cover: treat the first page as a single cover before two-page spreads.
  • clickToFlip: edge zones (default), half-page, or off.
  • zoom: max scale, wheel, and double-click level cycle.
  • singlePageThreshold: below this container width, one page per spread.