# Yjs (CRDT) Collaboration

There are two ways we can use yjs collaboration

1. Sending patches to yjs document and synchorizing these patches between users
2. Saving the entire data, like sheetData, sheets in yjs document. More performance and easy to restore an entire document

You can install Yjs hook as a separate module

{% tabs %}
{% tab title="yarn" %}

```sh
yarn add "@rowsncolumns/y-spreadsheet"
```

{% endtab %}

{% tab title="npm" %}

```sh
npm install "@rowsncolumns/y-spreadsheet"
```

{% endtab %}
{% endtabs %}

## Initializing Yjs

This hook uses `WebSocketProvider` from Yjs to initialize a connection to one of the demo servers `wss://demos.yjs.dev`

{% hint style="info" %}
The default provider can be easily switched to WebRTCProvider, but as of right now, WebRTC does not support `synced` events.
{% endhint %}

### Running yjs locally

```
HOST=localhost PORT=1234 npx y-websocket
```

```tsx
import {
  SheetData,
  useSpreadsheetState,
} from "@rowsncolumns/spreadsheet-state";

// Option 1
import { useYSpreadsheet } from "@rowsncolumns/yjs-spreadsheet"

// Option 2, Same API
import { useYSpreadsheetV2 } from "@rowsncolumns/yjs-spreadsheet"

import { SpreadsheetProvider, CanvasGrid } from '@rowsncolumns/spreadsheet'

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

const MySpreadsheet = () => {
  const userId = 'foobar'
  const name = 'foobar'
  const [sheets, onChangeSheets] = useState<Sheet[]>([]);
  const [sheetData, onChangeSheetData] = useState<SheetData<CellData>>({});
  const [tables, onChangeTables] = useState<TableView[]>([]);
  
  const { activeCell, activeSheetId enqueueCalculation, ... } = useSpreadsheetState({
    ....,
    onChangeHistory(patches) {
      onBroadcastPatch(patches);
    },
  })
  
  // Add Yjs hook
  const { users, onBroadcastPatch } = useYSpreadsheet({
    provider: yWebsocketProvider,
    doc: yDoc,
    // Stable document scope for awareness/leader election
    awarenessScopeId: `y-spreadsheet-${version}`,
    onChangeSheetData,
    onChangeSheets,
    onChangeTables,
    enqueueCalculation,
    sheetId: activeSheetId,
    activeCell,

    // User info
    userId,
    title: name,
  });


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

}

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
)
```

## Import excel file and applying updates to yjs


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/collaboration/yjs-collaboration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.