Build Assets
UI Component
Document Viewer
A responsive, type-aware preview: images, PDFs, CSV & Excel spreadsheets as a table, text, and video/audio, with a download fallback.
Platform: bothTags: preview, viewer, documents, pdf, spreadsheet
Purpose
Lets users confirm a document without downloading it. Rendering by type — image, PDF, CSV/Excel table, text, video, audio — keeps preview instant and legible; formats that cannot render inline degrade gracefully to a download card rather than a broken frame. The spreadsheet parser is loaded on demand so it never weighs down other previews.
Anatomy
- Toolbar: type icon + file name + size + download
- Body (height-capped, scrollable): image / PDF frame / CSV table / text / fallback card
- CSV table has a sticky header for scanning long sheets
- Multi-sheet workbooks: a sheet switcher (tabs) above the table
States
- Loading: spinner while text/CSV is read
- Rendered: image, PDF, spreadsheet table, or text by type
- Unsupported: file card with a Download action
Do
- Render by type so previews are instant and readable
- Cap the preview height and scroll within it so it fits any screen
- Give a clear download fallback for formats you can't render
- Show the file name and size so users know what they're viewing
Don't
- Force a download when an inline preview is possible
- Show a broken/empty frame for unsupported types
- Let a huge document blow out the layout — constrain and scroll
- Render spreadsheets as raw comma text instead of a table
Accessibility
- Images have descriptive alt text; PDF frames are titled
- Spreadsheets render as a real <table> with a header row
- Download is a genuine <a download> link
- Height-capped, scrollable body keeps it usable on small screens