Creative Automation – IMG.LY Blog

AI Design Agents and Creative Automation: How to Ship a Full Campaign Without a Designer

Klaudia — Wed, 01 Apr 2026 10:14:03 GMT

You have your files, hooks, Google Ads data but still can’t actually launch a campaign because you have to go to a designer for the final assets.

That gap is exactly where campaign momentum dies. Not at the strategy stage or in copy but at the last mile, when everything is ready except the thing people will actually see.

Luckily, it no longer has to.

The AI Marketing Stack Has a Design-Shaped Hole in It

Most marketing workflows have been quietly transformed over the last two years. Copy generation, audience segmentation, keyword research, performance analysis - all of it runs faster now, with less manual input. A solo marketer can do what used to require a team. Except for one part.

Design hasn’t moved. The workflow is still: write a brief, hand it to a designer, wait, review, revise, wait again. Then do the same thing in three more formats because the 1:1 you approved doesn’t fit Stories, Display, or LinkedIn. That loop can take days. And it doesn’t matter how good your AI-generated copy is if it’s sitting in a doc waiting for someone to have bandwidth.

This isn’t a resourcing problem. Hiring more designers doesn’t fix the structural issue; it just adds capacity to a fundamentally slow process. The problem is that the tools built for design weren’t designed for the workflow a modern marketer actually runs. They expect a designer at the keyboard. They don’t expect a marketer with a campaign brief and a conversation window.

The result: campaigns that are otherwise fully automated still stall before they ship. The bottleneck moved from copy to creative. And most teams haven’t noticed yet, because design delays feel normal. They’ve always been there.

What an AI Design Agent Actually Changes

An AI design agent is an autonomous AI system, not a prompt-response tool. It plans, reasons, and executes design tasks independently. Given a goal, it breaks that goal into steps, uses the tools available to it, retains context across the session, and can self-correct when the output isn’t right. That’s the category: a system that drives the workflow rather than waiting for instruction at each step.

Most design agents deliver speed. The handoff that used to take days can happen in minutes. But the output is still a deliverable: a file you receive, use as-is, or move somewhere else. Most operate inside existing tools or generate assets you work with elsewhere. The speed is real, the editability usually isn’t. If something needs to change, you’re back to prompting from scratch.

CoDesign sits differently. It doesn’t hand you a finished asset. It gives you a working starting point on a real canvas. Layers, text boxes, placeholders - real assets you can continue to work with, in the same conversation, without leaving the session.

Brand consistency gets handled at the foundation. Load your brand kit once, including colors, fonts, logo, and layout rules, and every output that session respects those constraints. You’re not eyeballing hex codes or hoping the font looks right. The rules are applied from the start, not checked at the end.

Multi-format adaptation is where the time savings become concrete. A campaign that runs across Instagram, Google Display, LinkedIn, and print doesn’t produce four separate briefs and four separate rounds of designer revisions. You describe the formats you need, and the agent adapts the work. The campaign stays consistent across all of them.

The biggest shift isn’t speed, though that’s real. It’s that you stay in creative control throughout. There’s no handoff moment where you lose the thread and have to re-explain the brief to someone else. The context lives in the conversation.

How to Run a Campaign Production Session with CoDesign

This is the actual sequence. Walk through it once and the workflow becomes repeatable.

1.Start with the brief. Open CoDesign and describe the campaign in plain language. Audience, objective, platform, tone, any constraints. The more specific you are here, the less iteration you’ll need later. Treat it like briefing a senior designer who hasn’t worked with your brand before.

2.Generate copy variations before you open the canvas. Use whichever AI writing tool you already work with — ChatGPT, Claude, or whatever is in your stack — to produce multiple copy directions: headline hooks, body copy, CTAs. Get four or five versions per element. Copy and design are separate steps that feed into each other. Having real options ready before you start the design session means CoDesign has something specific to work with, not a blank brief waiting to be interpreted.

3.Feed the brief to the AI design companion. With copy variations ready, ask CoDesign to generate initial ad designs. Describe the format, the hierarchy you want, any layout preferences. You’ll get structured, editable designs on the canvas. Not a rendered image, but a working starting point with real layers.

4.Apply your brand kit. If you haven’t already, load your brand assets: logo, color palette, type system, approved imagery. The agent applies these rules to the designs. Every output from this point respects your brand standards automatically.

5.Adapt across formats. Tell the agent which formats you need. The social variant, the display variant, the vertical for Stories, the square for feed. Watch the layouts adapt to each context, maintaining the campaign idea and brand consistency across dimensions. If the hierarchy needs adjusting for a specific format, describe what’s not working and the agent fixes it in conversation.

6.Refine in conversation. This is where the canvas-based approach earns its value. You’re not generating new versions from scratch. You’re iterating on what’s already there, in the same session. “Move the logo to the bottom right. Try the headline in the lighter weight. Swap this layout for something with more white space.” Each exchange builds on the last, so the conversation stays grounded in what’s on the canvas rather than starting over from a new prompt.

7.Export and ship. When the designs are approved, export in the formats your media plan requires. The session context lives with the file, so if something needs to change post-launch, you’re not starting from zero.

One honest note: the quality of the output is proportional to the quality of the brief. Vague prompts produce generic starting points. Teams that invest two minutes in a specific, structured brief consistently get more usable first outputs than teams that describe the campaign in one sentence and expect the agent to fill in the gaps.

This Is What Closing the Loop Actually Looks Like

Design agents don’t replace designers. They remove the bottleneck that sits between strategy and execution.

The marketer who used to wait three days for ad assets can now produce a full campaign set in a single session. The designer who spent half their week on format resizes and small-copy tweaks can spend that time on the work that genuinely requires their judgment. That means brand-defining creative, campaign concepts, and anything where taste and experience are the actual input.

It was never about willingness to collaborate. The tools just didn’t allow for anything else. Every design change, no matter how small, had to go through a handoff. A headline adjustment on a banner resize does not need a creative director. A resize from 1:1 to 9:16 does not need a brief, a Slack message, and a 48-hour turnaround.

Thanks to design agents conversation shifts. It moves from “can you make this” to “how should this look.” And that’s a way more interesting conversation.

Interested in trying IMG.LY CoDesign? Reach out to our team.

How to Generate 10,000 Localized Ad Variants with CE.SDK Engine API

Klaudia — Tue, 20 Jan 2026 11:22:18 GMT

You’re launching a global campaign across 50 markets, 5 languages, and 40 product categories. That’s 10,000 unique ad variants—and you need them ready by Monday. Your design team can’t produce that volume manually, outsourcing to agencies would take weeks and cost a fortune, and copy-pasting templates in Photoshop isn’t a realistic option.

This is the reality of performance marketing at scale. The modern approach treats creative generation as infrastructure: designers create one master template with intelligence built in, your systems inject localized data programmatically, and automation renders thousands of perfect variants in hours instead of weeks. You’re not replacing creative work—you’re separating template design (what humans do best) from variant generation (what automation does best).

In this guide, we’ll build a complete pipeline for generating 10,000 localized ad variants using CE.SDK’s Engine API. You’ll see the full architecture, production-ready code for batch processing, localization handling across languages and markets, performance optimization strategies, and how to deliver finished assets to your ad platforms. This isn’t a toy example—it’s the real infrastructure teams like Plai use to generate 30,000+ ad creatives monthly.

This guide is written for engineers and technical teams building high-volume creative automation pipelines, and assumes familiarity with Node.js, APIs, and backend infrastructure.

If you’re new to CE.SDK, start with our explainer on how the unified engine works to understand the platform. For strategic context on why automation infrastructure matters, see our article on creative automation infrastructure. This guide assumes you’re ready to implement and want the technical details.

A quick note on CE.SDK templates: CE.SDK templates are the same artifacts used by both the visual editor and the Engine API, which is what allows designers and automation pipelines to share a single source of truth.

What You’ll Build

By the end of this guide, you’ll have:

A production-ready batch rendering pipeline for 10,000+ variants
A localization-safe template design strategy
GPU-accelerated rendering with horizontal scaling
Automated output delivery to ad platforms

System Architecture: From Template to 10,000 Variants

Before writing code, let’s map the complete system architecture. You need four layers working together: template design, data management, generation engine, and output delivery.

Template Design Layer is where your designers create the master ad template using CE.SDK’s visual editor. They define the layout, set up text variables for headlines and CTAs, configure image placeholders for product photos, lock brand elements that shouldn’t change, and test with sample data to ensure the template handles different content lengths. This template becomes the source of truth for all 10,000 variants.

Data Management Layer holds three datasets: your product catalog (40 products with names, prices, images, and features translated into 5 languages), market configurations (50 markets with language, currency, locale, and platform specifications), and creative variants (different headlines and CTAs you want to A/B test). The generation engine combines these datasets to produce unique outputs.

Generation Engine is CE.SDK’s Node.js renderer running on your servers. It loads the template, loops through your data combinations, injects each variant’s specific data, renders the creative, and exports in your target formats. This runs as batch jobs—either scheduled overnight or triggered by campaign launches.

Output Management takes the rendered assets and delivers them where they need to go: uploads to your CDN with organized paths for easy retrieval, integration with ad platform APIs (Facebook Marketing API, Google Ads API), manifest generation for tracking which variants deployed where, and analytics tagging for performance measurement.

The data flow looks like this: Template (one master design) + Product Data (40 items × 5 languages) + Market Data (50 configurations) + Creative Variants (5 headline/CTA combinations) = 10,000 unique assets ready for deployment.

From an infrastructure perspective, you’ll need a Node.js server environment (version 16 or higher recommended), rendering nodes (GPU-enabled for optimal performance), storage for templates, source data, and rendered outputs (S3, Google Cloud Storage, or equivalent), a CDN for asset delivery to ad platforms, and optionally Redis for caching frequently used data and a queue system like RabbitMQ or AWS SQS for managing batch jobs across multiple rendering nodes.

Why This Architecture Scales

Separation of concerns is the key to maintainability. Designers work in the visual editor without touching code. Engineers manage the data pipeline and rendering infrastructure. Marketers configure campaigns and trigger generation. Each team works in their domain, connected by the template format.

Horizontal scaling means adding more rendering nodes increases throughput linearly. One GPU node might handle 100 variants per second. Four nodes handle 400 per second. Ten nodes handle 1,000 per second. Your 10,000-variant job scales from 100 seconds down to 10 seconds just by adding capacity.

Caching strategies make repeated renders faster. Load the template once and duplicate it for each variant instead of reloading from disk every time. Pre-cache fonts used across all variants. Pre-load common assets into memory. These optimizations can significantly reduce initial load time and prevent redundant network requests.

Batch processing efficiency comes from parallel execution. Instead of processing one variant at a time, process 100 simultaneously (memory permitting), then the next 100, and so on. This keeps your GPUs saturated and maximizes throughput.

For the deep technical details on GPU-accelerated rendering and server deployment, see our CE.SDK Renderer deep-dive. For this guide, we’ll focus on the generation pipeline itself.

Designing Templates That Work Across 50 Markets

Template design is where most multi-market campaigns fail. A template that works perfectly in English might break spectacularly in German (30% longer text), Japanese (different character density), or Arabic (right-to-left layout). Get this foundation right or waste time debugging broken renders at scale.

Text Overflow Handling

Different languages have wildly different text lengths for the same content. “Buy Now” in English becomes “Jetzt Kaufen” in German (33% longer), “今すぐ購入” in Japanese (compact characters), or “اشتر الآن” in Arabic (with different text flow). Your template needs to handle this automatically without manual adjustment per language.

CE.SDK’s auto-formatting handles overflow intelligently. You configure text blocks with minimum and maximum font sizes, and the engine scales text to fit. If content is too long, it reduces font size within your defined range. If it’s still too long, it wraps to multiple lines (if allowed) or truncates with ellipses (if single-line is required).

Here’s how to configure a text block for flexible sizing:

// Configure headline text block with overflow handling
await engine.block.setFloat(headlineBlock, 'text/fontSize', 32);
await engine.block.setFloat(headlineBlock, 'text/minAutomaticFontSize', 24);
await engine.block.setBool(
  headlineBlock,
  'text/automaticFontSizeEnabled',
  true
);
await engine.block.setString(
  headlineBlock,
  'text/horizontalAlignment',
  'center'
);
await engine.block.setString(headlineBlock, 'text/verticalAlignment', 'center');

This configuration says: “Start at 32pt font. If text doesn’t fit, scale down to 24pt. If it still doesn’t fit, allow the text block to grow vertically (add lines). Center the text horizontally and vertically within its bounds.”

Test your template with the longest and shortest language variants before automating. German and Finnish tend to be longest for European languages. Japanese and Korean are typically shortest due to character density. If your template works with German headlines and Japanese CTAs, it’ll probably work everywhere.

Layout Flexibility and Safe Zones

Fixed layouts break when content exceeds expected lengths. Flexible layouts adapt. Define safe zones where critical elements (product images, logos, legal disclaimers) must remain visible regardless of text length. Allow text blocks to expand within defined boundaries that don’t overlap these zones.

Note: CE.SDK uses manual positioning rather than automatic constraint-based layouts. For dynamic content, you’ll need to programmatically adjust element positions when text length varies. Consider using fixed layouts with sufficient padding, or implementing resize detection to reflow elements as needed.

Right-to-Left (RTL) Language Support

Arabic and Hebrew read right-to-left, which means your entire layout needs to mirror. Text aligns to the right, element ordering reverses, and directional indicators (arrows, chevrons) flip horizontally. You can’t just change text alignment—you need full layout transformation.

Detect RTL markets in your market configuration data and apply layout transforms programmatically:

// Check if market requires RTL layout
if (market.textDirection === 'rtl') {
  // Mirror the entire scene horizontally
  await engine.block.setFloat(sceneBlock, 'transform/rotation', Math.PI);
  await engine.block.setFloat(sceneBlock, 'transform/scaleX', -1);

  // Right-align text blocks
  await engine.block.setString(
    headlineBlock,
    'text/horizontalAlignment',
    'right'
  );
  await engine.block.setString(bodyBlock, 'text/horizontalAlignment', 'right');
}

