Skip to main content

​
Overview

boofstream provides several customization options to match your stream’s branding and improve viewer readability. These settings control visual elements of the overlay and player identification.

​
Configuration Options

customization: {
  appendLToLosers: false,          // Add [L] suffix to losers bracket players
  player1Color: "#00a800",         // Player 1 accent color (green)
  player2Color: "#0f7477"          // Player 2 accent color (teal)
}

​
Player Colors

​
Default Colors

  • Player 1: #00a800 (Green)
  • Player 2: #0f7477 (Teal/Blue-Green)
These colors are used throughout the overlay to distinguish between players, including:
  • Name backgrounds
  • Score indicators
  • Player borders
  • Highlight elements

​
Customizing Colors

1

Access color settings

In the boofstream manager, navigate to the Customization section.
2

Choose Player 1 color

Click the Player 1 Color picker or enter a hex color code.Popular choices:
  • Green: #00a800 (default)
  • Blue: #0074D9
  • Red: #FF4136
  • Purple: #B10DC9
  • Orange: #FF851B
3

Choose Player 2 color

Click the Player 2 Color picker or enter a hex color code.Popular choices:
  • Teal: #0f7477 (default)
  • Red: #FF4136
  • Orange: #FF851B
  • Yellow: #FFDC00
  • Pink: #F012BE
4

Preview and save

Preview the colors in the overlay, then save your settings. Changes apply immediately to the stream overlay.
Choose colors with sufficient contrast for better readability on various stream backgrounds and for viewers with color vision deficiencies.

​
Color Accessibility

When selecting player colors:
  1. High contrast: Ensure colors are distinct from each other and from your background
  2. Readability: Test that white or colored text remains readable on color backgrounds
  3. Color blindness: Avoid red-green combinations if possible, or ensure other visual indicators differ
  4. Branding: Match your team, event, or personal brand colors

​
Color Format

boofstream accepts colors in hexadecimal format: 
#RRGGBB
Examples:
  • #FF0000 - Pure red
  • #00FF00 - Pure green
  • #0000FF - Pure blue
  • #9b59b6 - Purple (boofstream brand color)

​
Losers Bracket Indicator

​
What It Does

When enabled, the [L] suffix is automatically appended to player names when they’re marked as coming from the losers bracket. Example:
  • Without indicator: Mango
  • With indicator: Mango [L]
This helps viewers quickly identify bracket status during tournament streams.

​
Enabling the Indicator

1

Access customization settings

In the boofstream manager, navigate to Customization.
2

Toggle the setting

Enable Append [L] to losers bracket players.
3

Mark players as losers

When loading sets or manually configuring players, mark the appropriate player as “In Losers” to trigger the indicator.

​
When to Use

Enable when:
  • Streaming double elimination tournaments
  • Viewers may not be familiar with the bracket structure
  • You want clear visual distinction between brackets
  • Multiple streams are running and bracket status is important
Disable when:
  • Streaming round robin or Swiss tournaments
  • Space is limited in your overlay design
  • Bracket context is clear from other sources (e.g., on-screen graphics)
  • Streaming non-tournament content
The [L] indicator updates immediately when you change a player’s losers bracket status, even mid-set.

​
Overlay Output Files

boofstream generates several output files that your overlay can use:

​
Player Data

Located in out/p1/ and out/p2/:
  • sponsor.txt - Player sponsor/prefix
  • name.txt - Player name (with [L] if applicable)
  • score.txt - Current score
  • seed.txt - Tournament seed
  • pronouns.txt - Player pronouns
  • twitter.txt - Twitter handle
  • char.png - Character portrait with costume color

​
Match Data

  • out/round.txt - Round text (e.g., “Winners Finals”)
  • out/phase.txt - Phase text (e.g., “Championship Bracket”)
  • out/program_state.json - Complete state in JSON format

​
Character Portraits

Character images are automatically updated based on:
  • Character selection (from Slippi or manual selection)
  • Costume color
  • Character transformations (Zelda ↔ Sheik)

​
Advanced Customization

​
Custom Overlay Integration

The program_state.json file provides complete access to all boofstream data: 
{
  "timestamp": 1234567890,
  "tournamentInfo": {
    "tournamentName": "My Local Weekly"
  },
  "score": {
    "1": {
      "team": {
        "1": {
          "color": "#00a800",
          "player": {
            "1": {
              "name": "Mango [L]",
              "team": "C9",
              "seed": 1
            }
          }
        }
      }
    }
  }
}
Use this JSON in your custom overlay software to access:
  • Player colors
  • Full player data with customizations applied
  • Tournament information
  • Commentator data
  • Real-time timestamps

​
Browser Source Setup

For OBS browser sources:
  1. Create a browser source in OBS
  2. Point to your custom HTML overlay
  3. Use JavaScript to read program_state.json via local file or HTTP endpoint
  4. Apply player colors dynamically via CSS variables
  5. Update text elements when the file changes
Use a file watcher or polling mechanism to detect changes to output files and update your overlay in real-time.

​
Testing Your Customization

1

Configure test colors

Set player colors to easily distinguishable values (e.g., #FF0000 and #0000FF).
2

Load test data

Create a test set with sample player names.
3

Toggle losers indicator

Mark one player as in losers and verify the [L] appears/disappears.
4

Check output files

Verify that out/p1/name.txt and out/p2/name.txt reflect your customization settings.
5

Preview in OBS

Check your overlay in OBS to ensure colors and indicators display correctly.

​
Resetting to Defaults

To restore default settings:
  1. Open the customization settings
  2. Set Player 1 Color to #00a800
  3. Set Player 2 Color to #0f7477
  4. Disable Append [L] to losers bracket players
  5. Save the configuration
Color changes apply immediately. Ensure your overlay is not live before making significant color changes during a broadcast.

Build docs developers (and LLMs) love

Get started for freeTalk to us