Skip to content

NPM with Module

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

Who is This Guide For?

This guide is for developers who:

  • Are using Vanilla JavaScript (without frameworks like React, Vue, or Angular).
  • Want to integrate CE.SDK as an imported ES module instead of a global variable.
  • Prefer a module-based approach for better maintainability.

What You’ll Achieve

  • Install and configure CE.SDK via NPM.
  • Import CE.SDK as a JavaScript module.
  • 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

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

index.js

Import CE.SDK as an ES module and initialize it:

import CreativeEditorSDK from '@cesdk/cesdk-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 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. Check for errors in the browser console.

Troubleshooting & Common Errors

❌ Error: Module not found

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

❌ Error: Cannot use import statement outside a module

  • Make sure you’re using type="module" in your index.html script tag.
  • Use Vite instead of npx serve.

❌ Error: Invalid license key

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

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: