Real-time collaborative code editor — built for developers who ship together.
Live Demo
Next.js
React
Socket.io
Monaco
Tailwind CSS
Express
License
Stop sharing screenshots. Start sharing live code.
The fastest way to collaborate, pair program, and debug with developers anywhere in the world.
Most code-sharing tools feel like an afterthought — clunky, slow, and disconnected from a real coding experience. CodeshareLive was purpose-built from the ground up to feel like you're coding in the same IDE, sitting side by side with your team.
Zero signup. Zero installs. Just click a link and code.
Generate a unique room with one click using UUID-based room IDs. Share the link — anyone who opens it is instantly connected. No accounts, no friction.
See every keystroke in real-time powered by Socket.io. Color-coded remote cursors show exactly where each participant is editing — true multiplayer coding.
The same editor engine that powers VS Code. Full syntax highlighting, IntelliSense-style features, and a familiar keyboard experience across 19 languages.
Run Python, JavaScript, Java, C/C++, and Go directly from the editor. The sandboxed backend compiler returns output instantly — no local setup required.
Toggle drawing mode to sketch diagrams, annotate code, or brainstorm ideas on a shared canvas overlay — synced in real-time across all participants.
Lock the editor with a single toggle to prevent accidental edits during reviews, presentations, or interviews. Control stays with the host.
codesharelive/
├── client/ # Next.js 16 + React 19 Frontend
│ ├── src/
│ │ ├── app/ # App Router pages & API routes
│ │ │ ├── [roomId]/ # Dynamic room routes
│ │ │ ├── about/ # About page
│ │ │ ├── blog/ # Blog
│ │ │ ├── changelog/ # Changelog
│ │ │ ├── contact/ # Contact form
│ │ │ ├── faq/ # FAQ
│ │ │ ├── privacy-policy/
│ │ │ ├── terms/ # Terms of Service
│ │ │ └── templates/ # Code templates
│ │ └── components/
│ │ ├── Editor.js # Monaco + Socket.io + Canvas
│ │ ├── Header.js # Navigation bar
│ │ ├── Footer.js # Site footer
│ │ ├── ThemeProvider.js # Dark/light theme context
│ │ └── home/ # Landing page components
│ │ ├── AnimatedContainer.js
│ │ ├── FeaturesDetail.js
│ │ ├── HeroBackground.js
│ │ ├── JoinForm.js
│ │ └── MockEditor.js
│ └── package.json
│
├── server/ # Express 5 + Socket.io Backend
│ └── src/
│ └── index.js # WebSocket hub + Compilex API
│
└── README.md
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Next.js 16, React 19 | Server-side rendering, App Router |
| Editor | Monaco Editor (via @monaco-editor/react) |
VS Code-grade editing |
| Styling | Tailwind CSS 4, Framer Motion | Utility-first CSS, animations |
| Icons | Lucide React, React Icons | Crisp SVG icon sets |
| Realtime | Socket.io 4 (client + server) | WebSocket-based live sync |
| Backend | Express 5, Node.js | REST API + WebSocket server |
| Compiler | Compilex + child_process | Sandboxed multi-language execution |
| Deployment | Vercel (frontend) | Edge-optimized hosting |
- Node.js v18+ recommended
- npm (comes with Node.js)
git clone https://github.com/ShubhamV2503/codesharelive.git
cd codesharelivecd server
npm install
node src/index.jsThe server starts at
http://localhost:4000
Open a new terminal:
cd client
npm install
npm run devThe app opens at
http://localhost:3000
- Open
http://localhost:3000in your browser - Click Create Instant Room to generate a unique workspace
- Share the URL with anyone — they're instantly connected
- Select a language, write code, and run it in real-time
Watch candidates think in real-time. Run their code instantly against test cases. A professional experience that reflects your engineering culture.
Walk students through code live. Sketch architecture on the whiteboard. Lead shared sessions with up to 20 participants.
Debug together in real-time. See your partner's cursor, edits, and thought process. Ship features faster, together.
Create a .env.local file in the client/ directory:
# Socket server URL (defaults to localhost:4000 if not set) NEXT_PUBLIC_SOCKET_URL=http://localhost:4000 # App URL for OpenGraph metadata NEXT_PUBLIC_APP_URL=https://codesharelive.vercel.app # Google Search Console verification (optional) NEXT_PUBLIC_GOOGLE_VERIFICATION=your_verification_code
This repository and its codebase are proprietary. All rights reserved.
However, contributions are welcome! If you'd like to improve CodeshareLive, here's how:
- Fork the repository
- Create a new branch for your feature or fix (
git checkout -b feature/amazing-feature) - Make your changes and commit them (
git commit -m "Add amazing feature") - Push to your fork (
git push origin feature/amazing-feature) - Open a Pull Request — describe what you changed and why
Once your PR is reviewed and merged, you'll be added as a contributor 🎉
Note: By submitting a PR, you agree that your contributions will be licensed under the same terms as this project.