Skip to main content
CESDK/Web/Configuration/Presets
Language:

Adding Templates

The CreativeEditor SDK can be configured with a series of templates, that act as a quick start for your users.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

By default, the CE.SDK ships with a predefined set of default templates:



Templates consist of predefined scenes created using CE.SDK. To create your own template, just design your desired file using CE.SDK and save the scene to disk using the 'Download' button. The scene file can then act as a template for your users. Just pass the file as described below:

Configuring a Custom Templates#

You can define your custom templates in the configuration under presets.templates. The keys of this object should be i18n localization keys and the contained items of the following structure:

  • label: string describes the template and is being rendered inside the template library via tooltip and as ARIA label.
  • scene: string | URL | () => Promise<string> provides the scene to load, when selecting the template. This can either be a raw scene string starting with UBQ1, an absolute or relative URL pointing at a scene file, or an async function that returns a scene string upon resolve.
  • thumbnailURL?: string pointing to a thumbnail source. Thumbnails are used in the template library shown in the inspector and should ideally have a width of 400px for landscape images. Keep in mind, that a large number of large thumbnails may slow down the library.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
presets: {
templates: {
demo: {
label: 'Template',
scene: '/template.scene',
thumbnailURL: '/template_thumb.png'
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});