A React image editor using Fabric.js
npm install fabri-pix


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
---
``bash`
yarn add fabri-pixor
npm install fabri-pix
---
`bash
import { ImageEditorWrapper } from 'fabri-pix';
import 'fabri-pix/dist/fabri-pix.css'; // Required: Import the CSS for styles
export default function App() {
return (
/>
);
}
`
---
| 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 | (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 đ
1. Fork the repository
2. Create your feature branch (git checkout -b feature/my-new-feature)git commit -m 'Add some feature'
3. Commit your changes ()git push origin feature/my-new-feature`)
4. Push to the branch (
5. Create a new Pull Request
---
MIT Š Vikhyat Singh