convex-realtime

Build reactive Convex applications with real-time subscriptions, optimistic updates, and cursor-based pagination.

Updated Mar 6, 2026

Search Tags:#subscriptions #real-time #cache #pagination #convex #reactive #optimistic-updates

Ready to run

npx skills add https://github.com/mmtftr/bakathon --skill convex-realtime-mmtftr

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns for building reactive applications using Convex's real-time subscriptions to keep UI in sync with live data, while managing optimistic updates, caching behavior, and cursor-based pagination to deliver a responsive user experience.

Core Features & Use Cases

Real-time subscriptions: automatic updates across components to maintain a consistent view.
Smart caching: share results across components and reduce redundant requests.
Optimistic updates: reflect changes immediately with rollback on failure.
Cursor-based pagination: load data progressively for large lists, enabling smooth infinite scrolling.
Use Cases: dashboards, chat apps, and collaborative tools that require synchronized state and low-latency feedback.

Quick Start

Create a minimal React component that subscribes to a Convex query with useQuery, uses an optimistic mutation for immediate feedback, and enables cursor-based pagination for large datasets.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema

How do I build a reactive app with real-time data subscriptions?▼

Building a reactive app involves using real-time subscriptions to automatically sync UI components with live data, ensuring a consistent view without manual polling. This pattern leverages reactive queries to maintain synchronized state across components.

How do optimistic updates work with real-time data?▼

Optimistic updates reflect changes immediately in the UI while the mutation processes in the background. If the mutation fails, the update is rolled back, providing low-latency feedback for a responsive user experience.

What is the best way to implement cursor-based pagination for large lists?▼

Cursor-based pagination enables smooth infinite scrolling by progressively loading data in large lists. It fetches subsequent pages based on a cursor pointer rather than offsets, maintaining performance as datasets grow.

Does Convex support smart caching for real-time subscriptions?▼

Yes, smart caching shares query results across multiple components to reduce redundant requests. This strategy optimizes data fetching while maintaining the reactivity required for synchronized state.

Can I use these real-time subscription patterns for collaborative tools?▼

Yes, these patterns suit dashboards, chat apps, and collaborative tools that require synchronized state. They handle live data synchronization and low-latency feedback needed for real-time multi-user environments.

Why do my real-time components show inconsistent views during mutations?▼

Inconsistent views occur when components lack synchronized state or proper optimistic updates. Applying real-time subscriptions with rollback mechanisms ensures UI components maintain a consistent view during data mutations.