@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/edit-image/replace-colors.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) > [Replace Colors](./edit-image/replace-colors.md)
 
@@ -6,327 +6,252 @@
 
 Transform images by swapping specific colors using the Recolor effect or remove backgrounds with the Green Screen effect in CE.SDK.
 
-![Replace Colors example showing color replacement and background removal](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-replace-colors-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-replace-colors-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-replace-colors-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-replace-colors-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-replace-colors-server-js)
 
 CE.SDK offers two color replacement effects. The **Recolor** effect swaps one color for another while preserving image details. The **Green Screen** effect removes background colors with transparency. Both effects provide precise control over color matching, edge smoothness, and intensity.
 
-```typescript file=@cesdk_web_examples/guides-edit-image-replace-colors-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-edit-image-replace-colors-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
 import { calculateGridLayout } from './utils';
 
+// Load environment variables
+config();
+
 /**
- * CE.SDK Plugin: Replace Colors Guide
+ * CE.SDK Server Guide: Replace Colors
  *
  * Demonstrates color replacement using Recolor and Green Screen effects:
- * - Using the built-in effects UI
  * - Creating and applying Recolor effects
  * - Creating and applying Green Screen effects
  * - Configuring effect properties
  * - Managing multiple effects
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
 
-  version = packageJson.version;
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
+});
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+try {
+  // Create a design scene with specific page dimensions
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } },
+  });
+  const page = engine.block.findByType('page')[0];
+
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+
+  // Calculate responsive grid layout for 6 examples
+  const layout = calculateGridLayout(pageWidth, pageHeight, 6);
+  const { blockWidth, blockHeight, getPosition } = layout;
+
+  // Use sample images for demonstrations
+  const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  const blockSize = { width: blockWidth, height: blockHeight };
+
+  // Create a Recolor effect to swap red colors to blue
+  const block1 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block1);
+
+  const recolorEffect = engine.block.createEffect('recolor');
+  engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', {
+    r: 1.0,
+    g: 0.0,
+    b: 0.0,
+    a: 1.0,
+  }); // Red source color
+  engine.block.setColor(recolorEffect, 'effect/recolor/toColor', {
+    r: 0.0,
+    g: 0.5,
+    b: 1.0,
+    a: 1.0,
+  }); // Blue target color
+  engine.block.appendEffect(block1, recolorEffect);
+
+  // Configure color matching precision for Recolor effect
+  const block2 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block2);
+
+  const recolorEffect2 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', {
+    r: 0.8,
+    g: 0.6,
+    b: 0.4,
+    a: 1.0,
+  }); // Skin tone source
+  engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', {
+    r: 0.3,
+    g: 0.7,
+    b: 0.3,
+    a: 1.0,
+  }); // Green tint
+  // Adjust color match tolerance (0-1, higher = more inclusive)
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3);
+  // Adjust brightness match tolerance
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/brightnessMatch', 0.2);
+  // Adjust edge smoothness
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1);
+  engine.block.appendEffect(block2, recolorEffect2);
+
+  // Create a Green Screen effect to remove green backgrounds
+  const block3 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block3);
+
+  const greenScreenEffect = engine.block.createEffect('green_screen');
+  // Specify the color to remove (green)
+  engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', {
+    r: 0.0,
+    g: 1.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block3, greenScreenEffect);
+
+  // Fine-tune Green Screen removal parameters
+  const block4 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block4);
+
+  const greenScreenEffect2 = engine.block.createEffect('green_screen');
+  engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', {
+    r: 0.2,
+    g: 0.8,
+    b: 0.3,
+    a: 1.0,
+  }); // Specific green shade
+  // Adjust color match tolerance
+  engine.block.setFloat(
+    greenScreenEffect2,
+    'effect/green_screen/colorMatch',
+    0.4
+  );
+  // Adjust edge smoothness for cleaner removal
+  engine.block.setFloat(
+    greenScreenEffect2,
+    'effect/green_screen/smoothness',
+    0.2
+  );
+  // Reduce color spill from green background
+  engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5);
+  engine.block.appendEffect(block4, greenScreenEffect2);
+
+  // Demonstrate managing multiple effects on a block
+  const block5 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block5);
+
+  // Add multiple effects to the same block
+  const recolor1 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolor1, 'effect/recolor/fromColor', {
+    r: 1.0,
+    g: 0.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setColor(recolor1, 'effect/recolor/toColor', {
+    r: 0.0,
+    g: 0.0,
+    b: 1.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block5, recolor1);
+
+  const recolor2 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolor2, 'effect/recolor/fromColor', {
+    r: 0.0,
+    g: 1.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setColor(recolor2, 'effect/recolor/toColor', {
+    r: 1.0,
+    g: 0.5,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block5, recolor2);
 
-    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' }
-    });
+  // Get all effects on the block
+  const effects = engine.block.getEffects(block5);
+  // eslint-disable-next-line no-console
+  console.log('Number of effects:', effects.length); // 2
+
+  // Disable the first effect without removing it
+  engine.block.setEffectEnabled(effects[0], false);
+
+  // Check if effect is enabled
+  const isEnabled = engine.block.isEffectEnabled(effects[0]);
+  // eslint-disable-next-line no-console
+  console.log('First effect enabled:', isEnabled); // false
+
+  // Apply consistent color replacement across multiple blocks
+  const block6 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block6);
+
+  // Find all image blocks in the scene
+  const allBlocks = engine.block.findByType('//ly.img.ubq/graphic');
+
+  // Apply a consistent recolor effect to each block
+  allBlocks.forEach((blockId) => {
+    // Skip if block already has effects
+    if (engine.block.getEffects(blockId).length > 0) {
+      return;
+    }
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
-
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    // Enable effects in the inspector panel using the Feature API
-    cesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen
-
-    // Calculate responsive grid layout for 6 examples
-    const layout = calculateGridLayout(pageWidth, pageHeight, 6);
-    const { blockWidth, blockHeight, getPosition } = layout;
-
-    // Use sample images for demonstrations
-    const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
-    const blockSize = { width: blockWidth, height: blockHeight };
-
-    // Create a Recolor effect to swap red colors to blue
-    const block1 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block1);
-
-    const recolorEffect = engine.block.createEffect('recolor');
-    engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', {
-      r: 1.0,
-      g: 0.0,
-      b: 0.0,
-      a: 1.0
-    }); // Red source color
-    engine.block.setColor(recolorEffect, 'effect/recolor/toColor', {
-      r: 0.0,
-      g: 0.5,
-      b: 1.0,
-      a: 1.0
-    }); // Blue target color
-    engine.block.appendEffect(block1, recolorEffect);
-
-    // Select this block to show the effects panel
-    engine.block.setSelected(block1, true);
-
-    // Configure color matching precision for Recolor effect
-    const block2 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block2);
-
-    const recolorEffect2 = engine.block.createEffect('recolor');
-    engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', {
+    const batchRecolor = engine.block.createEffect('recolor');
+    engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', {
       r: 0.8,
-      g: 0.6,
-      b: 0.4,
-      a: 1.0
-    }); // Skin tone source
-    engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', {
-      r: 0.3,
       g: 0.7,
-      b: 0.3,
-      a: 1.0
-    }); // Green tint
-    // Adjust color match tolerance (0-1, higher = more inclusive)
-    engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3);
-    // Adjust brightness match tolerance
-    engine.block.setFloat(
-      recolorEffect2,
-      'effect/recolor/brightnessMatch',
-      0.2
-    );
-    // Adjust edge smoothness
-    engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1);
-    engine.block.appendEffect(block2, recolorEffect2);
-
-    // Create a Green Screen effect to remove green backgrounds
-    const block3 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block3);
-
-    const greenScreenEffect = engine.block.createEffect('green_screen');
-    // Specify the color to remove (green)
-    engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', {
-      r: 0.0,
-      g: 1.0,
-      b: 0.0,
-      a: 1.0
+      b: 0.6,
+      a: 1.0,
     });
-    engine.block.appendEffect(block3, greenScreenEffect);
-
-    // Fine-tune Green Screen removal parameters
-    const block4 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block4);
-
-    const greenScreenEffect2 = engine.block.createEffect('green_screen');
-    engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', {
-      r: 0.2,
-      g: 0.8,
-      b: 0.3,
-      a: 1.0
-    }); // Specific green shade
-    // Adjust color match tolerance
-    engine.block.setFloat(
-      greenScreenEffect2,
-      'effect/green_screen/colorMatch',
-      0.4
-    );
-    // Adjust edge smoothness for cleaner removal
-    engine.block.setFloat(
-      greenScreenEffect2,
-      'effect/green_screen/smoothness',
-      0.2
-    );
-    // Reduce color spill from green background
-    engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5);
-    engine.block.appendEffect(block4, greenScreenEffect2);
-
-    // Demonstrate managing multiple effects on a block
-    const block5 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block5);
-
-    // Add multiple effects to the same block
-    const recolor1 = engine.block.createEffect('recolor');
-    engine.block.setColor(recolor1, 'effect/recolor/fromColor', {
-      r: 1.0,
-      g: 0.0,
-      b: 0.0,
-      a: 1.0
-    });
-    engine.block.setColor(recolor1, 'effect/recolor/toColor', {
-      r: 0.0,
-      g: 0.0,
-      b: 1.0,
-      a: 1.0
-    });
-    engine.block.appendEffect(block5, recolor1);
-
-    const recolor2 = engine.block.createEffect('recolor');
-    engine.block.setColor(recolor2, 'effect/recolor/fromColor', {
-      r: 0.0,
-      g: 1.0,
-      b: 0.0,
-      a: 1.0
-    });
-    engine.block.setColor(recolor2, 'effect/recolor/toColor', {
-      r: 1.0,
-      g: 0.5,
-      b: 0.0,
-      a: 1.0
-    });
-    engine.block.appendEffect(block5, recolor2);
-
-    // Get all effects on the block
-    const effects = engine.block.getEffects(block5);
-    // eslint-disable-next-line no-console
-    console.log('Number of effects:', effects.length); // 2
-
-    // Disable the first effect without removing it
-    engine.block.setEffectEnabled(effects[0], false);
-
-    // Check if effect is enabled
-    const isEnabled = engine.block.isEffectEnabled(effects[0]);
-    // eslint-disable-next-line no-console
-    console.log('First effect enabled:', isEnabled); // false
-
-    // Apply consistent color replacement across multiple blocks
-    const block6 = await engine.block.addImage(imageUri, { size: blockSize });
-    engine.block.appendChild(page, block6);
-
-    // Find all image blocks in the scene
-    const allBlocks = engine.block.findByType('//ly.img.ubq/graphic');
-
-    // Apply a consistent recolor effect to each block
-    allBlocks.forEach((blockId) => {
-      // Skip if block already has effects
-      if (engine.block.getEffects(blockId).length > 0) {
-        return;
-      }
-
-      const batchRecolor = engine.block.createEffect('recolor');
-      engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', {
-        r: 0.8,
-        g: 0.7,
-        b: 0.6,
-        a: 1.0
-      });
-      engine.block.setColor(batchRecolor, 'effect/recolor/toColor', {
-        r: 0.6,
-        g: 0.7,
-        b: 0.9,
-        a: 1.0
-      });
-      engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25);
-      engine.block.appendEffect(blockId, batchRecolor);
+    engine.block.setColor(batchRecolor, 'effect/recolor/toColor', {
+      r: 0.6,
+      g: 0.7,
+      b: 0.9,
+      a: 1.0,
     });
+    engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25);
+    engine.block.appendEffect(blockId, batchRecolor);
+  });
 
-    // Position all blocks in a grid layout
-    const blocks = [block1, block2, block3, block4, block5, block6];
-    blocks.forEach((block, index) => {
-      const pos = getPosition(index);
-      engine.block.setPositionX(block, pos.x);
-      engine.block.setPositionY(block, pos.y);
-    });
+  // Position all blocks in a grid layout
+  const blocks = [block1, block2, block3, block4, block5, block6];
+  blocks.forEach((block, index) => {
+    const pos = getPosition(index);
+    engine.block.setPositionX(block, pos.x);
+    engine.block.setPositionY(block, pos.y);
+  });
 
-    // Zoom to show all blocks
-    engine.block.setSelected(block1, true);
-    cesdk.engine.scene.zoomToBlock(page);
+  // Export the result to PNG
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
   }
-}
-
-export default Example;
-```
-
-This guide shows how to enable the built-in effects UI for interactive color replacement and apply effects programmatically using the block API.
-
-## Using the Built-in Effects UI
 
