@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,21 +1,20 @@
-> 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) > [Scale](./edit-video/transform/scale.md)
 
 ---
 
-The CreativeEditor provides a scaling feature to edit videos in your web app, to render an intended composition. Explore the different scaling options within CE.SDK, and learn how to embed it both from the UI and the API.
-
-![Scale videos example showing different scaling techniques](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Scale videos proportionally from different anchor points, stretch along a single axis, or group elements to scale together using the headless CE.SDK engine.
 
 > **Reading time:** 10 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-create-video-transform-scale-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-scale-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-scale-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-scale-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-transform-scale-server-js)
 
 ## What You'll Learn
 
@@ -36,355 +35,222 @@ Use scaling to:
 
 Scaling uses the `scale(block, scale, anchorX, anchorY)` function, with the following **parameters**:
 
-| Parameter           | Description                                      | Values                                                                               |
-| ------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------ |
-| `block`             | Handle (ID) of the block to scale.               | `number`                                                                             |
-| `scale`             | Scale factor to apply.                           | **1.0** keeps the original size. **>1.0** enlarges the block. **\< 1.0** shrinks it. |
-| `anchorX` `anchorY` | Origin point of scale along the width and height | **Top/Left** = 0, **Center** = 0.5, **Bottom/Right** = 1. **Defaults** = `0`         |
+| Parameter           | Description                                      | Values                                                                                         |
+| ------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
+| `block`             | Handle (ID) of the block to scale.               | `number`                                                                                       |
+| `scale`             | Scale factor to apply.                           | **1.0** keeps the original size. **>1.0** enlarges the block. **\< 1.0** shrinks it.            |
+| `anchorX` `anchorY` | Origin point of scale along the width and height | **Top/Left** = 0, **Center** = 0.5, **Bottom/Right** = 1. **Defaults** = `0`                   |
 
 For example:
 
 - A value of `1.0` sets the original block's size.
 - A value of `2.0` makes the block twice as large.
 
