Skip to main content
CESDK/Web/Guides/Headless Engine
Language:

Set Up the Headless Creative Engine

In this example, we will show you how to initialize the CreativeEditor SDK's headless engine on your page.

Explore a full code sample of the integration on CodeSandbox 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 Creative Engine 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 Creative Engine module using your regular workflows, add the @cesdk/engine npm package as a dependency to your project.

Code Splitting#

Keep in mind that the Creative Engine bundle has a substantial size. Depending on your use case, it might make sense to delay loading of the module, using a dynamic import statement:

Consult your bundler's documentation for more information:

You can also make use of code splitting in the browser, without a bundler. It works in the same way, but you would load our code from the CDN:

Initialization#

To initialize the CreativeEngine, call its init method and pass the configuration object and a reference to the canvas.

  • For the options available in the configuration, please refer to the Configuration documentation. While the configuration object is optional, you probably want to at least provide your license and a baseURL.
  • The canvas parameter is optional as well. If you don't provide a canvas, the Creative Engine will instantiate a canvas element without mounting it to the DOM. In this setup, the engine can be used to manipulate scenes and export them to static image data.

Use the Creative Engine#

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

Dispose of the Creative Engine#

Since the Creative Engine 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.

File:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/index.js';
// Import a node module when you work with a bundler:
// import CreativeEngine from '@cesdk/engine';
const config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/assets'
};
CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then(
async (instance) => {
await instance.scene.loadFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene'
);
instance.block.findByType('//ly.img.ubq/text').forEach((id) => {
instance.block.destroy(id);
});
function shutdownCreativeEngine() {
instance.dispose();
}
}
);