@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/create-templates/from-scratch.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) > [Create From Scratch](./create-templates/from-scratch.md)
 
@@ -6,50 +6,57 @@
 
 Build reusable design templates entirely through code using CE.SDK's programmatic APIs for automation, batch generation, and custom template creation tools.
 
-![Create Templates From Scratch](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 10 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-create-templates-from-scratch-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-from-scratch-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-from-scratch-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-from-scratch-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-from-scratch-server-js)
 
 CE.SDK provides a complete API for building design templates through code. Instead of starting from an existing template, you can create a blank scene, define page dimensions, add text and graphic blocks, configure placeholders for swappable media, add text variables for dynamic content, apply editing constraints to protect layout integrity, and save the template for reuse. This approach enables automation workflows, batch template generation, and integration with custom template creation tools.
 
-```typescript file=@cesdk_web_examples/guides-create-templates-from-scratch-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+```typescript file=@cesdk_web_examples/guides-create-templates-from-scratch-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { createInterface } from 'readline';
+import { config } from 'dotenv';
 
-/**
- * CE.SDK Plugin: Create Templates From Scratch Guide
- *
- * Demonstrates building a reusable promotional card template entirely in code:
- * - Creating a blank scene with print-ready dimensions (1200x1600)
- * - Adding text blocks with variable tokens and proper font styling
- * - Adding graphic blocks as image placeholders using addImage()
- * - Configuring placeholder behavior for swappable media
- * - Applying editing constraints (scopes) to protect layout integrity
- * - Saving the template in multiple formats
- */
+// Load environment variables
+config();
 
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
+// Prompt utility for interactive save options
+function prompt(question: string): Promise<string> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+}
 
-    await cesdk.addPlugin(new DesignEditorConfig());
-    const engine = cesdk.engine;
+async function main() {
+  // Display save options menu
+  console.log('=== Template Save Options ===\n');
+  console.log('1. Save as string (for CDN-hosted assets)');
+  console.log('2. Save as archive (self-contained ZIP)');
+  console.log('3. Export as PNG image');
+  console.log('4. Save all formats and export png\n');
+
+  const choice = (await prompt('Select save option (1-4): ')) || '4';
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
+  try {
     // Template layout constants for a promotional card
     const CANVAS_WIDTH = 800;
     const CANVAS_HEIGHT = 1000;
@@ -193,103 +200,58 @@ class Example implements EditorPlugin {
     engine.block.setScopeEnabled(imageBlock, 'layer/resize', false);
     engine.block.setScopeEnabled(imageBlock, 'fill/change', true);
 
-    // Register role toggle component for switching between Creator and Adopter
-    cesdk.ui.registerComponent('role.toggle', ({ builder }) => {
-      const role = engine.editor.getRole();
-      builder.ButtonGroup('role-toggle', {
-        children: () => {
-          builder.Button('creator-btn', {
-            label: 'Creator',
-            isActive: role === 'Creator',
-            onClick: () => engine.editor.setRole('Creator')
-          });
-          builder.Button('adopter-btn', {
-            label: 'Adopter',
-            isActive: role === 'Adopter',
-            onClick: () => engine.editor.setRole('Adopter')
-          });
-        }
-      });
-    });
+    // Ensure output directory exists
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
 
-    // Register button component for saving template as string
-    cesdk.ui.registerComponent('save.string', ({ builder }) => {
-      builder.Button('save-string-btn', {
-        label: 'Save String',
-        icon: '@imgly/Download',
-        variant: 'regular',
-        onClick: async () => {
-          const templateString = await engine.scene.saveToString();
-          console.log(
-            'Template saved as string:',
-            templateString.substring(0, 100) + '...'
-          );
-          // Download the string as a file
-          const blob = new Blob([templateString], { type: 'text/plain' });
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = 'template.scene';
-          link.click();
-          URL.revokeObjectURL(url);
-        }
-      });
-    });
+    // Save template based on user choice
+    if (choice === '1' || choice === '4') {
+      // Save the template as a string (for CDN-hosted assets)
+      const templateString = await engine.scene.saveToString();
+      writeFileSync(`${outputDir}/template.scene`, templateString);
+      console.log('Template saved to output/template.scene');
+    }
 
-    // Register button component for saving template as archive
-    cesdk.ui.registerComponent('save.archive', ({ builder }) => {
-      builder.Button('save-archive-btn', {
-        label: 'Save Archive',
-        icon: '@imgly/Download',
-        variant: 'regular',
-        onClick: async () => {
-          const templateArchive = await engine.scene.saveToArchive();
-          console.log(
-            'Template saved as archive:',
-            templateArchive.size,
-            'bytes'
-          );
-          // Download the archive as a file
-          const url = URL.createObjectURL(templateArchive);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = 'template.zip';
-          link.click();
-          URL.revokeObjectURL(url);
-        }
-      });
-    });
+    if (choice === '2' || choice === '4') {
+      // Save the template as a self-contained archive
+      const templateArchive = await engine.scene.saveToArchive();
+      const archiveBuffer = Buffer.from(await templateArchive.arrayBuffer());
+      writeFileSync(`${outputDir}/template.zip`, archiveBuffer);
+      console.log('Template archive saved to output/template.zip');
+    }
 
-    // Add role toggle and save buttons to the navigation bar
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      'role.toggle'
-    );
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      'save.string'
-    );
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      'save.archive'
-    );
+    if (choice === '3' || choice === '4') {
+      // Export the template as a PNG image
+      const pngBlob = await engine.block.export(page, {
+        mimeType: 'image/png'
+      });
+      const pngBuffer = Buffer.from(await pngBlob.arrayBuffer());
+      writeFileSync(`${outputDir}/template.png`, pngBuffer);
+      console.log('Template exported to output/template.png');
+    }
 
