9 Real-Time Code Collaboration Tools for Developers

Real-time code collaboration has been improving at a fast pace in recent years, impacting how developers work within teams touching the same code base. In this article we’ll dive into some of the best tools available today.

The Tools

I’ll bet my lunch money any developer has experienced moments in their career when they need to share code or gain some assistance when something is just not going their way. Typical scenarios may involve isolated demos, copy and pasting snippets into gists, or pushing code to a repository. 

The following tools (in no particular order) are a selection based on research, browsing over documentation, and with some; personal testing. While some tools listed will require a porting of code for the workflow, the majority allow developers to keep their code local without the big shuffle.

1. Atom

Teletype is a free and open source package created specifically for Atom. For those concerned with privacy, shared data flows over an encrypted peer-to-peer connection. Servers never see your files or edits, thus maintaining privacy and minimizing latency between you and your collaborators.

To install the Teletype package enter the following line from your terminal using the apm command:

 apm install teletype

You can also install Teletype from your package manager by entering “teletype” within the search bar. Once installed, follow this sequence of steps:

• Click the antenna icon in the Atom status bar located in the bottom right of the editor window.
• Authorize Teletype through GitHub.
• Choose Teletype from Atom’s package menu and select share portal.
• Copy the Portal ID provided in the bottom right of your editor window.
• Share the portal’s secret ID with collaborators via your preferred method.
• Collaborators enter your portal by clicking Join in the collaboration window once they’ve entered your unique portal ID.

After joining your portal, collaborators see a new tab in their workspace that lets them view and edit the contents of your active editor.  Everyone gets their own cursor, and everyone can type at the same time; but only the owner can save. For now, Teletype only transmits text, so it’s a good idea to combine it with an application for voice communication. Ultimately the creators hope to incorporate these kinds of features directly into the package along with a long list of other improvements.

• teletype.atom.io
• teletype on GitHub
• Code together in real time with Teletype for Atom
• Introducing Teletype for Atom: Code collaboratively in real time
• Teletype by Atom on YouTube Zachary R Newton

2. Brackets

This code editor by Adobe allows for the ability of real-time collaboration via an extension. To get started follow these steps:

• Open the folder containing your project.
• Press the sync icon on the right toolbar.
• Enter the same room ID.
• Click the sync button again to leave the room, join the voice call, or fetch code.

Brackets doesn’t allow for microphone access by default, but you can enable voice calls by launching brackets with the following command from your terminal:

brackets --args --enable-media-stream

The extension points to an author’s server by default, and no code is sent through another  server as long as your version of Brackets supports WebRTC (most do).

• http://brackets.io
• multihack-brackets on GitHub
• multihack.github.io (web version)

• 
  Brackets
  Introduction to Brackets
  Craig Campbell

3. Coda

Die hard Coda users might be unaware that there’s a real-time file sharing feature already included. Originally developed by Coding Monkeys, this file sharing feature has lived within Coda quietly since version 1. It allows two or more users to share files over a LAN, or with any remote user through your computer’s IP address, or a special “Sharing URL” to connect a remote user to your file. This allows multiple users to work on the same file simultaneously in real-time.

To start, this real-time feature will require users to select the file sharing option from their system preferences menu. Once completed:

• Select the file you wish to share.
• Click Share followed by the Bonjour button at the bottom of your editor window.
• Copy the share url from Coda’s menu > file.
• The remote user will click the provided link (with Coda open) and your file automatically opens in their application.

• coda homepage
• Coda’s Unsung Feature

4. SublimeText

Remote Collab is an open-source SublimeText plugin for remote pair programming, allowing multiple developers to work together on the same project in real-time. It can be installed through Package Control and found under RemoteCollab.

1. Open the file you wish to collaboratively edit.
2. Open Command Palette using menu item Tools > Command Palette.
3. Choose Remote: Host Session.
4. Give your IP address to the remote colleague.
5. Open the Command Palette using Sublime’s menu item Tools > Command Palette.
6. Choose Remote: Connect to Session.
7. Enter the IP address of the host whose session you wish to connect to.
8. You’re now collaboratively editing a document with the host.

• RemoteCollab (free/OS)
• remote-sublime (free/OS)
• floobits (paid)
• floobits-sublime on GitHub (paid)

