Live View is a lightweight, real-time code synchronization and collaborative learning extension for VS Code. Designed to assist developers, mentors, and students, this extension allows you to share your active coding sessions with a peer, view cursor selections, and collaborate on code troubleshooting remotely. Real-time text chatging in current running session.
View Advanced Feature Demo
Features
Live Chat Window : User able to send text massage in current running session.
Dedicated Control Dashboard: Manage your entire session from a visual interface placed in your bottom panel alongside the Terminal and Debug Console.
Real-Time Code Sync: Replicates code updates dynamically with support for original file names, file extensions, and language syntax highlighting.
Follow Active Tab: Automatically updates the guest's view to match the active file tab the host is currently editing.
Live Cursor Tracking: Shows where your collaborator is looking or editing with a visible colored cursor tag.
Host Folder Browser: Allows the guest to search, browse, and request files from the host's active workspace folder.
Toggleable Edit Permissions: Gives the host control over write permissions. The host can enable or disable guest editing at any time with a visual confirmation on the dashboard.
How to Use
1. Install Live View Extension
Open Terminal
Go to Live View Panel (Beside of Ports)
2. For the Host (Sharing Code)
Open a workspace folder in VS Code containing the files you want to share.
Click on the Live View tab in your bottom panel container (next to your Terminal).
Click Start Hosting Session.
Enter a unique Session ID of your choice in the input box and press Enter.
Share your Session ID with your collaborator.
(Optional) Click Enable Guest Edits on the dashboard if you want your peer to be able to modify your code directly.
3. For the Guest (Viewing/Helping)
Open an empty instance of VS Code.
Click on the Live View tab in your bottom panel container.
Click Join Active Session.
Enter the Session ID provided by the host and press Enter.
Once connected, use the Browse Host Folder button on the dashboard to select and open any file from the host's directory.
Technical Architecture
Client: Developed using JavaScript and the VS Code Extension API. It implements custom webview panels, standard editor decoration API for cursor sharing, and a workspace event-driven architecture to coordinate document state.
Communication: Real-time messaging and synchronization are handled via persistent WebSockets over Socket.io.
Relay Server: Powered by a Node.js and Express backend deployed to a cloud server on Render.
Release Notes
1.0.0
Initial release of Live View.
Real-time file content, active tab, and cursor synchronization.
Visual control panel added to the bottom panel container.
Basic Host/Guest permission toggle model.
Integrated workspace directory explorer via standard Quick Pick interface.
