Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-image-editor
syncfusion-react-image-editor Master Syncfusion React Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-image-editorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-react-image-editor description Master Syncfusion React Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
Implementing Syncfusion React Image Editor
The Syncfusion React Image Editor is a comprehensive, feature-rich component for editing images directly in your React applications. It provides an intuitive interface with powerful tools for transformations, annotations, effects, and more.
Component Overview
The Image Editor combines a canvas-based editing environment with a comprehensive toolbar and contextual tools. It supports:
Multiple Input Sources: Files, URLs, base64, blobs, file managers, treeviewsRich Annotation Support: Text (with styling), shapes, freehand drawings, watermarksProfessional Effects: Filters and fine-tuning controlsAdvanced Operations: Z-order management, redaction, frame decorationAccessibility First: Full keyboard navigation, WCAG compliance, RTL support, 120+ localization keysFlexible Integration: Standalone or within dialogs, with customizable toolbars
Documentation and Navigation Guide
🔹 API Reference
📄 Read: references/api.md
Complete API documentation with all properties, methods, and events
Properties overview (core, toolbar, settings)
Methods for image operations, transformations, annotations
Events for lifecycle, interactions, effects, and toolbars
Enums and type definitions (ArrowheadType, FrameType, RedactType, etc.)
Complete working examples with verified method signatures
Getting Started
Installation with Vite and create-react-app
CSS imports and theme setup
Basic component initialization
Setting width, height, and initial rendering
Opening and Saving Images
Open from file paths, URLs, base64 strings, blobs
Open from file uploader, file manager, and treeview
Save/export as PNG, JPEG, SVG, WEBP
Image dimensions and aspect ratio control
File opened, saving, and lifecycle events
Selection and Cropping
Insert custom, square, and circle selections
Crop with aspect ratios (2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, 16:9)
Crop method and selection events
Maintain original image size during cropping
Lock selection area during resizing
Transform: Rotate, Flip, and Straighten
Rotate clockwise/counter-clockwise by degrees
Flip horizontally and vertically
Straighten images with fine degree adjustments (-45° to +45°)
Transform annotations along with image
Rotating and flipping events
Zoom and Pan Operations
Zoom in/out with configurable min/max factors
Pan when zoomed or during cropping
Zoom triggers (toolbar, pinch, mouse wheel, keyboard)
Zooming and panning events
Zoom point calculations
Text Annotations
Add text with position, content, and font settings
Text styling (bold, italic, underline, strikethrough)
Font families, sizes, and colors
Multiline text with newline characters
Delete text annotations
Customize font color via shapeChanging event
Freehand Drawing
Enable/disable freehand drawing mode
Customize stroke width and color
Delete freehand annotations
Adjust stroke during drawing via shapeChanging event
Shape Annotations
Draw rectangles, ellipses, lines, arrows, and paths
Customize shapes with stroke color, stroke width, and fill color
Rotate shapes with degree parameter
Delete shape annotations
Customize default stroke colors
Shape changing and customization events
Image Annotations
Add images or icons as annotations
Control position, size, rotation, and opacity
Aspect ratio preservation
Watermarks and decorative elements
Filters
Apply predefined filters (Chrome, Cold, Warm, Grayscale, Sepia, Invert)
Image filtering event
Reset filter to original
Fine-Tuning
Adjust brightness, contrast, saturation
Control hue, exposure, blur, opacity
Finetune value changing events
Real-time adjustments with sliders
Undo and Redo
Undo/redo operations with 16-step history
Keyboard shortcuts (Ctrl+Z, Ctrl+Y)
History management and limits
Toolbar Customization
Built-in toolbar items (20+ default tools)
Add, remove, enable, disable toolbar items
Custom toolbar items with event handlers
Contextual toolbar for annotations
Toolbar templates for complete customization
Toolbar created and item clicked events
Quick Access Toolbar
Quick access toolbar for annotations
Show/hide quick access toolbar
Add custom items to quick access toolbar
Quick access toolbar open event
Resize Image
Resize with or without aspect ratio
Width and height parameters
Resizing event with before/after dimensions
Frame Decoration
Apply frames (Mat, Bevel, Line, Inset, Hook)
Customize frame color, size, and line style
Frame changing event
Z-Order Layering
Bring forward/send backward annotations
Bring to front/send to back
Manage annotation layer order
Redact Sensitive Information
Blur sensitive areas
Pixelate sensitive information
Redact CRUD operations (select, update, delete, get)
Privacy and compliance
Accessibility and Localization
WCAG 2.2, Section 508 compliance
Screen reader support
Keyboard shortcuts (Ctrl+Z, Ctrl+S, Ctrl+O, Delete, Enter, Escape)
RTL language support
Localization with 120+ locale keys
Image Restrictions and Validation
Allowed file extensions (.jpg, .png, .svg, .webp, .bmp)
Min and max file size restrictions
File validation and error alerts
Clear Image
Clear editor state
Dialog reuse patterns
Remove previously loaded images
Fit to Width and Height
Fit image to editor container width
Fit image to editor container height
Zoom calculations for perfect fit
Render in Dialog
Render Image Editor within Dialog component
Content template integration
Dialog show/hide patterns
Reset Image
Reset all modifications to original state
Restore unmodified version
Clear annotations and effects
Quick Start Example import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor' ;
import React from 'react' ;
function App (let imgObj : ImageEditorComponent ;
function imageEditorCreated (void {
imgObj.open ('https://ej2.syncfusion.com/react/documentation/image-editor/images/bridge.jpeg' );
}
return (
<div >
<ImageEditorComponent
ref ={(img) => { imgObj = img }}
width="550px"
height="350px"
created={imageEditorCreated}
/>
</div > export default App ;
Common Patterns
Pattern 1: Open + Edit + Save Workflow
Open image via open() method
Apply transformations, annotations, or effects
Use export() to save as PNG/JPEG/SVG/WEBP
Optionally convert to base64 or blob for backend storage
Pattern 2: Responsive Toolbar
Define custom toolbar items in toolbar property
Handle clicks via toolbarItemClicked event
Execute methods like rotate(), zoom(), drawText() based on clicked item
Update contextual toolbar via toolbarUpdating event
Pattern 3: Annotation Workflow
Enable annotation mode (freehand, text, shape)
Customize via shapeChanging event (color, stroke, font)
Delete via deleteShape() with shape ID
Manage layers via z-order methods
Pattern 4: Dialog Integration
Render Image Editor in Dialog's content template
Load image when dialog opens via fileOpened event
Call clearImage() before closing dialog
Retrieve edited image data via export() or getImageData()
Pattern 5: Filter + Finetune Pipeline
Apply filter via applyImageFilter()
Fine-tune via finetuneImage() (brightness, contrast, etc.)
Listen to imageFiltering and finetuneValueChanging events
Combine effects for professional results
Key Properties Property Type Purpose widthstring Editor canvas width (e.g., "550px", "100%") heightstring Editor canvas height (e.g., "350px", "100%") toolbararray Customize toolbar items and visibility fontFamilyobject Add custom font families uploadSettingsobject Configure file restrictions (extensions, size) zoomSettingsobject Set min/max zoom factors showQuickAccessToolbarboolean Show/hide quick access toolbar localestring Set localization (e.g., 'de-DE')
Key Events Event Trigger Use Case createdComponent initialized Load image on startup fileOpenedImage loaded Add watermarks, apply defaults beforeSaveBefore export Validate, add metadata croppingDuring crop Prevent scaling, lock dimensions zoomingDuring zoom Validate zoom level rotatingDuring rotate Track rotation angle shapeChangingAnnotation modified Customize stroke, font toolbarUpdatingToolbar rendered Add/remove contextual items
Supported File Formats Open: PNG, JPEG, JPG, SVG, WEBP, BMP (local, URL, base64, blob)
Save/Export: PNG, JPEG, SVG, WEBP
Next Steps 