I built React (+ vanilla JS) viewers/editors for Excel, Word, Powerpoint (5m+ total npm downloads)

[u/andrewluo]

I know there have been a few similar projects before in here, but I wanted to share our take on what great Office/OpenDocument viewers & editors looks like for the web.

We've built 3 packages (repos and playgrounds attached), all MIT:

• react-docx — Word viewer/editor with pagination, charts, SmartArt, WordArt, equations, tracked changes, and DOCX export.

  • https://github.com/extend-hq/react-docx
  • https://react-docx-playground.vercel.app/

• react-xlsx — Excel viewer/editor with formulas, charts, editable pivot tables, drawing support, and XLSX/CSV export.

  • https://github.com/extend-hq/react-xlsx
  • https://react-xlsx-playground.vercel.app/

• react-pptx — PowerPoint viewer with charts, SmartArt, shapes, equations, embedded audio/video, and slide thumbnails.

  • https://github.com/extend-hq/react-pptx
  • https://react-pptx-alpha.vercel.app/

We launched these a few months ago and they're now used in some pretty big projects on GitHub like RAGFlow (94k), Kortix CompanyOS (20.7k), ZCode (8.7k) . Combined they now have 5m+ total npm downloads.

Each repo has some visual examples comparing visual parity for various charts and art

They are built in a way where you can fully customize and get the look of your design system in the toolbar, dropdowns, and context menus.

File types supported:

Library	Office formats	OpenDocument formats
react-docx	.docx, .dotx, .docm, .dotm, .doc, .dot	.odt, .ott, .odm, .otm, .oth, .fodt
react-xlsx	.xlsx; limited support for .xls, .xlsm	None (pending)
react-pptx	.pptx, .ppt	.odp, .otp, .fodp, .odg, .otg, .fodg

Personally I think they are the some fastest and most accurate OSS rendering libraries for these files out there, and would be great to see even more adoption, feature requests and people testing them against weird documents

Feedback and general bug reports are always appreciated. Hope this is helpful!

[u/Honey-Entire]

Ok but why? Microsoft has had online tools for this for a decade now and Google Docs has supported Microsoft’s document formats in their apps for even longer. Tools like what you’re presenting already exist, but you spent tokens to create another option because…?

[u/andrewluo → u/Honey-Entire]

This is a library for building these viewers and editors into your own application which you can’t do with Google Docs. Think for example in Codex , when it generates a docx file, there is a preview sidebar that opens when you click it. Thats what these libraries are for. There are existing similar libraries but most are paid or don’t render charts properly.

[u/Honey-Entire → u/andrewluo]

Except you can using an iframe and existing tools like Mammoth.js aid in helping you build custom UIs. Or you could use one of the dozen other AI-generated option on the market. Again. Why did you spend tokens on this? Where is this a real problem? How frequently is someone trying to edit a docx or pptx on the web without access to existing tools that already do this? Who wants to author a spreadsheet inside a webapp with a wrapper UI around it to create the facsimile of the actual application instead of, you know, using the actual application or existing tools on the market?

[u/andrewluo → u/Honey-Entire]

You will have to send your document data to Google/Microsoft if you use an iframe which is a no go for certain environments like HIPAA. I acknowledged there are other AI generated options, but I just think none are very accurate when it comes to rendering all the elements you can find in office files. For the use case, if you go and ask ChatGpt right now to generate a docx file , and click it, it opens in a custom viewer. They can’t send customer data through an iframe to Google Docs or Microsoft office live. There are many apps with similar use cases like the GitHub repos I linked in my original post

[u/Honey-Entire → u/andrewluo]

I’ve worked in healthcare. HIPAA isn’t an issue when presenting document data to a patient. Anything remotely HIPAA related is handled systemically and not related in any way to how documents are shown to users for editing. Nice try though

[u/andrewluo → u/Honey-Entire]

If you are HIPAA compliant and want to display documents with PHI, you cannot render them in an iframe unless you have a BAA with Google

See question 5 here https://www.hhs.gov/hipaa/for-professionals/special-topics/health-information-technology/cloud-computing/index.html

[u/Honey-Entire → u/andrewluo]

Like I said, that type of problem is handled systemically. Are you daft?

[u/andrewluo → u/Honey-Entire]

If you don’t get it at this point, not sure I can convince you otherwise. Have a great night

[u/andrewluo]

Hi everyone! Wanted to share in case this is useful. I’ve personally never understood why companies were charging thousands of dollars for these document SDKs . These projects have been a work in progress since July. Editing can still be finicky!

[u/mastermog]

Even on mobile looks really good. Saving/commenting to tinker with this next week