Skip to content

Manual Download - Global Variable

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into a Vanilla JS project using a manual download via CDN. By the end of this guide, you’ll have a functional CE.SDK instance running locally and accessible as a global variable.

What is CE.SDK?

The CreativeEditor SDK (CE.SDK) by IMG.LY allows developers to embed a powerful design and video editor directly into their web applications. It supports image and video editing, templating and composition, creative automation and advanced customizations—ideal for creating modern editing experiences.

Who is This Guide For?

This guide is for developers who:

  • Are using Vanilla JavaScript (without frameworks like React, Vue, or Angular).
  • Prefer a manual download via IMG.LY’s CDN instead of using a package manager (NPM).
  • Want to integrate CE.SDK as a global variable for easy access.

What You’ll Achieve

  • Load CE.SDK via IMG.LY’s CDN.
  • Use CE.SDK as a global variable in your project.
  • Create a basic editor using default configurations.

Prerequisites

Before getting started, ensure you have the following:

Step 1: Set Up Your Project Structure

Create the following files:

/my-cesdk-project
  ├── index.html
  ├── index.js

index.html

Modify your index.html file to load CE.SDK directly from IMG.LY’s CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CE.SDK Integration</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh;"></div>


    <!-- Load CE.SDK from IMG.LY's CDN -->
    <script src="https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

index.js

Since CE.SDK is loaded via the CDN, it is automatically available as a global variable (window.CreativeEditorSDK).

const config = {
  license: 'YOUR_LICENSE_KEY', // Replace with a valid license key
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
  callbacks: { onUpload: 'local' },
};


// Initialize CE.SDK
window.CreativeEditorSDK.create('#cesdk_container', config).then(
  async editor => {
    editor.addDefaultAssetSources();
    editor.addDemoAssetSources({ sceneMode: 'Design' });
    await editor.createDesignScene();


    // Access the engine globally if needed
    window.editorEngine = editor.engine;


    // Dispose of the editor when done
    // editor.dispose();
  },
);

Step 2: Serve the Project Locally

Since we are using a static HTML file, we need a simple HTTP server to serve it:

Terminal window
npx serve

This will start a local development server, typically available at:

Local: `http://localhost:3000/`

Step 3: Test the Integration

  1. Open http://localhost:5000/ in your browser.

  2. A fully functional CE.SDK editor should load.

  3. Use the browser console to test the global variable:

    window.CreativeEditorSDK

Troubleshooting & Common Errors

❌ Error: CE.SDK is not defined

  • Ensure that the CDN script is fully loaded before running index.js.
  • Move <script src="./index.js"></script> below the CDN script in index.html.

❌ Error: Invalid license key

  • Verify that your license key is correct and not expired.

❌ Editor does not load

  • Check your browser console for JavaScript errors.
  • Ensure that your internet connection allows access to cdn.img.ly.

Next Steps

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