The documents did converge but we have another problem! Both users ended up with an “T” instead of a “AT”, which neither of them wanted. Duplicate deletion operations are not idempotent. Let’s try another example where the users simultaneously decide they want to delete the “H” from “HAT” to get a “AT”.

Subtraction, however, is not commutative because A - B != B - A. For example, addition is commutative because A + B = B + A. Commutativity occurs when operations applied in different orders produce the same result. For non-mathematicians like ourselves, let’s review what commutativity means. In mathematical terms, the operations did not commute. The reason that the users’ document didn’t converge is because the insert and delete operations were applied in different orders.

This example demonstrates one of the primary challenges with building a collaborative text editor - getting all users to converge to the same document state. In this particular example, their documents did not converge to the same state. Oh no! One user has a “HAT” and the other user has a “CAT”. Simultaneous insertion and deletion produce different results. After performing their respective operations, each user will send a message to the other user informing them about the operation. This time, however, we’ll have one user perform the insertion and the other user perform the deletion. Now let’s try inserting a “C” and deleting the “H” as we did with our simple text editor. Two users connected through a central relay server. We’ll introduce a Central Relay Server to facilitate this communication. Next, we need a way for users to inform other users of edits they made to the document. Note: An example of a non-real-time collaborative editor is a version control system like Git. Remember, we’re aiming for “real-time” we want users to be able to apply their edits immediately as if they were using a simple text editor. One user editing a document seems simple, but what if we want multiple users simultaneously editing the same document? How would that work?įirst, we’ll need to provide each user with a local copy of document and allow them to make edits. What is a real-time collaborative text editor? The character positions may shift as surrounding characters are inserted or deleted. Now to delete the “H”, the operation is delete(1).

This insertion results in the remaining positions being shifted (or incremented) by 1. To insert a “C” at the beginning of the text, the operation is insert('C', 0). For example, with the text “HAT”, the first character has a value “H” and a position of 0, “A” has position 1, and “T” has position 2.Ī character can be inserted or deleted from the text simply by referencing a positional index. Each character has a value and a numerical index that determines its position in the document. A text editor is a space where you can insert or delete text characters and then save the resulting text to a file. How will users send messages directly to each other?įirst, let’s start by reviewing what we mean by text editor.Conflict-Free Replicated Data Type (CRDT).What is a real-time collaborative text editor?.Please note that Conclave works best in Google Chrome This case study walks you through our journey from the initial idea to our research of current academic literature and finally to our design and implementation of the final product. Intrigued by collaborative text editors such as Google Docs, we set out to build our own. Conclave is a peer-to-peer, real-time, collaborative text editor built from scratch in JavaScript.

Collaborative document editor