Integrate Creative Editor

In this example, we will show you how to integrate CreativeEditor SDK with Next.js.

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

Prerequisites#

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#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

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

2. Create an empty Container#

We need to add an empty <div> as a container for the SDK. We configure the <div> element to fully fill the browser window.

3. Create a component containing the SDK#

We'll now create a CreativeEditorSDK component, that's responsible for initializing the SDK and attaching it to the previously created container. To allow configuration of the SDK from outside the component, we pass a config object from the component's props.

4. Managing the container reference#

To let CE.SDK use the container created by our component, we use useRef to acquire a reference to the element and pass it as the first parameter to CreativeEditorSDK.create.

5. Dealing with server side rendering (SSR)#

The CreativeEditor SDK is a Client-Side library that requires various browser features. Therefore, it must be loaded and executed in the browser. The easiest way is to introduce an additional component (CreativeEditorSDKWithNoSSR), that loads the library dynamically when the page is loaded in the browser:

JavaScript


import dynamic from 'next/dynamic';

const CreativeEditorSDKWithNoSSR = dynamic(
  () => import('./CreativeEditorSDK'),
  {
    ssr: false
  }
);

export default CreativeEditorSDKWithNoSSR;

6. Serving Webpage locally#

In order to use the editor we need to run our project via npx which comes bundled with npm.

npx next dev will spin up a development server at http://localhost:3000

Congratulations!#

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


'use client';
import CreativeEditorSDK from '@cesdk/cesdk-js';

import { useEffect, useRef } from 'react';

const Component = (props = {}) => {
  const cesdk_container = useRef(null);
  useEffect(() => {
    if (cesdk_container.current) {
      props.config.license = process.env.NEXT_PUBLIC_LICENSE;
      // Serve assets from IMG.LY CDN or locally
      props.config.baseURL =
        'https://cdn.img.ly/packages/imgly/cesdk-js/1.47.0/assets';
      // Enable local uploads in Asset Library
      props.config.callbacks = { onUpload: 'local' };

      CreativeEditorSDK.create(cesdk_container.current, props.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();
        }
      );
    }
  }, [props]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
};

export default Component;