Leon Atherton Leon is a developer at IDRsolutions and product manager for BuildVu. He oversees the BuildVu product strategy and roadmap in addition to spending lots of time writing code.

Adding Annotations to Web Content with Annotator.js

59 sec read

Annotator.js is an open-source (available on GitHub) JavaScript library created by the Open Knowledge Foundation that allows you to add annotations to web pages. Annotations can be personal (only seen by you), or can be permissions based, providing functionality to limit who is able to view, add or edit annotations.

The annotations themselves are not stored within the web pages themselves, instead being hosted elsewhere, and inserted in to the page on load using JQuery. Annotations can be stored in your own storage system or using the free AnnotateIt service, also provided by the Open Knowledge Foundation.

The Annotator library is very extensible and includes default plugins for features such as user accounts, tags, filtering and formatting. An API is provided, allowing you to write your own plugins. Annotator is well documented and includes a plethora of help pages on the Annotator wiki.

To get started, you should read the Getting Started guide. To learn about setting Annotator up to use permissions with authentication, you should read the Authentication Guide, and the Auth Plugin page. If you want to store annotations on your own hardware, you should read the Storage Guide, and the Store Plugin page.

To see how our software is already being used in a system alongside Annotator.js, you can read about how the University of Mississippi’s School of Pharmacy use Annotator.js with our software here.

This article is part of a series of articles with suggestions for enhancing your HTML5 content. You can also read about Adding Fullscreen using the JavaScript FullScreen API, Optimising Images using PNGQuant, Password Protecting content with Apache htaccess, and Measuring Content Performance with Google Analytics.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Leon Atherton Leon is a developer at IDRsolutions and product manager for BuildVu. He oversees the BuildVu product strategy and roadmap in addition to spending lots of time writing code.

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2019. All rights reserved.