Sync Mux video data with Convex using tables, webhooks, and reactive queries for real-time video catalog management in React apps.
npm install @mux/convexThe Mux Convex component synchronizes video data from Mux's video platform into your Convex database, providing real-time updates through webhooks and backfill operations. It creates tables for assets, uploads, live streams, and events, along with mutations and query helpers for managing video catalogs. The component handles the complex integration between Mux's API and Convex's reactive database, keeping your app's video state automatically synchronized.
The @mux/convex component provides tables for assets, uploads, and live streams with mutations to sync Mux objects. Run the backfill migration to import existing data, then configure webhooks to keep data synchronized in real-time.
Use @mux/convex query helpers to build reactive video catalogs that update automatically when video processing completes. The component stores both Mux data and custom metadata like titles, visibility, and tags in Convex tables.
The component includes webhook verification and ingestion handlers. Configure your Mux dashboard to send events to your Convex deployment, and the component automatically updates your database tables when video state changes.
The @mux/convex component uses two synchronization methods: a one-time backfill migration to import existing Mux objects, and webhooks that update Convex tables in real-time as Mux video state changes. Both are required to prevent data drift over time.
The @mux/convex component creates Convex tables for Mux assets, uploads, liveStreams, and events. It also provides a videoMetadata table for app-level data like userId, title, visibility, tags, and custom fields alongside the synced Mux data.
Yes, the @mux/convex component supports custom names when mounting. If you use a different name like 'videoInfra', regenerate the app-level wrappers with npx @mux/convex init --component-name videoInfra --force to match your configuration.
The @mux/convex component follows Convex best practices by separating component logic from Node runtime integration. The component handles schema and mutations, while app-level wrappers generated by the CLI handle Mux SDK calls, webhook verification, and backfill operations that require Node APIs.