Skip to main content
CESDK/Web/Getting Started/Integrations

Integrate CreativeEditor SDK with Angular

In this example, we will show you how to integrate CreativeEditor SDK in an Angular app.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.


No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing


Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CreativeEditorSDK module and the stylesheet containing the default theme settings.

2. Acquire a container element reference#

We need to provide a container to the CE.SDK. This is done through an ElementRef. For this example, the container is specified as a <div> that fills the whole browser window in app.component.html:

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

3. Instantiate CreativeEditor SDK#

The last step involves the configuration and instantiation of the SDK. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.

4. Serving Webpage locally#

In order to use the editor we need run ng serve for a dev server.

This will bring up a server at http://localhost:4200/


You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import CreativeEditorSDK from '@cesdk/cesdk-js';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent implements AfterViewInit {
@ViewChild('cesdk_container') containerRef: ElementRef = {} as ElementRef;
title = 'Integrate CreativeEditor SDK with Angular';
ngAfterViewInit(): void {
const config = {
// Serve assets from IMG.LY cdn or locally
baseURL: ''
CreativeEditorSDK.init(this.containerRef.nativeElement, config).then(
(instance: any) => {
/** Do something with the instance of CreativeEditor SDK **/