Skip to main content
PESDK/Web/Introduction

Getting Started

A quick guide on how to easily get started with PhotoEditor SDK for Web. Your kick-off to delight your users with top-notch editing capabilities.

Integration#

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.

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.

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.

PhotoEditor SDK can be integrated with just a few lines of code, any it comes with rich API, which allows for complete customization.

import { UIEvent, PhotoEditorSDKUI } from 'photoeditorsdk';
const editor = await PhotoEditorSDKUI.init({
container: '#editor',
image: 'example.png', // relative to assets directory
// Please replace this with your license: https://img.ly/dashboard
license: '',
});
console.log('PhotoEditorSDK for Web is ready!');

Check out following guides for more examples.

  1. Vanilla JS
  2. React JS
  3. Angular
  4. Vue JS
  5. Parcel JS
  6. Rails

Questions ?#

This guide shows you how to integrate our editor into your 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!