Skip to main content

​
Overview

Broadcast mode lets you share your LiveCodes session in real-time with viewers:
  • Live coding - Viewers see your code as you type
  • Real-time updates - Changes appear instantly
  • One-to-many - Broadcast to unlimited viewers
  • No setup - Works in any browser
Perfect for:
  • Live coding tutorials
  • Workshops and training
  • Pair programming demos
  • Code reviews
  • Teaching and presentations

​
Starting a Broadcast

1

Open Broadcast

Click Menu → Broadcast
2

Configure Server

Enter broadcast server URL (or use default)
3

Choose Options

  • Broadcast source code: Share original code or compiled output
4

Start Broadcasting

Click “Broadcast” button
5

Share URL

Copy the generated viewer URL and share with your audience:
https://livecodes.io?channel=abc123xyz
The broadcast channel URL is automatically generated and unique to your session.

​
Broadcast Options

​
Source Code Broadcast

Viewers see your source code:
  • Original markup, style, script
  • Can edit and experiment
  • Full interactive playground
// Viewers see TypeScript source
const greeting: string = 'Hello';
console.log(greeting);

​
Server Configuration

Default server: LiveCodes provides a free broadcast server Custom server: You can run your own broadcast server: 
https://your-server.com/broadcast
See the broadcast server repository to host your own.

​
Viewing a Broadcast

Join someone’s broadcast:
1

Get Channel URL

Broadcaster shares URL:
https://livecodes.io?channel=abc123xyz
2

Open URL

Click the link in your browser
3

Watch Live

See code changes in real-time

​
Viewer Experience

Viewers can:
  • Watch live coding - See every keystroke
  • View result - See the app running
  • Copy code - Copy snippets to their own playground
  • Fork project - Create their own copy to experiment
Viewers cannot edit the broadcaster’s code. They see a read-only view unless they fork the project.

​
Broadcast States

Not Broadcasting

Normal editing modePrivate session

Broadcasting

Live broadcast activeChanges sent to viewers

Viewing

Watching someone else’s broadcastRead-only mode

​
Broadcast Updates

What gets broadcast:
  • Markup edits
  • Style updates
  • Script modifications
  • Real-time as you type
Updates are sent efficiently using differential sync - only changes are transmitted.

​
Stopping a Broadcast

1

Open Broadcast Panel

Click Menu → Broadcast
2

Stop

Click “Stop Broadcast” button
3

Confirm

Broadcast ends, viewers can no longer see updates
Stopping the broadcast doesn’t close viewers’ tabs, but they won’t receive new updates.

​
Use Cases

​
Live Coding Tutorial

1

Prepare

  • Create starter template
  • Test your code
  • Set up screen sharing (optional)
2

Start Broadcast

  • Begin broadcast
  • Share viewer URL
  • Enable source code sharing
3

Teach

  • Code live while explaining
  • Students see changes in real-time
  • Take questions
4

Share Final Code

  • Export project
  • Share permanent URL
  • Students can fork and experiment

​
Workshop/Training

1. Create workshop project
2. Start broadcast at beginning of session
3. Code along with participants
4. Participants watch on their devices
5. Share final code for practice

​
Code Review

1. Import code to review
2. Start broadcast
3. Share with team
4. Walk through code while team watches
5. Make live suggestions and edits

​
Pair Programming Demo

1. One person broadcasts
2. Other person watches and provides feedback
3. Switch roles by starting new broadcast
4. Collaborative problem-solving

​
Best Practices

1

Test Before Going Live

  • Test broadcast with a friend first
  • Verify viewer URL works
  • Check that updates appear
2

Prepare Your Code

  • Start with working code
  • Have a plan for what to demonstrate
  • Keep external dependencies minimal
3

Communicate Clearly

  • Explain what you’re doing
  • Use voice chat or video alongside broadcast
  • Pause to let viewers catch up
4

Share Responsibly

  • Don’t broadcast sensitive code
  • Remove API keys before broadcasting
  • Be aware viewers can copy your code

​
Broadcast Server

​
Default Server

LiveCodes provides a free broadcast server:
  • No setup required
  • Globally distributed
  • No registration needed
  • Public channels
Public broadcast server is best-effort. For mission-critical broadcasts, consider running your own server.

​
Self-Hosted Server

Run your own broadcast server: 
# Clone broadcast server
git clone https://github.com/live-codes/broadcast

# Install and run
cd broadcast
npm install
npm start
Then configure LiveCodes to use your server: 
Server URL: https://your-server.com
Benefits:
  • Full control
  • Private channels
  • Custom authentication
  • Higher reliability
  • Better performance

​
Technical Details

​
How It Works

1

Broadcaster

  • Creates channel on broadcast server
  • Sends code changes via WebSocket
2

Server

  • Receives updates from broadcaster
  • Forwards to all connected viewers
  • Manages channel lifecycle
3

Viewers

  • Connect to channel via URL
  • Receive real-time updates
  • Render changes locally

​
Performance

  • Latency: ~100-500ms (depending on network)
  • Throughput: Handles 1000+ concurrent viewers
  • Bandwidth: Minimal (only diffs sent)

​
Security

  • Channels are temporary and ephemeral
  • No authentication required
  • Anyone with channel URL can view
  • Don’t broadcast sensitive code

​
Limitations

  • Channels expire after inactivity
  • No recording/playback (live only)
  • One-way communication (broadcaster to viewers)
  • Viewers cannot ask questions through broadcast (use chat alongside)

​
Troubleshooting

  • Check internet connection
  • Verify server URL is correct
  • Try default server
  • Check browser console for errors
  • Verify viewers have correct URL
  • Check broadcast is still active
  • Reload viewer page
  • Check network connectivity
  • Normal latency: 100-500ms
  • Check internet speed
  • Reduce typing speed slightly
  • Try self-hosted server closer to viewers
  • Ensure broadcast is active
  • Check URL was copied correctly
  • Try generating new channel

​
Alternatives

If broadcast mode doesn’t fit your needs:
  • Screen sharing: Use Zoom, Google Meet, etc.
  • Share URLs: Share project links for async viewing
  • Export & Share: Export code and share files
  • Embed: Embed playgrounds in your site