Skip to main content
CESDK/Web/Getting Started/Integrations

Integrate CreativeEditor SDK with Electron

In this example, we will show you how to integrate CreativeEditor SDK with Electron. View the full code on GitHub.


No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing


Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to require the CE.SDK module and link the stylesheet containing the default theme settings.

2. Create an empty Container#

We need to add an empty <div> with an id or class as container for the SDK. In this example, we set the inline style to create a <div> element that fills the whole browser window.

3. Instantiate SDK#

The last step involves the configuration and instantiation of the SDK. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.

4. Running CE.SDK in Electron#

In order to use the editor we need to run our project via npx which comes bundled with npm.

npx electron . will spin up a native application window running CreativeEditor SDK.


You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:

<!DOCTYPE html>
<html lang="en">
<title>Integrate CreativeEditor SDK with Electron</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
body {
margin: 0;
overflow: hidden;
html {
overscroll-behavior-x: contain;
<div id="cesdk_container" style="width: 100%; height: 100vh"></div>
const CreativeEditorSDK = require('@cesdk/cesdk-js');
window.onload = function () {
let config = {
// Serve assets from IMG.LY cdn or locally
baseURL: ''
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/