@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/edit-image/transform/flip.md

@@ -0,0 +1,353 @@
+> 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 Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Flip](./edit-image/transform/flip.md)
+
+---
+
+Flip images horizontally and vertically in CE.SDK for headless server-side processing. Mirror images for orientation correction, reflection effects, and batch operations.
+
+> **Reading time:** 8 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-edit-image-transform-flip-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-flip-server-js)
+
+Flipping mirrors content along horizontal or vertical axes. Use flip operations for orientation correction, creating reflection effects, and adapting layouts.
+
+```typescript file=@cesdk_web_examples/guides-edit-image-transform-flip-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
+
+async function flipImagesExample() {
+  let engine: CreativeEngine | null = null;
+
+  try {
+    // Initialize headless engine for programmatic creation
+    engine = await CreativeEngine.init({
+      baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+      // license: process.env.CESDK_LICENSE,
+    });
+
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
+
+    // Demo 1: Original image (no flip)
+    const originalImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 150, height: 150 }
+      }
+    );
+    engine.block.appendChild(page, originalImage);
+    engine.block.setPositionX(originalImage, 50);
+    engine.block.setPositionY(originalImage, 50);
+
+    const text1 = engine.block.create('text');
+    engine.block.setString(text1, 'text/text', 'Original');
+    engine.block.setFloat(text1, 'text/fontSize', 24);
+    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text1, 150);
+    engine.block.setPositionX(text1, 50);
+    engine.block.setPositionY(text1, 210);
+    engine.block.appendChild(page, text1);
+
+    // Demo 2: Horizontal flip
+    const horizontalFlipImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 150, height: 150 }
+      }
+    );
+    engine.block.appendChild(page, horizontalFlipImage);
+    engine.block.setPositionX(horizontalFlipImage, 225);
+    engine.block.setPositionY(horizontalFlipImage, 50);
+
+    // Flip the block horizontally (mirrors left to right)
+    engine.block.setFlipHorizontal(horizontalFlipImage, true);
+
+    const text2 = engine.block.create('text');
+    engine.block.setString(text2, 'text/text', 'Horizontal');
+    engine.block.setFloat(text2, 'text/fontSize', 24);
+    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text2, 150);
+    engine.block.setPositionX(text2, 225);
+    engine.block.setPositionY(text2, 210);
+    engine.block.appendChild(page, text2);
+
+    // Demo 3: Vertical flip
+    const verticalFlipImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 150, height: 150 }
+      }
+    );
+    engine.block.appendChild(page, verticalFlipImage);
+    engine.block.setPositionX(verticalFlipImage, 400);
+    engine.block.setPositionY(verticalFlipImage, 50);
+
+    // Flip the block vertically (mirrors top to bottom)
+    engine.block.setFlipVertical(verticalFlipImage, true);
+
+    const text3 = engine.block.create('text');
+    engine.block.setString(text3, 'text/text', 'Vertical');
+    engine.block.setFloat(text3, 'text/fontSize', 24);
+    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text3, 150);
+    engine.block.setPositionX(text3, 400);
+    engine.block.setPositionY(text3, 210);
+    engine.block.appendChild(page, text3);
+
+    // Demo 4: Both flips combined
+    const bothFlipImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 150, height: 150 }
+      }
+    );
+    engine.block.appendChild(page, bothFlipImage);
+    engine.block.setPositionX(bothFlipImage, 575);
+    engine.block.setPositionY(bothFlipImage, 50);
+
+    // Combine horizontal and vertical flips
+    engine.block.setFlipHorizontal(bothFlipImage, true);
+    engine.block.setFlipVertical(bothFlipImage, true);
+
+    const text4 = engine.block.create('text');
+    engine.block.setString(text4, 'text/text', 'Both');
+    engine.block.setFloat(text4, 'text/fontSize', 24);
+    engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text4, 150);
+    engine.block.setPositionX(text4, 575);
+    engine.block.setPositionY(text4, 210);
+    engine.block.appendChild(page, text4);
+
+    // Demo 5: Crop flip (flips content within the crop frame)
+    const cropFlipImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 150, height: 150 }
+      }
+    );
+    engine.block.appendChild(page, cropFlipImage);
+    engine.block.setPositionX(cropFlipImage, 225);
+    engine.block.setPositionY(cropFlipImage, 280);
+
+    // Flip the content within the crop frame (not the block itself)
+    engine.block.flipCropHorizontal(cropFlipImage);
+
+    const text5 = engine.block.create('text');
+    engine.block.setString(text5, 'text/text', 'Crop Flip');
+    engine.block.setFloat(text5, 'text/fontSize', 24);
+    engine.block.setEnum(text5, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text5, 150);
+    engine.block.setPositionX(text5, 225);
+    engine.block.setPositionY(text5, 440);
+    engine.block.appendChild(page, text5);
+
+    // Get current flip state
+    const isFlippedH = engine.block.getFlipHorizontal(horizontalFlipImage);
+    const isFlippedV = engine.block.getFlipVertical(verticalFlipImage);
+    console.log(`Horizontal flip state: ${isFlippedH}`);
+    console.log(`Vertical flip state: ${isFlippedV}`);
+
+    // Toggle flip by reading current state and setting opposite
+    const currentFlip = engine.block.getFlipHorizontal(originalImage);
+    engine.block.setFlipHorizontal(originalImage, !currentFlip);
+    // Toggle back for demo purposes
+    engine.block.setFlipHorizontal(originalImage, currentFlip);
+
+    // Export the result as PNG
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync('flip-images-output.png', buffer);
+    console.log('Successfully exported flip-images-output.png');
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  } finally {
+    // Always dispose the engine to free resources
+    if (engine) {
+      engine.dispose();
+    }
+  }
+}
+
+// Run the example
+flipImagesExample();
+```
+
+This guide covers flipping images horizontally and vertically, understanding the difference between block flip and crop flip, querying flip state, and applying flips to multiple blocks.
+
+## Initialize Headless Engine
+
+Create a headless engine instance for programmatic manipulation:
+
+```typescript highlight=highlight-setup
+// Initialize headless engine for programmatic creation
+engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
+});
+```
+
+## Create Scene
+
+Create a scene and page to hold the images:
+
+```typescript highlight=highlight-create-scene
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
+```
+
+## Flip Types
+
+CE.SDK provides two types of flip operations:
+
+- **Block flip**: Mirrors the entire block including its position context. Use `setFlipHorizontal()` and `setFlipVertical()`.
+- **Crop flip**: Mirrors only the image content within its crop frame. Use `flipCropHorizontal()` and `flipCropVertical()`.
+
+## Flip Horizontally
+
+Mirror an image along its vertical axis using `engine.block.setFlipHorizontal()`. This swaps the left and right sides:
+
+```typescript highlight=highlight-flip-horizontal
+// Flip the block horizontally (mirrors left to right)
+engine.block.setFlipHorizontal(horizontalFlipImage, true);
+```
+
+## Flip Vertically
+
+Mirror an image along its horizontal axis using `engine.block.setFlipVertical()`. This swaps the top and bottom:
+
+```typescript highlight=highlight-flip-vertical
+// Flip the block vertically (mirrors top to bottom)
+engine.block.setFlipVertical(verticalFlipImage, true);
+```
+
+## Combine Flips
+
+Apply both horizontal and vertical flips to rotate an image 180 degrees:
+
+```typescript highlight=highlight-flip-both
+// Combine horizontal and vertical flips
+engine.block.setFlipHorizontal(bothFlipImage, true);
+engine.block.setFlipVertical(bothFlipImage, true);
+```
+
+## Flip Content Within Crop Frame
+
+Flip image content without affecting the block's position using `engine.block.flipCropHorizontal()` and `engine.block.flipCropVertical()`. These methods toggle the flip state each time they are called:
+
+```typescript highlight=highlight-flip-crop
+// Flip the content within the crop frame (not the block itself)
+engine.block.flipCropHorizontal(cropFlipImage);
+```
+
+## Get Current Flip State
+
+Query the current flip state using `engine.block.getFlipHorizontal()` and `engine.block.getFlipVertical()`:
+
+```typescript highlight=highlight-get-flip-state
+// Get current flip state
+const isFlippedH = engine.block.getFlipHorizontal(horizontalFlipImage);
+const isFlippedV = engine.block.getFlipVertical(verticalFlipImage);
+console.log(`Horizontal flip state: ${isFlippedH}`);
+console.log(`Vertical flip state: ${isFlippedV}`);
+```
+
+## Toggle Flip State
+
+Toggle a flip by reading the current state and setting the opposite value:
+
+```typescript highlight=highlight-toggle-flip
+// Toggle flip by reading current state and setting opposite
+const currentFlip = engine.block.getFlipHorizontal(originalImage);
+engine.block.setFlipHorizontal(originalImage, !currentFlip);
+// Toggle back for demo purposes
+engine.block.setFlipHorizontal(originalImage, currentFlip);
+```
+
+## Export Result
+
+Export the scene as a PNG file:
+
+```typescript highlight=highlight-export
+// Export the result as PNG
+const blob = await engine.block.export(page, { mimeType: 'image/png' });
+const buffer = Buffer.from(await blob.arrayBuffer());
+writeFileSync('flip-images-output.png', buffer);
+console.log('Successfully exported flip-images-output.png');
+```
+
+## Cleanup
+
+Dispose the engine to free resources:
+
+```typescript highlight=highlight-cleanup
+// Always dispose the engine to free resources
+if (engine) {
+  engine.dispose();
+}
+```
+
+## Troubleshooting
+
+### Flip Has No Visual Effect
+
+Ensure the block is appended to a page and the scene is loaded before applying flip. Verify the block exists using `engine.block.isValid()`.
+
+### Content Appears in Wrong Position
+
+Check whether you need block flip or crop flip for your use case. Block flip mirrors the entire element, while crop flip mirrors only the content within the frame.
+
+### Engine Keeps Running
+
+Call `engine.dispose()` in a finally block to ensure resources are freed even if errors occur.
+
+## API Reference
+
+| Method                              | Description                                     |
+| ----------------------------------- | ----------------------------------------------- |
+| `CreativeEngine.init()`             | Initialize the headless engine                  |
+| `engine.scene.create()`             | Create a new scene                              |
+| `engine.block.create()`             | Create a block of specified type                |
+| `engine.block.addImage()`           | Add an image block                              |
+| `engine.block.setFlipHorizontal()`  | Set horizontal flip state                       |
+| `engine.block.setFlipVertical()`    | Set vertical flip state                         |
+| `engine.block.getFlipHorizontal()`  | Get horizontal flip state                       |
+| `engine.block.getFlipVertical()`    | Get vertical flip state                         |
+| `engine.block.flipCropHorizontal()` | Flip content horizontally within crop frame     |
+| `engine.block.flipCropVertical()`   | Flip content vertically within crop frame       |
+| `engine.block.export()`             | Export block as image                           |
+| `engine.dispose()`                  | Dispose engine and free resources               |
+
+
+
+---
+
+## More Resources
+
+- **[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](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/edit-image/transform/move.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 Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Move](./edit-image/transform/move.md)
 
