A premium real-time collaborative text editor inspired by Google Docs
Features • Demo • Tech Stack • Getting Started • Architecture • API • Contributing
Collaborative Editor Pro is a feature-rich, real-time collaborative text editor that brings the power of Google Docs-style editing to your applications. Built with modern web technologies, it offers seamless multi-user collaboration, rich text formatting, and a beautiful, responsive interface that works flawlessly in both light and dark modes.
Whether you're building a documentation platform, a team collaboration tool, or a content management system, Collaborative Editor Pro provides all the essential features you need for professional document editing.
| Feature | Description |
|---|---|
| Text Formatting | Bold, italic, underline, strikethrough, and inline code |
| Headings | 6 levels (H1-H6) with beautiful, consistent styling |
| Text Alignment | Left, center, right, and justify options |
| Lists | Bullet lists, numbered lists, and task lists with interactive checkboxes |
| Highlighting | Multiple highlight colors (yellow, green, blue, pink, orange, purple) |
| Blockquotes | Elegant quote blocks with styled left border accent |
| Horizontal Rules | Gradient-styled dividers for content separation |
| Code Blocks | Syntax-highlighted code with monospace font |
| Feature | Description |
|---|---|
| Tables | Full table support with insert, resize, add/delete rows and columns |
| Images | Insert images via URL with hover effects and responsive sizing |
| Links | Auto-link detection with custom styling and click-to-open functionality |
| Feature | Description |
|---|---|
| Operational Transformation | Industry-standard conflict resolution for concurrent editing |
| WebSocket Sync | Instant updates across all connected clients with minimal latency |
| Connection Status | Live indicator showing connection state (connected/reconnecting/offline) |
| Version Tracking | Document version displayed in toolbar for debugging and sync verification |
| Presence Awareness | See who else is editing the document in real-time |
| Feature | Description |
|---|---|
| Dark/Light Theme | Toggle between themes with smooth CSS transitions |
| System Theme Detection | Automatically matches your OS preference |
| Premium Design | Glassmorphism effects, gradients, and micro-animations |
| Google Docs Layout | Familiar page-style document presentation with margins |
| Responsive Layout | Works seamlessly on desktop, laptop, and tablet devices |
| Custom Scrollbars | Styled scrollbars that match the current theme |
| Keyboard Shortcuts | Full support for common formatting shortcuts |
| Feature | Description |
|---|---|
| Word Count | Real-time word counter in status bar |
| Character Count | Track total character count |
| Reading Time | Estimated reading time (calculated at 200 WPM) |
| Auto-Save | Visual indicator showing save status |
- Export to HTML - Clean, semantic HTML output
- Export to Plain Text - Strip formatting for plain text use
| Technology | Purpose | Version |
|---|---|---|
| React | UI Library | 18.2 |
| TypeScript | Type Safety | 5.3 |
| TipTap | Rich Text Editor (ProseMirror-based) | 2.x |
| Tailwind CSS | Styling Framework | 3.4 |
| Zustand | State Management | 5.0 |
| Radix UI | Accessible UI Components | Latest |
| Lucide React | Icon Library | 0.303 |
| Vite | Build Tool | 5.0 |
@tiptap/starter-kit # Core editing functionality
@tiptap/extension-image # Image support
@tiptap/extension-link # Link handling
@tiptap/extension-table # Table editing
@tiptap/extension-table-row # Table row management
@tiptap/extension-table-cell # Table cell management
@tiptap/extension-table-header # Table header support
@tiptap/extension-task-list # Task list with checkboxes
@tiptap/extension-task-item # Individual task items
@tiptap/extension-highlight # Text highlighting
@tiptap/extension-underline # Underline formatting
@tiptap/extension-text-align # Text alignment
@tiptap/extension-placeholder # Placeholder text
@tiptap/extension-character-count # Character counting
| Technology | Purpose | Version |
|---|---|---|
| Node.js | Runtime Environment | 16+ |
| Express | Web Framework | 4.18 |
| WebSocket (ws) | Real-time Communication | 8.16 |
| PostgreSQL | Database | 16 |
| TypeScript | Type Safety | 5.3 |
| tsx | TypeScript Execution | 4.7 |
| Technology | Purpose |
|---|---|
| Docker Compose | Container Orchestration |
| PostgreSQL Alpine | Lightweight Database Image |
| pgAdmin 4 | Database Management UI |
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ React Application │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ TipTap │ │ Zustand │ │ Radix │ │ │
│ │ │ Editor │ │ Stores │ │ UI │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ Collaboration Client │ │ │
│ │ │ - WebSocket Connection │ │ │
│ │ │ - Operational Transformation │ │ │
│ │ │ - Step Synchronization │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
└──────────────────────────────│───────────────────────────────────┘
│ HTTP REST + WebSocket
▼
┌─────────────────────────────────────────────────────────────────┐
│ SERVER │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Express Application │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ REST Routes │ │ WebSocket Server│ │ │
│ │ │ /api/collab/* │ │ /ws │ │ │
│ │ └────────┬────────┘ └────────┬────────┘ │ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ Step Service │ │ │
│ │ │ - Document version management │ │ │
│ │ │ - Step validation & storage │ │ │
│ │ │ - Conflict resolution │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ Persistence Service │ │ │
│ │ │ - Document storage │ │ │
│ │ │ - Step history │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
└──────────────────────────────│───────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ DATABASE │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ PostgreSQL │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ documents │ │ steps │ │ sessions │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
collaborative_editor/
├── 📁 client/ # React frontend application
│ ├── 📁 src/
│ │ ├── 📁 components/
│ │ │ ├── 📁 editor/ # Core editor components
│ │ │ │ ├── CollaborativeEditor.tsx # Basic editor
│ │ │ │ ├── EnhancedCollaborativeEditor.tsx # Full-featured editor
│ │ │ │ ├── EnhancedEditorToolbar.tsx # Google Docs-style toolbar
│ │ │ │ ├── EnhancedEditorStatusBar.tsx # Document stats & status
│ │ │ │ ├── EditorRuler.tsx # Horizontal ruler
│ │ │ │ ├── VerticalRuler.tsx # Vertical ruler
│ │ │ │ ├── WordCounter.tsx # Word count display
│ │ │ │ ├── ErrorBanner.tsx # Error notifications
│ │ │ │ └── editor.css # Editor-specific styles
│ │ │ ├── 📁 layout/ # Layout components
│ │ │ │ └── Header.tsx
│ │ │ └── 📁 ui/ # Reusable UI components
│ │ │ ├── button.tsx # Button variants
│ │ │ ├── dialog.tsx # Modal dialogs
│ │ │ ├── dropdown-menu.tsx # Dropdown menus
│ │ │ ├── popover.tsx # Popovers
│ │ │ ├── tooltip.tsx # Tooltips
│ │ │ ├── separator.tsx # Visual separators
│ │ │ ├── CollaboratorAvatar.tsx # User presence indicators
│ │ │ └── ThemeToggle.tsx # Theme switcher
│ │ ├── 📁 stores/ # Zustand state management
│ │ │ ├── themeStore.ts # Theme preferences
│ │ │ ├── documentStore.ts # Document state
│ │ │ └── presenceStore.ts # User presence state
│ │ ├── 📁 hooks/ # Custom React hooks
│ │ │ ├── useDebounce.ts # Debounce utility
│ │ │ └── useLocalStorage.ts # LocalStorage persistence
│ │ ├── 📁 lib/ # Utilities and services
│ │ │ ├── api.ts # REST API client
│ │ │ ├── websocket.ts # WebSocket client
│ │ │ ├── collaboration.ts # Collaboration logic
│ │ │ └── utils.ts # Helper functions
│ │ ├── App.tsx # Root component
│ │ ├── main.tsx # Entry point
│ │ └── index.css # Global styles
│ ├── package.json
│ ├── vite.config.ts
│ ├── tailwind.config.js
│ └── tsconfig.json
│
├── 📁 server/ # Node.js backend
│ ├── 📁 src/
│ │ ├── 📁 config/ # Configuration
│ │ │ └── database.ts # Database schema
│ │ ├── 📁 database/ # Database connection
│ │ │ └── pool.ts # PostgreSQL connection pool
│ │ ├── 📁 middleware/ # Express middleware
│ │ │ ├── errorHandler.ts # Global error handling
│ │ │ └── validation.ts # Request validation
│ │ ├── 📁 repositories/ # Data access layer
│ │ │ ├── documentRepository.ts # Document CRUD
│ │ │ └── stepRepository.ts # Step storage
│ │ ├── 📁 routes/ # API endpoints
│ │ │ └── collaboration.ts # Collaboration routes
│ │ ├── 📁 services/ # Business logic
│ │ │ ├── stepService.ts # Step processing
│ │ │ ├── persistenceService.ts # Data persistence
│ │ │ ├── websocketService.ts # WebSocket management
│ │ │ └── logger.ts # Logging utility
│ │ ├── 📁 scripts/ # Database scripts
│ │ │ ├── setupDatabase.ts # Initialize schema
│ │ │ └── resetDatabase.ts # Reset database
│ │ ├── 📁 types/ # TypeScript types
│ │ │ └── index.ts # Shared type definitions
│ │ └── server.ts # Application entry point
│ ├── package.json
│ └── tsconfig.json
│
├── 📁 screenshots/ # Documentation images
│ ├── editor_light_mode.png
│ ├── editor_dark_mode.png
│ └── img.png
│
├── docker-compose.yml # Database services
├── package.json # Root workspace configuration
├── .gitignore
└── README.md
Before you begin, ensure you have the following installed:
| Requirement | Version | Notes |
|---|---|---|
| Node.js | v16+ | Download |
| npm | v7+ | Comes with Node.js |
| Docker | Latest | Download |
| Docker Compose | v2+ | Download |
git clone https://github.com/DAMMAK/collaborative_editor.git
cd collaborative_editor# Install all dependencies (root, client, and server)
npm run install:all# Start PostgreSQL and pgAdmin containers
docker-compose up -d
# Verify containers are running
docker-compose ps# Run database setup script
npm run db:setup --workspace=server# Start both client and server concurrently
npm run dev| Service | URL | Description |
|---|---|---|
| Editor | http://localhost:3000 | Main application |
| API Server | http://localhost:4000 | REST API endpoints |
| WebSocket | ws://localhost:4000/ws | Real-time updates |
| pgAdmin | http://localhost:5050 | Database management |
- Email: admin@admin.com
- Password: admin
The editor supports three theme modes that can be toggled via the toolbar:
Clean, bright interface with purple accents perfect for daytime use.
Rich, dark interface with optimized contrast for reduced eye strain.
Automatically matches your operating system's theme preference and updates dynamically.
Implementation Details:
- Theme state is managed via Zustand with localStorage persistence
- CSS transitions provide smooth theme switching
- System theme changes are detected via
matchMedialistener - Tailwind CSS dark mode uses class-based switching
| Shortcut | Action |
|---|---|
⌘/Ctrl + B |
Bold |
⌘/Ctrl + I |
Italic |
⌘/Ctrl + U |
Underline |
⌘/Ctrl + Shift + S |
Strikethrough |
⌘/Ctrl + E |
Code |
| Shortcut | Action |
|---|---|
⌘/Ctrl + Z |
Undo |
⌘/Ctrl + Shift + Z |
Redo |
⌘/Ctrl + Y |
Redo (alternative) |
| Shortcut | Action |
|---|---|
⌘/Ctrl + Shift + 8 |
Bullet List |
⌘/Ctrl + Shift + 7 |
Numbered List |
| Method | Endpoint | Description | Request | Response |
|---|---|---|---|---|
GET |
/api/collab/events |
Get steps since version | ?version=n |
{ version, steps[], doc } |
POST |
/api/collab/events |
Push new steps | { version, steps[], clientID } |
{ success, version } |
GET |
/api/collab/stats |
Document statistics | - | { version, stepCount, clientCount } |
GET |
/api/collab/health |
Health check | - | { status: "ok" } |
Connection URL: ws://localhost:4000/ws
| Type | Direction | Payload | Description |
|---|---|---|---|
CONNECTED |
Server → Client | { message } |
Connection confirmation |
NEW_STEPS |
Server → Client | { version, steps[] } |
New steps broadcast |
VERSION_UPDATE |
Server → Client | { version } |
Version sync |
PING |
Client → Server | { timestamp } |
Keep-alive ping |
PONG |
Server → Client | { timestamp } |
Ping response |
| Command | Description |
|---|---|
npm run install:all |
Install all dependencies |
npm run dev |
Start both client and server |
npm run dev:client |
Start only client |
npm run dev:server |
Start only server |
npm run build |
Build for production |
npm run clean |
Remove all node_modules and builds |
| Command | Description |
|---|---|
npm run dev |
Development server with HMR |
npm run build |
Production build |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
| Command | Description |
|---|---|
npm run dev |
Development server with hot reload |
npm run build |
Compile TypeScript |
npm run start |
Start production server |
npm run db:setup |
Initialize database schema |
npm run db:reset |
Reset database ( |
The project includes Docker Compose configuration for the database:
# Start PostgreSQL and pgAdmin
docker-compose up -d
# View logs
docker-compose logs -f
# View specific service logs
docker-compose logs -f postgres
# Stop services
docker-compose down
# Stop and remove volumes (⚠️ deletes data)
docker-compose down -v| Variable | Default | Description |
|---|---|---|
POSTGRES_DB |
collaborative_editor | Database name |
POSTGRES_USER |
postgres | Database user |
POSTGRES_PASSWORD |
postgres | Database password |
PORT |
4000 | Server port |
NODE_ENV |
development | Environment mode |
When deploying to production, ensure you:
- Change default credentials - Update PostgreSQL and pgAdmin passwords
- Use environment variables - Never commit secrets to version control
- Enable HTTPS - Use TLS for all connections
- Configure CORS - Restrict origins to trusted domains
- Rate limiting - Implement rate limiting for API endpoints
- Input validation - Validate and sanitize all user inputs
- WebSocket authentication - Add authentication to WebSocket connections
- Debounced sync - Prevents excessive API calls during rapid typing
- Step batching - Multiple changes bundled into single requests
- Efficient DOM updates - ProseMirror's virtual document model
- Connection pooling - PostgreSQL connection reuse
- WebSocket heartbeat - Dead connection detection and cleanup
- Enable gzip compression
- Use a CDN for static assets
- Implement Redis for session caching
- Add read replicas for database scaling
- Consider horizontal scaling with load balancer
# Client tests (when implemented)
npm test --workspace=client
# Server tests (when implemented)
npm test --workspace=server- Editor loads without errors
- Text formatting works (bold, italic, etc.)
- Tables can be created and edited
- Theme toggle works correctly
- WebSocket connection establishes
- Changes sync between multiple tabs
- Export functions produce valid output
We welcome contributions! Here's how to get started:
-
Fork the repository
git clone https://github.com/DAMMAK/collaborative_editor.git
-
Create a feature branch
git checkout -b feature/amazing-feature
-
Make your changes
- Follow existing code style
- Add tests for new features
- Update documentation as needed
-
Commit your changes
git commit -m 'feat: add amazing feature'Follow Conventional Commits format.
-
Push to your fork
git push origin feature/amazing-feature
-
Open a Pull Request
- TypeScript - Strict mode enabled
- ESLint - Follow project configuration
- Prettier - Consistent formatting
- Components - Functional with hooks
- User Authentication - Login and user management
- Document Management - Create, list, and organize documents
- Comments & Suggestions - Google Docs-style commenting
- Cursor Presence - See other users' cursors in real-time
- Version History - View and restore previous versions
- Export to PDF - Generate PDF documents
- Import DOCX - Import Word documents
- Emoji Picker - Rich emoji support
- Mentions - @mention users in documents
- Templates - Pre-built document templates
- Mobile Optimization - Touch-friendly interface
- Offline Mode - Continue editing when disconnected
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2024 DAMMAK
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
This project stands on the shoulders of giants:
| Project | Purpose |
|---|---|
| TipTap | The headless editor framework powering the rich text experience |
| ProseMirror | The foundational toolkit for building rich text editors |
| Tailwind CSS | The utility-first CSS framework for rapid styling |
| Radix UI | Unstyled, accessible component primitives |
| Zustand | Lightweight state management |
| Lucide | Beautiful, consistent icons |
| Google Docs | Design inspiration and UX patterns |
DAMMAK - @DAMMAK
Project Link: https://github.com/DAMMAK/collaborative_editor
Built with ❤️ by DAMMAK
If you found this project helpful, please consider giving it a ⭐!