-### Enable Effects Panel
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/replace-colors-result.png`, buffer);
 
-We enable the effects feature using CE.SDK's Feature API. The effects panel appears in the inspector when users select a compatible graphic block.
-
-```typescript highlight-enable-effects-panel
-// Enable effects in the inspector panel using the Feature API
-cesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen
+  // eslint-disable-next-line no-console
+  console.log('✓ Exported result to output/replace-colors-result.png');
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-Enabling `ly.img.effect` makes all effect options available in the inspector panel, including Recolor and Green Screen.
-
-### User Workflow
-
-With effects enabled, users can replace colors through the inspector panel:
-
-1. **Select an image block** - Click an image or graphic block on the canvas
-2. **Open inspector** - The inspector shows available options for the selected element
-3. **Find effects section** - Scroll to the effects section
-4. **Choose Recolor or Green Screen** - Click the desired effect
-5. **Select colors** - Use the color picker to specify source and target colors
-6. **Adjust parameters** - Fine-tune color matching, smoothness, and intensity
-7. **Toggle effects** - Enable or disable effects to compare results
-
-Users can experiment with color replacements and see results immediately.
+This guide shows how to apply color replacement effects programmatically using the engine API in a headless Node.js environment.
 
 ## Programmatic Color Replacement
 
@@ -335,74 +260,38 @@ Users can experiment with color replacements and see results immediately.
 To apply color replacement programmatically, we set up CE.SDK with the proper configuration.
 
 ```typescript 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' }
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
 });
-
-const engine = cesdk.engine;
-const page = engine.block.findByType('page')[0];
-
-const pageWidth = engine.block.getWidth(page);
-const pageHeight = engine.block.getHeight(page);
 ```
 
