> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CRDT Collaborative Editing Overview

> Add real-time collaborative editing to your app with Velt's Yjs-based CRDT engine for Tiptap, BlockNote, CodeMirror, ReactFlow, and custom 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](./setup/core) to create custom integrations if a purpose built library is not listed below
* Out of box support for the following libraries:
  * [Tiptap Editor](./setup/tiptap)
  * [ReactFlow](./setup/reactflow)
  * [CodeMirror](./setup/codemirror)
  * [BlockNote](./setup/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`](./setup/core).
* **React Hook Wrapper (`@veltdev/crdt-react`)**: A typed React hook for creating and consuming CRDT stores with minimal boilerplate. See setup: [`Core`](./setup/core).
* **Editor integrations**:
  * **Tiptap**: Collaborative text editing with cursors and history. See setup: [`Tiptap`](./setup/tiptap).
  * **ReactFlow**: Collaborative node/edge graphs. See setup: [`ReactFlow`](./setup/reactflow).
  * **CodeMirror**: Collaborative code editing. See setup: [`CodeMirror`](./setup/codemirror).
  * **BlockNote**: Collaborative block-based editor. See setup: [`BlockNote`](./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

* **React apps**: Start with the React Hook wrapper in [`setup/core`](./setup/core#react-hook-wrapper-%40veltdev%2Fcrdt-react) (React tab).
* **Other frameworks / vanilla**: Use the core library in [`setup/core`](./setup/core#other-frameworks-%40veltdev%2Fcrdt) (Non‑React tab).
* **Rich editors**: Follow the dedicated guides for [`Tiptap`](./setup/tiptap), [`ReactFlow`](./setup/reactflow), [`CodeMirror`](./setup/codemirror), and [`BlockNote`](./setup/blocknote).

## Try it yourself!

<Frame>
  <iframe src="https://sample-apps-tiptap-crdt-demo.vercel.app/" className="w-full" height="500px" />
</Frame>

[Open in larger window](https://sample-apps-tiptap-crdt-demo.vercel.app/)
