@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/open-the-editor/import-design.md

@@ -1,241 +1,203 @@
-> 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) > [Open the Editor](./open-the-editor.md) > [Import a Design](./open-the-editor/import-design.md)
 
 ---
 
-Open existing designs from various sources in CE.SDK, including saved scenes, professional design tool files, and source media.
-
-![Import Design example showing different methods to load designs into CE.SDK](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Import existing designs in headless Node.js environments using CE.SDK, including saved scenes, archives, and source media.
 
 > **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-open-the-editor-import-design-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-import-design-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-import-design-browser/)
-
-CE.SDK supports multiple import methods to bring designs into the editor. Load saved **scene files** or self-contained **archives**, create editable scenes from images and videos, or import from professional design tools.
-
-```typescript file=@cesdk_web_examples/guides-open-the-editor-import-design-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 { calculateGridLayout } from './utils';
-import packageJson from './package.json';
-
-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: {
-        sourceId: 'ly.img.page.presets',
-        assetId: 'ly.img.page.presets.print.iso.a6.landscape'
-      }
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-open-the-editor-import-design-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-import-design-server-js)
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-import-design-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { mkdirSync, writeFileSync } from 'fs';
+import path from 'path';
+
+// Load environment variables
+config();
+
+/**
+ * CE.SDK Server Guide: Import a Design
+ *
+ * Demonstrates different methods to import designs in headless mode:
+ * - Loading scenes from URLs
+ * - Loading scenes from strings
+ * - Loading scenes from archives
+ * - Creating scenes from images
+ * - Creating scenes from videos
+ */
+
+// 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)
+});
+
+try {
+  mkdirSync('output', { recursive: true });
+
+  // ========================================
+  // Demonstration 1: Create Scene from Image
+  // ========================================
+  // Start with creating a scene from an image (no preexisting scene needed)
+
+  // Create a scene based on an existing image
+  const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+
+  // Create a scene sized to the image with the image as content
+  await engine.scene.createFromImage(imageUrl);
+
+  // The scene is ready for editing with the image as the base
+
+  console.log('✓ Created scene from image');
+
+  // Export the image-based scene
+  const page1 = engine.block.findByType('page')[0];
+  if (page1) {
+    const imageBlob = await engine.block.export(page1, {
+      mimeType: 'image/png'
     });
+    const imageBuffer = Buffer.from(await imageBlob.arrayBuffer());
+    writeFileSync('output/image-import-result.png', imageBuffer);
+    console.log('📄 Exported image scene to: output/image-import-result.png');
+  }
+
+  // ========================================
+  // Demonstration 2: Load Scene from String
+  // ========================================
+  // Save the current scene to demonstrate loading from string
 
-    const engine = cesdk.engine;
+  const sceneString = await engine.scene.saveToString();
 
-    // ===== Method 1: Load Scene from URL =====
-    // URL to a saved CE.SDK scene file
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const sceneUrl =
-      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+  // Scene content as a string (from saveToString() or storage)
+  const savedSceneString = sceneString;
 
-    // Load the scene from remote URL
-    // await engine.scene.loadFromURL(sceneUrl);
+  // Load the scene from string content
+  await engine.scene.loadFromString(savedSceneString);
 
-    // The scene is now loaded and ready for editing
-    // All blocks and properties from the saved scene are restored
+  // The scene is restored from the string representation
 
-    // ===== Method 2: Load Scene from String =====
-    // Scene content as a string (from localStorage, database, or saveToString())
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const savedSceneString = '{ /* scene JSON content */ }';
+  console.log('✓ Loaded scene from string');
 
-    // Load the scene from string content
-    // await engine.scene.loadFromString(savedSceneString);
+  // ========================================
+  // Demonstration 3: Load from Archive
+  // ========================================
+  // Create and load an archive
 
-    // The scene is restored from the string representation
-    // This is useful for offline storage or database persistence
+  const archiveBlob = await engine.scene.saveToArchive();
+  const archiveBuffer = Buffer.from(await archiveBlob.arrayBuffer());
+  writeFileSync('output/temp-archive.zip', archiveBuffer);
 
-    // ===== Method 3: Load from Archive URL =====
-    // Archive URL from cloud storage, CDN, or user upload
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const archiveUrl = 'https://example.com/designs/project-bundle.zip';
+  // In server environments, load archives using file:// URLs
+  // This works the same as loading from HTTP/HTTPS URLs
 
-    // Load the archive using loadFromArchiveURL
-    // await engine.scene.loadFromArchiveURL(archiveUrl);
+  // Convert filesystem path to file:// URL
+  const archivePath = path.resolve('output/temp-archive.zip');
+  const archiveFileUrl = `file://${archivePath}`;
 
