marker.js 3 Beta is Here!
The first beta for marker.js 3 is out now and you can start playing with it.
For those unfamiliar with marker.js, for now it would suffice to just say that it’s an image annotation library for your web apps. The current version (v.2) has been out and updated for several years and you can get started with it on the official site. An all-encompassing post on v3 will come when the final 3.0 is out.
In this post I wanted to focus on what is conceptually new in v3 so those on v2 can plan the upgrade path or decide to stay on v2 for the time being (if that model works better for your needs).
UI-less Web Components
The most dramatic shift in v3 is that marker.js is now a set of web components rather than a DOM-manipulating library. This has several implications for how the library behaves and how you use it.
It’s up to you where you put it
marker.js 2 had two modes: inline and popup. Meaning that it either tried to place itself either right on top of the annotated image or opened a full-window popup. This worked well in many circumstances but the “edge cases” weren’t so edge (not very rare). Sometimes it interfered with some layout settings/libraries, other times developers wanted it to occupy the whole area of their own popup, etc. So, as a result, a lot of “workaround” features were added through the v2 lifecycle.
In v3 marker.js is just a web component that occupies the area of its parent container… and that’s it. It’s up to you where to create and how to position that container.
Obviously, if one of the previous behaviors was absolutely perfect for you, then it’s more work you didn’t have to do before. But from the feedback I got, this was rarely the case and flexibility was very much needed.
Bring your own toolbars…
Another thing that was both marker.js 2 strength as well as its weakness was its fully integrated UI. On the one hand, you got a complete image annotation editor with just a few lines of code, but on the other the flexibility of this approach was severely limited.
Most “serious” integrations required blending of marker.js into your applications UI and even though there was a reasonable number of customization opportunities it was never fully flexible. Additionally, due to its self-sustainable nature, there wasn’t an internal need for a proper marker creation/management API and it either lagged behind or was unavailable for some operations.
The v3 core library doesn’t come with any toolbars, toolboxes, property editors or other UI beyond the resizing/rotation grips on the markers themselves. This way you can fully integrate it with whatever UI library and design system your application uses. As you can see in the screenshot of the work-in-progess demo above, the UI can be anything you want (including the ugly purely utilitarian UI in that demo).
In the future, I plan to create a self-contained wrapper (or wrappers for various tech stacks) that would work more along the lines of how v2 works, if there’s a demand.
What else is new?
Some other things that are new in v3:
- Polygon marker — this was one of the most requested features and I’m happy to report it is now included.
- Multi-selection — you can now select multiple markers and move or delete them all at once
- Conceptual change in approach to text-based markers — text is no longer auto-scaled to the marker size but is rather controlled by you/user.
Known issues and not-yet-implemented features
Here are some things that are planned for the final v3.0:
- Extensive documentation
- General polish and bug fixes
- Custom image marker — enabling all kinds of scenarios from emojis to some individual use-case markers
- Conversion library and/or documentation to convert saved v2 state to v3 (if there’s a demand).
Licensing
Nothing is changing in terms of licensing — all libraries are still available free of charge under a “linkware” license (small logo in the corner while editing). Holders of the commercial v2 licenses with an active support subscription will get a free upgrade to v3 (you’ll receive an email with instructions closer to the final v3 release).
Let me know what you think
Try marker.js v3 today either in your own setup — get started here or just play with the demo online.
Let me know what you think either via email at info@markerjs.com or on Twitter.
