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

# 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](./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)
  * [SuperDoc React](./setup/superdoc)
  * [Lexical React](./setup/lexical)
  * [Slate](./setup/slate)
  * [Draft.js](./setup/draftjs)
  * [TinyMCE React](./setup/tinymce)
  * [Monaco React](./setup/monaco)
  * [ProseMirror React](./setup/prosemirror)
  * [CKEditor React](./setup/ckeditor)
  * [Apryse React](./setup/apryse)
  * [SpreadJS React](./setup/spreadjs)
  * [Nutrient React](./setup/nutrient)
  * [Ace React](./setup/ace)
  * [Quill React](./setup/quill)

## 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).
  * **SuperDoc React**: Collaborative DOCX editing. See setup: [`SuperDoc`](./setup/superdoc).
  * **Lexical React**: Collaborative structured rich-text editing. See setup: [`Lexical`](./setup/lexical).
  * **Slate**: Collaborative customizable rich-text editing. See setup: [`Slate`](./setup/slate).
  * **Draft.js**: Collaborative Draft.js content editing. See setup: [`Draft.js`](./setup/draftjs).
  * **TinyMCE React**: Collaborative HTML rich-text editing. See setup: [`TinyMCE`](./setup/tinymce).
  * **Monaco React**: Collaborative code editing with Monaco. See setup: [`Monaco`](./setup/monaco).
  * **ProseMirror React**: Collaborative schema-driven rich-text editing. See setup: [`ProseMirror`](./setup/prosemirror).
  * **CKEditor React**: Collaborative CKEditor content editing. See setup: [`CKEditor`](./setup/ckeditor).
  * **Apryse React**: Collaborative PDF annotation review. See setup: [`Apryse`](./setup/apryse).
  * **SpreadJS React**: Collaborative spreadsheet editing. See setup: [`SpreadJS`](./setup/spreadjs).
  * **Nutrient React**: Collaborative document annotation review. See setup: [`Nutrient`](./setup/nutrient).
  * **Ace React**: Collaborative code editing with Ace. See setup: [`Ace`](./setup/ace).
  * **Quill React**: Collaborative rich-text editing with Quill. See setup: [`Quill`](./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:

* [Core library](./setup/core#version-methods) — generic version APIs for any store type
* [Text store](./setup/core-stores/text) and [XML store](./setup/core-stores/xml) — version save/restore for text-based documents
* [Tiptap](./setup/tiptap), [BlockNote](./setup/blocknote), [CodeMirror](./setup/codemirror), [ReactFlow](./setup/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`](./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).
* **Editor and document integrations**: Choose a dedicated guide from the supported integrations listed above.

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