Playground

Real-time collaborative editor demo

Getting started

Pick an article from the sidebar to open a collaborative editor. Open the same article in a second tab to see edits sync between sessions.

Classic Provider

/articles/1

Imperative API. Create CollabApiProviderWebsocket manually and share via React context.

React Provider

/react-provider/1

Declarative components and hooks. Wrap with CollabApiRoom, read state via useCollabApi* hooks.

Endpoints

Frontend
http://127.0.0.1:3000
WebSocket
ws://127.0.0.1:8080
HTTP
http://127.0.0.1:8080