Vizel API / svelte/src / createVizelCollaboration

Function: createVizelCollaboration()

function createVizelCollaboration(getProvider, options?): CreateVizelCollaborationResult;

Defined in: packages/svelte/src/runes/createVizelCollaboration.svelte.ts:73

Rune for tracking real-time collaboration state with a Yjs provider.

This rune manages event listeners on the provider to track connection status, sync state, and peer count. It does NOT create the Yjs document or provider — users must create those themselves and pass them in.

Parameters

Parameter	Type	Description
getProvider	() => | VizelYjsProvider | null | undefined	Function that returns the Yjs provider instance
options	VizelCollaborationOptions	Collaboration options including user info and callbacks

Returns

CreateVizelCollaborationResult

Collaboration state and controls

Example

<script lang="ts">
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import { createVizelEditor, createVizelCollaboration } from "@vizel/svelte";

const doc = new Y.Doc();
const provider = new WebsocketProvider("ws://localhost:1234", "my-doc", doc);

const collab = createVizelCollaboration(
  () => provider,
  { user: { name: "Alice", color: "#ff0000" } }
);

const editor = createVizelEditor({
  features: { collaboration: { provider: true } },
  extensions: [
    Collaboration.configure({ document: doc }),
    CollaborationCursor.configure({
      provider,
      user: { name: "Alice", color: "#ff0000" },
    }),
  ],
});
</script>

<p>{collab.isConnected ? "Connected" : "Disconnected"} ({collab.peerCount} peers)</p>