Toolbar in the React Image Editor component
18 Jul 202324 minutes to read
The toolbars in the Image Editor are a key component for interacting with and editing images. They provide a range of tools and options that can be customized to suit the needs and preferences. Add or remove items from the toolbar to create a personalized set of tools, or they can even create their own custom toolbar from scratch. This flexibility and customization allow them to create a unique image editing experience that is tailored to their specific needs and workflow.
In the Image Editor, the toolbar property provides the ability to customize the toolbar by adding or removing items, as well as defining a completely custom toolbar. This feature is valuable for creating a personalized image editing experience that aligns with specific requirements and workflows.
Built-in toolbar items
Specifies the toolbar items to perform UI interactions. Refer to the built-in toolbar items for the default value.
- Crop
- Transform
- Annotate
- ZoomIn
- ZoomOut
- Open
- Reset
- Save
- Pan
Add a custom toolbar items
The toolbar property in the Image Editor allows to add or remove toolbar items to include only the tools they frequently use, streamlining the editing process and reducing clutter.
Here is an example of adding custom toolbar items to rotate and flip transformation using toolbar property.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', { text: 'Custom' }];
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
toolbarItemClicked(args) {
if (args.item.text == "Custom") {
this.imgObj.rotate(90);
}
}
render() {
return (<div id="wrapperDiv">
<ImageEditorComponent toolbar={this.toolbar} ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} toolbarItemClicked={this.toolbarItemClicked.bind(this)}/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
let toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', {text: 'Custom'}];
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
function toolbarItemClicked(args): void {
if(args.item.text == "Custom") {
imgObj.rotate(90);
}
}
return (
<div id="wrapperDiv">
<ImageEditorComponent toolbar={toolbar} ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbarItemClicked={toolbarItemClicked}/>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Show or hide a toolbar
The toolbar property controls the visibility of the toolbar in the Image Editor. When the toolbar property is set to an empty list, the toolbar is hidden. Conversely, if the toolbar property contains a list of items, the toolbar is shown, displaying the specified items. This feature provides flexibility for users to personalize their image editing experience.
Here is an example of hiding the toolbar of the image editor using toolbar property.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
toolbar = ['Annotate', 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut'];
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} toolbar = {toolbar}>
</ImageEditorComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent, ToolbarEventArgs } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
let toolbar = ['Annotate' , 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut'];
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {toolbar}>
</ImageEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Show or hide a toolbar item
The toolbar property is utilized to control the visibility of toolbar items in the Image Editor. By default, the toolbar property includes the default toolbar items. So, if you wish to hide the default toolbar items then you need to explicitly define the required items using toolbar property. This allows you to customize the toolbar by displaying only the specific items you require, tailoring the editing experience to your preferences.
Here is an example of hiding the cropping and selection toolbar items using toolbar property.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
toolbar = ['Annotate' , 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut'];
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} toolbar = {toolbar}>
</ImageEditorComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent, ToolbarEventArgs } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
let toolbar = ['Annotate' , 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut'];
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {toolbar}>
</ImageEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Enable or disable a toolbar item
The toolbar property is employed to enable or disable toolbar items in the Image Editor. By default, the toolbar property includes the default toolbar items, and these items cannot be disabled. However, if you have defined custom toolbar items using the toolbarItemModel, you can enable or disable them by configuring their respective properties within the toolbar property. This provides the flexibility to control the availability and functionality of custom toolbar items based on your specific requirements.
Here is an example of disabling the custom toolbar item using toolbar property.
Toolbar template
The toolbarTemplate property in the Image Editor provides the capability to fully customize the toolbar by supplying a custom template. This feature is valuable when you want to create a distinct and personalized image editing experience that goes beyond the default toolbar or the customizable toolbar options offered by the Image Editor. By defining a custom template for the toolbar, you have complete control over its layout, appearance, and functionality. This empowers you to design a unique and tailored toolbar that aligns perfectly with your specific requirements and desired user experience.
Here is an example of using toolbarTemplate to render only the button to toggle the freehand draw option.
The toolbar of the Image Editor can be replaced with the user specific UI using the toolbarTemplate property.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
buttonTemplate(data) {
return (<ButtonComponent cssClass='e-primary' content='Click' onClick={this.btnClick.bind(this)}/>);
}
btnClick() {
this.imgObj.freeHandDraw(true);
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent toolbarTemplate={this.buttonTemplate} ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} toolbar = {[]}/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
function buttonTemplate(data) {
return (<ButtonComponent cssClass='e-primary' content='Click' onClick = {btnClick}/>);
}
function btnClick(): void {
imgObj.freeHandDraw(true);
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent toolbarTemplate={buttonTemplate} ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}/>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customize Contextual Toolbar
The toolbarUpdating event is triggered when inserting or selecting annotations, which opens the contextual toolbar in the Image Editor. Within this event, the toolbarItems property in the ToolbarEventArgs is utilized to add or remove contextual toolbar items.
In the following example, the contextual toolbar for rectangle will be rendered with only stroke color by excluding fill color and stroke width using toolbarUpdating event.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
toolbarUpdating(args) {
if (args.toolbarType === 'pen') {
args.toolbarItems.forEach(item => {
if (item.align === 'Center' && (item.tooltipText === 'Stroke Width' || item.tooltipText === 'Remove' || item.type === 'Separator')) {
item.visible = false;
}
});
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} toolbarUpdating={this.toolbarUpdating.bind(this)} created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
</ImageEditorComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent, ToolbarEventArgs } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ItemModel } from '@syncfusion/ej2-navigations';
function App() {
let imgObj: ImageEditorComponent;
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
function toolbarUpdating(args: ToolbarEventArgs): void {
if (args.toolbarType === 'pen') {
args.toolbarItems.forEach((item: ItemModel) => {
if (item.align === 'Center' && (item.tooltipText === 'Stroke Width' || item.tooltipText === 'Remove' || item.type === 'Separator')) {
item.visible = false;
}
});
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} toolbarUpdating={toolbarUpdating} created={imageEditorCreated}>
</ImageEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Toolbar item clicked event
The toolbarItemClicked event is triggered when a toolbar item is clicked in the Image Editor. This event is particularly useful when you have added custom options to both the main toolbar and contextual toolbar, as it allows you to capture the user’s interaction with those custom options. By subscribing to the toolbarItemClicked event, you can execute specific actions or handle logic based on the toolbar item that was clicked.
Here is an example of toolbar item clicking event using toolbarItemClicked property.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', { text: 'Custom' }];
toolbarItemClicked (args) {
if (args.item.text === 'Custom') {
imageEditorObj.rotate(90);
}
}
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('flower.png');
}
else {
this.imgObj.open('bridge.png');
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} toolbar={this.toolbar} created={this.imageEditorCreated.bind(this)} toolbarItemClicked={this.toolbarItemClicked.bind(this)}>
</ImageEditorComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent, ToolbarEventArgs, ClickEventArgs } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
let toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', {text: 'Custom'}];
function toolbarItemClicked (args: ClickEventArgs) {
if (args.item.text === 'Custom') {
imgObj.rotate(90);
}
}
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('flower.png');
} else {
imgObj.open('bridge.png');
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} toolbar={toolbar} created={imageEditorCreated} toolbarItemClicked={toolbarItemClicked} >
</ImageEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-image-editor/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>