Velt Draft.js CRDT

Add Velt-powered realtime collaboration to an existing Draft.js editor.

Install

npm install @veltdev/draftjs-crdt @veltdev/crdt @veltdev/client draft-js immutable yjs y-protocols react

Using the React hook? Also install the Velt React SDK.

npm install @veltdev/react

Usage (vanilla manager)

Create a CollaborationManager, pass your controlled Draft.js editor state accessors, and call manager.handleChange(nextState) from Draft's onChange.

import { createCollaboration } from '@veltdev/draftjs-crdt';

const manager = await createCollaboration({
  editorId: 'document-1',
  veltClient,
  getEditorState: () => editorState,
  setEditorState,
  initialContent: 'Hello Draft.js CRDT!',
});

The manager exposes the Velt CRDT Store, SyncProvider, Yjs document, XML fragment, awareness, undo manager, status subscriptions, version APIs, and cleanup.

React hook

useCollaboration (alias useDraftJsCollaboration) wraps the manager with Velt-context gating and lifecycle cleanup. Draft.js is a controlled editor, so pass your state accessors and route every onChange state through the returned handleChange.

import { useState } from 'react';
import { Editor, EditorState } from 'draft-js';
import { useCollaboration } from '@veltdev/draftjs-crdt';

function CollaborativeEditor() {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  const { handleChange, isLoading, status } = useCollaboration({
    editorId: 'my-document-id',
    getEditorState: () => editorState,
    setEditorState,
    initialContent: 'Hello Draft.js CRDT!',
  });

  return (
    <Editor
      editorState={editorState}
      onChange={(next) => setEditorState(handleChange(next))}
    />
  );
}

The hook returns handleChange, manager, isLoading, synced, isSynced, status, error, versions, saveVersion, restoreVersion, refreshVersions, and destroy. It initializes after the Velt client (from @veltdev/react context, or an optional veltClient config override) is ready and a user is identified, and it destroys the manager on unmount or editorId change.

Initialize Velt with your own key, for example initVelt('YOUR_API_KEY'), before mounting collaborative editors.