Collaborative Spreadsheet with YJS

https://github.com/yjs/yjs

YJS provides a CRDT datastructure to collaborate between users

You will still need to save data in the database. YJS does not persist data in your custom MySQL or NoSQL databases

Setup

Run a yjs server locally

HOST=localhost PORT=1234 npx y-websocket

import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state";
import { useYSpreadsheet } from "@rowsncolumns/spreadsheet-yjs";
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

const version = "v4";
const yDoc = new Y.Doc();
const yWebsocketProvider = new WebsocketProvider(
  "ws://localhost:1234",
  `y-spreadsheet-${version}`,
  yDoc,
  {
    connect: true,
  }
);

// Setup local state
const [sheets, onChangeSheets] = useState<Sheet[]>(mockSheets);
const [sheetData, onChangeSheetData] =
  useState<SheetData<CellData>>(mockSheetData);
const [tables, onChangeTables] = useState<TableView[]>(mockTables);

// Setup spreadsheet hook
const { enqueueCalculation, activeSheetId, ... } = useSpreadsheetState({
  onChangeHistory(patch, type) {
    onBroadcastPatch(patch, type);
  },
})


// Setup YJS
const { users, onBroadcastPatch } = useYSpreadsheet({
  provider: yWebsocketProvider,
  doc: yDoc,
  onChangeSheetData,
  onChangeSheets,
  onChangeTables,
  enqueueCalculation(operation) {
    enqueueCalculation(operation);
  },
  sheetId: activeSheetId,
  activeCell,

  // User info
  userId,
  title: `User ${String(userId).slice(0, 5)}`,
});


return (
  <CanvasGrid
    userId={userId}
    users={users}
  >
)