Hi there! I need help with building a presentation maker app using React and Next.js 15. The app should work like Google Slides or Canva for making slide presentations. Here’s what it needs to do:
- Handle around 500 slides in one presentation
- Let users drag elements around, resize them, rotate them, select multiple items
- Have undo and redo buttons that work properly
- Zoom in and out smoothly with good performance
- Show layers and let users group elements together
- Save presentations as PDF or PowerPoint files
- Maybe add real-time editing with other people later
I have some specific questions:
-
What should I use for drawing? Should I use regular HTML and CSS, or something like Canvas with libraries like Fabric.js or Konva? What works best when you have lots of elements?
-
How do I manage all the data? I’m thinking about using Zustand with Immer for the undo feature. What patterns work well without making the code messy?
-
How do I make it fast? What’s the best way to only show what’s visible on screen, especially for slide thumbnails?
-
How do I export files? For making PowerPoint and PDF files, should I use server-side rendering or client-side libraries?
-
Any good examples? Know any open source projects I can study?
-
Common problems? What issues should I watch out for?
My backend uses Node.js with NestJS but I’m mostly focused on the frontend right now. Would love to hear about your experiences!
Been building presentation editors for three years. Your tech stack’s solid, but the rendering pipeline’s where you’ll make or break performance. Canvas beats DOM manipulation every time when you scale up, though debugging’s a pain. For state management, skip Zustand here - go with Redux Toolkit and RTK Query. Trust me, you’ll need those devtools when you’re wrestling with transform matrices and selection states. The drag stuff’s easy. The real headache is keeping your coordinate systems straight when users zoom in and out. Don’t use existing virtualization libraries - presentation elements are too weird-shaped. Build your own viewport culling instead. Client-side PDF export works fine, but don’t try matching PowerPoint’s formatting exactly. You’ll go insane. Just focus on making it look right visually. One thing that kills performance every time: not setting up proper event delegation for canvas interactions. I see this mistake constantly with complex selections.
if ur dealing with so many slides, canvas is kinda the way to go! fabric.js makes dragging and resizing super smooth. Zustand plus Immer is def good for state, but just be careful with deep nesting, it can get messy. oh and use virtualization for thumbnails, react-window helped me a lot!
Built something similar - took several tries to get right. Canvas was definitely the way to go for performance with that many elements. I used Konva instead of Fabric.js since it handled nested groups better. The biggest pain was memory management with 500 slides. Had to lazy load everything - only keep the current slide plus 2-3 nearby ones fully rendered. For exports, I did PDF generation client-side with jsPDF but PowerPoint needed server-side processing since that format’s a nightmare. Pro tip: handle different screen densities from the start or your text will look like garbage on retina displays. Also add keyboard shortcuts early - users expect them and adding them later sucks.