@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,246 +1,180 @@
-> 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) > [From Archive](./open-the-editor/import-design/from-archive.md)
 
 ---
 
-Load archived CE.SDK scenes that bundle design structure with all fonts, images, and assets in a single portable file.
-
-![Import Design from Archive example showing archive loading workflow](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Load archived CE.SDK scenes in headless Node.js environments. Archives bundle design structure with all fonts, images, and assets in a single portable file.
 
 > **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-from-archive-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-import-design-from-archive-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-import-design-from-archive-browser/)
-
-Archives solve the portability problem inherent in scene files. While scene files reference assets by URL, archives package everything together in a single `.zip` file. If asset URLs become unavailable, scene files fail to load properly. Archives avoid this issue by bundling all fonts, images, videos, and other resources directly within the archive, making them self-contained and reliable across different environments.
-
-```typescript file=@cesdk_web_examples/guides-open-the-editor-import-design-from-archive-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');
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-open-the-editor-import-design-from-archive-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-import-design-from-archive-server-js)
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-import-design-from-archive-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 Design from Archive
+ *
+ * Demonstrates different methods to import archive files in headless mode:
+ * - Loading archives from URLs (remote storage)
+ * - Loading archives from the filesystem using file:// URLs
+ * - Understanding archive portability
+ */
+
+// 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 {
+  // Create output directory for results
+  mkdirSync('output', { recursive: true });
+
+  // ========================================
+  // Demonstration: Create Demo Archive
+  // ========================================
+
+  // First, create a demo archive to work with for the examples below
+  // In production, you would load existing archives from storage
+
+  // Start by creating a scene from an image (no preexisting scene needed)
+  const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  await engine.scene.createFromImage(imageUrl);
+
+  // Save this scene as an archive
+  const demoArchiveBlob = await engine.scene.saveToArchive();
+
+  // Save the archive to filesystem for demonstration
+  const archiveBuffer = Buffer.from(await demoArchiveBlob.arrayBuffer());
+  const archivePath = path.resolve('output/demo-archive.zip');
+  writeFileSync(archivePath, archiveBuffer);
+
+  console.log('✓ Created demo archive: output/demo-archive.zip');
+
+  // ========================================
+  // Demonstration 1: Load Archive from Filesystem
+  // ========================================
+
+  // In Node.js environments, load archives from the filesystem using file:// URLs
+  // This is common for batch processing or server-side workflows
+
+  // Convert filesystem path to file:// URL
+  const archiveFileUrl = `file://${archivePath}`;
+
+  // Load the archive using the file URL
+  await engine.scene.loadFromArchiveURL(archiveFileUrl);
+
+  console.log('✓ Archive loaded from filesystem successfully');
+
+  // ========================================
+  // Demonstration 2: Load Archive from Remote URL
+  // ========================================
+
+  // When you have an archive hosted on a remote server, CDN, or cloud storage,
+  // load it directly using its URL
+
+  const loadArchiveFromUrl = async (url: string): Promise<void> => {
+    try {
+      await engine.scene.loadFromArchiveURL(url);
+      console.log('✓ Archive loaded from URL successfully');
+    } catch (error) {
+      console.error('Failed to load archive from URL:', error);
+      throw error;
     }
-    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: 1920, height: 1080, unit: 'Pixel' }
+  };
+
+  // Demonstrate loading from the local file URL we created earlier
+  await loadArchiveFromUrl(archiveFileUrl);
+
+  // ========================================
+  // Demonstration 3: Verify Archive Contents
+  // ========================================
+
+  // After loading an archive, verify the scene and its contents
+
+  // Find all blocks in the loaded scene
+  const pages = engine.block.findByType('page');
+  const graphics = engine.block.findByType('graphic');
+  const texts = engine.block.findByType('text');
+
+  console.log('\nArchive contents:');
+  console.log(`  Pages: ${pages.length}`);
+  console.log(`  Graphics: ${graphics.length}`);
+  console.log(`  Text blocks: ${texts.length}`);
+
+  // All assets are bundled, so no external URLs are needed
+  // This makes archives ideal for portability
+
+  // ========================================
+  // Demonstration 4: Modify and Re-export
+  // ========================================
+
+  // Modify the loaded scene and export it
+  const page = pages[0];
+  if (page) {
+    // Example: Adjust properties of text blocks
+    texts.forEach((textBlock) => {
+      // Make all text slightly larger
+      const currentSize = engine.block.getFloat(textBlock, 'text/fontSize');
+      engine.block.setFloat(textBlock, 'text/fontSize', currentSize * 1.1);
     });
 
-    const engine = cesdk.engine;
-
-    // ===== Method 1: Load Archive from URL =====
-    // Archives are self-contained ZIP files containing both the scene
-    // structure and all referenced assets (images, fonts, videos, etc.)
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _archiveUrl = 'https://example.com/designs/project-bundle.zip';
-
-    // Load the archive using loadFromArchiveURL
-    // await engine.scene.loadFromArchiveURL(_archiveUrl);
-
-    // The scene is now loaded with all bundled assets
-
-    // ===== Method 2: Load Archive from User Upload =====
-    // For user-uploaded archive files, create an object URL from the File
-
-    // Pattern for handling user uploads (attach to a button in your UI):
-    const handleFileUpload = async (file: File) => {
-      const userArchiveUrl = URL.createObjectURL(file);
-
-      try {
-        await engine.scene.loadFromArchiveURL(userArchiveUrl);
-        console.log('User archive loaded successfully');
-      } catch (error) {
-        console.error('Failed to load user archive:', error);
-      } finally {
-        URL.revokeObjectURL(userArchiveUrl);
-      }
-    };
-
-    // Example: Create file input for user uploads
-    // In production, attach this to your UI button
-    const fileInput = document.createElement('input');
-    fileInput.type = 'file';
-    fileInput.accept = '.zip';
-    fileInput.onchange = async (event) => {
-      const file = (event.target as HTMLInputElement).files?.[0];
-      if (file) {
-        await handleFileUpload(file);
-      }
-    };
-
-    // ===== Method 3: Load Archive from Blob =====
-    // When you have an archive as a Blob (from fetch, API, or database),
-    // create an object URL and load it
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _loadArchiveFromBlob = async (archiveBlob: Blob): Promise<void> => {
-      const blobUrl = URL.createObjectURL(archiveBlob);
-
-      try {
-        await engine.scene.loadFromArchiveURL(blobUrl);
-        console.log('Archive loaded from blob successfully');
-      } catch (error) {
-        console.error('Failed to load archive from blob:', error);
-        throw error;
-      } finally {
-        URL.revokeObjectURL(blobUrl);
-      }
-    };
-
-    // In production, this blob would come from your API or storage
-    // await _loadArchiveFromBlob(archiveBlob);
-
-    // ===== Method 4: Modify Loaded Archive =====
-    // After loading an archive, the scene is immediately editable
-    // All blocks and assets from the archive are available
-
-    // const textBlocks = engine.block.findByType('text');
-    // if (textBlocks.length > 0) {
-    //   engine.block.setString(textBlocks[0], 'text/text', 'Loaded from Archive');
-    //   // Archive loads can be undone: engine.editor.undo();
-    // }
-
-    // ===== Understanding Archive Contents =====
-    // Archives contain:
-    // 1. scene.json - The scene structure and properties
-    // 2. Asset directories (images/, fonts/, videos/, audio/)
-    // 3. Relative asset references like "./images/photo-123.jpg"
-
-    // This self-contained structure makes archives portable:
-    // - No external URL dependencies
-    // - All assets bundled together
-    // - Works offline or across different environments
-
-    // Create a visual demonstration showing the archive loading workflow
-    const page = engine.block.findByType('page')[0];
-
-    const layout = calculateGridLayout(1920, 1080, 3, {
-      spacing: 40,
-      margin: 80
+    // Export the modified scene
+    const exportBlob = await engine.block.export(page, {
+      mimeType: 'image/png',
+      targetWidth: 800,
+      targetHeight: 600
     });
+    const exportBuffer = Buffer.from(await exportBlob.arrayBuffer());
+    writeFileSync('output/modified-archive-result.png', exportBuffer);
 
-    // Create visual elements showing the workflow
-    const step1Block = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_1.jpg',
-      {
-        ...layout.getPosition(0),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
+    console.log(
+      '✓ Modified scene exported to: output/modified-archive-result.png'
     );
+  }
 
-    const step2Block = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_2.jpg',
-      {
-        ...layout.getPosition(1),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
+  // ========================================
+  // Demonstration 5: Create New Archive
+  // ========================================
 
-    const step3Block = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_3.jpg',
-      {
-        ...layout.getPosition(2),
-        size: { width: layout.blockWidth, height: layout.blockHeight }
-      }
-    );
+  // Save the modified scene as a new archive
+  const newArchiveBlob = await engine.scene.saveToArchive();
+  const newArchiveBuffer = Buffer.from(await newArchiveBlob.arrayBuffer());
+  writeFileSync('output/modified-archive.zip', newArchiveBuffer);
 
-    engine.block.appendChild(page, step1Block);
-    engine.block.appendChild(page, step2Block);
-    engine.block.appendChild(page, step3Block);
-
-    // Add labels
-    const labels = ['1. Create Archive', '2. Store Archive', '3. Load Archive'];
-
-    const blocks = [step1Block, step2Block, step3Block];
-    blocks.forEach((block, index) => {
-      engine.block.appendChild(page, block);
-
-      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 + 20);
-      engine.block.setFloat(label, 'text/fontSize', 32);
-      engine.block.setColor(label, 'fill/solid/color', {
-        r: 0.2,
-        g: 0.2,
-        b: 0.2,
-        a: 1.0
-      });
-
-      engine.block.appendChild(page, label);
-    });
+  console.log('✓ New archive saved to: output/modified-archive.zip');
 
-    // Zoom to show full canvas
-    await engine.scene.zoomToBlock(page, {
-      padding: 40
-    });
-  }
-}
+  // Archives are perfect for:
+  // - Sharing designs between systems
+  // - Offline editing workflows
+  // - Backup and versioning
+  // - Ensuring all assets are available
 
