Skip to main content

Integrate Creative Editor

In this example, we will show you how to integrate CreativeEditor SDK with Vanilla JS.

Explore a full code sample of the integration on CodeSandbox or view the 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#

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

If you use a bundler like Webpack, Rollup, or Parcel to build your app and want to integrate the CreativeEngine module using your regular workflows, add the @cesdk/cesdk-js npm package as a dependency to your project.

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.

See Initialization for a more detailed description of this step.

4. Serving Webpage locally#

In order to use the Editor we need to serve the index.html. This can be achieved via npx which comes with npm.

Just execute npx serve, which will bring up a local server at http://localhost:5000.

5. Access the Engine APIs#

For programmatic access to engine specific API the editor exposes the engine. See Engine for more information about the engine capabilities and APIs.

5. Disposing the Editor#

When you are done working with the editor, consider disposing it to cleanup any pending references.


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

import '';
// Import a node module when you work with a bundler:
// import CreativeEditorSDK from '@cesdk/cesdk-js';
const config = {
// Serve assets from IMG.LY cdn or locally
baseURL: '',
// Enable local uploads in Asset Library
callbacks: { onUpload: 'local' }
CreativeEditorSDK.create('#cesdk_container', config).then(async (editor) => {
// Do something with the instance of CreativeEditor SDK, for example:
// Populate the asset library with default / demo asset sources.
editor.addDemoAssetSources({ sceneMode: 'Design' });
await editor.createDesignScene();
const engine = editor.engine; // Access the engine directly if required
// Dispose the Editor when done to cleanup all memories and dangling references
// editor.dispose();