Vespyr NodeCG Bundle

Chris Stevens
Jun 10, 2016 · 4 min read

The Vespyr NodeCG bundle is an interactive live-stream experience I created for the League of Legends tournament host, Vespyr League. It encompasses a huge number of features and helped drive up viewership, improve fan engagement, and even attracted the interest of a number of startups and international corporations… The code is available to view over on my Github.


The first iteration of the ‘Stream Controller’ (as it’s known internally) was a basic C# application that took data from the streamer and an API, and wrote that data in a specific format to a number of text files that OBS then read and displayed on stream. It was pretty primitive and didn’t really allow for much flexibility — although the results weren’t too bad.

Image for post
Image for post
Screenshot from the Houseparty5v5 EUW stream (now known as Vespyr League) and the stream controller (inset).

Inset is the stream controller - It was thrown together, which explains the abundance of ‘shouty’ text and distinct lack of any styling whatsoever; however it made up by being an incredibly useful tool for the organisation, it allowed the streamers to easily access and update data during the stream, without having to go through tons of dialog boxes in OBS. Additionally, it is able to generate OBS scene configuration files in one click, meaning the streamers can spend more time streaming instead of going through all the sources changing C:/Users/Chris/… to C:/Users/John/… — when combined with the fact that this single executable also contained all the stream graphics, it meant I had a system that allowed me to ensure the streamers always had the latest graphics (due to the simple version number in the stream controller) and that updating the graphics was as simple as downloading the latest application, clicking a button, and importing the generated config into OBS.

Houseparty5v5 EUW then rebranded to Vespyr League during December 2015, and I decided that I wanted their Twitch streams to rival the likes of Riot Games and ESL’s production quality, regardless of whether it pulled in 1 or 100,000 viewers. I started researching how I could make this a reality and while watching Awesome Games Done Quick (AGDQ), I thought that their overlays were pretty impressive — a quick search uncovered that they were made using a framework called NodeCG, and that the code behind them would be open-sourced after the event along with hours of explanatory videos. The rest, as they say, is history…


Considering I hadn’t even heard of Node.js before this project and my experience with HTML/CSS/JS was restricted to some Bootstrap websites and some basic jQuery stuff, it’s safe to say I was a little out of my comfort zone. But onwards and upwards, after a lot of searching and trawling through hundreds of StackOverflow posts, I got my first commit pushed. The feature-set at the start was limited to just the champion-select scene, and didn’t have any of the API-goodness it does now, but what it did have was smooth animations, a dashboard that could be operated by people other than the streamer, and it looked damn good. With a week until Vespyr’s qualifiers started, and three weeks until the first game of the main season. I had a lot of work to do.

Over these three weeks, I added features at a ridiculous rate — by the time the first game of the season came around, the entire bundle contained: Strawpoll Integration, Autofilled Casters (from hardcoded list), Autofilled Teams (from external API), OBS Remote Integration, five different scenes (coming-up, champion-select, in-game, analysis, end), and lots of silky-smooth animations.

Image for post
Image for post
The champion-select scene on the first day of the main season.
Image for post
Image for post
The coming-up scene.

Fast forward two weeks, after more furious coding the bundle now contained: seven different scenes (start, loading), Autofilled teams & rosters (from external API), and hide-able in-game elements (through a ‘keylogger’ on the streamers PC sending certain key events to the server). At this point, little over a month after I had first heard of Node.js and NodeCG; I had a fully functional package that I genuinely believe fulfils my original goal — “to rival the likes of Riot Games and ESL’s production quality”.

Image for post
Image for post
The champion-select scene three weeks into the main season.


While development on the stream controller had to stop in order to allow me to focus on school exams, it’s flexibility meant it adapted to the needs of the organisation throughout the rest of it’s main-season and play-offs. The Vespyr NodeCG bundle was a huge learning experience (I’ve now heard of Node.js!) and I’m keen to put what I’ve learnt to bigger and better projects in the future, maybe yours could be next?

Thanks to John Nichols for the majority of the graphic design work, Vincent for the Vespyr Tournament Platform API, everyone else at Vespyr League, and the NodeCG Gitter community for putting up with a constant flow of noob questions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store