Skip to main content

Integrate CreativeEditor SDK with Vanilla JS

In this example, we will show you how to integrate CreativeEditor SDK with Vanilla JS.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing

Setup#

In this example, we will use the SDK directly via our CDN. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

The SDK is served entirely via CDN, so we just need to import the CE.SDK module.

JavaScript
      import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/cesdk.umd.js';

2. Create an empty Container#

We need to add an empty <div> with an id or class as container for the SDK. In this example, we set the inline style to create a <div> element that fills the whole browser window.

JavaScript
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Integrate CreativeEditor SDK with Vanilla JS</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }


      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>


  <body>
    <!--highlight-2-->
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <!--highlight-2-->


    <script type="module">
      import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/cesdk.umd.js';


      let config = {
        // Serve assets from IMG.LY cdn or locally 
        baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/assets'
      };


      CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
        /** do something with the instance of CreativeEditor SDK **/
      });
    </script>
  </body>
</html>

3. Instantiate SDK#

The last step involves the configuration and instantiation of the SDK. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.

JavaScript
      let config = {
        // Serve assets from IMG.LY cdn or locally 
        baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/assets'
      };


      CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
        /** do something with the instance of CreativeEditor SDK **/
      });

4. Serving Webpage locally#

In order to use the Editor we need to serve the index.html. This can be achieved via npx which comes with npm.

Just execute npx serve, which will bring up a local server at http://localhost:5000.

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Integrate CreativeEditor SDK with Vanilla JS</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }


      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>


  <body>
    <!--highlight-2-->
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <!--highlight-2-->


    <script type="module">
      import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/cesdk.umd.js';


      let config = {
        // Serve assets from IMG.LY cdn or locally 
        baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/assets'
      };


      CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
        /** do something with the instance of CreativeEditor SDK **/
      });
    </script>
  </body>
</html>