Building a real-time collaborative editor with Next.js and Convex

One of my favourite projects is a Canva-style collaborative design tool — multiple users editing the same canvas in real time. It's a great example of a full-stack challenge, so I want to walk through how I, Mohamed Oulkabir, approached it.

The hard part: real-time consistency

Collaborative editors are deceptively difficult. The moment two people edit at once, you need every client to see a consistent state without conflicts or flicker. I used Convex as the real-time backend so state changes sync automatically across sessions, which removed a huge amount of custom WebSocket plumbing.

Authentication without the pain

I integrated Clerk for authentication and user management. Wiring auth cleanly into a collaborative data model matters: every change needs to be attributed to a user, and permissions have to be respected on the server, not just the UI.

• Next.js + TypeScript for the app and the editing canvas
• Convex for real-time data and state sync between users
• Clerk for authentication and user sessions

The biggest lesson: let a real-time backend own the source of truth. Trying to hand-roll sync is where collaborative apps usually break.

What I'd do next

Add presence (see who else is editing), optimistic updates for snappier interactions, and export options. If you're building something collaborative — an editor, a whiteboard, a dashboard — I'd love to help. I take on freelance full-stack projects and reply within 24 hours.