-    // Enable auto-fit zoom to continuously fit the page with padding
-    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);
+    console.log('Template creation completed successfully');
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide covers how to create a blank scene, add text blocks with variables, add image placeholders, apply editing constraints, and save the template.
 
 ## Initialize CE.SDK
 
-We start by initializing CE.SDK and loading the asset sources. The asset source plugins (imported from `@cesdk/cesdk-js/plugins`) provide access to fonts, images, and other assets.
+We start by initializing CE.SDK's Node.js engine for server-side rendering and scene manipulation.
 
 ```typescript highlight=highlight-setup
-const engine = cesdk.engine;
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE
+});
 ```
 
 ## Create a Blank Scene
@@ -297,19 +259,19 @@ const engine = cesdk.engine;
 We create the foundation of our template with custom page dimensions. The `engine.scene.create()` method accepts page options to set width, height, and background color.
 
 ```typescript highlight=highlight-create-scene
-// Template layout constants for a promotional card
-const CANVAS_WIDTH = 800;
-const CANVAS_HEIGHT = 1000;
-const PADDING = 40;
-const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2;
-
-// Create a blank scene with custom dimensions
-engine.scene.create('Free', {
-  page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } }
-});
+    // Template layout constants for a promotional card
+    const CANVAS_WIDTH = 800;
+    const CANVAS_HEIGHT = 1000;
+    const PADDING = 40;
+    const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2;
 
-// Set design unit to Pixel for precise coordinate mapping
-engine.scene.setDesignUnit('Pixel');
+    // Create a blank scene with custom dimensions
+    engine.scene.create('Free', {
+      page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } }
+    });
+
+    // Set design unit to Pixel for precise coordinate mapping
+    engine.scene.setDesignUnit('Pixel');
 ```
 
 The scene creation method accepts a layout mode and optional page configuration. When options are provided, the scene automatically includes a page with the specified dimensions.
@@ -335,26 +297,26 @@ We create a color fill using `engine.block.createFill('color')`, set the color v
 Text blocks allow you to add styled text content. We create a headline that includes a variable token for dynamic content.
 
 ```typescript highlight=highlight-add-text
-// Create headline text block with {{title}} variable
-const headline = engine.block.create('text');
-engine.block.replaceText(headline, '{{title}}');
-
-// Set font with proper typeface for consistent rendering
-engine.block.setFont(headline, FONT_BOLD, {
-  name: 'Roboto',
-  fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }]
-});
-engine.block.setFloat(headline, 'text/fontSize', 28);
-engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
-
-// Position and size the headline
-engine.block.setWidthMode(headline, 'Absolute');
-engine.block.setHeightMode(headline, 'Auto');
-engine.block.setWidth(headline, CONTENT_WIDTH);
-engine.block.setPositionX(headline, PADDING);
-engine.block.setPositionY(headline, 50);
-engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center');
-engine.block.appendChild(page, headline);
+    // Create headline text block with {{title}} variable
+    const headline = engine.block.create('text');
+    engine.block.replaceText(headline, '{{title}}');
+
+    // Set font with proper typeface for consistent rendering
+    engine.block.setFont(headline, FONT_BOLD, {
+      name: 'Roboto',
+      fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }]
+    });
+    engine.block.setFloat(headline, 'text/fontSize', 28);
+    engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
+
+    // Position and size the headline
+    engine.block.setWidthMode(headline, 'Absolute');
+    engine.block.setHeightMode(headline, 'Auto');
+    engine.block.setWidth(headline, CONTENT_WIDTH);
+    engine.block.setPositionX(headline, PADDING);
+    engine.block.setPositionY(headline, 50);
+    engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center');
+    engine.block.appendChild(page, headline);
 ```
 
 We create a text block using `engine.block.create('text')`, set its content with `engine.block.replaceText()`, configure dimensions and position, and append it to the page using `engine.block.appendChild()`.
@@ -375,24 +337,24 @@ The `engine.variable.setString()` method sets the default value for the variable
 Graphic blocks serve as containers for images. We create an image block that will become a placeholder for swappable media.
 
 ```typescript highlight=highlight-add-graphic
-// Create image placeholder in the center of the card
-const imageBlock = engine.block.create('graphic');
-const imageShape = engine.block.createShape('rect');
-engine.block.setShape(imageBlock, imageShape);
-
-const imageFill = engine.block.createFill('image');
-engine.block.setString(
-  imageFill,
-  'fill/image/imageFileURI',
-  'https://img.ly/static/ubq_samples/sample_1.jpg'
-);
-engine.block.setFill(imageBlock, imageFill);
-
-engine.block.setWidth(imageBlock, CONTENT_WIDTH);
-engine.block.setHeight(imageBlock, 420);
-engine.block.setPositionX(imageBlock, PADDING);
-engine.block.setPositionY(imageBlock, 295);
-engine.block.appendChild(page, imageBlock);
+    // Create image placeholder in the center of the card
+    const imageBlock = engine.block.create('graphic');
+    const imageShape = engine.block.createShape('rect');
+    engine.block.setShape(imageBlock, imageShape);
+
+    const imageFill = engine.block.createFill('image');
+    engine.block.setString(
+      imageFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/sample_1.jpg'
+    );
+    engine.block.setFill(imageBlock, imageFill);
+
+    engine.block.setWidth(imageBlock, CONTENT_WIDTH);
+    engine.block.setHeight(imageBlock, 420);
+    engine.block.setPositionX(imageBlock, PADDING);
+    engine.block.setPositionY(imageBlock, 295);
+    engine.block.appendChild(page, imageBlock);
 ```
 
 We create a graphic block with `engine.block.create('graphic')`, assign a rectangle shape using `engine.block.createShape('rect')` and `engine.block.setShape()`, create an image fill with `engine.block.createFill('image')`, set the image URI via `engine.block.setString()`, and position it on the page.
@@ -402,16 +364,16 @@ We create a graphic block with `engine.block.create('graphic')`, assign a rectan
 Placeholders turn design blocks into drop-zones where users can swap content while maintaining layout integrity. We enable placeholder behavior on the image fill and configure visual controls.
 
 ```typescript highlight=highlight-configure-placeholder
-// Enable placeholder behavior on the image fill
-const fill = engine.block.getFill(imageBlock);
-if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) {
-  engine.block.setPlaceholderBehaviorEnabled(fill, true);
-}
-engine.block.setPlaceholderEnabled(imageBlock, true);
+    // Enable placeholder behavior on the image fill
+    const fill = engine.block.getFill(imageBlock);
+    if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) {
+      engine.block.setPlaceholderBehaviorEnabled(fill, true);
+    }
+    engine.block.setPlaceholderEnabled(imageBlock, true);
 
-// Enable visual controls for the placeholder
-engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true);
-engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true);
+    // Enable visual controls for the placeholder
+    engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true);
+    engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true);
 ```
 
 Placeholder behavior is enabled on the fill (not the block) for graphic blocks. We also enable the overlay pattern and replace button for visual guidance.
