Getting started

Install the package and draw a knockout bracket from a list of ties.

Install it.

npm install @johnmorrisdotca/taisen-brackets
# or: pnpm add @johnmorrisdotca/taisen-brackets
# or: yarn add @johnmorrisdotca/taisen-brackets

A bracket is a list of ties. Each tie names its two sides and, once it has been played, its score. layoutBracket works out the rounds, the halves and who feeds whom; drawBracket draws the same list, or a layout you already have, as an SVG string.

import { drawBracket, layoutBracket, type Matchup } from "@johnmorrisdotca/taisen-brackets";

const matchups: Matchup[] = [
  { sides: ["Aurora", "Harbour"], score: [2, 1], date: "2026-06-01" },
  { sides: ["Cascade", "Delta"], score: [0, 1], date: "2026-06-01" },
  { sides: ["Aurora", "Delta"], score: [3, 1], date: "2026-06-08" },
];

const layout = layoutBracket(matchups);
console.log(layout.rounds, layout.champion?.name, layout.shape);
console.log(drawBracket(layout, { title: "Aurora Cup" }).startsWith("<svg"));

2 Aurora halves
true

The string is plain SVG, with no script and no network. Put it in a page (element.innerHTML = svg), write it to a file, or send it from a server.

What next

Use it in a page, a bundler, a framework or an iframe: plain HTML and CDNs, Vite and webpack, React, Vue, Svelte and Angular, an iframe and TypeScript and Node.
How the package works: how a bracket is drawn.
Every function, option and type: the API reference.

View source Edit on GitHubMade from the source of @johnmorrisdotca/taisen-brackets 0.20.0.