valtio-yjs makes yjs state easy
npm install valtio-yjs



valtio-yjs makes yjs state easy
valtio is
a proxy state library for ReactJS and VanillaJS.
yjs is
an implementation of CRDT algorithm
(which allows to merge client data without server coordination).
valtio-yjs is a two-way binding to bridge them.
It started as an experiment, and the experiment is finished.
Now, it's in alpha.
We encourage developers to try it in non-trivial apps, and find bugs.
``bash`
yarn add valtio-yjs valtio yjs
`js
import * as Y from 'yjs';
import { proxy } from 'valtio';
import { bind } from 'valtio-yjs';
// create a new Y doc
const ydoc = new Y.Doc();
// create a Y map
const ymap = ydoc.getMap('mymap');
// create a valtio state
const state = proxy({});
// bind them
const unbind = bind(state, ymap);
// now you can mutate the state
state.text = 'hello';
// you can nest objects
state.obj = { count: 0 };
// and mutate the nested object value
++state.obj.count;
// you can use arrays too
state.arr = [1, 2, 3];
// mutating the array is also possible
state.arr.push(4);
// unbind them by calling the result
unbind();
`
Using useSnapshot in valtio andWebsocketProvider` in y-websocket,
we can create multi-client React apps pretty easily.