@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/export-save-publish/export/to-png.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 PNG](./export-save-publish/export/to-png.md)
 
@@ -6,163 +6,114 @@
 
 Export your designs as PNG images with full transparency support and configurable compression.
 
-![Export to PNG hero image](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-png-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-png-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-png-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-png-server-js)
 
 PNG (Portable Network Graphics) provides lossless compression with full alpha channel support. It's ideal for web graphics, UI elements, and content requiring crisp edges or transparency.
 
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-png-browser/browser.ts reference-only
-import type CreativeEditorSDK from '@cesdk/cesdk-js';
-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';
-
-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());
-
-    const engine = cesdk.engine;
-
-    await engine.scene.loadFromURL(
-      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-png-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { createInterface } from 'readline';
+
+config();
+
+// Helper function to prompt for user input
+function prompt(question: string): Promise<string> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+}
+
+// Display export options menu
+console.log('=== PNG Export Options ===\n');
+console.log('1. Default PNG (balanced compression)');
+console.log('2. Maximum compression (smaller file)');
+console.log('3. HD export (1920x1080)');
+console.log('4. All formats\n');
+
+const choice = (await prompt('Select export option (1-4): ')) || '4';
+
+console.log('\n⏳ Initializing engine...');
+
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+
+try {
+  await engine.scene.loadFromURL(
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  );
+
+  const page = engine.block.findByType('page')[0];
+  if (!page) throw new Error('No page found');
+
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  console.log('⏳ Exporting...\n');
+
+  if (choice === '1' || choice === '4') {
+    const blob = await engine.block.export(page, {
+      mimeType: 'image/png'
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/design.png`, buffer);
+    console.log(
+      `✓ Default PNG: ${outputDir}/design.png (${(blob.size / 1024).toFixed(1)} KB)`
     );
-    const page = engine.scene.getCurrentPage();
-    if (!page) throw new Error('No page found');
-    await engine.scene.zoomToBlock(page, { padding: 40 });
+  }
 
-    // Setup export functionality
-    await this.setupExportActions(cesdk, page);
+  if (choice === '2' || choice === '4') {
+    const blob = await engine.block.export(page, {
+      mimeType: 'image/png',
+      pngCompressionLevel: 9
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/design-compressed.png`, buffer);
+    console.log(
+      `✓ Compressed PNG: ${outputDir}/design-compressed.png (${(blob.size / 1024).toFixed(1)} KB)`
+    );
   }
 
-  private async setupExportActions(
-    cesdk: CreativeEditorSDK,
-    page: number
-  ): Promise<void> {
-    const engine = cesdk.engine;
-
-    // Add export button to navigation bar
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      {
-        id: 'ly.img.actions.navigationBar',
-        children: [
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-design',
-            label: 'Export PNG',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const blob = await engine.block.export(page, {
-                mimeType: 'image/png'
-              });
-
-              await cesdk.utils.downloadFile(blob, 'image/png');
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-design',
-            label: 'Export PNG (default)',
-            icon: '@imgly/Save',
-            onClick: () => cesdk.actions.run('exportDesign')
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-design',
-            label: 'Export PNG (compressed)',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              // Export with compression
-              const compressedBlob = await engine.block.export(page, {
-                mimeType: 'image/png',
-                pngCompressionLevel: 9
-              });
-
-              await cesdk.utils.downloadFile(compressedBlob, 'image/png');
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-design',
-            label: 'Export PNG (hd)',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const hdBlob = await engine.block.export(page, {
-                mimeType: 'image/png',
-                targetWidth: 1920,
-                targetHeight: 1080
-              });
-
-              await cesdk.utils.downloadFile(hdBlob, 'image/png');
-            }
-          }
-        ]
-      }
+  if (choice === '3' || choice === '4') {
+    const blob = await engine.block.export(page, {
+      mimeType: 'image/png',
+      targetWidth: 1920,
+      targetHeight: 1080
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/design-hd.png`, buffer);
+    console.log(
+      `✓ HD PNG: ${outputDir}/design-hd.png (${(blob.size / 1024).toFixed(1)} KB)`
     );
   }
-}
 
-export default Example;
+  console.log('\n✓ Export completed');
+} finally {
+  engine.dispose();
+}
 ```
 
-This guide covers exporting designs to PNG, configuring compression, controlling output dimensions, and using built-in export actions.
+This guide covers exporting designs to PNG, configuring compression, controlling output dimensions, and saving exports to the file system.
 
 ## Export to PNG
 
@@ -174,7 +125,7 @@ const blob = await engine.block.export(page, {
 });
 ```
 
-Pass the page ID from `engine.scene.getCurrentPage()` or any block ID to export specific elements.
+Pass the page ID from `engine.block.findByType('page')[0]` or any block ID to export specific elements.
 
 ## Export Options
 
@@ -185,7 +136,7 @@ PNG export supports several configuration options for compression, dimensions, a
 The `pngCompressionLevel` option (0-9) controls file size vs. encoding speed. Higher values produce smaller files but take longer to encode. PNG compression is lossless, so quality remains unchanged.
 
 ```typescript highlight=highlight-compression
-const compressedBlob = await engine.block.export(page, {
+const blob = await engine.block.export(page, {
   mimeType: 'image/png',
   pngCompressionLevel: 9
 });
@@ -200,7 +151,7 @@ const compressedBlob = await engine.block.export(page, {
 Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio.
 
 ```typescript highlight=highlight-target-size
-const hdBlob = await engine.block.export(page, {
+const blob = await engine.block.export(page, {
   mimeType: 'image/png',
   targetWidth: 1920,
   targetHeight: 1080
@@ -211,32 +162,35 @@ If the target aspect ratio differs from the block's aspect ratio, the output ext
 
 ### All PNG Export Options
 
-| Option                | Description                                                                                                                     |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `mimeType`            | Output format. Defaults to `'image/png'`.                                                                                       |
-| `pngCompressionLevel` | Compression level (0-9). Higher values produce smaller files but take longer to encode. Quality is unaffected. Defaults to `5`. |
-| `targetWidth`         | Target output width in pixels. Must be used with `targetHeight`.                                                                |
-| `targetHeight`        | Target output height in pixels. Must be used with `targetWidth`.                                                                |
-| `allowTextOverhang`   | When `true`, text blocks with glyphs extending beyond their frame export with full glyph bounds visible. Defaults to `false`.   |
-| `abortSignal`         | Signal to cancel the export operation.                                                                                          |
+- **`mimeType`** (`'image/png'`): Output format. Defaults to `'image/png'`.
+- **`pngCompressionLevel`** (`number`): Compression level from 0-9. Higher values produce smaller files but take longer. Quality is unaffected. Defaults to `5`.
+- **`targetWidth`** (`number`): Target output width in pixels. Must be used with `targetHeight`.
+- **`targetHeight`** (`number`): Target output height in pixels. Must be used with `targetWidth`.
+- **`allowTextOverhang`** (`boolean`): When `true`, text blocks with glyphs that extend beyond their frame (e.g., decorative fonts with swashes) export with full glyph bounds visible. Defaults to `false`.
+- **`abortSignal`** (`AbortSignal`): Signal to cancel the export operation.
 
-## Built-in Export Action
+## Save to File System
 
-CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`:
+After exporting, convert the Blob to a Buffer and write to the file system. Create the output directory if it doesn't exist.
 
-```typescript highlight=highlight-builtin-action
-onClick: () => cesdk.actions.run('exportDesign');
+```typescript
+const blob = await engine.block.export(page, {
+  mimeType: 'image/png'
+});
+
+const buffer = Buffer.from(await blob.arrayBuffer());
+writeFileSync('output/design.png', buffer);
 ```
 
-The built-in action exports the current page as PNG and prompts the user to download the result. Add an export button to the navigation bar to let users trigger this action from the UI.
+This pattern works for all export formats. Adjust the filename extension to match the exported format.
 
 ## API Reference
 
-| Method                                     | Description                                           |
-| ------------------------------------------ | ----------------------------------------------------- |
-| `engine.block.export(blockId, options)`    | Export a block as PNG with format and quality options |
-| `cesdk.actions.run('exportDesign')`        | Run the built-in export action with progress dialog   |
-| `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device                  |
+| Method | Description |
+| ------ | ----------- |
+| `engine.block.export(blockId, options)` | Export a block as PNG with format and quality options |
+| `engine.block.findByType('page')` | Find all pages in the current scene |
+| `engine.dispose()` | Clean up engine resources when done |
 
 ## Next Steps
 
@@ -245,11 +199,13 @@ The built-in action exports the current page as PNG and prompts the user to down
 - [Export with Color Mask](./export-save-publish/export/with-color-mask.md) - Remove specific colors and generate alpha masks
 - [Partial Export](./export-save-publish/export/partial-export.md) - Export specific blocks or regions
 
+
+
 ---
 
 ## 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