VS Code Extension for Education

Real-Time Collaborative
Web Development

A teacher opens a session, students join and see code, preview, and cursor positions in real time — like CodeTogether + Live Server + Figma, all inside VS Code.

index.html — WebSync Live Session
ABC123 3 connected
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>My Website</title> Teacher
5 </head>
6 <body>
7 <h1>Hello World</h1> Alice
8 <p>Welcome!</p>
9 <!-- Add nav here --> Bob: "Should this be a <nav>?"
10 </body>
11 </html>

Everything you need for
collaborative teaching

A complete toolkit for real-time code sharing, collaboration, and live preview — all without leaving VS Code.

Live Session

Host creates a session with a unique code. Students join instantly — no setup, no accounts, just a code and a URL.

File Sync

All workspace files synced from host to students instantly.

Incremental Edits

Only changed ranges are sent — no cursor jumps, no lag.

Navigation Sync

Host switches file — students' editors follow automatically.

Collaborative Cursors

Figma-style colored cursors with names for all participants.

Code Comments

Add inline comments on any line, visible to everyone.

Live Preview

Built-in iframe preview with live reload on every save. See your HTML, CSS, and JavaScript changes reflected instantly without switching windows.

Role System

Host, Admin, Editor, Viewer — each with specific permissions.

ngrok Tunnel

Share sessions over the internet with one click.

0
Core Features
0
Permission Roles
0
Lines of Code
0
Open Source

Simple setup,
powerful collaboration

01

Create Session

Teacher enters a display name and clicks Create Session. The server starts automatically on localhost:3000 and generates a unique session code.

02

Students Join

Students enter the session code and server URL, click Join Session. All workspace files are synced automatically — no setup needed.

03

Code Together

Every keystroke, cursor move, and file switch is synced in real time. The built-in live preview shows the rendered page instantly.

Architecture

VS Code Extension index.js · 1,728 lines
UI Webview Sidebar Panel
Express + WS Port 3000
ngrok Tunnel Internet Sharing
HOST Teacher
VIEWER Student 1
EDITOR Student 2

Fine-grained
role system

Control who can edit, comment, manage roles, and kick users. All permissions enforced server-side.

HOST

Host

Session creator with full control.

  • Edit Files
  • Add Comments
  • Change Roles
  • Kick Users
ADMIN

Admin

Trusted assistant with elevated permissions.

  • Edit Files
  • Add Comments
  • Change Roles (editors/viewers)
  • Kick Users
EDITOR

Editor

Can contribute code and comments.

  • Edit Files
  • Add Comments
  • Change Roles
  • Kick Users
VIEWER

Viewer

Read-only access for observation.

  • Edit Files
  • Add Comments
  • Change Roles
  • Kick Users

Up and running
in 3 minutes

1

Install from VS Code Marketplace

Search for "WebSync Live" in the Extensions tab, or install directly:

Open in Marketplace
ext install MazyLawzey.websync-live
2

Open the Sidebar

Click the WebSync Live icon in the Activity Bar (left side of VS Code).

3

Create or Join a Session

Enter your display name, click Create Session to host, or enter a session code to Join. That's it!

Share Over the Internet

Behind a NAT or firewall? Use ngrok to share your session globally. Get a free auth token, click Share, and paste it. Students get a public URL to join from anywhere.

Where we're
headed next

We're just getting started. WebSync Live will keep evolving — and our growth depends entirely on you, our users.

Done

Public Release

Extension published on VS Code Marketplace — free and open source for everyone.

Done

Real-time Collaborative Cursors

Figma-style colored cursors with names, selection highlighting, and live position tracking.

In Progress

Cloud Servers

Our own managed servers so you don't need to self-host. Create a session, get a link — students join from anywhere without ngrok or port forwarding.

Planned

Persistent Sessions

Save and restore session state — reconnect without losing progress, even after VS Code restarts.

Planned

Localization

Full multi-language support for the extension UI — starting with English and Russian, with more languages to follow based on community demand.

Planned

Built-in Chat & Voice

Communicate with your students directly inside VS Code — no need for external apps.

Planned

End-to-End Encryption

JWT auth, encrypted WebSocket channels, and secure session management for production use.

Our growth depends on you

WebSync Live is built by a tiny team with a big vision. Every install, every star, every session created — it all matters. The more people use it, the faster we can develop new features, set up cloud infrastructure, and make collaborative coding accessible for every classroom in the world.

Ready to transform your
classroom experience?

Start using WebSync Live today — free, open source, and built for educators.