Syncfusion React Image Editor

SyncfusionDocument & Image ToolsJavaScript

A comprehensive React component for advanced image editing and annotation.

  • Supports cropping, rotating, flipping, zooming, and applying filters.
  • Enables annotations with shapes, text, and freehand drawing.
  • Exports images in JPEG, PNG, and SVG formats with customizable toolbar.
Syncfusion logo

Prices from:

Loading...
Available in
Syncfusion Essential Studio UI Component SuiteLoading
Syncfusion Essential Studio EnterpriseLoading
Syncfusion React Image Editor product image
Syncfusion React Image Editor is a feature-rich component that enables image viewing, editing, and annotation directly within web applications. It supports common image manipulation tasks such as cropping, resizing, rotating, and drawing, helping developers embed interactive image editing into their apps.

Image Loading and Saving

Open images from base64, ImageData, or URLs supporting PNG, JPEG, and SVG formats. Save edited images in multiple formats with control over file names and quality.

Image Selection and Cropping

Select image regions using custom, square, circle, or predefined aspect ratio options. Crop images effectively by dragging and resizing selection areas.

Image Transformation

Rotate images clockwise or counterclockwise in 90-degree increments and flip images horizontally or vertically, including all applied annotations.

Annotations Support

Add text, shapes (rectangles, ellipses, lines), freehand drawings, image overlays, paths, and arrows. Customize color, stroke width, font properties, and positioning.

Zoom and Pan Functionality

Adjust image scale and position with zooming using keyboard, mouse wheel, or touch gestures. Pan to view different image areas dynamically.

Toolbar Customization

Modify the built-in toolbar by adding, removing, or replacing items with custom jsx templates to tailor the user interface to specific needs.

Image Filters and Fine-Tuning

Apply predefined filters like sepia, grayscale, invert, warm, and cold. Fine-tune image properties including brightness, contrast, exposure, hue, saturation, opacity, and blur through UI or APIs.

Responsive, Touch-Friendly Interface

The component automatically adapts to various screen sizes and input types, offering a smooth experience on desktops, tablets, and mobile devices.

Z-Order Management for Annotations

Control the layering of annotations to manage overlap and visibility, essential for creating complex image compositions.

Developer-Friendly APIs and Theming

Offers extensive APIs for programmatic control and supports multiple built-in themes with options for custom theming using SASS variables or Theme Studio.

Product Compatibility

Review the details below to ensure this product is supported within your environment.

Component Type

  • JavaScript

JavaScript Platform

  • React