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

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 documentationfor a reference and an example, and try the demo to the left.

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)

$0
 

Always free

  • Unlimited free or commercial projects
  • Logo/link back to this site
  • Community support
Get Started
Popular

Single app

$45
 

Remove logo + support the developer

  • One project
  • No logo/link back
  • Email support
Buy

Unlimited apps

$99
 

Remove logo + support the developer

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

 

Can't decide? Other questions? Contact us.