Velt CRDT (Yjs) collaborative editing best practices for real-time applications. This skill should be used when implementing collaborative features using Velt CRDT stores, integrating with editors like Tiptap, BlockNote, CodeMirror, or ReactFlow, or debugging sync issues. Triggers on tasks involving real-time collaboration, multiplayer editing, CRDT stores, or Velt SDK integration.
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.
Reference these guidelines when:
| 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- |
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 profilestiptap-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 usersblocknote-install - Install BlockNote CRDT packageblocknote-setup-react - Use useVeltBlockNoteCrdtExtensionblocknote-editor-id - Use unique editorId per instanceblocknote-testing - Test collaboration with multiple userscodemirror-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 usersreactflow-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 usersRead 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:
AGENTS.md — Compressed index of all rules with file paths (start here)AGENTS.full.md — Full verbose guide with all rules expanded inline