Javascript library to rapidly annotate paragraphs of text on websites with the goal of making the annotation process as fast and simple as possible.
Switch branches/tags
Nothing to show
Clone or download
x0xMaximus startSideCapture >> startCapture
- Now that the capture events are smarter when mousing on non-p elements we can implement it saftely for in-box events as well.
- This isn't a direct solution to M2C Issue #43 but after extensive work it's the closest for now
- Proposed weekend project would be to inject <span> </span> in with the empty spaces but then that brings other things into the problem (mousedowns, underlines, indexing)
Latest commit 233577a Feb 21, 2015


YPet is a Javascript library built in Marionette.js to rapidly annotate paragraphs of text on websites. The project aims to rethink HTML text annotation, primarily focused on biocuration and adheres to the following rules:

  • Limit the possibility for damaged annotations, individual letters are not desired.
  • Allow rapid span highlighting to prevent broken single-word annotations.
  • Don't enforce any DOM requirements, allow native functionality on any paragraph tag to respect page resizing or CSS styles.
  • Allow rapid classification of annotation types without right mouse clicks.

for the goal of making the annotation process as fast and simple as possible. An online demo is available to play with.

Example of behavior:

YPet Demo

How to Use


YPet.addInitializer(function(options) {
  /* Setup the paragraphs with a string to tokenize */
  var p1 = new Paragraph({'text': $('p#some-paragraph').html()});
  var p2 = new Paragraph({'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt tempus lorem, quis sollicitudin lectus pretium nec. Ut non enim.'});

  /* Configure the # and colors of Annotation types (minimum 1 required) */
  YPet.AnnotationTypes = new AnnotationTypeList([
    {name: 'Person', color: '#A4DEAB'},
    {name: 'Place', color: 'PowderBlue'},
    {name: 'Thing', color: 'rgb(0, 180, 200)'}

  /* Assign views to Region */
    'p1': '#container-to-place-p1',
    'p2': '#container-to-place-p2'

  /* Put the new Annotation views on the page */
  YPet['p1'].show( new WordCollectionView({collection: p1.get('words')}) );
  YPet['p2'].show( new WordCollectionView({collection: p2.get('words')}) );



If you want to live track annotations as they're put on the paragraph (to save, send to a server, or do something else with) the following callbacks and serialization methods are available.

Each annotation is returned as an object with a start and text attribute, as well as an array of children words.

YPet['p1'].currentView.collection.parentDocument.get('annotations').on('add', function(model, collection) {
  console.log('Add:', model.toJSON(), collection.toJSON());

YPet['p1'].currentView.collection.parentDocument.get('annotations').on('remove', function(model, collection) {
  console.log('Remove:', model.toJSON(), collection.toJSON());

YPet['p1'].currentView.collection.parentDocument.get('annotations').on('change', function(model) {
  console.log('Change:', model.toJSON());


YPet was developed to rapidly annotate bio-medical literature for Mark2Cure at The Su Lab by Max Nanis.

The Scripps Research Institute

YPet is distributed under the MIT License.


If you'd like to support please fork and contribute. We're particularly looking forward on the following topics:

  • Allow support for phrase tags: <strong>, <em>, <code>, et cetera…
  • Lessen dependency requirements
  • Improve setup process (reduce steps required) for parties wanting to leverage YPet
  • Continue to study user behavior to improve confusion that may lead to frustration
  • Continue to improve performance to increase speed and prevent lagging
  • JSLint pride