@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/filters-and-effects/apply.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) > [Filters and Effects](./filters-and-effects.md) > [Apply Filter or Effect](./filters-and-effects/apply.md)
 
@@ -7,444 +7,387 @@
 Apply professional color grading, blur effects, and artistic treatments to
 design elements using CE.SDK's visual effects system.
 
-![Apply Filters and Effects example showing images with various effects applied](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-filters-and-effects-apply-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-apply-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-apply-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-apply-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-apply-server-js)
 
 While CE.SDK uses a unified effect API for both filters and effects, they serve different purposes. **Filters** typically apply color transformations like LUT filters and duotone, while **effects** apply visual modifications such as blur, pixelize, vignette, and image adjustments. You can combine multiple effects on a single element, creating complex visual treatments by stacking them in a customizable order.
 
-```typescript file=@cesdk_web_examples/guides-filters-and-effects-apply-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';
-import { calculateGridLayout, hexToRgba } from './utils';
+```typescript file=@cesdk_web_examples/guides-filters-and-effects-apply-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Filters and Effects Guide
+ * CE.SDK Server Guide: Apply Filters and Effects
  *
  * Demonstrates applying various filters and effects to image blocks:
  * - Checking effect support
  * - Applying basic effects (blur)
  * - Configuring effect parameters (adjustments)
  * - Applying LUT filters
+ * - Applying duotone filters
  * - Combining multiple effects
  * - Managing effect stacks
+ * - Batch processing
+ * - Exporting results
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    await cesdk.addPlugin(new DesignEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
-    });
+/**
+ * Convert hex color string to RGBA values (0-1 range)
+ */
+function hexToRgba(hex: string): {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+} {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16) / 255,
+        g: parseInt(result[2], 16) / 255,
+        b: parseInt(result[3], 16) / 255,
+        a: 1.0
+      }
+    : { r: 0, g: 0, b: 0, a: 1.0 };
+}
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+// 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 pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
+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];
 
-    // Enable effects and filters in the inspector panel using the Feature API
-    cesdk.feature.enable('ly.img.effect'); // Enable all effects
-    cesdk.feature.enable('ly.img.filter'); // Enable all filters
-    cesdk.feature.enable('ly.img.blur'); // Enable blur effect
-    cesdk.feature.enable('ly.img.adjustment'); // Enable adjustments
+  // Sample image URL for demonstrations
+  const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
 
-    // Calculate responsive grid layout based on page dimensions
-    const layout = calculateGridLayout(pageWidth, pageHeight, 9);
-    const { blockWidth, blockHeight, getPosition } = layout;
+  // Block size for grid layout (will be positioned at the end)
+  const blockSize = { width: 200, height: 150 };
 
-    // Use a sample image URL (this will load from demo assets)
-    const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  // Create an image block to check effect support
+  const sampleBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, sampleBlock);
 
-    // Query available LUT and Duotone filters from asset sources
-    // These filters are provided by the demo asset sources loaded above
-    const lutResults = await engine.asset.findAssets('ly.img.filter', {
-      page: 0,
-      perPage: 10
-    });
-    const duotoneResults = await engine.asset.findAssets('ly.img.filter', {
-      page: 0,
-      perPage: 10
-    });
+  // Check if a block supports effects - graphic blocks with image fills support effects
+  const supportsEffects = engine.block.supportsEffects(sampleBlock);
+  console.log('Block supports effects:', supportsEffects); // true
 
-    const lutAssets = lutResults.assets;
-    const duotoneAssets = duotoneResults.assets;
+  // Page blocks support effects when they have fills applied
+  const pageSupportsEffects = engine.block.supportsEffects(page);
+  console.log('Page supports effects:', pageSupportsEffects);
 
-    // Pattern #2: Use Convenience APIs - addImage() simplifies block creation
-    // Create a sample block to demonstrate effect support checking
-    const blockSize = { width: blockWidth, height: blockHeight };
-    const sampleBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
-    });
-    engine.block.appendChild(page, sampleBlock);
+  // Create a separate image block for blur demonstration
+  const blurImageBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, blurImageBlock);
 
-    // Check if a block supports effects
-    const supportsEffects = engine.block.supportsEffects(sampleBlock);
-    // eslint-disable-next-line no-console
-    console.log('Block supports effects:', supportsEffects); // true for graphics
+  // Create and apply a blur effect
+  const blurEffect = engine.block.createEffect('extrude_blur');
+  engine.block.appendEffect(blurImageBlock, blurEffect);
 
-    // Page blocks don't support effects
-    const pageSupportsEffects = engine.block.supportsEffects(page);
-    // eslint-disable-next-line no-console
-    console.log('Page supports effects:', pageSupportsEffects); // false
+  // Adjust blur intensity (0.0 to 1.0)
+  engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5);
 
-    // Select this block so effects panel is visible
-    engine.block.setSelected(sampleBlock, true);
+  // Create a separate image block for adjustments demonstration
+  const adjustmentsImageBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, adjustmentsImageBlock);
 
-    // Pattern #1: Demonstrate Individual Before Combined
-    // Create a separate image block for blur demonstration
-    const blurImageBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
-    });
-    engine.block.appendChild(page, blurImageBlock);
+  // Create adjustments effect for brightness and contrast
+  const adjustmentsEffect = engine.block.createEffect('adjustments');
+  engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect);
 
-    // Create and apply a blur effect
-    const blurEffect = engine.block.createEffect('extrude_blur');
-    engine.block.appendEffect(blurImageBlock, blurEffect);
+  // Set brightness, contrast, and saturation
+  engine.block.setFloat(
+    adjustmentsEffect,
+    'effect/adjustments/brightness',
+    0.2
+  );
+  engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/contrast', 0.15);
+  engine.block.setFloat(
+    adjustmentsEffect,
+    'effect/adjustments/saturation',
+    0.1
+  );
 
-    // Adjust blur intensity
-    engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5);
+  // Find all available properties for this effect
+  const adjustmentProperties =
+    engine.block.findAllProperties(adjustmentsEffect);
+  console.log('Available adjustment properties:', adjustmentProperties);
+
+  // Demonstrate LUT filters by applying 2 different presets (Grid positions 3-4)
+  // LUT configurations with different color grading styles
+  const lutConfigs = [
+    {
+      uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_ad1920_5_5_128.png',
+      horizontalTileCount: 5,
+      verticalTileCount: 5
+    },
+    {
+      uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_bw_5_5_128.png',
+      horizontalTileCount: 5,
+      verticalTileCount: 5
+    }
+  ];
 
-    // Create a separate image block for adjustments demonstration
-    const adjustmentsImageBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
+  const lutImageBlocks = [];
+  for (const lutConfig of lutConfigs) {
+    const lutImageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 200, height: 150 }
     });
