Brackets-viewer NPM

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.

Features

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):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/brackets-viewer@latest/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brackets-viewer@latest/dist/brackets-viewer.min.js"></script>

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js@master/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js@master/dist/brackets-viewer.min.js"></script>

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:

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:

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:

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
```
npm run db
```
Or use directly the db.json file generated by unit tests in the brackets-manager project
```
npx json-server --watch path/to/brackets-manager/db.json
```