marker.js is a JavaScript library that makes it easy to add image annotation to your web apps.
Features
Customizable UI
Headless marker.js web components are fully customizable and fit any design language, compatible with any framework.
Interactive Viewer
Displays interactive annotations with overlays and interactivity, while saving markup separately.
Image Rendering
Renders markup on images using the marker.js image renderer component in your app.
Interactive Markup Editing
Allows users to draw and edit various markers on images with interactive tools, adaptable to any app's UI style and design system.
Save and Modify Markups
Enables saving of markups for future use, with the ability to modify as needed and display as interactive overlays or render as static graphics.
Headless Components
Provides headless web components for ultimate adaptability without any predefined toolbars or property panels, ensuring seamless integration into existing UI/UX designs.
Static Image Rendering
Includes a Renderer tool that converts annotations into static images using asynchronous methods, facilitating easy sharing and display in web applications.
JavaScript Integration
Allows you to add marker.js 3 to a simple HTML/CSS/JavaScript app without using frameworks or bundlers.
TypeScript Support
Utilizes Vite and a `vanilla-ts` template to incorporate marker.js 3 into a TypeScript-based project.
React Integration
Enables the addition of marker.js 3 annotation capabilities into React applications.
Vue.js Compatibility
Offers a simple integration process for adding marker.js 3 to Vue.js projects.
Annotate
Add text, arrows, emojis, callouts, and other shapes to your images to provide visual feedback.
Fits your UI
Headless marker.js web components are fully customizable, work with any framework, and fit any design language.
Image Annotation Editor
Provides fully functional UI components that allow users to annotate images directly within web applications.
Viewer Components
Includes components that enable viewing of the annotated images, enhancing the end-user experience.
Tailwind CSS Integrated
Utilizes Tailwind CSS for styling, making it easier for developers to customize the look and feel of the annotation components.
Framework Agnostic Support
Offers quick start demos in various frameworks including vanilla JavaScript, TypeScript, React, and Vue, showcasing versatility in different development environments.
Image Annotation
Provides tools for adding notes and highlights directly onto images, making it easier to communicate visual ideas.
Integration Flexibility
Can be integrated into a single website or app, and supports multiple versions including mobile apps for iOS and Android.
Unlimited usage
Provides the flexibility to use the software in any number of websites, re-distributable software products, and servers without additional costs.
Customizable functionality
Enables users to modify the core library to suit their specific needs, allowing for tailored image annotation features.
Subdomain flexibility
Support for use on any number of sub-domains or alias domains, ensuring seamless access across different access points within the same website.