Skip to main content
PESDK/Web/Introduction/Integrations

Getting Started - Vanilla JS

Getting started integration tutorial

Let's get started!#

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

This snippet includes the minimal code necessary to get the editor running in a simple Web file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Photoeditor SDK</title>


    <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom-server.browser.production.min.js"></script>
    <script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.min.js"></script>
    <script src="https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/umd/no-polyfills.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="editor" style="width: 100vw; height: 100vh;"></div>
    <script>
      PhotoEditorSDK.PhotoEditorSDKUI.init({
        container: '#editor',
        // Please replace this with your license: https://img.ly/dashboard
        license: '',
        image:
          'https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/assets/example.jpg',
        assetBaseUrl:
          'https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/assets',
      });
    </script>
  </body>
</html>

Let's go step by step#

Adding peer dependencies#

PhotoEditor SDK needs the following peer dependencies:

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

We would recommend to download these files and add them to your js folder instead of providing external links to your customers.

<script src="./js/photoeditorsdk/react.production.min.js"></script>
<script src="./js/photoeditorsdk/react-dom.production.min.js"></script>
<script src="./js/photoeditorsdk/react-dom-server.browser.production.min.js"></script>
<script src="./js/photoeditorsdk/styled-components.min.js"></script>

Adding the PhotoEditor SDK#

The files for the PhotoEditor SDK can be copied from our public GitHub repo to your application.

umd/index.js includes all necessary polyfills to get the editor running in IE11. You must also copy no-polyfills.tsto your project as this is required by theindex.js` file.

<script src="./js/photoeditorsdk/index.js"></script>

If you want to provide your own polyfills you will only need umd/no-polyfills.js

<script src="./js/photoeditorsdk/no-polyfills.js"></script>

Initialising the PhotoEditor SDK#

<body>
  <div id="editor" style="width: 100vw; height: 100vh;"></div>
  <script>
    const initEditor = async () => {
      const editor = await PhotoEditorSDK.PhotoEditorSDKUI.init({
        container: '#editor',
        // Please replace this with your license: https://img.ly/dashboard
        license: '',
        image: '',
        assetBaseUrl: '',
      });


      // The export event will be called if the user clicks on the export button
      editor.on(PhotoEditorSDK.UIEvent.EXPORT, async image => {
        // handle the returned image here
      });
    };


    initEditor();
  </script>
</body>

Providing the assets#

The assets folder can be copied from the public GitHub repo to your project. Afterwards you need to provide the assets path to assetBaseUrl e.g.: assetBaseUrl: "assets/photoeditor".

The assetBaseUrl will also accept an external link and you are free to provide the assets from an AWS bucket or your own server.

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!#

There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.