SyncedStore CRDT

(This library was previously called "Reactive-CRDT")

SyncedStore is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of Yjs, a proven, high performance CRDT implementation.

Documentation

View the documentation with interactive code samples

https://yousefed.github.io/SyncedStore/

Example

Have a look at the collaborative Todo list examples (React, Vue) to get up to speed.

Open live demo: React or Vue (Of course, open multiple times to test multiplayer)
Edit / view on Codesandbox React / Vue

Source in: examples/todo-react and examples/todo-vue.

Motivation

Yjs is a very powerful CRDT, but it's API is mostly targeted to create high-performant data bindings for (rich text) editors.

I wanted to explore whether we can abstract the existing Yjs API away, and make it extremely easy to integrate it as a Collaborative Data Store into existing applications.

There were two major design decisions:

Instead of data types like Y.Map, and Y.Array, can we just use plain Javascript objects and arrays?
- e.g.: store.outer.inner.property = value instead of doc.getMap("inner").getMap("outer").getMap("inner").get("value")
Instead of having to call .observe manually, can we integrate with a Reactive Functional Programming library to do this automatically?
- e.g.: wrap your code in autorun or use useSyncedStore (React), or Vue's reactive model and automatically observe all used values from the store.

Would love to hear your feedback!

Credits ❤️