@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/export-save-publish/export/to-jpeg.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 JPEG](./export-save-publish/export/to-jpeg.md)
 
@@ -6,187 +6,136 @@
 
 Export CE.SDK designs to JPEG format—ideal for photographs, social media, and web content where file size matters more than transparency.
 
-![Export to JPEG](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-jpeg-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-jpeg-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-server-js)
 
 JPEG uses lossy compression optimized for photographs and smooth color gradients. Unlike PNG, JPEG does not support transparency—transparent areas render with a solid background.
 
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-jpeg-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';
-
-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;
-
-    await engine.scene.loadFromURL(
-      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
-    );
-    const page = engine.scene.getCurrentPage()!;
-
-    // Zoom to fit page in view
-    await engine.scene.zoomToBlock(page);
-
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      {
-        id: 'ly.img.actions.navigationBar',
-        children: [
-          {
-            id: 'ly.img.action.navigationBar',
-            onClick: async () => {
-              await cesdk.actions.run('exportDesign', {
-                mimeType: 'image/jpeg',
-                jpegQuality: 0.9
-              });
-            },
-            key: 'export-action',
-            label: 'Export',
-            icon: '@imgly/Download'
-          },
-
-          {
-            id: 'ly.img.action.navigationBar',
-            onClick: async () => {
-              const currentPage = engine.scene.getCurrentPage()!;
-              const exported = await engine.block.export(currentPage, {
-                mimeType: 'image/jpeg',
-                jpegQuality: 0.9
-              });
-              await cesdk.utils.downloadFile(exported, 'image/jpeg');
-              cesdk.ui.showNotification({
-                message: `Standard (${(exported.size / 1024).toFixed(0)} KB)`,
-                type: 'success'
-              });
-            },
-            key: 'export-standard',
-            label: 'Standard',
-            icon: '@imgly/Save'
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            onClick: async () => {
-              const currentPage = engine.scene.getCurrentPage()!;
-              const exported = await engine.block.export(currentPage, {
-                mimeType: 'image/jpeg',
-                jpegQuality: 1.0
-              });
-              await cesdk.utils.downloadFile(exported, 'image/jpeg');
-              cesdk.ui.showNotification({
-                message: `High Quality (${(exported.size / 1024).toFixed(0)} KB)`,
-                type: 'success'
-              });
-            },
-            key: 'export-high',
-            label: 'High Quality',
-            icon: '@imgly/Save'
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            onClick: async () => {
-              const currentPage = engine.scene.getCurrentPage()!;
-              const exported = await engine.block.export(currentPage, {
-                mimeType: 'image/jpeg',
-                targetWidth: 1920,
-                targetHeight: 1080
-              });
-              await cesdk.utils.downloadFile(exported, 'image/jpeg');
-              cesdk.ui.showNotification({
-                message: `1920×1080 (${(exported.size / 1024).toFixed(0)} KB)`,
-                type: 'success'
-              });
-            },
-            key: 'export-hd',
-            label: '1920×1080',
-            icon: '@imgly/Save'
-          }
-        ]
-      }
-    );
-
-    cesdk.actions.register('exportDesign', async () => {
-      const currentPage = engine.scene.getCurrentPage()!;
-      const jpeg = await engine.block.export(currentPage, {
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-jpeg-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();
+
+const OUTPUT_DIR = './output';
+
+async function promptChoice(): Promise<string> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  console.log('\n┌───────────────────────────────────┐');
+  console.log('│   JPEG Export Options             │');
+  console.log('├───────────────────────────────────┤');
+  console.log('│   1. Standard (quality: 0.9)      │');
+  console.log('│   2. High Quality (quality: 1.0)  │');
+  console.log('│   3. HD (1920×1080)               │');
+  console.log('└───────────────────────────────────┘\n');
+
+  return new Promise((resolve) => {
+    rl.question('Select option (1-3): ', (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function showProgress(msg: string): () => void {
+  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let i = 0;
+  process.stdout.write(`${frames[0]} ${msg}`);
+  const id = setInterval(() => {
+    i = (i + 1) % frames.length;
+    process.stdout.write(`\r${frames[i]} ${msg}`);
+  }, 80);
+  return () => {
+    clearInterval(id);
+    process.stdout.write(`\r✓ ${msg}\n`);
+  };
+}
+
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+
+try {
+  const choice = await promptChoice();
+
+  let done = showProgress('Loading scene...');
+  await engine.scene.loadFromURL(
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  );
+  done();
+
+  const page = engine.block.findByType('page')[0];
+  if (!page) throw new Error('No page found');
+
+  if (!existsSync(OUTPUT_DIR)) mkdirSync(OUTPUT_DIR, { recursive: true });
+
+  done = showProgress('Exporting JPEG...');
+
+  let blob: Blob;
+  let filename: string;
+
+  switch (choice) {
+    case '2':
+      blob = await engine.block.export(page, {
+        mimeType: 'image/jpeg',
+        jpegQuality: 1.0
+      });
+      filename = 'high-quality.jpg';
+      break;
+
+    case '3':
+      blob = await engine.block.export(page, {
+        mimeType: 'image/jpeg',
+        targetWidth: 1920,
+        targetHeight: 1080
+      });
+      filename = 'hd-1920x1080.jpg';
+      break;
+
+    default:
+      blob = await engine.block.export(page, {
         mimeType: 'image/jpeg',
         jpegQuality: 0.9
       });
-      await cesdk.utils.downloadFile(jpeg, 'image/jpeg');
-    });
+      filename = 'standard.jpg';
   }
-}
 
-export default Example;
+  done();
+
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${OUTPUT_DIR}/${filename}`, buffer);
+
+  console.log(`\n✓ Saved: ${OUTPUT_DIR}/${filename}`);
+  console.log(`  Size: ${(blob.size / 1024).toFixed(1)} KB\n`);
+} finally {
+  engine.dispose();
+}
 ```
 
-This guide covers exporting to JPEG, configuring quality and dimensions, and integrating CE.SDK's built-in export action.
+This guide covers exporting to JPEG, configuring quality and dimensions, and saving exports to the file system.
 
 ## Export to JPEG
 
-Export a design block to JPEG by calling `engine.block.export()` with `mimeType: 'image/jpeg'`. Use `cesdk.utils.downloadFile()` to trigger a browser download.
+Export a design block to JPEG by calling `engine.block.export()` with `mimeType: 'image/jpeg'`. Convert the blob to a buffer and write to disk.
 
 ```typescript highlight=highlight-export-jpeg
-const exported = await engine.block.export(currentPage, {
+blob = await engine.block.export(page, {
   mimeType: 'image/jpeg',
   jpegQuality: 0.9
 });
-await cesdk.utils.downloadFile(exported, 'image/jpeg');
 ```
 
 The `jpegQuality` parameter accepts values from greater than 0 to 1. Higher values produce better quality at larger file sizes. The default is 0.9.
@@ -195,23 +144,22 @@ The `jpegQuality` parameter accepts values from greater than 0 to 1. Higher valu
 
 JPEG export supports these configuration options:
 
-| Option         | Type     | Default       | Description                    |
-| -------------- | -------- | ------------- | ------------------------------ |
-| `mimeType`     | `string` | `'image/png'` | Set to `'image/jpeg'` for JPEG |
-| `jpegQuality`  | `number` | `0.9`         | Quality from >0 to 1           |
-| `targetWidth`  | `number` | —             | Output width in pixels         |
-| `targetHeight` | `number` | —             | Output height in pixels        |
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `mimeType` | `string` | `'image/png'` | Set to `'image/jpeg'` for JPEG |
+| `jpegQuality` | `number` | `0.9` | Quality from >0 to 1 |
+| `targetWidth` | `number` | — | Output width in pixels |
+| `targetHeight` | `number` | — | Output height in pixels |
 
 ### Quality Control
 
 Set `jpegQuality` to 1.0 for maximum quality with minimal compression artifacts. This is useful for archival or print preparation.
 
 ```typescript highlight=highlight-export-quality
-const exported = await engine.block.export(currentPage, {
+blob = await engine.block.export(page, {
   mimeType: 'image/jpeg',
   jpegQuality: 1.0
 });
-await cesdk.utils.downloadFile(exported, 'image/jpeg');
 ```
 
 For web delivery, values around 0.8 balance quality and file size effectively.
@@ -221,52 +169,22 @@ For web delivery, values around 0.8 balance quality and file size effectively.
 Specify `targetWidth` and `targetHeight` to export at exact dimensions. The output fills the target size while maintaining aspect ratio.
 
 ```typescript highlight=highlight-export-size
-const exported = await engine.block.export(currentPage, {
+blob = await engine.block.export(page, {
   mimeType: 'image/jpeg',
   targetWidth: 1920,
   targetHeight: 1080
 });
-await cesdk.utils.downloadFile(exported, 'image/jpeg');
 ```
 
-## Built-in Export Action
+## Save to File System
 
-CE.SDK includes a built-in export button you can add to the navigation bar. This provides a familiar export experience without additional code.
+Convert the exported blob to a buffer and write it to disk using Node.js file system APIs.
 
-```typescript highlight=highlight-builtin-action
-{
-  id: 'ly.img.action.navigationBar',
-  onClick: async () => {
-    await cesdk.actions.run('exportDesign', {
-      mimeType: 'image/jpeg',
-      jpegQuality: 0.9
-    });
-  },
-  key: 'export-action',
-  label: 'Export',
-  icon: '@imgly/Download'
-},
+```typescript highlight=highlight-save-file
+const buffer = Buffer.from(await blob.arrayBuffer());
+writeFileSync(`${OUTPUT_DIR}/${filename}`, buffer);
 ```
 
-The button triggers the `exportDesign` action when clicked. You can customize what happens by registering your own handler.
-
-### Customize Export Behavior
-
-Override the `exportDesign` action to control the export format, quality, and download behavior.
-
-```typescript highlight=highlight-custom-action
-cesdk.actions.register('exportDesign', async () => {
-  const currentPage = engine.scene.getCurrentPage()!;
-  const jpeg = await engine.block.export(currentPage, {
-    mimeType: 'image/jpeg',
-    jpegQuality: 0.9
-  });
-  await cesdk.utils.downloadFile(jpeg, 'image/jpeg');
-});
-```
-
-When you register `exportDesign`, the built-in export button uses your custom handler instead of the default.
-
 ## When to Use JPEG
 
 JPEG works well for:
@@ -287,13 +205,12 @@ JPEG works well for:
 
 ## API Reference
 
-| Method                                     | Description                            |
-| ------------------------------------------ | -------------------------------------- |
-| `engine.block.export(block, options)`      | Export a block to the specified format |
-| `cesdk.utils.downloadFile(blob, mimeType)` | Trigger browser download               |
-| `cesdk.actions.register(name, handler)`    | Register or override an action         |
-| `cesdk.ui.insertOrderComponent()`          | Add components to navigation bar       |
-| `engine.scene.zoomToBlock(block)`          | Zoom camera to fit a block             |
+| Method | Description |
+|--------|-------------|
+| `engine.block.export(block, options)` | Export a block to the specified format |
+| `engine.scene.loadFromURL(url)` | Load a scene from a remote URL |
+| `engine.block.findByType(type)` | Find all blocks of a specific type |
+| `writeFileSync(path, buffer)` | Write buffer to file system (Node.js) |
 
 ## Next Steps
 
@@ -302,11 +219,13 @@ JPEG works well for:
 - [Partial Export](./export-save-publish/export/partial-export.md) — Export specific regions or elements
 - [Size Limits](./export-save-publish/export/size-limits.md) — Handle large exports and memory constraints
 
+
+
 ---
 
 ## 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