@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/export-save-publish/for-social-media.md

@@ -1,318 +1,181 @@
-> 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) > [For Social Media](./export-save-publish/for-social-media.md)
 
 ---
 
-Export vertical video designs for social media platforms with the correct dimensions, formats, and quality settings.
-Configure video exports with appropriate resolution, framerate, and bitrate optimized for Instagram Reels, TikTok, and YouTube Shorts.
-
-![Export for Social Media example showing CE.SDK with export buttons for different platforms](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Export designs for social media with the correct dimensions and quality settings.
+Configure image exports with exact pixel dimensions optimized for Instagram portrait posts.
 
 > **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-for-social-media-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-for-social-media-browser/)
-
-Short-form vertical video has become the dominant format for social media. Instagram Reels, TikTok, and YouTube Shorts all use the 9:16 aspect ratio at 1080×1920 pixels. This guide demonstrates how to create and export vertical video content with the correct settings for these platforms.
-
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-for-social-media-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-import {
-  BlurAssetSource,
-  CaptionPresetsAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { VideoEditorConfig } from './video-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-for-social-media-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-server-js)
+
+Instagram portrait posts use a 4:5 aspect ratio at 1080×1350 pixels, providing more vertical screen real estate than square posts. This guide demonstrates how to export images with these dimensions using CE.SDK in Node.js.
+
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-for-social-media-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Export for Social Media Guide
+ * CE.SDK Server Guide: Export for Social Media
+ *
+ * Demonstrates exporting an image with Instagram portrait dimensions (1080x1350).
  *
- * This example demonstrates:
- * - Creating a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts
- * - Exporting videos with resolution, framerate, and bitrate settings
- * - Tracking video export progress
+ * Note: Video export is not supported in @cesdk/node.
+ * For video exports, use the CE.SDK Renderer on Linux.
  */
-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 VideoEditorConfig());
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new CaptionPresetsAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({
-        include: [
-          'ly.img.image.upload',
-          'ly.img.video.upload',
-          'ly.img.audio.upload'
-        ]
-      })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.video.*',
-          'ly.img.image.*',
-          'ly.img.audio.*',
-          'ly.img.video.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(
-      new PagePresetsAssetSource({
-        include: [
-          'ly.img.page.presets.instagram.*',
-          'ly.img.page.presets.facebook.*',
-          'ly.img.page.presets.x.*',
-          'ly.img.page.presets.linkedin.*',
-          'ly.img.page.presets.pinterest.*',
-          'ly.img.page.presets.tiktok.*',
-          'ly.img.page.presets.youtube.*',
-          'ly.img.page.presets.video.*'
-        ]
-      })
-    );
-    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;
-
-    // Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts
-    await cesdk.actions.run('scene.create', {
-      page: {
-        width: 1080,
-        height: 1920,
-        unit: 'Pixel',
-        color: { r: 0, g: 0, b: 0, a: 1 }
-      }
-    });
-
-    const page = engine.scene.getCurrentPage();
-    if (!page) {
-      throw new Error('No page found');
-    }
-
-    // Add a video clip that fills the vertical frame
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-    const videoBlock = await engine.block.addVideo(
-      'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4',
-      pageWidth,
-      pageHeight
-    );
-    engine.block.fillParent(videoBlock);
-
-    // Export video for Instagram Reels / TikTok / YouTube Shorts (9:16)
-    const exportVideo = async () => {
-      cesdk.ui.showNotification({
-        message: 'Exporting video...',
-        type: 'info'
-      });
-
-      const currentPage = engine.scene.getCurrentPage();
-      if (!currentPage) return;
-
-      const videoBlob = await engine.block.exportVideo(currentPage, {
-        mimeType: 'video/mp4',
-        targetWidth: 1080,
-        targetHeight: 1920,
-        framerate: 30,
-        videoBitrate: 8_000_000, // 8 Mbps
-        onProgress: (renderedFrames, encodedFrames, totalFrames) => {
-          const percent = Math.round((encodedFrames / totalFrames) * 100);
-          console.log(
-            `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)`
-          );
-        }
-      });
-
-      await cesdk.utils.downloadFile(videoBlob, 'video/mp4');
-      cesdk.ui.showNotification({
-        message: `Video exported: ${(videoBlob.size / 1024 / 1024).toFixed(
-          1
-        )} MB (1080×1920)`,
-        type: 'success'
-      });
-    };
-
-    // Configure navigation bar with export button
-    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-      'ly.img.undoRedo.navigationBar',
-      'ly.img.spacer',
-      {
-        id: 'ly.img.action.navigationBar',
-        onClick: exportVideo,
-        key: 'export-video',
-        label: 'Export Video',
-        icon: '@imgly/Video',
-        variant: 'plain',
-        color: 'accent'
-      }
-    ]);
-  }
-}
 
