Back to Glossary
Core Concepts

CreativeEngine

Also known as: CE Engine

The CreativeEngine is the rendering and scene-management layer beneath every CE.SDK product. Whether the editor is running in a browser, on iOS, on Android, on a server, or inside an Electron desktop app, the CreativeEngine is what is doing the work underneath. Every block manipulation, every effect, every export, every variable lookup flows through it.

The engine is written in C++ and compiled to each target platform. This is what makes CE.SDK produce identical rendering output across environments. A design built in the browser editor and the same design exported headlessly on a Node.js server produce the same result because both go through the same engine binary.

What the engine handles

The engine exposes its capabilities through six APIs, each handling a category of scene operations.

  • Scene API. Create, load, save, and modify scenes. Control zoom and camera position.
  • Block API. Create, manipulate, and query elements within a scene.
  • Asset API. Register and retrieve asset sources for images, fonts, videos, and other media.
  • Variable API. Define, read, update, and remove text variables for dynamic content.
  • Editor API. Control editor state, history (undo, redo), settings, and active role.
  • Event API. Subscribe to block creation, update, and deletion events for reactive logic.

Any operation the editor UI exposes is available through these APIs. The editor and the API are the same surface.

Two ways to initialize

The CreativeEngine can run two ways, depending on what the product needs.

As part of a full editor instance. This is the most common path. The editor mounts in a browser or native app, the CreativeEngine starts as part of that process, and product code accesses it through the editor’s engine object. The user interacts with the canvas; the editor translates each interaction into engine API calls. This is the path every interactive Starter Kit uses.

As a standalone headless instance. The engine initializes with no UI attached. No canvas is rendered; no editor components are mounted. This is the path for server-side automation, batch generation, and any backend pipeline that needs to produce design output programmatically without a user present. The headless API surface is identical to what the editor uses internally, so a workflow developed against the editor’s API can be ported to headless mode with no logical change.

Where the engine shows up

The same CreativeEngine binary powers every product surface CE.SDK ships: the Design Editor, Photo Editor, Video Editor, the CE.SDK Renderer container for production server-side rendering, the Starter Kits that consume any of the above, and any headless workflow that runs in Node.js or on mobile.

See block for the unit the engine manipulates, scene for the container it loads and saves, and headless-mode for the standalone init path.

Usage & Examples


              import CreativeEngine from '@cesdk/cesdk-js';

const config = {
  license: 'your-license-key',
  userId: 'unique-user-id',
};

// Initialise the engine
const engine = await CreativeEngine.init(config);

// Load a scene from a URL
await engine.scene.loadFromURL(
  'https://example.com/scene.scene'
);

// Access top-level pages in the scene
const pages = engine.scene.getPages();
console.log(`Scene has ${pages.length} page(s)`);

// Manipulate a block on the first page
const [firstPage] = pages;
const blocks = engine.block.getChildren(firstPage);
engine.block.setOpacity(blocks[0], 0.5);

// Export to PNG
const blob = await engine.block.export(
  firstPage,
  'image/png'
);

Links

Documentation and references for this concept.

CreativeEngine API Reference

Full API reference for initialising and configuring the engine across platforms.

Documentation

Getting Started Guide

Step-by-step walkthrough for setting up CE.SDK in your project and loading your first scene.

Documentation

Headless Integration Guide

Learn how to run the engine without any built-in UI and drive everything through the API.

Documentation

Related Terms

Scene

The root-level document in CE.SDK, a specialized block that sits at the top of the block hierarchy and contains one or m…

Headless Mode

Running the CreativeEngine as a pure API (without any editor UI) to perform creative operations programmatically: creati…

Block

The fundamental building unit of every scene in CE.SDK: everything in a design, including the scene itself, pages, image…