Velt Ace CRDT React Library

Add real-time collaborative editing to React applications that use Ace. This package wraps @veltdev/ace-crdt with React lifecycle APIs for react-ace, Velt auth readiness, selection awareness, versions, persistence, and cleanup.

Installation

npm install @veltdev/ace-crdt-react @veltdev/ace-crdt react-ace ace-builds @veltdev/react @veltdev/types

Features

• useCollaboration hook for binding an Ace editor to a Velt CRDT text Store
• AceCrdtEditor drop-in component around react-ace
• AceCrdtProvider context for sharing hook state (with the useCollaborationContext accessor)
• Multi-user text editing with Y.Text conflict handling delegated to @veltdev/ace-crdt
• Remote cursors, selections, and highlight markers through Ace markers
• Undo/redo through the base Yjs UndoManager
• Version save/list/restore helpers
• Persistence, offline reconnect, and force reset support

Quick Start

import { VeltProvider } from '@veltdev/react';
import { AceCrdtEditor } from '@veltdev/ace-crdt-react';

export function App() {
  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <AceCrdtEditor
        documentId="shared-code"
        initialContent="console.log('hello');"
        onManagerReady={(manager) => manager.flushEditorToStore('ready')}
      />
    </VeltProvider>
  );
}

Hook API

Use useCollaboration when your application creates the Ace editor itself.

const collaboration = useCollaboration({
  editorId: 'shared-code',
  editor,
  initialContent: 'const value = 1;',
});

The hook returns the base manager, Ace editor, Yjs/Velt primitives, current value, connection state, remote selections, stats, versions, and delegated helpers such as setValue, insertText, flushEditorToStore, forceReset, addHighlight, saveVersion, restoreVersion, undo, and redo.

Component API

AceCrdtEditor accepts normal react-ace props plus collaboration props including documentId, veltClient, initialContent, cursorData, rangeFactory, debounceMs, enabled, onEditorReady, onManagerReady, and onStatusChange.

Documentation

See the package repository for the full integration guide, demo, test plan, known issues, and generation report.

Security

Velt is SOC 2 Type 2 and HIPAA compliant. Learn more at https://velt.dev/security.