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.
Add rectangles, lines, arrows, text and more. Highlight areas with marker-like tool. Save or share the result.
Include with a script tag or import module and use with your framework of choice: React, Vue, Angular, you name it.
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:
Click the image above to try marker.js
Whether you just want to add the script to your page or use a bundler, we have you covered.
Add the following script tag to the head section of your page:
<script src="https://unpkg.com/markerjs"></script>Run this command from your console:
npm install markerjsDownload .zip or .tar.gz from our release page on GitHub.
Want to change something in the source code? Clone the repository:
git clone https://github.com/ailon/markerjs.git
var mark = new markerjs.MarkerArea(document.getElementById('myImage'));
mark.show(function(dataUrl) {
var res = document.getElementById("resultImage");
res.src = dataUrl;
});
import { MarkerArea } from 'markerjs';
const mark = new MarkerArea(document.getElementById('myImage'));
mark.show((dataUrl) => {
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
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.
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;
});
Click to annotate, save and click again to continue annotating.
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.
Can't decide? Other questions? Contact us.