Alternatively, design separate RTL and LTR template variants if the layout differences are significant. Load the appropriate template based on market configuration.

Font Management Across Languages

Latin fonts (Roboto, Open Sans, Arial) don’t include glyphs for Chinese, Japanese, or Korean characters. Load those fonts and you’ll see empty boxes instead of text. You need font families with appropriate character coverage for each language.

Google’s Noto font family is your friend here—it has variants covering virtually every writing system. Map languages to appropriate fonts:

const fontMapping = {
  en: 'Roboto',
  es: 'Roboto',
  fr: 'Roboto',
  de: 'Roboto',
  ja: 'Noto Sans JP',
  ko: 'Noto Sans KR',
  zh: 'Noto Sans SC',
  ar: 'Noto Sans Arabic',
  he: 'Noto Sans Hebrew',
  th: 'Noto Sans Thai',
};

async function applyFontForLanguage(engine, textBlock, language) {
  const fontFamily = fontMapping[language] || 'Roboto';
  await engine.block.setString(textBlock, 'text/fontFamily', fontFamily);
}

Pre-load all required fonts before batch processing starts. Font loading has initialization overhead—doing it once per batch instead of per variant saves significant time.

Cultural and Visual Considerations

Colors carry different meanings across cultures. White signals purity and weddings in Western markets but represents mourning in parts of East Asia. Red is lucky in China but signals danger or alerts elsewhere. Your template should allow market-specific color overrides if needed.

Imagery needs localization too. Stock photos featuring Western models might not resonate in Asian markets. Lifestyle imagery showing specific products (food, clothing) needs cultural adaptation. Build flexibility into your template for swapping background images or graphic elements per market.

Date formats, currency symbols, and number formatting vary by locale. Don’t hardcode “12/25/2024” (US format) or “$99.99” (dollar sign). Use market configuration to format correctly: “25.12.2024” and “99,99 €” for European markets, “2024年12月25日” and “¥11,000” for Japan.

Digitas built a centralized campaign portal for 600+ car dealers across 9-10 automotive brands with automated multilingual asset generation in German, French, and Italian. Their 140 active campaigns generate thousands of assets with self-service creation—adapting campaigns from days to seconds while maintaining brand compliance across all stakeholders.

Martin Röhr, Senior Project Manager: “We shipped a much better product than initially planned. Building something like this ourselves would have taken years or ten times the budget.”

Template Design Checklist

Before moving to code, validate your template:

Test with longest language variant (usually German or Finnish)
Test with shortest variant (often Japanese due to character density)
Verify RTL layout if supporting Arabic or Hebrew markets
Confirm font coverage for all target languages (no missing glyphs)
Leave flexible space for text expansion (30% buffer minimum)
Define safe zones for critical brand elements
Test all CTA button texts to ensure they fit
Validate currency and number formatting across locales

Get the template right and automation becomes straightforward. Get it wrong and you’ll debug layout issues across 10,000 variants.

Organizing Data for 10,000 Variants

Data structure determines how efficiently you generate at scale. Three layers of data combine to produce your variants: product information, market configurations, and creative variations. Structure them correctly and your generation code becomes clean. Structure them poorly and you’ll fight data transformation bugs.

Product Data Structure

Each product needs information in all target languages plus market-specific details:

{
  "productId": "PRD-001",
  "category": "electronics",
  "name": {
    "en": "Wireless Noise-Cancelling Headphones",
    "es": "Auriculares Inalámbricos con Cancelación de Ruido",
    "fr": "Écouteurs Sans Fil à Réduction de Bruit",
    "de": "Kabellose Kopfhörer mit Geräuschunterdrückung",
    "ja": "ワイヤレスノイズキャンセリングヘッドホン"
  },
  "price": {
    "USD": 299.99,
    "EUR": 279.99,
    "GBP": 249.99,
    "JPY": 33000
  },
  "images": {
    "product": "https://cdn.example.com/products/prd-001-main.jpg",
    "lifestyle": "https://cdn.example.com/products/prd-001-lifestyle.jpg",
    "detail": "https://cdn.example.com/products/prd-001-detail.jpg"
  },
  "features": {
    "en": [
      "Active Noise Cancellation",
      "40-Hour Battery Life",
      "Premium Sound Quality"
    ],
    "es": [
      "Cancelación Activa de Ruido",
      "40 Horas de Batería",
      "Calidad de Sonido Premium"
    ],
    "fr": [
      "Réduction Active du Bruit",
      "Autonomie 40 Heures",
      "Qualité Audio Premium"
    ],
    "de": [
      "Aktive Geräuschunterdrückung",
      "40 Stunden Akkulaufzeit",
      "Premium-Klangqualität"
    ],
    "ja": [
      "アクティブノイズキャンセリング",
      "40時間バッテリー",
      "プレミアムサウンド"
    ]
  }
}

This structure supports language-specific content (names, features) and market-specific pricing. Store products in a database (PostgreSQL, MongoDB) or JSON files depending on your infrastructure and update frequency.

Market Configuration

Markets define language, currency, locale, and platform-specific requirements:

{
  "marketId": "US",
  "country": "United States",
  "language": "en",
  "locale": "en-US",
  "currency": "USD",
  "currencySymbol": "$",
  "currencyPosition": "before",
  "textDirection": "ltr",
  "dateFormat": "MM/DD/YYYY",
  "numberFormat": {
    "decimal": ".",
    "thousands": ","
  },
  "targetPlatforms": ["facebook", "instagram", "google"],
  "adSpecs": {
    "facebook": {
      "feed": { "width": 1080, "height": 1080, "format": "jpg" },
      "story": { "width": 1080, "height": 1920, "format": "jpg" }
    },
    "instagram": {
      "square": { "width": 1080, "height": 1080, "format": "jpg" },
      "portrait": { "width": 1080, "height": 1350, "format": "jpg" }
    }
  }
}

Market configurations centralize localization logic. When rendering for the German market, you load its configuration and apply language, currency, number formatting, and platform specs automatically.

Creative Variant Configuration

Different headlines and CTAs for A/B testing:

{
  "variantId": "VAR-001",
  "name": "Value-Focused",
  "headline": {
    "en": "Premium Quality at an Unbeatable Price",
    "es": "Calidad Premium a un Precio Inmejorable",
    "fr": "Qualité Premium à Prix Imbattable",
    "de": "Premium-Qualität zum unschlagbaren Preis",
    "ja": "プレミアム品質、比類なき価格"
  },
  "cta": {
    "en": "Shop Now",
    "es": "Comprar Ahora",
    "fr": "Acheter Maintenant",
    "de": "Jetzt Kaufen",
    "ja": "今すぐ購入"
  },
  "background": "gradient-blue",
  "layout": "product-focus"
}

Creative variants let you test messaging strategies across markets. Same product, same market, different headline/CTA combinations to find what resonates best.

Combining Data Layers

The Cartesian product of these layers creates your 10,000 variants:

40 products
× 50 markets
× 5 creative variants
= 10,000 unique combinations

Each combination needs a unique render with the right product, localized for the right market, using the right creative messaging. Your generation code loops through these combinations systematically. As your variant dimensions grow, treat generation as a queued system rather than a single batch job to avoid runaway combinatorics.

For efficient processing, organize batches strategically. Group by market if you want to process all products for one market sequentially (better for CDN upload batching). Group by product if you want to process all markets for one product in parallel (better for data loading efficiency). Choose based on your downstream workflows.

Building the Generation Engine

Now for the code that actually generates 10,000 variants. This is production-ready implementation with error handling, performance optimization, and progress tracking.

Step 1: Initialize the Rendering Engine

import CreativeEngine from '@cesdk/node';
import fs from 'fs/promises';
import path from 'path';

// Initialize CE.SDK engine
const engine = await CreativeEngine.init({
  license: process.env.CESDK_LICENSE,
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-node/1.31.0/assets',
});

console.log('✓ CreativeEngine initialized');

This initializes CE.SDK’s Node.js engine. Store your license key in environment variables for security.

Step 2: Load and Cache the Template

// Load template once, reuse for all variants
const templatePath = './templates/product-ad-template.scene';
const sceneId = await engine.scene.loadFromArchiveURL(templatePath);

console.log(`✓ Template loaded: ${sceneId}`);

// Get block IDs for elements we'll modify
// Strategy 1: Use findByType and filter by kind
const allTextBlocks = engine.block.findByType('text');
const blocks = {
  headline: allTextBlocks.find((id) => engine.block.getKind(id) === 'headline'),
  productName: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'product-name'
  ),
  ctaButton: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'cta-button'
  ),
  price: allTextBlocks.find((id) => engine.block.getKind(id) === 'price'),
  feature1: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'feature-1'
  ),
  feature2: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'feature-2'
  ),
  feature3: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'feature-3'
  ),
};

// Get image block
const allImageBlocks = engine.block.findByType('graphic');
blocks.productImage = allImageBlocks.find(
  (id) => engine.block.getKind(id) === 'product-image'
);

console.log('✓ Template blocks mapped');

Loading the template once and reusing it for all variants is critical for performance. Reloading from disk for each of 10,000 variants would add hours to your batch job. The specific strategy for managing scenes and blocks depends on your workflow—see the generation function for implementation considerations.

Step 3: Core Generation Function

async function generateAdVariant(
  engine,
  templateSceneId,
  blocks,
  product,
  market,
  variant
) {
  // Note: For high-volume generation, consider your scene management strategy.
  // Option 1: Load template fresh each time (simpler, slower)
  // Option 2: Duplicate blocks and modify (more complex, faster)
  // Option 3: Modify blocks in place, export, then restore (fastest, requires careful state management)
  // This example shows the modify-in-place approach with proper cleanup.

  try {
    const lang = market.language;

    // Update headline with localized creative variant
    await engine.block.setString(
      blocks.headline,
      'text/text',
      variant.headline[lang]
    );

    // Update product name
    await engine.block.setString(
      blocks.productName,
      'text/text',
      product.name[lang]
    );

    // Format and update price with market-specific currency
    const formattedPrice = formatCurrency(
      product.price[market.currency],
      market.currencySymbol,
      market.currencyPosition,
      market.numberFormat
    );
    await engine.block.setString(blocks.price, 'text/text', formattedPrice);

    // Update CTA button
    await engine.block.setString(
      blocks.ctaButton,
      'text/text',
      variant.cta[lang]
    );

    // Update product features (if product has features)
    if (product.features && product.features[lang]) {
      const features = product.features[lang];
      if (features[0])
        await engine.block.setString(blocks.feature1, 'text/text', features[0]);
      if (features[1])
        await engine.block.setString(blocks.feature2, 'text/text', features[1]);
      if (features[2])
        await engine.block.setString(blocks.feature3, 'text/text', features[2]);
    }

    // Replace product image by setting the fill image URI
    await engine.block.setString(
      blocks.productImage,
      'fill/image/imageFileURI',
      product.images.product
    );

    // Apply market-specific font for proper character support
    const font = getFontForLanguage(market.language);
    await engine.block.setString(blocks.headline, 'text/fontFamily', font);
    await engine.block.setString(blocks.productName, 'text/fontFamily', font);

    // Handle RTL layouts for Arabic/Hebrew markets
    if (market.textDirection === 'rtl') {
      await engine.block.setString(
        blocks.headline,
        'text/horizontalAlignment',
        'right'
      );
      await engine.block.setString(
        blocks.productName,
        'text/horizontalAlignment',
        'right'
      );
    }

    // Generate filename: {marketId}_{productId}_{variantId}.png
    const filename = `${market.marketId}_${product.productId}_${variant.variantId}.png`;
    const outputDir = `./output/${market.marketId}/${product.category}`;
    await fs.mkdir(outputDir, { recursive: true });
    const outputPath = path.join(outputDir, filename);

    // Export the rendered variant using the scene block
    const sceneBlock = engine.block.findByType('scene')[0];
    const blob = await engine.block.export(sceneBlock, {
      mimeType: 'image/png',
    });
    const buffer = Buffer.from(await blob.arrayBuffer());
    await fs.writeFile(outputPath, buffer);

    return { success: true, path: outputPath, filename };
  } catch (error) {
    return {
      success: false,
      error: error.message,
      product: product.productId,
      market: market.marketId,
      variant: variant.variantId,
    };
  }
}

This function handles a single variant: duplicates the template, injects all localized data, applies market-specific formatting, renders, exports, and cleans up. The try/catch/finally pattern ensures memory cleanup even if rendering fails.

Step 4: Orchestrating the Batch