-```typescript file=@cesdk_web_examples/guides-create-video-transform-scale-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-create-video-transform-scale-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
-    });
-
-    // Centered 2x2 grid layout for 800x500 canvas
-    // Videos: 120x90, scaled to 180x135
-    // Grid positions are where videos APPEAR after scaling
-    // Left column visual X=200, Right column visual X=420
-    // Top row visual Y=50, Bottom row visual Y=265
-    const leftColumnX = 200;
-    const rightColumnX = 420;
-    const topRowY = 50;
-    const bottomRowY = 265;
-    const titleOffsetY = 145; // 135 (video height) + 10 (gap)
-    const subtitleOffsetY = 172; // title + 27
-
-    // For center-scaled video, compensate for position shift
-    // Center scaling shifts top-left by (-30, -22.5) for 1.5x scale on 120x90
-    const centerScaleOffsetX = 30;
-    const centerScaleOffsetY = 22.5;
-
-    // Demo 1: Uniform scaling from top-left (default anchor)
-    const uniformVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      120,
-      90
-    );
-    engine.block.appendChild(page, uniformVideo);
-    engine.block.setPositionX(uniformVideo, leftColumnX);
-    engine.block.setPositionY(uniformVideo, topRowY);
-
-    // Scale the video to 150% from the default top-left anchor
-    engine.block.scale(uniformVideo, 1.5);
-
-    const text1 = engine.block.create('text');
-    engine.block.setString(text1, 'text/text', 'Uniform Scale');
-    engine.block.setFloat(text1, 'text/fontSize', 24);
-    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text1, 180);
-    engine.block.setPositionX(text1, leftColumnX);
-    engine.block.setPositionY(text1, topRowY + titleOffsetY);
-    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);
-
-    const explanation1 = engine.block.create('text');
-    engine.block.setString(
-      explanation1,
-      'text/text',
-      '150% from top-left anchor'
-    );
-    engine.block.setFloat(explanation1, 'text/fontSize', 12);
-    engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation1, 180);
-    engine.block.setPositionX(explanation1, leftColumnX);
-    engine.block.setPositionY(explanation1, topRowY + subtitleOffsetY);
-    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: Scaling from center anchor
-    const centerVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      120,
-      90
-    );
-    engine.block.appendChild(page, centerVideo);
-    // Position compensates for center scaling shift so final position aligns with grid
-    engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX);
-    engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY);
-
-    // Scale from center anchor (0.5, 0.5)
-    engine.block.scale(centerVideo, 1.5, 0.5, 0.5);
-
-    const text2 = engine.block.create('text');
-    engine.block.setString(text2, 'text/text', 'Center Scale');
-    engine.block.setFloat(text2, 'text/fontSize', 24);
-    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text2, 180);
-    engine.block.setPositionX(text2, rightColumnX);
-    engine.block.setPositionY(text2, topRowY + titleOffsetY);
-    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);
-
-    const explanation2 = engine.block.create('text');
-    engine.block.setString(
-      explanation2,
-      'text/text',
-      '150% from center anchor'
-    );
-    engine.block.setFloat(explanation2, 'text/fontSize', 12);
-    engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation2, 180);
-    engine.block.setPositionX(explanation2, rightColumnX);
-    engine.block.setPositionY(explanation2, topRowY + subtitleOffsetY);
-    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: Non-uniform scaling (width only)
-    const stretchVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      120,
-      90
-    );
-    engine.block.appendChild(page, stretchVideo);
-    engine.block.setPositionX(stretchVideo, leftColumnX);
-    engine.block.setPositionY(stretchVideo, bottomRowY);
-
-    // Stretch only the width by 1.5x
-    engine.block.setWidthMode(stretchVideo, 'Absolute');
-    const currentWidth = engine.block.getWidth(stretchVideo);
-    engine.block.setWidth(stretchVideo, currentWidth * 1.5, true);
-
-    const text3 = engine.block.create('text');
-    engine.block.setString(text3, 'text/text', 'Width Stretch');
-    engine.block.setFloat(text3, 'text/fontSize', 24);
-    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text3, 180);
-    engine.block.setPositionX(text3, leftColumnX);
-    engine.block.setPositionY(text3, bottomRowY + titleOffsetY);
-    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);
-
-    const explanation3 = engine.block.create('text');
-    engine.block.setString(
-      explanation3,
-      'text/text',
-      '150% width, height unchanged'
-    );
-    engine.block.setFloat(explanation3, 'text/fontSize', 12);
-    engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation3, 180);
-    engine.block.setPositionX(explanation3, leftColumnX);
-    engine.block.setPositionY(explanation3, bottomRowY + subtitleOffsetY);
-    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);
-
-    // Demo 4: Locked scaling
-    const lockedVideo = await engine.block.addVideo(
-      'https://img.ly/static/ubq_video_samples/bbb.mp4',
-      120,
-      90
-    );
-    engine.block.appendChild(page, lockedVideo);
-    engine.block.setPositionX(lockedVideo, rightColumnX);
-    engine.block.setPositionY(lockedVideo, bottomRowY);
-
-    // Lock all transforms to prevent scaling
-    engine.block.setTransformLocked(lockedVideo, true);
-
-    const text4 = engine.block.create('text');
-    engine.block.setString(text4, 'text/text', 'Scale Locked');
-    engine.block.setFloat(text4, 'text/fontSize', 24);
-    engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text4, 180);
-    engine.block.setPositionX(text4, rightColumnX);
-    engine.block.setPositionY(text4, bottomRowY + titleOffsetY);
-    engine.block.setFillEnabled(text4, true);
-    engine.block.setColor(engine.block.getFill(text4), 'fill/color/value', {
-      r: 1,
-      g: 1,
-      b: 1,
-      a: 1
-    });
-    engine.block.appendChild(page, text4);
-
-    const explanation4 = engine.block.create('text');
-    engine.block.setString(
-      explanation4,
-      'text/text',
-      'Transform locked - cannot scale'
-    );
-    engine.block.setFloat(explanation4, 'text/fontSize', 12);
-    engine.block.setEnum(explanation4, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(explanation4, 180);
-    engine.block.setPositionX(explanation4, rightColumnX);
-    engine.block.setPositionY(explanation4, bottomRowY + subtitleOffsetY);
-    engine.block.setFillEnabled(explanation4, true);
-    engine.block.setColor(
-      engine.block.getFill(explanation4),
-      'fill/color/value',
-      {
-        r: 1,
-        g: 1,
-        b: 1,
-        a: 1
-      }
-    );
-    engine.block.appendChild(page, explanation4);
-
-    // Set playhead position to 2 seconds
-    engine.block.setPlaybackTime(page, 2);
+```typescript file=@cesdk_web_examples/guides-create-video-transform-scale-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: Scale Videos
+ *
+ * Demonstrates video scaling in headless mode:
+ * - Uniform scaling with different anchor points
+ * - Non-uniform scaling (width/height independently)
+ * - Locking transforms to prevent scaling
+ * - 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.
+ */
+
+console.log('🚀 Starting CE.SDK Scale Videos Guide...');
+console.log('⏳ Initializing engine...');
+
+// 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)
+});
+
+console.log('✓ Engine initialized');
+
+try {
+  // Create a scene with a page
+  console.log('⏳ Creating scene...');
+  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);
+  console.log('✓ Scene created');
+
+  // Sample video URL for demonstrations
+  const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4';
+
+  // Centered 2x2 grid layout for 800x500 canvas
+  // Videos: 120x90, scaled to 180x135
+  const leftColumnX = 200;
+  const rightColumnX = 420;
+  const topRowY = 50;
+  const bottomRowY = 265;
+
+  // For center-scaled video, compensate for position shift
+  // Center scaling shifts top-left by (-30, -22.5) for 1.5x scale on 120x90
+  const centerScaleOffsetX = 30;
+  const centerScaleOffsetY = 22.5;
+
+  // Demo 1: Uniform scaling from default top-left anchor
+  console.log('⏳ Adding uniform scaled video...');
+  const uniformVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, uniformVideo);
+  engine.block.setPositionX(uniformVideo, leftColumnX);
+  engine.block.setPositionY(uniformVideo, topRowY);
+
+  // Scale the video to 150% from the default top-left anchor
+  engine.block.scale(uniformVideo, 1.5);
+  console.log('✓ Uniform scaled video added (150% from top-left)');
+
+  // Add label for uniform scaled video
+  const text1 = engine.block.create('text');
+  engine.block.setString(text1, 'text/text', 'Uniform Scale (150%)');
+  engine.block.setFloat(text1, 'text/fontSize', 16);
+  engine.block.setWidth(text1, 200);
+  engine.block.setPositionX(text1, leftColumnX);
+  engine.block.setPositionY(text1, topRowY + 145);
+  engine.block.appendChild(page, text1);
+
+  // Demo 2: Scaling from center anchor
+  console.log('⏳ Adding center-scaled video...');
+  const centerVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, centerVideo);
+  // Position compensates for center scaling shift so final position aligns with grid
+  engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX);
+  engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY);
+
+  // Scale from center anchor (0.5, 0.5)
+  engine.block.scale(centerVideo, 1.5, 0.5, 0.5);
+  console.log('✓ Center-scaled video added (150% from center)');
+
+  // Add label for center scaled video
+  const text2 = engine.block.create('text');
+  engine.block.setString(text2, 'text/text', 'Center Scale (150%)');
+  engine.block.setFloat(text2, 'text/fontSize', 16);
+  engine.block.setWidth(text2, 200);
+  engine.block.setPositionX(text2, rightColumnX);
+  engine.block.setPositionY(text2, topRowY + 145);
+  engine.block.appendChild(page, text2);
+
+  // Demo 3: Non-uniform scaling (width only)
+  console.log('⏳ Adding width-stretched video...');
+  const stretchVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, stretchVideo);
+  engine.block.setPositionX(stretchVideo, leftColumnX);
+  engine.block.setPositionY(stretchVideo, bottomRowY);
+
+  // Stretch only the width by 1.5x
+  engine.block.setWidthMode(stretchVideo, 'Absolute');
+  const currentWidth = engine.block.getWidth(stretchVideo);
+  engine.block.setWidth(stretchVideo, currentWidth * 1.5, true);
+  console.log('✓ Width-stretched video added (150% width only)');
+
+  // Add label for stretched video
+  const text3 = engine.block.create('text');
+  engine.block.setString(text3, 'text/text', 'Width Stretch (150%)');
+  engine.block.setFloat(text3, 'text/fontSize', 16);
+  engine.block.setWidth(text3, 200);
+  engine.block.setPositionX(text3, leftColumnX);
+  engine.block.setPositionY(text3, bottomRowY + 145);
+  engine.block.appendChild(page, text3);
+
+  // Demo 4: Locked scaling
+  console.log('⏳ Adding transform-locked video...');
+  const lockedVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, lockedVideo);
+  engine.block.setPositionX(lockedVideo, rightColumnX);
+  engine.block.setPositionY(lockedVideo, bottomRowY);
+
+  // Lock all transforms to prevent scaling
+  engine.block.setTransformLocked(lockedVideo, true);
+  console.log('✓ Transform-locked video added');
+
+  // Add label for locked video
+  const text4 = engine.block.create('text');
+  engine.block.setString(text4, 'text/text', 'Transform Locked');
+  engine.block.setFloat(text4, 'text/fontSize', 16);
+  engine.block.setWidth(text4, 200);
+  engine.block.setPositionX(text4, rightColumnX);
+  engine.block.setPositionY(text4, bottomRowY + 145);
+  engine.block.appendChild(page, text4);
+
+  // Save the scene to preserve the scaled 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');
   }
