Looking for
or
?
We've rebranded!
v5.7
v5.6
v5.10
v5
v4
v3.6
API Docs

Getting Started - Parcel JS

Let’s get started!

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
  license: "<your_license_key>",
}).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.