A powerful, modern collaborative code editor built with Next.js, Monaco Editor, and Liveblocks. Designed for seamless real-time collaboration, perfect for pair programming, code reviews, team development, and educational environments.
🚀 Live Demo: https://collabcodex.vercel.app/
📂 Repository: https://github.com/harsh-pandhe/codex-editor
- Live Multi-User Editing: Multiple developers can code simultaneously with instant synchronization
- Live Cursors & Presence: See teammates' cursors, selections, and online status in real-time
- Conflict-Free Editing: Y.js CRDT technology ensures seamless collaborative editing without conflicts
- Instant Synchronization: Powered by Liveblocks for lightning-fast real-time updates
- Monaco Editor Integration: Full VS Code editor experience with syntax highlighting and IntelliSense
- Multi-Language Support: Comprehensive syntax highlighting for popular programming languages
- Code Intelligence: Auto-completion, error detection, and code formatting
- Flexible Layout: Golden Layout system for customizable multi-panel interface
- Secure Authentication: Clerk-powered authentication with organization support
- Board System: Create and manage multiple coding projects with custom layouts
- Team Workspaces: Organization-based board sharing and access control
- Persistent State: Automatic saving ensures no code is ever lost
- Responsive Design: Beautiful, mobile-friendly interface built with Tailwind CSS
- Intuitive UI: Clean, distraction-free coding environment
- Performance Optimized: Built on Next.js 14 with App Router for optimal performance
- Next.js 14 - React framework with App Router for optimal performance
- TypeScript - Type-safe development for reliability and maintainability
- Tailwind CSS - Modern, utility-first CSS framework
- Monaco Editor - Industry-standard code editor (VS Code for the web)
- Liveblocks - Real-time collaboration infrastructure and presence
- Y.js - Conflict-free replicated data types for collaborative editing
- Y-Monaco - Monaco Editor bindings for Y.js integration
- Golden Layout - Flexible multi-panel interface management
- Convex - Real-time backend as a service with instant database sync
- Clerk - Complete authentication and user management platform
- Y-Protocols - Awareness and synchronization protocols
- Radix UI - Headless, accessible UI component primitives
- Lucide React - Beautiful, customizable icon library
- Perfect Freehand - Smooth drawing and annotation capabilities
Ensure you have the following installed:
- Node.js 18+
- Package manager: npm, yarn, or pnpm
- Service Accounts: Convex, Liveblocks, and Clerk
-
Clone the Repository
git clone https://github.com/harsh-pandhe/codex-editor.git cd codex-editor -
Install Dependencies
npm install # or yarn install # or pnpm install
-
Environment Configuration
Create
.env.localin the project root:# Convex Configuration CONVEX_DEPLOYMENT=your_convex_deployment_id NEXT_PUBLIC_CONVEX_URL=https://your_deployment.convex.cloud # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key CLERK_SECRET_KEY=sk_test_your_clerk_secret # Liveblocks Real-time Collaboration LIVEBLOCKS_SECRET_KEY=sk_your_liveblocks_secret NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_your_liveblocks_public_key
-
Initialize Convex Backend
npx convex dev
-
Start Development Server
npm run dev # or yarn dev # or pnpm dev
-
Access the Application
Open http://localhost:3000 in your browser
codex-editor/
├── app/ # Next.js App Router
│ ├── (dashboard)/ # Protected dashboard routes
│ │ ├── _components/ # Dashboard-specific components
│ │ └── page.tsx # Main dashboard interface
│ ├── api/ # API route handlers
│ ├── board/ # Board management routes
│ │ └── [boardId]/ # Dynamic board pages
│ ├── globals.css # Global styles
│ └── layout.tsx # Root application layout
├── components/ # Reusable React components
│ ├── auth/ # Authentication components
│ ├── modals/ # Modal dialog components
│ └── ui/ # Base UI components (Radix)
├── convex/ # Convex backend functions
│ ├── board.ts # Board CRUD operations
│ ├── boards.ts # Board query functions
│ └── schema.ts # Database schema definitions
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and helpers
├── providers/ # React context providers
├── store/ # Zustand state management
├── types/ # TypeScript type definitions
└── public/ # Static assets and images
- Authentication: Sign in using Clerk authentication
- Organization Setup: Create or join an organization for team collaboration
- Create Board: Click "New Board" to create a collaborative coding workspace
- Invite Collaborators: Share board access with team members
- Start Coding: Begin real-time collaborative development!
- Real-Time Editing: Watch as teammates edit code with live cursors and selections
- Presence Awareness: See who's online and actively editing
- Automatic Conflict Resolution: Y.js handles simultaneous edits seamlessly
- Persistent Sessions: All changes auto-save for uninterrupted workflow
- Multi-Panel Layout: Organize multiple code files with Golden Layout
- Organization Management: Team-based board organization and access control
- Search & Discovery: Quick board search and filtering capabilities
- Favorites System: Bookmark frequently accessed boards
We welcome contributions! Help make Codex Editor even better.
- Fork the repository on GitHub
- Clone your fork locally
- Create a feature branch:
git checkout -b feature/awesome-feature - Commit your changes:
git commit -m 'Add awesome feature' - Push to your branch:
git push origin feature/awesome-feature - Submit a Pull Request with detailed description
- Follow TypeScript best practices
- Write meaningful commit messages
- Test your changes thoroughly
- Update documentation as needed
This project is licensed under the MIT License. See the LICENSE file for complete details.
Built with amazing open-source technologies:
- Monaco Editor - Powerful web-based code editor
- Liveblocks - Real-time collaboration platform
- Y.js - Conflict-free replicated data types
- Convex - Real-time backend as a service
- Clerk - Complete authentication platform
- Golden Layout - Multi-panel interface framework
- Issues: Report bugs on GitHub Issues
- Discussions: Join conversations in GitHub Discussions
- Documentation: Visit our Wiki for detailed guides
🚀 Ready to revolutionize collaborative coding? Try Codex Editor today!
Live App: https://collabcodex.vercel.app/
Source Code: https://github.com/harsh-pandhe/codex-editor