marker.js Live Documentation: Getting started

Getting started with marker.js Live

marker.js Live is a JavaScript browser library enabling dynamic, responsive, and interactive displaying of image annotations created with marker.js 2.

marker.js Live is a companion library for marker.js 2. While you don't need to install and implement marker.js 2 in order to display pre-made image annotations, you need it to create the annotation "configurations" that marker.js Live will display.

If this describes your scenario, you can use a marker.js 2 demo in Codesandbox to create the annotation configuration, grab the output JSON and then use it with marker.js Live.

Installation

npm

Using a modern JavaScript/TypeScript environment? Just run:

npm install markerjs-live
or
yarn add markerjs-live

to add marker.js Live to your project.

From CDN or local file

Just add a script tag referencing the markerjs-live library.

<script src="https://unpkg.com/markerjs-live/markerjs-live.js"></script>

In this case, we are referencing the library through the UNPKG CDN. For other options, please see the Downloads section.

Usage

To display dynamic image annotations in your project, first, annotate your images using marker.js 2, grab the "state" configuration of the annotations, and then follow these 2 easy steps:

  1. Create an instance of mjslive.MarkerView passing a target image reference to the constructor.
  2. Call its show() method passing your annotation configuration (marker.js 2 state) to it.

That's it!

Here's a simple example:

// skip this line if you are importing marker.js Live into the global space via the script tag import * as mjslive from 'markerjs-live'; // create an instance of MarkerView and pass the target image reference as a parameter const markerView = new mjslive.MarkerView(target); // call the show() method and pass your annotation configuration (created with marker.js 2) as a parameter markerView.show(markerState);

See also

Check out the "all defaults" demo for the simplest implementation of marker.js Live in action.