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

# Overview

> CRDT (Yjs) based collaborative editing.

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/)