Docs
API Docs

Getting Started

Integration Tutorial


Integrating our editor into your web application is easy as pie. However, if you can’t wait to see the editor in action you can find a working demo integration here.

Using a Trial License

Make sure you have a standard license before adding it properly to your running project. A trial license is valid for only 30 days and will afterwards disable the export function for your customers. Your trial license should therefore be removed and substituted by a standard license. More information can be found here.

Note: Since we’re working with the latest web technologies, all code samples are using the ECMAScript 6 standard. If you’re using an older ECMAScript / JavaScript standard, please use Babel to compile the examples to ES5.

What you need

First, download the latest release from our public GitHub repository and extract it. Afterwards, you will be left with the following folder structure

├── assets
│   ├── brushes
│   ├── filters
│   ├── fonts
│   ├── frames
│   ├── overlays
│   ├── stickers
│   └── ui
├── css
└── js
    └── vendor

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

  1. assets folder: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.
  2. css folder: It contains all stylesheets for the PhotoEditor SDK UI.
  3. js folder: It contains all javascript sources of the PhotoEditor and its dependencies.

Integration

Copy the folders assets, css and js into your project. Then include the SDK and the UI JavaScript files as well as the CSS files inside your <head> tag:

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
</head>
<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.ReactUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.ReactUI.min.css" />
</head>

Now, create a <div> tag as a container for the editor. The editor will adapt its size according to the dimensions of the container. For the sake of simplicity, specify the dimensions using inline styles:

<div id="editor" style="width: 100vw; height: 100vh;"></div>

Finally, in order to initialize the editor, instantiate the UI using JavaScript. Add the following code right below our containing <div> element:

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
        var container = document.getElementById('editor')
        var editor = new PhotoEditorSDK.UI.DesktopUI({
        container: container,
        // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image: image
        },
        assets: {
          // This should be the absolute path to your `assets` directory
          baseUrl: '/assets'
        }
      })
    }
    // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
    image.src = './example.jpg'
  }
</script>
<script>
  window.onload = function () {
    var container = document.getElementById('editor')
    var editor = new PhotoEditorSDK.UI.ReactUI({
      container: container,
      // Please replace this with your license; https://www.photoeditorsdk.com/dashboard/subscriptions
      license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
      assets: {
        // This should be the absolute path to your `assets` directory
        baseUrl: '/assets'
      }
    })
  }
</script>

CORS

If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.

Otherwise, you will see errors such as
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
or
Unable to get image data from canvas because the canvas has been tainted.

Please follow the instructions on how to properly configure CORS here.

Ready to go!

This was all that is necessary to get the PhotoEditor SDK up and running. For simplicity here is the whole source code of the html file:

<!DOCTYPE html>
<html>
  <head>
    <!-- React Dependencies for the SDK UI -->
    <script src="js/vendor/react.production.min.js"></script>
    <script src="js/vendor/react-dom.production.min.js"></script>
    <!-- PhotoEditor SDK-->
    <script src="js/PhotoEditorSDK.min.js"></script>
    <!-- PhotoEditor SDK UI -->
    <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
    <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
  </head>

  <body>
    <div id="editor" style="width: 100vw; height: 100vh;"></div>
    <script>
      window.onload = function () {
        var image = new Image()
        image.onload = function () {
            var container = document.getElementById('editor')
            var editor = new PhotoEditorSDK.UI.DesktopUI({
            container: container,
            // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
            license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
            editor: {
              image: image
            },
            assets: {
              // This should be the absolute path to your `assets` directory
              baseUrl: '/assets'
            }
          })
        }
        // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
        image.src = './example.jpg'
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <!-- React Dependencies for the SDK UI -->
    <script src="js/vendor/react.production.min.js"></script>
    <script src="js/vendor/react-dom.production.min.js"></script>
    <!-- PhotoEditor SDK-->
    <script src="js/PhotoEditorSDK.min.js"></script>
    <!-- PhotoEditor SDK UI -->
    <script src="js/PhotoEditorSDK.UI.ReactUI.min.js"></script>
    <link rel="stylesheet" href="css/PhotoEditorSDK.UI.ReactUI.min.css" />
  </head>

  <body>
    <div id="editor" style="width: 100vw; height: 100vh;"></div>
    <script>
      window.onload = function () {
        var container = document.getElementById('editor')
        var editor = new PhotoEditorSDK.UI.ReactUI({
          container: container,
            // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
            license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
          assets: {
            // This should be the absolute path to your `assets` directory
            baseUrl: '/assets'
          }
        })
      }
    </script>
  </body>
</html>

Launch your favorite webserver and enjoy our editor. If you don’t know which webserver to use, give python -m SimpleHTTPServer 8000` a try.

In any case, you can find a working demo integration here.

Questions ?

This guide shows you how to integrate our editor into your own application. If you run into any error messages or other problems during this process or should you have further questions about the editor itself, then please take a look at our FAQ page, which offers answers to the most common questions and errors you might run into.

If the FAQ page doesn’t answer your questions, please contact us and we will be more than happy to help!