A real-time collaborative text editor built with modern web technologies. Multiple users can edit documents simultaneously with live cursor tracking, presence awareness, and persistent storage.
- Open the linked website (nils-reith.de) in two different browsers or tabs on one or multiple desktop devices.
- IMPORTANT: Tested with Chrome on Windows, some AI-heavy Browsers like Arc or Comet might not work because of browser-side bugs.
- You can then start writing into the default document and collaborate in realtime with other users or create more documents (or delete them)
- You will see the live position of other users' cursors and their highlighted text
- Real-time Collaboration - Multiple users can edit the same document simultaneously
- Live Presence - See who's online with color-coded cursors
- Document Management - Create, switch between, and delete documents
- Rich Text Editing - Full-featured editor powered by TipTap with formatting options
- Persistent Storage - Documents are automatically saved to PostgreSQL database
- Modern UI - Clean interface built with React and TailwindCSS
- WebSocket Communication - Low-latency updates using Socket.IO and Hocuspocus
This is a monorepo project with two main components:
- Framework: React 19 with TypeScript
- Editor: TipTap (ProseMirror-based)
- Styling: TailwindCSS 4
- Real-time: Hocuspocus Provider + Socket.IO Client
- CRDT: Yjs for conflict-free collaborative editing
- Build Tool: Vite
- Framework: NestJS
- WebSocket Server: Hocuspocus (for document sync)
- Real-time Events: Socket.IO (for presence & document events)
- Database: PostgreSQL
- Language: TypeScript
This project uses:
- Biome - Fast linter and formatter
- Ultracite - Additional code quality checks
- Husky - Git hooks for pre-commit checks
This project is licensed under the MIT License - see the LICENSE file for details.
- TipTap - Headless editor framework
- Hocuspocus - WebSocket backend for collaborative editing
- Yjs - CRDT framework for building collaborative applications
- NestJS - Progressive Node.js framework
- React - UI library
- Lucide Icons - Icon library