-    // Archives include all assets, making them portable across environments
-    // No external asset URLs need to be accessible
+  // Load the archive using loadFromArchiveURL
+  await engine.scene.loadFromArchiveURL(archiveFileUrl);
 
-    // ===== Method 4: Create Scene from Image =====
-    // Create an editable scene from an existing image
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  // Archives include all assets, making them portable across environments
+  // No external asset URLs need to be accessible
 
-    // Create a scene sized to the image dimensions
-    // await engine.scene.createFromImage(imageUrl);
+  console.log('✓ Loaded scene from archive');
 
-    // The image becomes the base content, ready for editing
-    // You can now add text, shapes, effects, etc.
+  // ========================================
+  // Demonstration 4: Load Scene from URL
+  // ========================================
 
-    // ===== Method 5: Create Scene from Video =====
-    // Create a video editing scene from an existing video
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const videoUrl =
-      'https://img.ly/static/ubq_samples/videos/pexels-drone-footage-of-a-surfer-by-ben-chewar-5368886_360p.mp4';
+  // URL to a saved CE.SDK scene file
+  const sceneUrl =
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
 
-    // Create a scene from an existing video
-    // await engine.scene.createFromVideo(videoUrl);
+  // Load the scene from remote URL
+  await engine.scene.loadFromURL(sceneUrl);
 
-    // The scene is set up with timeline controls for video editing
+  // The scene is now loaded and ready for editing
+  // All blocks and properties from the saved scene are restored
 
-    // ===== Method 6: Modify Loaded Scene =====
-    // Show that loaded scenes can be modified immediately
-    // Find elements in the loaded scene
-    // const textBlocks = engine.block.findByType('text');
-    // if (textBlocks.length > 0) {
-    //   engine.block.setString(textBlocks[0], 'text/text', 'Scene Imported & Modified');
-    //   // Scene loads can be undone: engine.editor.undo();
-    // }
+  console.log('✓ Loaded scene from URL');
 
-    // Create a visual demonstration showing different import sources
+  // ========================================
+  // Demonstration 5: Modify Loaded Scene
+  // ========================================
 
-    const demoPage = engine.block.findByType('page')[0];
+  // Modify the loaded scene - all blocks are accessible
+  const pages = engine.block.findByType('page');
+  const page = pages[0];
 
