@veltdev/codemirror-crdt-react

Velt CodeMirror CRDT React Library

With Velt CodeMirror CRDT React Library, you can add powerful multiplayer code editing and state synchronization features to your React application extremely fast.

The library provides custom React hooks:

• A powerful hook to make any CodeMirror instance collaborative in minutes
• Fully-managed on a scalable realtime backend
• Powered by Yjs for industry-standard conflict resolution

Features include:

• Multiplayer Code Editing with real-time character-by-character synchronization
• Realtime Presence to see other users' cursors and selections
• Conflict Resolution ensuring data consistency across all clients
• Offline Support with automatic synchronization upon reconnection
• Custom Styling for remote cursors and selection highlights
• React Ecosystem Support (Next.js, Remix, Vite, etc.)
• ... and so much more

Installation

npm install @veltdev/codemirror-crdt-react @veltdev/react

Documentation

• Read the documentation for setup guides and API references.

Use cases

The CodeMirror CRDT library is used to power:

• Cloud IDEs and playgrounds
• Technical interview platforms
• Collaborative query editors (SQL, GraphQL)
• Shared configuration or JSON editors
• Educational coding tools
• Any shared, mutable code environment

Resources

• Explore multiplayer editing to see features like collaborative text, whiteboards, and data grids.
• Sample Apps: Check out example implementations for various use cases.

Releases

• See the latest changes.

Security

• Velt is SOC2 Type 2 and HIPAA compliant. Learn more

Community

• X: To receive updates, announcements, and general Velt tips.