convex-realtime

Provide client-side patterns for reactive apps with real-time subscriptions and optimistic updates.

Updated Feb 8, 2026

Search Tags:#caching #subscriptions #realtime #pagination #convex #optimistic-updates

Ready to run

npx skills add https://github.com/gursheyss/styx --skill convex-realtime-gursheyss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: convex-realtime
Source: https://github.com/gursheyss/styx/tree/main/.agents/skills/convex-realtime
Command: npx skills add https://github.com/gursheyss/styx --skill convex-realtime-gursheyss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns for building reactive applications including subscription management, optimistic updates, cache behavior, and pagination with cursor-based loading.

Core Features & Use Cases

Automatic Subscriptions: useQuery creates a subscription that updates automatically
Smart Caching and Consistency: Query results are cached and shared across components
Cursor-Based Pagination and Infinite Scroll: Efficiently load data in pages and on-demand
Optimistic Updates: Show changes immediately with rollback on failure
Multiple Subscriptions and Mutations: Compose data from different sources and mutate with live feedback

Quick Start

Set up a React component that subscribes to a data source and renders in real time with automatic updates.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema

How do I manage real-time subscriptions across multiple React components reading shared data?▼

Real-time subscriptions across multiple components are managed by using a query hook that automatically creates a subscription. Results are cached and shared across components to maintain consistent views with minimal re-renders.

What is the best way to implement optimistic updates with automatic rollback on mutation failure?▼

Optimistic updates with rollback are implemented by immediately showing UI changes upon mutation and reverting the state if the operation fails. This pattern provides live feedback while ensuring data consistency during errors.

How does cursor-based pagination work for infinite scroll in reactive applications?▼

Cursor-based pagination for infinite scroll works by efficiently loading data in sequential pages on demand. This pattern fetches subsequent data chunks using cursors rather than offsets, ensuring stable real-time data rendering.

Can I compose data from different real-time subscriptions and mutate them with live feedback?▼

Yes, you can compose data from different real-time subscriptions and mutate them with live feedback. The pattern library supports multiple subscriptions and mutations, allowing components to aggregate data from various sources seamlessly.

Does this pattern library require manual cache invalidation when mutating shared data?▼

No, manual cache invalidation is not required when mutating shared data. The smart caching mechanism automatically synchronizes query results across components, ensuring all views remain consistent without explicit cache clearing.