-This initializes CE.SDK with the effects panel enabled, providing both UI and API access.
+This initializes the CE.SDK engine in headless mode, ready to process images with color replacement effects.
 
 ### Creating and Applying Recolor Effects
 
 The Recolor effect swaps one color for another throughout an image. We create a Recolor effect using `engine.block.createEffect('recolor')` and specify the source and target colors.
 
 ```typescript highlight-create-recolor-effect
-// Create a Recolor effect to swap red colors to blue
-const block1 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block1);
-
-const recolorEffect = engine.block.createEffect('recolor');
-engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', {
-  r: 1.0,
-  g: 0.0,
-  b: 0.0,
-  a: 1.0
-}); // Red source color
-engine.block.setColor(recolorEffect, 'effect/recolor/toColor', {
-  r: 0.0,
-  g: 0.5,
-  b: 1.0,
-  a: 1.0
-}); // Blue target color
-engine.block.appendEffect(block1, recolorEffect);
-
-// Select this block to show the effects panel
-engine.block.setSelected(block1, true);
+  // Create a Recolor effect to swap red colors to blue
+  const block1 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block1);
+
+  const recolorEffect = engine.block.createEffect('recolor');
+  engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', {
+    r: 1.0,
+    g: 0.0,
+    b: 0.0,
+    a: 1.0,
+  }); // Red source color
+  engine.block.setColor(recolorEffect, 'effect/recolor/toColor', {
+    r: 0.0,
+    g: 0.5,
+    b: 1.0,
+    a: 1.0,
+  }); // Blue target color
+  engine.block.appendEffect(block1, recolorEffect);
 ```
 
 The Recolor effect identifies pixels matching the source color (fromColor) and replaces them with the target color (toColor). Color values use RGBA format with values from 0.0 to 1.0.
