marker.js UI the "3 lines of code" image annotation

A full-fledged annotation editor and viewer UI components built around marker.js 3.

Get started nowTry the demo

marker.js UI

Features

marker.js UI is the fastest way to add image annotation to your app.

3 lines of code annotation editor.
Add just a few lines of code to your app and you have a full-fledged annotation editor ready for your users to utilize.
Framework agnostic.
marker.js UI components are standard Web Components and can be used in any framework.
All the features.
marker.js UI components are built around marker.js 3 and cover all the features of the library right out of the box.
Themes built-in.
Support for light and dark themes is built-in.

Start using marker.js UI today. It's free & open source!

marker.js UI is released under the MIT license and you can use it in any type of application. Keep in mind that the core library is still under the linkware license.

Quick start

The 3 lines of code.

Add marker.js 3 and marker.js UI to your project, create an instance, assign an image to annotate, and you are good to go!

Installation.

Add marker.js 3 and marker.js UI to your project

npm install @markerjs/markerjs3 @markerjs/markerjs-ui

Annotation editor.

Import AnnotationEditor from @markerjs/markerjs-ui:

import { AnnotationEditor } from '@markerjs/markerjs-ui';

Create an instance of AnnotationEditor, assign an image to annotate, and add it to the page:

const editor = new AnnotationEditor();
editor.targetImage = targetImg;
editorContainerDiv.appendChild(editor);

Now you have a fully featured annotation editor in your app. Refer to the documentation to continue learning...

Getting started guide

Frequently asked questions about marker.js UI

For general marker.js questions, check out this FAQ. If you can’t find what you’re looking for, reach out and we will sort it out.

    • Is marker.js UI free?

      Yes! marker.js UI is free and open source. It is released under the MIT license. Keep in mind that marker.js 3 itself is still under the linkware license and you may want to get a license for that to remove the small logo in the corner.

    • How do I choose between marker.js 3 and marker.js UI?

      The short answer is simple: if you want to get started quickly and don't want to deal with the implementation of your own user interface, use marker.js UI. If you want to fully integrate annotation editing into your app's design system and control the functionality available to your users, use marker.js 3.

      For more details, check out this article in the documentation.

    • Does marker.js UI work with React? Vue.js? Angular? Svelte?

      Yes! marker.js UI is framework-agnostic and works with any modern web framework.

    • I don't use any framework, or bundler, can I still use marker.js?

      Yes! You can use marker.js with plain HTML, CSS, and JavaScript. Either download the package or use it via CDN. Check out the quick start demo for an example.

    • I found a bug, how can I report it?

      If you have an active support subscription for marker.js 3 please reach out directly via email for a quick response. Otherwise, please post the issue on GitHub.