We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Vue Image Editor is a UI component for editing and enhancing images. With built-in support users can crop, rotate, flip, zoom, and apply filters. Additionally, users can annotate images with shapes such as rectangles, ellipses, lines, and text, as well as freehand drawings.

Selection and cropping

The Vue Image Editor makes it easy to get a perfect crop every time using multiple selection options, including square, circle, and customizable aspect ratios. The selection region can be dragged and resized for cropping an image.

Custom selection

Draw a custom selection rectangle on an image which can be repositioned by dragging and resizing it to get the desired selection.

Vue Image Editor custom selection

Vue Image Editor square selection

Square selection

Crop images into perfect square regions or maintain their aspect ratios.

Circle selection

Crop images into perfect circular regions.

Vue Image Editor circle selection

Vue Image Editor ration selection

Predefined aspect ratios

Customize selection regions for cropping images according to predefined aspect ratios, including 4:3, 7:5, 16:9, and more.

Image annotations

The Image Editor has multiple annotation tools, including text, freehand drawings, and shapes like rectangles, ellipses, and lines.

Text annotation

Users can add text (captions, labels, or other types of text-based information) to an image using the text annotation tool. The text annotation can be inserted anywhere on the image and customized by changing its color, font family, font size, and font styles such as bold and italic.

Vue Image Editor text shape

Vue Image Editor freehand drawing

Freehand drawing annotation

Add hand-drawn content to an image using a mouse or touch. With the freehand drawing annotation, users can customize the pen color and stroke width to suit their needs. Also, it can be combined with other annotation tools, such as text and shapes, to create rich, annotated images.

Shapes annotation

Add shapes, such as rectangles, ellipses, and lines, to an image. With the shape annotation tool, customize the border color, fill color, and border width of the shapes.

Vue Image Editor shapes

Transform images

The Image Editor has built-in support to transform images by rotating, flipping, and zooming.

Rotate an image

Users can rotate images with annotations clockwise or counterclockwise.

Vue Image Editor rotate

Vue Image Editor flip

Flip an image

Flip images with annotations horizontally or vertically for creating a mirror image of the original image.

Zoom in/out images

Users can adjust the size of an image by zooming in or out to fine-tune their edits and achieve the exact results. The pan tool can also be used to reveal hidden areas of an image.

Vue Image Editor zoom

Vue Image Editor

Loading an image initially

Easily load an image into the image editor as a base 64 string or URL. URLs can be PNG, JPEG, and SVG image types.

Image Editor toolbar

Offers a wide range of tools for annotating, selecting, cropping, zooming, panning, rotating, flipping, filtering, and more, enabling users to fully edit and manipulate their images. Additionally, users can customize the toolbar by defining some items or the entire toolbar.

Vue Image Editor Toolbar

Vue Image Editor Export

Exporting and saving images

Exporting images to Base64 for database storage, and saving the image as PNG, JPEG, or SVG.


Localize user interface strings of the Vue Image Editor component using the localization (l10n) library.

Vue Image Editor Localization

Touch-friendly editing

For a seamless experience on all devices, the Vue Image Editor includes a responsive mode that adapts the UI for mobile devices and offers a great user experience on phones, tablets, and desktops.

Developer-friendly APIs

With its extensive set of APIs, developers can control the appearance and behaviors of the Image Editor to suit their needs.

Built-in themes

The Vue Image Editor features built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these themes or create their own using SASS variables or the Theme Studio application to achieve the desired look and feel.

Other supported frameworks

In addition to Vue, the Image Editor component is also available for the React, Angular, and JavaScript frameworks. You can access the component on these platforms using the links below.

Vue Image Editor Code Example

Easily get started with the Vue Image Editor using a few simple lines of Vue codes as demonstrated below. Also explore our Vue Image Editor Example that shows you how to render and configure the Image Editor in Vue.

    <div class="control-section">
        <div class="col-lg-12 e-img-editor-sample">
            <ejs-imageeditor :theme="themeValue" id="image-editor" ref="imageEditorObj" :created = "created">

import Vue from "vue";
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";

export default Vue.extend({
  data: function() {
    return {
        theme: 'Bootstrap5'
  methods: {
    created: function() {
        if (Browser.isDevice) {
        } else {
        this.themeValue = window.location.href.split('#')[1].split('/')[1];
  computed: {
        themeValue: {
            get: function () {
                return this.theme;
            set: function (theme) {
                this.theme = theme


Frequently Asked Questions

  • Built-in support to crop, rotate, flip, zoom, and annotate.
  • Convert images to base64 and download images in JPEG, PNG, and SVG formats.
  • Flexible and completely customizable user interface.
  • One of the best Vue Image Editor components in the market, that offers feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Expansive learning resources such as demos and documentation to let you get started quickly with Vue Image Editor.

You can find our Vue Image Editor demo, which demonstrates how to render and configure the Image Editor.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile