Site iconJava PDF Blog

Adding Annotations to Web Content with Annotator.js

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.

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 and Password Protecting content with Apache htaccess.