@@ -421,21 +383,21 @@ Placeholder behavior is enabled on the fill (not the block) for graphic blocks.
 Editing constraints protect template elements by restricting what users can modify. We use scopes to lock position and size while allowing content changes.
 
 ```typescript highlight=highlight-apply-constraints
-// Set global scope to 'Defer' for per-block control
-engine.editor.setGlobalScope('layer/move', 'Defer');
-engine.editor.setGlobalScope('layer/resize', 'Defer');
-
-// Lock all text block positions but allow text editing
-const textBlocks = [headline, subheadline, cta];
-textBlocks.forEach((block) => {
-  engine.block.setScopeEnabled(block, 'layer/move', false);
-  engine.block.setScopeEnabled(block, 'layer/resize', false);
-});
+    // Set global scope to 'Defer' for per-block control
+    engine.editor.setGlobalScope('layer/move', 'Defer');
+    engine.editor.setGlobalScope('layer/resize', 'Defer');
 
-// Lock image position but allow fill replacement
-engine.block.setScopeEnabled(imageBlock, 'layer/move', false);
-engine.block.setScopeEnabled(imageBlock, 'layer/resize', false);
-engine.block.setScopeEnabled(imageBlock, 'fill/change', true);
+    // Lock all text block positions but allow text editing
+    const textBlocks = [headline, subheadline, cta];
+    textBlocks.forEach((block) => {
+      engine.block.setScopeEnabled(block, 'layer/move', false);
+      engine.block.setScopeEnabled(block, 'layer/resize', false);
+    });
+
+    // Lock image position but allow fill replacement
+    engine.block.setScopeEnabled(imageBlock, 'layer/move', false);
+    engine.block.setScopeEnabled(imageBlock, 'layer/resize', false);
+    engine.block.setScopeEnabled(imageBlock, 'fill/change', true);
 ```
 
 Setting global scope to `'Defer'` enables per-block control. We then disable movement and resizing for both blocks while enabling fill changes for the image placeholder.
@@ -445,67 +407,42 @@ Setting global scope to `'Defer'` enables per-block control. We then disable mov
 We persist the template in two formats: a lightweight string for CDN-hosted assets and a self-contained archive with embedded assets.
 
 ```typescript highlight=highlight-save-template
-// Register button component for saving template as string
-cesdk.ui.registerComponent('save.string', ({ builder }) => {
-  builder.Button('save-string-btn', {
-    label: 'Save String',
-    icon: '@imgly/Download',
-    variant: 'regular',
-    onClick: async () => {
-      const templateString = await engine.scene.saveToString();
-      console.log(
-        'Template saved as string:',
-        templateString.substring(0, 100) + '...'
-      );
-      // Download the string as a file
-      const blob = new Blob([templateString], { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = 'template.scene';
-      link.click();
-      URL.revokeObjectURL(url);
-    }
+// Prompt utility for interactive save options
+function prompt(question: string): Promise<string> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
   });
-});
 
-// Register button component for saving template as archive
-cesdk.ui.registerComponent('save.archive', ({ builder }) => {
-  builder.Button('save-archive-btn', {
-    label: 'Save Archive',
-    icon: '@imgly/Download',
-    variant: 'regular',
-    onClick: async () => {
-      const templateArchive = await engine.scene.saveToArchive();
-      console.log('Template saved as archive:', templateArchive.size, 'bytes');
-      // Download the archive as a file
-      const url = URL.createObjectURL(templateArchive);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = 'template.zip';
-      link.click();
-      URL.revokeObjectURL(url);
-    }
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
   });
-});
+}
 
-// Add role toggle and save buttons to the navigation bar
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  'role.toggle'
-);
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  'save.string'
-);
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  'save.archive'
-);
+async function main() {
+  // Display save options menu
+  console.log('=== Template Save Options ===\n');
+  console.log('1. Save as string (for CDN-hosted assets)');
+  console.log('2. Save as archive (self-contained ZIP)');
+  console.log('3. Export as PNG image');
+  console.log('4. Save all formats and export png\n');
+
+  const choice = (await prompt('Select save option (1-4): ')) || '4';
 ```
 
 The `engine.scene.saveToString()` method creates a compact string format suitable for storage when assets are hosted externally. The `engine.scene.saveToArchive()` method creates a ZIP bundle containing all assets, ideal for offline use or distribution.
 
+## Cleanup
+
+We dispose of the engine to release resources when processing is complete.
+
+```typescript highlight=highlight-cleanup
+engine.dispose();
+```
+
 ## Troubleshooting
 
 - **Blocks not appearing**: Verify that `engine.block.appendChild()` attaches blocks to the page. Blocks must be part of the scene hierarchy to render.
