Search
Loading...
Skip to content

Existing React Project

This guide walks you through integrating CreativeEditor SDK (CE.SDK) into a React project using NPM and a custom component. By the end, you’ll have a fully functional CE.SDK component running in your React application, ready for customization.

Who Is This Guide For?#

This guide is for developers who:

  • Are familiar with React.
  • Already have a React project.
  • Want to integrate a fully-featured image and video editor into their web application.

What You’ll Achieve#

  • Install CE.SDK using NPM.
  • Set up CE.SDK in your React project.
  • Create a basic creative editor component using the default configurations.

Prerequisites#

Before getting started, make sure you have the following:

Step 1: Install CE.SDK#

Add the Creative Editor SDK to your project’s dependencies by installing it via the @cesdk/cesdk-js NPM package:

Terminal window
npm install @cesdk/cesdk-js

Step 2: Create Your Creative Editor Component#

Suppose your current React project has the following file structure from the default Vite initialization:

your-react-project/
│── .gitignore
│── eslint.config.js
│── index.html
│── package-lock.json
│── package.json
│── README.md
│── vite.config.js
│── ...
├── public/
│ └── ...
└── src/
│── App.css
│── App.jsx
│── index.css
│── main.jsx
│── ...
└── assets/
└── ...

In the src/ folder, create a new file named CreativeEditorSDK.jsx containing the following component:

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { useEffect, useRef, useState } from 'react';
// configure CreativeEditor SDK
const config = {
license: '<YOUR_LICENSE_KEY>', // replace it with a valid CE.SDL 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>
);
}

Step 3: Use the Creative Editor Component#

Import CreativeEditorSDKComponent in your App.jsx file:

import { deafult as CreativeEditorSDK } from './CreativeEditorSDK';

To use the component and render it on the page, include it in your JSX as follows:

<CreativeEditorSDK />

App.jsx will contain:

// other imports...
import { default as CreativeEditorSDK } from './CreativeEditorSDK';
function App() {
// state management ...
return (
<>
{/* other components.. */}
<CreativeEditorSDK />
{/* other components.. */}
</>
);
}
export default App;

Step 4: Serve the Project Locally#

Run the project locally by using the development server provided by the bundler configured in your project. In this case, we’re using Vite, so run this command:

Terminal window
npm run dev

By default, the React app will be accessible on your localhost at http://localhost:5173/.

Step 5: Test the Integration#

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

Troubleshooting & Common Errors#

❌ Error: Identifier 'CreativeEditorSDK' has already been declared

  • Ensure that the name of your custom creative editor component function is not CreativeEditorSDK, as that is also the name of the class imported from @cesdk/cesdk-js.

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

  • Ensure you’ve installed CE.SDK correctly via 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

  • Verify that your license key is valid and not expired.

❌ Editor does not load

  • Check the browser console for errors.
  • Confirm that your component paths and imports are correct.

Next Steps#

Congratulations! You’ve successfully integrated CE.SDK into your existing React project. Now, take some time to explore the SDK and move on to the next steps when you’re ready: