# Taisen Brackets 対戦 — Knockout brackets as SVG

> Taisen Brackets 対戦 — Knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.

Install with `npm install @johnmorrisdotca/taisen-brackets`. Every page below is also an HTML page at the same address ending in .html; the documentation's home is https://johnmorrisdotca.github.io/taisen-brackets/docs/. The examples on the reference pages are run when the site is built, and what they print is shown under them.

## Guides

- [Getting started](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/getting-started.md): Install the package and draw a knockout bracket from a list of ties.
- [Ties and results](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/ties-and-results.md): A bracket is made of ties, and a tie is whatever it took to decide who goes on: one game, a best-of-seven series, two legs added up, or a game replayed.
- [A bracket for any number of teams](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/any-number-of-teams.md): Sometimes you have a bracket before you have a result: a tournament that is about to start, or one that is filling in as the games are played.
- [Layouts, looks and backgrounds](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/layouts-and-looks.md): The same ties can be drawn many ways.
- [Formats by era: NHL, NBA, MLB, NFL, CFL, MLS and the World Cup](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/formats-by-era.md): A bracket is not the same thing in every year.
- [Plain HTML and CDNs](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/html-and-cdn.md): Draw a bracket on a plain page with one module script from jsDelivr or unpkg.
- [Vite and webpack](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/bundlers.md): Install the package and draw a bracket in a Vite or webpack project.
- [Marks, flags, the champion and its trophy](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/marks-flags-and-trophies.md): A bracket of names is a table.
- [In React, Vue, Svelte and Angular](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/frameworks.md): Draw a bracket in React, Vue, Svelte and Angular: the SVG string goes in as HTML.
- [The road to the final](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/road-to-the-final.md): A bracket shows the whole tournament.
- [TypeScript and Node](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/typescript-and-node.md): Use the package's types, and draw the same bracket as SVG text on a server with no DOM.
- [Embed a bracket in an iframe](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/embed-in-an-iframe.md): Show a bracket on a page that allows no scripts, with an iframe of the demo's embed page.
- [Languages and accessibility](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/languages-and-accessibility.md): A World Cup is read in many languages, and a bracket is read by people who cannot see it.
- [Judo, rankings, medals and broadcast boards](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/judo-rankings-and-boards.md): The package began with knockout brackets, and the same drawing kit now makes the other graphics around a tournament: a judo bracket with its repechage, a scoreboard for one contest, a rankin
- [How a bracket is drawn](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/how-it-works.md): What the package does with a list of ties, from the layout to the SVG.
- [Architecture: from a list of ties to a string of SVG](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/architecture.md): This guide is for someone who wants to change the package or to know why it behaves as it does.
- [Troubleshooting](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/troubleshooting.md): What to check when a bracket is empty, a name is missing, or the page shows nothing.
- [Upgrading](https://johnmorrisdotca.github.io/taisen-brackets/docs/guides/upgrading.md): What changes between releases, and where it is written.

## Reference

- [@johnmorrisdotca/taisen-brackets/layout](https://johnmorrisdotca.github.io/taisen-brackets/docs/api/layout/index.md): Where every tie sits
- [@johnmorrisdotca/taisen-brackets/presets](https://johnmorrisdotca.github.io/taisen-brackets/docs/api/presets/index.md): Ready-made formats for each league
- [@johnmorrisdotca/taisen-brackets/road](https://johnmorrisdotca.github.io/taisen-brackets/docs/api/road/index.md): The road to the final
- [@johnmorrisdotca/taisen-brackets/backgrounds](https://johnmorrisdotca.github.io/taisen-brackets/docs/api/backgrounds/index.md): Backgrounds for a bracket
- [@johnmorrisdotca/taisen-brackets](https://johnmorrisdotca.github.io/taisen-brackets/docs/api/main/index.md): Draw a bracket, a table or a road to the final

## Optional

- [Changelog](https://johnmorrisdotca.github.io/taisen-brackets/docs/changelog.md): every release
- [Every export, in full](https://johnmorrisdotca.github.io/taisen-brackets/llms-full.txt)
- [Source](https://github.com/johnmorrisdotca/taisen-brackets)