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

marker.js in a nutshell


Annotation tools

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


Modern JavaScript

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


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:

get started

Download or install marker.js now!

Get Started

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=""></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
USE marker.js

In vanilla JavaScript

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

In TypeScript / ES2015

import { MarkerArea } from 'markerjs';

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

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


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


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 like described above, call, 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 });, state) => {
    previousState = state;

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

Buy a license

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

The only limitation of the Linkware license is that you cannot remove a small logo/link back to this site in the corner displayed while the user is annotating (it is not rendered in the final image). If this doesn't work for you, you are welcome to purchase one of our commercial licenses below.


FREE (linkware)


Unlimited projects with a link back

  • Always free
  • Logo/link back to this site
  • Community support
Get Started

Single app


Remove logo + support the developer

  • One project
  • No logo/link back
  • Email support
Winter sale

Unlimited apps


Remove logo + support the developer

  • Unlimited projects
  • No logo/link back
  • Email support


Can't decide? Other questions? Contact us.