brackets-viewer.js


A simple library to display tournament brackets (round-robin, single elimination, double elimination).

It contains all the logic needed to display tournaments.

$3

- Supports translation (i18next), which also allows you to change the vocabulary
- It was developed in vanilla JS, so you can use it in any framework
- A full working example of creating and displaying brackets (see ./demo/with-ui.html)
- Themes supported, with CSS variables (see ./demo/themes)
- Display participant images next to their name (example)
- Do actions when a match is clicked (example, feature request)
- Custom round names: do you want to say "Semi Finals" instead of "Round 2"? (example, feature request)

!Screenshot

How to use?

Import the library from npm using jsDelivr (you can replace @latest to lock a specific version):

``html


`

Or from GitHub with (you can replace @master by any branch name, tag name or commit id):

`html


`

Now, you can use it with data generated using brackets-manager or with crafted data following the brackets-model.

Usage:

This will find a unique element with a .brackets-viewer class, and append to it:

`js
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
});
`

If you want to clear the container's content before rendering again, use this:

`js
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
}, {
clear: true,
});
`

If you have multiple elements with a .brackets-viewer class, you must provide a selector:

`js
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
}, {
selector: '#example',
});
`

See the full documentation for the render() configuration.

Demos

To quickly test, you can also try the demos by visiting ./demo/index.html.

To use json-server, you can:

- Run the npm script named db to serve the static database file ./demo/db.json

`bash
npm run db
`

- Or use directly the db.json file generated by unit tests in the brackets-manager project

`bash
npx json-server --watch path/to/brackets-manager/db.json
``

Credits

This library has been created to be used by the Nantarena.

It has been inspired by:

- Toornament (design inspiration)
- Responsive Tournament Bracket (connection between matches in plain CSS)