Make your own Pick & Ban for League of Legends

You have probably seen them popping up at different tournaments. A lowerthird/custom Pick & Ban for League of Legends that gives just that little bit more to a broadcast and grants you space to do more during the sometimes lenghty phase of the game.

The best one I came accross so far is the lol-pick-ban-ui made by the Riot Community Volunteers. While the project is not endorsed or sponsored by Riot itself they confirmed to the makers that it falls within their Terms of Services so it will not get you banned while using it.

The UI works by having a backend connecting to the League of Legends client (and when you startup it will fetch the latest images from Riot’s Data Dragon as well btw). In turn the frontend will get the messages to display the right images, timer, etc. This page you can load in to different streaming or graphics programs as it is just a HTML page. If your graphics workflow allows for loading in the page you can show it with transparency in the broadcast (tested with CasparCG and OBS on my end). It works with the Live Client and the Tournament Client. For the latest build, instructions and more indepth explanation go to

Picture from README

To make your own custom UI (as it is not limited to lowerthird, but most of the times used that way) you will need some skill in HTML, CSS and JavaScript. Best is to start testing with the Europe layout within the GitHub respository to see how it works and what you are able to tweak.

TIP: While making your own overlay I highly recommend using the replay function by typing in npm start — –data recordings/tournament-draft when starting up the backend. You can then pause it with p to not have to do the draft over and over again to make your own overlay.

Something to say?!