A real-time collaborative document editor built with Next.js, Liveblocks, Lexical Editor, and ShadCN UI.
Supports multiplayer editing, rich text formatting, and presence indicators — designed for speed, simplicity, and seamless collaboration.
- 📄 Google Docs-style collaborative editing.
- ⚡ Real-time live collaboration between multiple users.
- 🔐 Login using Google or GitHub via Clerk.
- 🔗 Share documents with specific users via email permissions.
- 💬 Inline comments and emoji reactions in real-time.
| Layer | Technology Used |
|---|---|
| Frontend | Next.js, Tailwind CSS, shadcn/ui |
| Rich Text | Lexical Editor |
| Realtime Sync | Liveblocks |
| Auth | Clerk Auth |
git clone https://github.com/your-username/prodraft.git
cd prodraftnpm installCreate a .env.local file in the root of the project:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your_liveblocks_public_key_here🔑 Replace the placeholder with your actual Liveblocks public key.
npm run devVisit http://localhost:3000 in your browser to start using the app.
- Auth powered by Clerk with Google and GitHub SSO.
- Documents can be shared with specific email addresses.
- Role-based access (edit/comment/view) managed at the document level.
No traditional REST or GraphQL APIs.
All synchronization and user presence is powered by Liveblocks and Lexical plugins.
For more, see Liveblocks Docs and Lexical Docs.
- Collaborative note-taking and document writing.
- Real-time team project planning and documentation.
- Lightweight internal tools or wikis.
- Add support for exporting documents (PDF, Markdown).
- Version history and change tracking.
- Notifications for comments or mentions.
- Offline editing support.