@@ -515,31 +452,31 @@ The `engine.scene.saveToString()` method creates a compact string format suitabl
 
 ## API Reference
 
-| Method                                                | Description                                       |
-| ----------------------------------------------------- | ------------------------------------------------- |
-| `engine.scene.create()`                               | Create a new design scene with optional page size |
-| `engine.scene.setDesignUnit()`                        | Set the design unit (Pixel, Millimeter, Inch)     |
-| `engine.scene.saveToString()`                         | Save scene to string format                       |
-| `engine.scene.saveToArchive()`                        | Save scene to ZIP archive                         |
-| `engine.block.create()`                               | Create a design block (page, text, graphic)       |
-| `engine.block.appendChild()`                          | Append a child block to a parent                  |
-| `engine.block.findByType()`                           | Find blocks by their type                         |
-| `engine.block.createFill()`                           | Create a fill (color, image, etc.)                |
-| `engine.block.setFill()`                              | Assign a fill to a block                          |
-| `engine.block.getFill()`                              | Get the fill of a block                           |
-| `engine.block.createShape()`                          | Create a shape (rect, ellipse, etc.)              |
-| `engine.block.setShape()`                             | Assign a shape to a graphic block                 |
-| `engine.block.setString()`                            | Set a string property on a block                  |
-| `engine.block.setColor()`                             | Set a color property                              |
-| `engine.block.replaceText()`                          | Set text content                                  |
-| `engine.block.setFont()`                              | Set font with typeface                            |
-| `engine.block.setPlaceholderBehaviorEnabled()`        | Enable placeholder behavior on fill               |
-| `engine.block.setPlaceholderEnabled()`                | Enable placeholder interaction on block           |
-| `engine.block.setPlaceholderControlsOverlayEnabled()` | Enable overlay visual control                     |
-| `engine.block.setPlaceholderControlsButtonEnabled()`  | Enable button visual control                      |
-| `engine.variable.setString()`                         | Set a text variable value                         |
-| `engine.editor.setGlobalScope()`                      | Set global scope permission                       |
-| `engine.block.setScopeEnabled()`                      | Enable/disable scope on a block                   |
+| Method | Description |
+| --- | --- |
+| `engine.scene.create()` | Create a new design scene with optional page size |
+| `engine.scene.setDesignUnit()` | Set the design unit (Pixel, Millimeter, Inch) |
+| `engine.scene.saveToString()` | Save scene to string format |
+| `engine.scene.saveToArchive()` | Save scene to ZIP archive |
+| `engine.block.create()` | Create a design block (page, text, graphic) |
+| `engine.block.appendChild()` | Append a child block to a parent |
+| `engine.block.findByType()` | Find blocks by their type |
+| `engine.block.createFill()` | Create a fill (color, image, etc.) |
+| `engine.block.setFill()` | Assign a fill to a block |
+| `engine.block.getFill()` | Get the fill of a block |
+| `engine.block.createShape()` | Create a shape (rect, ellipse, etc.) |
+| `engine.block.setShape()` | Assign a shape to a graphic block |
+| `engine.block.setString()` | Set a string property on a block |
+| `engine.block.setColor()` | Set a color property |
+| `engine.block.replaceText()` | Set text content |
+| `engine.block.setFont()` | Set font with typeface |
+| `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior on fill |
+| `engine.block.setPlaceholderEnabled()` | Enable placeholder interaction on block |
+| `engine.block.setPlaceholderControlsOverlayEnabled()` | Enable overlay visual control |
+| `engine.block.setPlaceholderControlsButtonEnabled()` | Enable button visual control |
+| `engine.variable.setString()` | Set a text variable value |
+| `engine.editor.setGlobalScope()` | Set global scope permission |
+| `engine.block.setScopeEnabled()` | Enable/disable scope on a block |
 
 ## Next Steps
 
@@ -548,11 +485,13 @@ The `engine.scene.saveToString()` method creates a compact string format suitabl
 - [Set Editing Constraints](./create-templates/add-dynamic-content/set-editing-constraints.md) - Lock layout properties to protect design integrity
 - [Add to Template Library](./create-templates/add-to-template-library.md) - Register templates in the asset library for users to discover
 
+
+
 ---
 
 ## 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