Add Image Annotation to React Apps in 60 Seconds
A lightweight, extensible React component for annotating images with a draggable toolbar, rich styling options, and powerful export features.
Why Choose markmyimage?
Unlock a new layer of interactivity. Whether for bug reporting, collaborative design, or educational tools, markmyimage gives you the power and flexibility you need.
Equip your users with a full set of tools: Pen, Highlighter, Lines, Arrows, Shapes, and Text. You can even overlay new images onto the canvas.
Users can select, move, scale, and rotate any annotation. Customize colors, stroke widths, and styles (solid, dashed, dotted) with a Tailwind-based palette.
Features a draggable toolbar, undo/redo functionality, and a simple API. Export your final annotations as PNG, JPEG, or SVG.
Get Started in 60 Seconds
Just add the package and import the AnnotationTool component. You'll be up and running in under a minute.
1. Installation
Add mark-my-image to your project via npm.
2. Add the React Component
Import the `AnnotationTool` component and pass it an image source.
That's it! You're ready to start annotating. Dive into our Getting Started Guide to learn more.
Free & Open-Source
Our licensing is simple. Use mark-my-image in your projects for free under the AGPL-3.0 license. See our attribution rules for use in proprietary applications.
Open-Source (AGPL-3.0)
For personal & public-facing projects.
$0- All features included
- Community support
- Use in closed-source apps with watermark
Removal of the "Powered by" watermark requires a commercial license. See our Contact page for details.
Show Your Support
If you find markmyimage useful, giving us a star on GitHub is a great way to show your appreciation and helps other developers discover the project.
Frequently Asked Questions
If you don't see your question here, feel free to open an issue on GitHub.
The AGPL-3.0 license normally requires you to share your source code. We provide an exception that allows you to use mark-my-image in proprietary, closed-source apps as long as the "Powered by markmyimage" watermark remains visible.
A commercial license is required if you want to remove the "Powered by markmyimage" watermark from the user interface. Please use the contact page to request a license.
Absolutely. The component is built to be extensible. You can customize the toolbar, colors, stroke widths, and styles to perfectly match your application's design.
You can export the final annotated image as a PNG, JPEG, or SVG file directly from the component.