@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/insert-media/audio.md

@@ -0,0 +1,291 @@
+> 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).
+
+**Navigation:** [Guides](./guides.md) > [Insert Media Assets](./insert-media.md) > [Insert Audio](./insert-media/audio.md)
+
+---
+
+Add audio files to video projects using CE.SDK's audio block system for
+background music, sound effects, and voiceovers.
+
+![Insert Audio example showing audio block in the timeline](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **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-insert-media-audio-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-insert-media-audio-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-insert-media-audio-browser/)
+
+Audio blocks are time-based blocks that play sound alongside video content. Unlike video fills that attach to graphic blocks, audio blocks exist independently in the composition with their own duration, position, and volume controls.
+
+```typescript file=@cesdk_web_examples/guides-insert-media-audio-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';
+
+/**
+ * CE.SDK Plugin: Insert Audio Guide
+ *
+ * Demonstrates adding audio to video projects:
+ * - Creating audio blocks programmatically
+ * - Setting audio source URIs
+ * - Configuring timeline position and duration
+ * - Adjusting audio volume, mute, and loop settings
+ * - Querying and managing audio blocks
+ */
+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());
+
+    await cesdk.actions.run('scene.create', {
+      layout: 'DepthStack',
+      page: { width: 1920, height: 1080, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.scene.getCurrentPage();
+    if (page == null) {
+      throw new Error('No page found in scene');
+    }
+
+    // Set page duration for timeline
+    engine.block.setDuration(page, 30);
+
+    // Create an audio block and set source
+    const audioUri =
+      'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a';
+    const audioBlock = engine.block.create('audio');
+    engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+    engine.block.appendChild(page, audioBlock);
+
+    // Load audio resource to access duration
+    await engine.block.forceLoadAVResource(audioBlock);
+    const totalDuration = engine.block.getAVResourceTotalDuration(audioBlock);
+    console.log('Audio total duration:', totalDuration, 'seconds');
+
+    engine.block.setTimeOffset(audioBlock, 0);
+    engine.block.setDuration(audioBlock, Math.min(totalDuration, 30));
+
+    engine.block.setVolume(audioBlock, 0.8);
+    const currentVolume = engine.block.getVolume(audioBlock);
+    console.log('Audio volume:', currentVolume);
+
+    engine.block.setMuted(audioBlock, false);
+    const isMuted = engine.block.isMuted(audioBlock);
+    console.log('Audio muted:', isMuted);
+
+    engine.block.setLooping(audioBlock, false);
+    const isLooping = engine.block.isLooping(audioBlock);
+    console.log('Audio looping:', isLooping);
+
+    const allAudioBlocks = engine.block.findByType('audio');
+    console.log('Total audio blocks:', allAudioBlocks.length);
+
+    // Log information about each audio block
+    allAudioBlocks.forEach((block, index) => {
+      const uri = engine.block.getString(block, 'audio/fileURI');
+      const timeOffset = engine.block.getTimeOffset(block);
+      const duration = engine.block.getDuration(block);
+      const volume = engine.block.getVolume(block);
+
+      console.log(`Audio block ${index + 1}:`, {
+        uri: uri.split('/').pop(),
+        timeOffset: `${timeOffset}s`,
+        duration: `${duration}s`,
+        volume: `${(volume * 100).toFixed(0)}%`
+      });
+    });
+
+    // Create a second audio block to demonstrate removal
+    const tempAudioBlock = engine.block.create('audio');
+    engine.block.appendChild(page, tempAudioBlock);
+
+    engine.block.destroy(tempAudioBlock);
+
+    console.log(
+      'Insert Audio guide initialized. Open the timeline to see audio tracks.'
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers creating audio blocks, configuring time-based properties, controlling playback settings, and managing audio blocks in your scene.
+
+## Creating an Audio Block
+
+We create audio blocks using `engine.block.create('audio')` and set the source file with the `audio/fileURI` property. Audio blocks must be appended to a page to become part of the composition.
+
+```typescript highlight=highlight-create-audio
+const audioBlock = engine.block.create('audio');
+engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+engine.block.appendChild(page, audioBlock);
+```
+
+CE.SDK supports WAV and MP4 audio formats (including `.m4a` files). The source URI can point to any accessible URL.
+
+## Configuring Time Position
+
+Audio blocks have time-based properties that control when and how long they play. We use `setTimeOffset()` for the start position and `setDuration()` for playback length.
+
+```typescript highlight=highlight-configure-timeline
+engine.block.setTimeOffset(audioBlock, 0);
+engine.block.setDuration(audioBlock, Math.min(totalDuration, 30));
+```
+
+The `forceLoadAVResource()` method loads the audio file so we can access its total duration. Use `getAVResourceTotalDuration()` to get the full length of the source audio for timing calculations.
+
+## Adjusting Volume
+
+We set volume using `setVolume()` with values from 0.0 (silent) to 1.0 (full volume). This affects both preview playback and the final exported output.
+
+```typescript highlight=highlight-adjust-volume
+engine.block.setVolume(audioBlock, 0.8);
+const currentVolume = engine.block.getVolume(audioBlock);
+```
+
+## Muting Audio
+
+To temporarily silence audio without removing it, use `setMuted()`. This preserves all other properties while stopping sound output.
+
+```typescript highlight=highlight-mute-audio
+engine.block.setMuted(audioBlock, false);
+const isMuted = engine.block.isMuted(audioBlock);
+```
+
+## Looping Audio
+
+Enable continuous playback with `setLooping()`. When enabled, the audio repeats until the end of the block's duration in the composition.
+
+```typescript highlight=highlight-loop-audio
+engine.block.setLooping(audioBlock, false);
+const isLooping = engine.block.isLooping(audioBlock);
+```
+
+## Finding Audio Blocks
+
+Use `findByType('audio')` to retrieve all audio blocks in the scene. This is useful for building audio management interfaces or performing batch operations.
+
+```typescript highlight=highlight-find-audio
+const allAudioBlocks = engine.block.findByType('audio');
+```
+
+## Removing Audio
+
+To remove an audio block, call `destroy()`. This removes the block from the scene and frees its resources.
+
+```typescript highlight=highlight-remove-audio
+engine.block.destroy(tempAudioBlock);
+```
+
+## API Reference
+
+| Method                                                | Description                         |
+| ----------------------------------------------------- | ----------------------------------- |
+| `engine.block.create('audio')`                        | Create a new audio block            |
+| `engine.block.setString(block, 'audio/fileURI', uri)` | Set the audio source file           |
+| `engine.block.appendChild(parent, child)`             | Add audio block to page             |
+| `engine.block.forceLoadAVResource(block)`             | Force load the audio file           |
+| `engine.block.getAVResourceTotalDuration(block)`      | Get total audio duration in seconds |
+| `engine.block.setTimeOffset(block, seconds)`          | Set start position                  |
+| `engine.block.setDuration(block, seconds)`            | Set playback duration               |
+| `engine.block.setVolume(block, volume)`               | Set volume (0.0-1.0)                |
+| `engine.block.getVolume(block)`                       | Get current volume                  |
+| `engine.block.setMuted(block, muted)`                 | Mute or unmute audio                |
+| `engine.block.isMuted(block)`                         | Check if audio is muted             |
+| `engine.block.setLooping(block, loop)`                | Enable/disable looping              |
+| `engine.block.isLooping(block)`                       | Check if looping is enabled         |
+| `engine.block.findByType('audio')`                    | Find all audio blocks               |
+| `engine.block.destroy(block)`                         | Remove audio block from scene       |
+
+## Next Steps
+
+[Insert Media Overview](./overview.md) - Learn about adding different media types to your projects
+
+[Split Video](./edit-video/split.md) - Split video clips on the timeline
+
+[Load Scene](./open-the-editor/load-scene.md) - Save and reload your scenes with audio
+
+[Store Custom Metadata](./export-save-publish/store-custom-metadata.md) - Save custom data with your scenes
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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

package/assets/docs/guide/insert-media/images.md

@@ -0,0 +1,380 @@
+> 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).
+
+**Navigation:** [Guides](./guides.md) > [Insert Media Assets](./insert-media.md) > [Insert Images](./insert-media/images.md)
+
+---
+
+Insert images into your designs programmatically using CE.SDK's engine API.
+
+![Insert Images example showing multiple images placed on a canvas](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **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-insert-media-images-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-insert-media-images-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-insert-media-images-browser/)
+
+Images in CE.SDK are graphic blocks with image fills attached. The engine supports multiple image formats including PNG, JPEG, WebP, GIF, and SVG. You can insert images using either the convenience API for quick setup or manual construction for fine-grained control over the image block components.
+
+```typescript file=@cesdk_web_examples/guides-insert-media-images-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';
+
+/**
+ * CE.SDK Plugin: Insert Images Guide
+ *
+ * Demonstrates inserting images into a scene programmatically:
+ * - Using the convenience API (addImage)
+ * - Manual construction with graphic blocks and image fills
+ * - Configuring image sizing, positioning, and content fill mode
+ * - Applying corner radius for rounded images
+ * - Working with multiple images
+ */
+class Example implements EditorPlugin {
+  name = packageJson.name;
+
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    await cesdk.addPlugin(new DesignEditorConfig());
+
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({ include: ['ly.img.image.upload'] })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: [
+          'ly.img.templates.blank.*',
+          'ly.img.templates.presentation.*',
+          'ly.img.templates.print.*',
+          'ly.img.templates.social.*',
+          'ly.img.image.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new EffectsAssetSource());
+    await cesdk.addPlugin(new FiltersAssetSource());
+    await cesdk.addPlugin(new PagePresetsAssetSource());
+    await cesdk.addPlugin(new StickerAssetSource());
+    await cesdk.addPlugin(new TextAssetSource());
+    await cesdk.addPlugin(new TextComponentAssetSource());
+    await cesdk.addPlugin(new TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+
+    await cesdk.actions.run('scene.create', {
+      page: { width: 800, height: 600, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Sample image URL for demonstrations
+    const imageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+
+    // Add an image using the convenience API
+    // This automatically creates a graphic block with rect shape and image fill
+    const imageBlock = await engine.block.addImage(imageUrl, {
+      size: { width: 200, height: 150 },
+      x: 50,
+      y: 50
+    });
+    engine.block.appendChild(page, imageBlock);
+    console.log('✓ Added image using convenience API');
+
+    // Manually construct an image block for more control
+    const manualBlock = engine.block.create('graphic');
+
+    // Create and attach a rectangular shape
+    const shape = engine.block.createShape('rect');
+    engine.block.setShape(manualBlock, shape);
+
+    // Create and configure the image fill
+    const fill = engine.block.createFill('image');
+    engine.block.setString(fill, 'fill/image/imageFileURI', imageUrl);
+    engine.block.setFill(manualBlock, fill);
+
+    // Set dimensions and position
+    engine.block.setWidth(manualBlock, 200);
+    engine.block.setHeight(manualBlock, 150);
+    engine.block.setPositionX(manualBlock, 300);
+    engine.block.setPositionY(manualBlock, 50);
+    engine.block.appendChild(page, manualBlock);
+    console.log('✓ Added image using manual construction');
+
+    // Set content fill mode to control how images scale within bounds
+    // 'Contain' preserves aspect ratio and fits within bounds
+    // 'Cover' preserves aspect ratio and fills bounds
+    const containBlock = await engine.block.addImage(imageUrl, {
+      size: { width: 200, height: 150 },
+      x: 550,
+      y: 50
+    });
+    engine.block.appendChild(page, containBlock);
+
+    if (engine.block.supportsContentFillMode(containBlock)) {
+      engine.block.setContentFillMode(containBlock, 'Contain');
+      console.log('✓ Applied Contain fill mode');
+    }
+
+    // Apply corner radius to create rounded corners on an image
+    const roundedBlock = await engine.block.addImage(imageUrl, {
+      size: { width: 200, height: 150 },
+      x: 50,
+      y: 250,
+      cornerRadius: 20
+    });
+    engine.block.appendChild(page, roundedBlock);
+    console.log('✓ Added image with rounded corners');
+
+    // Insert multiple images with calculated positioning
+    const imageUrls = [
+      'https://img.ly/static/ubq_samples/sample_1.jpg',
+      'https://img.ly/static/ubq_samples/sample_2.jpg',
+      'https://img.ly/static/ubq_samples/sample_3.jpg'
+    ];
+
+    for (let i = 0; i < imageUrls.length; i++) {
+      const block = await engine.block.addImage(imageUrls[i], {
+        size: { width: 150, height: 100 },
+        x: 300 + i * 160,
+        y: 250
+      });
+      engine.block.appendChild(page, block);
+    }
+    console.log('✓ Added multiple images');
+
+    // Select the first image block to show it in the inspector
+    engine.block.setSelected(imageBlock, true);
+
+    // Zoom to show all content
+    cesdk.engine.scene.zoomToBlock(page, {
+      padding: {
+        top: 40,
+        bottom: 40,
+        left: 40,
+        right: 40
+      }
+    });
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to add images using the convenience API, manually construct image blocks, configure content fill modes, apply corner radius, and work with multiple images.
+
+## Initialize CE.SDK
+
+We start by initializing CE.SDK and creating a scene with a page to hold our images.
+
+```typescript highlight=highlight-setup
+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());
+
+await cesdk.actions.run('scene.create', {
+  page: { width: 800, height: 600, unit: 'Pixel' }
+});
+
+const engine = cesdk.engine;
+const page = engine.block.findByType('page')[0];
+```
+
+## Using the Convenience API
+
+The `addImage()` method provides a quick way to insert images. It automatically creates a graphic block with a rect shape and image fill. You can configure size, position, corner radius, and other properties through the options parameter.
+
+```typescript highlight=highlight-convenience-api
+// Add an image using the convenience API
+// This automatically creates a graphic block with rect shape and image fill
+const imageBlock = await engine.block.addImage(imageUrl, {
+  size: { width: 200, height: 150 },
+  x: 50,
+  y: 50
+});
+engine.block.appendChild(page, imageBlock);
+console.log('✓ Added image using convenience API');
+```
+
+## Manual Image Construction
+
+For control over individual components, we can manually construct a graphic block with a rect shape and image fill. This approach lets you configure each component separately.
+
+We create a graphic block with `create('graphic')`, attach a rectangular shape with `createShape('rect')`, and create an image fill with `createFill('image')`. The image source is set using `setString()` with the `fill/image/imageFileURI` property.
+
+```typescript highlight=highlight-manual-construction
+// Manually construct an image block for more control
+const manualBlock = engine.block.create('graphic');
+
+// Create and attach a rectangular shape
+const shape = engine.block.createShape('rect');
+engine.block.setShape(manualBlock, shape);
+
+// Create and configure the image fill
+const fill = engine.block.createFill('image');
+engine.block.setString(fill, 'fill/image/imageFileURI', imageUrl);
+engine.block.setFill(manualBlock, fill);
+
+// Set dimensions and position
+engine.block.setWidth(manualBlock, 200);
+engine.block.setHeight(manualBlock, 150);
+engine.block.setPositionX(manualBlock, 300);
+engine.block.setPositionY(manualBlock, 50);
+engine.block.appendChild(page, manualBlock);
+console.log('✓ Added image using manual construction');
+```
+
+## Set Content Fill Mode
+
+The content fill mode controls how images scale within their bounds. Use `setContentFillMode()` to choose between different scaling behaviors:
+
+- **Contain**: Preserves aspect ratio and fits the image within the bounds
+- **Cover**: Preserves aspect ratio and fills the bounds completely
+- **Crop**: Allows custom crop area
+
+Check `supportsContentFillMode()` before setting to ensure the block supports this feature.
+
+```typescript highlight=highlight-content-fill-mode
+// Set content fill mode to control how images scale within bounds
+// 'Contain' preserves aspect ratio and fits within bounds
+// 'Cover' preserves aspect ratio and fills bounds
+const containBlock = await engine.block.addImage(imageUrl, {
+  size: { width: 200, height: 150 },
+  x: 550,
+  y: 50
+});
+engine.block.appendChild(page, containBlock);
+
+if (engine.block.supportsContentFillMode(containBlock)) {
+  engine.block.setContentFillMode(containBlock, 'Contain');
+  console.log('✓ Applied Contain fill mode');
+}
+```
+
+## Apply Corner Radius
+
+Add rounded corners to image blocks using the `cornerRadius` option in the convenience API. This creates a visually softer appearance for your images.
+
+```typescript highlight=highlight-corner-radius
+// Apply corner radius to create rounded corners on an image
+const roundedBlock = await engine.block.addImage(imageUrl, {
+  size: { width: 200, height: 150 },
+  x: 50,
+  y: 250,
+  cornerRadius: 20
+});
+engine.block.appendChild(page, roundedBlock);
+console.log('✓ Added image with rounded corners');
+```
+
+## Working with Multiple Images
+
+Insert multiple images by iterating over an array of image URLs. Each image gets its own graphic block with calculated positioning to arrange them on the page.
+
+```typescript highlight=highlight-multiple-images
+// Insert multiple images with calculated positioning
+const imageUrls = [
+  'https://img.ly/static/ubq_samples/sample_1.jpg',
+  'https://img.ly/static/ubq_samples/sample_2.jpg',
+  'https://img.ly/static/ubq_samples/sample_3.jpg'
+];
+
+for (let i = 0; i < imageUrls.length; i++) {
+  const block = await engine.block.addImage(imageUrls[i], {
+    size: { width: 150, height: 100 },
+    x: 300 + i * 160,
+    y: 250
+  });
+  engine.block.appendChild(page, block);
+}
+console.log('✓ Added multiple images');
+```
+
+## Next Steps
+
+After inserting an image, you can:
+
+- [Edit and transform](./edit-image.md) the image
+- [Apply filters and effects](./filters-and-effects.md)
+- [Export your design](./export-save-publish/export.md)
+
+## API Reference
+
+| Method                                          | Description                                                   |
+| ----------------------------------------------- | ------------------------------------------------------------- |
+| `engine.block.addImage(url, options?)`          | Convenience API to create an image block with automatic setup |
+| `engine.block.create('graphic')`                | Create a graphic block container for images                   |
+| `engine.block.createShape('rect')`              | Create a rectangular shape for the image                      |
+| `engine.block.setShape(block, shape)`           | Attach shape to graphic block                                 |
+| `engine.block.createFill('image')`              | Create an image fill                                          |
+| `engine.block.setFill(block, fill)`             | Apply fill to block                                           |
+| `engine.block.setString(fill, property, value)` | Set image source URI via `fill/image/imageFileURI`            |
+| `engine.block.setWidth(block, width)`           | Set block width                                               |
+| `engine.block.setHeight(block, height)`         | Set block height                                              |
+| `engine.block.setPositionX(block, x)`           | Set horizontal position                                       |
+| `engine.block.setPositionY(block, y)`           | Set vertical position                                         |
+| `engine.block.supportsContentFillMode(block)`   | Check if block supports content fill mode                     |
+| `engine.block.setContentFillMode(block, mode)`  | Set content fill mode (`Contain`, `Cover`, `Crop`)            |
+| `engine.block.appendChild(parent, child)`       | Add block to parent                                           |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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