Multi-user editing with Y.js

Built on Y.js CRDTs. Connect to any Y.js-compatible WebSocket server -- no paid collaboration backend required.

CollaborationProvider

CollabEditor.tsx

import { CollaborationProvider } from "@/components/CollaborationProvider"
import { RemoteCursor } from "@/components/RemoteCursor"

function CollaborativeEditor() {
  return (
    <CollaborationProvider
      roomId="my-doc-123"
      serverUrl="wss://my-yjs-server.com"
      user={{ name: "Alice", color: "#ff0000" }}
    >
      <Editor />
      <RemoteCursor />
    </CollaborationProvider>
  )
}

useCollaboration hook

Presence.tsx

import { useCollaboration } from "@/hooks/useCollaboration"

function PresenceIndicator() {
  const { connectedUsers, isConnected } = useCollaboration()

  return (
    <div>
      {isConnected ? "Online" : "Offline"} -- {connectedUsers.length} users
    </div>
  )
}

--Uses Y.js CRDT -- free, open-source conflict resolution with no central authority.
--RemoteCursor renders each user's cursor and selection in real time with their assigned color.
--Works with y-websocket, Hocuspocus, or any Y.js-compatible server.
--Awareness protocol tracks user presence, cursor position, and connection status.

AI Integration

Block Types