Manual Download

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

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 using an ES module import rather than a global variable.

What You’ll Achieve

Load CE.SDK via IMG.LY’s CDN.
Import CE.SDK as a JavaScript module.
Create a basic editor using default configurations.

Prerequisites

Before getting started, ensure you have the following:

A modern web browser that supports ES Modules (Chrome, Edge, Firefox, Safari).

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 as an ES module:

<!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 as an ES module -->
    <script type="module" src="./index.js"></script>
  </body>
</html>

index.js

Since CE.SDK is loaded via the CDN, you must import it explicitly as a module:

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

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
CreativeEditorSDK.create('#cesdk_container', config).then(async editor => {
  editor.addDefaultAssetSources();
  editor.addDemoAssetSources({ sceneMode: 'Design' });
  await editor.createDesignScene();

  // Access the engine if needed
  const engine = editor.engine;

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

Step 2: Serve the Project Locally

Since we are using ES Modules, we need a local development server that supports them. Run the following command:

npx serve

This will start a local development server, typically available at http://localhost:3000/

Step 3: Test the Integration

Open http://localhost:3000/ in your browser.
A fully functional CE.SDK editor should load.
Open the browser console and verify that the editor is initialized without errors.

Troubleshooting & Common Errors

❌ Error: Cannot use import statement outside a module

Ensure that your index.js file is being loaded with type="module" in index.html.
Use a local server (npx serve) instead of opening the file directly.

❌ 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:

Manual Download - Module