---
title: "How to integrate a Photo Editor into your Website"
description: "4-minute Video Tutorial "
url: "https://img.ly/blog/how-to-integrate-a-photo-editor-into-your-website-4578cc6ef6f3/"
type: "blog"
date: "2019-07-10"
author: "Felix"
tags: ["JavaScript","HTML5","Web Development","Tutorial","Technology","Tech","How-To","Push2Medium","Learning"]
---
> This is the markdown version of [How to integrate a Photo Editor into your Website](https://img.ly/blog/how-to-integrate-a-photo-editor-into-your-website-4578cc6ef6f3/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).
---
> This tutorial is going to walk you through the integration process of the PhotoEditor SDK into your website. You’ll learn how to setup the HTML5 editor in four minutes. We created similar tutorials for [iOS](https://img.ly/blog/how-to-integrate-a-photo-editor-into-your-ios-app-ced008a7088b.md) and [Android](https://img.ly/blog/how-to-integrate-a-photo-editor-into-your-android-app-ee4148816e25.md), so make sure to check those out as well.(Please make sure to get a trial license for the [PhotoEditor SDK](https://img.ly/products/photo-sdk.md) before integrating it.)
### Transcript
In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK for HTML5 into your website. We’re going to use Visual Studio Code and the [PhotoEditor SDK’s documentation](https://img.ly/docs/pesdk/). So let’s get to it.
We unzip the file and copy the `assets`, `css` and `js` folder. Those contain all the elements our editor needs to run properly. We paste the folders into our project folder. For this demo, we want to open a sample image with the editor, so we copy that into our folder as well.
Here, we already opened our project’s folder with Visual Studio Code. Next, we’re going to create an HTML file that we’re going to use to build our site. We copy this code for the `` section and paste it into our `index.html` file.
```
```
Here’s where we link to the JavaScript files from our `js` folder. Please note that if you store the folder somewhere else, you have to adjust these paths accordingly. Also, this is where the css file for our desktop UI is loaded.
Next, we’re going to add a `` to our site. Then we’ll need a `
` where our editor is going to be displayed. For that, we can simply copy the snippet from the documentation.
```
```
The `
`’s ID is set to `editor` so we can address it via JavaScript. Now, we copy this JavaScript snippet from the documentation so that the editor loads properly.
```
```
We have already prepared our license file here. It is important to copy the entire content of the license file and paste it after `license`. Also, it is important to insert the license as a string and not as a JavaScript object.
Please make sure that under `baseUrl` you have entered the correct path to your assets folder.
Under `image.src` we load our image. Please note that if you don’t load the image locally but from another source, say a server like an AWS S3 bucket, you have to setup CORS properly. We dedicated a whole section in our documentation to this issue, so make sure to check that out. However, as we’re going to load the image locally, we don’t have to mind that line.
Finally, it is important that we create the editor after the image is loaded so that we can pass the image to the editor.
Alright, we’re set. Now we can test everything by running a server. We’ll go with the SimpleHTTPServer.
As we can see, everything runs properly. Thanks a lot for watching and see you next time.
---
That was all that is necessary to get the [PhotoEditor SDK](https://img.ly/products/photo-sdk.md) up and running. For your convenience, here’s the whole source code of the HTML file:
```
```
\***\*Thanks for reading! To stay in the loop, subscribe to our** [**Newsletter**](https://photoeditorsdk.us13.list-manage.com/subscribe?u=dc9f652839dbb620d14d6d28d&id=04a306e4b2)**.\*\***
---
## More Resources
- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.