-export default Example;
+  console.log('\n✓ Import from Archive guide completed successfully!');
+} finally {
+  // Always dispose the engine
+  engine.dispose();
+  console.log('\n🧹 Engine disposed successfully');
+}
 ```
 
-This guide covers how to load archived scenes from URLs, handle user-uploaded archive files, and work with loaded archive content.
+Archives solve the portability problem inherent in scene files. While scene files reference assets by URL, archives package everything together in a single `.zip` file. If asset URLs become unavailable, scene files fail to load properly. Archives avoid this issue by bundling all fonts, images, videos, and other resources directly within the archive, making them self-contained and reliable across different environments.
+
+This guide covers how to load archived scenes from URLs, work with local files, and process archive content in Node.js workflows.
 
 ## Understanding CE.SDK Archives
 
@@ -256,136 +190,141 @@ Archives contain a predictable directory structure:
 
 The scene file references these assets with relative URIs like `./images/photo-abc123.jpg`, ensuring they're always accessible from within the archive.
 
-## Load Archive from URL
+## Load Archive from Filesystem
 
-Use `engine.scene.loadFromArchiveURL()` to load a CE.SDK archive from a remote or local URL. The engine fetches the archive, extracts its contents, and loads the scene with all bundled assets.
+In Node.js environments, you often load archives from the filesystem. This is common for batch processing, server-side workflows, and automation tasks.
 
-```typescript highlight-load-from-archive-url
-// Archives are self-contained ZIP files containing both the scene
-// structure and all referenced assets (images, fonts, videos, etc.)
+```typescript highlight-load-from-filesystem
+  // In Node.js environments, load archives from the filesystem using file:// URLs
+  // This is common for batch processing or server-side workflows
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _archiveUrl = 'https://example.com/designs/project-bundle.zip';
+  // Convert filesystem path to file:// URL
+  const archiveFileUrl = `file://${archivePath}`;
 
-// Load the archive using loadFromArchiveURL
-// await engine.scene.loadFromArchiveURL(_archiveUrl);
+  // Load the archive using the file URL
+  await engine.scene.loadFromArchiveURL(archiveFileUrl);
 
-// The scene is now loaded with all bundled assets
+  console.log('✓ Archive loaded from filesystem successfully');
 ```
 
-The method is asynchronous and returns a Promise that resolves when the archive finishes loading. The loaded scene replaces the current scene in the editor and becomes immediately editable.
+Convert filesystem paths to `file://` URLs and load using `engine.scene.loadFromArchiveURL()`. The loaded scene replaces the current scene in the engine and becomes immediately available for processing.
+
+> **Note:** **Unified API**: Both Node.js and browser environments use `engine.scene.loadFromArchiveURL(url)` to load archives. In Node.js, convert local file paths to `file://` URLs. In browsers, you can use HTTP/HTTPS URLs or object URLs created from Blobs.
 
-Always wrap archive loading in try-catch blocks to handle potential failures gracefully. Common failure scenarios include network errors, corrupted archive files, or unsupported archive formats. The error object provides details about what went wrong.
+## Load Archive from Remote URL
 
-For production usage, archive URLs typically point to cloud storage or CDN locations where archives are permanently stored. The example above demonstrates loading after creating a demo archive, but in real applications you would use existing archive URLs directly from your storage system.
+When you have an archive hosted on a remote server, CDN, or cloud storage, load it directly using its URL. The example shows a reusable function that handles URL loading with proper error handling.
 
