Kevin Jahns

docs.yjs.dev

Yjs Workshop
BOB 2025

Single User Applications

VSCode
LibreOffice
Inkscape

=> everything we do nowadays is collaborative

Web Applications

Wordpress
Drupal
..

Conflict Resolution: Last Writer Wins

Conflict Resolution: Duplication

Manual Conflict Resolution

Avoid Conflicts Through Coordination

Slack, Matrix
Only users assigned to a ticket may manipulate
WordPress Workflow: There is a dedicated person who writes content into WordPress

Realtime & Automatic Conflict Resolution

We can make anything collaborative..

Agenda

Yjs data types
Sync Yjs documents
Use Yjs extensions
collaborative react applications?

Goal: collaborative, local-first (note-taking, drawing, ..) app

git clone https://github.com/yjs/bob-2025

Yjs

observable data types
- Y.Map
- Y.Array
- Y.Text
- Y.Xml*
automatic conflict resolution
network agnostic

Shared Data Types

import * as Y from 'yjs'

const ydoc = new Y.Doc()

const ymap = ydoc.getMap('map')
// const yarray = ydoc.getArray('array')
// const ytext = ydoc.getText('text')
// const yxml = ydoc.getXmlElement('el')

ymap.observe(event => {
  console.log(event.changes.keys)
})

ymap.set('my key', 'new value') // => { "my key": { action: 'add', oldValue: undefined } }

Exercise:

Observe a Y.Array<number>
If it has more than 10 elements, delete the smallest element.

Bonus: build a counter CRDT

Yjs always syncs

Updates contain a SET of operations

ydoc1 => { op1, op2 }
ydoc2 => { op2, op3 }
merge(ydoc1, ydoc2) => { op1, op2, op3 }

Yjs always syncs

import * as Y from 'yjs'

const ydoc1 = new Y.Doc()
const ymap1 = ydoc1.getMap()
ymap1.set('a', 1)

const ydoc2 = new Y.Doc()
const ymap2 = ydoc2.getMap()
ymap2.set('b', 2)

Y.applyUpdate(ydoc2, Y.encodeStateAsUpdate(ydoc1))
Y.applyUpdate(ydoc1, Y.encodeStateAsUpdate(ydoc2))

console.log(ymap1.toJSON()) // => { a: 1, b: 2 }
console.log(ymap2.toJSON()) // => { a: 1, b: 2 }

Sync only the differences

import * as Y from 'yjs'

const ydoc1 = new Y.Doc()
const ymap1 = ydoc1.getMap()
ymap1.set('a', 1)

const ydoc2 = new Y.Doc()
const ymap2 = ydoc2.getMap()
ymap2.set('b', 2)

// Sync the differences from ydoc2 into ydoc1
// The state vector describes what ydoc1 contains
const syncStep1 = Y.encodeStateVector(ydoc1)
// Only encode the differences into a update message
const syncStep2 = Y.encodeStateAsUpdate(ydoc2, syncStep1)
// Apply the differences to ydoc1
Y.applyUpdate(ydoc1, syncStep2)

console.log(ymap1.toJSON()) // => { a: 1, b: 2 }

Exercise 2: Sync two Yjs documents

Create two Yjs documents
Listen to `update` events and apply the update on the other Yjs document.

=> Immediately continue with providers

Providers

y-websocket
y-indexeddb
y-webrtc

Exercise:

Add y-websocket to one of your documents from the previous exercise
Room name: "bob-2025"

Use inspect.yjs.dev

Use Bindings

y-quill setup

+ possibly set up indexeddb

React with SyncedStore

SyncedStore

import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { store } from "./store";

export default function App() {
  const state = useSyncedStore(store);

  return (
    <div>
      <p>Todo items:</p>
      <ul>
        {state.todos.map((todo, i) => (
          <li key={i} style={{ textDecoration: todo.completed ? "line-through" : "" }}>
            <label>
              <input type="checkbox" checked={todo.completed} onClick={() => (todo.completed = !todo.completed)} />
              {todo.title}
            </label>
          </li>
        ))}
      </ul>
      <input
        onKeyPress={(event) => {
          if (event.key === "Enter") {
            state.todos.push({ completed: false, title: event.target.value });
            target.value = "";
          }
        }}
      />
    </div>
  );
}