Awesome Open Source
Awesome Open Source

Slate JS Editor Operational Transform Example using ShareDB


Cursors are WIP, for testing please use

cd slate-operational-transform
npm install
npm start

And in another shell

cd slate-operational-transform/collab_editor 
yarn install
yarn start

Open two different browsers and navigate to localhost:3000, all changes in one browser should be mirrored in another.

Caveat Emptor

  • This is a demo, there are a lot of optimizations and features missing.
  • Invoking JSON0-ot-diff on every edit is not very efficient.
  • A better way would be to either manually annotate the various slate operations or to add a debounce of some sort. A debounce would trade off between granularity (important for good UX) versus performance. Of course there are other ways such as separate thread of computing operations using WebWorkers, or perhaps rewrite the core algorithm in WebAssembly. If you paste a large body of text there is a second or two of lag as diff function has to catch up. The holy grail would be to implement the transformation function using Slate's native Operation type. (there are 9 operations, but that takes a lot of time to build and debug so it is faster to piggy back off ShareDB unless you have a team of engineers willing to build a solution from ground up.)
  • Multi-cursors, presence, live chat etc. are left as an exercise to the reader.


Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,075,498
Diff (5,155
Debounce (702
Crdt (398
Collaborative Editing (195
Operational Transformation (95
Slatejs (44
Sharedb (19
Slate Editor (6
Operational Transform (5
Semilattices (3