@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/edit-video/transform/resize.md

@@ -1,394 +1,233 @@
-> 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) > [Create and Edit Videos](./create-video.md) > [Transform](./edit-video/transform.md) > [Resize](./edit-video/transform/resize.md)
 
 ---
 
-The **CreativeEditor SDK (CE.SDK)** provides a video resizing feature. This guide offers a complete overview of the resizing feature, from using it in the default UI to locking resizing to safeguard layouts.
-
-![Resize videos example showing videos with different sizing modes](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+The **CreativeEditor SDK (CE.SDK)** provides programmatic video resizing for server-side workflows. This guide covers resizing videos in headless mode, from absolute pixel dimensions to percentage-based responsive layouts.
 
 > **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-edit-video-transform-resize-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-video-transform-resize-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-video-transform-resize-browser/)
-
-```typescript file=@cesdk_web_examples/guides-edit-video-transform-resize-browser/browser.ts reference-only
-import CreativeEditorSDK, {
-  type EditorPlugin,
-  type 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';
-
-class Example implements EditorPlugin {
-  name = 'guides-edit-video-transform-resize-browser';
-
-  version = CreativeEditorSDK.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());
-
-    await cesdk.actions.run('scene.create', {
-      layout: 'DepthStack',
-      page: { width: 800, height: 500, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-    const pages = engine.block.findByType('page');
-    const page = pages.length > 0 ? pages[0] : engine.scene.get();
-
-    // Enable fill and set page fill color to #6686FF
-    engine.block.setFillEnabled(page, true);
-    engine.block.setColor(engine.block.getFill(page), 'fill/color/value', {
-      r: 102 / 255,
-      g: 134 / 255,
-      b: 255 / 255,
-      a: 1
-    });
-
-    // Layout constants for centered positioning
-    // Page: 800x500, 3 columns of 200px each with 50px spacing
-    // Total width: 700px, centered start X: 50px
-    // Column centers: 150, 400, 650
-    const videoWidth = 150;
-    const videoHeight = 100;
-    const columnWidth = 200;
-    const startY = 165; // Vertically centered
-    const labelY = startY + videoHeight + 10;
-    const explanationY = labelY + 35;
-
-    // Column 1 center: 150
-    const col1X = 50;
-    const col1VideoX = col1X + (columnWidth - videoWidth) / 2; // 75
-
-    // Column 2 center: 400 (percentage video is 200px = 25% of 800)
-    const col2X = 300;
-    const col2VideoX = col2X; // 200px wide video centered at 400
-
-    // Column 3 center: 650
-    const col3X = 550;
-    const col3VideoX = col3X + (columnWidth - videoWidth) / 2; // 575
-
-    // Demo 1: Resizable Video - Can be freely resized by user
-    const resizableVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      videoWidth,
-      videoHeight
-    );
-    engine.block.appendChild(page, resizableVideo);
-    engine.block.setPositionX(resizableVideo, col1VideoX);
-    engine.block.setPositionY(resizableVideo, startY);
-
-    const text1 = engine.block.create('text');
-    engine.block.setString(text1, 'text/text', 'Resizable');
-    engine.block.setFloat(text1, 'text/fontSize', 28);
-    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text1, columnWidth);
-    engine.block.setPositionX(text1, col1X);
-    engine.block.setPositionY(text1, labelY);
-    engine.block.setFillEnabled(text1, true);
-    engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', {
-      r: 1,
-      g: 1,
-      b: 1,
-      a: 1
-    });
-    engine.block.appendChild(page, text1);
-
-    // Add explanatory text below
-    const explanation1 = engine.block.create('text');
-    engine.block.setString(
-      explanation1,
-      'text/text',
-      'Absolute pixel dimensions'
-    );
-    engine.block.setFloat(explanation1, 'text/fontSize', 12);
-    engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation1, columnWidth);
-    engine.block.setPositionX(explanation1, col1X);
-    engine.block.setPositionY(explanation1, explanationY);
-    engine.block.setFillEnabled(explanation1, true);
-    engine.block.setColor(
-      engine.block.getFill(explanation1),
-      'fill/color/value',
-      {
-        r: 1,
-        g: 1,
-        b: 1,
-        a: 1
-      }
-    );
-    engine.block.appendChild(page, explanation1);
-
-    // Demo 2: Percentage Sizing - Responsive layout
-    const percentVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      videoWidth,
-      videoHeight
-    );
-    engine.block.appendChild(page, percentVideo);
-
-    // Set size mode to percentage (0.0 to 1.0)
-    engine.block.setWidthMode(percentVideo, 'Percent');
-    engine.block.setHeightMode(percentVideo, 'Percent');
-    // Set to 25% width, 20% height of parent
-    engine.block.setWidth(percentVideo, 0.25);
-    engine.block.setHeight(percentVideo, 0.2);
-
-    engine.block.setPositionX(percentVideo, col2VideoX);
-    engine.block.setPositionY(percentVideo, startY);
-
-    const text2 = engine.block.create('text');
-    engine.block.setString(text2, 'text/text', 'Percentage');
-    engine.block.setFloat(text2, 'text/fontSize', 28);
-    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text2, columnWidth);
-    engine.block.setPositionX(text2, col2X);
-    engine.block.setPositionY(text2, labelY);
-    engine.block.setFillEnabled(text2, true);
-    engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', {
-      r: 1,
-      g: 1,
-      b: 1,
-      a: 1
-    });
-    engine.block.appendChild(page, text2);
-
-    // Add explanatory text below
-    const explanation2 = engine.block.create('text');
-    engine.block.setString(explanation2, 'text/text', '25% width, 20% height');
-    engine.block.setFloat(explanation2, 'text/fontSize', 12);
-    engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation2, columnWidth);
-    engine.block.setPositionX(explanation2, col2X);
-    engine.block.setPositionY(explanation2, explanationY);
-    engine.block.setFillEnabled(explanation2, true);
-    engine.block.setColor(
-      engine.block.getFill(explanation2),
-      'fill/color/value',
-      {
-        r: 1,
-        g: 1,
-        b: 1,
-        a: 1
-      }
-    );
-    engine.block.appendChild(page, explanation2);
-
-    // Demo 3: Resize-Locked Video - Cannot be resized
-    const lockedVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      videoWidth,
-      videoHeight
-    );
-    engine.block.appendChild(page, lockedVideo);
-    engine.block.setPositionX(lockedVideo, col3VideoX);
-    engine.block.setPositionY(lockedVideo, startY);
-
-    // Lock the transform to prevent resizing
-    engine.block.setTransformLocked(lockedVideo, true);
-
-    const text3 = engine.block.create('text');
-    engine.block.setString(text3, 'text/text', 'Locked');
-    engine.block.setFloat(text3, 'text/fontSize', 28);
-    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text3, columnWidth);
-    engine.block.setPositionX(text3, col3X);
-    engine.block.setPositionY(text3, labelY);
-    engine.block.setFillEnabled(text3, true);
-    engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', {
-      r: 1,
-      g: 1,
-      b: 1,
-      a: 1
-    });
-    engine.block.appendChild(page, text3);
-
-    // Add explanatory text below
-    const explanation3 = engine.block.create('text');
-    engine.block.setString(explanation3, 'text/text', 'Transform locked');
-    engine.block.setFloat(explanation3, 'text/fontSize', 12);
-    engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation3, columnWidth);
-    engine.block.setPositionX(explanation3, col3X);
-    engine.block.setPositionY(explanation3, explanationY);
-    engine.block.setFillEnabled(explanation3, true);
-    engine.block.setColor(
-      engine.block.getFill(explanation3),
-      'fill/color/value',
-      {
-        r: 1,
-        g: 1,
-        b: 1,
-        a: 1
-      }
-    );
-    engine.block.appendChild(page, explanation3);
-
-    // Get current dimensions
-    const currentWidth = engine.block.getWidth(resizableVideo);
-    const currentHeight = engine.block.getHeight(resizableVideo);
-    console.log('Current dimensions:', currentWidth, 'x', currentHeight);
-
-    // Check size mode
-    const widthMode = engine.block.getWidthMode(percentVideo);
-    const heightMode = engine.block.getHeightMode(percentVideo);
-    console.log('Size modes:', widthMode, heightMode);
-
-    // Set playhead position to 2 seconds
-    engine.block.setPlaybackTime(page, 2);
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-video-transform-resize-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-video-transform-resize-server-js)
+
+```typescript file=@cesdk_web_examples/guides-edit-video-transform-resize-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
+
+/**
+ * CE.SDK Server Guide: Resize Videos
+ *
+ * Demonstrates video resizing in headless mode:
+ * - Absolute sizing with pixel dimensions
+ * - Percentage-based sizing for responsive layouts
+ * - Getting current dimensions
+ * - Locking transforms to prevent resizing
+ * - Saving scenes for later rendering
+ *
+ * Note: Full video export (MP4) requires the CE.SDK Renderer.
+ * In headless Node.js mode, we save the scene for later use.
+ */
+
+// 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 a scene with a page
+  const scene = engine.scene.create('DepthStack');
+  const page = engine.block.create('page');
+  engine.block.setWidth(page, 800);
+  engine.block.setHeight(page, 500);
+  engine.block.appendChild(scene, page);
+
+  // Sample video URL for demonstrations
+  const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4';
+
+  // Demo 1: Resizable Video - Absolute sizing with pixel dimensions
+  console.log('Loading video 1/3 (Resizable)...');
+  const resizableVideo = await engine.block.addVideo(videoUri, 200, 150);
+  engine.block.appendChild(page, resizableVideo);
+  engine.block.setWidth(resizableVideo, 200);
+  engine.block.setHeight(resizableVideo, 150);
+  engine.block.setPositionX(resizableVideo, 50);
+  engine.block.setPositionY(resizableVideo, 100);
+  console.log('✓ Video 1/3 loaded');
+
+  // Add label for resizable video
+  const text1 = engine.block.create('text');
+  engine.block.setString(text1, 'text/text', 'Resizable');
+  engine.block.setFloat(text1, 'text/fontSize', 32);
+  engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
+  engine.block.setWidth(text1, 200);
+  engine.block.setPositionX(text1, 50);
+  engine.block.setPositionY(text1, 260);
+  engine.block.appendChild(page, text1);
+
+  // Demo 2: Percentage Sizing - Responsive layout
+  console.log('Loading video 2/3 (Percentage)...');
+  const percentVideo = await engine.block.addVideo(videoUri, 200, 150);
+  engine.block.appendChild(page, percentVideo);
+
+  // Set size mode to percentage (0.0 to 1.0)
+  engine.block.setWidthMode(percentVideo, 'Percent');
+  engine.block.setHeightMode(percentVideo, 'Percent');
+  // Set to 25% width, 30% height of parent
+  engine.block.setWidth(percentVideo, 0.25);
+  engine.block.setHeight(percentVideo, 0.3);
+
+  engine.block.setPositionX(percentVideo, 300);
+  engine.block.setPositionY(percentVideo, 100);
+  console.log('✓ Video 2/3 loaded');
+
+  // Add label for percentage video
+  const text2 = engine.block.create('text');
+  engine.block.setString(text2, 'text/text', 'Percentage');
+  engine.block.setFloat(text2, 'text/fontSize', 32);
+  engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
+  engine.block.setWidth(text2, 200);
+  engine.block.setPositionX(text2, 300);
+  engine.block.setPositionY(text2, 260);
+  engine.block.appendChild(page, text2);
+
+  // Demo 3: Locked Video - Cannot be resized
+  console.log('Loading video 3/3 (Locked)...');
+  const lockedVideo = await engine.block.addVideo(videoUri, 200, 150);
+  engine.block.appendChild(page, lockedVideo);
+  engine.block.setPositionX(lockedVideo, 550);
+  engine.block.setPositionY(lockedVideo, 100);
+
+  // Lock the transform to prevent resizing
+  engine.block.setTransformLocked(lockedVideo, true);
+  console.log('✓ Video 3/3 loaded');
+
+  // Add label for locked video
+  const text3 = engine.block.create('text');
+  engine.block.setString(text3, 'text/text', 'Locked');
+  engine.block.setFloat(text3, 'text/fontSize', 32);
+  engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
+  engine.block.setWidth(text3, 200);
+  engine.block.setPositionX(text3, 550);
+  engine.block.setPositionY(text3, 260);
+  engine.block.appendChild(page, text3);
+
+  // Get current dimensions
+  const currentWidth = engine.block.getWidth(resizableVideo);
+  const currentHeight = engine.block.getHeight(resizableVideo);
+  console.log('Current dimensions:', currentWidth, 'x', currentHeight);
+
+  // Check size mode
+  const widthMode = engine.block.getWidthMode(percentVideo);
+  const heightMode = engine.block.getHeightMode(percentVideo);
+  console.log('Size modes:', widthMode, heightMode);
+
+  // Save the scene to preserve the resized videos
+  // Note: Video export (MP4/PNG with video frames) requires the CE.SDK Renderer.
+  // In headless Node.js mode, we save the scene file which can be loaded later
+  // in a browser environment or rendered with the CE.SDK Renderer.
+  console.log('Saving scene...');
+
+  const sceneString = await engine.scene.saveToString();
+
+  // Ensure output directory exists
+  if (!existsSync('output')) {
+    mkdirSync('output');
   }
