skills.rest
velt-js
velt-jsOFFICIAL
Explore all skills by this author →
Website𝕏@veltjsGitHub

velt-crdt-best-practices

Implements real-time collaborative editing with Velt CRDT stores and Yjs editor integrations.

1|Updated Jan 23, 2026
Search Tags:#tiptap#CRDT#CodeMirror#yjs#real-time collaboration#velt#multiplayer editing
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-crdt-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-crdt-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-crdt-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-crdt-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building multiplayer collaborative editing with CRDTs involves subtle pitfalls: wrong store types cause merge conflicts, missing initialization breaks sync, deprecated v1 APIs lack status and error handling, and editor integrations (Tiptap, BlockNote, CodeMirror, ReactFlow) each have framework-specific wiring that fails silently when misconfigured. ## Core Features & Use Cases - Core CRDT Store Guidance: Rules for choosing store types (text, array, map, xml), initializing the Velt client, subscribing to remote updates, saving version checkpoints, encryption, webhooks, and debugging with VeltCrdtStoreMap. - Editor Integration Patterns: Step-by-step rules for Tiptap (SSR, disabling history, cursor CSS), BlockNote, CodeMirror (yCollab wiring), and ReactFlow (CRDT node/edge handlers), each with incorrect vs. correct code examples. - v1 to v2 Migration: Migration tables and checklists for moving from deprecated hooks like useVeltCrdtStore to the v2 useStore and useCollaboration APIs with reactive status, sync, and error state. - Use Case: When adding real-time co-editing to a Tiptap editor in Next.js, the agent applies the SSR-disabled loading pattern, disables Tiptap history, installs the correct v2 packages, and wires the CollaborationManager for status and version restore. ## Quick Start Ask the agent to set up Velt CRDT collaboration for your Tiptap editor with a unique editorId and version history support.

Frequently Asked Questions about velt-crdt-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Velt CRDT collaboration in a React app?▼

Wrap your app in VeltProvider with your API key, install @veltdev/crdt-react and @veltdev/crdt, then use the v2 useStore hook with a storeId, type, and initialValue. The hook returns reactive value, update, isLoading, isSynced, and error state.

How to integrate Velt CRDT with Tiptap editor?▼

Install the Tiptap CRDT v2 packages, load the editor with SSR disabled in Next.js, disable Tiptap's history extension to prevent conflicts, and use the useCollaboration hook with a unique editorId. Add collaboration cursor CSS for remote caret rendering.

Which Velt CRDT store type should I use for my data?▼

Use text for collaborative plain text, array for ordered lists, map for key-value objects, and xml for Yjs-backed rich editor documents. Choosing the wrong type causes merge conflicts or data loss on concurrent edits.

How do I migrate from useVeltCrdtStore to the v2 API?▼

Replace useVeltCrdtStore with useStore from @veltdev/crdt-react, rename the id config field to storeId, and adopt the new isLoading, isSynced, status, and error reactive fields. Editor integrations migrate from useVeltTiptapCrdtExtension-style hooks to useCollaboration with a CollaborationManager.

Why is my collaborative editor content merging into the wrong document?▼

Content cross-contamination happens when multiple editor instances share the same editorId. Assign a unique editorId per editor, such as a document-based pattern like doc-${documentId}, and keep it consistent across page reloads.

How do I test multi-user collaboration locally?▼

Test with two different authenticated users in separate browser profiles, both pointed at the same document and editorId. Verify text syncs in both directions, remote cursors appear, and use window.VeltCrdtStoreMap for runtime debugging of store values.

Related Skills

Explore More Software Engineering Skills→
CerisonAutomationCerisonAutomation

linear-app-setup

Configure a Linear agent app with API key and GraphQL verification.

Community
Intermediate
mgd34msumgd34msu
4

liveblocks

Integrate real-time collaborative features into React applications using the Liveblocks SDK.

Community
Intermediate
datagridSolutiondatagridSolution

Public API Gateway

Expose K.I.T. trading and social data via a self-hosted REST API.

Official
Intermediate
durable-streamsdurable-streams
1.7k

yjs-sync

Synchronize Yjs CRDT documents via Durable Streams with SSE or long-polling.

Official
Advanced