Extend UI Svelte
GitHub

Docs / Files / File Thumbnail

File Thumbnail

PDF page thumbnail rendered on a canvas through the shared PDF engine. Dark mode is controlled by the parent through isDark; the checkbox below is the page's own control.

Differences from upstream

  • Same export name, FileThumbnail. class is accepted alongside the upstream className. The loading overlay is built in rather than exported as FileThumbnailLoadingOverlay.
  • previewContent is a Svelte snippet instead of a React node.
  • Port addition: built-in PDF page rendering. Pass pdfUrl (or pdfFile) with pageNumber and width, and only that page renders onto a canvas through PDF.js. Upstream expects the thumbnail image from your own pipeline.
  • Dark mode is set by the parent through isDark. Like upstream there is no theme switch inside the thumbnail.
  • Port-only exports for the built-in PDF rendering: clampPageNumber, DEFAULT_THUMBNAIL_PAGE, DEFAULT_THUMBNAIL_WIDTH, renderLoadedPdfThumbnail, renderPdfThumbnail, thumbnailScale, plus the types PdfThumbnailRenderOptions, PdfThumbnailRenderResult. FileThumbnailProps is exported as a type, as upstream does.

Back to all components