Skip to content
Add Genius-style annotations to your project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Annotation Genius

See it in action on Vimeo

Add Genius-style annotations to your project!

Watch example on Vimeo.

Getting Started

Add the stylesheet & JS to your project:

<link rel="stylesheet" href="ag-style.css">
<script src="annotation-genius.js"></script>

Wrap the annotated material with spans:

<span class="ag" id="1">Lorem ipsum dolor sit amet,</span>
<span class="ag" id="2">lectus</span>

Finally, add your annotation data corresponding to spans.

Annotation-Genius.js draws from the properties "id" and "annotation"

const annotationData = [
    "id": 1,
    "annotation": "The annotation to the first item."
    "id": 2,
    "annotation": "Another annotation, this time for the second item."
    "id": 3,
    "annotation": "Third annotation. Because it accepts HTML, we can add a <a href=''>link</a>."
You can’t perform that action at this time.