PlayOverlay

PlayOverlay is a free, open source desktop broadcast graphics application I built using Electron, React and TypeScript to support live streaming of grassroots football matches. It runs as a dual window system: a control interface for entering scores and match events, and a fullscreen output window on a second display. The output can be rendered against a configurable key colour and composited with live video using an ATEM Mini before being streamed to YouTube.

The app provides a live score bug with team abbreviations, match timer including added time, and a structured penalty shootout display. Because it is used during live matches, the interface is designed to reduce operator error. For example, penalty entry enforces alternating kicks between teams and includes a safe undo flow that correctly rolls back both the visual indicators and the score. State is managed centrally with typed React hooks to avoid inconsistencies between what is shown and what is stored.

Recent releases have expanded PlayOverlay well beyond that original setup. A built in local server now serves the graphics as a transparent browser source for OBS, so a second display and chroma keying are no longer required, and a single running app can feed multiple OBS scenes at once. Other additions include phone remote control over the local network, Elgato Stream Deck support, a spectator scoreboard display mode, and translations covering English, French, German, Italian, Spanish and Portuguese, including regional variants.

PlayOverlay started life as a paid application, with a small Next.js backend using Supabase and Stripe to handle licensing and activation. It is now completely free and open source under the MIT licence, with builds for Mac, Windows and Ubuntu available to download from playoverlay.com and the full source code on GitHub.