FabriPix is a plug-and-play, lightweight, and fully customizable React image editor built using Fabric.js. It allows you to annotate, draw, add text, insert shapes, blur, crop and apply simple edits — all inside your React apps easily!
- ✂️ Crop Images — easily crop any part of the image.
- 🔒 Blur Multiple Parts — hide or censor sensitive information.
- 🔍 Zoom In and Zoom Out — zoom for precise edits.
- ✋ Pan Mode — move around the canvas smoothly.
- ↩️ Undo and Redo — quickly revert or redo any action.
- 🕒 Edit History Tracking — view and manage all your edits step-by-step.
- 💾 Download edited image as PNG with high quality
- 📄 JSON save/load for annotations
- ⚡️ Fast and responsive — powered by Fabric.js 6+
- 🔢 Step Creator — add sequential numbered steps to guide users.
- 🟥 Step Creator with Rectangle Box — highlight steps inside rectangular shapes.
- 🧩 Shapes — draw Rectangles, Circles, Stars, and Arrows effortlessly.
- 🎯 Advanced Arrow Tool — create flexible at both end arrows.
- 🗨️ Callout Boxes — create callouts with text and numbers pointing anywhere.
- 📝 Textbox — add simple or styled text anywhere on the image.
- 😄 Emoji Support — insert fun emojis to express better.
- 🖼️ Add Custom Images — upload and place your own icons, stamps, or logos.
- ✏️ Pencil Draw Tool — free-hand drawing for rough annotations.
- ➰ Line Paths — connect points smoothly using lines.
- 🎨 Color pickers and Other Context Menu for all the annotations
yarn add fabri-pix
# or
npm install fabri-piximport { ImageEditorWrapper } from 'fabri-pix';
import 'fabri-pix/dist/fabri-pix.css'; // Required: Import the CSS for styles
export default function App() {
return (
<ImageEditorWrapper
imageUrl="https://your-image-url.com/sample.png"
/>
);
}| Prop | Type | Description | Required |
|---|---|---|---|
imageUrl |
string |
URL of the image you want to load onto the editor | ✅ |
onSave |
(blob, json) => void |
Callback when the user saves (returns image Blob and canvas JSON) | ✅ |
onCancel |
() => void |
Callback when the user clicks on cancel button | ✅ |
loadFromJson |
any |
JSON to pre load annotations | ✅ |
exportJson |
(json) => void |
Callback when the user clicks on export json button (returns canvas JSON) | ✅ |
showExportJson |
boolean |
Whether to show the export json button | ✅ |
options |
Partial<Options> |
(optional) Editor fully customization options (coming soon) | ❌ |
- ✂️ Filter and Resize tools
- 🔄 Rotate and Flip tools
- 🧠 AI Auto-Annotation (detecting objects in the image)
- ⚡️ Better performance for huge images
- NPM: https://www.npmjs.com/package/fabri-pix
- GitHub Repo: https://github.com/vikhyatsingh123/fabri-pix
Contributions are very welcome! Please open issues, bug reports, or submit pull requests 🙌
- Fork the repository
- Create your feature branch (
git checkout -b feature/my-new-feature) - Commit your changes (
git commit -m 'Add some feature') - Push to the branch (
git push origin feature/my-new-feature) - Create a new Pull Request
MIT © Vikhyat Singh