Y.js immer binding for easy plain json manipulation

Hi everyone, I have created a small library to bridge immer and y.js.

Please see immer-yjs and demo.

What is this (copied from readme)

immer is a library for easy immutable data manipulation using plain json structure. y.js is a CRDT library with mutation-based API. immer-yjs allows manipulating y.js data types with the api provided by immer.

Efficient update is enabled by generating a new snapshot while mutating the exact part changed in the previous one, nothing more, just like with immer. Any change comes from y.js is also reflected in the new snapshot in the least impact manner.

This library is very simple and small, just ~200 lines of code, no magic hidden behind.

Do:

update(state => {
    state.nested[0].key = {
        id: 123,
        p1: "a",
        p2: ["a", "b", "c"],
    }
})

Instead of:

Y.transact(doc, () => {
    const val = new Y.Map()
    val.set("id", 123)
    val.set("p1", "a")

    const arr = new Y.Array()
    arr.push(["a", "b", "c"])
    val.set("p2", arr)

    state.get("nested").get(0).set("key", val)
})
2 Likes

Awesome! Thank you so much for sharing :slight_smile:

1 Like