📦 toeverything / blocksuite-examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32# React WebSocket Example

This example encapsulates the BlockSuite editor and doc collection in React, demonstrating document synchronization and storage with WebSocket.

### Development

```sh
git clone https://github.com/toeverything/blocksuite.git
cd blocksuite/examples

pnpm install
pnpm dev react-websocket
```

Here is how it works:

```
              ┌────────────┐
              │   Express  │ ◀──────┐
              │   Server   │        │ ydoc update
              └────────────┘        │ callback
                                    │
┌────────────┐             ┌─────────────┐           ┌────────────┐
│   Editor   │             │ Y-Websocket │           │  Document  │
│   Client   │◀───────────▶│   Backend   │ ─────────▶│  Storage   │
└────────────┘  ydoc room  └─────────────┘           └────────────┘
```

This WebSocket backend is provided by [y-websocket](https://github.com/yjs/y-websocket). Additionally, the yjs community also offers [y-redis](https://github.com/yjs/y-redis), an alternative WebSocket backend with authentication. You can check out the [example](https://github.com/yjs/y-redis/tree/master/demos/blocksuite) of BlockSuite in the y-redis repository.

This project is created using the `pnpm create vite-express` cli.