-}
 
-export default Example;
+  // Save scene to .scene file (standard CE.SDK scene format)
+  writeFileSync('output/resize-videos-scene.scene', sceneString);
+  console.log('✓ Saved to output/resize-videos-scene.scene');
+
+  // Log final dimensions to verify
+  console.log('\nVideo dimensions:');
+  console.log(
+    `  Resizable video: ${engine.block.getWidth(resizableVideo)}x${engine.block.getHeight(resizableVideo)} [Mode: Absolute]`
+  );
+  console.log(
+    `  Percent video: ${engine.block.getWidth(percentVideo)}x${engine.block.getHeight(percentVideo)} [Mode: Percent]`
+  );
+  console.log(
+    `  Locked video: ${engine.block.getWidth(lockedVideo)}x${engine.block.getHeight(lockedVideo)} [Transform locked]`
+  );
+
+  console.log('\n✓ Video resizing guide completed successfully.');
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
+<NodejsVideoExportNotice {...props} />
+
 ## What You'll Learn
 
-- Resize a single video block with the **default UI**.
-- Resize clips using **JavaScript** and the **CE.SDK API**.
-- Resize **groups** of video blocks uniformly.
-- **Lock** or restrict a user's ability to resize.
+- Initialize a **headless engine** for server-side processing.
+- Resize clips using **absolute pixel dimensions**.
+- Resize using **percentage values** for responsive layouts.
+- **Lock transforms** to prevent resizing.
+- **Save scenes** for later rendering.
 
 ### When to Use
 