-    engine.block.appendChild(page, adjustmentsImageBlock);
-
-    // Create adjustments effect for brightness and contrast
-    const adjustmentsEffect = engine.block.createEffect('adjustments');
-    engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect);
+    engine.block.appendChild(page, lutImageBlock);
+    lutImageBlocks.push(lutImageBlock);
 
-    // Find all available properties for this effect
-    const adjustmentProperties =
-      engine.block.findAllProperties(adjustmentsEffect);
-    // eslint-disable-next-line no-console
-    console.log('Available adjustment properties:', adjustmentProperties);
+    // Create LUT filter effect
+    const lutEffect = engine.block.createEffect(
+      '//ly.img.ubq/effect/lut_filter'
+    );
 
-    // Set brightness, contrast, and saturation
-    engine.block.setFloat(
-      adjustmentsEffect,
-      'effect/adjustments/brightness',
-      0.2
+    // Configure LUT with preset filter settings
+    engine.block.setString(
+      lutEffect,
+      'effect/lut_filter/lutFileURI',
+      lutConfig.uri
     );
-    engine.block.setFloat(
-      adjustmentsEffect,
-      'effect/adjustments/contrast',
-      0.15
+    engine.block.setInt(
+      lutEffect,
+      'effect/lut_filter/horizontalTileCount',
+      lutConfig.horizontalTileCount
     );
-    engine.block.setFloat(
-      adjustmentsEffect,
-      'effect/adjustments/saturation',
-      0.1
+    engine.block.setInt(
+      lutEffect,
+      'effect/lut_filter/verticalTileCount',
+      lutConfig.verticalTileCount
     );
+    engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85);
 
-    // Demonstrate LUT filters by applying the first 2 from asset library
-    // These filters are fetched from the demo asset sources (Grid positions 3-4)
-    const lutImageBlocks = [];
-    for (let i = 0; i < Math.min(2, lutAssets.length); i++) {
-      const lutAsset = lutAssets[i];
-
-      const lutImageBlock = await engine.block.addImage(imageUri, {
-        size: blockSize
-      });
-      engine.block.appendChild(page, lutImageBlock);
-      lutImageBlocks.push(lutImageBlock);
-
-      // Create LUT filter effect using the full effect type URI
-      const lutEffect = engine.block.createEffect(
-        '//ly.img.ubq/effect/lut_filter'
-      );
-
-      // Use asset metadata for LUT configuration
-      // The asset provides the LUT file URI and grid dimensions
-      engine.block.setString(
-        lutEffect,
-        'effect/lut_filter/lutFileURI',
-        lutAsset.meta?.uri as string
-      );
-      engine.block.setInt(
-        lutEffect,
-        'effect/lut_filter/horizontalTileCount',
-        parseInt(lutAsset.meta?.horizontalTileCount as string, 10)
-      );
-      engine.block.setInt(
-        lutEffect,
-        'effect/lut_filter/verticalTileCount',
-        parseInt(lutAsset.meta?.verticalTileCount as string, 10)
-      );
-      engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85);
-
-      engine.block.appendEffect(lutImageBlock, lutEffect);
-    }
-
-    // Demonstrate Duotone filters by applying the first 2 from asset library
-    // Duotone filters create artistic two-color treatments (Grid positions 5-6)
-    const duotoneImageBlocks = [];
-    for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) {
-      const duotoneAsset = duotoneAssets[i];
-
-      const duotoneImageBlock = await engine.block.addImage(imageUri, {
-        size: blockSize
-      });
-      engine.block.appendChild(page, duotoneImageBlock);
-      duotoneImageBlocks.push(duotoneImageBlock);
-
-      // Create Duotone filter effect using the full effect type URI
-      const duotoneEffect = engine.block.createEffect(
-        '//ly.img.ubq/effect/duotone_filter'
-      );
-
-      // Convert hex colors from asset metadata to RGBA (0-1 range)
-      const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string);
-      engine.block.setColor(
-        duotoneEffect,
-        'effect/duotone_filter/darkColor',
-        darkColor
-      );
-
-      const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string);
-      engine.block.setColor(
-        duotoneEffect,
-        'effect/duotone_filter/lightColor',
-        lightColor
-      );
-
-      engine.block.setFloat(
-        duotoneEffect,
-        'effect/duotone_filter/intensity',
-        0.8
-      );
-
-      engine.block.appendEffect(duotoneImageBlock, duotoneEffect);
-    }
+    engine.block.appendEffect(lutImageBlock, lutEffect);
+  }
 
-    // Pattern #5: Progressive Complexity - now combining multiple effects
-    // Create a separate image block to demonstrate combining multiple effects (Grid position 7)
-    const combinedImageBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
+  // Demonstrate Duotone filters by applying 2 different color combinations (Grid positions 5-6)
+  // Duotone configurations with different color schemes
+  const duotoneConfigs = [
+    { darkColor: '#0b3d5b', lightColor: '#f8bc60' }, // Blue/Orange
+    { darkColor: '#2d1e3e', lightColor: '#e8d5b7' } // Purple/Cream
+  ];
+
+  const duotoneImageBlocks = [];
+  for (const duotoneConfig of duotoneConfigs) {
+    const duotoneImageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 200, height: 150 }
     });
-    engine.block.appendChild(page, combinedImageBlock);
+    engine.block.appendChild(page, duotoneImageBlock);
+    duotoneImageBlocks.push(duotoneImageBlock);
 
-    // Apply effects in order - the stack will contain:
-    // 1. adjustments (brightness/contrast) - applied first
-    // 2. blur - applied second
-    // 3. duotone (color tinting) - applied third
-    // 4. pixelize - applied last
+    // Create duotone filter effect
+    const duotoneEffect = engine.block.createEffect(
+      '//ly.img.ubq/effect/duotone_filter'
+    );
 
-    const combinedAdjustments = engine.block.createEffect('adjustments');
-    engine.block.appendEffect(combinedImageBlock, combinedAdjustments);
-    engine.block.setFloat(
-      combinedAdjustments,
-      'effect/adjustments/brightness',
-      0.2
+    // Configure duotone colors using hex to RGBA conversion
+    const darkColor = hexToRgba(duotoneConfig.darkColor);
+    engine.block.setColor(
+      duotoneEffect,
+      'effect/duotone_filter/darkColor',
+      darkColor
     );
+
+    const lightColor = hexToRgba(duotoneConfig.lightColor);
+    engine.block.setColor(
+      duotoneEffect,
+      'effect/duotone_filter/lightColor',
+      lightColor
+    );
+
     engine.block.setFloat(
-      combinedAdjustments,
-      'effect/adjustments/contrast',
-      0.15
+      duotoneEffect,
+      'effect/duotone_filter/intensity',
+      0.8
     );
+    engine.block.appendEffect(duotoneImageBlock, duotoneEffect);
+  }
 
