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