# markerjs2

> JavaScript image annotation

Latest version **2.32.7** (published 2025-09-28) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install markerjs2
pnpm add markerjs2
yarn add markerjs2
bun add markerjs2
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.32.7 |
| Published | 2025-09-28 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 151 |
| Author | Alan Mendelevich |
| Maintainers | ailon |
| Keywords | annotate, mark, highlight, image, photo, graphics, javascript, typescript, comment |

## Links

- npm: https://www.npmjs.com/package/markerjs2
- Repository: https://github.com/ailon/markerjs2
- Homepage: https://github.com/ailon/markerjs2#readme
- Issues: https://github.com/ailon/markerjs2/issues
- npm.io page: https://npm.io/package/markerjs2

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 2.32.7 (latest) — 2025-09-28
- 2.32.6 — 2025-07-18
- 2.32.5 — 2025-07-18
- 2.32.4 — 2025-03-19
- 2.32.3 — 2024-10-06
- 2.32.2 — 2024-09-21
- 2.32.1 — 2024-03-04
- 2.32.0 — 2024-01-24
- 2.31.5 — 2024-01-14
- 2.31.4 — 2023-12-11
- 2.31.3 — 2023-11-30
- 2.31.2 — 2023-10-30
- 2.31.1 — 2023-09-30
- 2.31.0 — 2023-09-16
- 2.30.1 — 2023-09-05
- … 82 more at https://npm.io/package/markerjs2/versions

## README

# marker.js 2 — Add image annotation to your web apps

> ⚠️ **Deprecation notice** ⚠️
>
> **marker.js 3** is out now. This means that while marker.js 2 will be supported for some time, all future development will be focused on version 3 and beyond. Get the most current version information on [markerjs.com](https://markerjs.com)

marker.js 2 is a JavaScript browser library to enable image annotation in your web applications. Add marker.js 2 to your web app and instantly enable users to annotate and mark up images. You can save, share or otherwise process the results.

> For a more detailed "Getting started" and other docs and tutorials, please refer to the [official documentation](https://markerjs.com/docs).

## Installation

```
npm install markerjs2
```

or

```
yarn add markerjs2
```

## Usage

To add image annotation to your web application follow these 3 easy steps:

1. Create an instance of `markerjs2.MarkerArea` by passing a target image reference to the constructor.
2. Set an event handler for `render` event.
3. Call the `show()` method.

Here's a simple example:

```js
// skip this line if you are importing markerjs2 into the global space via the script tag
import * as markerjs2 from 'markerjs2';

// create an instance of MarkerArea and pass the target image reference as a parameter
let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg'));

// register an event listener for when user clicks OK/save in the marker.js UI
markerArea.addEventListener('render', (event) => {
  // we are setting the markup result to replace our original image on the page
  // but you can set a different image or upload it to your server
  document.getElementById('myimg').src = event.dataUrl;
});

// finally, call the show() method and marker.js UI opens
markerArea.show();
```

## Demos

Check out [marker.js 2 demos](https://markerjs.com/demos) for various usage examples.

## More docs and tutorials

For a more detailed "Getting started" and other docs and tutorials, please refer to
the [official documentation](https://markerjs.com/docs).

## Credits

marker.js 2 is using icons from [Material Design Icons](https://materialdesignicons.com/) for its toolbar.

## License

Linkware (see [LICENSE](https://github.com/ailon/markerjs2/blob/master/LICENSE) for details) - the UI displays a small link back to the marker.js 2 website which should be retained.

Alternative licenses are available through the [marker.js 2 website](https://markerjs.com).

---
_Source: https://npm.io/package/markerjs2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._