Looking for
or
?
We've rebranded!
API Docs

Migration Guide

This is a reference for upgrading your site from PhotoEditor SDK v4 to v5. While there’s a lot covered here, you probably won’t need to do everything for your site. We’ll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v5!

We will be supporting two UIs as before, but we are now moving away from the terminology DesktopUI and ReactUI, instead now they are called AdvancedUI and BasicUI. Refer to the UIs documentation for more information.

Update dependencies

You need to update your package.json file in order to use the latest version of phototeditorsdk.

  "dependencies": {
-    "photoeditorsdk": "^4.20.0"
+    "photoeditorsdk": "^5.6.1"
  }

Update the React and React DOM Version. It was increased from ^15.0.0 to ^16.13.1. This allows us to rely on the Context API. It also needs to have a new peer dependency styled-components.0

  "dependencies": {
-    "react": "^15.0.0"
-    "react-dom": "^15.0.0"
+    "react": "^16.13.1"
+    "react-dom": "^16.13.1"
+    "styled-components": "^4.4.0"
  }

Handling breaking changes

Updating imports

- import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
- import Styles from 'photoeditorsdk/css/PhotoEditorSDK.UI.DesktopUI.css'
+ import { PhotoEditorSDKUI } from 'photoeditorsdk'

If you are directly rendering a React component

- import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
+ import { PhotoEditorSDKUIComponent } from 'photoeditorsdk'

Updating configuration

While we tried to minimize the number of breaking changes and make it backward compatible as much as possible, we believe that some breaking changes in the configuration were required.

Please visit the configuration documentation for the new options.

- const editor = new PhotoEditorUI(config)
+ const editor = await PhotoEditorSDKUI.init(config)

If you are directly rendering the React component

- <PhotoEditorUI.ReactComponent {...config} />
+ <PhotoEditorSDKUIComponent {...config} />

Handling events

Renaming UI events. Some of the previously supported events are now deprecated. Refer to the events documentation for more information.

+  import { UIEvent } from 'photoeditorsdk'

-  editor.on(PhotoEditorUI.Events.EDITOR_READY, () => {
+  editor.on(UIEvent.EDITOR_READY, () => {

If you are directly rendering the React component, handling of the event is done in the similar way.

+  import { UIEvent } from 'photoeditorsdk'

public componentDidMount() {
  const ui = this.pesdk.current.ui
-  ui.on(PhotoEditorUI.Events.EDITOR_READY, () => {
+  ui.on(UIEvent.EDITOR_READY, () => {

}

Canvas Renderer

Hitherto we supported two rendering engines for PhotoEditor SDK UI i.e., WebGL and Canvas. Considering browser support we will here-forth be supporting only WebGL.