async function generateAllVariants() {
  // Load data
  const products = await loadProducts(); // Your function to load 40 products
  const markets = await loadMarkets(); // Your function to load 50 markets
  const variants = await loadCreativeVariants(); // Your function to load 5 variants

  const startTime = Date.now();
  let completed = 0;
  let failed = 0;
  const total = products.length * markets.length * variants.length;
  const errors = [];

  console.log(`Starting generation of ${total} variants...`);

  // Build all combinations
  const combinations = [];
  for (const product of products) {
    for (const market of markets) {
      for (const variant of variants) {
        combinations.push({ product, market, variant });
      }
    }
  }

  // Process in parallel batches to manage memory
  const batchSize = 100; // Tune based on your server's memory

  for (let i = 0; i < combinations.length; i += batchSize) {
    const batch = combinations.slice(i, i + batchSize);
    const batchStartTime = Date.now();

    // Process batch in parallel
    const results = await Promise.all(
      batch.map(({ product, market, variant }) =>
        generateAdVariant(engine, sceneId, blocks, product, market, variant)
      )
    );

    // Track results
    for (const result of results) {
      if (result.success) {
        completed++;
      } else {
        failed++;
        errors.push(result);
      }
    }

    // Progress reporting
    const batchDuration = (Date.now() - batchStartTime) / 1000;
    const overallElapsed = (Date.now() - startTime) / 1000;
    const rate = completed / overallElapsed;
    const remaining = (total - completed - failed) / rate;

    console.log(
      `Batch ${Math.ceil((i + 1) / batchSize)}/${Math.ceil(total / batchSize)}: ` +
        `${completed} completed, ${failed} failed | ` +
        `${rate.toFixed(1)} variants/sec | ` +
        `${Math.ceil(remaining)}s remaining`
    );
  }

  // Final summary
  const totalDuration = (Date.now() - startTime) / 1000;
  console.log('\n=== Generation Complete ===');
  console.log(
    `✓ Completed: ${completed}/${total} (${((completed / total) * 100).toFixed(1)}%)`
  );
  console.log(`✗ Failed: ${failed}/${total}`);
  console.log(`⏱ Duration: ${(totalDuration / 60).toFixed(1)} minutes`);
  console.log(
    `⚡ Average rate: ${(completed / totalDuration).toFixed(1)} variants/sec`
  );

  // Log errors for debugging
  if (errors.length > 0) {
    console.log('\nFailed variants:');
    errors.forEach((err) => {
      console.log(
        `  ${err.product}/${err.market}/${err.variant}: ${err.error}`
      );
    });
  }

  return { completed, failed, errors, duration: totalDuration };
}

// Run the batch generation
const result = await generateAllVariants();

This orchestration code processes all 10,000 variants in batches of 100 (tune this based on available memory). It tracks progress, estimates time remaining, handles errors gracefully, and provides a comprehensive summary when complete.

Performance Optimization: From Hours to Minutes

Default configurations won’t give you optimal performance. Here’s how to tune for speed and scale.

GPU Acceleration: Significant Performance Boost

CE.SDK Renderer leverages GPU acceleration for faster rendering compared to CPU-only processing. The engine automatically uses available GPU resources when properly configured on GPU-enabled infrastructure.

Infrastructure requirements: Use GPU-enabled instances (AWS g4dn.xlarge or larger, Google Cloud n1-standard with GPU, or on-premise servers with NVIDIA GPUs). GPU instances cost more per hour but complete jobs faster, often resulting in lower total cost for batch workloads.

See our CE.SDK Renderer technical guide for detailed GPU deployment instructions.

Template and Asset Caching

Loading templates and assets repeatedly is wasteful. Cache them:

// Bad: Loading template for every variant (slow)
for (const combo of combinations) {
  const scene = await engine.scene.loadFromArchiveURL(templatePath); // Repeated loading
  // ... render ...
}

// Good: Load once, modify blocks in place for each variant (fast)
const templateScene = await engine.scene.loadFromArchiveURL(templatePath);

// Get references to blocks once
const allTextBlocks = engine.block.findByType('text');
const blocks = {
  headline: allTextBlocks.find((id) => engine.block.getKind(id) === 'headline'),
  productName: allTextBlocks.find(
    (id) => engine.block.getKind(id) === 'product-name'
  ),
  // ... etc
};

// Then modify these same blocks for each variant, exporting between changes
for (const combo of combinations) {
  // Modify block properties
  await engine.block.setString(blocks.headline, 'text/text', combo.headline);
  // ... other modifications ...

  // Export
  const blob = await engine.block.export(sceneBlock, { mimeType: 'image/png' });

  // Continue to next variant
}

Note on font pre-loading: While font caching can improve performance, the specific font loading API varies by implementation. Consult the CE.SDK documentation for current best practices on font management and caching strategies.

Batch Size Tuning

Batch size affects throughput and memory usage. Too small (10-20) means you’re not maximizing parallelism. Too large (500+) risks running out of memory and crashing mid-batch.

Find your optimal batch size empirically:

const testCombinations = combinations.slice(0, 1000);
const batchSizes = [50, 100, 150, 200];

for (const size of batchSizes) {
  const start = Date.now();
  // Process test batch
  for (let i = 0; i < testCombinations.length; i += size) {
    const batch = testCombinations.slice(i, i + size);
    await Promise.all(batch.map((c) => generateAdVariant(/* ... */)));
  }
  const duration = Date.now() - start;
  const rate = 1000 / (duration / 1000);
  console.log(`Batch size ${size}: ${rate.toFixed(1)} variants/sec`);
}

Typical sweet spot: 100-200 for servers with 16-32GB RAM.

Horizontal Scaling with Multiple Rendering Nodes

One server hitting limits? Add more nodes and distribute work via a queue system:

// Simplified queue-based architecture
import Queue from 'bull'; // Or AWS SQS, RabbitMQ, etc.

const renderQueue = new Queue('ad-generation');

// Producer: Add jobs to queue
for (const combo of combinations) {
  await renderQueue.add(combo);
}

// Consumer (runs on each rendering node):
renderQueue.process(async (job) => {
  const { product, market, variant } = job.data;
  return await generateAdVariant(
    engine,
    sceneId,
    blocks,
    product,
    market,
    variant
  );
});

With 4 rendering nodes, you get 4x throughput. Your 10,000-variant job that took 25 minutes on one node completes in ~6 minutes with four nodes.

Performance Benchmarks

These are estimated performance ranges. Real-world performance varies significantly based on template complexity, image sizes, effects applied, and infrastructure configuration:

Single CPU core: ~5-10 variants/second
Single GPU (NVIDIA T4): ~50-100 variants/second
4 GPU nodes: ~200-400 variants/second
10,000 variants: Approximately 25 seconds to 30 minutes depending on setup

Example estimate: AWS g4dn.xlarge (1 GPU) @ $0.526/hour might generate ~100 variants/sec = 10,000 in ~100 seconds. Estimated total cost: ~$0.015 per batch. Scaling to 4 nodes could reduce time to ~25 seconds with 4x the hourly cost but similar total spend due to shorter duration.

Always benchmark with your specific templates and infrastructure before committing to production architecture.

Output Management and Delivery to Ad Platforms

Generated assets need organized storage and delivery to ad platforms. Here’s the complete workflow.

CDN Upload and Organization

Upload rendered assets to S3 (or equivalent) with organized paths:

import AWS from 'aws-sdk';

const s3 = new AWS.S3();

async function uploadToS3(localPath, product, market, variant) {
  // Organized path: ads/{marketId}/{category}/{filename}
  const key = `ads/${market.marketId}/${product.category}/${market.marketId}_${product.productId}_${variant.variantId}.png`;

  const fileContent = await fs.readFile(localPath);

  await s3
    .putObject({
      Bucket: process.env.S3_BUCKET,
      Key: key,
      Body: fileContent,
      ContentType: 'image/png',
      CacheControl: 'public, max-age=31536000', // 1 year cache
      Metadata: {
        productId: product.productId,
        marketId: market.marketId,
        variantId: variant.variantId,
        category: product.category,
        generatedAt: new Date().toISOString(),
      },
    })
    .promise();

  const cdnUrl = `https://cdn.example.com/${key}`;
  return cdnUrl;
}

Metadata tagging enables analytics tracking and asset management downstream.

Ad Platform Integration

Upload assets to Facebook/Instagram via Marketing API:

import {
  FacebookAdsApi,
  AdAccount,
  AdImage,
} from 'facebook-nodejs-business-sdk';

async function uploadToFacebookAdLibrary(imagePath, product, market) {
  const account = new AdAccount(`act_${process.env.FB_AD_ACCOUNT_ID}`);

  const image = new AdImage(null, process.env.FB_AD_ACCOUNT_ID);
  image.create({
    filename: path.basename(imagePath),
    bytes: await fs.readFile(imagePath),
  });

  // Tag with metadata for campaign organization
  const imageHash = image.hash;
  return {
    hash: imageHash,
    url: image.url,
    productId: product.productId,
    marketId: market.marketId,
  };
}

Similar integrations exist for Google Ads API, TikTok Ads, LinkedIn Ads, and programmatic platforms.

Manifest Generation

Create a manifest file tracking all generated variants:

const manifest = {
  generatedAt: new Date().toISOString(),
  totalVariants: 10000,
  variants: [],
};

// Add each variant to manifest during generation
manifest.variants.push({
  filename: `${market.marketId}_${product.productId}_${variant.variantId}.png`,
  cdnUrl: 'https://cdn.example.com/ads/US/electronics/US_PRD001_VAR1.png',
  productId: product.productId,
  productName: product.name.en,
  marketId: market.marketId,
  language: market.language,
  variantId: variant.variantId,
  headline: variant.headline[market.language],
  platforms: market.targetPlatforms,
});

await fs.writeFile('./output/manifest.json', JSON.stringify(manifest, null, 2));

This manifest feeds your campaign management tools, analytics dashboards, and reporting systems.

Troubleshooting Common Issues

Even with solid code, you’ll hit edge cases. Here’s how to debug them.

Issue: Text Overflow in German Headlines

Problem: German headlines exceed layout bounds, causing truncation or broken layouts.

Solution: Configure text blocks with proper overflow handling and test with German content during template design:

await engine.block.setFloat(headlineBlock, 'text/fontSize', 32);
await engine.block.setFloat(headlineBlock, 'text/minAutomaticFontSize', 20);
await engine.block.setBool(
  headlineBlock,
  'text/automaticFontSizeEnabled',
  true
);

Always test templates with longest-language variants before automating thousands of renders.

Issue: Memory Leaks During Batch Processing

Problem: Memory usage grows continuously, eventually crashing the process.

Solution: Ensure proper resource cleanup and consider your scene management strategy:

try {
  // Load or configure scene for variant
  // ... rendering ...
  // ... export ...
} finally {
  // Clean up blocks if needed using engine.block.destroy()
  // Specific cleanup depends on your implementation approach
}

Monitor memory with process.memoryUsage() and tune batch sizes accordingly.

Issue: Inconsistent Font Rendering

Problem: Some variants show correct fonts, others show fallbacks or missing glyphs.

Solution: Ensure all required fonts are available and properly configured before batch processing. Verify font files are accessible to the rendering engine (either bundled or loaded from URLs). Consult the CE.SDK documentation for specific font management approaches for your use case.

Issue: Slow First Batch, Then Fast

Problem: First 100 variants take 5 minutes, subsequent batches take 1 minute.

Explanation: Template loading, font initialization, and GPU warmup happen on first batch. This is normal overhead.

Solution: Run a small warmup batch (10-20 variants) before starting production batches, or accept the first-batch penalty as initialization cost.

Issue: Special Characters Rendering as Boxes

Problem: Japanese, Arabic, or Thai characters show as empty boxes (□).

Solution: Verify fonts support required character sets. Use Noto Sans font family for comprehensive Unicode coverage:

// Good: Noto Sans supports extensive character sets
await engine.block.setString(textBlock, 'text/fontFamily', 'Noto Sans JP');

// Bad: Roboto doesn't include CJK characters
await engine.block.setString(textBlock, 'text/fontFamily', 'Roboto'); // Will show boxes for Japanese

Debugging Best Practices

Start with a single variant to isolate template issues before running full batches
Log each data injection step to catch malformed data
Validate data completeness before sending to the engine (check for null/undefined values)
Keep a test dataset small (10-20 variants) during development
Export one variant manually through the visual editor to verify template correctness

From Proof of Concept to Production

You now have a complete pipeline for generating 10,000 localized ad variants programmatically. The architecture separates template design (visual editor), data management (structured JSON), generation (batch rendering), and delivery (CDN and ad platforms). This same pattern scales to millions of variants by adding rendering nodes horizontally.

The approach isn’t limited to ads. Apply it to email personalization (thousands of unique email headers), social media content (automated post generation for multiple accounts), product catalogs (e-commerce banners for entire inventory), or video campaigns (personalized video at scale). The template-plus-data model works wherever you need high-volume creative generation.

Production considerations you’ll want to add: monitoring and alerting for failed generation jobs (integrate with Datadog, CloudWatch, or similar), versioning for templates and data (Git for templates, database migrations for product data), A/B testing integration to track which creative variants perform best, and compliance checks to ensure all outputs meet brand guidelines and legal requirements.

Next steps for implementation: start with a small test batch (100 variants) to validate your complete pipeline end-to-end, optimize batch size and parallelization based on your infrastructure capacity, integrate with your existing marketing automation workflows, add quality gates and approval workflows for high-stakes campaigns, and set up monitoring dashboards to track generation performance and error rates.

For more background, see our CE.SDK explainer for understanding the visual editor and engine API capabilities, our creative automation infrastructure guide for strategic context on why this architecture matters, and our CE.SDK Renderer technical details for GPU rendering optimization and server deployment best practices.

Ready to test this yourself? Try CE.SDK to experiment with template creation and rendering workflows.

Automating Video Creation at Scale: Why Templates, Timelines, and Rendering Matter

Klaudia — Mon, 19 Jan 2026 10:46:07 GMT

You’ve automated image generation—your marketing team can produce thousands of product banners, social posts, and email headers without touching Photoshop. But when someone asks, “Can we do this for video?” the conversation gets complicated fast.

Video automation isn’t just “image automation with a timeline.” It’s fundamentally different. A static banner renders in 100 milliseconds. A 30-second video takes 10-30 seconds to render. Your 10MB image template becomes a 50MB video file. And that’s before you factor in audio tracks, transitions, platform-specific encoding requirements, and the reality that “vertical for TikTok” means different specs than “vertical for Instagram Stories.”

Most teams discover these challenges the hard way—after they’ve already committed to video automation and hit unexpected walls. The template that looked perfect in the editor breaks when the headline is 30% longer in German. The rendering pipeline that handled images fine collapses under video workloads. The licensing you thought you had doesn’t cover H.264 distribution.

Video automation is solvable. But it requires understanding what makes video different, designing templates that can handle variability, and building infrastructure that respects the complexity.

In this article we will cover:

Why video automation is different
Designing templates that scale
Architecture patterns for generation
Platform constraints & encoding
Production pitfalls & monitoring
When automation does (and doesn’t) make sense

Why Video Automation Is Fundamentally Different

If you’ve built image automation pipelines, video introduces layers of complexity that change how you think about templates, rendering, and infrastructure. The core differences:

Timeline complexity: Video adds time as a dimension—every element has duration, entry/exit timing, and potential animation
Multi-asset coordination: Dozens of assets (video clips, audio, overlays) must stay synchronized across time
Rendering performance: 100x slower than images (30-second video = 900 frames at 30fps)
File size: 10MB PNG becomes 50MB MP4, impacting storage and distribution
Platform requirements: Stricter, more varied specs (aspect ratios, duration limits, codec preferences)

Timeline Complexity vs. Static Composition

Images are spatial—elements positioned on a 2D canvas with fixed relationships. Video adds time. Every element now has duration, timing, and animation across the timeline.

When you generate 10,000 image variants with different text lengths, the layout adjusts spatially. With video, text length affects duration—do you extend the scene to accommodate longer copy, or speed up the animation? Neither is automatic.

A timeline-based engine like CE.SDK’s video editor handles this through track systems similar to TikTok or Instagram: foreground tracks for video clips and audio, background tracks that define overall video length. Video clips can be trimmed, repositioned, and arranged. Audio strips sync with video timing but remain independent—you can adjust one without breaking the other.

The automation challenge: when you inject variable data (product names, customer messages, CTAs), how does that affect the timeline? Template design needs to account for temporal variability, not just spatial.

Multi-Asset Coordination and Audio Sync

A single image template might reference 5-10 assets. A video template coordinates dozens: multiple video clips, background music, sound effects, overlay images, animated text, transitions. Each has its own timing, and they must stay synchronized when you generate variations.

Audio is particularly tricky:

Background music needs to match video duration (fade cleanly, not cut mid-phrase)
Voiceovers sync with specific visual moments
Sound effects trigger at precise timestamps
When automation extends duration (German translation longer), does audio stretch or stay fixed?

Timeline-based engines support audio playback with independent positioning controls. Audio strips appear in the timeline (not on canvas), and you can trim, reposition, and adjust timing independently of video tracks.

Key takeaway: Video templates aren’t just asset collections—they’re choreographed sequences where timing relationships matter as much as visual composition.

Rendering Performance and Infrastructure Implications

Static image rendering is near-instantaneous. Video rendering is fundamentally slower—every frame is a separate render. A 30-second video at 30fps is 900 frames.

Infrastructure implications:

GPU acceleration isn’t optional (CPU-only rendering is prohibitively slow)
Batch processing requires queuing systems (can’t render 1,000 videos synchronously)
Progress monitoring becomes essential (users need status, not guessing)
Export failures are costlier (failed image = 100ms wasted; failed video = 30 seconds)

Most video export APIs provide progress callbacks for real-time status:

const videoBlob = await engine.block.exportVideo(page, {
  mimeType: 'video/mp4',
  onProgress: (rendered, encoded, total) => {
    console.log(`Progress: ${Math.round((encoded / total) * 100)}%`);
  },
});

Designing Templates That Scale

Once you understand why video is different, the next challenge is designing templates that handle variability without manual intervention. Template design determines whether automation breaks or scales.

Scene-Based Modular Structure

Instead of a single 30-second video, think in scenes: 5-second intro, 15-second product showcase, 5-second CTA, 5-second outro. Each scene is self-contained.

Benefits:

Variable duration: Extend the product scene by 3 seconds for longer German translations without affecting intro/outro
Scene reordering: A/B test different sequences (CTA-first vs. product-first)
Conditional scenes: Include/exclude based on data (show “Limited Time Offer” scene only for promotions)
Reusable components: Same intro across multiple video types, swap middle scenes

The template creator defines scene boundaries, timing, and which elements automation can modify. Automation code loads the template and injects data without worrying about timeline complexity.

Text Duration and Audio Sync Strategies

Text management approaches:

Extend scene duration: Add seconds based on character count (Math.ceil(text.length / 40) seconds)
Reduce text: Pass pre-truncated strings that fit fixed timeline
Multi-line display: Let text wrap across frames (works for some designs, breaks others)

Audio sync strategies:

Fixed-duration music: Choose tracks matching video length exactly (less flexible)
Loopable music: Tracks designed to loop seamlessly—calculate loops needed, fade out at end (most reliable)
Adaptive music: Music that adapts to duration changes (complex but professional)

For automation, loopable music with fade-out is safest. Calculate final video duration after data injection, loop the audio track to cover that duration, apply 1-2 second fade at end.

Video Clip Placeholders and Safe Zones

Video placeholder logic:
Your template might designate a 5-second product demo slot, but actual product videos are 3, 7, or 12 seconds. Options:

Trim to fit: Longer clips trimmed to match; shorter clips looped (keeps consistent duration, may cut content)
Extend the scene: Adjust placeholder to match clip length (preserves content, variable duration)
Speed adjustment: Speed up/slow down clip to fit (works 0.75x-1.5x, extreme adjustments look awkward)

Safe zones for multi-format export:

Text safe zone: Keep all text 10% from edges (device overscan, UI overlays)
Critical content zone: Logos, faces, key products within central 70% (survives aspect ratio cropping)
Action-safe zone: Don’t place CTAs in corners where platform UI might cover them

When designing templates that export to multiple aspect ratios (16:9, 9:16, 1:1), test how cropping affects composition.

Architecture Patterns for Video Generation Pipelines

Once your templates can handle variability, the next challenge is scale: how do you actually generate thousands of videos reliably? Three proven patterns:

Pattern 1: Template-Based Batch Rendering

Use case: Marketing team uploads CSV with 500 products. Overnight, system generates 500 personalized video ads.

High-level workflow:

Frontend upload interface (CSV, database query, API)
Job queue (Redis, RabbitMQ, AWS SQS) holds generation requests
Worker nodes pull jobs, generate videos, upload to storage
Notification system alerts when batch completes

Why it works: Batch jobs don’t need real-time feedback. Optimize for throughput over latency—process 100 videos in parallel across 10 worker nodes.

Implementation pattern (simplified):

// Worker node processing one batch item
const engine = await CreativeEditorSDK.create('#cesdk_container', {
  license: process.env.CESDK_LICENSE,
});

const scene = await engine.scene.loadFromURL(
  'templates/product-ad-video.scene'
);

// Inject product data via Variables API
engine.variable.setString('productName', product.name);
engine.variable.setString('productPrice', product.price);

const videoBlob = await engine.block.exportVideo(scene, {
  mimeType: 'video/mp4',
  h264Profile: 77,
  framerate: 30,
  onProgress: (rendered, encoded, total) => {
    updateJobProgress(jobId, encoded / total);
  },
});

await uploadToS3(videoBlob, `output/${product.id}.mp4`);

Scaling: Add more worker nodes horizontally. With GPU-enabled instances, one node can process 10-20 videos per minute depending on complexity.

For large batches (10,000+ videos), use server-side rendering via Docker for maximum throughput. The CE.SDK Renderer handles GPU acceleration automatically and exports to your specified output directory.

Licensing note: For production deployments, use licensed Renderer variants (not open-source) to ensure proper H.264/H.265 codec coverage.

Pattern 2: Real-Time Personalization

Use case: User signs up for service. Within 30 seconds, they receive personalized welcome video with their name and company logo.

High-level workflow:

User action (signup, purchase, milestone) fires event
Serverless function receives event data
Engine generates video in real-time (typically 10-30 seconds)
Video URL returned or sent via email/notification
Cache generated videos if multiple users might trigger identical content

Why it works: Real-time generation provides immediate personalization. Latency (10-30 seconds for a 30-second video) is acceptable when delivered asynchronously.

When to use:

Video duration is short (under 60 seconds)
User data is simple (text substitution, not complex asset swapping)
Delivery is asynchronous (email, notification—not immediate playback)
Volume is moderate (hundreds per hour, not thousands per minute)

For higher volumes, shift to Pattern 1 (batching) or Pattern 3 (hybrid).

Pattern 3: Hybrid UI + Automation

Use case: Marketing manager designs campaign video template in visual editor. System then automatically generates 50 variants for different audience segments, products, or A/B testing.

High-level workflow:

Designer uses visual editor to create master template with variables
Saved template becomes reusable asset
Marketing team specifies which data to inject (audience segments, products)
Backend loads template, injects data, generates variants
Generated videos go through approval workflow before deployment

Why it works: Separates creative work (design) from scale (automation). Designers don’t write code. Automation doesn’t require developer involvement for template updates.

Timeline-based engines like CE.SDK are explicitly designed for this pattern—unified workflow between editor and automation. The same template works in both contexts. What the designer sees in the visual editor is exactly what automation generates. No conversion, no drift, perfect consistency.

This pattern is covered in detail in our creative automation infrastructure guide, which explains why teams need both editor and API capabilities within unified workflows.

Platform Constraints and Encoding Optimization

Generating videos is only half the problem—distribution platforms impose constraints that directly affect how you export.

H.264 Profiles, Levels, and Trade-offs

Video export engines support H.264 encoding with configurable parameters affecting quality, compatibility, and file size:

H.264 Profile:

Baseline (66): Broadest device support, lower compression efficiency
Main (77): Good balance (default), works on most modern devices
High (100): Best quality and compression, requires recent devices

H.264 Level (multiply by 10):

Level 3.1 (31) = Up to 720p at 30fps
Level 4.1 (41) = Up to 1080p at 30fps
Level 5.2 (52) = Up to 4K at 60fps

Recommended settings by distribution channel:

Social media ads (Instagram, TikTok, Facebook): Main profile (77), Level 4.1 (41), 5-8 Mbps bitrate
YouTube videos: High profile (100), Level 5.2 (52), 8-12 Mbps bitrate
Maximum compatibility (email, older devices): Baseline profile (66), Level 3.1 (31), 2-4 Mbps bitrate

Critical constraint: H.264 doesn’t support transparency. Transparent areas render with black backgrounds. Handle this at the template level (solid backgrounds or pre-composited elements), not during export.

Social platforms prefer specific aspect ratios:

9:16 (Vertical): TikTok, Instagram Reels, YouTube Shorts, Stories
1:1 (Square): Instagram Feed, Facebook Feed, LinkedIn Feed
16:9 (Landscape): YouTube, Facebook Watch, LinkedIn Video
4:5 (Portrait): Instagram Feed alternative, Pinterest

Your automation pipeline needs to export multiple formats from a single template:

const formats = [
  { name: 'tiktok', width: 1080, height: 1920 }, // 9:16
  { name: 'instagram', width: 1080, height: 1080 }, // 1:1
  { name: 'youtube', width: 1920, height: 1080 }, // 16:9
];

for (const format of formats) {
  const videoBlob = await engine.block.exportVideo(page, {
    mimeType: 'video/mp4',
    targetWidth: format.width,
    targetHeight: format.height,
    framerate: 30,
  });

  await saveToStorage(videoBlob, `${product.id}-${format.name}.mp4`);
}

Template design consideration: Design for the narrowest format (9:16 vertical) as your base. Ensure critical content stays within the central “safe zone” that remains visible when cropped to 1:1 or extended to 16:9.

Browser vs. Server-Side Rendering Trade-offs

Timeline-based video engines support two rendering environments:

Browser rendering (client-side):

Pros: No server infrastructure, renders on user’s device, immediate preview
Cons: Limited by device performance, requires modern web codecs, mobile web not supported
Best for: Interactive editing, single video exports, preview generation

Server-side rendering (Docker):

Pros: GPU acceleration, consistent performance, handles high volumes, licensed codecs
Cons: Requires infrastructure setup, Docker deployment, GPU-enabled instances
Best for: Batch processing, automation pipelines, production deployments

When to use which:

Client-side: User-initiated exports, preview generation, low volumes (< 10 videos/hour)
Server-side: Automated generation, batch jobs, high volumes (100+ videos/hour), production reliability

For hybrid workflows, use client-side rendering for template creation and preview, then switch to server-side for automation and scale.

Production Pitfalls and Monitoring

You’ve built a prototype that generates a few test videos. Moving to production requires thinking through edge cases, failure modes, and operational concerns that don’t surface during development.

Error Handling and Recovery

Video rendering can fail: corrupted assets, invalid template structure, insufficient memory, encoding errors, network timeouts. Your automation needs to handle these gracefully.

Common failure modes:

Asset loading failure: Verify asset URLs before generation, use fallback assets
Memory exhaustion: Reduce batch size, add memory monitoring, restart workers periodically
Template validation: Check template structure before generation, catch invalid variable names early
Encoding errors: Log exact error messages, validate H.264 profile compatibility, check for transparency issues

Failure recovery pattern (simplified):

async function generateVideoWithRetry(job, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const videoBlob = await engine.block.exportVideo(scene, {
        mimeType: 'video/mp4',
        framerate: 30,
      });
      return { success: true, blob: videoBlob };
    } catch (error) {
      if (attempt === maxRetries) {
        await logFailedJob(job, error);
        return { success: false, error: error.message };
      }
      await sleep(Math.pow(2, attempt) * 1000); // Exponential backoff
    }
  }
}

Monitoring and Observability

Production video automation needs visibility:

Key metrics to track:

Generation rate (videos per minute/hour)
Success rate (percentage completing successfully)
Average render time (detect performance degradation)
Queue depth (identify backlogs early)
Storage usage (monitor file growth and costs)
Error types (group by category: asset loading, encoding, timeout)

Alert thresholds:

Success rate drops below 95%
Average render time increases by 50%
Queue depth exceeds 1,000 pending jobs
Error rate for specific template exceeds threshold

Scaling and Cost Optimization

Horizontal scaling (more worker nodes):

Queue depth consistently high
Generation rate needs to double or more
Batch job completion times exceed acceptable limits

Vertical scaling (bigger instances):

