Use CreativeEditor SDK in small viewports

CreativeEditor SDK is a tool that can be utilized in a multitude of ways. One such way is by embedding it into small container elements or employing it on devices with limited screen real estate, such as smartphones.

The UI of the CreativeEditor SDK seamlessly adjusts to the available space, much like any other modern web application, without sacrificing functionality. Moreover, it provides a certain degree of customizability, allowing you to tailor the behavior of the UI to your specific needs.

By default, CreativeEditor SDK is configured to use an optimized layout for small viewports. This layout changes the UI to:

Render the dock on the bottom
Open all panels from the bottom, taking up the bottom half of the screen
Use the large UI scaling

All configuration options related to the panel layout are ignored in favor of the layout optimization for small viewports as described above.


import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.39.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.39.0/assets'
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});