Existing Next.js Project - Next.js

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 app, ready for further customization.

Who Is This Guide For?#

This guide is 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 app.

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:

Node.js v20.12+ and npm 10+ installed on your machine. Download the latest LTS version of Node.js and npm.
A Next.js 14+ project created with create-next-app.
A valid CE.SDK license key (Get a free trial).

Step 1: Launch the Next.js Project Locally#

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

npm

yarn

pnpm

npm run dev

yarn dev

pnpm run dev

By default, the Next.js app listens at your localhost on http://localhost:3000/. Open it on your browser and ensure everything works properly before proceeding.

Step 2: Install CE.SDK#

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

npm

yarn

pnpm

npm install @cesdk/cesdk-js

yarn add @cesdk/cesdk-js

pnpm add @cesdk/cesdk-js

Step 3: Create Your Creative Editor Component#

If you created your Next.js project using create-next-app, your folder structure should look like this, with components stored in the /app/components/ directory:

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 component using your project’s programming language:

JavaScript

TypeScript

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
};

// initialization function called after SDK instance is created
const init = async (cesdk) => {
// do something with the instance of CreativeEditor SDK (e.g., populate
// the asset library with default / demo asset sources)
await Promise.all([
cesdk.addDefaultAssetSources(),
cesdk.addDemoAssetSources({ sceneMode: 'Design', withUploadAssetSources: true }),
]);

        // Create a new design scene in the editor
        await cesdk.createDesignScene();

        // Store the CE.SDK instance in state
        setCesdk(cesdk);
      },
    );

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

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

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

Create a new file called CreativeEditorSDK.tsx 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
};

export default function CreativeEditorSDKComponent() {
  // Reference to the container HTML element where CE.SDK will be initialized
  const cesdk_container = useRef(null);
  // Define a state variable to keep track of the CE.SDK 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 cesdkInstance: any;

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

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

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

        // Create a new design scene in the editor
        await cesdk.createDesignScene();

        // Store the CE.SDK instance in state
        setCesdk(cesdk);
      },
    );

    // Cleanup function to dispose of the CE.SDK 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;
      cesdkInstance?.dispose();
      setCesdk(null);
    };

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

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

Always add the 'use client' directive at the top of the Creative Editor component. The component runs in the browser and uses React hooks to initialize CreativeEditor SDK.

Step 4: Define a Client-Side Editor Component#

The CreativeEditorSDKComponent can only run in the browser. Here’s what you need to know:

Never render CreativeEditorSDKComponent on the server (SSR): CreativeEditor SDK relies on browser-only features like document and dynamic DOM manipulation.
Import it dynamically using Next.js’s dynamic import with ssr: false.

To avoid repeating the dynamic import statement wherever you use CreativeEditorSDKComponent, create a CreativeEditorSDKNoSSR component inside the components/ directory:

JavaScript

TypeScript

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;

Add a new file named CreativeEditorSDKNoSSR.tsx 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 import CreativeEditorSDKNoSSR in your pages or other components without handling SSR compatibility.

Step 5: Use the Creative Editor Client-Side Component#

Import CreativeEditorSDKNoSSR using:

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

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

<CreativeEditorSDK />

For example, a page.js/page.tsx that integrates the Creative Editor component might contain:

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

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

Step 6: Test the Integration#

Open http://localhost:3000/ in your browser.
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 because Turbopack pre-renders pages on the server before the browser executes any client-side logic. It doesn’t affect production builds. You can safely ignore it or suppress it using suppressHydrationWarning.

❌ Error: Identifier 'CreativeEditorSDK' has already been declared

Rename your custom component function to something like CreativeEditorSDKComponent. Avoid using the name CreativeEditorSDK, which conflicts with the class imported from @cesdk/cesdk-js.

❌ Error: document is not defined

This error occurs because the app renders CreativeEditor component on the server. Wrap the import with next/dynamic and ssr: false to ensure it runs only on the browser. Use a wrapper like CreativeEditorSDKNoSSR

❌ 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: