@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/filters-and-effects/create-custom-lut-filter.md

@@ -1,169 +1,62 @@
-> 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 Custom LUT Filter](./filters-and-effects/create-custom-lut-filter.md)
 
 ---
 
-Apply custom LUT (Look-Up Table) filters to achieve brand-consistent color grading directly through CE.SDK's effect API.
+Apply custom LUT (Look-Up Table) filters to achieve brand-consistent color grading in server-side applications using CE.SDK's headless Creative Engine.
 
-![Create Custom LUT Filter example showing an image with a custom LUT color grade applied](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
-> **Reading time:** 10 minutes
+> **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-filters-and-effects-create-custom-lut-filter-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-create-custom-lut-filter-browser/)
-
-LUT filters remap colors through a predefined transformation table, enabling cinematic color grading and consistent brand aesthetics. This guide shows how to apply your own LUT files directly to design elements using the effect API. For organizing collections of filters through asset sources, see [Create Custom Filters](./filters-and-effects/create-custom-filters.md).
-
-```typescript file=@cesdk_web_examples/guides-filters-and-effects-create-custom-lut-filter-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';
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-server-js)
+
+LUT filters remap colors through a predefined transformation table, enabling cinematic color grading and consistent brand aesthetics. This guide shows how to apply your own LUT files directly to design elements using the effect API in server-side Node.js applications.
+
+```typescript file=@cesdk_web_examples/guides-filters-and-effects-create-custom-lut-filter-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Create Custom LUT Filter Guide
+ * CE.SDK Server Guide: Create Custom LUT Filter
  *
  * Demonstrates applying custom LUT filters directly using the effect API:
  * - Creating a lut_filter effect
  * - Configuring the LUT file URI and tile dimensions
  * - Setting filter intensity
  * - Toggling the effect on and off
+ * - Exporting the result
  */
-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());
+async function main() {
+  // Initialize the headless Creative Engine
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
-    // 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' }
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
     });
 
-    const engine = cesdk.engine;
     const page = engine.block.findByType('page')[0];
 
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    // Create a gradient background for the page
-    const gradientFill = engine.block.createFill('gradient/linear');
-    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [
-      { color: { r: 0.15, g: 0.1, b: 0.25, a: 1 }, stop: 0 },
-      { color: { r: 0.3, g: 0.15, b: 0.4, a: 1 }, stop: 0.5 },
-      { color: { r: 0.2, g: 0.1, b: 0.35, a: 1 }, stop: 1 }
-    ]);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1);
-    engine.block.setFill(page, gradientFill);
-
-    // Create a centered title text
-    const titleText = engine.block.create('text');
-    engine.block.setString(titleText, 'text/text', 'Custom LUT Filter');
-    engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center');
-    engine.block.setTextFontSize(titleText, 96);
-    engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 });
-    engine.block.setWidthMode(titleText, 'Auto');
-    engine.block.setHeightMode(titleText, 'Auto');
-    engine.block.appendChild(page, titleText);
-
-    // Create a subtext below the title
-    const subText = engine.block.create('text');
-    engine.block.setString(subText, 'text/text', 'img.ly');
-    engine.block.setEnum(subText, 'text/horizontalAlignment', 'Center');
-    engine.block.setTextFontSize(subText, 64);
-    engine.block.setTextColor(subText, { r: 0.8, g: 0.8, b: 0.8, a: 1 });
-    engine.block.setWidthMode(subText, 'Auto');
-    engine.block.setHeightMode(subText, 'Auto');
-    engine.block.appendChild(page, subText);
-
-    // Get text dimensions for centering calculations
-    const titleWidth = engine.block.getFrameWidth(titleText);
-    const titleHeight = engine.block.getFrameHeight(titleText);
-    const subTextWidth = engine.block.getFrameWidth(subText);
-    const subTextHeight = engine.block.getFrameHeight(subText);
-
-    // Image dimensions (smaller)
-    const imageWidth = 200;
-    const imageHeight = 150;
-
-    // Calculate total content height and vertical centering
-    const textGap = 8;
-    const imagePadding = 60;
-    const totalContentHeight =
-      titleHeight + textGap + subTextHeight + imagePadding + imageHeight;
-    const startY = (pageHeight - totalContentHeight) / 2;
-
-    // Position title centered
-    engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2);
-    engine.block.setPositionY(titleText, startY);
-
-    // Position subtext below title
-    engine.block.setPositionX(subText, (pageWidth - subTextWidth) / 2);
-    engine.block.setPositionY(subText, startY + titleHeight + textGap);
-
     // Add an image block to apply the LUT filter
-    const imageY =
-      startY + titleHeight + textGap + subTextHeight + imagePadding;
     const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
     const imageBlock = await engine.block.addImage(imageUri, {
-      x: (pageWidth - imageWidth) / 2,
-      y: imageY,
-      size: { width: imageWidth, height: imageHeight }
+      x: 150,
+      y: 100,
+      size: { width: 500, height: 400 }
     });
     engine.block.appendChild(page, imageBlock);
 
@@ -187,44 +80,39 @@ class Example implements EditorPlugin {
     // Apply the effect to the image block
     engine.block.appendEffect(imageBlock, lutEffect);
 
-    // Register a custom button component to toggle the LUT filter
-    cesdk.ui.registerComponent('lut.toggle', ({ builder }) => {
-      const isEnabled = engine.block.isEffectEnabled(lutEffect);
-      builder.Button('toggle-lut', {
-        label: 'LUT Filter',
-        icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff',
-        isActive: isEnabled,
-        onClick: () => {
-          engine.block.setEffectEnabled(lutEffect, !isEnabled);
-        }
-      });
-    });
+    // Toggle the effect off and back on
+    engine.block.setEffectEnabled(lutEffect, false);
+    const isEnabled = engine.block.isEffectEnabled(lutEffect);
+    console.log('Effect enabled:', isEnabled); // false
 
-    // Add the toggle button to the navigation bar
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      'lut.toggle'
-    );
+    engine.block.setEffectEnabled(lutEffect, true);
 
     // Retrieve all effects on the block
     const effects = engine.block.getEffects(imageBlock);
-    // eslint-disable-next-line no-console
     console.log('Number of effects:', effects.length); // 1
 
     // Check if block supports effects
     const supportsEffects = engine.block.supportsEffects(imageBlock);
-    // eslint-disable-next-line no-console
     console.log('Supports effects:', supportsEffects); // true
 
-    // Select the image to show it in the editor
-    engine.block.select(imageBlock);
+    // Export the result to a file
+    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}/custom-lut-filter.png`, buffer);
 
-    // eslint-disable-next-line no-console
-    console.log('Custom LUT filter applied successfully.');
+    console.log('Exported result to output/custom-lut-filter.png');
+  } finally {
+    // Always dispose of the engine to free resources
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 ## Understanding LUT Image Format
@@ -277,112 +165,156 @@ You can write a Python script using PIL/Pillow and NumPy to convert `.cube` file
 
 ### Using CE.SDK's Built-in LUTs
 
-The simplest approach is to use CE.SDK's existing LUT assets as a starting point. The built-in filters use pre-generated tiled PNGs that you can reference for format verification. Check the filter extension at `ly.img.cesdk.filters.lut` for examples of properly formatted LUT images.
+You can reference CE.SDK's built-in LUT assets as format-verified examples. The filter extension at `ly.img.filter/LUTs` contains pre-generated tiled PNGs you can inspect to confirm tile counts, cube size, and overall layout when authoring or converting your own LUTs.
+
+## Initialize the Engine
+
+We start by initializing the headless Creative Engine with a scene and page for our image processing workflow.
 
-## Hosting LUT Files
+```typescript highlight=highlight-setup
+  // Initialize the headless Creative Engine
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
-LUT images must be served from an accessible URL. For production deployments, use HTTPS and enable CORS headers for cross-origin requests in browser environments.
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
+    });
 
-## Creating the LUT Effect
+    const page = engine.block.findByType('page')[0];
+```
 
-Create a `lut_filter` effect instance using the effect API:
+## Add an Image Block
 
-```typescript highlight-create-effect
+Add an image block to apply the LUT filter. The `addImage()` convenience API simplifies image block creation.
+
+```typescript highlight=highlight-add-image
+// Add an image block to apply the LUT filter
+const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+const imageBlock = await engine.block.addImage(imageUri, {
+  x: 150,
+  y: 100,
+  size: { width: 500, height: 400 }
+});
+engine.block.appendChild(page, imageBlock);
+```
+
+## Create the LUT Effect
+
+Create a `lut_filter` effect instance using the effect API.
+
+```typescript highlight=highlight-create-effect
 // Create a LUT filter effect
-const lutEffect = engine.block.createEffect('//ly.img.ubq/effect/lut_filter');
+const lutEffect = engine.block.createEffect(
+  '//ly.img.ubq/effect/lut_filter'
+);
 ```
 
 This creates an effect that can be configured and applied to image blocks.
 
-## Configuring LUT Properties
+## Configure LUT Properties
 
-Set the LUT file URL and tile dimensions to match your LUT image:
+Set the LUT file URL and tile dimensions to match your LUT image.
 
-```typescript highlight-configure-lut
-// Configure the LUT file URI - this is a tiled PNG containing the color lookup table
-const lutUrl =
-  'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png';
-engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl);
+```typescript highlight=highlight-configure-lut
+    // Configure the LUT file URI - this is a tiled PNG containing the color lookup table
+    const lutUrl =
+      'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png';
+    engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl);
 
-// Set the tile grid dimensions - must match the LUT image structure
-engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5);
-engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5);
+    // Set the tile grid dimensions - must match the LUT image structure
+    engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5);
+    engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5);
 ```
 
 The tile counts must match the actual LUT image grid structure. Using incorrect values produces distorted colors.
 
-## Setting Filter Intensity
+## Set Filter Intensity
 
-Control the strength of the color transformation with intensity:
+Control the strength of the color transformation with intensity.
 
-```typescript highlight-set-intensity
+```typescript highlight=highlight-set-intensity
 // Set filter intensity (0.0 = no effect, 1.0 = full effect)
 engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.8);
 ```
 
 Values range from 0.0 (no effect) to 1.0 (full effect). Use intermediate values for subtle color grading.
 
-## Applying the Effect
+## Apply the Effect
 
-Attach the configured effect to an image block:
+Attach the configured effect to an image block.
 
-```typescript highlight-apply-effect
+```typescript highlight=highlight-apply-effect
 // Apply the effect to the image block
 engine.block.appendEffect(imageBlock, lutEffect);
 ```
 
 The effect renders immediately after being applied.
 
-## Toggling the Effect
+## Toggle the Effect
 
-Add a toggle button to the navigation bar for enabling and disabling the filter:
+Enable or disable the effect without removing it.
 
-```typescript highlight-toggle-effect
-// Register a custom button component to toggle the LUT filter
-cesdk.ui.registerComponent('lut.toggle', ({ builder }) => {
-  const isEnabled = engine.block.isEffectEnabled(lutEffect);
-  builder.Button('toggle-lut', {
-    label: 'LUT Filter',
-    icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff',
-    isActive: isEnabled,
-    onClick: () => {
-      engine.block.setEffectEnabled(lutEffect, !isEnabled);
-    }
-  });
-});
+```typescript highlight=highlight-toggle-effect
+    // Toggle the effect off and back on
+    engine.block.setEffectEnabled(lutEffect, false);
+    const isEnabled = engine.block.isEffectEnabled(lutEffect);
+    console.log('Effect enabled:', isEnabled); // false
 
-// Add the toggle button to the navigation bar
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  'lut.toggle'
-);
+    engine.block.setEffectEnabled(lutEffect, true);
 ```
 
-The `registerComponent` function creates a custom UI component that tracks the effect's enabled state. The `insertOrderComponent` method adds it to the navigation bar. Clicking the button toggles the effect while preserving all settings.
+Disabling preserves all effect settings while temporarily removing the visual transformation.
 
-## Managing Effects
+## Manage Effects
 
-Retrieve and inspect effects applied to a block:
+Retrieve and inspect effects applied to a block.
 
-```typescript highlight-manage-effects
-// Retrieve all effects on the block
-const effects = engine.block.getEffects(imageBlock);
-// eslint-disable-next-line no-console
-console.log('Number of effects:', effects.length); // 1
+```typescript highlight=highlight-manage-effects
+    // Retrieve all effects on the block
+    const effects = engine.block.getEffects(imageBlock);
+    console.log('Number of effects:', effects.length); // 1
 
-// Check if block supports effects
-const supportsEffects = engine.block.supportsEffects(imageBlock);
-// eslint-disable-next-line no-console
-console.log('Supports effects:', supportsEffects); // true
+    // Check if block supports effects
+    const supportsEffects = engine.block.supportsEffects(imageBlock);
+    console.log('Supports effects:', supportsEffects); // true
 ```
 
 Use `getEffects()` to access all effects on a block and `supportsEffects()` to verify compatibility before applying.
 
+## Export and Cleanup
+
+After applying the LUT filter, we export the result to a file and dispose of the engine to free resources.
+
+```typescript highlight=highlight-export
+    // Export the result to a file
+    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}/custom-lut-filter.png`, buffer);
+
+    console.log('Exported result to output/custom-lut-filter.png');
+```
+
+Always dispose of the engine in a finally block to ensure resources are freed even if an error occurs.
+
+```typescript highlight=highlight-cleanup
+// Always dispose of the engine to free resources
+engine.dispose();
+```
+
 ## Troubleshooting
 
 ### LUT Not Rendering
 
-- Verify the LUT image URL is accessible and CORS-enabled
+- Verify the LUT image URL is accessible from your server
 - Confirm the image uses PNG format
 - Check that tile count values match the actual image grid
 
@@ -391,36 +323,36 @@ Use `getEffects()` to access all effects on a block and `supportsEffects()` to v
 - Verify tile counts match the LUT image structure
 - Ensure the LUT was generated with sRGB color space
 
+### Effect Not Visible in Export
+
+- Verify the effect is enabled with `isEffectEnabled()`
+- Ensure the effect was appended to the block, not just created
+- Check the block supports effects using `supportsEffects()`
+
 ## API Reference
 
-| Method                                                                        | Description                           |
-| ----------------------------------------------------------------------------- | ------------------------------------- |
-| `engine.block.createEffect('//ly.img.ubq/effect/lut_filter')`                 | Create a LUT filter effect instance   |
-| `engine.block.setString(effect, 'effect/lut_filter/lutFileURI', uri)`         | Set the LUT image URL                 |
-| `engine.block.setInt(effect, 'effect/lut_filter/horizontalTileCount', count)` | Set horizontal tile count             |
-| `engine.block.setInt(effect, 'effect/lut_filter/verticalTileCount', count)`   | Set vertical tile count               |
-| `engine.block.setFloat(effect, 'effect/lut_filter/intensity', value)`         | Set filter intensity (0.0-1.0)        |
-| `engine.block.appendEffect(block, effect)`                                    | Apply effect to a block               |
-| `engine.block.getEffects(block)`                                              | Get all effects on a block            |
-| `engine.block.setEffectEnabled(effect, enabled)`                              | Enable or disable an effect           |
-| `engine.block.isEffectEnabled(effect)`                                        | Check if effect is enabled            |
-| `engine.block.removeEffect(block, index)`                                     | Remove effect at index                |
-| `engine.block.destroy(effect)`                                                | Destroy an effect instance            |
-| `engine.block.supportsEffects(block)`                                         | Check if block supports effects       |
-| `cesdk.ui.registerComponent(id, renderFn)`                                    | Register a custom UI component        |
-| `cesdk.ui.insertOrderComponent(options, component)`                           | Add a component to the navigation bar |
-
-## Next Steps
-
-- [Create Custom Filters](./filters-and-effects/create-custom-filters.md) - Register custom LUT filters as asset sources
-- [Apply Filters and Effects](./filters-and-effects/apply.md) - Learn more about the effects system
-- [Duotone Effects](./filters-and-effects/duotone.md) - Create two-color artistic treatments
+| Method | Description |
+| --- | --- |
+| `engine.block.createEffect('//ly.img.ubq/effect/lut_filter')` | Create a LUT filter effect instance |
+| `engine.block.setString(effect, 'effect/lut_filter/lutFileURI', uri)` | Set the LUT image URL |
+| `engine.block.setInt(effect, 'effect/lut_filter/horizontalTileCount', count)` | Set horizontal tile count |
+| `engine.block.setInt(effect, 'effect/lut_filter/verticalTileCount', count)` | Set vertical tile count |
+| `engine.block.setFloat(effect, 'effect/lut_filter/intensity', value)` | Set filter intensity (0.0-1.0) |
+| `engine.block.appendEffect(block, effect)` | Apply effect to a block |
+| `engine.block.getEffects(block)` | Get all effects on a block |
+| `engine.block.setEffectEnabled(effect, enabled)` | Enable or disable an effect |
+| `engine.block.isEffectEnabled(effect)` | Check if effect is enabled |
+| `engine.block.removeEffect(block, index)` | Remove effect at index |
+| `engine.block.destroy(effect)` | Destroy an effect instance |
+| `engine.block.supportsEffects(block)` | Check if block supports effects |
+
+
 
 ---
 
 ## 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