https://github.com/sbachinin/bracketry
Visualize bracket of a knockout tournament in the browser
https://github.com/sbachinin/bracketry
bracket draws playoffs sports visualization-library
Last synced: 2 months ago
JSON representation
Visualize bracket of a knockout tournament in the browser
- Host: GitHub
- URL: https://github.com/sbachinin/bracketry
- Owner: sbachinin
- License: mit
- Created: 2022-10-14T12:05:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T11:38:10.000Z (7 months ago)
- Last Synced: 2024-10-25T05:47:00.513Z (7 months ago)
- Topics: bracket, draws, playoffs, sports, visualization-library
- Language: JavaScript
- Homepage: https://bracketry.app/
- Size: 4.77 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [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