marker.js Live — Display Dynamic, Responsive, and Interactive Image Annotations

I’m happy to introduce marker.js Live — a JavaScript library for displaying dynamic interactive image annotations in your web apps.

Genesis

First, there was marker.js (v1). Then it got a feature to render annotations in a separate transparent PNG (without the original image). Then there was marker.js 2 and it could save and restore its state to continue editing image annotations between sessions. Then I realized we could create a leaner library to take that state and display it on top of the original image without having to store any annotation images anywhere. Just store the JSON state in a database, text file, browser’s local storage, or wherever, then pass it to marker.js Live to be displayed over the original image.

What it can do for you

That’s how marker.js Live was born but it doesn’t stop there. Since annotations are displaying dynamically, we can adjust them to the current on-screen size of the target image. And since they are vector graphics, we can do it without losing any image quality.

And since markers are objects, we can enable all kinds of interactive scenarios: highlighting markers on hover, redirecting to links on click, showing notes in a tooltip, and so on and so forth.

Modular architecture

I’ve decided to structure marker.js Live in a modular fashion. The core marker.js Live package is a lean library with just the core functionality and then you can use (or build) plugins to enable animation and interactivity based on your preferences and needs.

At launch there are 4 plugins to add animation, link clicking, displaying notes in arbitrary page elements, or displaying notes in a tooltip.

More first-party plugins are coming, and you can build your own and share them with the world (or keep them to yourself — your choice).

Get it now

marker.js Live v.1.0.0 is out now, and you can get it via npm or a CDN or just download the files. Follow the instructions on the Downloads page.

marker.js Live is licensed in the same fashion as marker.js 2. You can use it absolutely free in any type of project, as long as you don’t mind a small logo in the corner. To get rid of the logo (and to support future development) you are welcome to get an alternative license.

Enjoy! And if you do, please help spread the word about marker.js Live.