Developing a Document Editor

on YouTube ↗32m

" summary

PandaDoc built a browser-based document editor from scratch using React. The talk covers architectural decisions that simplified development, problems and pitfalls encountered, generating PDFs on Node.js with Puppeteer, and some aspects of collaborative editing.

AI-written summary · about

" chapters (25)

1. 0:00New editor intro
2. 1:11Why build a new editor
3. 2:15Tech stack and architecture
4. 3:21Event sourcing for docs
5. 4:06Real-time CRDT collaboration
6. 5:11Command and event flow
7. 6:14Offline mode and queuing
8. 6:55Optimistic UI changes
9. 7:59Production error handling
10. 8:42Conflict resolution strategies
11. 11:53Key requirements and plugins
12. 13:19Plugin architecture
13. 14:25Error handling and UX
14. 15:10Error tracking with Sentry
15. 16:37Handling uncaught errors
16. 17:43Gradual rollouts and flags
17. 19:28Canary deployments
18. 20:52Migration case study
19. 21:13A/B testing complexities
20. 21:55PDF generation challenges
21. 23:21Headless Chrome for PDFs
22. 25:28PDF rendering pipeline
23. 26:53PDF library challenges
24. 27:59Electronic signatures in PDFs
25. 28:41Q&A

" related talks

• 32mIn the Lab: Crafting the No-Code Editor POCOleksandr Maliuta · React+TS fwdays'23
• 46mAmbitious Editorial Experiences with Headless DrupalRuben Teijeiro · Frontend United 2018
• 42mBuilding a reactive multi user document editor in ScalaJSJan Ypma · Scala Days Berlin 2018
• 41mCreating collaborative editing UIs in ReactEspen Hovlandsdal · JS Fest 2019 Spring
• 44m"Creating an enterprise level editorial experience for D8 using React"Ruben Teijeiro · Drupal Europe 2018
• 50mRich text editing with Draft.jsNik Graf · HolyJS 2016
• 25mRich Text Editing with ReactIsaac Salier · React.js Conf 2016
• 44mThe document’s journey from file to editing: processing 1,000 pages and not dyingVasiliy Kubarko · HolyJS 2025 Autumn