Skip to main content
Language:

Configuring the Page Appearance in CESDK

In this example, we will show you how to configure the CreativeEditor SDK.

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

Page Configuration#

The CE.SDK comes with a set of page-specific configuration parameters that lets you influence the page appearance.

  • title.show: boolean defines whether page titles shall be shown by the editor.
  • title.font: string defines the font to be used to render the page titles. If not available, a bundled default font will be used as a fallback.
  • dimOutOfPageAreas: boolean defines whether the opacity of the region outside of all pages should be reduced.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.2/cesdk.umd.js';


const config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.2/assets',
  page: {
    title: {
      show: true,
      // Relative path is resolved relative to `baseURL`.
      fontFileUri: '/extensions/ly.img.cesdk.fonts/fonts/Permanent_Marker/PermanentMarker-Regular.ttf',
    },
    dimOutOfPageAreas: true
  }
};


CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
  /** do something with the instance of CreativeEditor SDK **/
});