-    // Set page dimensions for proper grid layout
-    engine.block.setWidth(demoPage, 1920);
-    engine.block.setHeight(demoPage, 1080);
+  if (page) {
+    // Find all graphic blocks in the scene
+    const graphics = engine.block.findByType('graphic');
 
-    const layout = calculateGridLayout(1920, 1080, 4, {
-      spacing: 30,
-      margin: 60
-    });
+    // Modify properties of the first graphic if it exists
+    if (graphics.length > 0) {
+      const graphic = graphics[0];
 
-    // Create demonstration blocks showing different sources
-    const demoImage1 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_1.jpg',
-      {
-        ...layout.getPosition(0),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
-
-    const demoImage2 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_2.jpg',
-      {
-        ...layout.getPosition(1),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
-
-    const demoImage3 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_3.jpg',
-      {
-        ...layout.getPosition(2),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
-
-    const demoImage4 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_4.jpg',
-      {
-        ...layout.getPosition(3),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
-
-    // Add labels to each demonstration
-    const labels = ['From URL', 'From String', 'From Archive', 'From Media'];
-
-    [demoImage1, demoImage2, demoImage3, demoImage4].forEach((block, index) => {
-      engine.block.appendChild(demoPage, block);
-
-      // Add text label below each image
-      const label = engine.block.create('text');
-      const pos = layout.getPosition(index);
-      engine.block.setString(label, 'text/text', labels[index]);
-      engine.block.setWidth(label, layout.blockWidth);
-      engine.block.setPositionX(label, pos.x);
-      engine.block.setPositionY(label, pos.y + layout.blockHeight + 10);
-      engine.block.setFloat(label, 'text/fontSize', 24);
-      engine.block.setColor(label, 'fill/solid/color', {
-        r: 0.2,
-        g: 0.2,
-        b: 0.2,
-        a: 1.0
-      });
-      engine.block.appendChild(demoPage, label);
-    });
+      // Example: Adjust opacity
+      engine.block.setOpacity(graphic, 0.8);
 
-    // Zoom to show the full grid
-    await engine.scene.zoomToBlock(demoPage, {
-      padding: 40
+      // Example: Adjust position
+      const currentX = engine.block.getPositionX(graphic);
+      engine.block.setPositionX(graphic, currentX + 10);
+    }
+  }
+
+  console.log('✓ Modified loaded scene');
+
+  // Export the final result
+  const page2 = engine.block.findByType('page')[0];
+  if (page2) {
+    const finalBlob = await engine.block.export(page2, {
+      mimeType: 'image/png',
+      targetWidth: 800,
+      targetHeight: 600
     });
+    const finalBuffer = Buffer.from(await finalBlob.arrayBuffer());
+    writeFileSync('output/import-design-result.png', finalBuffer);
+    console.log('📄 Exported final result to: output/import-design-result.png');
   }
-}
 
-export default Example;
+  // ========================================
+  // Demonstration 6: Create Scene from Video
+  // ========================================
+
+  // Create a scene configured for video editing
+  const videoUrl =
+    'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barreling-a-wave-18069232.mp4';
+
+  // Create a video scene with timeline support
+  await engine.scene.createFromVideo(videoUrl);
+
+  // The scene is set up for video editing with timeline controls
+
+  console.log('✓ Created scene from video');
+
+  console.log('\n✓ Import Design guide completed successfully!');
+} finally {
+  // Always dispose the engine
+  engine.dispose();
+  console.log('\n🧹 Engine disposed successfully');
+}
 ```
 
-This guide covers how to load saved CE.SDK scenes and create scenes from media files.
+CE.SDK's headless Node.js SDK supports multiple import methods to bring designs into the engine. Load saved **scene files** or self-contained **archives**, create editable scenes from images and videos for server-side processing, batch operations, and automation workflows.
+
+This guide covers how to load saved CE.SDK scenes and create scenes from media files in a Node.js environment.
 
 ## Understanding Import Methods
 
-CE.SDK provides several approaches for importing designs:
+CE.SDK provides several approaches for importing designs in headless mode:
 
 - **Scene files** – Load lightweight JSON files that reference assets by URL
 - **Archives** – Load self-contained packages that bundle scenes with all assets ([See dedicated guide](./open-the-editor/import-design/from-archive.md))
@@ -251,42 +213,39 @@ Load previously saved scenes to resume editing work. CE.SDK provides three metho
 
 ### From a URL
 
-Use `engine.scene.loadFromURL()` to load scenes from a server or cloud storage. This works well for cloud-based editing where users access designs from any device.
+Use `engine.scene.loadFromURL()` to load scenes from a server or cloud storage. This works well for cloud-based processing where scenes are stored remotely.
 
 ```typescript highlight-load-from-url
-// URL to a saved CE.SDK scene file
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const sceneUrl =
-  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+  // URL to a saved CE.SDK scene file
+  const sceneUrl =
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
 
-// Load the scene from remote URL
-// await engine.scene.loadFromURL(sceneUrl);
+  // Load the scene from remote URL
+  await engine.scene.loadFromURL(sceneUrl);
 
-// The scene is now loaded and ready for editing
-// All blocks and properties from the saved scene are restored
+  // The scene is now loaded and ready for editing
+  // All blocks and properties from the saved scene are restored
 ```
 
 The engine fetches the scene file asynchronously and replaces the current scene with the loaded content. All asset URLs referenced in the scene must remain accessible for the scene to render correctly.
 
 ### From a String
 
-Use `engine.scene.loadFromString()` when you have scene content as a string from local storage, a database, or a previous `engine.scene.saveToString()` call.
+Use `engine.scene.loadFromString()` when you have scene content as a string from a database, file system, or a previous `engine.scene.saveToString()` call.
 
 ```typescript highlight-load-from-string
-// Scene content as a string (from localStorage, database, or saveToString())
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const savedSceneString = '{ /* scene JSON content */ }';
+  // Scene content as a string (from saveToString() or storage)
+  const savedSceneString = sceneString;
 
-// Load the scene from string content
-// await engine.scene.loadFromString(savedSceneString);
+  // Load the scene from string content
+  await engine.scene.loadFromString(savedSceneString);
 
-// The scene is restored from the string representation
-// This is useful for offline storage or database persistence
+  // The scene is restored from the string representation
 ```
 
-This approach works well for offline-first applications or when integrating with custom storage systems that return scene data as strings.
+This approach works well for scenes stored in databases or when integrating with custom storage systems that return scene data as strings.
 
-### From an Archive URL
+### From an Archive
 
 For self-contained packages that bundle the scene with all assets, use archives. See the [Import Design from Archive](./open-the-editor/import-design/from-archive.md) guide for complete details on working with archive files.
 
@@ -299,15 +258,13 @@ Create editable scenes directly from images or videos.
 Use `engine.scene.createFromImage()` to create a design based on an existing image. This creates a scene sized to the image dimensions with the image as the primary content.
 
 ```typescript highlight-create-from-image
-// Create an editable scene from an existing image
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  // Create a scene based on an existing image
+  const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
 
-// Create a scene sized to the image dimensions
-// await engine.scene.createFromImage(imageUrl);
+  // Create a scene sized to the image with the image as content
+  await engine.scene.createFromImage(imageUrl);
 
-// The image becomes the base content, ready for editing
-// You can now add text, shapes, effects, etc.
+  // The scene is ready for editing with the image as the base
 ```
 
 The scene is ready for editing. You can add text, shapes, effects, and other design elements on top of the base image.
@@ -317,15 +274,14 @@ The scene is ready for editing. You can add text, shapes, effects, and other des
 Use `engine.scene.createFromVideo()` to create a scene from a video file, automatically setting up dimensions and duration.
 
 ```typescript highlight-create-from-video
-// Create a video editing scene from an existing video
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const videoUrl =
-  'https://img.ly/static/ubq_samples/videos/pexels-drone-footage-of-a-surfer-by-ben-chewar-5368886_360p.mp4';
+  // Create a scene configured for video editing
+  const videoUrl =
+    'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barreling-a-wave-18069232.mp4';
 
-// Create a scene from an existing video
-// await engine.scene.createFromVideo(videoUrl);
+  // Create a video scene with timeline support
+  await engine.scene.createFromVideo(videoUrl);
 
-// The scene is set up with timeline controls for video editing
+  // The scene is set up for video editing with timeline controls
 ```
 
 The scene is set up for video editing with time-based properties and video-specific features.
@@ -354,33 +310,47 @@ Always wrap import operations in try-catch blocks to handle failures gracefully:
 try {
   await engine.scene.loadFromURL(sceneUrl);
 } catch (error) {
-  // Show user-friendly error message
+  // Log error and handle gracefully
   console.error('Failed to load scene:', error);
   // Optionally fall back to a default scene
   await engine.scene.create();
 }
 ```
 
-Provide specific error messages based on failure type (network errors, invalid files, CORS issues).
+Provide specific error handling based on failure type (network errors, invalid files, missing assets).
 
 ## Working with Loaded Scenes
 
 Modify loaded scenes immediately using CE.SDK's editing APIs. All blocks are accessible for modification.
 
 ```typescript highlight-modify-loaded-scene
-// Find elements in the loaded scene
-// const textBlocks = engine.block.findByType('text');
-// if (textBlocks.length > 0) {
-//   engine.block.setString(textBlocks[0], 'text/text', 'Scene Imported & Modified');
-//   // Scene loads can be undone: engine.editor.undo();
-// }
+  // Modify the loaded scene - all blocks are accessible
+  const pages = engine.block.findByType('page');
+  const page = pages[0];
+
+  if (page) {
+    // Find all graphic blocks in the scene
+    const graphics = engine.block.findByType('graphic');
+
+    // Modify properties of the first graphic if it exists
+    if (graphics.length > 0) {
+      const graphic = graphics[0];
+
+      // Example: Adjust opacity
+      engine.block.setOpacity(graphic, 0.8);
+
+      // Example: Adjust position
+      const currentX = engine.block.getPositionX(graphic);
+      engine.block.setPositionX(graphic, currentX + 10);
+    }
+  }
 ```
 
 Scene loads can be reverted using `engine.editor.undo()` if you need to return to the previous state.
 
 ## Performance Considerations
 
-Consider these factors when importing designs to ensure optimal performance:
+Consider these factors when importing designs in Node.js environments:
 
 ### File Size and Loading Time
 
@@ -388,8 +358,6 @@ Consider these factors when importing designs to ensure optimal performance:
 - **Archives** can be large (1MB-100MB+) depending on bundled assets, requiring more time to download and extract
 - **Image/video imports** depend on source media size - a 4K image may take several seconds to process
 
-Show loading indicators for imports that may take more than 500ms to complete.
-
 ### Network Performance
 
 When loading from URLs:
@@ -397,33 +365,24 @@ When loading from URLs:
 - Use CDN-hosted resources for faster downloads and reduced latency
 - Consider compression for scene files stored on your servers
 - Implement retry logic for network failures
-- Cache frequently loaded scenes in browser storage to avoid redundant network requests
+- Cache frequently loaded scenes to avoid redundant network requests
 
 ### Memory Management
 
-- Large scenes with many blocks and high-resolution assets consume more browser memory
+- Large scenes with many blocks and high-resolution assets consume more memory
 - Archives extract their contents into memory during loading
 - Video imports may require significant memory for processing
-- Consider limiting the number of simultaneous scene loads in multi-scene applications
-
-### Browser Limitations
-
-Different browsers have varying capabilities:
-
-- **File size limits**: Some browsers limit blob sizes to 500MB-2GB
-- **Network timeouts**: Long-running downloads may timeout (typically 2-5 minutes)
-- **Memory constraints**: Mobile browsers have tighter memory limits than desktop
-- **CORS restrictions**: Cross-origin asset loading requires proper CORS headers
+- Consider limiting the number of simultaneous scene loads in batch processing scenarios
 
 ### Optimization Strategies
 
 Improve import performance with these approaches:
 
-- **Preload frequently used scenes** during idle time
-- **Lazy load assets** by using archives with progressive extraction (for very large files)
+- **Preload frequently used scenes** during application startup
 - **Compress source media** before creating scenes to reduce file sizes
 - **Use appropriate formats** - archives for portability, scene files for speed
 - **Implement caching** to avoid re-downloading unchanged scenes
+- **Process in batches** when handling multiple imports to manage memory usage
 
 ## Troubleshooting
 
@@ -453,15 +412,17 @@ When `createFromImage()` or `createFromVideo()` fails:
 
 ## API Reference
 
-| Method                                 | Purpose                                 |
-| -------------------------------------- | --------------------------------------- |
-| `engine.scene.loadFromURL(url)`        | Load scene from remote URL              |
-| `engine.scene.loadFromString(content)` | Load scene from string content          |
-| `engine.scene.loadFromArchiveURL(url)` | Load archived scene with bundled assets |
-| `engine.scene.createFromImage(url)`    | Create editable scene from image        |
-| `engine.scene.createFromVideo(url)`    | Create video editing scene from video   |
-| `engine.scene.saveToString()`          | Save scene to string for later loading  |
-| `engine.scene.saveToArchive()`         | Save scene with assets as ZIP archive   |
+| Method                                     | Purpose                                     |
+| ------------------------------------------ | ------------------------------------------- |
+| `engine.scene.loadFromURL(url)`            | Load scene from remote URL                  |
+| `engine.scene.loadFromString(content)`     | Load scene from string content              |
+| `engine.scene.loadFromArchiveURL(url)`     | Load archived scene with bundled assets     |
+| `engine.scene.createFromImage(url)`        | Create editable scene from image            |
+| `engine.scene.createFromVideo(url)`        | Create video editing scene from video       |
+| `engine.scene.saveToString()`              | Save scene to string for later loading      |
+| `engine.scene.saveToArchive()`             | Save scene with assets as ZIP archive       |
+
+
 
 ---
 
@@ -469,13 +430,14 @@ When `createFromImage()` or `createFromVideo()` fails:
 
 - [From InDesign](./open-the-editor/import-design/from-indesign.md) - Import Adobe InDesign files (IDML format) into CE.SDK, converting them into editable scenes while preserving text, shapes, images, and positioning.
 - [From Photoshop](./open-the-editor/import-design/from-photoshop.md) - Import Adobe Photoshop (PSD) files into CE.SDK, converting them into editable scenes while preserving layers, text, shapes, and positioning.
-- [Import Design from Archive](./open-the-editor/import-design/from-archive.md) - Load self-contained CE.SDK archive files that bundle scene structure with all referenced assets for portable, reliable design imports.
+- [Import Design from Archive](./open-the-editor/import-design/from-archive.md) - Load self-contained CE.SDK archive files that bundle scene structure with all referenced assets for portable, reliable design imports in Node.js.
+
 
 ---
 
 ## 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