-    const combinedBlur = engine.block.createEffect('extrude_blur');
-    engine.block.appendEffect(combinedImageBlock, combinedBlur);
-    engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3);
-
-    const combinedDuotone = engine.block.createEffect('duotone_filter');
-    engine.block.appendEffect(combinedImageBlock, combinedDuotone);
-    engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', {
-      r: 0.1,
-      g: 0.2,
-      b: 0.4,
-      a: 1.0
-    });
-    engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', {
-      r: 0.9,
-      g: 0.8,
-      b: 0.6,
-      a: 1.0
-    });
-    engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6);
-
-    const pixelizeEffect = engine.block.createEffect('pixelize');
-    engine.block.appendEffect(combinedImageBlock, pixelizeEffect);
-    engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8);
-    engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8);
-
-    // Get all effects applied to the combined block
-    const effects = engine.block.getEffects(combinedImageBlock);
-    // eslint-disable-next-line no-console
-    console.log('Applied effects:', effects);
-
-    // Access properties of specific effects
-    effects.forEach((effect, index) => {
-      const effectType = engine.block.getType(effect);
-      const isEnabled = engine.block.isEffectEnabled(effect);
-      // eslint-disable-next-line no-console
-      console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`);
-    });
+  // Create an image block to demonstrate combining multiple effects (Grid position 7)
+  const combinedImageBlock = await engine.block.addImage(imageUri, {
+    size: { width: 200, height: 150 }
+  });
+  engine.block.appendChild(page, combinedImageBlock);
+
+  // Apply effects in order - the stack will contain:
+  // 1. adjustments (brightness/contrast) - applied first
+  // 2. blur - applied second
+  // 3. duotone (color tinting) - applied third
+  // 4. pixelize - applied last
+
+  const combinedAdjustments = engine.block.createEffect('adjustments');
+  engine.block.appendEffect(combinedImageBlock, combinedAdjustments);
+  engine.block.setFloat(
+    combinedAdjustments,
+    'effect/adjustments/brightness',
+    0.2
+  );
+  engine.block.setFloat(
+    combinedAdjustments,
+    'effect/adjustments/contrast',
+    0.15
+  );
 
-    // Check if effect is enabled
-    const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur);
-    // eslint-disable-next-line no-console
-    console.log('Blur effect is enabled:', isBlurEnabled);
+  const combinedBlur = engine.block.createEffect('extrude_blur');
+  engine.block.appendEffect(combinedImageBlock, combinedBlur);
+  engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3);
+
+  const combinedDuotone = engine.block.createEffect('duotone_filter');
+  engine.block.appendEffect(combinedImageBlock, combinedDuotone);
+  engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', {
+    r: 0.1,
+    g: 0.2,
+    b: 0.4,
+    a: 1.0
+  });
+  engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', {
+    r: 0.9,
+    g: 0.8,
+    b: 0.6,
+    a: 1.0
+  });
+  engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6);
+
+  const pixelizeEffect = engine.block.createEffect('pixelize');
+  engine.block.appendEffect(combinedImageBlock, pixelizeEffect);
+  engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8);
+  engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8);
+
+  // Get all effects applied to the combined block
+  const effects = engine.block.getEffects(combinedImageBlock);
+  console.log('Applied effects:', effects);
+
+  // Access properties of specific effects
+  effects.forEach((effect, index) => {
+    const effectType = engine.block.getType(effect);
+    const isEnabled = engine.block.isEffectEnabled(effect);
+    console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`);
+  });
 
-    // Create a temporary block to demonstrate effect removal
-    const tempBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
-    });
-    engine.block.appendChild(page, tempBlock);
+  // Check if effect is enabled and toggle
+  const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur);
+  console.log('Blur effect is enabled:', isBlurEnabled);
 
-    const tempEffect = engine.block.createEffect('pixelize');
-    engine.block.appendEffect(tempBlock, tempEffect);
-    engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12);
+  // Temporarily disable the blur effect
+  engine.block.setEffectEnabled(combinedBlur, false);
+  console.log(
+    'Blur effect disabled:',
+    !engine.block.isEffectEnabled(combinedBlur)
+  );
 
-    // Remove the effect
-    const tempEffects = engine.block.getEffects(tempBlock);
-    const effectIndex = tempEffects.indexOf(tempEffect);
-    if (effectIndex !== -1) {
-      engine.block.removeEffect(tempBlock, effectIndex);
-    }
+  // Re-enable for final export
+  engine.block.setEffectEnabled(combinedBlur, true);
 
-    // Destroy the removed effect to free memory
-    engine.block.destroy(tempEffect);
-
-    // ===== Position all blocks in grid layout =====
-    const blocks = [
-      sampleBlock, // Position 0
-      blurImageBlock, // Position 1
-      adjustmentsImageBlock, // Position 2
-      ...lutImageBlocks, // Positions 3-4
-      ...duotoneImageBlocks, // Positions 5-6
-      combinedImageBlock, // Position 7
-      tempBlock // Position 8
-    ];
-
-    blocks.forEach((block, index) => {
-      const pos = getPosition(index);
-      engine.block.setPositionX(block, pos.x);
-      engine.block.setPositionY(block, pos.y);
-    });
+  // Create a temporary block to demonstrate effect removal (Grid position 8)
+  const tempBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, tempBlock);
 
-    // Apply same effects to multiple blocks
-    const allGraphics = engine.block.findByType('graphic');
-
-    allGraphics.forEach((graphic) => {
-      if (engine.block.supportsEffects(graphic)) {
-        // Only apply to blocks that don't already have effects
-        const existingEffects = engine.block.getEffects(graphic);
-        if (existingEffects.length === 0) {
-          const effect = engine.block.createEffect('adjustments');
-          engine.block.appendEffect(graphic, effect);
-          engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1);
-        }
-      }
-    });
+  const tempEffect = engine.block.createEffect('pixelize');
+  engine.block.appendEffect(tempBlock, tempEffect);
+  engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12);
 
-    // eslint-disable-next-line no-console
-    console.log(
-      'Effects guide initialized. Select any image to see effects panel.'
-    );
+  // Remove the effect from the block
+  const tempEffects = engine.block.getEffects(tempBlock);
+  const effectIndex = tempEffects.indexOf(tempEffect);
+  if (effectIndex !== -1) {
+    engine.block.removeEffect(tempBlock, effectIndex);
   }
