Examples/Programmatic API

Programmatic API

Drive the flipbook from code: navigation, zoom, events, and teardown.

ready …page 0 / … (zero-based)zoom 1.00×renderer webgl2

Navigation

flipNext / flipPrev / flipTo(page)

page index

Zoom

setZoom(scale) / resetZoom() / getZoom(): getters print into the event log below.

scale

State & layout

getPage / getPageCount return values (shown here and in the event log). update() after external layout changes.

Burst sequences

Stack calls the way a host app would (slideshow, deep-link, etc.).

Event log

Interact with the book or the buttons; events stream here.

Code

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

const el = document.getElementById('book')

const book = new Zine(el, {
  source: new ImageSource([
    '/sample-images/page-01.png',
    '/sample-images/page-02.png',
    // ...
  ]),
  zoom: { max: 6 },
})

// Wait until the first spread is painted before driving the API hard.
await book.ready

// --- Navigation ---
book.flipNext()
book.flipPrev()
book.flipTo(6)
book.canFlipNext()
book.canFlipPrev()

// --- Zoom ---
book.setZoom(2.5)
book.resetZoom()
book.getZoom()
book.getMaxZoom()

// --- Spreads ---
book.getSpreadMode()
book.toggleSpreadMode()
book.setResponsiveSpread(false)

// --- Document (PDF) ---
if (book.canSearch()) {
  const hits = await book.search('invoice')
  if (hits[0]) book.flipTo(hits[0].page)
}
if (book.canDownload()) await book.download()
if (book.canPrint()) await book.print()

// --- Shareable link ---
book.pageLink()             // URL for the current page (#page=N)

// --- Events ---
const off = book.on('pageChanged', ({ page }) => console.log(page))
book.on('spreadChanged', ({ mode, singlePage }) => {})
book.on('progress', ({ loaded, total }) => {})
off()

book.destroy()