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.
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
package as a dependency to your project.
To initialize the
CreativeEngine, call its static
init method and pass the
configuration object. While the
configuration object is optional, you probably want to at least provide your
license and a
The instance returned by the
init call has a property
<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
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.
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.
Alternatively a separate method can be imported and used to check browser support.
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
When you don't need the instance anymore, it is important to call its
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.