+
+  // Save scene to .scene file
+  writeFileSync('output/scale-videos.scene', sceneString);
+  console.log('✓ Scene saved to output/scale-videos.scene');
+
+  // Log scale information to verify
+  console.log('\n📊 Video scaling results:');
+  console.log(
+    `  Uniform video: ${engine.block.getWidth(uniformVideo).toFixed(1)}x${engine.block.getHeight(uniformVideo).toFixed(1)}`
+  );
+  console.log(
+    `  Center video: ${engine.block.getWidth(centerVideo).toFixed(1)}x${engine.block.getHeight(centerVideo).toFixed(1)}`
+  );
+  console.log(
+    `  Stretched video: ${engine.block.getWidth(stretchVideo).toFixed(1)}x${engine.block.getHeight(stretchVideo).toFixed(1)}`
+  );
+  console.log(`  Locked video: Transform locked = true`);
+
+  console.log('\n✅ Scale videos guide completed successfully!');
+} finally {
+  // Always dispose the engine to free resources
+  console.log('⏳ Disposing engine...');
+  engine.dispose();
+  console.log('✓ Engine disposed');
 }
+```
+
+<NodejsVideoExportNotice {...props} />
+
+## Initialize Headless Engine
 
-export default Example;
+Create a headless engine instance for programmatic video manipulation:
+
+```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)
+});
+```
+
+## Create the Scene
+
+Create a scene with specific page dimensions:
+
+```typescript highlight-create-scene
+// Create a scene with a page
+console.log('⏳ Creating scene...');
+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);
 ```
 
 ## Scale a Video Uniformly
@@ -400,17 +266,13 @@ Scaling a video uniformly allows you to:
 CE.SDK lets you use the same high-level API on all graphic blocks, videos included. To scale any block, use `engine.block.scale()`:
 
 ```typescript highlight-uniform-scale
