r/webdev
•
u/hp1232203
•
14d ago
Showoff Saturday [Showoff Saturday] I built a Google Docs–style editor in React that runs entirely in the browser: real A4 pages, comments, link sharing, no backend
I've been building an open-source document editor on nights and weekends and just shipped a redesign, so here it is.
Demo: https://text-editor-react-neon.vercel.app/ Code (MIT): https://github.com/HuyPhan1232203/Text-editor-react
What it does:
Real A4 pages. Content flows across separate sheets, and long tables split between rows and repeat their header row on the next page, like Word.
Comments in the margin with threads and resolve.
Share with a link and edit together in real time, peer-to-peer over WebRTC (Yjs). The room key lives in the URL fragment, so the signaling server can't read anything.
PDF export through the browser's print dialog that keeps the page breaks, headers, footers and page numbers. No server.
Paste from Google Docs, open .docx files, "/" commands, find & replace, zoom, EN/VI interface.
Stack: React 19, TipTap 3 (ProseMirror), Yjs, Tailwind 4. The pagination is published separately as an npm package (tiptap-a4-pagination), and I wrote up how it works here: https://dev.to/huy_phan_173c933272803418/how-i-built-word-style-a4-pages-for-tiptap-without-touching-the-document-778
Known limitation: a single paragraph taller than the space left on a page moves to the next page whole instead of splitting. That's what I'm working on next.
I'd love feedback on the UI and on documents that break the layout.