🏒 NHL Live Game Panel - Real-time Hockey Tracking for Home Assistant

Share your Projects! Dashboards & Frontend
1

I built a live NHL game tracker panel for Home Assistant that shows real-time scores, power plays, shots, and play-by-play updates. No external dependencies, works 100% through HA sensors. GitHub link at the bottom!

Background

I’m not a programmer, just a hockey fan who wanted to track my favorite NHL teams on my Home Assistant setup. With help from Claude AI, I built this panel over several iterations. Sharing here in case others find it useful!

What It Does

  • Live Score Tracking: Real-time game scores with team colors and logos
  • Power Play Indicators: Dynamic cards that show when your team (or opponent) has a power play, including situation (5v4, 5v3, etc.)
  • Shots on Goal: Visual bar chart comparing shots between teams
  • Play-by-Play Feed: Last 10 plays with timestamps, auto-scrolling
  • Goal Animations: Border flash effect when goals are scored
  • Smart Refresh Rates:
    • 15 seconds during live games
    • 2 minutes before game starts
    • 5 minutes after game ends
  • Telegram Notifications: Optional goal alerts with highlight video links

Screenshots

live-game
live-game1882×1002 56.8 KB

power-play
power-play1879×1006 53.9 KB

post-game
post-game1883×1005 43 KB

Tablet view (Embed html)
Tablet view (Embed html)1600×933 123 KB

Technical Details

How It Works

  1. REST Sensors query the official NHL API through Home Assistant
  2. HTML Panel displays the data with live updates
  3. No external servers - everything runs locally through HA
  4. Power Play Detection uses situationCode from NHL API to accurately track when teams have advantage

Key Features

Power Play System:

  • Detects penalties automatically
  • Shows power play card on the team with Text advantage
  • Updates dynamically (5v4, 5v3, 4v3, etc.)
  • Automatically removes when game returns to 5v5
  • Pauses correctly during intermissions

Flexible Team Matching:

  • Works with full team names (“Vegas Golden Knights”)
  • Works with variations (“Las Vegas Golden Knights”)
  • Works with abbreviations (“VGK”, “WPG”, “TOR”)

Optimized Performance:

  • Only queries API every 15s during live games
  • Reduces to 2min intervals when no game is active
  • Prevents unnecessary API calls and saves resources

Installation

Requirements

  • Home Assistant
  • Access to configuration.yaml
  • Long-Lived Access Token

Quick Setup

  1. Add REST sensors to configuration.yaml:
rest:
  - resource: https://api-web.nhle.com/v1/schedule/now
    scan_interval: 300
    sensor:
      - name: "NHL Schedule Now"
        unique_id: nhl_schedule_now
        value_template: >-
          {% if value_json.gameWeek is defined %}
            {{ value_json.gameWeek | length }} games
          {% else %}
            No data
          {% endif %}
        json_attributes:
          - gameWeek
          - nextStartDate
          - previousStartDate
    
  - resource_template: >-
      {% set game_id = states('input_text.nhl_current_game_id') %}
      {% if game_id and game_id != 'unknown' and game_id != '' %}
      https://api-web.nhle.com/v1/gamecenter/{{ game_id }}/play-by-play
      {% else %}
      https://api-web.nhle.com/v1/schedule/now
      {% endif %}
    scan_interval: 15
    sensor:
      - name: "NHL Play by Play"
        unique_id: nhl_play_by_play
        value_template: >-
          {% if value_json.plays is defined %}
            {{ value_json.plays | length }} plays
          {% else %}
            Waiting
          {% endif %}
        json_attributes:
          - plays
          - homeTeam
          - awayTeam
          - clock
          - gameState
          - period
          - periodDescriptor
          - situation

input_text:
  nhl_current_game_id:
    name: NHL Current Game ID
    initial: ""
    max: 50

input_boolean:
  nhl_game_active:
    name: NHL Game Active
    initial: false
    icon: mdi:hockey-puck

input_select:
  equipo_nhl:
    name: NHL Team
    options:
      - "Winnipeg Jets"
      - "Vegas Golden Knights"
      - "Toronto Maple Leafs"
      # Add your teams
  1. Important: You need to have the Team Tracker integration and the input_select specified in the code above to extract the names of the favorite teams, since that is where the live events are obtained. The NHL API is used to get everything else.
  2. Download the HTML file from GitHub (choose your language in link below)
  3. Copy to /config/www/nhl.html
  4. Edit the file and update:
  • HA_URL: Your Home Assistant URL
  • HA_TOKEN: Your Long-Lived Access Token
  1. Restart Home Assistant
  2. Access at: http://your-ha-ip:8123/local/nhl.html

Design Decisions

  • Needed accurate power play detection
  • Wanted full control over design and features

Why REST sensors instead of custom component?

  • Simpler for non-programmers to install
  • No need for HACS or custom integrations
  • Easy to debug and modify

Why a separate HTML panel?

  • More flexibility than dashboard cards
  • Better suited for tablet displays
  • Easier animations and real-time updates

Known Limitations

  • Only tracks one team at a time
  • Requires team names from HA sensor (TeamTracker)
  • Timezone hardcoded to GMT-6 (easy to change in code)
  • Power play cards may briefly flicker during intermissions

Future Ideas

  • Mobile-optimized version
  • Customizable color schemes

Credits & Disclaimer

Built with AI assistance (Claude) - I’m not a programmer, just someone who loves hockey and Home Assistant!

Not affiliated with NHL - Uses publicly available NHL API data for personal use.

Open Source - MIT License, feel free to use and modify!

GitHub Repository

Full code, installation guide, and documentation:

GitHub Link: ha-nhl-panel

Questions I’m Happy to Answer

  • Setup help
  • Bug reports
  • Feature suggestions

If you use this and like it, please star the repo and share screenshots! Would love to see your setups.

Update

  • Improved power play detection
  • Empty net events added

Testing Nov 16, 2025

  • Delayed penalty card
  • Empty net on delayed penalty
4 Likes