@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/export-save-publish/export/to-webp.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) > [Export Media Assets](./export-save-publish/export.md) > [To WebP](./export-save-publish/export/to-webp.md)
 
@@ -6,180 +6,157 @@
 
 Export designs to WebP format for optimized web delivery with smaller file sizes than PNG or JPEG.
 
-![Export to WebP showing the editor with export options](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 5 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-webp-browser/)
-
-WebP delivers smaller file sizes than PNG and JPEG while preserving image quality and transparency support.
-
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-webp-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-webp-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-webp-server-js)
+
+WebP delivers smaller file sizes than PNG and JPEG while preserving image quality and transparency support. This makes it ideal for server-side processing where bandwidth and storage costs matter.
+
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-webp-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import * as readline from 'readline';
+
+config();
 
 /**
- * CE.SDK Plugin: Export to WebP Guide
+ * CE.SDK Server Guide: Export to WebP
  *
- * Demonstrates exporting designs to WebP format with:
- * - Built-in export action triggered programmatically
- * - Three export buttons showcasing different quality presets
- * - Lossy, lossless, and social media export options
+ * Demonstrates:
+ * - Interactive format selection
+ * - Export with quality options
+ * - Loading indicators
+ * - Saving to output directory
  */
-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');
-    }
-
-    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());
-
-    const engine = cesdk.engine;
-
-    // Load template and zoom to fit
-    await engine.scene.loadFromURL(
-      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
-    );
-    const page = engine.scene.getCurrentPage();
-    if (!page) throw new Error('No page found');
-
-    await engine.scene.zoomToBlock(page, { padding: 40 });
-
-    // Three export buttons with different WebP settings
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      {
-        id: 'ly.img.actions.navigationBar',
-        children: [
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'webp-lossy',
-            label: 'Lossy',
-            icon: '@imgly/Download',
-            onClick: async () => {
-              const p = engine.scene.getCurrentPage()!;
-              // Export with lossy compression
-              const blob = await engine.block.export(p, {
-                mimeType: 'image/webp',
-                webpQuality: 0.8
-              });
-              // Download using CE.SDK utils
-              await cesdk.utils.downloadFile(blob, 'image/webp');
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'webp-lossless',
-            label: 'Lossless',
-            icon: '@imgly/Download',
-            onClick: async () => {
-              const p = engine.scene.getCurrentPage()!;
-              const blob = await engine.block.export(p, {
-                mimeType: 'image/webp',
-                webpQuality: 1.0
-              });
-              await cesdk.utils.downloadFile(blob, 'image/webp');
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'webp-social',
-            label: 'Social',
-            icon: '@imgly/Download',
-            onClick: async () => {
-              const p = engine.scene.getCurrentPage()!;
-              // Export with target dimensions for social media
-              const blob = await engine.block.export(p, {
-                mimeType: 'image/webp',
-                webpQuality: 0.9,
-                targetWidth: 1200,
-                targetHeight: 630
-              });
-              await cesdk.utils.downloadFile(blob, 'image/webp');
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-action',
-            label: 'Export',
-            icon: '@imgly/Download',
-            onClick: () => {
-              // Run built-in export with WebP format
-              cesdk.actions.run('exportDesign', { mimeType: 'image/webp' });
-            }
-          }
-        ]
-      }
-    );
-  }
+
+// Prompt user for input
+async function prompt(question: string): Promise<string> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
 }
 
-export default Example;
+// Loading spinner
+function showLoading(message: string): () => void {
+  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let i = 0;
+  const interval = setInterval(() => {
+    process.stdout.write(`\r${frames[i++ % frames.length]} ${message}`);
+  }, 80);
+  return () => {
+    clearInterval(interval);
+    process.stdout.write('\r');
+  };
+}
+
+// Display format options
+console.log('\n🖼️  CE.SDK WebP Export\n');
+console.log('Select export quality:');
+console.log('  1. Lossy (0.8) - Smaller file, good quality');
+console.log('  2. High (0.95) - Balanced quality and size');
+console.log('  3. Lossless (1.0) - Perfect quality, larger file\n');
+
+const choice = await prompt('Enter choice (1-3): ');
+
+const qualityMap: Record<string, { quality: number; name: string }> = {
+  '1': { quality: 0.8, name: 'lossy' },
+  '2': { quality: 0.95, name: 'high' },
+  '3': { quality: 1.0, name: 'lossless' }
+};
+
+const selected = qualityMap[choice] || qualityMap['1'];
+console.log(`\nSelected: ${selected.name} (quality: ${selected.quality})\n`);
+
+// Initialize engine with loading indicator
+const stopLoading = showLoading('Initializing CE.SDK engine...');
+
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+
+stopLoading();
+console.log('✓ Engine initialized\n');
+
+try {
+  const stopSceneLoading = showLoading('Loading template...');
+  await engine.scene.loadFromURL(
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  );
+  stopSceneLoading();
+  console.log('✓ Template loaded\n');
+
+  const page = engine.block.findByType('page')[0];
+  if (!page) {
+    throw new Error('No page found');
+  }
+
+  // Create output directory
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Export to WebP with selected quality
+  const stopExport = showLoading('Exporting to WebP...');
+  const webpBlob = await engine.block.export(page, {
+    mimeType: 'image/webp',
+    webpQuality: selected.quality
+  });
+  stopExport();
+
+  // Save to output directory
+  const buffer = Buffer.from(await webpBlob.arrayBuffer());
+  const filename = `design-${selected.name}.webp`;
+  writeFileSync(`${outputDir}/${filename}`, buffer);
+
+  console.log(`✓ Exported: ${outputDir}/${filename}`);
+  console.log(`  Size: ${(webpBlob.size / 1024).toFixed(1)} KB\n`);
+
+  // Export with target dimensions
+  const resizedBlob = await engine.block.export(page, {
+    mimeType: 'image/webp',
+    webpQuality: selected.quality,
+    targetWidth: 1200,
+    targetHeight: 630
+  });
+
+  const resizedBuffer = Buffer.from(await resizedBlob.arrayBuffer());
+  writeFileSync(`${outputDir}/design-resized.webp`, resizedBuffer);
+  console.log(`✓ Exported: ${outputDir}/design-resized.webp (1200x630)`);
+  console.log(`  Size: ${(resizedBlob.size / 1024).toFixed(1)} KB\n`);
+} finally {
+  engine.dispose();
+}
 ```
 
-This guide covers exporting to WebP, configuring quality settings, and triggering downloads.
+This guide covers exporting to WebP, configuring quality settings, and saving files to disk.
 
 ## Export to WebP
 
 Call `engine.block.export()` with `mimeType: 'image/webp'` and a `webpQuality` value between 0 and 1.
 
 ```typescript highlight=highlight-export-webp
