Skip to main content
Platform
Language

Get started with CE.SDK Engine

In this example, we will show you how to initialize the CreativeEditor SDK's headless engine on your page. The engine enables you to power your own UI and creative workflows. Whether you want to keep your current UI or design a new one from scratch, our API can do the heavy lifting for you no matter what your starting point is.

Explore a full code sample on Stackblitz or view the code on Github.

Import#

By loading the modules we provide through our CDN, you can get started right away by importing the CreativeEngine module into your own code.

Using the package from NPM#

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/engine npm package as a dependency to your project.

Initialization#

To initialize the CreativeEngine, call its static init method and pass the configuration object.

Licensing#

In the configuration objects are 2 properties that are tied to your licensing.

  • license - an API key that you downloaded from our backend dashboard.
  • userID - An optional unique ID tied to your application's user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they're counted once. Providing this aids in better data accuracy.

If the license is invalid, the engine will not start and throw an error.

Engine instance#

The instance returned by the init call has a property element, containing the engine's <cesdk-canvas/>. Add this element to your page wherever you like. By default, it will fill out its container 100% and manage the internal rendering resolution automatically.

If you want to check if the current browser is supported to run the engine, we provide a couple of helper methods that can be used to display a warning to the user.

  • supportsWasm() : As a minimal requirement for the engine, we have the support for WebAssembly. This method returns false if the current browser cannot execute any WebAssembly code.
  • supportsBrowser(): This method checks for crucial technologies which are needed to run CE.SDK. This check covers our supported browsers list.
  • supportsVideo(): In some use cases, you might want to use video with our editor. This method returns false if the current browser does not support video editing. Being a synchronous API, this method only performs baseline checks for video support - use supportsVideoExport() in an asynchronous context to perform extensive codec checks to fully verify video support.
  • checkVideoSupport(): If you need more information on why video editing is not supported, this method will do the same checks as supportsVideo() but will throw an error detailing the missing APIs and codec support in the browser for troubleshooting purposes.
  • supportsVideoExport(): This asynchronous method returns a promise which either resolves to true, or rejects with an error, if video export is not supported by the browser.
  • checkVideoExportSupport(): If you need more information on why video export is not supported, this method will return a promise that resolves if video export is supported, or reject with an error detailing the missing APIs and codec support in the browser for troubleshooting purposes.

Use the CreativeEngine#

After these setup steps, you can use our APIs to interact with the CreativeEngine. The next couple of pages will document the methods available.

Dispose of the CreativeEngine#

Since the CreativeEngine is implemented in WebAssembly, it does not participate in JavaScript's garbage collection. When you don't need the instance anymore, it is important to call its dispose() method to free up resources used by the engine.

If you mounted the provided element to the DOM, you also need to take care of removing it again.