Syncode - Real-Time Collaborative Code Editing

Syncode brings Google Docs-style real-time collaboration to Visual Studio Code. Edit code together with your team, see each other's cursors, and never worry about merge conflicts again.

✨ Features

🚀 Real-Time Synchronization

• Instant Updates: See changes as your teammates type (sub-300ms latency)
• No Manual Saves: Changes sync automatically - just type and collaborate
• Conflict-Free: Built on CRDT technology that automatically merges concurrent edits
• Workspace Sharing: Entire project structure syncs automatically when collaborators join

👥 Role-Based Access Control

• Owner: Full control - manage users, change roles, create invites, share workspace
• Editor: Read and write code collaboratively across all files
• Viewer: Read-only access - perfect for code reviews and presentations

📁 Automatic Workspace Distribution

• Complete Project Sync: Collaborators receive your entire workspace structure
• Smart File Transfer: Files sync in priority order (active file first)
• Progress Tracking: See real-time progress during workspace sync
• Selective Sync: Automatically excludes node_modules, .git, and sensitive files

🎯 Smart Cursor Awareness

• See where your teammates are editing in real-time
• Color-coded cursors with user names
• Never accidentally edit the same line

📸 Version History

• Automatic snapshots of your work
• Restore to any previous version
• Track who made what changes

🔒 Enterprise-Grade Security

• Role-based permissions
• Audit logging for compliance
• Encrypted WebSocket connections (WSS)
• File integrity verification with SHA-256 hashing

🎬 Quick Start

1. Install the Extension

Search for "Syncode" in VS Code Extensions or install from the marketplace.

2. Start Collaboration

1. Click the Syncode icon (radio tower) in the sidebar
2. Click "Start Collaboration"
3. Enter your name and server URL (default: ws://localhost:8081)

3. Invite Your Team

1. Click "Generate Invite Link" in the Syncode panel
2. Share the link with your teammates
3. They click "Join Session" and paste the link

4. Collaborate!

• Open the same file in both editors
• Start typing and see changes appear instantly
• Watch your teammate's cursor move in real-time

📋 Requirements

• VS Code: Version 1.103.0 or higher
• Node.js: Version 16 or higher (for WebSocket server)
• WebSocket Server: Must be running on port 8081

Starting the WebSocket Server

The extension requires a WebSocket server to coordinate collaboration.

Option 1: Use the included server

# Clone the repository
git clone https://github.com/yourusername/syncode
cd syncode

# Install dependencies
npm install

# Start the server
npm run server

Option 2: Deploy your own server Deploy the WebSocket server from the repository to your preferred hosting service.

🎮 How to Use

Starting a Session (Owner)

1. IMPORTANT: Open your project folder (File → Open Folder) - NOT individual files!
2. Click the Syncode icon in the sidebar
3. Click "Start Collaboration"
4. Enter your name
5. Click "Generate Invite Link" to invite others
6. Your entire workspace will be shared with collaborators automatically

Joining a Session (Editor/Viewer)

1. IMPORTANT: Open an empty folder first (File → Open Folder) where files will be synced
2. Click Syncode icon in sidebar
3. Click "Join Session"
4. Paste the full invite link (or just the code)
5. Enter your name
6. Wait for workspace sync to complete (you'll see progress notification)
7. All files will appear in your Explorer automatically

Managing Roles (Owner Only)

1. Click "Manage User Roles" in the Syncode panel
2. Select a user
3. Choose new role (Viewer or Editor)

Creating Snapshots

1. Click "Create Snapshot" in the Syncode panel
2. Enter a description (e.g., "Added login feature")
3. Snapshot is saved to version history

Restoring Previous Versions

1. Click "Show History" in the Syncode panel
2. Select a snapshot from the list
3. Content reverts to that version

🔧 Commands

Access these via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• Syncode: Start Collaboration - Begin a new session
• Syncode: Join Session - Join an existing session
• Syncode: Generate Invite Link - Create shareable invite
• Syncode: Manage User Roles - Change user permissions
• Syncode: Show Collaborators - View active users
• Syncode: Create Snapshot - Save current version
• Syncode: Show History - View and restore versions
• Syncode: Stop Collaboration - End current session

💡 Use Cases

Pair Programming

Work together on the same code in real-time, perfect for remote teams.

Code Reviews

Share your screen as a viewer - reviewers can see your code without accidentally editing.

Teaching & Mentoring

Instructors can demonstrate code while students follow along in real-time.

Remote Team Collaboration

Collaborate across time zones with automatic conflict resolution.

Live Debugging Sessions

Debug together - see exactly where your teammate is looking.

🛡️ Security & Privacy

• Role-Based Access: Strict permission enforcement
• Audit Logging: Track all user actions
• Session Isolation: Each session is completely separate
• Encrypted Communication: WSS support for production
• No Data Storage: Sessions are ephemeral

⚡ Performance

• Sub-300ms Latency: Changes appear almost instantly
• Efficient Sync: Only sends changes, not entire documents
• Optimized Network: Automatic compression for large files
• Scalable: Supports 3-4 concurrent users per session

🐛 Troubleshooting

"Cannot share workspace: Please open a folder"

• The owner must have a folder open (File → Open Folder)
• Individual files cannot be shared - you need a workspace folder
• Close VS Code and reopen with a folder

"Failed to connect to server"

• Ensure WebSocket server is running on port 8081
• Check firewall settings
• Verify server URL is correct

"Workspace sync taking too long"

• Large projects (>1000 files) may take longer
• Check your internet connection speed
• You can cancel and rejoin if needed

"Files not appearing in Explorer"

• Wait for "Workspace synced successfully" notification
• Refresh Explorer (right-click → Refresh)
• Check if you have a folder open (not just individual files)

"Viewer role is read-only"

• This is expected - viewers cannot edit
• Ask the owner to change your role to Editor

"Changes not syncing"

• Check your internet connection
• Verify WebSocket server is running
• Try reconnecting (Stop → Start Collaboration)

"Invite link not working"

• Ensure you're pasting the complete link
• Links expire after 24 hours
• Ask owner to generate a new invite

🙏 Acknowledgments

Built with:

• Yjs - CRDT framework
• ws - WebSocket library
• TypeScript & VS Code Extension API

Enjoy collaborative coding with Syncode! 🚀

If you find this extension helpful, please leave a review on the marketplace.