A real-time collaborative code editor that lets multiple users write, edit, and run code together in a shared room — live, in the browser.
Live: syncode.void57.space
| Desktop | Mobile |
|---|---|
 |
 |
| Editor | Collab |
|---|---|
 |
 |
- Real-time collaborative editing powered by Socket.IO
- Multi-language code execution (JS, TS, Python, Go, Rust, Java, C++, C, Ruby) via self-hosted Piston
- Monaco Editor (same engine as VS Code) with syntax highlighting
- Live user presence — see who's in the room and their typing status
- Room-based sessions — share a room code to collaborate instantly
| Layer | Technology |
|---|---|
| Frontend | React 19, Vite, TailwindCSS 4, Monaco Editor |
| Backend | Node.js, Express 5, Socket.IO |
| Code Execution | Self-hosted Piston API (AWS EC2) |
| Containerization | Docker (Piston runtime isolation) |
| Deployment | Render (app), AWS EC2 (Piston) |
synCode/
├── backend/
│ └── index.js # Express server, Socket.IO events, Piston
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── EditorView.jsx # Monaco editor + run panel + user list
│ │ │ └── JoinRoom.jsx # Room entry screen with validation
│ │ ├── context/
│ │ │ └── Room.jsx # Global room state context
│ │ └── App.jsx
│ └── public/
│ ├── og-image.png # OG banner image (1856×912)
│ ├── logo.svg / logo.png # App icon
│ └── ...
├── package.json # Root — start/build scripts
└── README.md
- Node.js 18+
- Docker (required to self-host Piston)
- A running Piston instance — production uses a self-hosted instance on AWS EC2
Piston uses Docker to run untrusted code in isolated containers. To spin it up locally:
docker run \ --platform linux/amd64 \ -v /var/run/docker.sock:/var/run/docker.sock \ -p 2000:2000 \ ghcr.io/engineer-man/piston
Then set your .env:
PISTON_URL=http://localhost:2000/api/v2/execute
Piston pulls language runtimes on demand the first time each language is executed. In production, the Piston instance runs on an AWS EC2 instance inside Docker.
# Install root dependencies npm install # Install frontend dependencies cd frontend && npm install && cd .. # Start backend (with nodemon) npm run dev # In a separate terminal, start the frontend dev server cd frontend && npm run dev
Backend runs on http://localhost:3000, frontend on http://localhost:5173 (Vite proxy).
npm run build npm start
This builds the React app into frontend/dist/ and serves it from the Express backend.
Create a .env file in the project root:
PISTON_URL=http://<your-piston-host>:2000/api/v2/execute PORT=3000
javascript · typescript · python · go · rust · java · c++ · c · ruby
This is a personal project. All rights reserved.