-const uniformVideo = await engine.block.addVideo(
-  'https://img.ly/static/ubq_video_samples/bbb.mp4',
-  120,
-  90
-);
-engine.block.appendChild(page, uniformVideo);
-engine.block.setPositionX(uniformVideo, leftColumnX);
-engine.block.setPositionY(uniformVideo, topRowY);
-
-// Scale the video to 150% from the default top-left anchor
-engine.block.scale(uniformVideo, 1.5);
+  const uniformVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, uniformVideo);
+  engine.block.setPositionX(uniformVideo, leftColumnX);
+  engine.block.setPositionY(uniformVideo, topRowY);
+
+  // Scale the video to 150% from the default top-left anchor
+  engine.block.scale(uniformVideo, 1.5);
 ```
 
 The preceding code:
@@ -432,18 +294,14 @@ To **change the anchor point**, the scale function has two optional parameters:
 Both can have values between 0.0 and 1.0. For example, to scale from the center:
 
 ```typescript highlight-center-scale
-const centerVideo = await engine.block.addVideo(
-  'https://img.ly/static/ubq_video_samples/bbb.mp4',
-  120,
-  90
-);
-engine.block.appendChild(page, centerVideo);
-// Position compensates for center scaling shift so final position aligns with grid
-engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX);
-engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY);
-
-// Scale from center anchor (0.5, 0.5)
-engine.block.scale(centerVideo, 1.5, 0.5, 0.5);
+  const centerVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, centerVideo);
+  // Position compensates for center scaling shift so final position aligns with grid
+  engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX);
+  engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY);
+
+  // Scale from center anchor (0.5, 0.5)
+  engine.block.scale(centerVideo, 1.5, 0.5, 0.5);
 ```
 
 This function:
@@ -458,19 +316,15 @@ This way, the video expands from the center equally in all directions.
 You might need to stretch a video only horizontally or vertically. To stretch or compress only one axis, thus distorting a video, use the **width** or **height** functions.
 
 ```typescript highlight-nonuniform-scale
