jQuery Bracket library [server]

jQuery bracket is a jQuery plugin that lets users create and display single and double elimination brackets for tournament play.

Feedback can be sent via mail to teijo(a)aropupu.fi or via IRC to Aroppuu @ IRC/Quakenet. If you've found use for this script, I'd be happy to hear about it. Drop me a link and let me know if it can be shared on this project page.

NEWNeed a tool for round-robin tournament groups? Check out the new jQuery Group library that's under development!


Get the code from GitHub repository.


To try most of the examples use these includes:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />

Data structure

The bracket information is stored into a single object. Contents of the object determine what is rendered. Play with the save functionality demo and check the input data for other demos.

Unfortunately there is currently no example algorithm to map specific result into a team pair in case you would need to store the information in different format. Solving team names for anything else than first round requires you to calculate the whole tournament tree.

var singleElimination = {
  "teams": [              // Matchups
    ["Team 1", "Team 2"], // First match
    ["Team 3", "Team 4"]  // Second match
  "results": [            // List of brackets (single elimination, so only one bracket)
    [                     // List of rounds in bracket
      [                   // First round in this bracket
        [1, 2],           // Team 1 vs Team 2
        [3, 4]            // Team 3 vs Team 4
      [                   // Second (final) round in single elimination bracket
        [5, 6],           // Match for first place
        [7, 8]            // Match for 3rd place

var doubleElimination = {
  "teams": [
    ["Team 1", "Team 2"],
    ["Team 3", "Team 4"]
  "results": [            // List of brackets (three since this is double elimination)
    [                     // Winner bracket
      [[1, 2], [3, 4]],   // First round and results
      [[5, 6]]            // Second round
    [                     // Loser bracket
      [[7, 8]],           // First round
      [[9, 10]]           // Second round
    [                     // Final "bracket"
      [                   // First round
        [11, 12],         // Match to determine 1st and 2nd
        [13, 14]          // Match to determine 3rd and 4th
      [                   // Second round
        [15, 16]          // LB winner won first round (11-12) so need a final decisive round


Save functionality (click team and score labels to edit)

Note that you can press return when entering scores to procede to next field.

Save output

Try to first modify some scores or teams

Data inquired at startup

Match information

If you wish to make the bracket more interatctive and display match specific information, you can use the match callbacks. You can bind callbacks that are triggered when user clicks or hovers on a match. Custom data regarding which match was triggered will be passed as argument. The data can be input as the third value of each match, first two being the result of the match. The type of the value is not restricted. Hover gets a boolean as second argument indicating if mouse entered or left the match. Callbacks cannot be used in conjunction with the edit feature.

hover and click the matches below

Data customization

Double elimination

Note that to trigger empty double elimination bracket, the result must have correct level of nesting and top level arrays, otherwise the bracket will be determined as a single elimination bracket. Minimal result data for initializing double elimination is [[[[]]], [], []]

No secondary final

In double elimination, you can disable the secondary final which would generally be used if Loser Bracket winner wins the first match against Winner Bracket winner.

No consolation round

Skip the round to determine 3rd and 4th places.

Reverse flow

Render the bracket from right to left.

Autocomplete demo, try input as "countrycode:name"

This demo uses jQuery UI for the autocomplete.

Large double elimination with 16 teams