marker.js Live — Display dynamic and responsive image annotations, live

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


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

– Alan Mendelevich



Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

SSC MTS Syllabus 2021, Check Detailed SSC MTS Syllabus Subject Wise

Monetize your apps with KivAds using Google AdMob api