@@ -414,30 +303,30 @@ The Recolor effect identifies pixels matching the source color (fromColor) and r
 We adjust the matching tolerance and smoothness parameters to control how precisely colors must match before replacement.
 
 ```typescript highlight-configure-recolor-matching
-// Configure color matching precision for Recolor effect
-const block2 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block2);
-
-const recolorEffect2 = engine.block.createEffect('recolor');
-engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', {
-  r: 0.8,
-  g: 0.6,
-  b: 0.4,
-  a: 1.0
-}); // Skin tone source
-engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', {
-  r: 0.3,
-  g: 0.7,
-  b: 0.3,
-  a: 1.0
-}); // Green tint
-// Adjust color match tolerance (0-1, higher = more inclusive)
-engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3);
-// Adjust brightness match tolerance
-engine.block.setFloat(recolorEffect2, 'effect/recolor/brightnessMatch', 0.2);
-// Adjust edge smoothness
-engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1);
-engine.block.appendEffect(block2, recolorEffect2);
+  // Configure color matching precision for Recolor effect
+  const block2 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block2);
+
+  const recolorEffect2 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', {
+    r: 0.8,
+    g: 0.6,
+    b: 0.4,
+    a: 1.0,
+  }); // Skin tone source
+  engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', {
+    r: 0.3,
+    g: 0.7,
+    b: 0.3,
+    a: 1.0,
+  }); // Green tint
+  // Adjust color match tolerance (0-1, higher = more inclusive)
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3);
+  // Adjust brightness match tolerance
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/brightnessMatch', 0.2);
+  // Adjust edge smoothness
+  engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1);
+  engine.block.appendEffect(block2, recolorEffect2);
 ```
 
 The Recolor effect provides these parameters:
