Search
Loading...
Skip to content

Existing Electron Project

This guide helps you integrate the CreativeEditor SDK (CE.SDK) into an existing Electron application. You’ll embed CE.SDK into your renderer window and configure it to load assets and templates from IMG.LY’s CDN or your own source.

Who is This Guide For?#

This guide is for developers who:

  • Already have a working Electron app.
  • Want to embed a web-based creative editor inside a native window.
  • Prefer modular integration without starting from scratch.

What You’ll Achieve#

  • Add CE.SDK to your existing Electron frontend.
  • Use ES modules to load CE.SDK in the browser context.
  • Render the editor inside a target DOM element.

Prerequisites#

You’ll need:

Step 1: Install the CE.SDK Package#

Run this in your project root:

Terminal window
npm install @cesdk/cesdk-js

Step 2: Prepare the Renderer Window#

Open the index.html (or whichever HTML file your Electron window loads) and:

Add a container for the editor#

<div id="cesdk_container" style="width: 100%; height: 100vh;"></div>

Import CE.SDK using <script type="module">#

Make sure this script appears after the container:

<script type="module">
  import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.53.0/index.js';


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


    const instance = await CreativeEditorSDK.create('#cesdk_container', config);
    await instance.addDefaultAssetSources();
    await instance.addDemoAssetSources({ sceneMode: 'Design' });
    await instance.createDesignScene();
  });
</script>

Editor Setup Disclaimer#

Note: CE.SDK loads all assets from IMG.LY’s CDN by default. In production, you should serve assets locally for performance, security, or compliance reasons.

Step 3: Confirm BrowserWindow Settings#

In your main.js (or wherever you’re creating the window), make sure nodeIntegration is disabled to allow ES Modules in the renderer:

const win = new BrowserWindow({
  width: 1280,
  height: 800,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: false,
  },
});

This ensures the renderer runs in a true browser context (needed for <script type="module">).

Troubleshooting & Common Errors#

❌ CreativeEditorSDK.create is not a function

This means you’re using require() to load CE.SDK — which doesn’t work. Use import inside a <script type="module">.

❌ Invalid license key

Use a valid trial or production license key.

❌ Nothing loads in the window

Make sure:

  • index.html exists and is correctly referenced via win.loadFile(...)
  • You’re using nodeIntegration: false in your BrowserWindow

Next Steps#