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 on Stackblitz or view the code on Github.



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: