A framework-agnostic, universal document renderer with optional chunked loading
polyrender.wisp.place/
1import { PolyRender } from '@polyrender/core'
2
3const viewerEl = document.getElementById('viewer')!
4const fileInput = document.getElementById('file-input') as HTMLInputElement
5
6let viewer: PolyRender | null = null
7
8fileInput.addEventListener('change', () => {
9 const file = fileInput.files?.[0]
10 if (!file) return
11
12 // Destroy previous viewer if one exists
13 if (viewer) {
14 viewer.destroy()
15 viewer = null
16 }
17
18 // Create a new PolyRender instance with the selected file
19 viewer = new PolyRender(viewerEl, {
20 source: {
21 type: 'file',
22 data: file,
23 filename: file.name,
24 },
25 theme: 'dark',
26 toolbar: true,
27 pdf: {
28 // In the bundled output, the worker is a sibling file in dist/
29 workerSrc: './pdf.worker.min.mjs',
30 },
31 // Comic book archives (.cbz, .cbr, .cb7, .cbt)
32 comic: {
33 jxlFallback: true, // JPEG XL decoding via @jsquash/jxl
34 tiffSupport: true, // TIFF decoding via utif
35 },
36 onReady: (info) => {
37 console.log(`Loaded "${file.name}" — ${info.pageCount} page(s), format: ${info.format}`)
38 },
39 onError: (err) => {
40 console.error('PolyRender error:', err)
41 },
42 })
43})