Skip to main content
PESDK/Web/Introduction/Integrations

Getting Started - Parcel 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.

We will be using parcel-js for simplicity.

Create a project#

  • Start a new project in an empty directory by running npm init.
  • A package.json file will be created, with minimal information about the project.

Installing peer dependencies#

PhotoEditor SDK needs following peer dependencies:

  1. React >= 16.8.6
  2. React DOM >= 16.8.6
  3. Styled Components >= 4.4
  • Run npm install --save react react-dom styled-components to include them in the project.

Installing PhotoEditor SDK#

  • Run npm install --save photoeditorsdk.
  • Create a dist folder.
  • Copy the assets folder from node_modules/photoeditorsdk to dist.

Adding a container for PhotoEditor SDK#

  • Create a index.html in the root of the project.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body></body>
</html>
  • 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.
<body>
+   <div role="PhotoEditor SDK" id="editor" style="width: 100vw; height: 100vh;"></div>
</body>

Initialize the editor#

  • Finally, in order to initialize the editor, instantiate the UI using JavaScript. Create a index.js in the root of the project.
import { UIEvent, PhotoEditorSDKUI } from 'photoeditorsdk';


PhotoEditorSDKUI.init({
  container: '#editor',
  image: 'example.png', // Image url or Image path relative to assets directory
  // Please replace this with your license: https://img.ly/dashboard
  license: '',
}).then(editor => {
  console.log('PhotoEditorSDK for Web is ready!');
  editor.on(UIEvent.CLOSE, () => {
    console.log('closed');
  });
});
  • Include the index.js script in our html file
<body>
  <div role="PhotoEditor SDK" id="editor" style="width: 100vw; height: 100vh;"></div>
+   <script src="./index.js"></script>
</body>

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 is all that is necessary to get PhotoEditor SDK up and running. Now all you have to do is launch a webserver.

  • Run npx parcel index.html.
  • Then open http://localhost:1234/ to see yout app.

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

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