Overview

Build collaborative editors, whiteboards, and shared app state with Velt’s Yjs-based CRDT stores, version history, and editor integrations.

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.

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

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:

• Core library — generic version APIs for any store type
• Text store and XML store — version save/restore for text-based documents
• Tiptap, BlockNote, CodeMirror, ReactFlow — editor-specific version history

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).
• Rich editors: Follow the dedicated guides for Tiptap, ReactFlow, CodeMirror, and BlockNote.

Try it yourself!

Open in larger window