Search
Loading...
Skip to content

Angular Without UI

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) Engine into an Angular application in “headless mode” - without the default user interface. You’ll use the powerful CE.SDK Engine directly to programmatically create and manipulate designs.

Who is This Guide For?#

This guide is for developers who:

  • Want to build a custom UI instead of using CE.SDK’s default interface.
  • Need to use CE.SDK in automation workflows, without displaying a user-facing editor.
  • Have already followed one of the Getting Started with CE.SDK in Angular tutorials and want to extend their integration.

What You’ll Achieve#

  • Initialize CE.SDK’s headless engine inside an Angular component.
  • Programmatically create and manipulate a scene.
  • (Optionally) attach the CE.SDK canvas for rendering visuals while using your own controls.

Prerequisites#

Step 1: Install the cesdk/engine package#

In order to interact with CE.SDK in headless mode you need to include the Creative Engine install it via npm:

Terminal window
npm install @cesdk/engine

Step 2: Setup a CE.SDK Canvas Container#

We are going to create a small application consisting of a button which reduces the opacity of an image by half on click. In your Angular component’s HTML (e.g., custom-editor.component.html):

<div #cesdkCanvas style="width: 100vw; height: 100vh;"></div>
<div class="controls">
  <button (click)="changeOpacity()">Reduce Opacity</button>
</div>

Step 3: Initialize CE.SDK Engine Programmatically#

After initializing the Creative Engine, you have access to the scene which allows you to create elements and manipulate their properties, in this example we are adding a sample image to the scene.

The changeOpacity click handler simply retrieves this block by id and uses the block API to change its opacity.

In your component TypeScript file (e.g., custom-editor.component.ts):

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import CreativeEngine from '@cesdk/engine';


@Component({
  selector: 'app-custom-editor',
  templateUrl: './custom-editor.component.html',
  styleUrls: ['./custom-editor.component.css'],
  standalone: true,
  imports: [],
})
export class CustomEditorComponent implements AfterViewInit {
  @ViewChild('cesdkCanvas') canvasContainer!: ElementRef;
  private engine: any;
  private imageBlockId: number | undefined;


  ngAfterViewInit(): void {
    const config = {
      license: 'YOUR_LICENSE_KEY',
      userId: 'angular-headless-example',
      baseURL:
        'https://cdn.img.ly/packages/imgly/cesdk-engine/1.52.0/assets',
    };


    CreativeEngine.init(config).then((engine: any) => {
      this.engine = engine;
      this.canvasContainer.nativeElement.append(engine.element);


      let scene = engine.scene.get();
      if (!scene) {
        scene = engine.scene.create();
        const page = engine.block.create('page');
        engine.block.appendChild(scene, page);
      }


      const [page] = engine.block.findByType('page');


      this.imageBlockId = engine.block.create('graphic');
      engine.block.setShape(
        this.imageBlockId,
        engine.block.createShape('rect'),
      );
      const imageFill = engine.block.createFill('image');
      engine.block.setFill(this.imageBlockId, imageFill);
      engine.block.setString(
        imageFill,
        'fill/image/imageFileURI',
        'https://img.ly/static/ubq_samples/imgly_logo.jpg',
      );
      engine.block.setEnum(this.imageBlockId, 'contentFill/mode', 'Contain');
      engine.block.appendChild(page, this.imageBlockId);
      engine.scene.zoomToBlock(page);
    });
  }


  changeOpacity(): void {
    if (this.imageBlockId !== undefined) {
      this.engine.block.setOpacity(this.imageBlockId, 0.5);
    }
  }
}

Use Cases#

Congratulations, you have taken the first step to be able to:

  • Build custom UIs using Angular templates and CE.SDK’s canvas.
  • Automate generation of graphics or marketing assets in-browser.
  • Integrate CE.SDK into multi-step creative workflows with programmatic logic.

Troubleshooting & Common Errors#

❌ Error: Cannot read property 'nativeElement' of undefined

Ensure the @ViewChild selector matches your #cesdkCanvas reference.

❌ Error: Invalid license key

Double-check the license key string passed in the config.

❌ CE.SDK canvas doesn’t render

Make sure you are appending engine.element to a valid DOM container inside ngAfterViewInit.

Next Steps#

This guide sets the stage for: