Real Time Code Sharing

Editing code in Emacs and streaming it to a webpage

Remote collaborators looking to debug or share code might typically do so using screen sharing. This method is reasonably low friction as the collaborators are already using the video conferencing software. It also suffers from a number of drawbacks:

  1. Screen sharing with high enough fidelity to show code inside of an IDE requires that all participants have quite good internet.
  2. Viewers are not free to navigate and are at the mercy of how the other end of the call scrolls.
  3. Viewers can not copy and paste the code that is being shared.

An alternative to screen sharing

Noah and I put together chmod4. chmod4 is composed of a number of text editor extensions and a web server. Once the chmod4 extension is installed text editors can start a “mirroring session” which is a public link at which their code is visible as they work on it.

The link can be shared to allow others to view the code as it is worked on. The mirror link will follow the creator’s cursor by default but other users are welcome to explore the document being edited as they see fit by turning off “Follow cursor”.

Video demo

The video below demonstrates starting a mirroring session from Emacs and editing the source for this article.

How this solves problems

  1. Text streaming does not require a particularly good internet connection.
  2. Viewers are not locked in to seeing the section of the screen the presenter is currently focused on.
  3. Code can be copied and manipulated as the viewer sees fit using the browser’s builtin copy and paste facilities.

Using this yourself

There are instructions for configuring chmod4 for Emacs, Sublime Text, and Visual Studio Code on mirror.chmod4.com. If those directions are hard to follow it is a bug and we’d really appreciate your feedback.

How does this work

The source code for this project is freely available here under the terms of the 3-Clause BSD license. At a high level it works by creating a websocket connection between the editor and our server. The editor sends the entire contents of the current buffer over the connection on every modification.

Clients connect to our server also via websockets and pull down the buffer contents. Syntax highlighting is done on the client side.

This sounds like it would be shockingly inefficient but as it turns out text is actually extremely lightweight when compared to frames in a video. The output is very close to real time. I’d encourage you to give this a shot yourself if you’re skeptical.