-// Export with lossy compression
-const blob = await engine.block.export(p, {
+// Export to WebP with selected quality
+const stopExport = showLoading('Exporting to WebP...');
+const webpBlob = await engine.block.export(page, {
   mimeType: 'image/webp',
-  webpQuality: 0.8
+  webpQuality: selected.quality
 });
+stopExport();
 ```
 
 The `webpQuality` parameter controls compression. A value of 0.8 provides a good balance between file size and visual quality for most use cases.
@@ -188,20 +165,20 @@ The `webpQuality` parameter controls compression. A value of 0.8 provides a good
 
 WebP export supports these options:
 
-| Option         | Type           | Description                                 |
-| -------------- | -------------- | ------------------------------------------- |
-| `mimeType`     | `'image/webp'` | Required. Specifies WebP format             |
-| `webpQuality`  | `number`       | Quality from 0 to 1. Default 1.0 (lossless) |
-| `targetWidth`  | `number`       | Optional resize width                       |
-| `targetHeight` | `number`       | Optional resize height                      |
+| Option | Type | Description |
+|--------|------|-------------|
+| `mimeType` | `'image/webp'` | Required. Specifies WebP format |
+| `webpQuality` | `number` | Quality from 0 to 1. Default 1.0 (lossless) |
+| `targetWidth` | `number` | Optional resize width |
+| `targetHeight` | `number` | Optional resize height |
 
-Combine `targetWidth` and `targetHeight` to resize the output, useful for social media or thumbnail generation.
+Combine `targetWidth` and `targetHeight` to resize the output, useful for generating thumbnails or optimized versions.
 
 ```typescript highlight=highlight-export-options
-// Export with target dimensions for social media
-const blob = await engine.block.export(p, {
+// Export with target dimensions
+const resizedBlob = await engine.block.export(page, {
   mimeType: 'image/webp',
-  webpQuality: 0.9,
+  webpQuality: selected.quality,
   targetWidth: 1200,
   targetHeight: 630
 });
@@ -209,37 +186,28 @@ const blob = await engine.block.export(p, {
 
 Set `webpQuality` to 1.0 for lossless compression when pixel-perfect output is required.
 
-## Built-in Export Action
+## Save to File
 
-Run the `exportDesign` action to execute the default export flow programmatically.
+Convert the exported blob to a buffer and write it to disk.
 
-```typescript highlight=highlight-trigger-export
-// Run built-in export with WebP format
-cesdk.actions.run('exportDesign', { mimeType: 'image/webp' });
+```typescript highlight=highlight-save-file
+// Save to output directory
+const buffer = Buffer.from(await webpBlob.arrayBuffer());
+const filename = `design-${selected.name}.webp`;
+writeFileSync(`${outputDir}/${filename}`, buffer);
 ```
 
-This executes the registered export action, which handles the complete export process including format selection and file download.
+The export returns a `Blob`. Convert it to an `ArrayBuffer`, then wrap in a `Buffer` for Node.js file system operations.
 
-## Download Export
-
-Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob.
-
-```typescript highlight=highlight-download
-// Download using CE.SDK utils
-await cesdk.utils.downloadFile(blob, 'image/webp');
-```
-
-Pass the blob and MIME type to prompt the user to save the file locally.
-
-> **Note:** WebP is supported in all modern browsers. For older browsers, consider PNG or JPEG as fallback formats.
+> **Note:** WebP is widely supported across platforms. For systems without WebP support, consider PNG or JPEG as fallback formats.
 
 ## API Reference
 
-| API                          | Description                                                      |
-| ---------------------------- | ---------------------------------------------------------------- |
-| `engine.block.export()`      | Exports a block to an image blob with format and quality options |
-| `cesdk.actions.run()`        | Runs a built-in action like `exportDesign`                       |
-| `cesdk.utils.downloadFile()` | Triggers browser download dialog for a blob                      |
+| API | Description |
+|-----|-------------|
+| `engine.block.export()` | Exports a block to an image blob with format and quality options |
+| `writeFileSync()` | Node.js API to write buffer data to a file |
+| `Buffer.from()` | Converts ArrayBuffer to Node.js Buffer for file operations |
 
 ## Next Steps
 
@@ -251,11 +219,13 @@ Pass the blob and MIME type to prompt the user to save the file locally.
 
 [Partial Export](./export-save-publish/export/partial-export.md) - Export specific blocks or regions instead of the full design.
 
+
+
 ---
 
 ## 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