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.
    • SuperDoc React: Collaborative DOCX editing. See setup: SuperDoc.
    • Lexical React: Collaborative structured rich-text editing. See setup: Lexical.
    • Slate: Collaborative customizable rich-text editing. See setup: Slate.
    • Draft.js: Collaborative Draft.js content editing. See setup: Draft.js.
    • TinyMCE React: Collaborative HTML rich-text editing. See setup: TinyMCE.
    • Monaco React: Collaborative code editing with Monaco. See setup: Monaco.
    • ProseMirror React: Collaborative schema-driven rich-text editing. See setup: ProseMirror.
    • CKEditor React: Collaborative CKEditor content editing. See setup: CKEditor.
    • Apryse React: Collaborative PDF annotation review. See setup: Apryse.
    • SpreadJS React: Collaborative spreadsheet editing. See setup: SpreadJS.
    • Nutrient React: Collaborative document annotation review. See setup: Nutrient.
    • Ace React: Collaborative code editing with Ace. See setup: Ace.
    • Quill React: Collaborative rich-text editing with Quill. See setup: Quill.

​
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.

​
Version history

Every Velt CRDT store supports saving named snapshots and restoring the document to any previous version. This works for plain stores (array, map, text, xml) and for the editor integrations built on top of them (Tiptap, BlockNote, CodeMirror, ReactFlow). Core methods exposed on the store (or via useStore in React):
  • saveVersion(name) — save a named snapshot of the current state.
  • getVersions() — list all saved versions.
  • getVersionById(id) — fetch a specific version.
  • restoreVersion(id) — restore the document to a saved version.
  • setStateFromVersion(version) — apply a version’s state locally.
See full usage and examples in:

​
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

  • React apps: Start with the React Hook wrapper in setup/core (React tab).
  • Other frameworks / vanilla: Use the core library in setup/core (Non‑React tab).
  • Editor and document integrations: Choose a dedicated guide from the supported integrations listed above.

​
Try it yourself!

Open in larger window