Annotator.js plugin for creating and displaying annotations in the margin of a page. Designed for use with Anntotator 2.x releases.

Distributed under the Apache 2.0 License.

View the Project on GitHub emory-lits-labs/annotator-marginalia

version 0.4.1


Display annotator.js annotations in the margin of the page.

Try it out in this simple demo.


To use marginalia with your Annotator project, include the appropriate CSS and Javascript files, and add it to the app initiation as you would any other module. Marginalia depends on bootstrap dropdown menus and moment.js for optional update time in the displayed annotation footer. For convenience, the built javascript includes both annotator-marginalia and moment.js.

<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
      var app = new annotator.App();
        show_author: true,
        viewer: annotatormeltdown.render,
        renderExtensions: [

Marginalia assumes some structural requirements for the annotation margins to appear correctly. The class names for the outer and inner elements can be configured in the option parameters.

    <div class="in-page-controls"></div> <!--control container-->

    <article class="content"> <!--outer_element-->
      <section class="inner"> <!--inner_element-->

Marginalia supports the following configuration options:

Class options:

Display options:

Interaction options:

Marginalia includes an optional annotator editorExtension. This extension is based on annotator.ui.tags.editorExtension and is used to create comma separated list of tags when editing. Add the extension to the editorExtensions options on the annotator.ui.main:

    var _marginalia = annotatorMarginalia();
    editorExtensions: [


Authors and Contributors

Created by Kevin Glover (@kevinglover) and Rebecca Sutton Koeser (@rlskoeser), 2015. Originally developed as part of readux.