Next.js Discord

Discord Forum

Best approach for building a scalable file preview system in React

Unanswered
Scottish Fold posted this in #help-forum
Open in Discord
Scottish FoldOP
Hi, I’m building a file preview system in a React + TypeScript project and would appreciate some architectural advice.
The system needs to preview the following file types: PDF, DOCX, PPTX, CSV, XLSX, and HTML.
Requirements:
1. Responsive, accessible UI that works well on both desktop and mobile
2. Modular and extensible architecture (editing capabilities may be added later)
3. Reasonable impact on bundle size (ideally avoiding large, monolithic libraries)

So far I’ve considered:
1. react-pdf for PDF rendering
2. mammoth for converting DOCX to HTML
3. xlsx and papaparse for spreadsheet data
4. @cyntler/react-doc-viewer as an all-in-one option, but it's relatively heavy and hard to customize

I'm looking for best practices or proven patterns to handle this in production — especially around balancing functionality, flexibility, and performance.
If you've implemented something similar, what tools or architectural approach would you recommend?
Thanks in advance.

0 Replies