- This is in beta.
- This is framework agnostic.
- Use our Core guide to create custom integrations if a purpose built library is not listed below
- Out of box support for the following libraries:
- Tiptap Editor
- ReactFlow
- CodeMirror
- BlockNote
- Lexical (coming soon)
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
.
- Tiptap: Collaborative text editing with cursors and history. See setup:
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.
- 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 datatype
. - 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). - Rich editors: Follow the dedicated guides for
Tiptap
,ReactFlow
,CodeMirror
, andBlockNote
.