-Resize videos to:
-
-- Fit **template areas**.
-
-- Insert videos into reusable **layouts**.
-
-- Keep aspect ratios **consistent** for:
-  - Social media posts (like reels)
-  - Ads
+Resize videos programmatically to:
 
-- Create **automation workflows** in JavaScript.
+- Fit **template areas** in automated workflows.
+- Create videos for multiple **aspect ratios** from a single source.
+- Build **batch processing** pipelines.
+- Generate videos for different **social media formats**.
+- Combine with trimming or cropping in headless workflows.
 
-- Combine with trimming or cropping.
+## Initialize Headless Engine
 
-## Resize a Video Block with the UI
+Create a headless engine instance for programmatic video manipulation:
 
-When using the default CE.SDK UI:
-
-1. Select the video.
-2. The resize handles appear.
-3. Drag one of the handles to resize the video until you set the desired size.
-
-The editor provides two kinds of handles:
-
-- **Corner scale handles:** keep the video's aspect ratio.
-
-<Picture src={resizeHandles} style={{ width: '110%' }} alt="Resize handles from the default CE.SDK web editor" formats={['webp']} />
-
-- **Edge handles:** stretch only the width or the height independently.
-
-<Picture src={edgeHandles} style={{ width: '110%' }} alt="Resize edge handles from the default CE.SDK web editor" formats={['webp']} />
-
-Any embedded audio remains synchronous, because resizing affects only the block's frame, not the time-based properties.
-
-### Hide the Resize Handles in the UI
+```typescript highlight-setup
+// 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)
+});
+```
 
-To prevent manual resizing in the UI, **hide the resize edge handles** using the **EditorAPI**:
+## Create the Scene
 
-1. Call the `setSetting` function.
-2. Include the `"controlGizmo/showResizeHandles"` key.
-3. Set the value to `false`.
+Create a scene with specific page dimensions:
 
-```ts
-// Hide resize handles if you want to prevent manual resizing
-engine.editor.setSetting('controlGizmo/showResizeHandles', false);
+```typescript highlight-create-scene
+// Create a scene with a page
+const scene = engine.scene.create('DepthStack');
+const page = engine.block.create('page');
+engine.block.setWidth(page, 800);
+engine.block.setHeight(page, 500);
+engine.block.appendChild(scene, page);
 ```
 
-> **Note:** This setting still **displays the corner handles** and helps avoid editing operations that change the size independently in the UI.
-
 ## Resize a Video Block with JavaScript
 
-When developing a custom UI use the CreativeEngine BlockAPI to edit a video's size. Two methods exist: choose the one that best suits your project.
+Use the CreativeEngine BlockAPI to edit a video's size. Two methods exist: choose the one that best suits your project.
 
 ### Set Absolute Sizing
 
 Set the video's absolute size with `setWidth` and `setHeight`. First, create the video block with `addVideo`, then set explicit pixel dimensions:
 
 ```typescript highlight-resizable-video