-> **Note:** **Unified API**: Both browser and Node.js environments use `engine.scene.loadFromArchiveURL(url)` to load archives. In browsers, use HTTP/HTTPS URLs or object URLs created from Blobs. In Node.js, convert local file paths to `file://` URLs.
+```typescript highlight-load-from-url
+  // When you have an archive hosted on a remote server, CDN, or cloud storage,
+  // load it directly using its URL
 
-## Load User-Uploaded Archives
+  const loadArchiveFromUrl = async (url: string): Promise<void> => {
+    try {
+      await engine.scene.loadFromArchiveURL(url);
+      console.log('✓ Archive loaded from URL successfully');
+    } catch (error) {
+      console.error('Failed to load archive from URL:', error);
+      throw error;
+    }
+  };
+
+  // Demonstrate loading from the local file URL we created earlier
+  await loadArchiveFromUrl(archiveFileUrl);
+```
 
-For user-uploaded archive files, create an object URL from the File blob and load it using `loadFromArchiveURL()`. This pattern works for file inputs, drag-and-drop uploads, or any scenario where users provide archive files.
+This pattern is useful for:
 
-```typescript highlight-load-from-user-upload
-// For user-uploaded archive files, create an object URL from the File
+- **CDN integration** - Load archives from content delivery networks
+- **Cloud storage** - Retrieve archives from S3, GCS, or Azure Blob Storage
+- **API responses** - Load archives from backend services
+- **Remote processing** - Process archives hosted on external servers
 
-// Pattern for handling user uploads (attach to a button in your UI):
-const handleFileUpload = async (file: File) => {
-  const userArchiveUrl = URL.createObjectURL(file);
+## Verify Archive Contents
 
-  try {
-    await engine.scene.loadFromArchiveURL(userArchiveUrl);
-    console.log('User archive loaded successfully');
-  } catch (error) {
-    console.error('Failed to load user archive:', error);
-  } finally {
-    URL.revokeObjectURL(userArchiveUrl);
-  }
-};
-
-// Example: Create file input for user uploads
-// In production, attach this to your UI button
-const fileInput = document.createElement('input');
-fileInput.type = 'file';
-fileInput.accept = '.zip';
-fileInput.onchange = async (event) => {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (file) {
-    await handleFileUpload(file);
-  }
-};
+After loading an archive, verify the scene and its contents to ensure all expected elements are present.
+
+```typescript highlight-verify-contents
+  // After loading an archive, verify the scene and its contents
+
+  // Find all blocks in the loaded scene
+  const pages = engine.block.findByType('page');
+  const graphics = engine.block.findByType('graphic');
+  const texts = engine.block.findByType('text');
+
+  console.log('\nArchive contents:');
+  console.log(`  Pages: ${pages.length}`);
+  console.log(`  Graphics: ${graphics.length}`);
+  console.log(`  Text blocks: ${texts.length}`);
+
+  // All assets are bundled, so no external URLs are needed
+  // This makes archives ideal for portability
 ```
 
-The example shows a complete file upload handler that creates an input element, handles the file selection, and loads the archive with proper error handling. Object URLs are temporary references to blob data. Always revoke them with `URL.revokeObjectURL()` after loading completes to free memory. The archive content remains loaded in the scene even after the object URL is revoked.
+All blocks and assets from the archive are restored and accessible through the standard block API. Use `engine.block.findByType()` to locate specific block types and verify the scene structure.
 
-## Load Archive from Blob
+## Modify and Re-export
 
-When you have an archive as a Blob from API responses, fetch operations, or database storage, create an object URL and load it. The example shows a reusable function that handles blob loading with proper error handling and cleanup.
+Modify loaded archive scenes and export them for further processing or storage.
 
-```typescript highlight-load-from-blob
-// When you have an archive as a Blob (from fetch, API, or database),
-// create an object URL and load it
+```typescript highlight-modify-and-export
+  // Modify the loaded scene and export it
+  const page = pages[0];
+  if (page) {
+    // Example: Adjust properties of text blocks
+    texts.forEach((textBlock) => {
+      // Make all text slightly larger
+      const currentSize = engine.block.getFloat(textBlock, 'text/fontSize');
+      engine.block.setFloat(textBlock, 'text/fontSize', currentSize * 1.1);
+    });
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _loadArchiveFromBlob = async (archiveBlob: Blob): Promise<void> => {
-  const blobUrl = URL.createObjectURL(archiveBlob);
+    // Export the modified scene
+    const exportBlob = await engine.block.export(page, {
+      mimeType: 'image/png',
+      targetWidth: 800,
+      targetHeight: 600
+    });
+    const exportBuffer = Buffer.from(await exportBlob.arrayBuffer());
+    writeFileSync('output/modified-archive-result.png', exportBuffer);
 
-  try {
-    await engine.scene.loadFromArchiveURL(blobUrl);
-    console.log('Archive loaded from blob successfully');
-  } catch (error) {
-    console.error('Failed to load archive from blob:', error);
-    throw error;
-  } finally {
-    URL.revokeObjectURL(blobUrl);
+    console.log(
+      '✓ Modified scene exported to: output/modified-archive-result.png'
+    );
   }
-};
-
-// In production, this blob would come from your API or storage
-// await _loadArchiveFromBlob(archiveBlob);
 ```
 
