Player Highlight on SVG Bracket with Stimulus.js — Rails 8 + ViewComponent

I added click-to-highlight interactivity to an SVG-based tournament bracket built with Rails 8 and ViewComponent. Here’s what I ran into. The goal: click a player’s row in the bracket → all matches featuring that player get a subtle color highlight. Background: SVG-rendered bracket The bracket isn’t HTML divs — it’s a pure SVG rendered by a BracketTreeComponent (ViewComponent). The component calculates coordinates for each match slot and emits <rect>, <text>, <circle>, and connector <path> elements. ...

2026-03-17 · 4 min read · Seunghan
Privacy Policy Terms Disclaimer Contact