Drafter.lol - Guide

Looking for the OBS overlay?

Read the Custom Stream Guide. This page covers the older stream mode and URL parameter workflow.

Introduction

Welcome to the Drafter.lol Broadcaster Guide. Whether you're running a community tournament or a professional production, Drafter.lol is built to be flexible and easy to integrate into your stream.

Need help?

Questions or feature requests go in our Discord community.

Stream Mode (The Quick Start)

The easiest way to get Drafter.lol into your stream is by using Stream Mode. This mode automatically hides all non-essential UI elements, leaving only what your viewers need to see.

How to enable

Add &stream=true to the end of your draft URL.

Since draft links already include parameters (like ?game=1), you should use the & symbol to chain them.

Example: https://drafter.lol/draft/ABC-123?game=1&stream=true

What it shows

Picks, Bans, Fearless Picks, Team Names, and the Countdown Timer.

What it hides

Navigation bars, background images, the champion selection list, the Draft Button, and Series Info.

Tip

In OBS, add the URL as a Browser Source. Since Stream Mode hides the background, the draft will appear transparent, allowing you to place it over your own custom overlays.

Visual Layouts

Drafter.lol offers different visual layouts to match your stream's aesthetic. While our standard layout is clean and modern, we offer a specialized look for professional-grade broadcasts.

How to change layouts

Open any draft room and click the Menu button in the top control bar to switch between the Default and LCK layouts.

Add &layout=lck to your URL to force a specific layout.

Normal Layout

The classic Drafter.lol experience. A clean and familiar layout that provides our signature look and feel, suitable for everything from casual practice to competitive matches.

LCK Layout

A professional broadcast look inspired by the LCK, featuring sleek animations and a premium "pro-play" aesthetic.

Customizing Your View

You can fine-tune your draft layout through our preferences system. This allows you to toggle specific features on or off depending on your broadcast needs.

How to customize

Open any draft.
Click the Preferences icon in the top navigation bar.
Adjust your settings and click Save to apply the changes.

The Preferences Parameter

To make your settings persistent in OBS, use the generated configuration parameter found at the bottom of the Preferences menu.

https://drafter.lol/draft/123?game=1&preferences=10101...

This long string of numbers tells Drafter.lol exactly which buttons you clicked, so it looks identical every time you load it.

For Power Users (CSS)

Want to change fonts, colors, or reposition elements? Drafter.lol is built with stable class names and IDs on almost every element, making it highly customizable via CSS.

#id-based-styling

Specific elements like individual pick cards (#pick-card-1) or team headers have unique IDs for direct targeting.

.class-based-styling

Groups of elements like all ban slots or all team names share common classes for easy bulk styling.

Example: OBS Custom CSS

css

/* Change team name color to gold */
.team-name {
  color: #ffd700 !important;
}

/* Hide the timer for a cleaner look */
#draft-timer {
  display: none;
}