marker.js – JavaScript Image Annotation Library

Let users of your web apps annotate, mark and highlight images easily.
Then save or share — you decide.
Click the photo on the right below to try.

Get Started Read More
slider-img

marker.js in a nutshell

feature-1

Annotation tools

Add rectangles, lines, arrows, text and more. Highlight areas with marker-like tool. Save or share the result.

feature-1

Modern JavaScript

Include with a script tag or import module and use with your framework of choice: React, Vue, Angular, you name it.

feature-1

Free or Commercial

Use in any open source, in-house or commercial project with our flexible licensing – covers every usecase – free.

 

Just click on the image below to try it:

project
get started

Download or install marker.js now!

Get Started
project

Click the image above to try marker.js

GET marker.js

marker.js fits your development style

Whether you just want to add the script to your page or use a bundler, we have you covered.

Include via a script tag from CDN

Add the following script tag to the head section of your page:

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

Install from NPM

Run this command from your console:

npm install markerjs

Download to use locally

Download .zip or .tar.gz from our release page on GitHub.

Get dirty with the source code

Want to change something in the source code? Clone the repository:

git clone https://github.com/ailon/markerjs.git
USE marker.js

In vanilla JavaScript


var mark = new markerjs.MarkerArea(document.getElementById('myImage'));
mark.show(function(dataUrl) {
    var res = document.getElementById("resultImage");
    res.src = dataUrl;
});
                            

In TypeScript / ES2015


import { MarkerArea } from 'markerjs';

const mark = new MarkerArea(document.getElementById('myImage'));
mark.show((dataUrl) => {
    const res = document.getElementById("resultImage");
    res.src = dataUrl;
});
                            
project

Did we mention you can just click the image above and annotate it?

project

Click the image above to try a custom UI marker.js implementation

USE marker.js WITH YOUR OWN UI

Control the look and features

You don't have to use marker.js with its built-in toolbar. It's perfectly understandable that often you'd rather integrate annotation functionality into your own UI. And you may also want to limit available marker types according to your requirements.

marker.js has you covered. Instead of calling MarkerArea.show() like described above, call MarkerArea.open(), then call one of the API methods from your UI to perform whatever action you are after.

Refer to documentation for a reference and an example, and try the demo to the left.

Continuous annotation

Save and restore state

Starting with version 1.6 you can save and restore the previous annotation session. The state is returned on each render as the second argument to completeCallback and then you can pass it back in the config to the constructor of a new MarkerArea`.


let previousState;

let mark = new MarkerArea(img, { previousState: previousState });
mark.show((dataUrl, state) => {
    previousState = state;
});
                            
project

Click to annotate, save and click again to continue annotating.

Support marker.js

You are welcome to use marker.js absolutely free in any type of project (free or commercial) under the MIT license.

The UI during annotation contains a small logo in the corner linking back to this website. Nothing is stopping you from removing it from the source code but, before doing so, please consider the following options to support future development.

 

GitHub Sponsors

from $3
per month

Remove logo + support the developer

  • Unlimited projects
  • No logo/link back
  • Low entry price
  • Email support in higher tiers
Support
Recommended

Patreon

from $3
per month

Remove logo + support the developer

  • Unlimited projects
  • No logo/link back
  • Low entry price
  • Email support in higher tiers
Support

One-off payment

$119
$199

Remove logo + support the developer

  • Unlimited projects
  • No logo/link back
  • Email support
  • No recurring payments
Buy

 

Can't afford the options above? Please consider paying whatever you can via PayPal. Then click here.

Can't afford anything at all or just don't want to pay? That's OK. Please consider sharing some love on Twitter or other social media. Then click here.

 

Can't decide? Other questions? Contact us.