Every example, rendered as the SVG diagram and the HTML table in both layouts (flat and stacked), with its source JSON above each so you can check the render against the document (e.g. the Copa Libertadores entry shows i18n and timezone: English round names and GMT kickoff times in the JSON, Spanish and local time in the render). Light/dark follows your browser's color-scheme setting — flip it to see both themes.
Generated by examples/gallery.py — regenerate from inside
examples/ with PYTHONPATH=../src python gallery.py.
World Cup round of 8 — host-resolved flags by name (world_cup_flags_host).
{
"tournament": "World Cup",
"season": "2026",
"render": { "crest_shape": "flag", "dt_format": "EEEE dd MMMM, HH:mm" },
"rounds": [
{
"name": "Quarterfinals",
"matches": [
{
"id": "qf1",
"legs": [
{
"team1": "France",
"goals1": 3,
"team2": "Portugal",
"goals2": 0,
"dt": "2026-07-09 19:00",
"venue": "Gillette Stadium"
}
],
"winner": 1
},
{
"id": "qf2",
"legs": [
{
"team1": "Germany",
"goals1": 1,
"team2": "Spain",
"goals2": 2,
"dt": "2026-07-10 23:00",
"venue": "SoFi Stadium"
}
],
"winner": 2
},
{
"id": "qf3",
"legs": [
{
"team1": "Argentina",
"goals1": 0,
"team2": "Netherlands",
"goals2": 0,
"pen1": 5,
"pen2": 4,
"dt": "2026-07-11 19:00",
"venue": "Arrowhead Stadium"
}
],
"winner": 1
},
{
"id": "qf4",
"team1": "Brazil",
"team2": "England",
"dt": "2026-07-11 23:00",
"venue": "Hard Rock Stadium"
}
]
},
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"winnerof1": "qf1",
"winnerof2": "qf2",
"team1": "France",
"team2": "Spain",
"dt": "2026-07-14 23:00",
"venue": "AT&T Stadium"
},
{
"id": "sf2",
"winnerof1": "qf3",
"winnerof2": "qf4",
"team1": "Argentina",
"dt": "2026-07-15 23:00",
"venue": "Mercedes-Benz Stadium"
}
]
},
{
"name": "Final",
"matches": [
{
"winnerof1": "sf1",
"winnerof2": "sf2",
"dt": "2026-07-19 19:00",
"venue": "MetLife Stadium"
}
]
}
]
}
Copa Río de la Plata — host-resolved club crests by id (copa_rio_host), rendered in Spanish: compare its dates (jueves, septiembre) to the World Cup's English ones (Thursday, July) — both use the same EEEE dd MMMM dt_format, localized by Babel.
{
"tournament": "Copa Río de la Plata",
"season": "2026",
"render": { "box_width": 210, "dt_format": "EEEE dd MMMM, HH:mm" },
"rounds": [
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"legs": [
{
"team1": "Estudiantes",
"id1": 17,
"goals1": 2,
"team2": "Athletic Club",
"id2": 90,
"goals2": 1,
"dt": "2026-09-16 22:00",
"venue": "Estadio UNO"
}
],
"winner": 1
},
{
"id": "sf2",
"legs": [
{
"team1": "Platense",
"id1": 42,
"goals1": 1,
"team2": "Internacional",
"id2": 88,
"goals2": 0,
"dt": "2026-09-17 22:00",
"venue": "Estadio Ciudad de Vicente López"
}
],
"winner": 1
}
]
},
{
"name": "Final",
"matches": [
{
"winnerof1": "sf1",
"winnerof2": "sf2",
"legs": [
{
"team1": "Estudiantes",
"id1": 17,
"goals1": 1,
"pen1": 4,
"team2": "Platense",
"id2": 42,
"goals2": 1,
"pen2": 3,
"dt": "2026-10-01 22:00",
"venue": "Estadio Más Monumental"
}
],
"winner": 1
}
]
}
]
}
Copa Libertadores — refs resolved by libertadores_host, and the caller renders it with i18n (round names → Spanish via translate) and a timezone (GMT dt → America/Montevideo, −3h). Compare the source JSON to the render: the document keeps English round names and GMT kickoff times.
{
"tournament": "Copa Libertadores",
"season": "2026",
"render": { "box_width": 240 },
"rounds": [
{
"name": "Quarterfinals",
"matches": [
{
"id": "qf1",
"legs": [{ "ref": 84021 }, { "ref": 84022 }],
"winner": 1
},
{
"id": "qf2",
"legs": [
{
"team1": "River Plate",
"goals1": 1,
"team2": "Palmeiras",
"goals2": 1,
"dt": "2026-08-12 23:30",
"venue": "Estadio Monumental"
},
{
"team1": "Palmeiras",
"goals1": 0,
"pen1": 2,
"team2": "River Plate",
"goals2": 0,
"pen2": 4,
"dt": "2026-08-19 23:30",
"venue": "Allianz Parque"
}
],
"winner": 1
},
{
"id": "qf3",
"legs": [
{
"team1": "Montevideo City Torque",
"goals1": 1,
"team2": "Atletico Mineiro",
"goals2": 0,
"dt": "2026-08-13 23:00",
"venue": "Parque Viera"
},
{
"team1": "Atletico Mineiro",
"goals1": 1,
"team2": "Montevideo City Torque",
"goals2": 1,
"dt": "2026-08-20 23:00",
"venue": "Arena MRV"
}
],
"winner": 1
},
{
"id": "qf4",
"legs": [
{
"team1": "Corinthians",
"goals1": 3,
"team2": "Internacional",
"goals2": 0,
"dt": "2026-08-12 21:00",
"venue": "Neo Química Arena"
},
{
"team1": "Internacional",
"goals1": 1,
"team2": "Corinthians",
"goals2": 1,
"dt": "2026-08-19 21:00",
"venue": "Beira-Rio"
}
],
"winner": 1
}
]
},
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"winnerof1": "qf1",
"winnerof2": "qf2",
"legs": [
{
"team1": "Flamengo",
"goals1": 0,
"team2": "River Plate",
"goals2": 0,
"dt": "2026-09-23 23:30",
"venue": "Maracanã"
},
{
"team1": "River Plate",
"goals1": 1,
"team2": "Flamengo",
"goals2": 2,
"dt": "2026-09-30 23:30",
"venue": "Estadio Monumental"
}
],
"winner": 1
},
{
"id": "sf2",
"winnerof1": "qf3",
"winnerof2": "qf4",
"legs": [
{
"team1": "Montevideo City Torque",
"goals1": 1,
"team2": "Corinthians",
"goals2": 1,
"dt": "2026-09-24 23:30",
"venue": "Parque Viera"
},
{
"team1": "Corinthians",
"goals1": 0,
"team2": "Montevideo City Torque",
"goals2": 2,
"dt": "2026-10-01 23:30",
"venue": "Neo Química Arena"
}
],
"winner": 1
}
]
},
{
"name": "Final",
"matches": [
{
"winnerof1": "sf1",
"winnerof2": "sf2",
"legs": [
{
"team1": "Flamengo",
"goals1": 2,
"team2": "Montevideo City Torque",
"goals2": 1,
"dt": "2026-11-21 20:00",
"venue": "Estadio Centenario"
}
],
"winner": 1
}
]
}
]
}
FA Cup — a pending draw (absent winnerof: TBD, no connector). Rendered through facup_host in Spanish to show placeholder i18n: the undrawn semifinals become 'A definir' (tbd) and the final's links 'Ganador SF1/SF2' (winner).
{
"tournament": "FA Cup",
"season": "2025-26",
"rounds": [
{
"name": "Quarterfinals",
"matches": [
{
"id": "qf1",
"legs": [
{ "team1": "Manchester City", "goals1": 2, "team2": "Newcastle", "goals2": 1 }
],
"winner": 1
},
{
"id": "qf2",
"legs": [
{
"team1": "Chelsea",
"goals1": 1,
"team2": "Arsenal",
"goals2": 1,
"pen1": 3,
"pen2": 4
}
],
"winner": 2
},
{
"id": "qf3",
"legs": [
{ "team1": "Liverpool", "goals1": 3, "team2": "Aston Villa", "goals2": 0 }
],
"winner": 1
},
{
"id": "qf4",
"team1": "Manchester United",
"team2": "Tottenham"
}
]
},
{
"name": "Semifinals",
"matches": [{ "id": "sf1" }, { "id": "sf2" }]
},
{
"name": "Final",
"matches": [{ "winnerof1": "sf1", "winnerof2": "sf2" }]
}
]
}
FA Cup — the same stage once drawn (plain pairings). Base loader.
{
"tournament": "FA Cup",
"season": "2025-26",
"rounds": [
{
"name": "Quarterfinals",
"matches": [
{
"id": "qf1",
"legs": [
{ "team1": "Manchester City", "goals1": 2, "team2": "Newcastle", "goals2": 1 }
],
"winner": 1
},
{
"id": "qf2",
"legs": [
{
"team1": "Chelsea",
"goals1": 1,
"team2": "Arsenal",
"goals2": 1,
"pen1": 3,
"pen2": 4
}
],
"winner": 2
},
{
"id": "qf3",
"legs": [
{ "team1": "Liverpool", "goals1": 3, "team2": "Aston Villa", "goals2": 0 }
],
"winner": 1
},
{
"id": "qf4",
"legs": [
{ "team1": "Manchester United", "goals1": 2, "team2": "Tottenham", "goals2": 1 }
],
"winner": 1
}
]
},
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"team1": "Arsenal",
"team2": "Manchester United"
},
{
"id": "sf2",
"team1": "Manchester City",
"team2": "Liverpool"
}
]
},
{
"name": "Final",
"matches": [{ "winnerof1": "sf1", "winnerof2": "sf2" }]
}
]
}
Third place — a round fed by loserof ('Loser SF1/SF2'): off the winners' tree, so it draws no connector and hangs below the bracket in the final's column, keeping its own round header. Base loader.
{
"tournament": "World Cup",
"season": "2026",
"render": { "dt_format": "EEEE dd MMMM, HH:mm" },
"rounds": [
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"team1": "France",
"team2": "Spain",
"dt": "2026-07-14 23:00",
"venue": "AT&T Stadium"
},
{
"id": "sf2",
"team1": "Argentina",
"team2": "Brazil",
"dt": "2026-07-15 23:00",
"venue": "Mercedes-Benz Stadium"
}
]
},
{
"name": "Final",
"matches": [
{
"winnerof1": "sf1",
"winnerof2": "sf2",
"dt": "2026-07-19 19:00",
"venue": "MetLife Stadium"
}
]
},
{
"name": "Third place",
"matches": [
{
"loserof1": "sf1",
"loserof2": "sf2",
"dt": "2026-07-18 19:00",
"venue": "Hard Rock Stadium"
}
]
}
]
}
Third place, in French (third_place_host) — same stage rendered with language='fr': placeholders show both vocabularies localized (winner -> 'Vainqueur SF1', loser -> 'Perdant SF1') with the round names ('Petite finale'), and the same language drives Babel so the dates read in French ('mardi 14 juillet').
{
"tournament": "World Cup",
"season": "2026",
"render": { "dt_format": "EEEE dd MMMM, HH:mm" },
"rounds": [
{
"name": "Semifinals",
"matches": [
{
"id": "sf1",
"team1": "France",
"team2": "Spain",
"dt": "2026-07-14 23:00",
"venue": "AT&T Stadium"
},
{
"id": "sf2",
"team1": "Argentina",
"team2": "Brazil",
"dt": "2026-07-15 23:00",
"venue": "Mercedes-Benz Stadium"
}
]
},
{
"name": "Final",
"matches": [
{
"winnerof1": "sf1",
"winnerof2": "sf2",
"dt": "2026-07-19 19:00",
"venue": "MetLife Stadium"
}
]
},
{
"name": "Third place",
"matches": [
{
"loserof1": "sf1",
"loserof2": "sf2",
"dt": "2026-07-18 19:00",
"venue": "Hard Rock Stadium"
}
]
}
]
}