-const resizableVideo = await engine.block.addVideo(
-  'https://img.ly/static/ubq_video_samples/bbb.mp4',
-  videoWidth,
-  videoHeight
-);
+const resizableVideo = await engine.block.addVideo(videoUri, 200, 150);
 engine.block.appendChild(page, resizableVideo);
-engine.block.setPositionX(resizableVideo, col1VideoX);
-engine.block.setPositionY(resizableVideo, startY);
+engine.block.setWidth(resizableVideo, 200);
+engine.block.setHeight(resizableVideo, 150);
+engine.block.setPositionX(resizableVideo, 50);
+engine.block.setPositionY(resizableVideo, 100);
 ```
 
 ### Set Relative Sizing
@@ -403,19 +242,17 @@ Set the video's size relative to its parent (for example, to the page):
 // Set size mode to percentage (0.0 to 1.0)
 engine.block.setWidthMode(percentVideo, 'Percent');
 engine.block.setHeightMode(percentVideo, 'Percent');
-// Set to 25% width, 20% height of parent
+// Set to 25% width, 30% height of parent
 engine.block.setWidth(percentVideo, 0.25);
-engine.block.setHeight(percentVideo, 0.2);
+engine.block.setHeight(percentVideo, 0.3);
 ```
 
 The preceding code:
 
 - Sets the clip to 25% width of its parent.
-- Makes the clip 20% as tall.
+- Makes the clip 30% as tall.
 - Stays responsive to the parent's size changes.
 
-<Picture src={resizePercent} style={{ width: '110%' }} alt="Resized video relative to the page" formats={['webp']} />
-
 This method allows for the clip to follow the parent's size changes while maintaining proportional dimensions.
 
 ### Get Current Dimensions
@@ -438,97 +275,96 @@ const widthMode = engine.block.getWidthMode(percentVideo);
 const heightMode = engine.block.getHeightMode(percentVideo);
 ```
 
-### Maintain Aspect Ratio
-
-If the block's _fill_ is a video (`FillType.video`), the engine preserves the footage's native aspect ratio. To force a different ratio, you must:
-
-1. Calculate the ratio
-2. Adjust one side, or add constraints (see **Locking** below).
-
-## Resize Videos Together
-
-To resize several videos at once, instead of resizing each video individually:
-
-1. Group the videos with `engine.block.group`.
-2. Set the size for the entire group.
-
-```ts
-// Group multiple video clips
-const group = engine.block.group([clipA, clipB, clipC]);
-
-// Resize the entire group - height scales proportionally
-engine.block.setWidth(group, 400);
-```
-
-To ensure consistent layout, groups of videos:
-
-- Always scale uniformly on both axes.
-- Show only _scale_ and _rotate_ gizmos in the UI, never individual resize handles.
-
 ## Lock or Constrain Resizing
 
-Use the BlockAPI to define if your app allows resizing for a specific block:
+Lock all transforms entirely to prevent resizing, repositioning, and rotation:
 
-<Tabs>
-  <TabItem label="Lock a specific block">
-    1. Tell the engine that each block has its own resize policy with `setGlobalScope`.
-    2. Call `setScopeEnabled`.
-    3. Include the video block ID.
-    4. Set the boolean's value for `locked`:
-       - `true` enables resizing.
-       - `false` deactivates resizing.
+```typescript highlight-locked-video
+// Lock the transform to prevent resizing
+engine.block.setTransformLocked(lockedVideo, true);
+```
 
-    ```ts
-    // Disable only resize for this specific block
-    engine.editor.setGlobalScope('layer/resize', 'Defer');
-    engine.block.setScopeEnabled(videoBlock, 'layer/resize', false);
+This deactivates all transform actions, resize included.
 
