Modern collaboration tools are fragmented, limited, or fake-real-time. DevSync was built to remove these constraints.
Most editors fake collaboration or rely on refresh-based sync.
Online editors break when npm, servers,GUI sessions, or build tools are involved.
Online IDE can't run multiple languages.
Chat, code, terminal, and preview live in separate apps.
DevSync is built as a layered real-time system where collaboration, execution, and visualization operate as one pipeline.
Unified interface containing editor, terminal, preview, and chat — fully synchronized across users.
Handles live code sync, cursor presence, file state, and multi-user awareness using persistent connections.
Runs real projects in isolated containers with full access to npm, CLI tools, backend servers, and build systems.
Enables GUI-based applications to run headlessly on the server and stream their display directly into the browser.
A walkthrough of the core collaborative features that power real-time development.
Real-time code synchronization forms the foundation of DevSync's collaborative engine. Multiple users can work on the same file in parallel, with consistent, conflict-free document state eliminating refreshes, locks, and manual coordination.
Code modifications are streamed instantly to all connected clients as users type
Cursor positions, text selections, and scroll state continuously synchronized
Multiple users work simultaneously with automatic conflict resolution
Instant propagation without manual refreshes or coordination overhead
DevSync's terminal runs inside isolated Docker containers, providing real execution environments . All terminal events are streamed bidirectionally over WebSocket connections, ensuring low-latency command execution and seamless synchronization.
Each workspace runs isolated, which is Synced with Client Browser
Client uses xterm for rendering, server uses node-pty for shell session management
Input and output streamed over WebSocket with real-time synchronization across all users
Projects exposed through /project/{projectId} routes, serving HTML/CSS/JS as static assets
DB storage preserves files, dependencies, and build artifacts across sessions
WebSocket-based streaming ensures instant command execution and output display
All file operations are tracked as structured events within the collaborative session. Destructive actions require multi-user voting to prevent accidental data loss. Events flow through primary backend for broadcasting and persistence, then to secondary backend for disk synchronization.
File operations (create, rename, update, delete) tracked as structured events with multi-user voting for destructive actions
Validated events sent to primary backend which broadcasts to all clients and persists to database
Events forwarded to execution backend to mirror changes onto disk storage used by runtime
Binary assets uploaded to Cloudinary, only URL references stored in database, execution backend downloads dynamically
Multi-user voting prevents accidental data loss from destructive operations
File data and state persisted in database for recovery and history
Binary resources stored in Cloudinary, downloaded dynamically by runtime
GUI sessions managed by secondary execution backend where each user gets a dedicated GUI port for isolated visual sessions. Virtual displays initialized with Xvfb, with VNC streams converted to WebSocket connections for browser compatibility.
Xvfb creates isolated virtual display for each user with dedicated GUI port
noVNC transforms x11vnc TCP streams into WebSocket connections
Token authentication required before GUI endpoint access granted
Fluxbox provides lightweight window management for GUI applications
Each connected user assigned dedicated GUI port with isolated session management
Virtual display created via Xvfb with Fluxbox window manager and x11vnc streaming
x11vnc streams over TCP, noVNC converts to WebSocket for browser compatibility
After token auth, virtual screen renders in browser enabling real-time GUI interaction
Frontend preview handled through secure proxy-based execution flow. Backend servers get dynamic proxy middleware with token authentication. Frontend frameworks like Vite are built and served with rewritten asset imports through authenticated proxy layers.
Execution backend creates proxy middleware for servers running inside container workspace
All preview URL requests authenticated via token before forwarding to local container server
Vite apps built through terminal, execution backend rewrites asset imports in build output
All traffic routed through authenticated proxy layers ensuring isolated system access
Integrated team chat and direct messaging designed for real-time collaboration. One-to-one conversations support read receipts for tracking message delivery. Smart notification system triggers in-app toasts for online users and stores messages for offline delivery.
One-to-one conversations with read receipts tracking message delivery and visibility
In-app chat notifications trigger instantly when recipient is online
Messages stored and delivered as notifications upon user reconnection
Group chat channels for project-wide collaboration and discussions
SSE-driven workflow executes on primary backend for importing external repositories. Pipeline handles authentication, downloads archives, extracts in memory with size enforcement, and selectively persists source files while uploading binaries to cloud storage.
Validate credentials, resolve target folder, download repository archive from source
Extract archive in memory with size constraint enforcement before processing
Source files stored as database records, binary resources uploaded to cloud storage
SSE events stream incremental progress to Next.js client, project available without reload
Import from GitHub, GitLab, and other Git hosting platforms
Source code in database, binary assets in cloud with URL references
SSE streaming provides real-time import status without page refresh
A high-level overview of the infrastructure powering DevSync.
Core technologies powering DevSync.