velt-crdt-best-practices
Velt CRDT Best Practices
Comprehensive best practices guide for implementing real-time collaborative editing with Velt CRDT (Yjs), maintained by Velt. Contains 38 rules across 5 categories, prioritized by impact to guide automated code generation and debugging.
When to Apply
Reference these guidelines when:
- Setting up Velt client and CRDT stores
- Integrating with Tiptap, BlockNote, CodeMirror, or ReactFlow
- Implementing real-time synchronization
- Managing version history and checkpoints
- Debugging collaboration or sync issues
- Testing multi-user collaboration
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Core CRDT | CRITICAL | core- |
| 2 | Tiptap Integration | CRITICAL | tiptap- |
| 3 | BlockNote Integration | HIGH | blocknote- |
| 4 | CodeMirror Integration | HIGH | codemirror- |
| 5 | ReactFlow Integration | HIGH | reactflow- |
Quick Reference
1. Core CRDT (CRITICAL)
core-install- Install correct CRDT packages for your frameworkcore-velt-init- Initialize Velt client before creating storescore-store-create-react- Use useVeltCrdtStore hook for Reactcore-store-create-vanilla- Use createVeltStore for non-Reactcore-store-types- Choose correct store type (text/array/map/xml)core-store-subscribe- Subscribe to store changes for remote updatescore-store-update- Use update() method to modify valuescore-version-save- Save named version checkpointscore-encryption- Use custom encryption provider for sensitive datacore-webhooks- Use webhooks to listen for CRDT data changescore-rest-api- Use REST API to retrieve CRDT data server-sidecore-activity-debounce- Use setActivityDebounceTime() to control how frequently batched CRDT editor activities are flushedcore-activity-action-types- Use CrdtActivityActionTypes constant for type-safe CRDT activity filtering instead of raw stringscore-message-stream- Use CrdtElement message-stream methods (pushMessage, onMessage, getMessages, getSnapshot, saveSnapshot, pruneMessages) for Yjs-backed collaborative editorscore-debug-storemap- Use VeltCrdtStoreMap for runtime debuggingcore-debug-testing- Test with multiple browser profiles
2. Tiptap Integration (CRITICAL)
tiptap-install- Install Tiptap CRDT packagestiptap-setup-react- Use useVeltTiptapCrdtExtension for Reacttiptap-setup-vanilla- Use createVeltTipTapStore for non-Reacttiptap-disable-history- Disable Tiptap history to prevent conflictstiptap-editor-id- Use unique editorId per instancetiptap-cursor-css- Add CSS for collaboration cursorstiptap-testing- Test collaboration with multiple users
3. BlockNote Integration (HIGH)
blocknote-install- Install BlockNote CRDT packageblocknote-setup-react- Use useVeltBlockNoteCrdtExtensionblocknote-editor-id- Use unique editorId per instanceblocknote-testing- Test collaboration with multiple users
4. CodeMirror Integration (HIGH)
codemirror-install- Install CodeMirror CRDT packagescodemirror-setup-react- Use useVeltCodeMirrorCrdtExtension for Reactcodemirror-setup-vanilla- Use createVeltCodeMirrorStore for non-Reactcodemirror-ycollab- Wire yCollab extension with store's Yjs objectscodemirror-editor-id- Use unique editorId per instancecodemirror-testing- Test collaboration with multiple users
5. ReactFlow Integration (HIGH)
reactflow-install- Install ReactFlow CRDT packagereactflow-setup-react- Use useVeltReactFlowCrdtExtensionreactflow-handlers- Use CRDT handlers for node/edge changesreactflow-editor-id- Use unique editorId per instancereactflow-testing- Test collaboration with multiple users
How to Use
Read individual rule files for detailed explanations and code examples:
rules/shared/core/core-install.md
rules/shared/tiptap/tiptap-disable-history.md
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Verification checklist
- Source pointer to Velt documentation
Compiled Documents
AGENTS.md— Compressed index of all rules with file paths (start here)AGENTS.full.md— Full verbose guide with all rules expanded inline
More from velt-js/agent-skills
velt-comments-best-practices
Velt Comments implementation patterns and best practices for React, Next.js, and web applications. Use when adding collaborative commenting features, comment modes (Freestyle, Popover, Stream, Text, Page), rich text editor comments (TipTap, SlateJS, Lexical), media player comments, or chart comments.
27velt-setup-best-practices
Velt collaboration SDK setup guide for React, Next.js, Angular, Vue, and HTML applications. Use this skill when setting up Velt for the first time, configuring VeltProvider, implementing user authentication with authProvider and JWT tokens, initializing document collaboration with setDocuments, or debugging Velt setup issues. Triggers on any task involving Velt installation, VeltProvider configuration, auth token generation, document identity setup, or project structure for Velt integration — even if the user doesn't explicitly mention "setup".
26velt-notifications-best-practices
Velt Notifications implementation patterns and best practices for React, Next.js, and web applications. Use when adding in-app notifications, notification panels, email notifications via SendGrid, webhook integrations, or user notification preference management.
25velt-activity-best-practices
Velt Activity Logs implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time activity feeds, custom activity logging, audit trails, CRDT debounce configuration, or server-side activity management via REST API.
7velt-rest-apis-best-practices
Velt REST API v2 and webhook best practices for server-side integration. Use when calling Velt REST API v2 endpoints, generating JWT tokens for frontend authentication, handling Velt webhooks (comment events, huddle events, CRDT updates), managing users/documents/organizations via REST, or implementing server-side Velt operations. Triggers on any task involving Velt REST API, JWT token generation for Velt, Velt webhooks, x-velt-api-key headers, or server-side comment/notification/activity management — even if the user doesn't explicitly say 'REST API'. For the Python SDK (velt-py) for self-hosting, see velt-self-hosting-data-best-practices instead.
5velt-single-editor-mode-best-practices
Velt Single Editor Mode implementation patterns and best practices for React, Next.js, and web applications. Use when implementing exclusive editing access, editor/viewer role management, access request handoff flows, element-level sync control, timeout-based editor transfer, or multi-tab editing restrictions.
5