-const stretchVideo = await engine.block.addVideo(
-  'https://img.ly/static/ubq_video_samples/bbb.mp4',
-  120,
-  90
-);
-engine.block.appendChild(page, stretchVideo);
-engine.block.setPositionX(stretchVideo, leftColumnX);
-engine.block.setPositionY(stretchVideo, bottomRowY);
-
-// Stretch only the width by 1.5x
-engine.block.setWidthMode(stretchVideo, 'Absolute');
-const currentWidth = engine.block.getWidth(stretchVideo);
-engine.block.setWidth(stretchVideo, currentWidth * 1.5, true);
+  const stretchVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, stretchVideo);
+  engine.block.setPositionX(stretchVideo, leftColumnX);
+  engine.block.setPositionY(stretchVideo, bottomRowY);
+
+  // Stretch only the width by 1.5x
+  engine.block.setWidthMode(stretchVideo, 'Absolute');
+  const currentWidth = engine.block.getWidth(stretchVideo);
+  engine.block.setWidth(stretchVideo, currentWidth * 1.5, true);
 ```
 
 The preceding code:
@@ -517,17 +371,13 @@ To preserve a template's layout, consider locking the scaling option. This is us
 - Fixed dimensions swapping editors
 
 ```typescript highlight-locked-scale
-const lockedVideo = await engine.block.addVideo(
-  'https://img.ly/static/ubq_video_samples/bbb.mp4',
-  120,
-  90
-);
-engine.block.appendChild(page, lockedVideo);
-engine.block.setPositionX(lockedVideo, rightColumnX);
-engine.block.setPositionY(lockedVideo, bottomRowY);
-
-// Lock all transforms to prevent scaling
-engine.block.setTransformLocked(lockedVideo, true);
+  const lockedVideo = await engine.block.addVideo(videoUri, 120, 90);
+  engine.block.appendChild(page, lockedVideo);
+  engine.block.setPositionX(lockedVideo, rightColumnX);
+  engine.block.setPositionY(lockedVideo, bottomRowY);
+
+  // Lock all transforms to prevent scaling
+  engine.block.setTransformLocked(lockedVideo, true);
 ```
 
 ### Disable Resize Scope
@@ -553,6 +403,53 @@ const canResize = engine.block.isScopeEnabled(blockId, 'layer/resize');
 console.log('layer/resize scope enabled?', canResize);
 ```
 
