bracketryjs

Visualize a knockout tournament in the browser

It's one of the functions returned from createBracket() You can call it to add / remove / update any number of matches.

• matches
  An array of match objects that you want to update

Every match object provided to applyMatchesUpdates must contain ALL data of a match
(It's not a merge but replace. If you omit some properties, on the next paint they will be treated as undefined)

import { createBracket } from 'bracketry'

const wrapper = document.querySelector('#your-wrapper-element')
const data = { ... }

const bracket = createBracket(data, wrapper)

bracket.applyMatchesUpdates([
    {
        roundIndex: 0,
        order: 0,
        ...any match data
    }
])

If you want to update not individual matches but the entire data (switch to a different tournament perhaps), then use replaceData() method