Bracketry - a JavaScript Tournament Bracket Library

bracketryjs

Visualize a knockout tournament in the browser

Please

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

change data

manage options

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.

Bracketry is designed to draw single elimination brackets. Technically you can use it to make double elimination brackets too but it won't be that easy and the result won't look very nice (a lot of screen space will be left unused).

Installation

npm install bracketry

Basic usage

import { createBracket } from 'bracketry'

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

createBracket(data, wrapper)

^ It's advisable to set an explicit height on your wrapper element.