-}
 
-export default Example;
-```
+  // Destroy the removed effect to free memory
+  engine.block.destroy(tempEffect);
+  console.log('Effect removed and destroyed');
+
+  // ===== Position all blocks in grid layout =====
+  // Calculate grid positions for 9 blocks (3x3 grid)
+  const spacing = 20;
+  const margin = 40;
+  const cols = 3;
+  const totalGridWidth = cols * blockSize.width + (cols - 1) * spacing;
+  const startX = (800 - totalGridWidth) / 2;
+  const startY = margin;
+
+  const getPosition = (index: number) => ({
+    x: startX + (index % cols) * (blockSize.width + spacing),
+    y: startY + Math.floor(index / cols) * (blockSize.height + spacing)
+  });
 
-This guide covers how to enable the built-in effects panel for interactive editing and how to apply and manage effects programmatically using the block API.
+  const blocks = [
+    sampleBlock, // Position 0
+    blurImageBlock, // Position 1
+    adjustmentsImageBlock, // Position 2
+    ...lutImageBlocks, // Positions 3-4
+    ...duotoneImageBlocks, // Positions 5-6
+    combinedImageBlock, // Position 7
+    tempBlock // Position 8
+  ];
+
+  blocks.forEach((block, index) => {
+    const pos = getPosition(index);
+    engine.block.setPositionX(block, pos.x);
+    engine.block.setPositionY(block, pos.y);
+  });
 
-## Using the Built-in Effects UI
+  // Apply same effects to multiple blocks (batch processing)
+  const allGraphics = engine.block.findByType('graphic');
+
+  allGraphics.forEach((graphic) => {
+    if (engine.block.supportsEffects(graphic)) {
+      // Only apply to blocks that don't already have effects
+      const existingEffects = engine.block.getEffects(graphic);
+      if (existingEffects.length === 0) {
+        const effect = engine.block.createEffect('adjustments');
+        engine.block.appendEffect(graphic, effect);
+        engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1);
+      }
+    }
+  });
+  console.log('Batch processing complete');
 
-### Enable Effects Features
+  // Export the scene to PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
 
-To give users access to effects in the inspector panel, we enable the effects features using CE.SDK's Feature API. Effects and filters appear in the **inspector bar** and **advanced inspector** when a user selects a supported element.
+  // Ensure output directory exists
+  if (!existsSync('output')) {
+    mkdirSync('output');
+  }
 
-```typescript highlight-enable-effects-features
-// Enable effects and filters in the inspector panel using the Feature API
-cesdk.feature.enable('ly.img.effect'); // Enable all effects
-cesdk.feature.enable('ly.img.filter'); // Enable all filters
-cesdk.feature.enable('ly.img.blur'); // Enable blur effect
-cesdk.feature.enable('ly.img.adjustment'); // Enable adjustments
+  // Save to file
+  writeFileSync('output/filters-and-effects.png', buffer);
+  console.log('Exported to output/filters-and-effects.png');
+} finally {
+  engine.dispose();
+}
 ```
 
-The Feature API controls which capabilities are available to users. By enabling `ly.img.effect` and `ly.img.filter`, the inspector panel displays effect and filter options when users select compatible blocks. You can also enable specific effects individually like `ly.img.blur` or `ly.img.adjustment` for more granular control.
-
-Effects are enabled by default for graphic blocks with image or video fills. The Feature API shown above allows you to control which specific effects appear in the inspector panel UI.
-
-### User Workflow
-
-With effects features enabled, users can enhance their designs through a visual workflow in the inspector panel:
-
-1. **Select an element** - Click on any image or supported graphic block in the canvas
-2. **Access inspector** - The inspector panel shows available options for the selected element
-3. **Find effects section** - Scroll to the effects and filters sections within the inspector
-4. **Browse and apply** - Click through available effects to apply them
-5. **Adjust parameters** - Use sliders and controls to fine-tune intensity and other effect properties
-6. **Manage effects** - Toggle effects on/off, switch between effects, or reset effect parameters
-
-> **Note:** Effects are applied immediately when selected. CE.SDK does not currently
-> support live preview mode when browsing effects before application. Effect
-> reordering is not supported—use toggle on/off, switch, or reset operations to
-> manage applied effects.
-
-This interactive approach is perfect for creative exploration and allows users to see results immediately without any coding knowledge.
+This guide covers how to apply and manage effects programmatically using the block API.
 
 ## Programmatic Effect Application
 
@@ -453,73 +396,33 @@ This interactive approach is perfect for creative exploration and allows users t
 For applications that need to apply effects programmatically—whether for automation, batch processing, or dynamic user experiences—we start by setting 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 the full CE.SDK interface with the effects panel enabled, giving you both UI and API access to the effects system.
+This initializes the CE.SDK engine in headless mode, giving you full API access to the effects system without UI dependencies.
 
 ### Check Effect Support
 
-Before applying effects to a block, we check whether it supports them. Not all block types can have effects applied—for example, page blocks and scene blocks do not support effects.
-
-```typescript highlight-check-effect-support
-// Pattern #2: Use Convenience APIs - addImage() simplifies block creation
-// Create a sample block to demonstrate effect support checking
-const blockSize = { width: blockWidth, height: blockHeight };
-const sampleBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
-});
-engine.block.appendChild(page, sampleBlock);
+Before applying effects to a block, we check whether it supports them. Not all block types can have effects applied—for example, scene blocks do not support effects.
 
-// Check if a block supports effects
-const supportsEffects = engine.block.supportsEffects(sampleBlock);
-// eslint-disable-next-line no-console
-console.log('Block supports effects:', supportsEffects); // true for graphics
+```typescript highlight-supportsEffects
+  // Create an image block to check effect support
+  const sampleBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, sampleBlock);
 
-// Page blocks don't support effects
-const pageSupportsEffects = engine.block.supportsEffects(page);
-// eslint-disable-next-line no-console
-console.log('Page supports effects:', pageSupportsEffects); // false
+  // Check if a block supports effects - graphic blocks with image fills support effects
+  const supportsEffects = engine.block.supportsEffects(sampleBlock);
+  console.log('Block supports effects:', supportsEffects); // true
 
-// Select this block so effects panel is visible
-engine.block.setSelected(sampleBlock, true);
+  // Page blocks support effects when they have fills applied
+  const pageSupportsEffects = engine.block.supportsEffects(page);
+  console.log('Page supports effects:', pageSupportsEffects);
 ```
 
 Effect support is available for:
@@ -530,7 +433,7 @@ Effect support is available for:
 - **Text blocks** (with limited effect types)
 - **Page blocks** (particularly when they have fills applied, such as background fills)
 
-Always verify support before creating and applying effects to avoid errors and ensure a smooth user experience.
+Always verify support before creating and applying effects to avoid errors.
 
 ### Apply Basic Effects
 
@@ -542,20 +445,19 @@ Once we've confirmed a block supports effects, we can create and apply effects u
 > configuration options like positioning, sizing, corner radius, shadows, and
 > time-based properties.
 
-```typescript highlight-apply-basic-effects
-// Pattern #1: Demonstrate Individual Before Combined
-// Create a separate image block for blur demonstration
-const blurImageBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
-});
-engine.block.appendChild(page, blurImageBlock);
+```typescript highlight-createEffect
+  // Create a separate image block for blur demonstration
+  const blurImageBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, blurImageBlock);
 
-// Create and apply a blur effect
-const blurEffect = engine.block.createEffect('extrude_blur');
-engine.block.appendEffect(blurImageBlock, blurEffect);
+  // Create and apply a blur effect
+  const blurEffect = engine.block.createEffect('extrude_blur');
+  engine.block.appendEffect(blurImageBlock, blurEffect);
 
-// Adjust blur intensity
-engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5);
+  // Adjust blur intensity (0.0 to 1.0)
+  engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5);
 ```
 
 CE.SDK provides several built-in effect types:
@@ -577,26 +479,29 @@ Each effect type has its own set of configurable properties that control its vis
 
 After creating an effect, we can customize its appearance by setting properties. Each effect exposes different parameters depending on its type and capabilities.
 
-```typescript highlight-configure-effect-parameters
-// Create a separate image block for adjustments demonstration
-const adjustmentsImageBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
-});
-engine.block.appendChild(page, adjustmentsImageBlock);
-
-// Create adjustments effect for brightness and contrast
-const adjustmentsEffect = engine.block.createEffect('adjustments');
-engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect);
+```typescript highlight-modifyProperties
+  // Create a separate image block for adjustments demonstration
+  const adjustmentsImageBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, adjustmentsImageBlock);
 
-// Find all available properties for this effect
-const adjustmentProperties = engine.block.findAllProperties(adjustmentsEffect);
-// eslint-disable-next-line no-console
-console.log('Available adjustment properties:', adjustmentProperties);
+  // Create adjustments effect for brightness and contrast
+  const adjustmentsEffect = engine.block.createEffect('adjustments');
+  engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect);
 
-// Set brightness, contrast, and saturation
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/brightness', 0.2);
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/contrast', 0.15);
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/saturation', 0.1);
+  // Set brightness, contrast, and saturation
+  engine.block.setFloat(
+    adjustmentsEffect,
+    'effect/adjustments/brightness',
+    0.2
+  );
+  engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/contrast', 0.15);
+  engine.block.setFloat(
+    adjustmentsEffect,
+    'effect/adjustments/saturation',
+    0.1
+  );
 ```
 
 CE.SDK provides typed setter methods for different parameter types:
@@ -612,45 +517,55 @@ Using the correct setter method ensures type safety and proper value validation.
 
 LUT (Look-Up Table) filters apply professional color grading by transforming colors through a predefined mapping. These are particularly useful for creating consistent brand aesthetics or applying cinematic color treatments.
 
-The example demonstrates querying LUT filters from the asset library using `engine.asset.findAssets('ly.img.filter')`, then applying them using metadata from the asset results. This approach matches how CE.SDK's built-in filter panel works.
-
 ```typescript highlight-apply-lut-filter
-// Demonstrate LUT filters by applying the first 2 from asset library
-// These filters are fetched from the demo asset sources (Grid positions 3-4)
-const lutImageBlocks = [];
-for (let i = 0; i < Math.min(2, lutAssets.length); i++) {
-  const lutAsset = lutAssets[i];
+  // Demonstrate LUT filters by applying 2 different presets (Grid positions 3-4)
+  // LUT configurations with different color grading styles
+  const lutConfigs = [
+    {
+      uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_ad1920_5_5_128.png',
+      horizontalTileCount: 5,
+      verticalTileCount: 5
+    },
+    {
+      uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_bw_5_5_128.png',
+      horizontalTileCount: 5,
+      verticalTileCount: 5
+    }
+  ];
 
-  const lutImageBlock = await engine.block.addImage(imageUri, {
-    size: blockSize
-  });
-  engine.block.appendChild(page, lutImageBlock);
-  lutImageBlocks.push(lutImageBlock);
+  const lutImageBlocks = [];
+  for (const lutConfig of lutConfigs) {
+    const lutImageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 200, height: 150 }
+    });
+    engine.block.appendChild(page, lutImageBlock);
+    lutImageBlocks.push(lutImageBlock);
 
-  // Create LUT filter effect using the full effect type URI
-  const lutEffect = engine.block.createEffect('//ly.img.ubq/effect/lut_filter');
+    // Create LUT filter effect
+    const lutEffect = engine.block.createEffect(
+      '//ly.img.ubq/effect/lut_filter'
+    );
 
-  // Use asset metadata for LUT configuration
-  // The asset provides the LUT file URI and grid dimensions
-  engine.block.setString(
-    lutEffect,
-    'effect/lut_filter/lutFileURI',
-    lutAsset.meta?.uri as string
-  );
-  engine.block.setInt(
-    lutEffect,
-    'effect/lut_filter/horizontalTileCount',
-    parseInt(lutAsset.meta?.horizontalTileCount as string, 10)
-  );
-  engine.block.setInt(
-    lutEffect,
-    'effect/lut_filter/verticalTileCount',
-    parseInt(lutAsset.meta?.verticalTileCount as string, 10)
-  );
-  engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85);
+    // Configure LUT with preset filter settings
+    engine.block.setString(
+      lutEffect,
+      'effect/lut_filter/lutFileURI',
+      lutConfig.uri
+    );
+    engine.block.setInt(
+      lutEffect,
+      'effect/lut_filter/horizontalTileCount',
+      lutConfig.horizontalTileCount
+    );
+    engine.block.setInt(
+      lutEffect,
+      'effect/lut_filter/verticalTileCount',
+      lutConfig.verticalTileCount
+    );
+    engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85);
 
-  engine.block.appendEffect(lutImageBlock, lutEffect);
-}
+    engine.block.appendEffect(lutImageBlock, lutEffect);
+  }
 ```
 
 LUT filters are ideal for:
@@ -660,51 +575,57 @@ LUT filters are ideal for:
 - Matching reference images or maintaining color continuity
 - Building curated filter collections for users
 
-**Asset metadata structure**: Each LUT asset provides `uri` (the LUT file URL), `horizontalTileCount`, and `verticalTileCount` describing the grid layout of color transformation cubes.
+**LUT configuration**: Each LUT file requires specifying the `lutFileURI` pointing to the LUT image, along with `horizontalTileCount` and `verticalTileCount` describing the grid layout of color transformation cubes.
 
 ### Apply Duotone Filters
 
 Duotone filters create artistic two-color effects by mapping image tones to two colors (dark and light). This effect is popular for creating stylized visuals, vintage aesthetics, or brand-specific color treatments.
 
-The example queries duotone filters from the asset library, then applies them using color metadata. The `hexToRgba` utility converts hex color values from asset metadata to RGBA format required by the `setColorRGBA` API.
+The example applies duotone filters using direct color configuration. The `hexToRgba` utility converts hex color values to RGBA format required by the `setColor` API.
 
 ```typescript highlight-apply-duotone-filter
-// Demonstrate Duotone filters by applying the first 2 from asset library
-// Duotone filters create artistic two-color treatments (Grid positions 5-6)
-const duotoneImageBlocks = [];
-for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) {
-  const duotoneAsset = duotoneAssets[i];
-
-  const duotoneImageBlock = await engine.block.addImage(imageUri, {
-    size: blockSize
-  });
-  engine.block.appendChild(page, duotoneImageBlock);
-  duotoneImageBlocks.push(duotoneImageBlock);
-
-  // Create Duotone filter effect using the full effect type URI
-  const duotoneEffect = engine.block.createEffect(
-    '//ly.img.ubq/effect/duotone_filter'
-  );
+  // Demonstrate Duotone filters by applying 2 different color combinations (Grid positions 5-6)
+  // Duotone configurations with different color schemes
+  const duotoneConfigs = [
+    { darkColor: '#0b3d5b', lightColor: '#f8bc60' }, // Blue/Orange
+    { darkColor: '#2d1e3e', lightColor: '#e8d5b7' } // Purple/Cream
+  ];
+
+  const duotoneImageBlocks = [];
+  for (const duotoneConfig of duotoneConfigs) {
+    const duotoneImageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 200, height: 150 }
+    });
+    engine.block.appendChild(page, duotoneImageBlock);
+    duotoneImageBlocks.push(duotoneImageBlock);
 
-  // Convert hex colors from asset metadata to RGBA (0-1 range)
-  const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string);
-  engine.block.setColor(
-    duotoneEffect,
-    'effect/duotone_filter/darkColor',
-    darkColor
-  );
+    // Create duotone filter effect
+    const duotoneEffect = engine.block.createEffect(
+      '//ly.img.ubq/effect/duotone_filter'
+    );
 
-  const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string);
-  engine.block.setColor(
-    duotoneEffect,
-    'effect/duotone_filter/lightColor',
-    lightColor
-  );
+    // Configure duotone colors using hex to RGBA conversion
+    const darkColor = hexToRgba(duotoneConfig.darkColor);
+    engine.block.setColor(
+      duotoneEffect,
+      'effect/duotone_filter/darkColor',
+      darkColor
+    );
 
-  engine.block.setFloat(duotoneEffect, 'effect/duotone_filter/intensity', 0.8);
+    const lightColor = hexToRgba(duotoneConfig.lightColor);
+    engine.block.setColor(
+      duotoneEffect,
+      'effect/duotone_filter/lightColor',
+      lightColor
+    );
 
-  engine.block.appendEffect(duotoneImageBlock, duotoneEffect);
-}
+    engine.block.setFloat(
+      duotoneEffect,
+      'effect/duotone_filter/intensity',
+      0.8
+    );
+    engine.block.appendEffect(duotoneImageBlock, duotoneEffect);
+  }
 ```
 
 Duotone filters work by:
@@ -714,7 +635,7 @@ Duotone filters work by:
 - Blending between the two colors based on pixel brightness
 - Adjusting intensity to control the effect strength (0.0 to 1.0)
 
-**Asset metadata structure**: Each duotone asset provides `darkColor` and `lightColor` as hex strings (e.g., `"#1a2b3c"`) which must be converted to RGBA values for the effect API.
+**Color format**: Duotone colors use RGBA values in the 0.0 to 1.0 range. Convert hex colors using a helper function as shown in the example.
 
 ### Combine Multiple Effects
 
@@ -726,60 +647,63 @@ One of the most powerful features of CE.SDK's effect system is the ability to st
 > production code, you can apply multiple effects directly to the same block
 > without this separation.
 
-```typescript highlight-combine-multiple-effects
-// Pattern #5: Progressive Complexity - now combining multiple effects
-// Create a separate image block to demonstrate combining multiple effects (Grid position 7)
-const combinedImageBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
-});
-engine.block.appendChild(page, combinedImageBlock);
-
-// Apply effects in order - the stack will contain:
-// 1. adjustments (brightness/contrast) - applied first
-// 2. blur - applied second
-// 3. duotone (color tinting) - applied third
-// 4. pixelize - applied last
-
-const combinedAdjustments = engine.block.createEffect('adjustments');
-engine.block.appendEffect(combinedImageBlock, combinedAdjustments);
-engine.block.setFloat(
-  combinedAdjustments,
-  'effect/adjustments/brightness',
-  0.2
-);
-engine.block.setFloat(combinedAdjustments, 'effect/adjustments/contrast', 0.15);
-
-const combinedBlur = engine.block.createEffect('extrude_blur');
-engine.block.appendEffect(combinedImageBlock, combinedBlur);
-engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3);
-
-const combinedDuotone = engine.block.createEffect('duotone_filter');
-engine.block.appendEffect(combinedImageBlock, combinedDuotone);
-engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', {
-  r: 0.1,
-  g: 0.2,
-  b: 0.4,
-  a: 1.0
-});
-engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', {
-  r: 0.9,
-  g: 0.8,
-  b: 0.6,
-  a: 1.0
-});
-engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6);
+```typescript highlight-addEffect
+  // Create an image block to demonstrate combining multiple effects (Grid position 7)
+  const combinedImageBlock = await engine.block.addImage(imageUri, {
+    size: { width: 200, height: 150 }
+  });
+  engine.block.appendChild(page, combinedImageBlock);
+
+  // Apply effects in order - the stack will contain:
+  // 1. adjustments (brightness/contrast) - applied first
+  // 2. blur - applied second
+  // 3. duotone (color tinting) - applied third
+  // 4. pixelize - applied last
+
+  const combinedAdjustments = engine.block.createEffect('adjustments');
+  engine.block.appendEffect(combinedImageBlock, combinedAdjustments);
+  engine.block.setFloat(
+    combinedAdjustments,
+    'effect/adjustments/brightness',
+    0.2
+  );
+  engine.block.setFloat(
+    combinedAdjustments,
+    'effect/adjustments/contrast',
+    0.15
+  );
 
-const pixelizeEffect = engine.block.createEffect('pixelize');
-engine.block.appendEffect(combinedImageBlock, pixelizeEffect);
-engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8);
-engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8);
+  const combinedBlur = engine.block.createEffect('extrude_blur');
+  engine.block.appendEffect(combinedImageBlock, combinedBlur);
+  engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3);
+
+  const combinedDuotone = engine.block.createEffect('duotone_filter');
+  engine.block.appendEffect(combinedImageBlock, combinedDuotone);
+  engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', {
+    r: 0.1,
+    g: 0.2,
+    b: 0.4,
+    a: 1.0
+  });
+  engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', {
+    r: 0.9,
+    g: 0.8,
+    b: 0.6,
+    a: 1.0
+  });
+  engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6);
+
+  const pixelizeEffect = engine.block.createEffect('pixelize');
+  engine.block.appendEffect(combinedImageBlock, pixelizeEffect);
+  engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8);
+  engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8);
 ```
 
 **Effect ordering matters**: Effects are applied from the bottom of the stack to the top. In this example:
 
 1. First, we adjust brightness and contrast
 2. Then, we apply blur
-3. Then, we apply color grading with a LUT filter
+3. Then, we apply color grading with duotone
 4. Finally, we add stylization with pixelization
 
 Experiment with different orderings to achieve the desired visual result—changing the order can significantly impact the final appearance.
@@ -788,64 +712,72 @@ Experiment with different orderings to achieve the desired visual result—chang
 
 ### List and Access Effects
 
-We can retrieve all effects applied to a block and inspect their properties. This is useful for building effect management interfaces or debugging effect configurations.
+We can retrieve all effects applied to a block and inspect their properties. This is useful for building effect management logic or debugging effect configurations.
 
-```typescript highlight-list-effects
-// Get all effects applied to the combined block
-const effects = engine.block.getEffects(combinedImageBlock);
-// eslint-disable-next-line no-console
-console.log('Applied effects:', effects);
+```typescript highlight-getEffects
+  // Get all effects applied to the combined block
+  const effects = engine.block.getEffects(combinedImageBlock);
+  console.log('Applied effects:', effects);
 
-// Access properties of specific effects
-effects.forEach((effect, index) => {
-  const effectType = engine.block.getType(effect);
-  const isEnabled = engine.block.isEffectEnabled(effect);
-  // eslint-disable-next-line no-console
-  console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`);
-});
+  // Access properties of specific effects
+  effects.forEach((effect, index) => {
+    const effectType = engine.block.getType(effect);
+    const isEnabled = engine.block.isEffectEnabled(effect);
+    console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`);
+  });
 ```
 
 This allows you to iterate through all applied effects, read their properties, and make modifications as needed.
 
 ### Enable/Disable Effects
 
-CE.SDK allows you to temporarily toggle effects on and off without removing them from the block. This is particularly useful for before/after comparisons or when you need to optimize rendering performance during interactive editing sessions.
+CE.SDK allows you to temporarily toggle effects on and off without removing them from the block. This is particularly useful for before/after comparisons or conditional rendering in processing pipelines.
 
-```typescript highlight-enable-disable-effects
-// Check if effect is enabled
-const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur);
-// eslint-disable-next-line no-console
-console.log('Blur effect is enabled:', isBlurEnabled);
+```typescript highlight-disableEffect
+  // Check if effect is enabled and toggle
+  const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur);
+  console.log('Blur effect is enabled:', isBlurEnabled);
+
+  // Temporarily disable the blur effect
+  engine.block.setEffectEnabled(combinedBlur, false);
+  console.log(
+    'Blur effect disabled:',
+    !engine.block.isEffectEnabled(combinedBlur)
+  );
+
+  // Re-enable for final export
+  engine.block.setEffectEnabled(combinedBlur, true);
 ```
 
 When you disable an effect, it remains attached to the block but won't be rendered until you enable it again. This preserves all effect parameters while giving you full control over when the effect is applied.
 
-You can use this feature to create interactive preview modes, implement undo-like functionality, or conditionally apply effects based on user preferences or device capabilities.
+You can use this feature to create comparison outputs, implement conditional processing, or optimize rendering based on output requirements.
 
 ### Remove Effects
 
 When you no longer need an effect, you can remove it from the effect stack and free its resources. Always destroy effects that are no longer in use to prevent memory leaks.
 
-```typescript highlight-remove-effects
-// Create a temporary block to demonstrate effect removal
-const tempBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
-});
-engine.block.appendChild(page, tempBlock);
+```typescript highlight-destroyEffect
+  // Create a temporary block to demonstrate effect removal (Grid position 8)
+  const tempBlock = await engine.block.addImage(imageUri, {
+    size: blockSize
+  });
+  engine.block.appendChild(page, tempBlock);
 
-const tempEffect = engine.block.createEffect('pixelize');
-engine.block.appendEffect(tempBlock, tempEffect);
-engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12);
+  const tempEffect = engine.block.createEffect('pixelize');
+  engine.block.appendEffect(tempBlock, tempEffect);
+  engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12);
 
-// Remove the effect
-const tempEffects = engine.block.getEffects(tempBlock);
-const effectIndex = tempEffects.indexOf(tempEffect);
-if (effectIndex !== -1) {
-  engine.block.removeEffect(tempBlock, effectIndex);
-}
+  // Remove the effect from the block
+  const tempEffects = engine.block.getEffects(tempBlock);
+  const effectIndex = tempEffects.indexOf(tempEffect);
+  if (effectIndex !== -1) {
+    engine.block.removeEffect(tempBlock, effectIndex);
+  }
 
-// Destroy the removed effect to free memory
-engine.block.destroy(tempEffect);
+  // Destroy the removed effect to free memory
+  engine.block.destroy(tempEffect);
+  console.log('Effect removed and destroyed');
 ```
 
 The `removeEffect()` method takes an index position, so you can remove effects selectively from any position in the stack. After removal, destroy the effect instance to ensure proper cleanup.
@@ -857,35 +789,25 @@ The `removeEffect()` method takes an index position, so you can remove effects s
 For applications that need to apply the same effects to multiple elements, we can iterate through a collection of blocks and apply effects efficiently.
 
 ```typescript highlight-batch-processing
-// Apply same effects to multiple blocks
-const allGraphics = engine.block.findByType('graphic');
-
-allGraphics.forEach((graphic) => {
-  if (engine.block.supportsEffects(graphic)) {
-    // Only apply to blocks that don't already have effects
-    const existingEffects = engine.block.getEffects(graphic);
-    if (existingEffects.length === 0) {
-      const effect = engine.block.createEffect('adjustments');
-      engine.block.appendEffect(graphic, effect);
-      engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1);
+  // Apply same effects to multiple blocks (batch processing)
+  const allGraphics = engine.block.findByType('graphic');
+
+  allGraphics.forEach((graphic) => {
+    if (engine.block.supportsEffects(graphic)) {
+      // Only apply to blocks that don't already have effects
+      const existingEffects = engine.block.getEffects(graphic);
+      if (existingEffects.length === 0) {
+        const effect = engine.block.createEffect('adjustments');
+        engine.block.appendEffect(graphic, effect);
+        engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1);
+      }
     }
-  }
-});
+  });
+  console.log('Batch processing complete');
 ```
 
 When batch processing, check effect support before creating effects to avoid unnecessary work. You can also reuse effect instances when applying the same configuration to multiple blocks, though be careful to destroy them properly when done.
 
-### Dynamic Effects with Animations
-
-You can combine effects with CE.SDK's built-in animation system to create dynamic visual treatments that change over time.
-
-> **Caution:** Effect parameters are static properties and cannot be animated using
-> JavaScript timers like `setInterval` or `requestAnimationFrame`. For animated
-> content, use CE.SDK's built-in animation blocks (`createAnimation()`,
-> `setInAnimation()`, etc.) or refer to the animation guides.
-
-For dynamic visual effects in video projects, explore CE.SDK's animation system which provides professionally designed transitions and effects that integrate seamlessly with the rendering pipeline.
-
 ### Custom Effect Combinations
 
 Creating reusable effect presets allows you to maintain consistent styling across your application and speed up common effect applications. Here's a pattern for building reusable effect configurations:
@@ -898,7 +820,7 @@ async function applyVintagePreset(engine: CreativeEngine, imageBlock: number) {
   engine.block.setString(
     lutEffect,
     'lut_filter/lutFileURI',
-    'https://img.ly/static/ubq_luts/vintage.png'
+    'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.filters.lut/LUTs/imgly_lut_ad1920_5_5_128.png',
   );
   engine.block.appendEffect(imageBlock, lutEffect);
 
@@ -918,19 +840,39 @@ Preset strategies include:
 
 - **Brand filters** - Maintain a consistent look across campaigns
 - **Style templates** - Provide quick application of complex multi-effect treatments
-- **User favorites** - Allow users to save and recall their preferred settings
+- **Processing pipelines** - Apply standardized effects across batch operations
+
+### Export Results
+
+After applying effects, export the processed content to a file. CE.SDK supports various export formats including PNG, JPEG, and PDF.
+
+```typescript highlight-export
+  // Export the scene to PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+
+  // Ensure output directory exists
+  if (!existsSync('output')) {
+    mkdirSync('output');
+  }
+
+  // Save to file
+  writeFileSync('output/filters-and-effects.png', buffer);
+  console.log('Exported to output/filters-and-effects.png');
+```
+
+The export operation renders all effects and saves the result to the file system. Always dispose of the engine instance when processing is complete to free resources.
 
 ## Performance Considerations
 
-CE.SDK's effect system is optimized for real-time performance, but understanding these considerations helps you build responsive applications:
+CE.SDK's effect system is optimized for performance, but understanding these considerations helps you build efficient processing pipelines:
 
-- **GPU acceleration**: Effects leverage GPU rendering for smooth performance on modern devices
-- **Mobile optimization**: Limit effects to 2-3 per element on mobile devices to maintain responsiveness
+- **GPU acceleration**: Effects leverage GPU rendering for smooth performance on modern systems
 - **Effect complexity**: Blur and LUT filters are computationally expensive compared to simple adjustments
-- **Video effects**: Apply effects sparingly to video blocks to maintain smooth playback
-- **Real-time editing**: Temporarily disable effects during intensive editing operations for better interactivity
+- **Video effects**: Apply effects sparingly to video blocks to maintain smooth processing
+- **Batch optimization**: When processing many images, consider reusing engine instances rather than reinitializing
 
-Test your effect combinations on target devices early in development to ensure acceptable performance.
+Test your effect combinations with representative workloads early in development to ensure acceptable performance.
 
 ## Troubleshooting
 
@@ -945,12 +887,12 @@ If an effect doesn't appear after applying it, check these common issues:
 
 ### Performance Degradation
 
-If you experience slow rendering or laggy interactions:
+If you experience slow processing:
 
-- Reduce the number of effects per element (aim for 2-3 maximum on mobile)
+- Reduce the number of effects per element
 - Lower blur radius values or use smaller LUT files
-- Temporarily disable effects during editing with `setEffectEnabled()`
-- Test on target devices early to identify performance bottlenecks
+- Temporarily disable effects during intermediate operations with `setEffectEnabled()`
+- Profile your processing pipeline to identify bottlenecks
 
 ### Effects Not Persisting
 
@@ -965,7 +907,7 @@ Effects should save automatically with the scene, but verify:
 If you can't apply an effect:
 
 - Remember that graphic blocks (with image or video fills), shape blocks, and text blocks support effects
-- Page blocks themselves don't support effects directly, but page fills (such as background fills) do support effects
+- Page blocks support effects when they have fills applied (such as background fills)
 - Scene blocks cannot have effects applied
 - Check the block type with `block.getType()` and use `block.supportsEffects()` before attempting to apply effects
 
@@ -994,26 +936,18 @@ The example code accompanying this guide follows educational design patterns to
 
 - **Individual demonstrations**: Each effect type is demonstrated on its own image block before showing combinations, making it easier to understand what each effect does
 - **Convenience API usage**: The code uses `engine.block.addImage()` instead of manual block construction—this is the recommended approach for simplicity and maintainability
-- **Spatial layout**: Image blocks are positioned in a grid layout (x/y coordinates) so you can visually see the results of each effect when running the example
+- **Spatial layout**: Image blocks are positioned in a grid layout (x/y coordinates) so you can see the results of each effect in the exported output
 - **Progressive complexity**: The example starts with simple single effects and gradually builds to complex multi-effect combinations
 
 In your production code, you can apply multiple effects directly to the same block without creating separate demonstration blocks. The example structure is optimized for learning, not production usage.
 
-## Next Steps
-
-Now that you understand how to apply and manage filters and effects, explore specific effect types and advanced techniques:
 
-- **LUT Filters** - Create custom color grading filters for cinematic looks
-- **Blur Effects** - Apply depth of field and motion blur techniques
-- **Duotone Effects** - Create striking two-color artistic treatments
-- **Adjustments** - Fine-tune brightness, contrast, and saturation
-- **Effect Combinations** - Build sophisticated multi-effect visual treatments
 
 ---
 
 ## 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