Integrations/HTML / CDN
HTML / CDN
Use the UMD build from a script tag: no bundler, no npm install.
Load packages from jsDelivr. The global is ZineJS (version 0.9.0).
Image book
<div id="book" style="width: min(900px, 100%); aspect-ratio: 3 / 2"></div>
<script src="https://cdn.jsdelivr.net/npm/@zinejs/core@0.9.0/dist/index.umd.js"></script>
<script>
new ZineJS.Zine(document.getElementById('book'), {
source: new ZineJS.ImageSource([
'/sample-images/page-01.png',
'/sample-images/page-02.png',
'/sample-images/page-03.png',
]),
})
</script>PDF book
pdf.js is ESM-only, so one module script imports it and sets the worker. Classic tags load core, then pdf (same ZineJS global).
<div id="book" style="width: min(900px, 100%); aspect-ratio: 3 / 2"></div>
<script src="https://cdn.jsdelivr.net/npm/@zinejs/core@0.9.0/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@zinejs/pdf@0.9.0/dist/index.umd.js"></script>
<script type="module">
import * as pdfjsLib from 'https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/build/pdf.min.mjs'
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@6.2.108/build/pdf.worker.min.mjs'
globalThis.pdfjsLib = pdfjsLib
new ZineJS.Zine(document.getElementById('book'), {
source: new ZineJS.PdfSource('https://zinejs.com/pdf/sample.pdf'),
})
</script>Live demo: HTML / CDN example