Skip to content

Existing Next.js Project

This guide walks you through how to integrate CreativeEditor SDK (CE.SDK) into a Next.js project using NPM and a custom client-side component. By the end, you’ll have a fully operational CE.SDK component embedded in your Next.js application, ready for further customization.

Who Is This Guide For?

This guide is intended for developers who:

  • Have experience with Next.js.
  • Already have an existing Next.js project.
  • Want to integrate a powerful image and video editor into their full-stack web application.

What You’ll Achieve

  • Install CreativeEditor SDK (CE.SDK) in your project using NPM.
  • Set up CE.SDK in your Next.js app with a custom editor component using default configurations.
  • Render CE.SDK on your Next.js pages through a client-only component.

Prerequisites

Before getting started, make sure you meet the following prerequisites:

Step 1: Install CE.SDK

Install CreativeEditor SDK by adding the @cesdk/cesdk-js NPM package to your project’s dependencies:

Terminal window
npm install @cesdk/cesdk-js

Step 2: Create Your Creative Editor Component

Suppose that your Next.js project was initialized using create-next-app and follows a file structure as the one below, with components stored in the /app/components/ folder:

your-nextjs-app/
├── app/
│   ├── components/
│   │   └── ...
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
│
├── public/
│   └── ...
│
├── .gitignore
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
└── README.md

Inside the components/ folder, create a new file called CreativeEditorSDK.js and define the following component inside it:

'use client';


import { useEffect, useRef, useState } from 'react';
import CreativeEditorSDK from '@cesdk/cesdk-js';


// configure CreativeEditor SDK
const config = {
  license: '<YOUR_LICENSE_KEY>', // replace with a valid CE.SDK license key
  callbacks: { onUpload: 'local' }, // enable local file uploads in the Asset Library
};


export default function CreativeEditorSDKComponent() {
  // reference to the container HTML element where CESDK will be initialized
  const cesdk_container = useRef(null);
  // define a state variable to keep track of the CESDK instance
  const [cesdk, setCesdk] = useState(null);


  useEffect(() => {
    // prevent initialization if the container element is not available yet
    if (!cesdk_container.current) {
      return;
    }


    // flag to keep track of the component unmount
    let cleanedUp = false;
    // where to store the local CE.SDK instance
    let instance;


    // initialize the CreativeEditorSDK instance in the container HTML element
    // using the given config
    CreativeEditorSDK.create(cesdk_container.current, config).then(
      async _instance => {
        // assign the current CD.SDK instance to the local variable
        instance = _instance;


        if (cleanedUp) {
          instance.dispose();
          return;
        }


        // do something with the instance of CreativeEditor SDK (e.g., populate
        // the asset library with default / demo asset sources)
        await Promise.all([
          instance.addDefaultAssetSources(),
          instance.addDemoAssetSources({ sceneMode: 'Design' }),
        ]);


        // create a new design scene in the editor
        await instance.createDesignScene();


        // store the CESDK instance in state
        setCesdk(instance);
      },
    );


    // cleanup function to dispose of the CESDK instance when the component unmounts
    const cleanup = () => {
      // clear the local state and dispose of the CS.SDK instance (if it has been assigned)
      cleanedUp = true;
      instance?.dispose();
      setCesdk(null);
    };


    // to ensure cleanup runs when the component unmounts
    return cleanup;
  }, [cesdk_container]);


  return (
    // the container HTML element where the CESDK editor will be mounted
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Make sure to include "use client" at the top of the component file. That’s necessary because the component uses React hooks and browser-specific APIs to initialize CreativeEditor SDK.

Note: If your project doesn’t use a /components/ folder or you store components elsewhere, feel free to place CreativeEditorSDK.js in your components’ directory. Just remember to adjust your import paths accordingly in the next steps.

Step 3: Define a Client-Side Editor Component

CreativeEditor SDK relies on browser-only features such as document and dynamic DOM manipulation. This means CreativeEditorSDKComponent must be rendered only on the client side, with server-side rendering (SSR) disabled.

To ensure that, you must import the component dynamically using Next.js’s dynamic import with ssr: false.

Instead of repeating this dynamic import wherever you need to import CreativeEditorSDKComponent, you can create a wrapper component. Inside your components/ directory, add a new file named CreativeEditorSDKNoSSR.js that exports the CreativeEditorSDKComponent with SSR turned off:

'use client';


import dynamic from 'next/dynamic';


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


export default CreativeEditorSDKNoSSR;

Now you can simply import CreativeEditorSDKNoSSR in your pages or other components without worrying about SSR compatibility.

Step 4: Use the Creative Editor Client-Side Component

Import CreativeEditorSDKNoSSR in your page.js file (or any other components to be rendered on a page):

import { default as CreativeEditorSDK } from './components/CreativeEditorSDKNoSSR';

Next, you can render the client-side creative editor component inside your JSX with:

<CreativeEditorSDK />

page.js will contain:

// other imports...
import { default as CreativeEditorSDK } from './components/CreativeEditorSDKNoSSR';


export default function Home() {
  return (
    <>
      {/* other components.. */}
      <CreativeEditorSDK />
      {/* other components.. */}
    </>
  );
}

Step 5: Launch the Next.js Project Locally

Start the local development server powered by Turbopack by running the following command:

Terminal window
npm run dev

By default, the Next.js app will be listening at your localhost on http://localhost:3000/.

Step 7: Test the Integration

  1. Open http://localhost:3000/ in your browser.
  2. A fully functional CE.SDK editor should appear.

Troubleshooting & Common Errors

❌ Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client.

  • This issue appears during development due to how Turbopack handles server rendering, combined with CreativeEditor SDK’s client-side DOM manipulations. It won’t occur in production builds. Thus, you can safely ignore it or suppress it using suppressHydrationWarning.

❌ Error: Identifier 'CreativeEditorSDK' has already been declared

  • Avoid naming your custom component function CreativeEditorSDK, as that conflicts with the class imported from @cesdk/cesdk-js. Use a different name like CreativeEditorSDKComponent.

❌ Error: document is not defined

  • That occurs because the creative editor component was rendered on the server. Make sure you’re importing CreativeEditorSDKComponent using the CreativeEditorSDKNoSSR wrapper with next/dynamic and ssr: false to ensure it runs only on the client.

❌ Error: The following dependencies are imported but could not be resolved: @cesdk/cesdk-js

  • Check that the CE.SDK package is properly installed by running npm install @cesdk/cesdk-js.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

  • Ensure that your license key is valid and hasn’t expired.

❌ Editor does not load

  • Open the browser console and inspect any error messages.
  • Double-check your import paths and component locations for typos or incorrect structure.

Next Steps

Congratulations! You’ve successfully added CE.SDK to your Next.js project! Take a moment to explore its features, then move on to the next steps whenever you’re ready: