@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/use-templates/programmatic.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Create and Use Templates](./create-templates.md) > [Programmatic](./use-templates/programmatic.md)
 
@@ -6,96 +6,61 @@
 
 Automate template workflows with CE.SDK's engine APIs for batch processing, personalization, and headless design generation.
 
-![Use Templates Programmatically](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 15 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-programmatic-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-use-templates-programmatic-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-programmatic-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-programmatic-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-use-templates-programmatic-server-js)
 
 Templates are scenes with predefined structures that support dynamic content through variables. This guide shows you how to work with templates programmatically using CE.SDK's engine APIs—without requiring user interface interactions.
 
-```typescript file=@cesdk_web_examples/guides-use-templates-programmatic-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+```typescript file=@cesdk_web_examples/guides-use-templates-programmatic-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync } from 'fs';
+import { config as loadEnv } from 'dotenv';
+
+// Load environment variables
+loadEnv();
 
 /**
- * CE.SDK Plugin: Use Templates Programmatically
+ * Use Templates Programmatically (Server/Node.js)
  *
- * This example demonstrates how to work with templates programmatically:
+ * This example demonstrates headless template workflows:
  * 1. Creating templates from scratch with text variables
  * 2. Setting up text variables for dynamic content
- * 3. Populating templates with data
- * 4. Saving and exporting templates
+ * 3. Batch processing: populating templates with data
+ * 4. Exporting multiple personalized outputs
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-    await cesdk.addPlugin(new DesignEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
-    });
+async function run() {
+  let engine;
 
-    const engine = cesdk.engine;
-    const pages = engine.block.findByType('page');
-    const page = pages[0];
-    if (!page) {
-      throw new Error('No page found');
-    }
+  try {
+    const config = {
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+      // license: process.env.CESDK_LICENSE,
+      logger: (message: string, logLevel?: string) => {
+        if (logLevel === 'ERROR' || logLevel === 'WARN') {
+          console.log(`[${logLevel}]`, message);
+        }
+      }
+    };
+
+    engine = await CreativeEngine.init(config);
+    console.log('✓ Engine initialized');
+
+    // Create a greeting card template from scratch
+    const scene = engine.scene.create();
+    const page = engine.block.create('page');
+    engine.block.appendChild(scene, page);
+
+    // Set page dimensions
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 600);
 
     // Set page background
     const pageFill = engine.block.getFill(page);
@@ -106,14 +71,11 @@ class Example implements EditorPlugin {
       a: 1.0
     });
 
-    // Create a greeting card template from scratch
-    // This template will have placeholders for customization
-
     // Set up text variables FIRST so they're available when text is created
-    engine.variable.setString('recipientName', 'Alice');
-    engine.variable.setString('customMessage', 'Wishing you a wonderful day!');
+    engine.variable.setString('recipientName', 'Template');
+    engine.variable.setString('customMessage', 'This is a template example');
 
-    // Add a title text block with variable placeholder
+    // Add title text block with variable placeholder
     const titleBlock = engine.block.create('text');
     engine.block.setName(titleBlock, 'title');
     engine.block.appendChild(page, titleBlock);
@@ -122,7 +84,7 @@ class Example implements EditorPlugin {
     engine.block.setWidth(titleBlock, 700);
     engine.block.setHeight(titleBlock, 80);
 
-    // Set text with variable syntax for dynamic replacement
+    // Set text with variable syntax
     engine.block.replaceText(titleBlock, 'Hello, {{recipientName}}!');
     engine.block.setTextColor(titleBlock, {
       r: 0.2,
@@ -131,10 +93,11 @@ class Example implements EditorPlugin {
       a: 1.0
     });
 
-    // Set font size and weight for better visibility
+    // Configure font size and weight
     engine.block.setFloat(titleBlock, 'text/fontSize', 48);
+    engine.block.setBool(titleBlock, 'text/bold', true);
 
-    // Add a message text block with variable
+    // Add message text block with variable
     const messageBlock = engine.block.create('text');
     engine.block.setName(messageBlock, 'message');
     engine.block.appendChild(page, messageBlock);
@@ -153,62 +116,72 @@ class Example implements EditorPlugin {
 
     engine.block.setFloat(messageBlock, 'text/fontSize', 28);
 
-    // Variables have already been set earlier in the template creation
-    // You can retrieve variable values at any time
-    const recipientName = engine.variable.getString('recipientName');
-    console.log('Current recipient:', recipientName);
+    console.log('✓ Template structure created');
 
-    // List all variables in the scene
+    // Variables have already been set earlier in the template creation
+    // List all variables
     const allVariables = engine.variable.findAll();
-    console.log('All variables:', allVariables);
-
-    // Demonstrate populating the template with different data
-    // In a real application, you would iterate through data records
-
-    // Example: Update variables to populate template with new data
-    setTimeout(() => {
-      engine.variable.setString('recipientName', 'Bob');
-      engine.variable.setString(
-        'customMessage',
-        'Congratulations on your achievement!'
-      );
-      console.log('Variables updated to new values');
-    }, 2000);
-
-    // Demonstrate saving and exporting the template
-    setTimeout(async () => {
-      // Save the entire scene to a string for later reuse
-      const sceneString = await engine.scene.saveToString();
-      console.log('Template saved, length:', sceneString.length);
-
-      // You can export the current view as an image
-      const blob = await engine.block.export(page, 'image/png', {
+    console.log('✓ Variables initialized:', allVariables);
+
+    // Save the template for reuse
+    const templateString = await engine.scene.saveToString();
+    writeFileSync('template.scene', templateString);
+    console.log('✓ Template saved to template.scene');
+
+    // Demonstrate batch processing: populate template with multiple data records
+    const recipients = [
+      {
+        name: 'Alice',
+        message: 'Congratulations on your promotion!'
+      },
+      {
+        name: 'Bob',
+        message: 'Happy Birthday! Have a wonderful day!'
+      },
+      {
+        name: 'Charlie',
+        message: 'Thank you for your amazing work!'
+      }
+    ];
+
+    console.log('\n✓ Starting batch processing...');
+
+    for (let i = 0; i < recipients.length; i++) {
+      const recipient = recipients[i];
+
+      // Populate template with recipient data
+      engine.variable.setString('recipientName', recipient.name);
+      engine.variable.setString('customMessage', recipient.message);
+
+      // Export the personalized card
+      const blob = await engine.block.export(page, {
+        mimeType: 'image/png',
         targetWidth: 800,
         targetHeight: 600
       });
-      console.log('Exported as PNG, size:', blob.size, 'bytes');
-
-      // Create a download link for the export (demonstration purposes)
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = 'greeting-card.png';
-      console.log('Export ready for download');
-      // Uncomment to trigger automatic download:
-      // link.click();
-    }, 4000);
-
-    // Switch to adopter mode to demonstrate placeholder functionality
-    engine.editor.setRole('Adopter');
-
-    console.log('Template created successfully!');
-    console.log('The template includes:');
-    console.log('- Text variables: recipientName, customMessage');
-    console.log('- Automatic variable updates will occur every 2 seconds');
+
+      const filename = `greeting-card-${recipient.name.toLowerCase()}.png`;
+      const buffer = Buffer.from(await blob.arrayBuffer());
+      writeFileSync(filename, buffer);
+      console.log(`  ✓ Exported ${filename}`);
+    }
+
+    console.log('\n✓ Batch processing complete!');
+    console.log(`✓ Generated ${recipients.length} personalized cards`);
+
+    console.log('\n✓ All operations completed successfully!');
+  } catch (error) {
+    console.error('Error:', error);
+    process.exit(1);
+  } finally {
+    // Always dispose the engine
+    engine?.dispose();
+    console.log('\n✓ Engine disposed');
   }
 }
 
-export default Example;
+// Run the example
+run();
 ```
 
 This guide covers creating templates from scratch, configuring text variables, populating templates with data, implementing batch processing workflows, and exporting personalized designs.
@@ -218,54 +191,18 @@ This guide covers creating templates from scratch, configuring text variables, p
 We start by initializing CE.SDK and creating a design scene. This provides the foundation for programmatic template operations.
 
 ```typescript highlight=highlight-setup
-await cesdk.addPlugin(new DesignEditorConfig());
-
-// Add asset source plugins
-await cesdk.addPlugin(new BlurAssetSource());
-await cesdk.addPlugin(new ColorPaletteAssetSource());
-await cesdk.addPlugin(new CropPresetsAssetSource());
-await cesdk.addPlugin(
-  new UploadAssetSources({ include: ['ly.img.image.upload'] })
-);
-await cesdk.addPlugin(
-  new DemoAssetSources({
-    include: [
-      'ly.img.templates.blank.*',
-      'ly.img.templates.presentation.*',
-      'ly.img.templates.print.*',
-      'ly.img.templates.social.*',
-      'ly.img.image.*'
-    ]
-  })
-);
-await cesdk.addPlugin(new EffectsAssetSource());
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(new PagePresetsAssetSource());
-await cesdk.addPlugin(new StickerAssetSource());
-await cesdk.addPlugin(new TextAssetSource());
-await cesdk.addPlugin(new TextComponentAssetSource());
-await cesdk.addPlugin(new TypefaceAssetSource());
-await cesdk.addPlugin(new VectorShapeAssetSource());
-
-await cesdk.actions.run('scene.create', {
-  page: { width: 800, height: 600, unit: 'Pixel' }
-});
-
-const engine = cesdk.engine;
-const pages = engine.block.findByType('page');
-const page = pages[0];
-if (!page) {
-  throw new Error('No page found');
-}
-
-// Set page background
-const pageFill = engine.block.getFill(page);
-engine.block.setColor(pageFill, 'fill/color/value', {
-  r: 0.95,
-  g: 0.95,
-  b: 0.95,
-  a: 1.0
-});
+    const config = {
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+      // license: process.env.CESDK_LICENSE,
+      logger: (message: string, logLevel?: string) => {
+        if (logLevel === 'ERROR' || logLevel === 'WARN') {
+          console.log(`[${logLevel}]`, message);
+        }
+      }
+    };
+
+    engine = await CreativeEngine.init(config);
+    console.log('✓ Engine initialized');
 ```
 
 We create a page with specific dimensions and set a light gray background. This serves as the canvas for our template structure.
@@ -275,52 +212,70 @@ We create a page with specific dimensions and set a light gray background. This
 We build templates programmatically by creating and arranging blocks with `engine.block.create()` and `engine.block.appendChild()`.
 
 ```typescript highlight=highlight-create-template
-// Create a greeting card template from scratch
-// This template will have placeholders for customization
-
-// Set up text variables FIRST so they're available when text is created
-engine.variable.setString('recipientName', 'Alice');
-engine.variable.setString('customMessage', 'Wishing you a wonderful day!');
-
-// Add a title text block with variable placeholder
-const titleBlock = engine.block.create('text');
-engine.block.setName(titleBlock, 'title');
-engine.block.appendChild(page, titleBlock);
-engine.block.setPositionX(titleBlock, 50);
-engine.block.setPositionY(titleBlock, 50);
-engine.block.setWidth(titleBlock, 700);
-engine.block.setHeight(titleBlock, 80);
-
-// Set text with variable syntax for dynamic replacement
-engine.block.replaceText(titleBlock, 'Hello, {{recipientName}}!');
-engine.block.setTextColor(titleBlock, {
-  r: 0.2,
-  g: 0.2,
-  b: 0.2,
-  a: 1.0
-});
-
-// Set font size and weight for better visibility
-engine.block.setFloat(titleBlock, 'text/fontSize', 48);
-
-// Add a message text block with variable
-const messageBlock = engine.block.create('text');
-engine.block.setName(messageBlock, 'message');
-engine.block.appendChild(page, messageBlock);
-engine.block.setPositionX(messageBlock, 50);
-engine.block.setPositionY(messageBlock, 140);
-engine.block.setWidth(messageBlock, 700);
-engine.block.setHeight(messageBlock, 120);
-
-engine.block.replaceText(messageBlock, '{{customMessage}}');
-engine.block.setTextColor(messageBlock, {
-  r: 0.3,
-  g: 0.3,
-  b: 0.3,
-  a: 1.0
-});
-
-engine.block.setFloat(messageBlock, 'text/fontSize', 28);
+    // Create a greeting card template from scratch
+    const scene = engine.scene.create();
+    const page = engine.block.create('page');
+    engine.block.appendChild(scene, page);
+
+    // Set page dimensions
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 600);
+
+    // Set page background
+    const pageFill = engine.block.getFill(page);
+    engine.block.setColor(pageFill, 'fill/color/value', {
+      r: 0.95,
+      g: 0.95,
+      b: 0.95,
+      a: 1.0
+    });
+
+    // Set up text variables FIRST so they're available when text is created
+    engine.variable.setString('recipientName', 'Template');
+    engine.variable.setString('customMessage', 'This is a template example');
+
+    // Add title text block with variable placeholder
+    const titleBlock = engine.block.create('text');
+    engine.block.setName(titleBlock, 'title');
+    engine.block.appendChild(page, titleBlock);
+    engine.block.setPositionX(titleBlock, 50);
+    engine.block.setPositionY(titleBlock, 50);
+    engine.block.setWidth(titleBlock, 700);
+    engine.block.setHeight(titleBlock, 80);
+
+    // Set text with variable syntax
+    engine.block.replaceText(titleBlock, 'Hello, {{recipientName}}!');
+    engine.block.setTextColor(titleBlock, {
+      r: 0.2,
+      g: 0.2,
+      b: 0.2,
+      a: 1.0
+    });
+
+    // Configure font size and weight
+    engine.block.setFloat(titleBlock, 'text/fontSize', 48);
+    engine.block.setBool(titleBlock, 'text/bold', true);
+
+    // Add message text block with variable
+    const messageBlock = engine.block.create('text');
+    engine.block.setName(messageBlock, 'message');
+    engine.block.appendChild(page, messageBlock);
+    engine.block.setPositionX(messageBlock, 50);
+    engine.block.setPositionY(messageBlock, 140);
+    engine.block.setWidth(messageBlock, 700);
+    engine.block.setHeight(messageBlock, 120);
+
+    engine.block.replaceText(messageBlock, '{{customMessage}}');
+    engine.block.setTextColor(messageBlock, {
+      r: 0.3,
+      g: 0.3,
+      b: 0.3,
+      a: 1.0
+    });
+
+    engine.block.setFloat(messageBlock, 'text/fontSize', 28);
+
+    console.log('✓ Template structure created');
 ```
 
 We create a greeting card template with two text blocks. The title block contains `{{recipientName}}` and the message block contains `{{customMessage}}`—these double-brace syntax markers define where variables will be replaced. We position each block precisely and configure text properties like font size and color.
@@ -331,70 +286,74 @@ Variables enable text replacement throughout templates. We set variable values w
 
 ```typescript highlight=highlight-manage-variables
 // Variables have already been set earlier in the template creation
-// You can retrieve variable values at any time
-const recipientName = engine.variable.getString('recipientName');
-console.log('Current recipient:', recipientName);
-
-// List all variables in the scene
+// List all variables
 const allVariables = engine.variable.findAll();
-console.log('All variables:', allVariables);
+console.log('✓ Variables initialized:', allVariables);
 ```
 
 We initialize variables for `recipientName` and `customMessage`. The `engine.variable.getString()` method retrieves current values, and `engine.variable.findAll()` lists all variables in the scene. Variables persist with the scene and automatically update text content whenever changed.
 
-## Populating Template Content
+## Saving Templates for Reuse
 
-We populate templates by updating variables with new data. This enables data-driven design generation.
-
-```typescript highlight=highlight-populate-content
-// Demonstrate populating the template with different data
-// In a real application, you would iterate through data records
-
-// Example: Update variables to populate template with new data
-setTimeout(() => {
-  engine.variable.setString('recipientName', 'Bob');
-  engine.variable.setString(
-    'customMessage',
-    'Congratulations on your achievement!'
-  );
-  console.log('Variables updated to new values');
-}, 2000);
-```
+Templates can be serialized for storage and reuse. We use `engine.scene.saveToString()` to create portable template files.
 
-We update variables to change text content using `engine.variable.setString()`. When variables are updated, all text blocks containing those variable references automatically display the new values. This approach enables efficient template population without manually finding and updating individual blocks.
+```typescript highlight=highlight-save-template
+// Save the template for reuse
+const templateString = await engine.scene.saveToString();
+writeFileSync('template.scene', templateString);
+console.log('✓ Template saved to template.scene');
+```
 
-## Saving and Exporting Templates
+The `saveToString()` method returns a base64-encoded string containing the complete scene. This string can be stored in databases or file systems for later use in batch processing workflows.
+
+## Batch Processing with Templates
+
+We demonstrate batch processing by populating the template with multiple data records and exporting personalized outputs.
+
+```typescript highlight=highlight-batch-processing
+    // Demonstrate batch processing: populate template with multiple data records
+    const recipients = [
+      {
+        name: 'Alice',
+        message: 'Congratulations on your promotion!'
+      },
+      {
+        name: 'Bob',
+        message: 'Happy Birthday! Have a wonderful day!'
+      },
+      {
+        name: 'Charlie',
+        message: 'Thank you for your amazing work!'
+      }
+    ];
+
+    console.log('\n✓ Starting batch processing...');
+
+    for (let i = 0; i < recipients.length; i++) {
+      const recipient = recipients[i];
+
+      // Populate template with recipient data
+      engine.variable.setString('recipientName', recipient.name);
+      engine.variable.setString('customMessage', recipient.message);
+
+      // Export the personalized card
+      const blob = await engine.block.export(page, {
+        mimeType: 'image/png',
+        targetWidth: 800,
+        targetHeight: 600
+      });
 
-Templates can be serialized for storage and reuse. We use `engine.scene.saveToString()` to create portable template files.
+      const filename = `greeting-card-${recipient.name.toLowerCase()}.png`;
+      const buffer = Buffer.from(await blob.arrayBuffer());
+      writeFileSync(filename, buffer);
+      console.log(`  ✓ Exported ${filename}`);
+    }
 
-```typescript highlight=highlight-save-export
-// Demonstrate saving and exporting the template
-setTimeout(async () => {
-  // Save the entire scene to a string for later reuse
-  const sceneString = await engine.scene.saveToString();
-  console.log('Template saved, length:', sceneString.length);
-
-  // You can export the current view as an image
-  const blob = await engine.block.export(page, 'image/png', {
-    targetWidth: 800,
-    targetHeight: 600
-  });
-  console.log('Exported as PNG, size:', blob.size, 'bytes');
-
-  // Create a download link for the export (demonstration purposes)
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = 'greeting-card.png';
-  console.log('Export ready for download');
-  // Uncomment to trigger automatic download:
-  // link.click();
-}, 4000);
+    console.log('\n✓ Batch processing complete!');
+    console.log(`✓ Generated ${recipients.length} personalized cards`);
 ```
 
-The `saveToString()` method returns a base64-encoded string containing the complete scene, including all blocks, properties, and variable definitions. This string can be stored in databases, file systems, or transmitted over networks.
-
-For generating final outputs, `engine.block.export()` renders blocks to images. The `targetWidth` and `targetHeight` options control output resolution. The method returns a Blob that can be downloaded, uploaded, or further processed.
+The batch processing pattern loads a template once, then iterates through data records. For each record, we update variables with specific values, then export the result. This efficient approach generates multiple personalized designs from a single template. Each export operation renders the current state to a PNG file saved to disk.
 
 ## Data-Driven Workflows
 
@@ -409,8 +368,8 @@ for (const record of dataRecords) {
   engine.variable.setString('title', record.title);
 
   const page = engine.block.findByType('page')[0];
-  const blob = await engine.block.export(page, 'image/png');
-  // Process or save the blob
+  const buffer = await engine.block.export(page, 'image/png');
+  writeFileSync(`output-${record.id}.png`, Buffer.from(buffer));
 }
 ```
 
@@ -422,7 +381,7 @@ Templates can be loaded from various sources. Use `engine.scene.loadFromURL()` t
 
 ```typescript
 await engine.scene.loadFromURL(
-  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
 );
 ```
 
@@ -430,6 +389,10 @@ For templates with embedded assets, `engine.scene.loadFromArchiveURL()` loads th
 
 The `engine.scene.applyTemplateFromString()` and `engine.scene.applyTemplateFromURL()` methods merge template content into existing scenes without replacing everything—useful for adding template sections to ongoing designs.
 
+## Populating Template Content
+
+We populate templates by updating variables with new data. When variables are updated, all text blocks containing those variable references automatically display the new values. This approach enables efficient template population without manually finding and updating individual blocks.
+
 ## Managing Variables
 
 Variables integrate with text blocks automatically. When you set a variable value, CE.SDK updates all text containing that variable immediately:
@@ -446,23 +409,23 @@ Remove variables with `engine.variable.remove()` when they're no longer needed.
 
 ## API Reference
 
-| Method                          | Description                                 |
-| ------------------------------- | ------------------------------------------- |
-| `engine.block.create()`         | Create a new design block                   |
-| `engine.block.appendChild()`    | Add a block to the scene hierarchy          |
-| `engine.block.setPositionX()`   | Set block horizontal position               |
-| `engine.block.setPositionY()`   | Set block vertical position                 |
-| `engine.block.setWidth()`       | Set block width                             |
-| `engine.block.setHeight()`      | Set block height                            |
-| `engine.block.replaceText()`    | Set text content (supports variable tokens) |
-| `engine.variable.setString()`   | Create or update a text variable            |
-| `engine.variable.getString()`   | Read the current value of a variable        |
-| `engine.variable.findAll()`     | Get array of all variable keys in the scene |
-| `engine.variable.remove()`      | Delete a variable from the scene            |
-| `engine.scene.saveToString()`   | Serialize scene to portable string          |
-| `engine.scene.loadFromString()` | Load scene from serialized string           |
-| `engine.scene.loadFromURL()`    | Load scene from remote URL                  |
-| `engine.block.export()`         | Export block to image blob                  |
+| Method | Description |
+| --- | --- |
+| `engine.block.create()` | Create a new design block |
+| `engine.block.appendChild()` | Add a block to the scene hierarchy |
+| `engine.block.setPositionX()` | Set block horizontal position |
+| `engine.block.setPositionY()` | Set block vertical position |
+| `engine.block.setWidth()` | Set block width |
+| `engine.block.setHeight()` | Set block height |
+| `engine.block.replaceText()` | Set text content (supports variable tokens) |
+| `engine.variable.setString()` | Create or update a text variable |
+| `engine.variable.getString()` | Read the current value of a variable |
+| `engine.variable.findAll()` | Get array of all variable keys in the scene |
+| `engine.variable.remove()` | Delete a variable from the scene |
+| `engine.scene.saveToString()` | Serialize scene to portable string |
+| `engine.scene.loadFromString()` | Load scene from serialized string |
+| `engine.scene.loadFromURL()` | Load scene from remote URL |
+| `engine.block.export()` | Export block to image blob |
 
 ## Troubleshooting
 
@@ -472,11 +435,13 @@ Remove variables with `engine.variable.remove()` when they're no longer needed.
 
 **Export issues:** Validate that all required assets are accessible before exporting. Missing images or fonts can cause export failures. Check block hierarchy structure—orphaned blocks (not connected to the page tree) won't appear in exports.
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support