Skip to main content
CRDT (Yjs) based collaborative editing. This feature is useful for building collaborative features like shared forms, whiteboards, or any real-time state that needs to be synced across all users.

​
What you can build

  • Collaborative text editing: rich text editors, notes, documents
  • Visual collaboration: whiteboards, diagrams, flow editors
  • Shared app state: forms, lists, dashboards synchronized across users

​
Packages at a glance

  • Core library (@veltdev/crdt): Framework-agnostic CRDT stores (array, map, text, xml), versioning, subscriptions, and syncing via the Velt client. See setup: Core.
  • React Hook Wrapper (@veltdev/crdt-react): A typed React hook for creating and consuming CRDT stores with minimal boilerplate. See setup: Core.
  • Editor integrations:
    • Tiptap: Collaborative text editing with cursors and history. See setup: Tiptap.
    • ReactFlow: Collaborative node/edge graphs. See setup: ReactFlow.
    • CodeMirror: Collaborative code editing. See setup: CodeMirror.
    • BlockNote: Collaborative block-based editor. See setup: BlockNote.

​
Why Velt CRDT

  • Conflict‑free sync: Yjs ensures eventual consistency without merge conflicts.
  • Low latency, offline‑first: Local writes with automatic re‑sync when back online.
  • Batteries included: Version history, subscriptions, presence, and editor integrations.
  • Use anywhere: Core library for any framework; React Hook wrapper for the fastest React integration.

​
Key capabilities

  • Low latency: Optimized for snappy, real-time updates.
  • Offline-first: Local-first reads/writes with automatic re-sync when back online.
  • Conflict-free: Yjs CRDT ensures eventual consistency without merge conflicts.
  • Multi-tab support: Same user can edit in multiple tabs simultaneously with full synchronization.
  • Version history: Create checkpoints and restore prior states when needed.
  • Framework agnostic: Use anywhere; React hook available for faster integration.

​
How it works

  • You initialize the Velt client in your app.
  • You create a CRDT store (core or via the React hook) with a unique id and a data type.
  • Components subscribe to the store to render the latest value and push updates.
  • Yjs merges concurrent edits; Velt handles synchronization between connected clients.

​
Choose your path

​
Try it yourself!

Open in larger window