-This pattern is useful for:
-
-- **Authenticated APIs** - Download archives from endpoints requiring authentication tokens
-- **Local storage** - Retrieve archives from IndexedDB or browser local storage
-- **Server responses** - Process archives from fetch() or XMLHttpRequest responses
-- **Data conversion** - Handle archives from various sources (base64, ArrayBuffer, etc.)
+The loaded scene is fully editable. Apply transformations, modify properties, add or remove blocks, and export the results in any supported format (PNG, JPEG, PDF, video).
 
-The function encapsulates the object URL lifecycle, ensuring proper cleanup even if loading fails.
+## Create New Archives
 
-## Modify Loaded Archives
+Save modified scenes as new archives to preserve all changes and bundled assets.
 
-After loading an archive, the scene is immediately editable. All blocks, properties, and assets from the archive are restored and accessible through the standard block API.
+```typescript highlight-create-archive
+  // Save the modified scene as a new archive
+  const newArchiveBlob = await engine.scene.saveToArchive();
+  const newArchiveBuffer = Buffer.from(await newArchiveBlob.arrayBuffer());
+  writeFileSync('output/modified-archive.zip', newArchiveBuffer);
 
-```typescript highlight-modify-loaded-archive
-// After loading an archive, the scene is immediately editable
-// All blocks and assets from the archive are available
+  console.log('✓ New archive saved to: output/modified-archive.zip');
 
-// const textBlocks = engine.block.findByType('text');
-// if (textBlocks.length > 0) {
-//   engine.block.setString(textBlocks[0], 'text/text', 'Loaded from Archive');
-//   // Archive loads can be undone: engine.editor.undo();
-// }
+  // Archives are perfect for:
+  // - Sharing designs between systems
+  // - Offline editing workflows
+  // - Backup and versioning
+  // - Ensuring all assets are available
 ```
 
-Archive loads can be reverted using `engine.editor.undo()`, which removes the loaded scene and restores the previous state. This is useful for implementing undo/redo functionality in your application.
+Archives are perfect for:
+
+- **Sharing designs between systems** - Move designs across environments without URL dependencies
+- **Offline workflows** - Process designs without network connectivity
+- **Backup and versioning** - Store complete design snapshots
+- **Ensuring asset availability** - Guarantee all resources are available
 
 ## Archive Contents and Structure
 
 Archives use standard ZIP compression with a specific internal structure that makes them self-contained. The scene file references assets using relative paths instead of absolute URLs.
 
-```typescript highlight-archive-contents
-// Archives contain:
-// 1. scene.json - The scene structure and properties
-// 2. Asset directories (images/, fonts/, videos/, audio/)
-// 3. Relative asset references like "./images/photo-123.jpg"
-
-// This self-contained structure makes archives portable:
-// - No external URL dependencies
-// - All assets bundled together
-// - Works offline or across different environments
-```
-
 This self-contained structure provides several benefits:
 
 - **No external dependencies** - All assets are bundled, so external URLs don't need to remain accessible
@@ -413,7 +352,7 @@ Use scene files when:
 
 Use archives when:
 
-- You need to share designs with others who don't have access to your asset URLs
+- You need to share designs across systems without URL dependencies
 - Assets might become unavailable at their original locations
 - You're moving designs between environments (development → production)
 - You need offline support or long-term storage
@@ -430,75 +369,86 @@ Archives solve the fundamental asset availability problem that affects scene fil
 This creates several challenges:
 
 - **URL changes** - Moving assets to different servers or CDNs breaks scene file references
-- **Authentication** - Scenes referencing authenticated URLs won't load for other users
-- **Network dependencies** - Scene files require network access to fetch assets
-- **Long-term storage** - Asset URLs may become unavailable over time
+- **Access control** - Changing authentication or permissions makes assets unavailable
+- **Resource deletion** - Removing assets from storage breaks scene loading
+- **Cross-environment issues** - Development URLs don't work in production and vice versa
 
-Archives solve these problems by bundling assets inside the `.zip` file with relative references. This makes them:
+Archives eliminate these issues by bundling all assets within the archive itself. The scene uses relative paths (`./images/photo.jpg`) that always resolve to the bundled assets, regardless of where the archive is stored or loaded.
 
-- **Environment-independent** - Work identically in development, staging, and production
-- **Offline-capable** - Load without network connectivity
-- **Shareable** - Send complete designs without coordinating asset access
-- **Reliable** - No external dependencies that might fail
+## Performance Considerations
 
-> **Note:** If you're building a cloud-based editor where asset URLs might change or become unavailable, consider using archives for long-term storage and portability. For real-time collaborative editing where assets are always available, scene files provide faster saves and transfers.
+### File Size and Transfer
 
-## Troubleshooting
+Archives bundle all assets, making them significantly larger than scene files:
+
+- **Scene files**: 10-100KB (structure only, no assets)
+- **Archives**: 1MB-100MB+ (depends on bundled assets)
+
+Large archives require more time to:
+
+- Read from disk or download from storage
+- Extract and decompress
+- Load into memory
+
+### Memory Usage
 
-### Archive Fails to Load
+Archives extract their contents into memory during loading. Large archives with high-resolution images or videos consume significant memory. Consider:
 
-If `loadFromArchiveURL()` throws an error or fails silently:
+- Processing archives sequentially in batch workflows to manage memory
+- Limiting concurrent archive loads
+- Monitoring memory usage during processing
 
-- **Verify the archive was created with `scene.saveToArchive()`** - CE.SDK archives use a specific internal structure that standard ZIP files don't have
-- **Check the file is a valid ZIP** - Corrupted archives or renamed files will fail validation
-- **Ensure the archive URL is accessible** - Test the URL in a browser to confirm it returns the file
-- **Verify CORS headers** - Remote archive URLs must allow cross-origin requests if loaded from a different domain
-- **Check URL authentication** - Signed URLs must remain valid during the load operation
-- **Check browser console for errors** - Specific error messages often indicate the root cause
+### Storage and Backup
 
-### Archive Loads But Assets Are Missing
+Archives are ideal for long-term storage and backup:
 
-If the scene loads but images, fonts, or other assets don't appear:
+- Single-file archives are easier to manage than multi-file scene + assets
+- Archives can be versioned as complete snapshots
+- Compressed ZIP format reduces storage costs compared to uncompressed assets
 
-- **Verify the archive wasn't manually edited** - Modifying archive contents or structure breaks internal references
-- **Check that fonts are properly embedded** - Some font licenses may prevent embedding in archives
-- **Ensure asset formats are supported** - Unsupported codecs or formats may not render properly
-- **Look for console warnings** - Missing asset warnings often provide specific file names
+## Troubleshooting
+
+**Archive fails to load**
+
+When archive loading fails, common causes include:
 
-### Object URL Issues
+- **Corrupted ZIP file** - Verify the archive is a valid ZIP file
+- **Incompatible format** - Ensure the archive was created by CE.SDK, not manually assembled
+- **Missing scene file** - Archives must contain a valid scene.json file
+- **Unsupported assets** - Some asset formats might not be supported
 
-If object URLs cause problems:
+**Archive loads but assets are missing**
 
-- **Don't revoke URLs too early** - Wait for `loadFromArchiveURL()` to complete before revoking
-- **Handle async properly** - Use `await` to ensure loading finishes before cleanup
-- **Check memory usage** - Create and revoke object URLs promptly to avoid memory leaks
+If the scene loads but displays missing assets:
 
-### Large Archive Performance
+- Verify all asset files are present in the archive ZIP
+- Check that asset paths in scene.json match bundled file locations
+- Ensure the archive structure follows CE.SDK conventions
 
-For archives over 50-100MB:
+**Memory errors during loading**
 
-- **Show loading indicators** - Archive extraction is asynchronous and may take time
-- **Consider streaming** - For very large archives, load assets progressively if possible
-- **Optimize source assets** - Compress images and videos before creating archives
-- **Test upload limits** - Some hosting providers limit file upload sizes
+When loading very large archives causes memory errors:
+
+- Reduce archive size by compressing or downscaling bundled assets
+- Increase available memory for the Node.js process
+- Process archives sequentially rather than concurrently
 
 ## API Reference
 
-| Method                              | Purpose                                          |
-| ----------------------------------- | ------------------------------------------------ |
-| `engine.scene.loadFromArchiveURL()` | Load archived scene with bundled assets from URL |
-| `engine.scene.saveToArchive()`      | Create archive blob bundling scene with assets   |
-| `engine.scene.loadFromURL()`        | Load scene file (without bundled assets)         |
-| `engine.block.findByType()`         | Find blocks by type in loaded scene              |
-| `engine.editor.undo()`              | Revert scene load operation                      |
-| `URL.createObjectURL()`             | Create URL for local blob                        |
-| `URL.revokeObjectURL()`             | Clean up object URL                              |
+| Method                                   | Purpose                                        |
+| ---------------------------------------- | ---------------------------------------------- |
+| `engine.scene.loadFromArchiveURL(url)`   | Load archive from URL (file://, http://, https://, or object URL) |
+| `engine.scene.saveToArchive()`           | Create archive with scene and bundled assets   |
+| `engine.block.findByType(type)`          | Find blocks in loaded scene                    |
+| `engine.block.export(block, options)`    | Export blocks from loaded archive              |
+
+
 
 ---
 
 ## 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