Looking for
We've rebranded!
API Docs


The SDK is the “back end” of the editor. It handles image rendering and image modification. If you’re interested in building your own UI, or not using a UI at all, this is the way to go.

Rendering using the SDK requires an input image as well as a canvas HTML element that it should render to. Let’s create the canvas element first:

<canvas id="canvas" />

Now let’s create an Image, load it, instantiate the SDK and render the image to the canvas:

window.onload = function () {
  const canvas = document.getElementById('canvas')
  const image = new Image()
  image.addEventListener('load', () => {
    const sdk = new PhotoEditorSDK('webgl', {
      canvas: canvas,
      image: image
  image.src = 'image.png'

The canvas should now display your image.