bracketryjs

Visualize a knockout tournament in the browser

Bracketry is a free JavaScript library that can visualize tournament brackets (or "draws") in any kind of sport:

Bracketry requires very little JS code on your side.
Its look and behaviour can be easily adjusted by a vast range of options.
Its layout is flexible and mobile-friendly.
It uses screen space sparingly, showing as much content as possible.
Free to use, MIT-licensed.
49kb minified, 12 gzipped.

npm install bracketry

import { createBracket } from 'bracketry'

const wrapper = document.querySelector('#your-wrapper-element')
const data = { ... } // data of a specific shape

createBracket(data, wrapper)

Prepare your data
Adjust fonts & colors & sizes
Tune bracket for mobile devices
Fix the number of visible rounds
Change the icons and position of navigation buttons
Build your own "external" navigation
Implement scroll using buttons or mousewheel or both
Change the icons and position of scroll buttons
Replace the default match markup (or some of its parts) with any custom HTML
Set custom click handlers
Apply live updates
Show Nth round at the beginning
Change options after initialization
Get national flags (or whatever image before team title)
Display doubles in tennis
Highlight team's path within a tournament (or disable highlighting)
Highlight a 'Live' match
Switch to a different tournament
Render bracket with 'auto height' (as high as the entire content)
Get a third place match

createBracket()
"Lifecycle" methods
Shape of data
Options