Article #3

React Provider

Two editors sharing a document via @collab-api/provider-react

Editor 1

Event handlers via props

Status

connectingsynced0 unsynced

Socket

Provider

Users

Editor 2

Event handlers via hook

Status

connectingsynced0 unsynced

Socket

Provider

Users

Each editor wraps in CollabApiProviderWebsocketComponent (independent WebSocket) and CollabApiRoom. State is read via useCollabApi*() hooks. Open the same slug in a second tab to see edits sync.