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:
- Node.js v20+ and NPM 10+ installed locally. Download Node.js.
- A React 18+ project managed with a build tool like Vite, Parcel, or RSBuild.
- A valid CE.SDK license key (Get a free trial).
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:
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 SDKconst 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:
npm run dev
By default, the React app will be accessible on your localhost at http://localhost:5173/
.
Step 5: Test the Integration#
- Open
http://localhost:5173/
in your browser. - 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: