PhotoEditor SDK integration example for ReactJS

PhotoEditor SDK integration example for ReactJS

This repository contains an example for integrating PhotoEditor SDK into a ReactJS application. PhotoEditor SDK provides a ReactUI which exposes a React Component that can be easily used inside any ReactJS application.


PhotoEditor SDK is a product of GmbH. In order to use PhotoEditor SDK inside one of your products, please request a license.

Let’s get started!

We will be using use create-react-app for simplicity.

Create a project
  • Start a new project with create-react-app
npx create-react-app my-app
cd my-app
npm run start

Note: (npx comes with npm 5.2+ and higher, see instructions for older npm versions)

  • Then open http://localhost:3000/ to see yout app.
Installing peer dependencies

PhotoEditor SDK needs following peer dependencies:

  1. React >= 16.3
  2. React DOM >= 16.3
  3. Styled Components >= 4.4

React and React DOM are already insalled using Create React App.

  • Run npm install --save styled-components@^4.4 to include Styled Components in the project.
Installing PhotoEditor SDK
  • Run npm install --save photoeditorsdk@latest.

You will be left with following structure in your node_modules/photoeditorsdk/

├── assets
│   ├── adjustment
│   ├── colorpicker
│   ├── controls
│   ├── filter
│   ├── focus
│   ├── font
│   ├── frame
│   ├── overlay
│   ├── sticker
│   ├── textdesign
│   └── transform
├── esm
└── cjs

The package contains three folders that you need to integrate to your project.

  1. assets: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.
  2. cjs: It contains PhotoEditor SDK UI bundled as commonjs modules, will be loaded for older browser versions.
  3. esm: It contains PhotoEditor SDK UI bundled as ECMAScript modules, will be loaded for supported modern browser versions.
  • Copy the assets from node_modules/photoeditorsdk to public.
Creating an Editor component
import { UIEvent, PhotoEditorSDKUI } from 'photoeditorsdk'

export class PhotoEditorSDK extends React.Component {
  componentDidMount() {
  async initEditor() {
    const editor = await PhotoEditorSDKUI.init({
      container: '#editor',
      image: '../example.jpg', // Image url or Image path relative to assets folder
      license: ''
    console.log('PhotoEditorSDK for Web is ready!')
    editor.on(UIEvent.EXPORT, (imageSrc) => {
      console.log('Exported ', imageSrc)

  render() {
    return (<div id="editor" style={{ width: '100vw', height: '100vh' }} />)

Download Details:

Author: imgly

Source Code:

#react #reactjs #javascript

PhotoEditor SDK integration example for ReactJS
7.75 GEEK