WebSync Live
WebSync Live is a VS Code extension for collaborative web development in education.
A teacher creates a session, students join with a code and see code, preview, and cursor positions in real time.
Features
- Live Session — Host creates a session, students join with a code
- File Sync — All workspace files are synced from host to students instantly
- Incremental Edits — Only changed ranges are sent, no cursor jumps
- Collaborative Cursors — Colored cursors with names for all participants
- Code Comments — Add inline comments on any line, visible to everyone
- Live Preview — Built-in preview with live reload on every save
- Role System — Host, Admin, Editor, Viewer — each with different permissions
Roles
| Role |
Edit Files |
Add Comments |
Change Roles |
Kick Users |
| Host |
Yes |
Yes |
Yes |
Yes |
| Admin |
Yes |
Yes |
Yes (editors/viewers) |
Yes |
| Editor |
Yes |
Yes |
No |
No |
| Viewer |
No |
No |
No |
No |
Getting Started
- Install the extension
- Click the WebSync Live icon in the Activity Bar
- Enter your display name
- Click Create Session to host or Join Session to connect
Commands
| Command |
Description |
| Websync Live: Open Preview |
Open preview in a panel |
| Websync Live: Start Server |
Start the local server |
| Websync Live: Create Session |
Create a new session |
| Websync Live: Join Session |
Join with a code |
| Websync Live: Add Comment |
Add comment on current line |
| Websync Live: Disconnect |
Leave the session |
Authors
License
GPL-3.0
| |