@@ -6,86 +6,44 @@
 
 Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.
 
-![Move images example showing positioned images with labels](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 8 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-edit-image-transform-move-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-move-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-move-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-move-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-move-server-js)
 
 Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts.
 
-```typescript file=@cesdk_web_examples/guides-edit-image-transform-move-browser/browser.ts reference-only
-import CreativeEditorSDK, {
-  type EditorPlugin,
-  type 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';
-
-class Example implements EditorPlugin {
-  name = 'guides-edit-image-transform-move-browser';
-
-  version = CreativeEditorSDK.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: 500, unit: 'Pixel' }
+```typescript file=@cesdk_web_examples/guides-edit-image-transform-move-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
+
+async function moveImagesExample() {
+  let engine: CreativeEngine | null = null;
+
+  try {
+    // Initialize headless engine for programmatic creation
+    engine = await CreativeEngine.init({
+      baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+      // license: process.env.CESDK_LICENSE,
     });
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
 
     // Demo 1: Movable Image - Can be freely repositioned by user
     const movableImage = await engine.block.addImage(
@@ -95,8 +53,8 @@ class Example implements EditorPlugin {
       }
     );
     engine.block.appendChild(page, movableImage);
-    engine.block.setPositionX(movableImage, 0);
-    engine.block.setPositionY(movableImage, 100);
+    engine.block.setPositionX(movableImage, 50);
+    engine.block.setPositionY(movableImage, 150);
 
     const text1 = engine.block.create('text');
     engine.block.setString(text1, 'text/text', 'Movable');
@@ -162,18 +120,65 @@ class Example implements EditorPlugin {
     console.log('Current position:', currentX, currentY);
 
     // Move relative to current position
-    const offsetX = engine.block.getPositionX(movableImage);
-    const offsetY = engine.block.getPositionY(movableImage);
-    engine.block.setPositionX(movableImage, offsetX + 50);
-    engine.block.setPositionY(movableImage, offsetY + 50);
+    // const offsetX = engine.block.getPositionX(movableImage);
+    // const offsetY = engine.block.getPositionY(movableImage);
+    // engine.block.setPositionX(movableImage, offsetX + 50);
+    // engine.block.setPositionY(movableImage, offsetY + 50);
+
+    // Save the scene for later use or rendering
+    const sceneString = await engine.scene.saveToString();
+
+    // Ensure output directory exists
+    if (!existsSync('output')) {
+      mkdirSync('output');
+    }
+
+    writeFileSync('output/move-images-scene.json', sceneString);
+    console.log('Saved to output/move-images-scene.json');
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  } finally {
+    // Always dispose the engine to free resources
+    if (engine) {
+      engine.dispose();
+    }
   }
 }
 
-export default Example;
+// Run the example
+moveImagesExample();
 ```
 
 This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning.
 
+## Initialize Headless Engine
+
+Create a headless engine instance for programmatic creation and manipulation of designs:
+
+```typescript highlight-setup
+// Initialize headless engine for programmatic creation
+engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
+});
+```
+
+## Create Scene
+
+Create a new scene and page to hold the positioned images:
+
+```typescript highlight-create-scene
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
+```
+
 ## Position Coordinates
 
 Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes.
@@ -184,8 +189,8 @@ Position images using `engine.block.setPositionX()` and `engine.block.setPositio
 
 ```typescript highlight-movable-image
 engine.block.appendChild(page, movableImage);
-engine.block.setPositionX(movableImage, 0);
-engine.block.setPositionY(movableImage, 100);
+engine.block.setPositionX(movableImage, 50);
+engine.block.setPositionY(movableImage, 150);
 ```
 
 ## Getting Current Position
@@ -220,10 +225,10 @@ Move images relative to their current position by getting the current coordinate
 
 ```typescript highlight-relative-positioning
 // Move relative to current position
-const offsetX = engine.block.getPositionX(movableImage);
-const offsetY = engine.block.getPositionY(movableImage);
-engine.block.setPositionX(movableImage, offsetX + 50);
-engine.block.setPositionY(movableImage, offsetY + 50);
+// const offsetX = engine.block.getPositionX(movableImage);
+// const offsetY = engine.block.getPositionY(movableImage);
+// engine.block.setPositionX(movableImage, offsetX + 50);
+// engine.block.setPositionY(movableImage, offsetY + 50);
 ```
 
 ## Locking Transforms
@@ -235,6 +240,34 @@ Lock transforms to prevent repositioning, rotation, and scaling by setting `tran
 engine.block.setBool(lockedImage, 'transformLocked', true);
 ```
 
+## Save Scene
+
+Save the scene to a file for later use or rendering:
+
+```typescript highlight-export
+    // Save the scene for later use or rendering
+    const sceneString = await engine.scene.saveToString();
+
+    // Ensure output directory exists
+    if (!existsSync('output')) {
+      mkdirSync('output');
+    }
+
+    writeFileSync('output/move-images-scene.json', sceneString);
+    console.log('Saved to output/move-images-scene.json');
+```
+
+## Cleanup
+
+Always dispose the engine to free resources when done:
+
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+if (engine) {
+  engine.dispose();
+}
+```
+
 ## Troubleshooting
 
 ### Image Not Moving
@@ -255,25 +288,35 @@ Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(
 
 ## API Reference
 
-| Method                            | Description                                |
-| --------------------------------- | ------------------------------------------ |
-| `engine.block.addImage()`         | Create and position image in one operation |
-| `engine.block.setPositionX()`     | Set X coordinate value                     |
-| `engine.block.setPositionY()`     | Set Y coordinate value                     |
-| `engine.block.getPositionX()`     | Get current X coordinate value             |
-| `engine.block.getPositionY()`     | Get current Y coordinate value             |
-| `engine.block.setPositionXMode()` | Set position mode for X coordinate         |
-| `engine.block.setPositionYMode()` | Set position mode for Y coordinate         |
-| `engine.block.getPositionXMode()` | Get position mode for X coordinate         |
-| `engine.block.getPositionYMode()` | Get position mode for Y coordinate         |
-| `engine.block.setBool()`          | Set transform lock state                   |
-| `engine.block.getBool()`          | Get transform lock state                   |
+| Method                         | Description                                               |
+| ------------------------------ | --------------------------------------------------------- |
+| `CreativeEngine.init()`        | Initializes the headless engine for programmatic creation |
+| `engine.scene.create()`        | Creates a new scene programmatically                      |
+| `engine.block.create()`        | Creates a new block of the specified type                 |
+| `engine.block.setWidth()`      | Sets the width of a block                                 |
+| `engine.block.setHeight()`     | Sets the height of a block                                |
+| `engine.block.appendChild()`   | Adds a block as a child of another block                  |
+| `engine.block.addImage()`      | Create and position image in one operation                |
+| `engine.block.setPositionX()`  | Set X coordinate value                                    |
+| `engine.block.setPositionY()`  | Set Y coordinate value                                    |
+| `engine.block.getPositionX()`  | Get current X coordinate value                            |
+| `engine.block.getPositionY()`  | Get current Y coordinate value                            |
+| `engine.block.setPositionXMode()` | Set position mode for X coordinate                     |
+| `engine.block.setPositionYMode()` | Set position mode for Y coordinate                     |
+| `engine.block.getPositionXMode()` | Get position mode for X coordinate                     |
+| `engine.block.getPositionYMode()` | Get position mode for Y coordinate                     |
+| `engine.block.setBool()`       | Set transform lock state                                  |
+| `engine.block.getBool()`       | Get transform lock state                                  |
+| `engine.scene.saveToString()`  | Save scene to string for later use                        |
+| `engine.dispose()`             | Dispose engine and free resources                         |
+
+
 
 ---
 
 ## 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