Manual Download - Global Variable - Vanilla JS

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.

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:

A valid CE.SDK license key (Get a free trial).

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.59.2/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.59.2/assets',
  callbacks: { onUpload: 'local' },
};

// Initialize CE.SDK
window.CreativeEditorSDK.create('#cesdk_container', config).then(
  async editor => {
    await editor.addDefaultAssetSources();
    await 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#

To serve the static HTML file, you can use a simple HTTP server:

npx serve

This will start a local development server available on localhost.

Step 3: Test the Integration#

Open http://localhost:3000/ in your browser.
A fully functional CE.SDK editor should load.
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: