A full-stack, real-time collaborative IDE designed for remote pair programming, technical interviews, and educational purposes. Code together, ship faster.
- Introduction
- Live Demo
- Key Features
- Technology Stack
- Getting Started
- Docker Deployment
- Environment Variables
- Contributing
- License
SyncForge is a powerful, web-based Integrated Development Environment (IDE) that eliminates the friction of remote collaboration. It provides a seamless, all-in-one platform where developers can code, communicate, and create together in real-time, without needing multiple tools. Whether for a high-stakes technical interview, a pair programming session, or an interactive classroom, SyncForge provides the tools for effective collaboration.
https://sync-forge-ide-v2.vercel.app/









- π¨βπ» Real-time Collaborative Editor: A multi-file Monaco Editor instance synchronized using Operational Transformation (OT) via ShareDB, ensuring conflict-free, low-latency collaborative coding with shared cursors.
- πΉ Integrated Communication Suite: Built-in WebRTC for multi-party video/audio conferencing and screen sharing, plus a real-time chat with file-sharing capabilities, powered by WebSockets.
- βοΈ Multi-Language Code Execution: A secure backend engine to compile and run C++, Java, and Python code, with shared
stdin
andstdout
streamed to all participants. - π₯οΈ Shared Interactive Terminal: An integrated, fully-functional terminal using Xterm.js on the frontend and
node-pty
on the backend, giving all users access to a shared shell environment within the project's workspace. - π€ AI-Powered Assistant: Leverages the Google Gemini API to provide an intelligent chatbot for explaining concepts and a context-aware, in-editor code completion feature that suggests "ghost text" as you type.
- π¨ Collaborative Whiteboard: A real-time whiteboard powered by Tldraw, allowing for shared diagramming and visual planning. Includes advanced functionality to import, annotate, and export multi-page PDF documents.
- ποΈ Workspace & File Management: A complete file tree explorer that supports creating, renaming, and deleting files/folders, along with drag-and-drop uploads for single files and entire
.zip
projects. - π Host Controls & Permissions: Robust role-based access control (RBAC) allowing session hosts to manage participants, toggle features (like code execution or AI), and switch between open and host-only editing modes.
- Framework: React.js
- UI Library: Ant Design
- State Management: React Hooks (useState, useEffect, useReducer, useCallback)
- Code Editor: Monaco Editor
- Terminal: Xterm.js
- Whiteboard: Tldraw
- Styling: Tailwind CSS
- Animations: Framer Motion
- Runtime: Node.js
- Framework: Express.js
- API: REST for session management & file operations
- Editor Sync: ShareDB (for Operational Transformation)
- Signaling & Chat: Custom WebSocket Server
- Video/Audio: WebRTC
- Terminal Sync: Custom WebSocket Server
- LLM Provider: Google Gemini API (
@google/genai
) for chat and code completion.
- Containerization: Docker
Follow these instructions to get a local copy of SyncForge up and running for development and testing purposes.
- Node.js (v18.x or later)
- npm (v8.x or later)
- Docker (for running the complete environment with the code execution engine)
- Navigate to the backend directory:
cd editor-backend
- Install dependencies:
npm install
- Create an environment file:
Create a
.env
file in theeditor-backend
directory and add your Google Gemini API key.# .env GEMINI_API_KEY='AIzaSy...'
- Start the backend server:
The server will start on
npm run dev
http://localhost:8080
.
- Navigate to the frontend directory in a new terminal:
cd editor-frontend
- Install dependencies:
npm install
- Start the React development server:
The application will be available at
npm start
http://localhost:3000
.
The provided Dockerfile
sets up the backend server and its dependencies for the code execution environment.
- Build the Docker image from the root directory:
docker build -t syncforge .
- Run the Docker container:
This command maps the container's port
8080
to your local machine's port8080
.Note: For this setup, you still need to run the React frontend separately ondocker run -p 8080:8080 --name syncforge-app syncforge
localhost:3000
which will connect to the backend running inside the Docker container.
The following environment variables are required for the application to run correctly:
GEMINI_API_KEY
: Your API key for the Google Gemini AI services.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.