Individual video rendering is slow
Memory constraints causing failures
GPU utilization low (CPU bottleneck)

Cost optimization:

Use spot instances for batch processing (significant savings, acceptable interruption risk)
Pre-warm worker nodes during off-peak hours for predictable demand spikes
Archive old generated videos to cold storage after 90 days (S3 Glacier)
Cache frequently used templates and assets in memory

Why Most Teams Don’t Build Video Automation In-House

Before committing to custom development, understand what you’re actually building:

Timeline engines are hard to maintain:

Frame-accurate editing across web, mobile, desktop platforms
Synchronization between video tracks, audio, overlays, effects
Undo/redo systems that work across temporal changes
Template systems with variable timing and duration

Codec licensing is non-trivial:

H.264/H.265 require patent licenses for distribution
Open-source codecs lack broad device compatibility
Licensing costs and compliance complexity

GPU rendering infrastructure requires expertise:

Docker orchestration with GPU passthrough
NVIDIA Container Toolkit configuration
Performance optimization for parallel rendering
Cross-platform consistency (web, server, mobile)

Editor + automation parity is rare:

What you design in the editor must match what automation generates
Same rendering engine, same output quality, no conversion drift
Template sharing between interactive and headless contexts

Timeline-based engines like CE.SDK already solved these problems and expose them via both UI and API. Most teams building video automation use existing engines rather than building from scratch.

Real-World Use Cases

Personalized Video Campaigns at Scale

Scenario: Financial services company sends 10,000 customers personalized year-end investment summary videos.

Template design:

40-second video: 5s intro → 20s portfolio visualization → 10s personalized message → 5s CTA
Variables: customerName, portfolioReturn, topHolding1/2/3, advisorName, advisorMessage

Results:

10,000 videos generated overnight across 50 worker nodes
Average generation time: 15 seconds per video
Total processing time: ~3 hours with parallelization
Delivery: Videos embedded in personalized emails

This mirrors the use case in our CE.SDK Renderer article, where a customer generated “up to 100,000 unique versions” of personalized videos from demographic targeting data.

Scenario: E-commerce brand launches 200 new products. Marketing needs video ads for each product across TikTok (9:16), Instagram Feed (1:1), and YouTube Shorts (9:16) with different CTA variations for A/B testing.

Math: 200 products × 3 formats × 2 CTA variants = 1,200 videos

Distribution: Videos automatically upload to Facebook Marketing API and Google Ads API with campaign tags, ready for activation.

When Video Automation Makes Sense (and When It Doesn’t)

Video automation isn’t right for every situation.

Good Fit: High-Volume, Template-Driven Use Cases

Video automation works well when:

High volume: Dozens, hundreds, or thousands of videos regularly
Repetitive structure: Videos follow consistent patterns with variable content
Data-driven: Content from databases, APIs, or structured data sources
Time-sensitive: Manual production can’t meet speed requirements
Cost-prohibitive: Hiring video editors or agencies for this volume isn’t viable

Examples: Product videos for e-commerce catalogs, personalized marketing campaigns, social media ads with A/B testing, localized versions (same video in 10+ languages)

Poor Fit: Creative-Intensive, One-Off Productions

Video automation struggles when:

Low volume: 1-5 videos per month (manual production is faster)
High creative variation: Each video needs unique storytelling or cinematography
Complex motion graphics: Advanced animation that templates can’t capture
Live-action footage: Real people, locations, scenarios that vary significantly
Artistic direction: Videos requiring subjective creative decisions

Examples: Brand commercials with custom concepts, documentary-style content, event recap videos, testimonial videos

The Middle Ground: Hybrid Approaches

Automated foundation + manual refinement:

Generate base videos automatically
Creative team polishes specific versions for key campaigns
Use automation for scale, manual work for flagship content

Manual template creation + automated generation:

Designer creates polished templates once
Automation generates thousands of variants
No manual work after template is finalized

What to Do Next

Before committing to video automation infrastructure:

Evaluate if your use case is template-driven (repetitive structure with variable data)
Identify which parts must be automated vs. manual (scale vs. creative direction)
Test one template end-to-end with real data (uncover edge cases early)
Measure render time, cost, and failure rates (validate assumptions with real numbers)

Video Automation: Solvable, But Not Simple

Video automation is harder than image automation. The timeline adds complexity. Rendering takes 100x longer. File sizes are larger. Platform requirements are stricter. Audio coordination matters. There’s no magic solution that makes these challenges disappear.

But video automation is solvable when you respect the complexity and build accordingly:

Design templates that handle variability (text length changes, scene duration flexibility, multi-asset coordination)
Choose the right architecture (batch processing for volume, real-time for immediacy, hybrid for collaboration)
Optimize infrastructure (GPU acceleration, server-side rendering, proper codec licensing)
Plan for production (error handling, monitoring, template versioning, cost management)

The teams that succeed with video automation don’t try to make it simple. They acknowledge it’s complex, design systems that handle that complexity, and automate what can be automated while keeping humans involved where judgment matters.

Automation doesn’t eliminate work; it shifts work from repetitive execution to thoughtful system design.

For more context on building creative automation systems that combine human creativity with programmatic scale, see our article on creative automation infrastructure. And if you’re ready to explore how timeline-based engines handle video automation specifically, check out the automated video generation documentation and video timeline editor guide.

Video automation at scale is possible. It just requires understanding what makes video different and building systems that respect those differences.

Ready to test it? Start a free trial or speak with our sales team.

Editor or API? Why Modern Creative Automation Needs Both

Klaudia — Fri, 16 Jan 2026 09:48:51 GMT

Here’s a scenario we see all the time: a marketing team designs beautiful campaign templates in a design software, hands them off to engineering, and then waits while developers painstakingly recreate everything using an API. When the design needs tweaking? Start the whole cycle over again. The result is double work, version drift, and frustrated teams on both sides.

The creative automation market has created a false binary: choose “visual editor” platforms that let non-technical users design templates but can’t scale beyond manual work, or choose “automation API” services that generate assets programmatically but require developers for every template change.
The truth is, modern creative automation isn’t a single-purpose tool decision—it’s an infrastructure decision. Teams need systems where humans design templates visually, systems generate variations at scale automatically, and humans can jump back in to refine outputs when needed. That requires both a visual editor UI and a headless engine API working from the same rendering foundation.

