New Angular Project

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.

Who is This Guide For?#

This guide is for developers who:

• Are building or maintaining an Angular app.
• Want to integrate CE.SDK using TypeScript and Angular component’s lifecycle.
• Prefer installing the SDK via a package manager (npm, pnpm, yarn) and serving the UI inside a reusable Angular component.

What You’ll Achieve:#

• Set up a new Angular project.
• Install and configure CE.SDK using npm.
• Embed the editor in your component and launch it with configuration options.

Prerequisites#

Before getting started, ensure you have:

• Node.js (v20 or later) and npm installed.

• A valid CE.SDK license key.

• Angular CLI installed globally:

  npm install -g @angular/cli

Step 1: Create a New Angular Project#

Create a new Angular app (skip routing, Server Side Rendering, and use CSS or SCSS as preferred):

ng new cesdk-angular-app
cd cesdk-angular-app

Step 2: Install CE.SDK via NPM#

Install the SDK package:

npm install @cesdk/cesdk-js

Step 3: Start the Angular Development Server#

Run your app locally:

ng serve

Navigate to http://localhost:4200/ and the starter Angular home page should appear.

Step 4: Embed CE.SDK in a Component#

1. Add Container Element#

This guide uses Angular 20 and above, adjust the component names and paths in the code as needed.

In your IDE or from your terminal, open src/app/app.html and replace the contents with:

<div #cesdk_container [style.height.vh]="'100'" [style.width.vw]="'100'"></div>

This provides a full-screen container for the editor.

2. Initialize the Editor in TypeScript#

Open src/app/app.ts and replace the content with:

// Import Angular core features and CreativeEditor SDK
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js';

// Define this class as an Angular component and sets seletor and styles
@Component({
  selector: 'app-root',
  templateUrl: './app.html', // Adjust based on your Angular version
  styleUrls: ['./app.css'], // Adjust based on your Angular version
})

// Run code after the component's vue is initialized
export class App implements AfterViewInit {
  // Replace App by AppComponent if using Angular 19 or below
  @ViewChild('cesdk_container') containerRef!: ElementRef;

  title = 'Integrate CreativeEditor SDK with Angular';

  // Initializes the CreativeEditor SDK after the view is ready
  ngAfterViewInit(): void {
    // Set CreativeEditor SDK configuration
    const config: Configuration = {
      // license: 'YOUR_CESDK_LICENSE_KEY', // Replace with your actual CE.SDK license key
      baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets`,
      callbacks: {
        onUpload: 'local',
      },
    };
    // Create the editor inside the DOM element
    CreativeEditorSDK.create(this.containerRef.nativeElement, config).then(
      async (instance: any) => {
        // Add default and demo asset sources
        await instance.addDefaultAssetSources();
        await instance.addDemoAssetSources({ sceneMode: 'Design' });
        // Create a new design scene in the editor
        await instance.createDesignScene();
      },
    );
  }
}

Components Paths#

If you decide to generate Angular components, update the file paths and imports accordingly.

Step 4: Check the Editor#

Navigate to http://localhost:4200/ and in place of the previous demo home page, the CE.SDK editor should appear fullscreen inside your Angular app.

Troubleshooting & Common Errors#

❌ Error: Cannot read property 'nativeElement' of undefined

• Ensure @ViewChild('cesdk_container') matches the #cesdk_container element in your template.

❌ Error: license key is invalid

• Make sure your trial or production license key is correct and up to date.

❌ CE.SDK assets not loading

• Check network requests. Ensure you allow access to cdn.img.ly.

Next Steps#

You’ve successfully integrated CE.SDK into Angular. Now explore:

• Customize the Editor UI
• Serve assets from your own servers
• Use Callbacks and Events

• Customize interface labels and translations

• Theme the Editor