-    // The block can still be moved and rotated, but not resized via UI
-    ```
+## Save Scene
 
-    Resize actions remain available through code, but not via the UI.
+Save the scene to a file. The scene can later be loaded in a browser environment or rendered with the CE.SDK Renderer for full video export:
 
-  </TabItem>
+```typescript highlight-export
+  // Save the scene to preserve the resized videos
+  // Note: Video export (MP4/PNG with video frames) requires the CE.SDK Renderer.
+  // In headless Node.js mode, we save the scene file which can be loaded later
+  // in a browser environment or rendered with the CE.SDK Renderer.
+  console.log('Saving scene...');
 
-  <TabItem label="Lock all transforms">
-    Lock all transforms entirely to prevent resizing, repositioning, and rotation:
+  const sceneString = await engine.scene.saveToString();
 
-    ```typescript highlight-locked-video
-    // Lock the transform to prevent resizing
-    engine.block.setTransformLocked(lockedVideo, true);
-    ```
+  // Ensure output directory exists
+  if (!existsSync('output')) {
+    mkdirSync('output');
+  }
 
-    The preceding code deactivates all transform actions, resize included:
+  // Save scene to .scene file (standard CE.SDK scene format)
+  writeFileSync('output/resize-videos-scene.scene', sceneString);
+  console.log('✓ Saved to output/resize-videos-scene.scene');
+
+  // Log final dimensions to verify
+  console.log('\nVideo dimensions:');
+  console.log(
+    `  Resizable video: ${engine.block.getWidth(resizableVideo)}x${engine.block.getHeight(resizableVideo)} [Mode: Absolute]`
+  );
+  console.log(
+    `  Percent video: ${engine.block.getWidth(percentVideo)}x${engine.block.getHeight(percentVideo)} [Mode: Percent]`
+  );
+  console.log(
+    `  Locked video: ${engine.block.getWidth(lockedVideo)}x${engine.block.getHeight(lockedVideo)} [Transform locked]`
+  );
+```
 
-    - Manual actions from the UI
-    - Automated actions through code.
+## Cleanup
 
-  </TabItem>
-</Tabs>
+Always dispose the engine to free resources when done:
 
-Create templates with finer-grained scope keys to allow rotation or movement while forbidding size changes.
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+engine.dispose();
+```
 
 ## Notes on Resizing with CE.SDK
 
-| Topic              | What you want to do                         | What happens                                                  |
-| ------------------ | ------------------------------------------- | ------------------------------------------------------------- |
-| **Block duration** | Resize the block's on-canvas frame.         | No need to retime; duration and trims stay untouched.         |
-| **Content fill**   | Switch the block to `.contain` or `.cover`. | Update it with `setContentFillMode` (see _common crop APIs_). |
-| **Performance**    | Work on large canvases such as 4K.          | Plan around GPU limits and the Video Editor 4K constraints.   |
-
-## Next Steps
+| Topic | What you want to do | What happens |
+| --- | --- | --- |
+| **Block duration** | Resize the block's on-canvas frame. | No need to retime; duration and trims stay untouched. |
+| **Content fill** | Switch the block to `.contain` or `.cover`. | Update it with `setContentFillMode`. |
+| **Batch processing** | Resize multiple videos programmatically. | Use loops and save each scene to separate files. |
+
+## API Reference
+
+| Method | Description |
+| --- | --- |
+| `CreativeEngine.init()` | Initializes the headless engine for programmatic creation |
+| `engine.scene.create()` | Creates a new scene |
+| `engine.block.findByType()` | Finds blocks by type |
+| `engine.block.addVideo()` | Create and size video in one operation |
+| `engine.block.setWidth()` | Set block width value |
+| `engine.block.setHeight()` | Set block height value |
+| `engine.block.getWidth()` | Get current width value |
+| `engine.block.getHeight()` | Get current height value |
+| `engine.block.setWidthMode()` | Set width mode (Absolute or Percent) |
+| `engine.block.setHeightMode()` | Set height mode (Absolute or Percent) |
+| `engine.block.getWidthMode()` | Get current width mode |
+| `engine.block.getHeightMode()` | Get current height mode |
+| `engine.block.setTransformLocked()` | Lock all transforms including resize |
+| `engine.scene.saveToString()` | Save scene to string for later use |
+| `engine.dispose()` | Dispose engine and free resources |
 
-Now that you understand how to resize with the CE.SDK, take time to dive into other related features:
 
-- [Create a template](./create-templates.md) to enforce design rules.
-- [Use other transforms](./edit-video/transform.md) available with the CreativeEditor.
-- [Add captions](./edit-video/add-captions.md) to videos.
 
 ---
 
 ## 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