Getting Started

Img Mapper is an open-source library that enables developers to create interactive, clickable, and highlightable regions on images.

It simplifies building visual interfaces like seat maps, product previews, floor plans, or educational diagrams, anywhere you want users to interact directly with parts of an image.

The library provides a declarative API to define areas using coordinate data, manage hover and click events, and style highlighted zones. It is available for both React and Vue, ensuring a consistent experience across frameworks.

React Img Mapper

React Img Mapper is the React implementation of Img Mapper. It allows you to define and manage image map regions in React components with full event support.

Key Features

• Define clickable or hoverable zones with JSON coordinates
• Handle events like onClick, onMouseEnter, and onMouseLeave
• Customize colors, opacity, and borders for each area
• Supports responsive resizing while preserving mapping accuracy

Vue Img Mapper

Vue Img Mapper brings the same functionality to the Vue ecosystem with a native component syntax.

Key Features

• Simple and reactive props for managing maps and areas
• Emits events such as click, mouseenter, and mouseleave
• Full compatibility with Vue 3 composition API
• Lightweight and flexible and perfect for interactive UIs