Search
Loading...
Skip to content

Engine Interface

The Creative Engine is the powerhouse behind CE.SDK’s cross-platform capabilities. While the UI components provide ready-to-use editing experiences, the Engine interface gives you direct programmatic control over all creative operations—from simple batch processing to complex automated workflows.

Client-Side vs Server-Side Processing#

Understanding when to use client-side versus server-side processing is crucial for building efficient creative automation workflows. Each approach offers distinct advantages depending on your use case requirements.

Client-Side Processing (Browser / Mobile Device)#

Client-side processing runs the Engine directly in the user’s client — but importantly, this doesn’t mean visible to the user. The Engine operates headlessly in the background, making it perfect for automation tasks that enhance user experience without interrupting their workflow.

Common Implementation Patterns:

Hidden Engine Instances: Run a second, invisible Engine instance alongside your main UI for background processing. While users edit in the primary interface, the hidden instance can validate designs, generate previews, or prepare export-ready assets.

// Hidden engine for background automation
const backgroundEngine = await CreativeEngine.init({
  container: null, // Headless - no UI container
  license: 'your-license-key',
});


// Use background engine for validation while user continues editing
async function validateDesignInBackground(sceneData) {
  await backgroundEngine.scene.loadFromString(sceneData);
  const issues = await runDesignValidation(backgroundEngine);
  return issues;
}

Underlying Engine Access: Access the Engine API directly from prebuilt UI components for custom automation within existing workflows.

Dedicated Engine Packages: Use platform-specific Engine packages (Web, iOS, Android) for specialized client-side automation without any UI overhead.

Ideal Client-Side Use Cases:

  • Design Validation: Check for empty placeholders, low-resolution images, or brand guideline violations in real-time
  • Thumbnail Generation: Create preview images for design galleries or version history
  • Effect Previews: Generate quick previews of filters or effects before applying them to the main design
  • Auto-Save Optimization: Compress and optimize scenes for storage while maintaining editability
  • Real-Time Feedback: Provide instant visual feedback for design rules or constraints
// Example: Real-time thumbnail generation
const thumbnailEngine = await CreativeEngine.init({ container: null });


async function generateThumbnail(sceneData) {
  await thumbnailEngine.scene.loadFromString(sceneData);
  const page = thumbnailEngine.scene.getPages()[0];


  // Generate small preview
  const thumbnail = await thumbnailEngine.block.export(page, 'image/jpeg', {
    targetWidth: 200,
    targetHeight: 200,
    quality: 0.7,
  });


  return thumbnail;
}


// Use during design process for gallery views
designHistory.forEach(async version => {
  const thumb = await generateThumbnail(version.sceneData);
  updateGalleryThumbnail(version.id, thumb);
});

Server-Side Processing (Node.js)#

Server-side processing using our Node.JS SDK moves the Engine to your backend infrastructure, unlocking powerful capabilities for resource-intensive operations and scalable workflows.

Key Advantages:

  • Enhanced Resources: Access to more CPU, memory, and storage than client devices
  • Parallelizable Workflows: Run multiple Engine instances simultaneously for bulk processing
  • Secure Asset Access: Process private assets without exposing them to client-side code
  • Background Operations: Handle long-running tasks without affecting user experience
  • Scheduled Automation: Trigger design generation based on events, schedules, or external APIs

Ideal Server-Side Use Cases:

  • High-Resolution Exports: Generate print-quality assets that would be too resource-intensive for client devices
  • Bulk Generation: Create thousands of design variations for marketing campaigns or product catalogs
  • Data Pipeline Integration: Connect to databases, APIs, or file systems for automated content generation
  • Multi-Format Output: Export designs in multiple formats and resolutions simultaneously
  • Workflow Orchestration: Coordinate complex multi-step automation processes

Hybrid Workflows: Often, the most effective approach combines both client and server-side processing. Users can design and preview on the client with instant feedback, while heavy processing happens on the server in the background.

Engine-Powered Use Cases#

The Engine interface unlocks powerful automation scenarios that can scale creative workflows:

Batch Processing#

Process multiple designs simultaneously with consistent results. Whether you’re applying filters to hundreds of images or generating variations of a marketing template, the Engine handles bulk operations efficiently both client-side and server-side.

// Example: Batch apply filters to multiple images
for (const imageData of imageCollection) {
  const page = engine.scene.createPage();
  const image = engine.block.create('image');
  engine.block.setString(image, 'image/imageFileURI', imageData.url);


  // Apply consistent filters
  const filter = engine.block.createEffect('filter');
  engine.block.appendChild(image, filter);


  // Export processed result
  const result = await engine.block.export(page, 'image/png');
}

Auto-Resize#

Automatically adapt designs to different aspect ratios and platforms. The Engine intelligently repositions elements, adjusts text sizes, and maintains visual hierarchy across formats—from Instagram stories to LinkedIn posts.

Data Merge#

Connect external data sources (CSV, JSON, APIs) to templates for personalized content generation. Perfect for creating thousands of product cards, personalized certificates, or location-specific campaigns.

// Example: Merge product data into template
const productData = await fetch('/api/products').then(r => r.json());


for (const product of productData) {
  // Load template
  const scene = await engine.scene.loadFromURL('/templates/product-card.scene');


  // Replace placeholder content
  engine.block.setString(titleBlock, 'text/text', product.name);
  engine.block.setString(priceBlock, 'text/text', `$${product.price}`);
  engine.block.setString(imageBlock, 'image/imageFileURI', product.imageUrl);


  // Export personalized design
  const output = await engine.block.export(page, 'image/png');
}

Product Variations#

Generate multiple versions of product designs with different colors, sizes, or configurations. Ideal for e-commerce platforms needing to showcase product options without manual design work.

Design Generation#

Create entirely new designs programmatically based on rules, templates, or AI inputs. The Engine can compose layouts, select appropriate fonts, and arrange elements according to your design guidelines. See the full guide for details.

Multiple Image Generation#

Efficiently process and export designs in various formats and resolutions. Generate web-optimized previews alongside print-ready high-resolution files in a single workflow.

Actions#

Implement complex multi-step operations as reusable actions. Chain together filters, transformations, and exports to create sophisticated automated workflows that can be triggered programmatically.