velt-js Velt Live State Sync Best Practices
Comprehensive guide for implementing Velt's Live State Sync API — real-time shared state across clients with sub-10ms latency, offline support, and Redux middleware integration. Contains 14 rules across 6 categories.
When to Apply
Reference these guidelines when:
- Adding real-time shared state (counters, selections, cursors, tool modes) to a collaborative app
- Using
useLiveStatefor useState-like shared state - Using
useSetLiveStateData/useLiveStateDatafor separated read/write patterns - Working with the
LiveStateSyncElementfor observable subscriptions or promise-based fetches - Integrating Redux with
createLiveStateMiddlewarefor full store sync - Broadcasting state updates from your server via the REST API
- Monitoring connection state for offline/online indicators
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Core | CRITICAL | core- |
| 2 | Hooks | CRITICAL | hooks- |
| 3 | Element | HIGH | element- |
| 4 | Redux | HIGH | redux- |
| 5 | API | MEDIUM | api- |
| 6 | Patterns | MEDIUM | patterns- |
Prerequisites
Live State Sync requires VeltProvider with authProvider wrapping your app and a documentId set to scope state. No additional packages beyond @veltdev/react are needed.
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