@@ -453,19 +342,19 @@ These parameters help handle images where colors vary due to lighting, shadows,
 The Green Screen effect removes backgrounds by making specific colors transparent.
 
 ```typescript highlight-create-green-screen-effect
-// Create a Green Screen effect to remove green backgrounds
-const block3 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block3);
-
-const greenScreenEffect = engine.block.createEffect('green_screen');
-// Specify the color to remove (green)
-engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', {
-  r: 0.0,
-  g: 1.0,
-  b: 0.0,
-  a: 1.0
-});
-engine.block.appendEffect(block3, greenScreenEffect);
+  // Create a Green Screen effect to remove green backgrounds
+  const block3 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block3);
+
+  const greenScreenEffect = engine.block.createEffect('green_screen');
+  // Specify the color to remove (green)
+  engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', {
+    r: 0.0,
+    g: 1.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block3, greenScreenEffect);
 ```
 
 The Green Screen effect identifies pixels matching the specified color (fromColor) and makes them transparent. This works best with solid-color backgrounds like green screens or blue screens.
@@ -475,32 +364,32 @@ The Green Screen effect identifies pixels matching the specified color (fromColo
 We adjust the color matching tolerance, edge smoothness, and spill suppression parameters.
 
 ```typescript highlight-configure-green-screen
-// Fine-tune Green Screen removal parameters
-const block4 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block4);
-
-const greenScreenEffect2 = engine.block.createEffect('green_screen');
-engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', {
-  r: 0.2,
-  g: 0.8,
-  b: 0.3,
-  a: 1.0
-}); // Specific green shade
-// Adjust color match tolerance
-engine.block.setFloat(
-  greenScreenEffect2,
-  'effect/green_screen/colorMatch',
-  0.4
-);
-// Adjust edge smoothness for cleaner removal
-engine.block.setFloat(
-  greenScreenEffect2,
-  'effect/green_screen/smoothness',
-  0.2
-);
-// Reduce color spill from green background
-engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5);
-engine.block.appendEffect(block4, greenScreenEffect2);
+  // Fine-tune Green Screen removal parameters
+  const block4 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block4);
+
+  const greenScreenEffect2 = engine.block.createEffect('green_screen');
+  engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', {
+    r: 0.2,
+    g: 0.8,
+    b: 0.3,
+    a: 1.0,
+  }); // Specific green shade
+  // Adjust color match tolerance
+  engine.block.setFloat(
+    greenScreenEffect2,
+    'effect/green_screen/colorMatch',
+    0.4
+  );
+  // Adjust edge smoothness for cleaner removal
+  engine.block.setFloat(
+    greenScreenEffect2,
+    'effect/green_screen/smoothness',
+    0.2
+  );
+  // Reduce color spill from green background
+  engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5);
+  engine.block.appendEffect(block4, greenScreenEffect2);
 ```
 
 The Green Screen effect provides these parameters:
@@ -516,53 +405,53 @@ These parameters help create clean composites without harsh edges or color artif
 We can apply multiple color replacement effects to the same block. CE.SDK maintains an effect stack for each block, applying effects in the order they were added.
 
 ```typescript highlight-manage-effects
-// Demonstrate managing multiple effects on a block
-const block5 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block5);
-
-// Add multiple effects to the same block
-const recolor1 = engine.block.createEffect('recolor');
-engine.block.setColor(recolor1, 'effect/recolor/fromColor', {
-  r: 1.0,
-  g: 0.0,
-  b: 0.0,
-  a: 1.0
-});
-engine.block.setColor(recolor1, 'effect/recolor/toColor', {
-  r: 0.0,
-  g: 0.0,
-  b: 1.0,
-  a: 1.0
-});
-engine.block.appendEffect(block5, recolor1);
-
-const recolor2 = engine.block.createEffect('recolor');
-engine.block.setColor(recolor2, 'effect/recolor/fromColor', {
-  r: 0.0,
-  g: 1.0,
-  b: 0.0,
-  a: 1.0
-});
-engine.block.setColor(recolor2, 'effect/recolor/toColor', {
-  r: 1.0,
-  g: 0.5,
-  b: 0.0,
-  a: 1.0
-});
-engine.block.appendEffect(block5, recolor2);
+  // Demonstrate managing multiple effects on a block
+  const block5 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block5);
+
+  // Add multiple effects to the same block
+  const recolor1 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolor1, 'effect/recolor/fromColor', {
+    r: 1.0,
+    g: 0.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setColor(recolor1, 'effect/recolor/toColor', {
+    r: 0.0,
+    g: 0.0,
+    b: 1.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block5, recolor1);
+
+  const recolor2 = engine.block.createEffect('recolor');
+  engine.block.setColor(recolor2, 'effect/recolor/fromColor', {
+    r: 0.0,
+    g: 1.0,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setColor(recolor2, 'effect/recolor/toColor', {
+    r: 1.0,
+    g: 0.5,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.appendEffect(block5, recolor2);
 
-// Get all effects on the block
-const effects = engine.block.getEffects(block5);
-// eslint-disable-next-line no-console
-console.log('Number of effects:', effects.length); // 2
+  // Get all effects on the block
+  const effects = engine.block.getEffects(block5);
+  // eslint-disable-next-line no-console
+  console.log('Number of effects:', effects.length); // 2
 
-// Disable the first effect without removing it
-engine.block.setEffectEnabled(effects[0], false);
+  // Disable the first effect without removing it
+  engine.block.setEffectEnabled(effects[0], false);
 
-// Check if effect is enabled
-const isEnabled = engine.block.isEffectEnabled(effects[0]);
-// eslint-disable-next-line no-console
-console.log('First effect enabled:', isEnabled); // false
+  // Check if effect is enabled
+  const isEnabled = engine.block.isEffectEnabled(effects[0]);
+  // eslint-disable-next-line no-console
+  console.log('First effect enabled:', isEnabled); // false
 ```
 
 Effect management capabilities:
@@ -579,36 +468,36 @@ Disabling effects is useful for before/after comparisons or performance optimiza
 We can loop through all image blocks in a scene and apply the same effect configuration to each.
 
 ```typescript highlight-batch-processing
-// Apply consistent color replacement across multiple blocks
-const block6 = await engine.block.addImage(imageUri, { size: blockSize });
-engine.block.appendChild(page, block6);
-
-// Find all image blocks in the scene
-const allBlocks = engine.block.findByType('//ly.img.ubq/graphic');
-
-// Apply a consistent recolor effect to each block
-allBlocks.forEach((blockId) => {
-  // Skip if block already has effects
-  if (engine.block.getEffects(blockId).length > 0) {
-    return;
-  }
+  // Apply consistent color replacement across multiple blocks
+  const block6 = await engine.block.addImage(imageUri, { size: blockSize });
+  engine.block.appendChild(page, block6);
+
+  // Find all image blocks in the scene
+  const allBlocks = engine.block.findByType('//ly.img.ubq/graphic');
+
+  // Apply a consistent recolor effect to each block
+  allBlocks.forEach((blockId) => {
+    // Skip if block already has effects
+    if (engine.block.getEffects(blockId).length > 0) {
+      return;
+    }
 
-  const batchRecolor = engine.block.createEffect('recolor');
-  engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', {
-    r: 0.8,
-    g: 0.7,
-    b: 0.6,
-    a: 1.0
-  });
-  engine.block.setColor(batchRecolor, 'effect/recolor/toColor', {
-    r: 0.6,
-    g: 0.7,
-    b: 0.9,
-    a: 1.0
+    const batchRecolor = engine.block.createEffect('recolor');
+    engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', {
+      r: 0.8,
+      g: 0.7,
+      b: 0.6,
+      a: 1.0,
+    });
+    engine.block.setColor(batchRecolor, 'effect/recolor/toColor', {
+      r: 0.6,
+      g: 0.7,
+      b: 0.9,
+      a: 1.0,
+    });
+    engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25);
+    engine.block.appendEffect(blockId, batchRecolor);
   });
-  engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25);
-  engine.block.appendEffect(blockId, batchRecolor);
-});
 ```
 
 Batch processing use cases:
@@ -619,6 +508,38 @@ Batch processing use cases:
 
 The `engine.block.findByType()` method locates all graphic blocks in the scene.
 
+## Exporting Results
+
+After applying color replacement effects, we export the final result to the file system.
+
+```typescript highlight-export
+  // Export the result to PNG
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/replace-colors-result.png`, buffer);
+
+  // eslint-disable-next-line no-console
+  console.log('✓ Exported result to output/replace-colors-result.png');
+```
+
+The `engine.block.export()` method renders the scene with all effects applied and returns a Blob. We convert this to a Buffer and save it as a PNG file.
+
+## Cleanup
+
+We must dispose the engine to free system resources when processing is complete.
+
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+engine.dispose();
+```
+
+Always use a try-finally block to ensure the engine is disposed even if errors occur during processing.
+
 ## Troubleshooting
 
 Common issues and solutions when working with color replacement effects:
