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

velt-live-state-sync-best-practices

Implement real-time shared state synchronization in React apps using Velt Live State Sync APIs.

1|Updated Jan 23, 2026
Search Tags:#collaboration#React#real-time#Redux#shared state#velt#live state sync
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-live-state-sync-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-live-state-sync-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-live-state-sync-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-live-state-sync-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react.

What problem does it solve? Building real-time collaborative features like shared counters, cursor positions, and synced Redux stores requires correct use of Velt's Live State Sync APIs, and mistakes with authentication, subscription cleanup, or data persistence lead to broken or leaky implementations. ## Core Features & Use Cases - API Selection Guidance: Rules for choosing between useLiveState, useSetLiveStateData/useLiveStateData, the LiveStateSyncElement observable API, and Redux middleware based on your use case. - Redux Store Sync: Patterns for createLiveStateMiddleware with action filtering (allowedActionTypes, disabledActionTypes) and dynamic liveStateDataId switching per document or room. - Server-Side Broadcast: REST API v1/v2 endpoints for pushing live state updates from your backend with merge support. - Use Case: Build a collaborative canvas where shape actions sync across all clients via Redux middleware while local UI actions stay unsynced, with connection status indicators and proper cleanup of ephemeral cursor data. ## Quick Start Ask the agent to build a React shared counter component using Velt Live State Sync with VeltProvider authProvider setup and a connection status indicator.

Frequently Asked Questions about velt-live-state-sync-best-practices

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

FAQPage Schema
How do I sync state in real time across React clients with Velt?▼

Use the useLiveState hook from @veltdev/react, which works like useState but syncs across all clients viewing the same document. Pass a unique string ID and initial value, and destructure the returned [value, setValue, connectionState] tuple.

How do I sync a Redux store across users with Velt?▼

Use createLiveStateMiddleware from @veltdev/react and add it to configureStore via getDefaultMiddleware().concat(middleware). Configure allowedActionTypes or disabledActionTypes to sync only collaborative actions, and set a liveStateDataId to scope the synced state.

What is the difference between useLiveState and useLiveStateSyncUtils?▼

useLiveState is the simplest hook for useState-like shared state in a single component. useLiveStateSyncUtils returns the LiveStateSyncElement for observable subscriptions, promise-based fetchLiveStateData reads, and non-React frameworks.

Does Velt live state data persist after users disconnect?▼

Yes, live state data persists indefinitely on Velt's servers until manually removed. For ephemeral state like cursors or selections, clean up on unmount with setLiveStateData using merge, or use resetLiveState: true on useLiveState.

Can I broadcast live state updates from my server?▼

Yes, POST to https://api.velt.dev/v1/livestate/broadcast (or v2) with x-velt-api-key and x-velt-auth-token headers. The body includes organizationId, documentId, liveStateDataId, data, and an optional merge flag.

Why should I use authProvider instead of useIdentify with Velt?▼

The authProvider callback on VeltProvider is the only supported authentication method for Live State Sync. The useIdentify hook and client.identify() are deprecated and will be removed, so they must never be used.

Related Skills

Explore More Software Engineering Skills→
CerisonAutomationCerisonAutomation

vellum-github-app-setup

Set up a GitHub App under an organization with manifest flow and vault storage.

Community
Advanced
googlegoogle
455

netblocks

Create real-time multiplayer XR experiences with presence avatars, shared objects, and voice chat.

Official
Advanced
JenilRevaliyaJenilRevaliya

realtime-patterns

Implement WebSocket, SSE, CRDT, and presence patterns for live collaborative applications.

Community
Intermediate
RyanzucchiRyanzucchi

editor-rico-tiptap-extensivel

Configures a Tiptap/ProseMirror rich text editor with literary extensions for creative writing.

Community
Intermediate