Skip to content

Clone GitHub React Project

This guide walks you through downloading and running a prebuilt CreativeEditor SDK (CE.SDK) React integration project from GitHub. That’s the quickest way to get started with CE.SDK, as there’s no need to build anything from scratch.

Who is This Guide For?

This guide is for developers who:

  • Want to explore CE.SDK without the hassle of configuring a custom environment.
  • Prefer starting with a ready-made React template or sample project.
  • Are familiar with using Git and Node.js to set up local development environments.

What You’ll Achieve

  • Clone a ready-to-use CE.SDK React integration project from GitHub.
  • Install the necessary dependencies and start the project locally.
  • Open a fully functional editor directly in your browser.

Prerequisites

Before you begin, make sure you have the following:

  • Git: Needed to clone the project from GitHub. Download Git.
  • The latest LTS version of Node.js and npm: Required to install dependencies and run the local server. Download Node.js.
  • A valid CE.SDK license key: Required to use CE.SDK. Start a free trial to get one.

Step 1: Clone the GitHub Repository

Start by cloning the CE.SDK examples repository from GitHub:

Terminal window
git clone https://github.com/imgly/cesdk-web-examples.git

Then navigate to the React integration folder:

Terminal window
cd cesdk-web-examples/integrate-with-react

Step 2: Install Dependencies

Once inside the project folder, install the dependencies with npm:

Terminal window
npm install

This command installs all packages listed in the package.json file.

Step 3: Add Your License Key

Open the CE.SDK editor component file (located at /src/CreativeEditorSDK.jsx), and replace the placeholder license key with your own:

const config = {
  license: '<YOUR_CE_SDK_LICENSE>', // replace this with your CE.SDL license key
  // ...
};

Step 4: Run the Project

Launch the local Vite development server using the following command:

Terminal window
npm run dev

By default, the React application will be available on your localhost at http://localhost:5173/. Visit that URL in your browser to see the editor in action.

Troubleshooting & Common Issues

❌ Issue: Module not found** or missing packages

  • Make sure you ran npm install and that it completed without any errors.

❌ Error: 'vite' is not recognized as an internal or external command, operable program or batch file.

  • Double-check that you ran npm install before running npm run dev. This step also installs Vite, which is required to launch the project locally.

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

  • Ensure your CE.SDK license key is valid, hasn’t expired, and you correctly added it to the config object.

❌ The editor doesn’t appear

  • Check the browser console for any detailed error messages.

Next Steps

Congratulations! You’ve successfully set up CE.SDK in React. When you’re ready, explore the SDK and move on to the next steps: