Clone GitHub React Project - React

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.

5 mins

estimated time

Download

StackBlitz

GitHub

What’s CreativeEditor SDK?#

CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case.

CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license.

Free Trial

Purchase License

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 (Get a free trial).

Step 1: Clone the GitHub Repository#

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

First, clone the CE.SDK examples repository from GitHub:

Git

GitHub CLI

npx

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

Clone taking too long?

Try a shallow clone instead:

git clone --depth=1 --branch main --single-branch https://github.com/imgly/cesdk-web-examples.git

Then navigate to the Angular integration folder:

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

gh repo clone imgly/cesdk-web-examples

Clone taking too long?

Try a shallow clone instead:

gh repo clone imgly/cesdk-web-examples -- --depth=1 --branch main --single-branch imgly/cesdk-web-examples

Then navigate to the Angular integration folder:

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

Use npx degit to clone only the Angular integration example:

npx degit https://github.com/imgly/cesdk-web-examples/integrate-with-react

Step 2: Install Dependencies#

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

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_LICENSE_KEY>', // ⚠️ REPLACE WITH YOUR ACTUAL LICENSE KEY
  // ...
};

Step 4: Run the Project#

Launch the local Vite development server using the following command:

npm run start

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 start. 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: