jQuery Plugin To Generate Visual Tournament Brackets - Bracket World

File Size: 428 KB
Views Total: 18313
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Generate Visual Tournament Brackets - Bracket World

Bracket World is a customizable jQuery & Html5 SVG based tournament bracket generator to create single-elimination bracket structures with ease.


  • Lots of options and APIs to customize the tournament bracket.
  • First round matches can be moved around to customize the look for bye situations
  • Bracket visuals can be zoomed in/out and made into a horizontal or vertical structure
  • Team names and seeds can be fed through the plugin options or via the API.

Basic Usage:

1. Include the jQuery library together with jquery.bracket-world.css and jquery.bracket-world.min.js in the document.

<link href="assets/styles/jquery.bracket-world.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="assets/scripts/libs/jquery.bracket-world.min.js"></script>

2. Create an empty container to place a tournament bracket.

<div id="bracket"></div>

3. Invoke the creation of a bracket in your javascript.


4. Options.

  • teams: between 2 and 256 (practical limit) - the number of teams in the bracket
  • scale: between 0 and 1 - the zoom level of the bracket
  • scaleDelta:   between 0 and 1 - the amount of zoom change that occurs when zooming in/out
  • height: pixel height of the bracket area (does not impact the bracket itself - the area will scroll if it does not accomodate the dimensions)
  • topOffset: pixel spacing between the top of the container and the top of the bracket
  • teamWidth: pixel width of a team name in the bracket
  • teamNames: JSON array representing team names and seeds to populate on the bracket - the order is top bracket first round, top bracket second round (if applicable), bottom bracket first round, bottom bracket second round (if applicable)
  • horizontal: 0 or 1 - determines whether to display the bracket in a horizontal (1) or vertical (0) representation
  • rectFill: color (hex or css-recognized string name) for the bracket's lines 
  • bgcolor: background color (hex or css-recognized string name) for the bracket's container
  • transition: milliseconds or jQuery-recognized string that sets the transition speed for the fade in/out during bracket zooms/perspective changes
  • icons: true or false - whether or not to show the zoom/perspective change icons above and below the bracket area

This awesome jQuery plugin is developed by lipp15. For more Advanced Usages, please check the demo page or visit the official website.