Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 4 commits ahead, 7 commits behind kyamagu:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Bounding box annotator

A bounding box annotation tool written in CoffeeScript/JavaScript. There is an online demo at

Contents  Main code.
demo.html              Example to host on a private server.
mturk.html             Example to use in Amazon MTurk.              This documentation.

Be sure to unescape × with × when directly editing an MTurk template on the Amazon requester UI.


Compile the coffee script to get a javascript.

coffee -c

Or, go to and compile the coffeescript.


Load the compiled javascript codes inside HTML.

<script src="bbox_annotator.js" type="text/javascript"></script>

Embed a block element for annotation tool and a form element in HTML.

<div id="bbox_annotator"></div>
<input id="annotation_data" name="annotation_data" type="hidden" />

Then, attach a piece of script to launch the annotation tool. The annotator takes a callback function on change of the annotation data. Use JSON format to display the value.

<script type="text/javascript">
$(document).ready(function() {
  var editor = new BBoxAnnotator({
    url: "/url/to/image.jpg",
    onchange: function(annotation) {

The returned annotation is an array of objects. Here is an example.

    "top": 0,
    "left": 0,
    "width": 100,
    "height": 100,
    "label", "object"

Check the attached demo.html and mturk.html for how to use.


The BBoxAnnotator object takes options to change its behavior.

  • id: CSS selector for the annotator element. Default is "#bbox_annotator".
  • input_method: One of the "text", "select", and "fixed". This will change how to input associated annotation text.
  • labels: A string, or an array of strings. Set of labels used for suggestion in "text" or "select" input. When fixed, only the first element is chosen.
  • width: Width of the image. The default is the original width of the image.
  • height: Height of the image. The default is the original height of the image.
  • show_label: Flag to display a label in the box. Default is true for "text" and "select" input, and false for "fixed" input.
  • border_width: Size of border around the image. Default is 2. Leaving it 0 can make it hard to start annotation around the image border.


The code may be redistributed under BSD license.


A bounding box annotation widget written in CoffeeScript.






No releases published


No packages published


  • HTML 60.4%
  • CoffeeScript 39.6%