5. CodePen

If you’re a pro on CodePen then you’ll already know that you have access to “Collab Mode” allowing more than one person to edit a Pen at the same time. When you open Collab Mode, the URL for your Pen will change in your browser’s address bar. Copy this provided collab URL and share it with the people you desire to collaborate with.

Cloud-based tools like CodePen require developers to move parts or entire pieces of their workflow into a hosted environment. Collab comes with a chat feature as well, allowing communication between one another during your session. Each time someone types there is a notification indicated as a green border on the bottom of the chat button. Collaborators can edit and type at the same time, however collaborators cannot save, but can fork and heart. Collaborators can even add external files, and edit settings–but not descriptions.

Depending on your plan you’ll be limited to the amount of collaborators that can be invited, and only the owner of the pen needs a pro subscription; everybody else can have free accounts, or be anonymous. If you’re collaborating on a public pen and want to save the progress, you can click the Fork button to save the exact state at that time of your current progress. A great tool for simple scenarios when working on initial prototypes, demos or even coding interviews is a must.

• codepen.io
• Collab Mode on CodePen blog
• Collab Session on Vimeo

6. Codeshare

Codeshare is a web app service that is very simplistic in its goals. It still requires code to be ported over to its service from your local environment, but it also gives you the ability to talk over video. This can be used for different types of scenarios like code reviews, internal hiring interviews, and learning while still offering the ability to debug code with peers. 

Sharing code is free, but only remains saved for 24 hours unless you login to create an account giving you the ability to save your progress.

• codeshare.io

7. Visual Studio

Visual Studio is an editor by Microsoft that’s had a pretty hot run since its release. It’s also working on an extension for real-time collaboration with other Visual Studio users called “Live Share”. Live Share allows you to share the context of the code, so you get instant, bi-directional collaboration.

At this time of this writing, Live Share isn’t available to the public, but I was lucky enough to get a tour by one of its developers David Khourshid.

To begin using Live Share you’ll need an extension installed and signed in with a Microsoft account, or authorized using your GitHub account. The inviter will then send a link that reopens your editor on the collaborator’s end with the Live Share session, giving collaborators the ability to view the entire project files from the editors file pane.

Here are some observations made during my preview:

• Icon in bottom lets you find the file the person is editing.
• Can share a local server through a port by opening up the command palette, and look for Live Share Local Servers.
• Both sides can save the file being worked on.
• Node projects can accomplish tasks such as live debugging.

I’m currently an Atom user, but I was thoroughly impressed after my tour of the capabilities Live Share brings to Visual Studio. If you’re a Visual Studio user, I’m happy to say you’re in for a very big treat.

• code.visualstudio.com
• Introducing Visual Studio Live Share
• VS Code: Showcasing The Power of Real Time Collaboration (and Other Cool Features) on YouTube
• Introducing Visual Studio Live Share video

8. Slack

I was floored when I first experienced the power of Screenhero (now integrated into Slack) that allows users to control your machine remotely.

Once the video call is initiated collaborators can walk through issues such as debugging while controlling your machine remotely. This feature is part of any paid plan, but not available for free accounts.

• slack.com
• Share your screen with Slack Calls
• Screen Hero for Remote Pair Programming screen sharing on YouTube

9. Codeanywhere

This code editor is built with collaboration in mind, providing a built-in terminal console for tasks such as ssh, ftp/sftp allowing developers to code from anywhere on any platform. 

With Codeshare remote collaboration is as easy as sending a share link to a collaborator. Participants that click on this share link will get a preview on Codanywhere’s website, and each share can have its own unique permissions. You can share entire projects, files, or folders with any other developer anywhere in the world. Click on your fellow collaborator’s icon while pair programming and scroll to their current cursor position. Pair program with one or as many collaborators you want; there is no limit.

• codeanywhere.com
• Codeanywhere pricing
• Codeanywhere docs 

Parting Thoughts

There are certainly plenty of options available today for multiple developers to work efficiently with one another. Have you used any of the tools mentioned above? What worked and what didn’t? Did you experience any idiosyncrasies during your experience or tips that you’d like to share? Let us know in the comments below and happy coding!