Turn sound on for the full experience

03Gaming

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

Live Casino Games PlatformOnAir Entertainment · Gaming

01 — Problem

OnAir Entertainment builds live dealer casino games: Blackjack, Roulette, game shows, streamed from real studios and deployed to operators like Betsson, Betway and BetMGM. When I joined as a senior frontend engineer, the expectation was simple to state and brutal to deliver. Players watch a real dealer on video and bet real money in a browser tab, and the interface has to keep up with both. A card animation that stutters or a bet confirmation that arrives late does not read as a bug to a player. It reads as the game being rigged, and they close the tab. The business lived or died on that feeling of instantness, and React on its own could not deliver it, because a reconciler pass in the middle of a dealt card was already too slow.

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.

ReactTypeScriptMobXCanvas APISVGWebSocketJestDocker

04 — Solution

I separated the rendering pipeline completely from React. Canvas and SVG draw directly from MobX observables at 60fps, so during live gameplay the reconciler simply is not in the hot path. The nastiest class of bugs came from WebSocket messages mutating game state mid animation, cards changing under the renderer while they were still flying. I solved it by batching server updates and applying them at the start of each frame, which made an entire category of race conditions structurally impossible instead of individually fixed. I worked in tight loops with designers on how a win should feel and with backend engineers on what the server could actually promise about ordering, then shipped new game variants across Betsson, Betway and BetMGM, each operator with its own environment and regulatory market baked in through Docker builds.

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

05 — Outcome

60fpsRender rate
3+Major operators
0Race conditions
<50msInteraction latency