@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/insert-media/videos.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) > [Insert Media Assets](./insert-media.md) > [Insert Videos](./insert-media/videos.md)
 
@@ -6,220 +6,181 @@
 
 Insert videos into your CE.SDK scenes using either the convenience API or manual block creation with video fills.
 
-![Insert Videos example showing the CE.SDK editor with video insertion buttons](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 8 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-insert-media-videos-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-insert-media-videos-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-insert-media-videos-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-insert-media-videos-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-insert-media-videos-server-js)
 
-Videos in CE.SDK are graphic blocks with video fills. Two approaches exist: the `addVideo()` convenience method, and manual block creation with video fills.
+<NodejsVideoExportNotice {...props} />
 
-```typescript file=@cesdk_web_examples/guides-insert-media-videos-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-import {
-  BlurAssetSource,
-  CaptionPresetsAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { VideoEditorConfig } from './video-editor/plugin';
-import packageJson from './package.json';
-
-/**
- * CE.SDK Plugin: Insert Videos Guide
- *
- * Demonstrates inserting videos into a CE.SDK scene:
- * - Using the addVideo() convenience API
- * - Using graphic blocks with video fills
- * - Configuring trim offset and trim length
- */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (cesdk == null) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+Videos in CE.SDK are graphic blocks with video fills. Two approaches exist: the `addVideo()` convenience method, and manual block creation with video fills.
 
-    await cesdk.addPlugin(new VideoEditorConfig());
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new CaptionPresetsAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({
-        include: [
-          'ly.img.image.upload',
-          'ly.img.video.upload',
-          'ly.img.audio.upload'
-        ]
-      })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.video.*',
-          'ly.img.image.*',
-          'ly.img.audio.*',
-          'ly.img.video.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(
-      new PagePresetsAssetSource({
-        include: [
-          'ly.img.page.presets.instagram.*',
-          'ly.img.page.presets.facebook.*',
-          'ly.img.page.presets.x.*',
-          'ly.img.page.presets.linkedin.*',
-          'ly.img.page.presets.pinterest.*',
-          'ly.img.page.presets.tiktok.*',
-          'ly.img.page.presets.youtube.*',
-          'ly.img.page.presets.video.*'
-        ]
-      })
-    );
-    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', {
-      layout: 'DepthStack',
-      page: {
-        sourceId: 'ly.img.page.presets',
-        assetId: 'ly.img.page.presets.instagram.story',
-        color: { r: 0, g: 0, b: 0, a: 1 }
-      }
+```typescript file=@cesdk_web_examples/guides-insert-media-videos-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as readline from 'readline';
+import 'dotenv/config';
+
+// Helper to prompt user for confirmation
+function confirmExport(): Promise<boolean> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question('Export scene to PNG? (y/n): ', (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y');
     });
+  });
+}
+
+async function main() {
+  const config = {
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+    license: process.env.CESDK_LICENSE
+  };
+
+  const engine = await CreativeEngine.init(config);
+
+  // Create a scene
+  const scene = engine.scene.create('DepthStack');
+  const page = engine.block.create('page');
+  engine.block.setWidth(page, 1920);
+  engine.block.setHeight(page, 1080);
+  engine.block.appendChild(scene, page);
+
+  try {
+    // Video URL for demonstration
+    const videoUrl =
+      'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-702788.mp4';
+
+    // Using the convenience API - creates a graphic block with video fill automatically
+    // Creates a graphic block with video fill automatically
+    const videoBlock = await engine.block.addVideo(videoUrl, 800, 450);
+
+    // Position the video on the canvas
+    engine.block.setPositionX(videoBlock, 50);
+    engine.block.setPositionY(videoBlock, 50);
 
-    const engine = cesdk.engine;
-
-    // Videos from the ly.img.video demo asset source
-    const surferVideoUrl =
-      'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4';
-    const laptopVideoUrl =
-      'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-tony-schnagl-5528015.mp4';
-
-    const page = engine.scene.getCurrentPage();
-    if (page == null) return;
-
-    // Get page dimensions for responsive layout
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    // Layout: videos span width with margins, each takes half height
-    const margin = 40;
-    const gap = 20;
-    const videoWidth = pageWidth - margin * 2;
-    const videoHeight = (pageHeight - margin * 2 - gap) / 2;
-
-    const videoBlock = await engine.block.addVideo(
-      surferVideoUrl,
-      videoWidth,
-      videoHeight
-    );
-    engine.block.setPositionX(videoBlock, margin);
-    engine.block.setPositionY(videoBlock, margin);
-
-    const block = engine.block.create('graphic');
-    engine.block.setShape(block, engine.block.createShape('rect'));
+    console.log('Added video using convenience API');
+
+    // Manual video construction - for more control over block setup
+    // Create a graphic block container
+    const manualBlock = engine.block.create('graphic');
+
+    // Create and attach a rectangular shape
+    const shape = engine.block.createShape('rect');
+    engine.block.setShape(manualBlock, shape);
+
+    // Create a video fill and set the source URI
     const fill = engine.block.createFill('video');
-    engine.block.setString(fill, 'fill/video/fileURI', laptopVideoUrl);
-    engine.block.setFill(block, fill);
+    engine.block.setString(fill, 'fill/video/fileURI', videoUrl);
+    engine.block.setFill(manualBlock, fill);
+
+    // Set dimensions and position
+    engine.block.setWidth(manualBlock, 400);
+    engine.block.setHeight(manualBlock, 225);
+    engine.block.setPositionX(manualBlock, 50);
+    engine.block.setPositionY(manualBlock, 520);
 
-    engine.block.setWidth(block, videoWidth);
-    engine.block.setHeight(block, videoHeight);
-    engine.block.setPositionX(block, margin);
-    engine.block.setPositionY(block, margin + videoHeight + gap);
-    engine.block.appendChild(page, block);
+    // Add the block to the page
+    engine.block.appendChild(page, manualBlock);
 
-    // Force load the first video's resource for thumbnails
-    const videoBlockFill = engine.block.getFill(videoBlock);
-    await engine.block.forceLoadAVResource(videoBlockFill);
+    console.log('Added video using manual construction');
 
+    // Load video metadata before configuring trim
+    // This is required to query the total duration
     await engine.block.forceLoadAVResource(fill);
+
+    // Get the total video duration
+    const totalDuration = engine.block.getAVResourceTotalDuration(fill);
+    console.log(`Video total duration: ${totalDuration} seconds`);
+
+    // Configure trim settings on the fill (not the block)
+    // Start playback 2 seconds into the video
     engine.block.setTrimOffset(fill, 2.0);
-    engine.block.setTrimLength(fill, 5.0);
 
-    const duration = engine.block.getAVResourceTotalDuration(fill);
-    console.log(`Video duration: ${duration}s, playing 2-7s`);
+    // Play for 5 seconds (or remaining duration if video is shorter)
+    const trimLength = Math.min(5.0, totalDuration - 2.0);
+    engine.block.setTrimLength(fill, trimLength);
 
-    // Set playback time to 1 second for hero image capture
-    engine.block.setPlaybackTime(page, 1.0);
+    console.log(`Configured trim: offset=2s, length=${trimLength}s`);
 
-    // Wait a moment for thumbnails to generate
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    // Export the scene to PNG
+    const shouldExport = await confirmExport();
 
-    // Enable zoom auto-fit to keep the page in view
-    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);
+    if (shouldExport) {
+      // Export the page to PNG
+      const blob = await engine.block.export(page, { mimeType: 'image/png' });
+      const arrayBuffer = await blob.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
 
-    // Select the page for a cleaner hero image
-    engine.block.select(page);
+      // Save to output directory
+      const outputDir = path.join(process.cwd(), 'output');
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+
+      const outputPath = path.join(outputDir, 'video-thumbnails.png');
+      fs.writeFileSync(outputPath, buffer);
+      console.log(`Exported to: ${outputPath}`);
+    } else {
+      console.log('Export skipped');
+    }
+  } finally {
+    // Always dispose of the engine to free resources
+    engine.dispose();
+    console.log('Engine disposed');
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
-This guide covers how to insert videos using the UI, add videos programmatically, and configure video properties like trim offset and length.
-
-## Insert Videos Using the UI
-
-Users can upload videos through the Upload menu in the asset panel or by dragging and dropping video files directly onto the canvas. CE.SDK supports MP4 (H.264) and WebM (VP8/VP9) formats.
-
-After inserting a video, users can move it by dragging, resize it with corner handles, trim it using timeline controls, and crop it to show specific portions.
+This guide covers how to add videos programmatically and configure video properties like trim offset and length for server-side processing.
 
 ## Setup
 
-Enable video features and create a scene.
+Initialize CE.SDK and create a scene.
 
 ```typescript highlight=highlight-setup
-await cesdk.actions.run('scene.create', {
-  layout: 'DepthStack',
-  page: {
-    sourceId: 'ly.img.page.presets',
-    assetId: 'ly.img.page.presets.instagram.story',
-    color: { r: 0, g: 0, b: 0, a: 1 }
-  }
-});
+  const config = {
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+    license: process.env.CESDK_LICENSE
+  };
+
+  const engine = await CreativeEngine.init(config);
+
+  // Create a scene
+  const scene = engine.scene.create('DepthStack');
+  const page = engine.block.create('page');
+  engine.block.setWidth(page, 1920);
+  engine.block.setHeight(page, 1080);
+  engine.block.appendChild(scene, page);
 ```
 
-This creates a scene for the video composition.
+The `scene.create()` method creates a scene for the video composition.
 
 ## Add Videos with addVideo()
 
 The `addVideo()` method creates a graphic block with video fill in a single call. This is the simplest approach.
 
 ```typescript highlight=highlight-add-video-convenience
-const videoBlock = await engine.block.addVideo(
-  surferVideoUrl,
-  videoWidth,
-  videoHeight
-);
-engine.block.setPositionX(videoBlock, margin);
-engine.block.setPositionY(videoBlock, margin);
+    // Using the convenience API - creates a graphic block with video fill automatically
+    // Creates a graphic block with video fill automatically
+    const videoBlock = await engine.block.addVideo(videoUrl, 800, 450);
+
+    // Position the video on the canvas
+    engine.block.setPositionX(videoBlock, 50);
+    engine.block.setPositionY(videoBlock, 50);
 ```
 
 Pass the video URL, width, and height as parameters. The method returns the block ID for further manipulation like positioning.
@@ -228,12 +189,28 @@ Pass the video URL, width, and height as parameters. The method returns the bloc
 
 For more control, manually create a graphic block and attach a video fill.
 
-```typescript highlight=highlight-add-video-manual
-const block = engine.block.create('graphic');
-engine.block.setShape(block, engine.block.createShape('rect'));
-const fill = engine.block.createFill('video');
-engine.block.setString(fill, 'fill/video/fileURI', laptopVideoUrl);
-engine.block.setFill(block, fill);
+```typescript highlight=highlight-manual-construction
+    // Manual video construction - for more control over block setup
+    // Create a graphic block container
+    const manualBlock = engine.block.create('graphic');
+
+    // Create and attach a rectangular shape
+    const shape = engine.block.createShape('rect');
+    engine.block.setShape(manualBlock, shape);
+
+    // Create a video fill and set the source URI
+    const fill = engine.block.createFill('video');
+    engine.block.setString(fill, 'fill/video/fileURI', videoUrl);
+    engine.block.setFill(manualBlock, fill);
+
+    // Set dimensions and position
+    engine.block.setWidth(manualBlock, 400);
+    engine.block.setHeight(manualBlock, 225);
+    engine.block.setPositionX(manualBlock, 50);
+    engine.block.setPositionY(manualBlock, 520);
+
+    // Add the block to the page
+    engine.block.appendChild(page, manualBlock);
 ```
 
 Create a graphic block, attach a rectangular shape, create a video fill with the source URI, and apply the fill to the block. This pattern mirrors image fills.
@@ -243,20 +220,69 @@ Create a graphic block, attach a rectangular shape, create a video fill with the
 Control which portion of a video plays by setting the trim offset and length. First load the video resource to access duration metadata.
 
 ```typescript highlight=highlight-configure-trim
-await engine.block.forceLoadAVResource(fill);
-engine.block.setTrimOffset(fill, 2.0);
-engine.block.setTrimLength(fill, 5.0);
+    // Load video metadata before configuring trim
+    // This is required to query the total duration
+    await engine.block.forceLoadAVResource(fill);
+
+    // Get the total video duration
+    const totalDuration = engine.block.getAVResourceTotalDuration(fill);
+    console.log(`Video total duration: ${totalDuration} seconds`);
+
+    // Configure trim settings on the fill (not the block)
+    // Start playback 2 seconds into the video
+    engine.block.setTrimOffset(fill, 2.0);
+
+    // Play for 5 seconds (or remaining duration if video is shorter)
+    const trimLength = Math.min(5.0, totalDuration - 2.0);
+    engine.block.setTrimLength(fill, trimLength);
 ```
 
 The `setTrimOffset()` method specifies where playback starts. A value of 2.0 skips the first two seconds. The `setTrimLength()` method defines how long the clip plays from that offset.
 
 > **Note:** Trim operations are applied to the fill, not the block. Use `getFill()` to get the fill ID first.
 
+## Export and Cleanup
+
+Export the scene to an image file and dispose of the engine to free resources.
+
+```typescript highlight=highlight-export
+    // Export the scene to PNG
+    const shouldExport = await confirmExport();
+
+    if (shouldExport) {
+      // Export the page to PNG
+      const blob = await engine.block.export(page, { mimeType: 'image/png' });
+      const arrayBuffer = await blob.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+
+      // Save to output directory
+      const outputDir = path.join(process.cwd(), 'output');
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+
+      const outputPath = path.join(outputDir, 'video-thumbnails.png');
+      fs.writeFileSync(outputPath, buffer);
+      console.log(`Exported to: ${outputPath}`);
+    } else {
+      console.log('Export skipped');
+    }
+```
+
+For server-side processing, export to PNG for video thumbnails or use the video export APIs for full video rendering.
+
+```typescript highlight=highlight-cleanup
+// Always dispose of the engine to free resources
+engine.dispose();
+```
+
+Always call `dispose()` in a finally block to ensure proper cleanup even when errors occur.
+
 ## Supported Video Formats
 
 CE.SDK supports common web video formats:
 
-- **MP4 (H.264 codec)** — widest browser support, recommended for most use cases
+- **MP4 (H.264 codec)** — widest platform support, recommended for most use cases
 - **WebM (VP8/VP9 codec)** — open format with good compression
 
 For maximum compatibility, use MP4 with H.264 encoding.
@@ -278,31 +304,38 @@ For maximum compatibility, use MP4 with H.264 encoding.
 
 ## API Reference
 
-| Method                                             | Description                        |
-| -------------------------------------------------- | ---------------------------------- |
-| `block.addVideo(url, width, height)`               | Create video block with video fill |
-| `block.create('graphic')`                          | Create graphic block container     |
-| `block.createShape('rect')`                        | Create rectangular shape           |
-| `block.setShape(block, shape)`                     | Apply shape to block               |
-| `block.createFill('video')`                        | Create video fill                  |
-| `block.setString(fill, 'fill/video/fileURI', url)` | Set video source URI               |
-| `block.setFill(block, fill)`                       | Apply fill to block                |
-| `block.forceLoadAVResource(fill)`                  | Load video metadata                |
-| `block.getAVResourceTotalDuration(fill)`           | Get video duration in seconds      |
-| `block.setTrimOffset(fill, seconds)`               | Set trim start point               |
-| `block.setTrimLength(fill, seconds)`               | Set trim duration                  |
+| Method | Description |
+|--------|-------------|
+| `block.addVideo(url, width, height)` | Create video block with video fill |
+| `block.create('graphic')` | Create graphic block container |
+| `block.createShape('rect')` | Create rectangular shape |
+| `block.setShape(block, shape)` | Apply shape to block |
+| `block.createFill('video')` | Create video fill |
+| `block.setString(fill, 'fill/video/fileURI', url)` | Set video source URI |
+| `block.setFill(block, fill)` | Apply fill to block |
+| `block.getFill(block)` | Get fill block from graphic block |
+| `block.forceLoadAVResource(fill)` | Load video metadata |
+| `block.getAVResourceTotalDuration(fill)` | Get video duration in seconds |
+| `block.setTrimOffset(fill, seconds)` | Set trim start point |
+| `block.setTrimLength(fill, seconds)` | Set trim duration |
+| `block.export(block, options)` | Export block to image blob |
+| `scene.create()` | Create a scene |
+| `scene.getCurrentPage()` | Get current scene page |
+| `engine.dispose()` | Dispose engine and free resources |
 
 ## Next Steps
 
-- [Create video projects](./create-video/overview.md) with timeline editing
+- [Learn about video fills](./fills/video.md) for advanced video configuration
 - [Apply filters and effects](./filters-and-effects/apply.md) to enhance appearance
 - [Export your design](./export-save-publish/export/overview.md) to various formats
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/insert-media.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) > [Insert Media Assets](./insert-media.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
@@ -12,13 +16,14 @@
 - [Insert Images](./insert-media/images.md) - Documentation for Insert Images
 - [Insert Videos](./insert-media/videos.md) - Learn how to insert videos into CE.SDK scenes using the convenience API or manual block creation with video fills.
 - [Insert Audio](./insert-media/audio.md) - Add audio files to your video projects programmatically, configure timeline position, volume, and playback properties.
-- [Insert Shapes or Stickers](./insert-media/shapes-or-stickers.md) - Add shapes and stickers to your designs using CE.SDK. Create rectangles, ellipses, stars, polygons, lines, and custom vector paths programmatically or through the built-in UI.
+- [Insert Shapes or Stickers](./insert-media/shapes-or-stickers.md) - Add shapes and stickers to your designs using CE.SDK in a Node.js environment. Create rectangles, ellipses, stars, polygons, lines, and custom vector paths programmatically.
+
 
 ---
 
 ## 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/key-capabilities.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:** [Concepts](./concepts.md) > [Key Capabilities](./key-capabilities.md)
 
@@ -14,11 +14,43 @@ It’s designed for developers, product teams, and technical decision-makers eva
 - Custom-built rendering engine for consistent cross-platform performance
 - Flexible enough for both low-code and fully custom implementations
 
+## Multi-modal
+
+CE.SDK supports a wide range of content types and formats:
+
+- Input types: images, video, audio, structured data, templates
+- Output formats: PNG, JPEG, WebP, PDF, raw data
+
+All operations—including export—run client-side, ensuring fast performance and data privacy.
+
+## Extensibility
+
+Need to add a custom feature or integrate with your backend? CE.SDK supports extensibility at multiple levels:
+
+- Backend data integrations (e.g., asset management systems)
+- Custom logic or validation rules
+- Advanced export workflows
+
+The SDK’s plugin architecture ensures you can scale your functionality without rebuilding the core editor.
+
+## Content Libraries
+
+CE.SDK ships with a robust system for managing reusable content:
+
+- Built-in libraries of stickers, icons, overlays, and fonts
+- Integration with third-party providers like Getty Images, Unsplash
+- Programmatic filtering and categorization
+- Organize by brand, user, or use case
+
+This makes it easy to deliver a seamless editing experience—no matter how many assets you manage.
+
+
+
 ---
 
 ## 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/key-concepts.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:** [Concepts](./concepts.md) > [Key Concepts](./key-concepts.md)
 
@@ -73,11 +73,13 @@ While UI configurations provide a solid foundation, you maintain control over th
 
 The plugin architecture lets you add custom buttons and panels throughout the interface, ensuring the editor feels native to your product.
 
+
+
 ---
 
 ## 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