Skip to content

NPM - Global Variable

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into a Vanilla JS project using NPM and a global variable setup. By the end of this guide, you’ll have a functional CE.SDK instance running locally and ready for customization.

Who is This Guide For?

This guide is for developers who:

  • Are using Vanilla JavaScript (without frameworks like React, Vue, or Angular).
  • Prefer global variable integration instead of module-based imports.
  • Want a quick, no-fuss setup using NPM

What You’ll Achieve

  • Install and configure CE.SDK via NPM.
  • Set up CE.SDK as a global variable for easy access.
  • Create a basic editor using default configurations.

Prerequisites

Before getting started, ensure you have the following:

Step 1: Install CE.SDK

First, create a new project and install the SDK via NPM:

Terminal window
# Initialize a new project (if needed)
npm init -y


# Install CE.SDK via npm
npm install @cesdk/cesdk-js

Step 2: Set Up Your Project Structure

Create the following files:

Terminal window
/my-cesdk-project
  ├── index.html
  ├── index.js
  ├── package.json

index.html

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

index.js

import CreativeEditorSDK from '@cesdk/cesdk-js';


// Expose CE.SDK globally
window.CreativeEditorSDK = 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 via global variable
    window.editorEngine = editor.engine;


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

Step 3: Build Serve the Project Locally

Now build the project using your bundler of choice like Webpack, Rollup, Parcel or Vite and serve it locally. In this example we are using vite.

Terminal window
npm run dev

By default, the app will be available on your local host.

Step 4: 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: Module not found

  • Ensure you’ve installed CE.SDK correctly via npm install @cesdk/cesdk-js.

❌ Error: Invalid license key

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

❌ Editor does not load

  • Check the browser console for errors.
  • Confirm that your script paths are correct.

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: