@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/outlines/strokes.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) > [Outlines](./outlines.md) > [Stroke (Outline)](./outlines/strokes.md)
 
@@ -6,170 +6,204 @@
 
 Add outlines around shapes, text, and graphics to enhance visual definition and create decorative effects.
 
-![Using Strokes example showing a rectangle with a styled blue dashed stroke](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 5 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-outlines-stroke-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-outlines-stroke-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-outlines-stroke-browser/)
-
-Strokes add visual outlines that define block boundaries. You can customize their color, width, line style (solid, dashed, dotted), position relative to the block edge, and corner treatment. CE.SDK provides both built-in UI controls and programmatic APIs for stroke management.
-
-```typescript file=@cesdk_web_examples/guides-outlines-stroke-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';
-
-class Example implements EditorPlugin {
-  name = 'guides-outlines-stroke-browser';
-  version = '1.0.0';
-
-  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' }
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-outlines-stroke-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-outlines-stroke-server-js)
+
+Strokes add visual outlines that define block boundaries. You can customize their color, width, line style (solid, dashed, dotted), position relative to the block edge, and corner treatment. CE.SDK provides programmatic APIs for complete stroke management in headless workflows.
+
+```typescript file=@cesdk_web_examples/guides-outlines-stroke-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 Server Guide: Using Strokes
+ *
+ * Demonstrates how to add and customize strokes (outlines) programmatically:
+ * - Checking stroke support on blocks
+ * - Enabling and disabling strokes
+ * - Setting stroke color and width
+ * - Applying stroke styles (solid, dashed, dotted)
+ * - Controlling stroke position relative to block edges
+ * - Adjusting stroke corner geometry
+ * - Exporting the result
+ */
+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
+  });
+
+  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 page = engine.block.findByType('page')[0];
 
     // Create a graphic block with a rectangle shape
-    const block = engine.block.create('graphic');
-    engine.block.setShape(block, engine.block.createShape('rect'));
-    engine.block.appendChild(page, block);
-
-    // Position and size the block
-    engine.block.setPositionX(block, 200);
-    engine.block.setPositionY(block, 150);
-    engine.block.setWidth(block, 400);
-    engine.block.setHeight(block, 300);
-
-    // Add a fill so the shape is visible
-    const solidFill = engine.block.createFill('color');
-    engine.block.setFill(block, solidFill);
-    engine.block.setColor(solidFill, 'fill/color/value', {
-      r: 0.95,
+    const graphic = engine.block.create('graphic');
+    engine.block.setShape(graphic, engine.block.createShape('rect'));
+    engine.block.setWidth(graphic, 300);
+    engine.block.setHeight(graphic, 200);
+    engine.block.setPositionX(graphic, 250);
+    engine.block.setPositionY(graphic, 200);
+    engine.block.appendChild(page, graphic);
+
+    // Set a fill color so the shape is visible
+    const fill = engine.block.createFill('color');
+    engine.block.setFill(graphic, fill);
+    engine.block.setColor(fill, 'fill/color/value', {
+      r: 0.9,
+      g: 0.9,
+      b: 0.9,
+      a: 1.0
+    });
+
+    // Check if the block supports strokes before applying
+    const canHaveStroke = engine.block.supportsStroke(graphic);
+    console.log('Block supports strokes:', canHaveStroke);
+
+    // Enable stroke on the block
+    engine.block.setStrokeEnabled(graphic, true);
+
+    // Verify stroke is enabled
+    const strokeEnabled = engine.block.isStrokeEnabled(graphic);
+    console.log('Stroke enabled:', strokeEnabled);
+
+    // Set stroke color to blue (RGBA values from 0.0 to 1.0)
+    engine.block.setStrokeColor(graphic, { r: 0.2, g: 0.4, b: 0.9, a: 1.0 });
+
+    // Read the current stroke color
+    const strokeColor = engine.block.getStrokeColor(graphic);
+    console.log('Stroke color:', strokeColor);
+
+    // Set stroke width in design units
+    engine.block.setStrokeWidth(graphic, 8);
+
+    // Read the current stroke width
+    const strokeWidth = engine.block.getStrokeWidth(graphic);
+    console.log('Stroke width:', strokeWidth);
+
+    // Set stroke style to dashed
+    // Available styles: 'Solid', 'Dashed', 'DashedRound', 'Dotted',
+    // 'LongDashed', 'LongDashedRound'
+    engine.block.setStrokeStyle(graphic, 'Dashed');
+
+    // Read the current stroke style
+    const strokeStyle = engine.block.getStrokeStyle(graphic);
+    console.log('Stroke style:', strokeStyle);
+
+    // Set stroke position relative to block edge
+    // Available positions: 'Center', 'Inner', 'Outer'
+    engine.block.setStrokePosition(graphic, 'Outer');
+
+    // Read the current stroke position
+    const strokePosition = engine.block.getStrokePosition(graphic);
+    console.log('Stroke position:', strokePosition);
+
+    // Set stroke corner geometry
+    // Available geometries: 'Miter', 'Round', 'Bevel'
+    engine.block.setStrokeCornerGeometry(graphic, 'Round');
+
+    // Read the current corner geometry
+    const cornerGeometry = engine.block.getStrokeCornerGeometry(graphic);
+    console.log('Corner geometry:', cornerGeometry);
+
+    // Create additional shapes to demonstrate different stroke configurations
+
+    // Dotted stroke with inner position
+    const graphic2 = engine.block.create('graphic');
+    engine.block.setShape(graphic2, engine.block.createShape('rect'));
+    engine.block.setWidth(graphic2, 150);
+    engine.block.setHeight(graphic2, 100);
+    engine.block.setPositionX(graphic2, 50);
+    engine.block.setPositionY(graphic2, 50);
+    engine.block.appendChild(page, graphic2);
+
+    const fill2 = engine.block.createFill('color');
+    engine.block.setFill(graphic2, fill2);
+    engine.block.setColor(fill2, 'fill/color/value', {
+      r: 1.0,
+      g: 0.95,
+      b: 0.8,
+      a: 1.0
+    });
+
+    engine.block.setStrokeEnabled(graphic2, true);
+    engine.block.setStrokeColor(graphic2, { r: 0.9, g: 0.5, b: 0.1, a: 1.0 });
+    engine.block.setStrokeWidth(graphic2, 4);
+    engine.block.setStrokeStyle(graphic2, 'Dotted');
+    engine.block.setStrokePosition(graphic2, 'Inner');
+    engine.block.setStrokeCornerGeometry(graphic2, 'Miter');
+
+    // Solid stroke with bevel corners
+    const graphic3 = engine.block.create('graphic');
+    engine.block.setShape(graphic3, engine.block.createShape('rect'));
+    engine.block.setWidth(graphic3, 150);
+    engine.block.setHeight(graphic3, 100);
+    engine.block.setPositionX(graphic3, 600);
+    engine.block.setPositionY(graphic3, 50);
+    engine.block.appendChild(page, graphic3);
+
+    const fill3 = engine.block.createFill('color');
+    engine.block.setFill(graphic3, fill3);
+    engine.block.setColor(fill3, 'fill/color/value', {
+      r: 0.85,
       g: 0.95,
-      b: 0.95,
+      b: 0.85,
       a: 1.0
     });
 
-    // Check if block supports strokes
-    const canHaveStroke = engine.block.supportsStroke(block);
-    console.log('Block supports stroke:', canHaveStroke);
-
-    if (canHaveStroke) {
-      // Enable stroke on the block
-      engine.block.setStrokeEnabled(block, true);
-      const strokeIsEnabled = engine.block.isStrokeEnabled(block);
-      console.log('Stroke enabled:', strokeIsEnabled);
-
-      // Set stroke color to blue
-      engine.block.setStrokeColor(block, { r: 0.0, g: 0.4, b: 0.9, a: 1.0 });
-      const strokeColor = engine.block.getStrokeColor(block);
-      console.log('Stroke color:', strokeColor);
-
-      // Set stroke width
-      engine.block.setStrokeWidth(block, 8);
-      const strokeWidth = engine.block.getStrokeWidth(block);
-      console.log('Stroke width:', strokeWidth);
-
-      // Apply a dashed stroke style
-      engine.block.setStrokeStyle(block, 'Dashed');
-      const strokeStyle = engine.block.getStrokeStyle(block);
-      console.log('Stroke style:', strokeStyle);
-
-      // Set stroke position to outer
-      engine.block.setStrokePosition(block, 'Outer');
-      const strokePosition = engine.block.getStrokePosition(block);
-      console.log('Stroke position:', strokePosition);
-
-      // Set corner geometry to round
-      engine.block.setStrokeCornerGeometry(block, 'Round');
-      const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);
-      console.log('Stroke corner geometry:', strokeCornerGeometry);
+    engine.block.setStrokeEnabled(graphic3, true);
+    engine.block.setStrokeColor(graphic3, { r: 0.2, g: 0.6, b: 0.3, a: 1.0 });
+    engine.block.setStrokeWidth(graphic3, 6);
+    engine.block.setStrokeStyle(graphic3, 'Solid');
+    engine.block.setStrokePosition(graphic3, 'Center');
+    engine.block.setStrokeCornerGeometry(graphic3, 'Bevel');
+
+    // Export the result to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
     }
 
-    // Select the block to show it in the inspector
-    engine.block.select(block);
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/stroked-shapes.png`, buffer);
+
+    console.log('Exported result to output/stroked-shapes.png');
+  } finally {
+    // Always dispose of the engine to free resources
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
-This guide covers how to use the stroke inspector panel for interactive editing and how to apply and manage strokes programmatically using the block API.
-
-## Using the Built-in Stroke UI
-
-The CE.SDK editor includes a stroke inspector panel for interactive stroke editing. When you select a block that supports strokes, the inspector displays stroke controls:
-
-- **Enable toggle** - Turn strokes on or off for the selected block
-- **Color picker** - Choose the stroke color with full RGBA support
-- **Width control** - Adjust stroke thickness using a slider or input field
-- **Style dropdown** - Select from solid, dashed, or dotted line patterns
-- **Position options** - Choose where the stroke renders relative to the block edge (inner, center, or outer)
-
-These controls provide a visual interface for users to customize strokes without writing code.
+This guide covers how to apply and manage strokes programmatically using the block API.
 
 ## Checking Stroke Support
 
 Before applying strokes programmatically, verify the block supports them using `supportsStroke()`. Not all block types have stroke capabilities.
 
 ```typescript highlight=highlight-check-support
-// Check if block supports strokes
-const canHaveStroke = engine.block.supportsStroke(block);
-console.log('Block supports stroke:', canHaveStroke);
+// Check if the block supports strokes before applying
+const canHaveStroke = engine.block.supportsStroke(graphic);
+console.log('Block supports strokes:', canHaveStroke);
 ```
 
 ## Enabling Strokes
@@ -177,10 +211,12 @@ console.log('Block supports stroke:', canHaveStroke);
 Enable strokes on a block using `setStrokeEnabled()`. You can check the current state with `isStrokeEnabled()`.
 
 ```typescript highlight=highlight-enable-stroke
-// Enable stroke on the block
-engine.block.setStrokeEnabled(block, true);
-const strokeIsEnabled = engine.block.isStrokeEnabled(block);
-console.log('Stroke enabled:', strokeIsEnabled);
+    // Enable stroke on the block
+    engine.block.setStrokeEnabled(graphic, true);
+
+    // Verify stroke is enabled
+    const strokeEnabled = engine.block.isStrokeEnabled(graphic);
+    console.log('Stroke enabled:', strokeEnabled);
 ```
 
 ## Setting Stroke Color
@@ -188,10 +224,12 @@ console.log('Stroke enabled:', strokeIsEnabled);
 Control stroke color using `setStrokeColor()` with an RGBA color object. Color values range from 0.0 to 1.0. Retrieve the current color with `getStrokeColor()`.
 
 ```typescript highlight=highlight-stroke-color
-// Set stroke color to blue
-engine.block.setStrokeColor(block, { r: 0.0, g: 0.4, b: 0.9, a: 1.0 });
-const strokeColor = engine.block.getStrokeColor(block);
-console.log('Stroke color:', strokeColor);
+    // Set stroke color to blue (RGBA values from 0.0 to 1.0)
+    engine.block.setStrokeColor(graphic, { r: 0.2, g: 0.4, b: 0.9, a: 1.0 });
+
+    // Read the current stroke color
+    const strokeColor = engine.block.getStrokeColor(graphic);
+    console.log('Stroke color:', strokeColor);
 ```
 
 ## Setting Stroke Width
@@ -199,10 +237,12 @@ console.log('Stroke color:', strokeColor);
 Set stroke thickness in design units using `setStrokeWidth()`. Larger values create more prominent outlines. Get the current width with `getStrokeWidth()`.
 
 ```typescript highlight=highlight-stroke-width
-// Set stroke width
-engine.block.setStrokeWidth(block, 8);
-const strokeWidth = engine.block.getStrokeWidth(block);
-console.log('Stroke width:', strokeWidth);
+    // Set stroke width in design units
+    engine.block.setStrokeWidth(graphic, 8);
+
+    // Read the current stroke width
+    const strokeWidth = engine.block.getStrokeWidth(graphic);
+    console.log('Stroke width:', strokeWidth);
 ```
 
 ## Stroke Styles
@@ -217,10 +257,14 @@ Control the line pattern using `setStrokeStyle()`. Available styles include:
 - **LongDashedRound** - Longer round-ended dashes
 
 ```typescript highlight=highlight-stroke-style
-// Apply a dashed stroke style
-engine.block.setStrokeStyle(block, 'Dashed');
-const strokeStyle = engine.block.getStrokeStyle(block);
-console.log('Stroke style:', strokeStyle);
+    // Set stroke style to dashed
+    // Available styles: 'Solid', 'Dashed', 'DashedRound', 'Dotted',
+    // 'LongDashed', 'LongDashedRound'
+    engine.block.setStrokeStyle(graphic, 'Dashed');
+
+    // Read the current stroke style
+    const strokeStyle = engine.block.getStrokeStyle(graphic);
+    console.log('Stroke style:', strokeStyle);
 ```
 
 ## Stroke Position
@@ -234,10 +278,13 @@ Control where the stroke renders relative to the block edge using `setStrokePosi
 Position affects how strokes interact with adjacent elements and overall layout dimensions. Inner strokes stay within the block bounds, while outer strokes extend beyond them.
 
 ```typescript highlight=highlight-stroke-position
-// Set stroke position to outer
-engine.block.setStrokePosition(block, 'Outer');
-const strokePosition = engine.block.getStrokePosition(block);
-console.log('Stroke position:', strokePosition);
+    // Set stroke position relative to block edge
+    // Available positions: 'Center', 'Inner', 'Outer'
+    engine.block.setStrokePosition(graphic, 'Outer');
+
+    // Read the current stroke position
+    const strokePosition = engine.block.getStrokePosition(graphic);
+    console.log('Stroke position:', strokePosition);
 ```
 
 ## Stroke Corner Geometry
@@ -249,10 +296,13 @@ Control how stroke corners are rendered using `setStrokeCornerGeometry()`. This
 - **Bevel** - Flat cut corners
 
 ```typescript highlight=highlight-stroke-corner
-// Set corner geometry to round
-engine.block.setStrokeCornerGeometry(block, 'Round');
-const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);
-console.log('Stroke corner geometry:', strokeCornerGeometry);
+    // Set stroke corner geometry
+    // Available geometries: 'Miter', 'Round', 'Bevel'
+    engine.block.setStrokeCornerGeometry(graphic, 'Round');
+
+    // Read the current corner geometry
+    const cornerGeometry = engine.block.getStrokeCornerGeometry(graphic);
+    console.log('Corner geometry:', cornerGeometry);
 ```
 
 ## Troubleshooting
@@ -282,11 +332,13 @@ If strokes don't appear as expected, check these common issues:
 | `block.setStrokeCornerGeometry(block, type)` | Set corner rendering (Miter, Round, Bevel)     |
 | `block.getStrokeCornerGeometry(block)`       | Get current corner geometry                    |
 
+
+
 ---
 
 ## 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

package/assets/docs/guide/outlines.md

@@ -1,9 +1,13 @@
-> 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) > [Outlines](./outlines.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
@@ -12,11 +16,12 @@
 - [Using Strokes](./outlines/strokes.md) - Add and customize outlines around shapes, text, or images using stroke settings.
 - [Shadows and Glows](./outlines/shadows-and-glows.md) - Add visual depth and emphasis to design elements using drop shadows and glow 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

package/assets/docs/guide/overview.md

@@ -1,22 +1,30 @@
-> 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 Videos](./create-video.md) > [Editing Overview](./overview.md)
 
 ---
 
-Use CreativeEditor SDK (CE.SDK) to build robust video editing experiences directly in your app. CE.SDK supports both video and audio editing — including trimming, joining, adding text, annotating, and more — all performed client-side without requiring a server. Developers can integrate editing functionality using a built-in UI or programmatically via the SDK API.
+Use CreativeEditor SDK (CE.SDK) to build robust video editing experiences directly in your app. CE.SDK supports both video and audio editing — including trimming, joining, adding text, annotating, and more — all performed from the server. You can automate editing actions via the SDK API.
 
-CE.SDK also supports music and sound effects alongside video editing. You can integrate custom or third-party AI models to streamline creative workflows, such as converting image to video or generating clips from text.
+Alongside video editing, CE.SDK also supports:
+
+- Voiceover
+- Music
+- Sound effects
+
+You can integrate custom or third-party AI models to streamline creative workflows, such as converting an image to video or generating clips from text.
 
 [Launch Web Demo](https://img.ly/showcases/cesdk)
 
 [Get Started](./get-started/overview.md)
 
+
+
 ---
 
 ## 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