Search
Loading...
Skip to content

Clone GitHub Angular Project

New Angular Project
Existing Angular Project
Clone GitHub Angular Project
Angular Without UI

Download and run a pre-built CreativeEditor SDK (CE.SDK) Angular project from GitHub. It’s the quickest way to get started with CE.SDK without having to build anything from scratch.

10 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 intended for developers who:

  • Want to explore CE.SDK without setting up a custom environment.
  • Prefer starting with a pre-configured Angular sample project.
  • Are comfortable with Git and Node.js in local development.

What You’ll Achieve#

By following this tutorial, you will:

  • Clone the CE.SDK Angular integration project from GitHub.
  • Install the necessary dependencies and run the project locally.
  • Launch a fully functional image and video editor directly in your browser.

Prerequisites#

Before you get started, ensure you have the following:

  • A cloning method (Git, GitHub CLI, or npx).
  • The latest LTS version of Node.js and npm: Necessary for installing dependencies and running the local server. Download Node.js.
  • A valid CE.SDK license key.

Step 1: Clone the GitHub Repository#

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

Git
GitHub CLI
npx
Terminal window
git clone https://github.com/imgly/cesdk-web-examples.git
Clone taking too long?

Try a shallow clone instead:

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

Then navigate to the Angular integration folder:

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

Step 2: Install the Dependencies#

Install the project’s dependencies using npm:

Terminal window
npm install

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

Step 3: Set Your CE.SDK License Key#

Open the src/app/app.component.ts file and replace the placeholder license key with your valid CE.SDK license:

app.component.ts
const config: Configuration = {
  // license: '<YOUR_CE_SDK_LICENSE>, // Replace with your CE.SDK license key
  // ...
};

Step 4: Run the Project#

Start the local Angular development server with:

Terminal window
npm run start

By default, the Angular application runs locally at http://localhost:4200/. Open this URL in your browser to see the creative editor in action.

Troubleshooting & Common Issues#

❌ Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

  • Double-check that you ran npm install before executing npm run start.

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

  • Verify that your CE.SDK license key is valid, hasn’t expired, and has been correctly assigned to the CreativeEditor component’s props.

❌ Issue: The editor doesn’t load

  • Check the browser console for any error messages that may provide more details.

Next Steps#

Congratulations! You’ve successfully integrated CE.SDK with Angular. Now, feel free to explore the SDK and proceed to the next steps: