What is collaborative code editing?

Collaborative code editing lets several developers work on the same code at the same time, each in their own browser. It is useful for pair programming, interviews, teaching, and debugging a snippet together, without setting up a shared IDE or passing files around.

To keep everyone's copy identical, changes travel as small edits rather than whole files, and one server decides the order they apply in. Edits made at the same moment are adjusted to each other, so both survive.

Tool description

This tool is a shared JavaScript editor with syntax highlighting. Open it and send the link: everyone in the room edits the same code in real time, sees each other's cursors, and can validate or format the code for everyone with one click.

Validation checks the syntax with the Babel parser (ES modules and JSX included). Formatting uses Prettier, and the formatted code replaces only the lines that changed, so what others type in the meantime stays where it is.

Features

  • Real-time editing - changes from everyone appear instantly and are merged when people type at the same moment
  • Cursors and selections - see where each person is, in the color shown next to their name
  • Validate - checks the JavaScript syntax and shows the first error with its line and column
  • Format - reformats the code with Prettier for everyone in the room
  • Copy and download - keep a copy of the code as a .js file

How it works

When the page opens, it creates a room on the sync server and puts its link in the address bar. Everyone who opens the link joins the same room and sees the same document.

Every change is sent to the server as a small description of what changed - which characters were inserted or deleted where - instead of the whole text. The server puts changes from everyone in a single order, moves a change that was made on top of an older version past the ones that came first, and passes the result on to everyone else. Your own typing shows up right away, and changes from others are merged around it, so nobody's typing gets lost when two people edit at the same moment.

The document is kept in the server's memory only while the room is open. If you reload the page, you get back into the room with the text as it was; once everyone has left, the room and its text are gone.

Limitations

  • A room holds up to 20 people and 100,000 characters.
  • Nothing is stored after a room closes. Download the text before the last person leaves.
  • Very fast or very large changes, such as pasting the whole document many times in a row, are refused and the editor reloads the room's text.
  • Opening a room link in another of the collaborative editors (for example a SQL room in the JavaScript editor) shows "Room not found": each room belongs to one language.
  • Validation checks syntax only. The code is never run.