In this article, we’ll explore why editor-only and API-only solutions each solve half the problem, what hybrid creative automation infrastructure looks like in practice, and how to evaluate whether your current stack can support workflows that combine human creativity with automation scale. (If you’re already evaluating CE.SDK and want to understand the technical implementation of server-side rendering specifically, see our deep-dive on the CE.SDK Renderer.

The Editor-Only Trap: When Manual Workflows Become Bottlenecks

What Editor UIs Do Well

Visual template platforms excel at making creative work accessible. Designers and marketers can build templates without writing code, using familiar drag-and-drop interfaces and timeline editors. The learning curve is low, collaboration is intuitive, and stakeholders can preview exactly what they’re creating. For teams producing dozens of assets per week with moderate customization needs, these tools work beautifully.

Where Manual Workflows Break Down

The problems start when volume scales beyond what humans can reasonably handle. An e-commerce brand launching 10,000 product banners with personalized messaging can’t manually create each variation in a visual editor. A social media team A/B testing 50 different audience segments needs programmatic generation, not copy-paste workflows. A print shop processing hundreds of customer orders daily can’t rely on manual template filling.

Consider Swiss Post, whose customers create over a million personalized postcards each year. These aren’t cookie-cutter designs—they’re choosing from hundreds of customizable templates with personal photos, messages, and layout variations. No amount of manual work could handle that volume. Swiss Post needed a system where designers create templates once in a visual editor, defining variables for personalization, and then the backend automatically generates thousands of variations with GPU-accelerated server-side rendering. What you design is exactly what gets printed at scale—100% rendering consistency across a million outputs.

The other challenge with editor-only platforms is pricing. When your business model depends on high-volume generation, per-export fees or usage-based pricing can make automation economically impractical. You’re essentially paying platform fees for work that should run as infrastructure.

This doesn’t mean teams using editor-only platforms made the wrong choice. It means their needs evolved. What started as a template design problem became a creative automation infrastructure problem—and the tools didn’t evolve with them.

The Automation-Only Trap: When You Can’t Refine the Output

What Automation APIs Do Well

On the opposite end, creative automation APIs deliver exactly what they promise: fast, scalable, programmatic asset generation. Developers integrate them into backend systems, connect them to databases, and generate thousands of variations automatically. For engineering-led teams with clear specifications and stable templates, this approach works efficiently.

The Template Design Bottleneck

The friction surfaces during template creation and iteration. Building templates through code means every design change requires developer time. Want to adjust font sizes, test a different layout, or preview how a template looks with real data? You’re writing code, deploying changes, and hoping the output matches expectations.

This creates a dependency bottleneck. Marketing teams wait for engineering availability to update creative templates. Designers can’t prototype variations quickly because they need technical handoffs. Agency teams can’t show clients live previews during approval meetings—they’re locked into “request changes, wait for developer updates, review again” cycles.

Why ‘Human-in-the-Loop’ Matters

Even with fully automated generation, human oversight remains essential. AI-generated content needs review before publishing. Brand compliance requires manual checks. Client feedback demands quick adjustments. Research on human-in-the-loop workflows consistently shows they maintain quality while actually reducing total review time—when the infrastructure supports jumping between automation and manual refinement seamlessly.

ImageBank X, a brand asset management platform, faced exactly this challenge. Their customers needed both automated brand compliance and the ability to make quick edits without breaking brand guidelines. By implementing in-browser editing with lockable template elements, they reduced presentation slide preparation from 15 minutes to 2 minutes while ensuring every output stayed on-brand. The key wasn’t eliminating human involvement—it was making human involvement fast and accessible when needed.

When your creative automation API requires developers for every template adjustment, you’ve automated generation but created a new bottleneck in iteration. That’s the automation-only trap.

How Modern Creative Automation Infrastructure Works

The Three Phases of Hybrid Creative Automation

The solution isn’t choosing between visual editing and automation—it’s infrastructure that supports both within the same workflow. Modern creative automation follows a three-phase cycle:

1. Design Phase (Humans in Visual Editor)
Designers, marketers, or creative teams build templates using a visual editor. They define layouts, set typography, establish brand elements, and configure variables for personalization. Crucially, they’re working in a WYSIWYG environment where they see exactly what the final output will look like. No coding required, no technical handoffs, just creative work.

2. Automation Phase (Systems via API)
Once templates are designed, backend systems take over. The same template definition gets processed through a headless engine API that generates hundreds, thousands, or millions of variations programmatically. Data comes from product databases, CRM systems, user inputs, or AI generation. The engine renders each variation server-side with the exact same output fidelity as the visual editor.

3. Refinement Loop (Humans Review and Update)
When outputs need adjustment—because of new brand guidelines, A/B test results, seasonal campaigns, or client feedback—teams jump back into the visual editor, update the template, and automation immediately uses the new design. No code changes, no developer dependency, just iteration.

AI accelerates content creation in many of these workflows, but the core challenge remains the same: how humans and automation share the same rendering and template foundation. The infrastructure needs to support both, regardless of whether your data comes from traditional databases or generative AI.

A simple way to think about hybrid creative automation:

Editors define what can change

APIs decide when and how often it changes

The rendering engine guarantees how it looks

Real-World Hybrid Workflows

This isn’t theoretical. Teams are running these workflows in production today.

Take Omneky, an AI-powered advertising platform. Their AI generates ads automatically, but customers still need to review and adjust before launch—editing copy, applying brand fonts, or adapting layouts. Rather than forcing users to export to external tools, Omneky uses CE.SDK to parse AI-generated ads into editable templates. Users make adjustments directly in the workflow, then deploy. The result? 10x monthly signup growth and faster time-to-publish. The hybrid model let them combine AI speed with human refinement in a single infrastructure. (For a complete explanation of how CE.SDK’s unified engine enables this workflow, see our CE.SDK technical explainer.)

Plai, an AI advertising platform, generates 30,000 to 37,000 creatives monthly across 11 advertising platforms. Their workflow: AI generates initial assets, users refine via the integrated editor, then deploy. This eliminated $1,000 to $10,000 monthly design costs per client while doubling Plai’s annual revenue. They integrated the full system in one month. As founder Logan Welbaum put it: “Fast to launch, that’s the biggest thing.” The hybrid infrastructure meant non-technical users could manage high-volume creative production without sacrificing quality or speed.

Back to Swiss Post: a designer creates a postcard template once in the visual editor, defining variables for customer photos, messages, and personalization. The backend system then generates thousands of variations automatically with 100% consistent rendering—what you design is exactly what gets printed at scale. Over a million personalized postcards per year, managed by a workflow that balances human creativity in template design with automated generation at volume.

Digitas runs a similar hybrid workflow for automotive campaigns. Designers create templates centrally for 600+ car dealers across 9-10 brands. Dealers then generate localized assets themselves in German, French, and Italian—adapting campaigns from days to seconds without manual design work. With 140 active campaigns generating thousands of assets, stakeholder satisfaction has been unanimous. Martin Röhr, Senior Project Manager: “In all meetings, we had no negative feedback—absolutely nothing. Dealers are downloading, managers are happy, and we’re already planning the next automation features.”

Why Rendering Consistency Matters

The critical technical requirement for hybrid workflows is rendering consistency. If what you design in the visual editor doesn’t match what the automation API generates, you’re back to double work and version drift. Teams need infrastructure where the same rendering engine powers both the UI and the API—so a template designed on Tuesday generates perfectly on Wednesday at 3 AM when your automation job runs.

This also enables true collaboration across roles. Designers focus on creative quality without learning APIs. Engineers integrate automation without recreating templates in code. Marketers adjust campaigns in real-time without waiting for technical handoffs. Everyone works in their area of expertise, connected by shared infrastructure.

Key Capabilities Your Creative Automation Stack Needs

If you’re evaluating creative automation infrastructure—or realizing your current tools can’t support hybrid workflows—here are the key capabilities to look for:

1. Visual Template Editor (For Non-Technical Users)
Your creative team needs a full-featured editing interface with timeline controls, WYSIWYG previews, layer management, and the ability to define template variables. Bonus points for role-based access controls so you can lock brand elements while allowing content customization.

2. Headless Engine API (For Technical Integration)
Your engineering team needs programmatic access to the same rendering engine that powers the visual editor. That means server-side rendering, batch processing capabilities, and APIs for controlling every aspect of asset generation. Look for Node.js support for backend integration and GPU-acceleration for high-volume processing.

3. Platform Consistency
The editor and API should use the exact same rendering engine under the hood. No output drift, no “it looked different in the editor” surprises. This also means cross-platform support—web, mobile, desktop, server—all producing identical outputs from the same template definitions.

4. Template Intelligence
Templates should support dynamic text variables, image placeholders, auto-formatting rules, and preset configurations. This is what allows one template to generate thousands of variations intelligently. Look for features like text overflow handling, responsive layouts, and conditional element visibility.

5. Scalability Features
For video generation at scale or high-volume image processing, GPU acceleration is essential. Your infrastructure should handle batch jobs efficiently, support multiple output formats (web, print, video, social), and maintain performance as volumes grow.

6. Developer Experience
Comprehensive APIs (Scene API, Block API, Asset API, Event API), SDKs for your target platforms (JavaScript, React, Vue, Angular, iOS, Android, Flutter, React Native), clear documentation, and extensibility through plugins. Your engineering team shouldn’t fight the infrastructure—they should extend it.

Your creative automation infrastructure should include all six capabilities, not force you to choose between them. Editor-focused platforms typically excel at #1 but lack #2, #3, and #5. API-focused services deliver #2 and #5 but miss #1, #4, and collaboration workflows. Unified infrastructure is purpose-built to deliver all six.

How CE.SDK Delivers the Hybrid Model

Unified Rendering Engine

IMG.LY’s CreativeEditor SDK (CE.SDK) was built specifically for this hybrid infrastructure model. At its core is a single C++ rendering engine that powers both the visual editor UI and the headless CreativeEngine API. This isn’t two separate systems with syncing—it’s one engine with dual interfaces, guaranteeing 100% rendering consistency between what you design and what you automate.

That architectural decision solves the version drift problem completely. When a designer updates a template in the visual editor on Monday, the automation pipeline generating variations on Tuesday uses the exact same rendering logic. No surprises, no output differences, no “works in the editor but breaks in production” issues.

From Template Design to Automated Generation

Here’s how the workflow actually works in practice:

Step 1: Your design team opens CE.SDK’s visual editor in their browser. They build a template using the drag-and-drop interface, timeline controls for video, and layer management. They define text variables for personalization, set image placeholders, and configure which elements are locked versus editable.

Step 2: The template is saved with all its logic—variables, placeholders, layout rules, brand elements. This template definition is what both the editor and the API reference.

Step 3: Your engineering team connects the CreativeEngine API to your backend systems—product databases, CRM platforms, AI content generation, whatever data sources drive personalization.

Step 4: When the automation pipeline runs (scheduled jobs, triggered events, API calls), the CreativeEngine processes the template with your data, renders outputs server-side with GPU acceleration, and exports in your target formats (PNG, JPG, MP4, PDF/X for print, etc.).

Step 5: When templates need updates, designers make changes in the visual editor. The automation pipeline immediately uses the updated template—no code changes, no redeployment, just instant iteration.

For example, an e-commerce platform uses CE.SDK’s visual editor to create product banner templates with their design team. Their engineering team then connects those templates to their product database via the Node.js API, automatically generating thousands of personalized banners overnight. When the marketing team wants to test new creative approaches, designers update the templates in the editor—and the automation pipeline immediately uses the new designs without any code changes.

Platform and Framework Support

CE.SDK provides SDKs for every major platform and framework: Web (vanilla JavaScript, React, Angular, Vue, Svelte), iOS (native Swift), Android (native Kotlin), React Native, Flutter, and Node.js for server-side automation. The same templates work across all platforms because they’re all using the same rendering engine underneath.

This means you can build templates once and deploy them everywhere—web app editors, mobile apps, desktop applications, and server-side generation—with identical output quality. For teams managing multi-platform creative workflows, this eliminates the “rebuild for each platform” problem entirely.

On the automation side, CE.SDK’s headless mode gives you full API access without any UI overhead. Batch process thousands of assets, generate video at scale with timeline API control, output print-ready PDFs with PDF/X support, and customize the entire rendering pipeline through the plugin system. For technical teams implementing high-volume server-side automation, our CE.SDK Renderer delivers GPU-accelerated rendering with enterprise-grade codec licensing—eliminating the maintenance overhead of FFmpeg or headless browser approaches. You’re not locked into our opinions about how automation should work—you control the infrastructure.

Comparing Approaches: Editor-Only vs. API-Only vs. Unified Infrastructure

Let’s compare how different approaches handle the key requirements of modern creative automation:

Capability	Editor-Only Platforms	API-Only Services	CE.SDK (Unified)
Template Design	Visual, intuitive, non-technical	Code-based, requires developers	Visual editor + code access
Automation Scale	Limited, manual bottlenecks	Unlimited, programmatic	Unlimited, programmatic
Non-Technical Access	Full access	Typically none, developer-dependent	Full access
Programmatic Control	Typically limited or none	Full API access	Full API access
Rendering Consistency	Editor-only (no automation)	API-only (no editor preview)	100% consistent (same engine)
Human-in-Loop Workflows	Manual only	Difficult, requires dev work	Native support
Iteration Speed	Fast for manual, slow at scale	Slow (requires code changes)	Fast (editor updates = instant API changes)
Platform Deployment	Typically web-based only	Typically server-side only	Web, mobile, desktop, server
Volume Pricing	Often penalizes scale	Developer time costs	Infrastructure pricing
Team Collaboration	Non-technical teams only	Technical teams only	Cross-functional teams
Output Formats	Typically limited export options	Multiple formats	Multiple formats (image, video, print)
Proven Scale	Manual bottleneck at volume	Code-driven, hard to iterate	1M+ postcards/year, 30K+ creatives/month

This isn’t about one approach being “better”—it’s about matching infrastructure to workflow needs. If you’re a small team producing a few dozen assets per month with no automation requirements, an editor-only platform might be perfect. If you’re a developer-led team with stable templates and pure automation needs, an API-only service could work efficiently.

But if your workflow involves both human creativity and automation scale—designers creating templates, systems generating variations, marketers refining outputs—you need infrastructure purpose-built for hybrid workflows. That’s where unified platforms like CE.SDK deliver value that single-purpose tools can’t match.

The Future of Creative Automation Infrastructure

Creative automation is becoming an infrastructure decision, not a tool category. The market is moving beyond single-purpose solutions toward unified platforms that support end-to-end workflows—from template design to automated generation to human refinement.

Teams that combine human creativity with automation scale will win. AI generation is accelerating content production, but human oversight remains essential for quality, brand compliance, and strategic direction. The hybrid workflow—design visually, automate programmatically, refine collaboratively—is becoming the standard approach across industries.

This also changes how teams think about roles and collaboration. Instead of “creative team” versus “engineering team” with handoffs between them, modern creative automation infrastructure enables everyone to work in their area of expertise simultaneously. Designers focus on creative quality. Engineers focus on integration and scale. Marketers focus on campaign strategy and iteration. The infrastructure connects them without forcing anyone into unfamiliar workflows.

If your current setup forces designers to wait for developers—or forces developers to reimplement designs in code—you’re already paying the cost of the wrong infrastructure. The question isn’t whether to change, but whether you’re building on a foundation that can scale with your needs.

If you’re building creative automation infrastructure that needs both visual template creation and API-driven generation, CE.SDK provides the unified engine to support both.

Next steps:

Understand the platform: Read our CE.SDK explainer to learn how the unified engine, visual editor, and automation API work together
See it in action: Explore our creative automation use cases to see how teams implement hybrid workflows
Try the platform: Test CE.SDK to experience the editor-to-API workflow firsthand with our demos
Check out our data report based on 600+ customers, 28 structured customer interviews, and a self-reported customer survey.

The question isn’t whether you need an editor or an API. It’s whether your infrastructure can support both when your workflows demand it.

Introducing CE.SDK Renderer: The Missing Piece of Creative Automation

Jan — Mon, 24 Nov 2025 11:05:15 GMT

For years, teams have used CE.SDK to power rich, customizable editing experiences across web, mobile, and desktop. But one critical component of true end-to-end creative automation remained challenging: server-side rendering.

Until now, export workflows depended on client devices, brittle FFmpeg scripts, or slow headless browser setups. While these approaches worked, they often fell short for enterprise scale workflows, AI pipelines, or high-volume creative automation.

Today, we’re excited to introduce the CE.SDK Renderer, the native, GPU-accelerated server-side rendering engine that completes the CE.SDK ecosystem.

The Renderer brings CE.SDK’s design engine to your backend with fast, compliant, enterprise-ready export for images, PDFs, and video, enabling organizations to generate media at scale with full fidelity and predictable performance.

Why the CE.SDK Renderer Matters

Rendering Has Been the Last Barrier to Full Automation

Teams could design and generate templates programmatically, but producing the final asset—especially video—was constrained by:

Lack of GPU acceleration
No native CE.SDK export on servers
Legal requirements for H.264/H.265
Unstable browser virtualization
Node.js memory and performance limits

The CE.SDK Renderer solves all of this in one fell swoop with a native Linux binary packaged as a Docker container, built explicitly for backend media generation.

Many of our SaaS customers have told us the same thing: they want a safe, supported alternative to FFmpeg that they don’t have to maintain themselves.

What the CE.SDK Renderer Delivers

The CE.SDK Renderer fully unlocks its value in the IMG.LY ecosystem by providing a creative automation infrastructure layer for the user facing portion of IMG.LY’s editor SDK. It enables two core capabilities that modern creative automation depends on: scalable rendering and fully compliant video export:

GPU-Accelerated Export Performance

Native code and GPU acceleration allow extremely fast rendering. Ideal for heavy scenes, 4K+ requests, and large batch pipelines.

Fully Licensed Video on the Backend (H.264/H.265)

You can render MP4 video entirely on your servers with full licensing compliance. Powered by Fluendo’s AV stack, the Renderer provides enterprise-grade legal protection for H.264/H.265, eliminating the risks associated with unlicensed or open-source encoding. This gives teams the confidence to run video-heavy pipelines at scale.

Built for Scale

Perfect for workloads generating hundreds or thousands of creative variations: ads, postcards, dynamic social assets, catalogs, and more on stable maintainable infrastructure supplanting FFmpeg or brittle pipelines based on headless browsers.

Perfect Visual Fidelity

Because it uses the same CE.SDK engine that powers the editing experience, the Renderer produces output that matches exactly what users see in the editor. This fidelity is critical for automated pipelines, ensuring every exported asset is accurate, consistent, and visually correct.

Together, these unlock a complete creative automation workflow: design → generate → render.

How It Works

Async Exports

A CE.SDK scene is created via browser editor, mobile app, or Node.js.
The scene is sent to the Renderer, running in Docker.
The Renderer outputs: PNG/JPEG, PDF, MP4 (H.264/H.265)
The rendered asset is returned to your application or batch pipeline.
Users can continue editing while export happens asynchronously.

This removes export load from the client entirely and opens the door for sophisticated backend media generation.

Batch Rendering

Multiple CE.SDK templates are prepared for automation.
An external data source (CSV, JSON, API) is connected to the templates to generate all design variants.
Each resulting scene is sent as a separate job to the Renderer running in Docker.
The Renderer outputs PNG/JPEG, PDF, or MP4 for every variant.
All assets are returned to your backend or stored in your pipeline, enabling large-scale automated creative production.

Example Use Case: Hyper-Personalized Video Ads at Massive Scale

One of our customers runs large demographic-targeted campaigns where a single master video must transform into tens of thousands of personalized variants. Instead of showing the same creative to everyone, they tailor each video to the viewer’s profile think German, mid-30s, dog owner.

From one base creative, their system dynamically generates up to 100,000 unique versions. Their backend assembles all scene variations in Node.js, then hands them off to the CE.SDK Renderer to produce the final video files.

Before adopting CE.SDK Renderer, this workflow was painful: brittle FFmpeg scripts, unpredictable render results across machines, codec licensing concerns, and processing times that stretched over days.

Maintaining this setup consumed engineering time that would have been better spent on improving the creative logic itself.

With CE.SDK Renderer, the entire pipeline became both scalable and predictable. They now render thousands of variants with consistent results, fully licensed codecs, and throughput high enough to keep up with real-world campaign demands. Instead of fighting their rendering stack, their team can focus on creative automation and campaign performance.

This is just one example of how CE.SDK Renderer enables production-grade, high-volume personalized media at scale something that previously required complex custom infrastructure.

Licensing Options

Open-Source Renderer

A lightweight version using open-source codecs. It’s fast, simple to run, and great for prototyping or early-stage products. Because it doesn’t include licensed H.264/H.265 encoding, it isn’t suitable for enterprise video production or legally compliant distribution.

AV-Licensed Renderer (Fluendo)

This edition includes fully licensed H.264/H.265 encoding powered by Fluendo, ensuring your video exports meet all patent and compliance requirements. It uses concurrency-based licensing and is designed for production workloads, regulated industries, and any platform generating video at scale.

Conclusion

By bringing fast, compliant, and scalable rendering to the backend, the CE.SDK Renderer removes one of the biggest engineering hurdles in creative automation. Whether you’re generating hundreds or hundreds of thousands of assets, it gives you the tools to build stable, modern media pipelines without the maintenance burden. The simplest path to production-grade creative automation.

Start your free trial today and get started in minutes.

A Guide to Creative Automation with CE.SDK & Javascript

Jan — Fri, 05 Sep 2025 11:14:31 GMT

https://www.youtube.com/embed/GtORNyzjOq0?feature=oembed

What is Creative Automation?

Creative Automation is the process of generating visual content, images, videos, designs, programmatically, often in response to structured inputs like product data, user attributes, or campaign parameters.

Instead of designing each asset manually, creative automation enables you to define templates and rules that the system uses to produce content at scale.

This approach accelerates production workflows and enables personalization at scale, multivariate testing, and omni-channel consistency without stretching design resources.

Creative Automation & Generative AI

Of course, you cannot talk about creative automation in this day and age without also discussing the role of generative AI. Gen AI introduces intelligent content generation into the pipeline making it easy to generate headlines, product descriptions and entire design elements like illustrations, videos or voiceovers and background music.

When paired with a robust editing and rendering engine like CE.SDK, generative AI becomes even more powerful. A design editor that sits at the intersection between the human decision maker and raw AI generated creatives ensures that those creatives can be curated, refined and deployed in an orderly fashion. This usually works by employing design templates that provide extension points for dynamic data through variables and placeholders and that AI generated content can be merged into for a brand-safe final creative.

Our customer Omneky provides an excellent example of how these components can be orchestrated for maximum efficiency and productivity. Omneky is an ad tech platform that uses generative AI to automatically generate creatives and ad copy for a company based on their product and positioning, these are then interpolated into CE.SDK template to create ad variations. These variations are then tested across ad channels and the results used to inform further refinement and ad selection. This is a prime example of how to combine creative automation and editors to tame the chaotic fountain of AI creatives.

How CE.SDK Enables Creative Automation

Let us get into the meat and potatoes of creative automation and sketch out the requirements of a creative automation solution and an end to end example with CE.SDK. IMG.LY’s CreativeEditor SDK (CE.SDK) offers both a user interface for design-time flexibility and a graphics processing engine API for runtime automation.

Design Once, Automate Everywhere

With CE.SDK, you create design templates that define placeholders, variables, and lockable design elements. These templates ensure brand consistency while allowing dynamic content generation. Whether you’re building social ads, team cards, or product visuals, the structure remains stable while the content varies. The diagram below illustrates these components using a classical mail merge example. The user creates a design template within the editor and defines certain variables like first_name and address, a data source of address data can now be merged with this template using the engine API: variable: setString to create an individualized postcard for every data point in the set:

Under the Hood: CE.SDK Architecture

In order to fully understand how to implement creative automation workflows with CE.SDK we need a basic mental model of its architecture. CE.SDK is built on two distinct layers, giving you total flexibility and control.

The UI Layer is the customizable frontend allowing users to design and edit different media types from photos, design compositions such as collages, videos or mixed media.

The Engine Layer exposes the Creative Engine, CE.SDK’s core rendering and editing engine, through an API. The architecture of CE.SDK is built around a layered approach that separates concerns while ensuring cross-platform consistency:

**Engine Core (C++)**At the foundation lies the Creative Engine, a high-performance rendering and editing core written in C++. This is where all processing, layouting, and rendering logic happens, guaranteeing precision and fidelity.
API LayerOn top of the core sits the API Layer, which exposes the engine’s capabilities in a consistent, high-level interface. This abstraction allows developers to focus on creative logic without dealing directly with low-level rendering details.
Cross-Platform TargetsThe same engine and API are cross-compiled to iOS, Android, Web, and server environments, ensuring that rendering results remain identical regardless of platform. This uniformity is critical for automation workflows, where assets may be produced or consumed across multiple devices and services.
Headless ModeBeyond powering interactive UIs, the engine can also be run headlessly. In this mode, CE.SDK operates without a frontend, enabling automated scenarios such as bulk rendering of images or videos, dynamic template generation, and data-driven personalization at scale.

This modular architecture ensures that whether you are building a custom editing UI or running automated creative workflows on the server, every output is backed by the same reliable, cross-platform engine.

How to Integrate Creative Automation into Your Workflow

Step 1: Integrate CE.SDK

Even if you don’t plan to use the CE.SDK UI for end users, you still need to spin it up locally or within internal tooling to create templates. Let’s install CE.SDK and configure it to the advanced UI, in Creator mode.

CE.SDK by default comes with two UI flavors. The design or default UI config exposes all the essentials for productive design editing by most users, ideal for adapting templates. An advanced UI fine grained editing controls and the ability to define placeholder elements and control what users can change.

The “Creator” role allows setting constraints on template elements, while the “Adopter” role is focused on adapting these elements.

Creator: Set constraints and manage template settings.
Adopter: Edit elements within the bounds set by the Creator.

Install CE.SDK following one of our guides and explore the entire demo here.

You can find the complete demo here

Configuring CE.SDK for Template Creation

Below is a sample configuration. Notice how we set role: 'Creator' and view: 'advanced' to unlock template authoring features. We also configure an onSave callback to export complete template archives — these include all necessary resources (images, fonts, stickers, etc.) in a self-contained package. Archives are what you’ll deliver to adopters or use for data-driven automation later.

const config = {
  theme: 'dark',
  role: 'Creator',
  callbacks: {
    onExport: 'download',
    onUpload: 'local',
    onSave: async (sceneString: string) => {
      try {
        // assumes engine is available in scope
        const blob = await engine.scene.saveToArchive();
        const formData = new FormData();
        formData.append('file', blob);

        await fetch('/upload', {
          method: 'POST',
          body: formData,
        });
      } catch (error) {
        console.error('Save failed', error);
      }
    },
  },
  ui: {
    elements: {
      view: 'advanced',
      panels: {
        inspector: {
          show: true,
          position: 'right',
        },
      },
      dock: {
        iconSize: 'normal',
        hideLabels: true,
      },
      navigation: {
        action: {
          export: {
            show: true,
            format: ['image/png', 'application/pdf'],
          },
        },
      },
    },
  },
};

Step 2: Build Smart Templates

With CE.SDK running in Creator mode, we can now define editable templates. These templates can include:

Named blocks → Easy-to-reference design regions (e.g., PodcastCover, PodcastBadge).
Variables → Text placeholders enclosed in double curly braces (e.g., {{Message}}, {{PodcastName}}).

For example, here’s a podcast cover template with two text variables and named blocks. The variables make it possible to inject data programmatically later.

Podcast template:
- Variables: {{Message}}, {{PodcastName}}
- Named blocks: PodcastCover, PodcastBadge

Since we’re in Creator mode, we can also enforce brand constraints, for instance, locking background colors, logos, or fonts so that adopters (or automated processes) don’t accidentally override brand-critical assets.

Step 3: Automate Asset Creation

Once you have a template, the next step is automation. Using the headless Creative Engine, you can:

Populate placeholders with external data (e.g., from APIs).
Swap images, update text variables, or adjust styling dynamically.
Export the results at scale into formats like PNG, PDF, or even video.

Example: Dynamic Podcast Covers

In this demo, we connect to the Apple iTunes API to fetch podcast data. Whenever a podcast is selected (or user input changes), our fillTemplate function updates the CE.SDK scene.

Key concepts:

Blocks API → Query template blocks by name (engine.block.findByName('PodcastBadge')) and replace their fills.
Fills → Blocks can have images, solid colors, gradients, or videos. For podcast artwork, we set imageFileURI.
Variables API → Set text variables directly (engine.variable.setString('Message', 'Hello World')).

 const fillTemplate = (engine: CreativeEngine, page: number) => {
    let { r, g, b } = backgroundColorRGBA;
    engine.block.setColor(page, 'fill/solid/color', { r, g, b, a: 1 });
    if (podcast) {
      const photoBlocks = engine.block.findByName('PodcastCover');
      photoBlocks.forEach((photoBlock: number) => {
        const photoFillBlock = engine.block.getFill(photoBlock);
        engine.block.setString(
          photoFillBlock,
          'fill/image/imageFileURI',
          podcast.artworkUrl600
        );
      });
    }
    const colorTheme = getThemeColorFromBackgroundColor(backgroundColorRGBA);
    const [badgeBlock] = engine.block.findByName('PodcastBadge');
    engine.block.setString(
      engine.block.getFill(badgeBlock),
      'fill/image/imageFileURI',
      caseAssetPath(
        `/podcast-badge-${colorTheme === 'light' ? 'black' : 'white'}.png`
      )
    );

    // set text variables
    engine.variable.setString('Message', debouncedMessage || '');
    engine.variable.setString(
      'PodcastName',
      podcast ? podcast.collectionName : '')
      // set text colors based on background theme
      const [messageBlock] = engine.block.findByName('Message & Name');
      const rgb =
      colorTheme === 'dark' ? { r: 1, g: 1, b: 1 } : { r: 0, g: 0, b: 0 };
      engine.block.setTextColor(
      messageBlock,
      { ...rgb, a: 0.75 },
      0,
      "{{Message}}".length
    );
    engine.block.setTextColor(
      messageBlock,
      { ...rgb, a: 1.0 },
       "{{Message}}".length
    );
  };

At this point, you’ve created a data-driven creative automation pipeline:

Templates authored with placeholders and constraints.
Dynamic population of text and image fields via external data.
Export to high-quality assets at scale.

This workflow is the foundation for personalized marketing campaigns, automated content production, and AI-driven design pipelines with CE.SDK.

Creative Automation isn’t just about speed it’s about scalability, consistency, and customization. IMG.LY’s CE.SDK gives you the tools to build powerful, flexible automation workflows tailored to your brand and users.

Start you free trial today and integrate content automation into your application.

How To: Video Generation With Javascript

Antonello — Wed, 22 Jan 2025 09:53:00 GMT

Follow this tutorial to learn how to programmatically create videos in JavaScript directly in the browser.

In 2025 video is firmly established as powerhouse for engagement, gaining even more traction with the rise of short-form videos. After all, as humans, we naturally resonate with video content more than any other type of media.

The problem is that video generation is challenging—and doing it within the browser through JavaScript makes things even more complex. Fortunately, production-grade solutions like CreativeEditor SDK (CE.SDK) make the process not only possible but also easy to implement.

In this guide, you will learn how to programmatically generate videos in the browser via JavaScript using CreativeEditor SDK. We will cover various applications, including merging videos, adding audio tracks, and even integrating AI features.

Let’s dive in!

Why Programmatic Video Generation Matters

Videos are dominating social media, marketing, and online platforms such as e-commerce platforms (e.g., to showcase products). Numerous studies have proven that video is the most effective form of media for marketing, as it resonates deeply with us.

As the demand for personalized and dynamic content increases, traditional video production methods are becoming inefficient. The proliferation of channels with different demands on size and video quality as well as the need to create personalized videos at scale means that automated video creation is becoming indispensable. Most existing solutions run batch processing of videos on the server after gathering input data from various source. However, while server-side processing quickly becomes costly and introduces significant communication overhead client devices have become more powerful than ever.

CreativeEditor SDK bridges that gap by simplifying programmatic video generation in JavaScript within modern browsers. With CE.SDK, you can automate repetitive tasks and define scalable, personalized, and engaging video creation workflows, ensuring each generated video resonates with its target audience.

Get Started with CE.SDK for JavaScript

Now that we established why programmatic video generation is important, you are ready to get started with the tool designed for it: CreativeEditor SDK.

Learn how to integrate CE.SDK for video editing into a vanilla JavaScript application!

You can access the code for this tutorial on Github.

Requirements

The only prerequisites to follow this tutorial are:

A modern browser: CreativeEditor SDK runs directly in your browser’s JavaScript engine, so no additional setup is required. Any browser supporting WASM is enough.
A CreativeEditor SDK license: If you do not have one yet, sign up for a free trial.

If your web application uses Node.js, ensure you have the latest stable versions of both Node.js and NPM installed.

Import the library

In a vanilla JavaScript application, create a JavaScript module file (e.g., video-editor.js) and import the CreativeEditor SDK engine library inside it:

import CreativeEngine from '<https://cdn.img.ly/packages/imgly/cesdk-engine/1.42.0/index.js>';

Note: In this example, the SDK is served from our CDN for convenience. In a production environment, it is recommended to host all assets and libraries on your own servers for improved control and performance.

To use the video-editor.js module in an HTML page, import it with this line:

<script type="module" src="video-editor.js"></script>

Note the type=“module” attribute tells the browser to treat the script as an ES6 module, so that you can use import and export statements.

Alternatively, if you are using a module bundler like Webpack, Rollup, Parcel, or Vite, add the @cesdk/engine npm package to your project’s dependencies:

npm install @cesdk/cesdk-js

In this case, you can then import the headless SDK into your JavaScript code as follows:

import CreativeEngine from '@cesdk/engine';

Well done!

Setting Up Your Environment

In your JavaScript module, right below the library import, initialize the CreativeEditor SDK headless engine using the following code:

// src/video-editor.js

import CreativeEngine from '<https://cdn.img.ly/packages/imgly/cesdk-engine/1.42.0/index.js>';

// your CE.SDK license and user configs
const config = {
  license: '<YOUR_LICENSE>',
};

CreativeEngine.init(config).then(async (engine) => {
  // attach the engine canvas to the DOM
  document.getElementById('cesdk_container').append(engine.element);

  // do something with your instance of CreativeEditor SDK...

  // detach the engine and clean up its resource
  engine.element.remove();
  engine.dispose();
});

Replace <YOUR_LICENSE> with the license key provided in your CreativeEditor SDK subscription.

Ensure that the HTML page importing video-editor.js contains the following <div> element with the cesdk_container ID:

<div id="cesdk_container" style="width: 100%; height: 100vh;"></div>

The CreativeEngine.init() method will mount the editor engine component within this div.

Congratulations! You have successfully integrated the video editing engine.

Load a Video

Use the logic below inside the body of the CreativeEndine.init() callback function to load a video in CE.SDK:

// initialize a new video scene
const scene = engine.scene.createVideo();

// create a page block and attach it to the scene
const page = engine.block.create('page');
engine.block.appendChild(scene, page);

// set the dimensions of the video page
engine.block.setWidth(page, 720);
engine.block.setHeight(page, 1280);

// create a graphic block to hold the video content
// and set its shape to a rectangle
const video = engine.block.create('graphic');
engine.block.setShape(video, engine.block.createShape('rect'));

// create a fill type for the video and set the video file URI
const videoFill = engine.block.createFill('video');
engine.block.setString(
  videoFill,
  'fill/video/fileURI',
  '<https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4>'
);

// apply the video fill to the video graphic
engine.block.setFill(video, videoFill);

// create a track block to manage the video timeline
// and attache the track to the page and the video graphic
// to the track
const track = engine.block.create('track');
engine.block.appendChild(page, track);
engine.block.appendChild(track, video);

// make the track cover the parent block
engine.block.fillParent(track);

This initializes a video scene using createVideo() and creates a "graphic" block to display the video in a rectangle, adding it to the page. Next, it loads a video from a remote resource and appends it as a track to the parent block.

For a complete explanation of how the above code works, refer to the documentation.

If you comment out the cleanup part, this is what you should see in your browser application:

Notice how the video from the remote URI has been loaded into the

element where CreativeEditor SDK is attached to the page’s DOM.Time to explore more programmatic video generation features!

Programmatic Video Generation Features

Follow the use cases below to see how CE.SDK makes automated video generation in JavaScript easier.Generate Video in Different Formats CE.SDK supports video export in MP4 format (with MP3 audio) with different resolutions and aspect ratios.To export a video with a specific aspect ratio, first adjust the width and height of the parent block to which the video block is attached:

// specify an aspect ratio of 9:16 (ideal for vertical videos)
engine.block.setWidth(page, 720);
engine.block.setHeight(page, 1280);

In this case, the video will be automatically adjusted to fit the specified dimensions. Horizontal videos will be cropped to match the defined vertical outline of the block, while vertical videos will be rendered as they are within the specified block.

Next, you can export the video with the configured 9:16 aspect ratio and a given resolution with:

// define the MIME type for the video export (MP4 format)
const mimeType = 'video/mp4';

// define a callback function to track the progress of video rendering and encoding
const progressCallback = (renderedFrames, encodedFrames, totalFrames) => {
  console.log(
    'Rendered', // log the number of rendered frames
    renderedFrames,
    'frames and encoded', // log the number of encoded frames
    encodedFrames,
    'frames out of', // log the total frames to be processed
    totalFrames
  );
};

// define the video export options
const videoOptions = {
  duration: 5, // video duration in seconds
  framerate: 30, // video framerate (frames per second)
  targetWidth: 480, // target video width in pixels (for the resolution)
  targetHeight: 852, // target video height in pixels (for the resolution)
};

// export the page as an MP4 video
const blob = await engine.block.exportVideo(
  page, // the page containing the design video block
  mimeType, // the MIME type for the video (MP4)
  progressCallback, // the callback to track video rendering progress
  videoOptions // the options for the video export
);

// create an anchor element to trigger the video download
const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'video.mp4'; // output video name
anchor.click();

The exportVideo() function produces a blob video file of the specified MIME type. Note that the export occurs over multiple iterations of the update loop, with a frame being encoded in each iteration.

The targetWidth and targetHeight options are optional. If used, the video will be resized to fit the target dimensions while maintaining its aspect ratio. This is useful for setting a specific resolution for the output video while preserving the parent block’s width and height on the output video. If omitted, the produced video will match the resolution of the width and height specified with setWidth() and setHeight(), respectively.

The progressCallback() function will track and display the video generation progress in the browser’s console:

The final lines of the above code snippet trigger the download operation, mimicking the action of clicking a link to download a resource. This is a common JavaScript technique to programmatically trigger a file download.

Once the export process completes, the output video file (video.mp4) will be automatically downloaded to the browser’s download directory. Open its properties and this is what you will see:

Note the video file’s resolution and the fact that its duration is set to 5 seconds, as defined by the duration attribute.

These options enable you to easily create clips with different lengths, aspect ratios, and resolutions, optimized for various audiences and social media platforms like LinkedIn, Instagram, Facebook, X, TikTok, YouTube, and more.

Add Audio Tracks

Adding an audio track for narration or background music to your clip is straightforward. First, create an “audio” block and add your audio resource to it:

const audio = engine.block.create('audio');
engine.block.appendChild(page, audio);
engine.block.setString(
  audio,
  'audio/fileURI',
  'https://cdn.img.ly/assets/demo/v1/ly.img.audio/audios/far_from_home.m4a'
);

Next, you can easily adjust the volume, and apply fade-in and fade-out effects as follows:

// set the volume level to 80%
engine.block.setVolume(audio, 0.8);

// start the audio after 1 second of playback
engine.block.setTimeOffset(audio, 1);

// set the audio block's duration to 5 seconds
engine.block.setDuration(audio, 5);

Here is breakdown of the functions used above:

setVolume(): Adjusts the audio volume of the block, with a range from 0 (0%) to 1 (100%).
setTimeOffset(): Sets the time offset of the block relative to its parent. This determines when the block starts playing in the timeline.
setDuration(): Sets the playback duration of the audio block in seconds, defining how long the block will play during the scene.

In this example, the audio starts at the 1-second mark and plays for 5 seconds (from 1s to 6s), with the volume set to 80% of the original.

Merge Videos

To stitch multiple video clips together in CE.SDK, you first need to import and create separate video blocks:

// create the first video block
const video1 = engine.block.create('graphic');
engine.block.setShape(video1, engine.block.createShape('rect'));
const videoFill1 = engine.block.createFill('video');
engine.block.setString(
  videoFill1,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
);
engine.block.setFill(video1, videoFill1);

// create the second video block
const video2 = engine.block.create('graphic');
engine.block.setShape(video2, engine.block.createShape('rect'));
const videoFill2 = engine.block.createFill('video');
engine.block.setString(
  videoFill2,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v2/ly.img.video/videos/pexels-kampus-production-8154913.mp4'
);
engine.block.setFill(video2, videoFill2);

At this point, you have two different video clips loaded from separate video files.

Now, assume you want to produce a 10-second video that includes both clips. Start by setting the duration of the page block to 10 seconds with the setDuration() method:

engine.block.setDuration(page, 10);

Then, suppose you want the first clip (video1) to play for 7 seconds, and the second clip (video2) to fade in after that and play for 3 seconds (from second 1 to second 4 of the original second clip). This is how you can set that up:

// set the duration of the first and second video clips
engine.block.setDuration(video1, 7); // video1 plays for 7 seconds
engine.block.setDuration(video2, 3); // video2 plays for 3 seconds

// wait for the second video to be fully loaded before applying the trim options
await engine.block.forceLoadAVResource(videoFill2);
// trim the second video to start at 1 second and play up to second 4
engine.block.setTrimOffset(videoFill2, 1);
engine.block.setTrimLength(videoFill2, 4);

// add a fade-in animation to the second video
const fadeInAnimation = engine.block.createAnimation("fade");
engine.block.setInAnimation(video2, fadeInAnimation);

These are the methods used above:

setDuration(): Defines the duration (in seconds) that a video block will be active during playback.
**forceLoadAVResource()**: Ensures that the audio or video resource (in this case, video2) is fully loaded before applying trim operations.
setTrimOffset(): Sets the start point (in seconds) within the video where playback begins.
setTrimLength(): Defines the length of the video to be played from the trim offset.
createAnimation(): Creates a fade-in animation for the second video (video2) to smoothly transition into the clip.

Finally, add both video blocks to the track block for playback:

const track = engine.block.create("track");
engine.block.appendChild(page, track);
engine.block.appendChild(track, video1); // add the first video to the track
engine.block.appendChild(track, video2); // add the second video to the track
engine.block.fillParent(track);

The result will be:

Note how the second clip fades in after 7 seconds of the first clip, lasting for 3 seconds as specified.

Incorporate Text Variables

Now, suppose you want to display cool words or messages in your videos. You can easily achieve this by adding a "text" block to your page, as shown below:

const text = engine.block.create("text");
// set the vluae of the text variable
engine.block.replaceText(text, "Surfing\nis\nCOOL!");
// set the text color to white and semi-transparent
engine.block.setTextColor(text, { r: 255.0, g: 255.0, b: 255.0, a: 0.8 });
// set the font size for the text
engine.block.setTextFontSize(text, 30);

// positioning the text on an absolute position on the video
engine.block.setWidthMode(text, "Auto");
engine.block.setHeightMode(text, "Auto");
engine.block.setPositionX(text, 130);
engine.block.setPositionY(text, 800);

// append the text block to the page
engine.block.appendChild(page, text);

The video canvas will now display a white “Surfing is COOL!” message as follows:

In this example, the content of the text block is static. However, it can easily be retrieved from a database or any other source for programmatic video generation with different messages, including personalized ones for tailored outreach (e.g., for custom greetings or offers).

Advanced Use Case: Prompt-Based Video Generation Using AI

As highlighted in our recent LinkedIn post, IMG.LY has just experimented with an MVP that turns keywords into fully edited short videos, complete with a script, voiceover, and visuals—all automated.

That is made possible by integrating CE.SDK with an LLM for coding and scriptwriting, ElevenLabs for voice synthesis, and Flux (via fal.ai) for visuals. Specifically, the LLM uses CE.SDK for video composition, animation, and rendering.

This is just the beginning, showing how AI can be combined with CE.SDK to programmatically generate video scripts—or even templates. A possible scenario would be to use the Creative Editor SDK plugin API to extend CE.SDK with custom plugins that adds AI directly to the design editor engine.

For example, you could develop a plugin with an LLM integration that allows users to input a prompt like: “Create a 15-second video with the text ‘Welcome to our App!’ and upbeat background music.” The LLM will process the request, using Creative Editor SDK to automate video creation by leveraging its powerful features.

Alternatively, the AI could produce a video that you can then automatically edit and enhance using CE.SDK capabilities. One thing is certain: the possibilities are endless with CE.SDK + AI!

Conclusion: The Future of Programmatic Video Generation

CE.SDK for JavaScript offers exceptional versatility in automating video workflows, allowing you to easily generate, edit, and render videos with just a few lines of code. You can stitch multiple video files, add background audio tracks, and incorporate dynamic text variables to finally produce videos in the browser—all thanks to the CE.SDK headless engine.

Looking ahead, AI integration with CE.SDK is unlocking even more powerful possibilities, such as prompt-based video content creation and automatic editing directly in the browser.

With the headless engine provided by CreativeEditor SDK, programmatic video generation in JavaScript can be implemented in just a few minutes. Explore the video capabilities of CE.SDK and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

Creative Automation – IMG.LY Blog

AI Design Agents and Creative Automation: How to Ship a Full Campaign Without a Designer

The AI Marketing Stack Has a Design-Shaped Hole in It

What an AI Design Agent Actually Changes

How to Run a Campaign Production Session with CoDesign

This Is What Closing the Loop Actually Looks Like

How to Generate 10,000 Localized Ad Variants with CE.SDK Engine API

What You’ll Build

System Architecture: From Template to 10,000 Variants

Why This Architecture Scales

Designing Templates That Work Across 50 Markets

Text Overflow Handling

Layout Flexibility and Safe Zones

Right-to-Left (RTL) Language Support

Font Management Across Languages

Cultural and Visual Considerations

Template Design Checklist

Organizing Data for 10,000 Variants

Product Data Structure

Market Configuration

Creative Variant Configuration

Combining Data Layers

Building the Generation Engine

Step 1: Initialize the Rendering Engine

Step 2: Load and Cache the Template

Step 3: Core Generation Function

Step 4: Orchestrating the Batch

Performance Optimization: From Hours to Minutes

GPU Acceleration: Significant Performance Boost

Template and Asset Caching

Batch Size Tuning

Horizontal Scaling with Multiple Rendering Nodes

Performance Benchmarks

Output Management and Delivery to Ad Platforms

CDN Upload and Organization

Ad Platform Integration

Manifest Generation

Troubleshooting Common Issues

Issue: Text Overflow in German Headlines

Issue: Memory Leaks During Batch Processing

Issue: Inconsistent Font Rendering

Issue: Slow First Batch, Then Fast

Issue: Special Characters Rendering as Boxes

Debugging Best Practices

From Proof of Concept to Production

Automating Video Creation at Scale: Why Templates, Timelines, and Rendering Matter

Why Video Automation Is Fundamentally Different

Timeline Complexity vs. Static Composition

Multi-Asset Coordination and Audio Sync

Rendering Performance and Infrastructure Implications

Designing Templates That Scale

Scene-Based Modular Structure

Text Duration and Audio Sync Strategies

Video Clip Placeholders and Safe Zones

Architecture Patterns for Video Generation Pipelines

Pattern 1: Template-Based Batch Rendering

Pattern 2: Real-Time Personalization

Pattern 3: Hybrid UI + Automation

Platform Constraints and Encoding Optimization

H.264 Profiles, Levels, and Trade-offs

Multi-Format Export for Social Platforms

Browser vs. Server-Side Rendering Trade-offs

Production Pitfalls and Monitoring

Error Handling and Recovery

Monitoring and Observability

Scaling and Cost Optimization

Why Most Teams Don’t Build Video Automation In-House

Real-World Use Cases

Personalized Video Campaigns at Scale

Social Media Content Automation

When Video Automation Makes Sense (and When It Doesn’t)

Good Fit: High-Volume, Template-Driven Use Cases

Poor Fit: Creative-Intensive, One-Off Productions

The Middle Ground: Hybrid Approaches

What to Do Next

Video Automation: Solvable, But Not Simple

Editor or API? Why Modern Creative Automation Needs Both

The Editor-Only Trap: When Manual Workflows Become Bottlenecks

What Editor UIs Do Well

Where Manual Workflows Break Down