+## Save Scene
+
+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:
+
+```typescript highlight-export
+  // Save the scene to preserve the scaled 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');
+  }
+
+  // Save scene to .scene file
+  writeFileSync('output/scale-videos.scene', sceneString);
+  console.log('✓ Scene saved to output/scale-videos.scene');
+
+  // Log scale information to verify
+  console.log('\n📊 Video scaling results:');
+  console.log(
+    `  Uniform video: ${engine.block.getWidth(uniformVideo).toFixed(1)}x${engine.block.getHeight(uniformVideo).toFixed(1)}`
+  );
+  console.log(
+    `  Center video: ${engine.block.getWidth(centerVideo).toFixed(1)}x${engine.block.getHeight(centerVideo).toFixed(1)}`
+  );
+  console.log(
+    `  Stretched video: ${engine.block.getWidth(stretchVideo).toFixed(1)}x${engine.block.getHeight(stretchVideo).toFixed(1)}`
+  );
+  console.log(`  Locked video: Transform locked = true`);
+```
+
+## Cleanup
+
+Always dispose the engine to free resources when done:
+
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+console.log('⏳ Disposing engine...');
+engine.dispose();
+console.log('✓ Engine disposed');
+```
+
 ## Troubleshooting
 
 ### Video Not Scaling
@@ -569,35 +466,41 @@ When using `setWidth` or `setHeight`, pass `true` as the third parameter to main
 
 ## Recap
 
-| Usage              | How To                                                                        |
-| ------------------ | ----------------------------------------------------------------------------- |
-| Uniform scaling    | `engine.block.scale(blockId, scaleFactor)` + optional anchor                  |
-| Stretching an axis | Set width mode to `'Absolute'`, then use `setWidth()` or `setHeight()`        |
-| Group scaling      | 1. Group with `engine.block.group([blockId_1, blockId_2])` 2. Scale the group |
-| Constraints        | Adjust scopes or lock transforms to protect templates                         |
+| Usage              | How To                                                                                         |
+| ------------------ | ---------------------------------------------------------------------------------------------- |
+| Uniform scaling    | `engine.block.scale(blockId, scaleFactor)` + optional anchor                                   |
+| Stretching an axis | Set width mode to `'Absolute'`, then use `setWidth()` or `setHeight()`                         |
+| Group scaling      | 1. Group with `engine.block.group([blockId_1, blockId_2])` 2. Scale the group                  |
+| Constraints        | Adjust scopes or lock transforms to protect templates                                          |
 
 ## API Reference
 
-| API                        | Usage                                                          |
-| -------------------------- | -------------------------------------------------------------- |
-| `block.scale`              | Performs uniform or anchored scaling on blocks and groups.     |
-| `block.setWidthMode`       | Enables absolute sizing before changing a single axis.         |
-| `block.getWidth`           | Reads the current width before non-uniform scaling.            |
-| `block.setWidth`           | Writes the adjusted width after single-axis scaling.           |
-| `block.setHeightMode`      | Enables absolute sizing for height changes.                    |
-| `block.getHeight`          | Reads the current height before non-uniform scaling.           |
-| `block.setHeight`          | Writes the adjusted height after single-axis scaling.          |
-| `block.group`              | Group blocks so they scale together.                           |
-| `block.setScopeEnabled`    | Toggles the `layer/resize` scope to lock scaling in templates. |
-| `block.setTransformLocked` | Locks all transform scopes when templates must stay fixed.     |
-| `block.isScopeEnabled`     | Checks whether scaling is currently permitted on a block.      |
-| `block.isTransformLocked`  | Checks whether all transforms are locked on a block.           |
+| API                          | Usage                                                              |
+| ---------------------------- | ------------------------------------------------------------------ |
+| `CreativeEngine.init`        | Initializes the headless engine for programmatic creation.         |
+| `scene.create`               | Creates a new scene.                                               |
+| `block.scale`                | Performs uniform or anchored scaling on blocks and groups.         |
+| `block.setWidthMode`         | Enables absolute sizing before changing a single axis.             |
+| `block.getWidth`             | Reads the current width before non-uniform scaling.                |
+| `block.setWidth`             | Writes the adjusted width after single-axis scaling.               |
+| `block.setHeightMode`        | Enables absolute sizing for height changes.                        |
+| `block.getHeight`            | Reads the current height before non-uniform scaling.               |
+| `block.setHeight`            | Writes the adjusted height after single-axis scaling.              |
+| `block.group`                | Group blocks so they scale together.                               |
+| `block.setScopeEnabled`      | Toggles the `layer/resize` scope to lock scaling in templates.     |
+| `block.setTransformLocked`   | Locks all transform scopes when templates must stay fixed.         |
+| `block.isScopeEnabled`       | Checks whether scaling is currently permitted on a block.          |
+| `block.isTransformLocked`    | Checks whether all transforms are locked on a block.               |
+| `scene.saveToString`         | Saves the scene for later use or rendering.                        |
+| `engine.dispose`             | Disposes the engine and frees resources.                           |
+
+
 
 ---
 
 ## 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