-export default Example;
-```
-
-This guide covers creating a vertical video scene, exporting with resolution, framerate, and bitrate settings, and tracking export progress.
+// Initialize CE.SDK engine with baseURL for asset loading
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
 
-## Creating a Scene
+try {
+  // Load a template scene from a remote URL
+  await engine.scene.loadFromURL(
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  );
 
-Create a scene with the correct dimensions for vertical video. Use `cesdk.actions.run('scene.create')` with explicit pixel dimensions to ensure your content matches platform requirements.
+  const page = engine.block.findByType('page')[0];
+  if (!page) {
+    throw new Error('No page found in scene');
+  }
 
-```typescript highlight-setup
-// Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts
-await cesdk.actions.run('scene.create', {
-  page: {
-    width: 1080,
-    height: 1920,
-    unit: 'Pixel',
-    color: { r: 0, g: 0, b: 0, a: 1 }
+  // Export with Instagram portrait dimensions (4:5 aspect ratio)
+  const blob = await engine.block.export(page, {
+    mimeType: 'image/jpeg',
+    jpegQuality: 0.9,
+    targetWidth: 1080,
+    targetHeight: 1350
+  });
+
+  // Create output directory if it doesn't exist
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
   }
-});
 
-const page = engine.scene.getCurrentPage();
-if (!page) {
-  throw new Error('No page found');
-}
+  // Convert Blob to Buffer and save to file system
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  const filename = `${outputDir}/instagram-portrait.jpg`;
+  writeFileSync(filename, buffer);
 
-// Add a video clip that fills the vertical frame
-const pageWidth = engine.block.getWidth(page);
-const pageHeight = engine.block.getHeight(page);
-const videoBlock = await engine.block.addVideo(
-  'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4',
-  pageWidth,
-  pageHeight
-);
-engine.block.fillParent(videoBlock);
+  console.log(
+    `Exported: instagram-portrait.jpg (1080x1350, ${(blob.size / 1024).toFixed(1)} KB)`
+  );
+  console.log(`File saved to: ${filename}`);
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-The scene uses 1080×1920 pixels (9:16 aspect ratio), which is the standard resolution for Instagram Reels, TikTok, and YouTube Shorts. The video block fills the entire page dimensions.
+This guide covers loading a template scene, exporting with specific dimensions and quality settings, and saving the result to the file system.
 
-## Exporting Videos
+> **Video Export:** The `@cesdk/node` package supports image exports only. For video exports on the server, use [CE.SDK Renderer](#broken-link-7f3e9a)—a native Linux binary with hardware-accelerated video encoding for MP4 output.
 
-Export video content using `engine.block.exportVideo()`. Configure resolution, framerate, and bitrate for optimal quality and file size.
+## Loading a Scene
 
-```typescript highlight-export-video
-const videoBlob = await engine.block.exportVideo(currentPage, {
-  mimeType: 'video/mp4',
-  targetWidth: 1080,
-  targetHeight: 1920,
-  framerate: 30,
-  videoBitrate: 8_000_000, // 8 Mbps
-  onProgress: (renderedFrames, encodedFrames, totalFrames) => {
-    const percent = Math.round((encodedFrames / totalFrames) * 100);
-    console.log(
-      `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)`
-    );
-  }
+Before exporting, load a template scene with visual content.
+
+```typescript highlight-setup
+// Initialize CE.SDK engine with baseURL for asset loading
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
 });
-```
 
-Key video export settings:
+try {
+  // Load a template scene from a remote URL
+  await engine.scene.loadFromURL(
+    'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+  );
 
-- **mimeType**: `video/mp4` for broad platform compatibility
-- **targetWidth/targetHeight**: Output resolution (1080×1920 for vertical)
-- **framerate**: 30 frames per second (standard for social media)
-- **videoBitrate**: 8 Mbps provides good quality while keeping file sizes reasonable
+  const page = engine.block.findByType('page')[0];
+  if (!page) {
+    throw new Error('No page found in scene');
+  }
+```
 
-Higher bitrates produce better quality but larger files. For short-form vertical video, 8 Mbps (8,000,000 bits per second) balances quality and upload speed.
+We initialize the engine, load a template from a remote URL, and locate the page for export.
 
-## Tracking Export Progress
+## Exporting the Image
 
-Video exports can take time, especially for longer content. Use the `onProgress` callback to provide users with feedback during export.
+Export the page using `engine.block.export()`. The `targetWidth` and `targetHeight` options scale the design to exact pixel dimensions for Instagram portrait format.
 
-```typescript highlight-progress
-onProgress: (renderedFrames, encodedFrames, totalFrames) => {
-  const percent = Math.round((encodedFrames / totalFrames) * 100);
-  console.log(
-    `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)`
-  );
-};
+```typescript highlight-export
+// Export with Instagram portrait dimensions (4:5 aspect ratio)
+const blob = await engine.block.export(page, {
+  mimeType: 'image/jpeg',
+  jpegQuality: 0.9,
+  targetWidth: 1080,
+  targetHeight: 1350
+});
 ```
 
-The callback receives three parameters:
+The export options control the output:
 
-- **renderedFrames**: Number of frames rendered so far
-- **encodedFrames**: Number of frames encoded to the output file
-- **totalFrames**: Total frames to be exported
+- **mimeType**: `image/jpeg` for social media (smaller file sizes than PNG)
+- **jpegQuality**: 0.9 provides high quality with reasonable file size
+- **targetWidth/targetHeight**: 1080×1350 pixels for Instagram portrait (4:5 aspect ratio)
 
-The encoding stage typically trails rendering slightly. Calculate progress percentage from `encodedFrames / totalFrames` for an accurate completion indicator.
+## Saving to File System
 
-## Downloading Exported Files
+After export, convert the Blob to a Buffer and write to the file system.
 
-After export, use `cesdk.utils.downloadFile()` to trigger a browser download:
+```typescript highlight-save
+  // Create output directory if it doesn't exist
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
 
-```typescript
-const videoBlob = await engine.block.exportVideo(page, {
-  /* options */
-});
-await cesdk.utils.downloadFile(videoBlob, 'video/mp4');
+  // Convert Blob to Buffer and save to file system
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  const filename = `${outputDir}/instagram-portrait.jpg`;
+  writeFileSync(filename, buffer);
 ```
 
-This utility handles the download process automatically, including memory cleanup. For server uploads, pass the Blob directly to your upload function or FormData.
+The output directory is created if it doesn't exist. The console output confirms the export with file size, verifying the processing completed successfully.
 
 ## API Reference
 
-| Method                              | Purpose                                     |
-| ----------------------------------- | ------------------------------------------- |
-| `cesdk.actions.run('scene.create')` | Create a scene with specified dimensions    |
-| `engine.block.exportVideo()`        | Export block as video (MP4)                 |
-| `engine.scene.getCurrentPage()`     | Get the active page for export              |
-| `cesdk.utils.downloadFile()`        | Trigger browser download for exported files |
+| Method | Purpose |
+|--------|---------|
+| `engine.block.export()` | Export block as image (PNG, JPEG, WebP, PDF) |
+| `engine.block.findByType()` | Find blocks by type (page, text, image, etc.) |
+| `engine.scene.loadFromURL()` | Load a scene from a remote URL |
 
-### Export Options (Videos)
+### Export Options (Images)
 
-| Option         | Type       | Description                         |
-| -------------- | ---------- | ----------------------------------- |
-| `mimeType`     | `string`   | Output format: `video/mp4`          |
-| `targetWidth`  | `number`   | Output width in pixels              |
-| `targetHeight` | `number`   | Output height in pixels             |
-| `framerate`    | `number`   | Frames per second                   |
-| `videoBitrate` | `number`   | Video bitrate in bits per second    |
-| `onProgress`   | `function` | Progress callback with frame counts |
+| Option | Type | Description |
+|--------|------|-------------|
+| `mimeType` | `string` | Output format: `image/jpeg`, `image/png`, `image/webp` |
+| `jpegQuality` | `number` | JPEG compression (0.0-1.0), default 0.9 |
+| `targetWidth` | `number` | Output width in pixels |
+| `targetHeight` | `number` | Output height in pixels |
 
 ## Next Steps
 
-- [Export Overview](./export-save-publish/export/overview.md) - Complete export options including H.264 profiles and advanced settings
+- [Export Overview](./export-save-publish/export/overview.md) - Complete export options including PNG, WebP, and PDF
+
+
 
 ---
 
 ## 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