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

50 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.

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.



Our software libraries allow you to

Convert PDF files to HTML
Use PDF Forms in a web browser
Convert PDF Documents to an image
Work with PDF Documents in Java
Read and write HEIC and other Image formats in Java
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.

Creating a WordPress Plugin Part 3: Adding Shortcodes

Recently, I’ve been working on a proof of concept project which integrates our JPDF2HTML5 web service with the popular blogging platform WordPress. This series of...
Simon Lissack
1 min read