How do you make a live casino game feel instant when the entire experience runs in a browser tab?

01 — Problem

OnAir Entertainment builds live dealer casino games — Blackjack, Roulette, game shows — streamed and deployed to major operators like Betsson, Betway and BetMGM. Players expect a TV-production-quality experience in a browser, with real-time multiplayer state, zero jank and immediate feedback on every interaction. The browser has no grace period: a stuttering card animation or a delayed bet confirmation is enough to lose a player.

02 — Constraints

• Browser-only — no native layer, no install; every frame had to come from the tab
• Real-time multiplayer state via WebSocket — player actions must reflect instantly, server truth must apply without visible conflict
• Games deployed across multiple operators with different environments, regulatory markets and device profiles

03 — Architecture

Game state lives in MobX stores — fully observable and decoupled from React's reconciler. The rendering layer is Canvas and SVG driven directly from MobX at frame rate, bypassing React re-renders entirely during live game play. WebSocket messages update the store synchronously; animations queue from observed state changes, so the visual output always reflects the single source of truth without race conditions. Operator-specific builds are generated through Docker with environment-injected config.

04 — Solution

Separated the rendering pipeline completely from React reconciliation — Canvas and SVG draw directly from MobX state at 60fps, removing the reconciler from the hot path during gameplay. Built a WebSocket event loop that batch-applies server state updates at the start of each frame to prevent mid-animation mutations. Delivered new game variants (Blackjack, Roulette, game shows) in tight collaboration with design and backend teams, deployed across Betsson, Betway and BetMGM.

• Senior Frontend Engineer
• Canvas and SVG rendering and animation
• WebSocket state synchronisation

05 — Outcome