Search
Loading...
Skip to content

Existing React Project

New React Project
Existing React Project
Clone GitHub React Project
New React Project without UI

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 CreativeEditor from '@cesdk/cesdk-js/react';


// configure CreativeEditor SDK
const config = {
  license: '<YOUR_LICENSE_KEY>', // ⚠️ REPLACE WITH YOUR ACTUAL LICENSE KEY
  callbacks: { onUpload: 'local' }, // enable local file uploads in the Asset Library
};


// 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' }),
  ]);


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


export default function CreativeEditorSDKComponent() {
  return (
    <CreativeEditor
      config={config}
      init={init}
      width="100vw"
      height="100vh"
    />
  );
}

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: