Real files, real viewer
Photos, a panorama, SVG, video, audio, PDF, Excel, CSV, Word, plain text. Every tile is an ordinary anchor with one attribute on it.
JPGforest-road-2680x2822.jpg
JPGbrittany-coast-3840x1600.jpg
JPGmoon-1985x2978.jpg
JPGcafe-terrace-6654x4159.jpg
SVGvector-illustration.svg
MP4
MP4ocean-clip-960x400.mp4
MP3
MP3ocean-waves.mp3
PDF
PDFdeep-residual-learning.pdf
XLSX
XLSXfinancial-model.xlsx
CSV
CSVincome-statement.csv
DOCX
DOCXresearch-report.docx
TXT
TXTlong-form-text.txt
The whole API is an anchor
Two attributes are required and the rest are polish. Turn JavaScript off and the link goes back to being a link — nothing breaks.
<!-- an href, a group name, and that's the lot -->
<a href="/media/drawing.pdf"
data-filedeck="files"
data-filedeck-size="640 KB · 12 pages"
title="drawing-rev-c.pdf">
Assembly drawing
</a>
<script src="filedeck.umd.min.js"></script>
<script>new Filedeck();</script>- data-filedeck required
- The group name. Everything sharing it pages through together, arrows and filmstrip included.
- title
- The filename in the header. Skip it and the alt text stands in, then the URL.
- data-filedeck-width data-filedeck-height
- Pass the dimensions and the layout lands on the first frame instead of settling into place.
- data-filedeck-thumb
- Point the filmstrip at something small so it stops dragging full-size images around. Otherwise it falls back to the nested
<img>, then a file-type icon. - data-filedeck-name data-filedeck-caption data-filedeck-meta
- Filename, caption and a subtitle line. Names resolve
data-filedeck-name → title → img alt → basename. - data-filedeck-kind
- For URLs with no extension — a permission-checked
/download/view, say. Pick from image, pdf, video, audio, file.
Yes, even the .dwg
Every file gets a sensible landing. Controls that make no sense for a format quietly don't appear — no greyed-out buttons pretending to be useful.
Pictures
Zoom to 400%, pan around, pinch on a phone. jpg png gif webp avif svg
Paperwork
The browser's own PDF reader, embedded full-stage. Small screens get a tidy card instead.
Sound and motion
Native players, so scrubbing stays scrubbing. mp4 webm mp3 wav
The awkward ones
Excel and Word files render right in the page — sheet tabs, tables, images, no dependency. CAD and the rest get a labelled file card with the size and a download button.
Fingers, keys, or code
The swipe axis locks after about 12px, so a wonky diagonal does one thing instead of two. A fast flick counts even if you barely moved.
Gestures
- Swipe left / right
- prev / next
- Swipe down
- dismiss
- Pinch or wheel
- zoom
- Double-tap
- 100% ↔ 200%
Keyboard
- ← →
- Previous / next
- + −
- Zoom in / out
- 0
- Fit to screen
- Esc · Tab
- Close · trapped inside
Events & methods
lb.openFrom('#tile-7'); lb.goTo(3);
lb.setZoom(200); lb.resetView(); lb.destroy();
document.addEventListener('filedeck:change', (e) => {
log(e.detail.item.name);
});Also fires open, close, zoom and action:copy. That's where your delete button lives.
- 01Swipe across to move, swipe down to leave, pinch to get closer.
- 02Focus stays inside while it's open and goes home when it closes.
- 03Screen readers hear the position change every single time.
- 04Every string is yours to replace, ARIA labels and all.
- 05Groups are re-read on open, so files added later just show up.
- 06Ten custom properties to theme it. No fonts injected, ever.
Pick your poison
CDN and a script tag if you like living simply. Self-host the two files if you'd rather. npm if you already own a bundler and want to keep it busy.
Script tag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filedeck@0.3/dist/filedeck.min.css">
<script src="https://cdn.jsdelivr.net/npm/filedeck@0.3/dist/filedeck.umd.min.js"></script>npm
npm install filedeck
// then
import Filedeck from 'filedeck';
import 'filedeck/filedeck.css';
new Filedeck();