Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

SyncedStore CRDT

npm version Coverage Status

(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.

example app screencapture

  • 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 ❤️

SyncedStore builds directly on Yjs and Reactive. It's also inspired by and builds upon the amazing work by MobX and NX Observe.