@@ -649,32 +570,33 @@ Common issues and solutions when working with color replacement effects:
 
 ## API Reference
 
-| Method                            | Category | Purpose                                                     |
-| --------------------------------- | -------- | ----------------------------------------------------------- |
-| `engine.block.createEffect()`     | Block    | Create a new Recolor or Green Screen effect block           |
-| `engine.block.appendEffect()`     | Block    | Attach an effect to an image block                          |
-| `engine.block.insertEffect()`     | Block    | Insert an effect at a specific position in the effect stack |
-| `engine.block.removeEffect()`     | Block    | Remove an effect from a block by index                      |
-| `engine.block.getEffects()`       | Block    | Get all effects attached to a block                         |
-| `engine.block.supportsEffects()`  | Block    | Check if a block can render effects                         |
-| `engine.block.setColor()`         | Block    | Set color properties on effect blocks                       |
-| `engine.block.getColor()`         | Block    | Get color properties from effect blocks                     |
-| `engine.block.setFloat()`         | Block    | Set numeric effect properties                               |
-| `engine.block.getFloat()`         | Block    | Get numeric effect properties                               |
-| `engine.block.setEffectEnabled()` | Block    | Enable or disable an effect                                 |
-| `engine.block.isEffectEnabled()`  | Block    | Check if an effect is enabled                               |
-| `engine.block.findByType()`       | Block    | Find all blocks of a specific type                          |
+| Method | Category | Purpose |
+|--------|----------|---------|
+| `engine.block.createEffect()` | Block | Create a new Recolor or Green Screen effect block |
+| `engine.block.appendEffect()` | Block | Attach an effect to an image block |
+| `engine.block.insertEffect()` | Block | Insert an effect at a specific position in the effect stack |
+| `engine.block.removeEffect()` | Block | Remove an effect from a block by index |
+| `engine.block.getEffects()` | Block | Get all effects attached to a block |
+| `engine.block.supportsEffects()` | Block | Check if a block can render effects |
+| `engine.block.setColor()` | Block | Set color properties on effect blocks |
+| `engine.block.getColor()` | Block | Get color properties from effect blocks |
+| `engine.block.setFloat()` | Block | Set numeric effect properties |
+| `engine.block.getFloat()` | Block | Get numeric effect properties |
+| `engine.block.setEffectEnabled()` | Block | Enable or disable an effect |
+| `engine.block.isEffectEnabled()` | Block | Check if an effect is enabled |
+| `engine.block.findByType()` | Block | Find all blocks of a specific type |
 
 ## Next Steps
 
-- [Apply Filters and Effects](./filters-and-effects/apply.md) — Explore other visual effects available in CE.SDK
 - [Export Designs](./export-save-publish/export.md) — Save your color-replaced images in various formats
 
+
+
 ---
 
 ## 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