svelte-pdf-viewer

:warning: very experimental - here be dragons

demo

goals

• Fast
  • Fast renders
  • Smooth scrolling / zooming / panning
  • Fast initial load
    • SSR of PDFs
• Embeddable
  • Directly embed in a svelte app
  • Using <iframe />
• Customizable
  • themeable
• Extensible
  • Custom annotations
  • Plug-and-play renderers

supported renderers

• Pdfium (using WASM through pdfium-render)
• PDF.js

supported browsers

• Chrome
• Firefox

why is it so slow?

• only render visible pages
• only render visible thumbnails
• only render visible parts of pages when zooming
• pdfium: re-use bitmap buffer
• implement rendering queue to discard outdated requests
• pdfium: render asynchronous in a webworker
• pdfium: pre-load pdfium
• preemptively render pages
• preemptively render thumbnails
• preload PDF
• progressively load aspect ratios of pages instead of all at once

todo

• touch gestures
• text layer
• display title or filename
• download
• loading animation/indicator
• print
• rotate
• progress bar
• document details
• side-by-side view
• full-screen / presentation mode
• profiling
• publish package
• plug-and-play renderers
• make extendable
• annotations
• streamline build [^1]
• investigate render quality [^2]
• re-render if device pixel ratio changes

bugs

• thumbnails sometimes render at the wrong size
• pages flicker on when zooming
• Pages look blurry on high-DPI devices

[^1]: Currently, getting the thing to build is a pain due to the emscripten-generated pdfium-js.js and pdfium.wasm.
pdfium.wasm is duplicated, once in src/lib/backend/ and once in /static/assets since vite seems to be fine with the first one (in dev), but rollup needs the 2nd one (when building).
[^2]: Is the render quality as good as it could be? What causes the slight misalignment when zooming? Are there weird rounding errors?