# [bracketry](https://sbachinin.github.io/bracketry-site) · [](https://github.com/sbachinin/bracketry/actions/) [](https://www.npmjs.com/package/bracketry) [](https://github.com/sbachinin/bracketry/blob/main/LICENSE.md)
JavaScript library that takes your data and draws the tree of a knockout tournament in the browser. Suitable (hopefully) for any kind of sport
Bracketry is designed to draw _single elimination_ brackets. Technically you can use it to make [double elimination](https://en.wikipedia.org/wiki/Double-elimination_tournament) 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).
## Basic usage
```javascript
import { createBracket } from 'bracketry'
createBracket(your_data, your_wrapper_element)
```
_You only need a wrapper element (advisably with explicit height) and some properly formatted data_
## Some lovely features
🎾 Tennis: doubles, tiebreak, points within a game (15:30 etc), "serving" dot
🍏 Live updates
🔦 Team's path within a tournament is highlighted on click (if you want)
👯 Multiple brackets on a page
📱 Can be easily tuned for mobile devices
3️⃣ Third place match is possible
## Plenty of options (try)
* Sizes, margins and fonts are quite flexible
* Navigation between rounds can be adjusted or built from scratch
* Vertical scroll can work with mousewheel or buttons or both
* You can inject your own markup here and there. You may also choose to render matches yourself and use bracketry only as a positioning mechanism
* You can attach click handlers to matches (or their sides)
* It's possible to specify a number of rounds visible at a time
## Installation: npm or yarn
```bash
npm install bracketry
# or
yarn add bracketry
```
Minified bundle is 48k, gzipped is 12k.
Includes a __d.ts__ file for ease of TypeScript development
## Licensing
MIT