New Electron Project

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into a new Electron application. You’ll launch a native desktop editor window running CE.SDK — ideal for image editing, creative automation, or template-based workflows.

Who is This Guide For?#

This guide is for developers who:

Are building a new Electron desktop application.
Want to embed a powerful web-based editor inside a native window.
Prefer a quick, minimal boilerplate to get started.

What You’ll Achieve#

Create a working Electron app.
Embed and launch CE.SDK using ES module syntax.
Load templates and asset libraries from the IMG.LY CDN.

Prerequisites#

You’ll need:

Node.js v20+
npm or yarn
Optional (global Electron CLI):
Terminal window
```
npm install -g electron
```

Step 1: Initialize a New Project and Install Dependencies#

Create your project folder and install Electron + CE.SDK:

mkdir cesdk-electron-app && cd cesdk-electron-app
npm init -y
npm install electron --save-dev
npm install @cesdk/cesdk-js

Step 2: Create the Electron Main Process (`main.js`)#

This file initializes the Electron app and creates a native browser window:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // Required to support ESM in renderer
      contextIsolation: false,
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Step 3: Create the Renderer HTML (`index.html`)#

This is your front-end UI, where CE.SDK will be initialized and mounted:

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

    <!-- Load CE.SDK via CDN as a module -->
    <script type="module">
      import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.52.0/index.js';

      window.addEventListener('DOMContentLoaded', async () => {
        const config = {
          license: 'YOUR_LICENSE_KEY',
          baseURL:
            'https://cdn.img.ly/packages/imgly/cesdk-js/1.52.0/assets',
          callbacks: {
            onUpload: 'local',
          },
        };

        // Initialize and mount the editor
        const instance = await CreativeEditorSDK.create(
          '#cesdk_container',
          config,
        );
        await instance.addDefaultAssetSources();
        await instance.addDemoAssetSources({ sceneMode: 'Design' });
        await instance.createDesignScene();
      });
    </script>
  </body>
</html>

Step 4: Add the Start Script to `package.json`#

This enables npm start to launch your Electron app:

"main": "main.js",
"scripts": {
  "start": "electron ."
}

Step 5: Launch the App#

Start your Electron-powered CE.SDK window:

npm run start

You should see a native window with a full-featured CE.SDK instance loaded.

Editor Setup Disclaimer#

Note: CE.SDK assets (e.g., templates, fonts, stickers) are served from the IMG.LY CDN by default. In production, you can self-host assets for performance and compliance reasons.

Troubleshooting & Common Errors#

❌ CreativeEditorSDK.create is not a function

This happens when you use require() instead of ES module import. Fix by using <script type="module"> in your HTML.

❌ Invalid license key

Use a valid trial or production license key.

❌ Blank screen or editor fails to load

Check that index.html exists in your root directory and is correctly referenced in main.js via win.loadFile().