Integrate Creative Editor

In this example, we will show you how to integrate CreativeEditor SDK with Vanilla JS.

Explore a full code sample on Stackblitz or view the code on Github.

Prerequisites#

(Optional): Get the latest stable version of Node.js & NPM

Setup#

Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

The SDK is served entirely via CDN, so we just need to import the CE.SDK module and link the stylesheet containing the default theme settings.

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 @cesdk/cesdk-js npm package as a dependency to your project.

2. Create an empty Container#

We need to add an empty <div> with an id or class as container for the SDK. In this example, we set the inline style to create a <div> element that fills the whole browser window.

3. Instantiate SDK#

The last step involves the configuration and instantiation of the SDK. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.

See Initialization for a more detailed description of this step.

4. Serving Webpage locally#

In order to use the Editor we need to serve the index.html. This can be achieved via npx which comes with npm.

Just execute npx serve, which will bring up a local server at http://localhost:5000.

5. Access the Engine APIs#

For programmatic access to engine specific API the editor exposes the engine. See Engine for more information about the engine capabilities and APIs.

5. Disposing the Editor#

When you are done working with the editor, consider disposing it to cleanup any pending references.

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:


import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.39.0/index.js';
// Import a node module when you work with a bundler:
// import CreativeEditorSDK from '@cesdk/cesdk-js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  // Serve assets from IMG.LY cdn or locally
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.39.0/assets',
  // Enable local uploads in Asset Library
  callbacks: { onUpload: 'local' }
};

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

  // Dispose the Editor when done to cleanup all memories and dangling references
  // editor.dispose();
});