@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-templates/lock.md

@@ -0,0 +1,325 @@
+> 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) > [Create and Use Templates](./create-templates.md) > [Lock the Template](./create-templates/lock.md)
+
+---
+
+Set up a two-surface integration where template creators have full editing access while template adopters can only modify designated areas.
+
+![Lock the Template](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-create-templates-lock-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-lock-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-lock-browser/)
+
+Many integrations need two different editing experiences: one for designers who build templates, and one for end users who customize them. The Creator and Adopter roles make this possible—same CE.SDK, different permissions based on who's using it. For detailed scope configuration patterns, see [Lock Content](./rules/lock-content.md).
+
+In the live example, the headline text is pre-selected and the Placeholder panel is open, showing the scope settings that control what Adopters can edit. Toggle the role to Adopter and try selecting the logo to see the restrictions in action.
+
+```typescript file=@cesdk_web_examples/guides-create-templates-lock-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: Lock the Template
+ *
+ * This example demonstrates the two-surface pattern for template workflows:
+ * - Creator role: Full editing access for designers building templates
+ * - Adopter role: Restricted access for users customizing templates
+ */
+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: 500, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+
+    // Get the page and set dimensions
+    const page = engine.block.findByType('page')[0];
+
+    // Create a brand template with a logo and headline
+    const logoBlock = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/imgly_logo.jpg',
+      { size: { width: 120, height: 30 } }
+    );
+    engine.block.appendChild(page, logoBlock);
+    engine.block.setPositionX(logoBlock, 40);
+    engine.block.setPositionY(logoBlock, 40);
+    engine.block.setName(logoBlock, 'Logo');
+
+    const headlineBlock = engine.block.create('text');
+    engine.block.replaceText(headlineBlock, 'Edit this headline');
+    engine.block.setWidth(headlineBlock, 720);
+    engine.block.setHeightMode(headlineBlock, 'Auto');
+    engine.block.setFloat(headlineBlock, 'text/fontSize', 48);
+    engine.block.setEnum(headlineBlock, 'text/horizontalAlignment', 'Center');
+    engine.block.appendChild(page, headlineBlock);
+    engine.block.setPositionX(headlineBlock, 40);
+    engine.block.setPositionY(headlineBlock, 200);
+    engine.block.setName(headlineBlock, 'Headline');
+
+    // Configure which elements Adopters can edit
+    // Enable selection and text editing on the headline
+    engine.block.setScopeEnabled(headlineBlock, 'editor/select', true);
+    engine.block.setScopeEnabled(headlineBlock, 'text/edit', true);
+
+    // Leave all scopes disabled on the logo (default state)
+    // This prevents Adopters from selecting or modifying the logo
+
+    // The Creator role ignores all scope restrictions
+    engine.editor.setRole('Creator');
+
+    // Add a role toggle to the navigation bar (engine calls are reactive)
+    cesdk.ui.registerComponent(
+      'ly.img.roleToggle.navigationBar',
+      ({ builder }) => {
+        const role = engine.editor.getRole();
+        builder.ButtonGroup('role-toggle', {
+          children: () => {
+            builder.Button('creator', {
+              label: 'Creator',
+              isActive: role === 'Creator',
+              onClick: () => engine.editor.setRole('Creator')
+            });
+            builder.Button('adopter', {
+              label: 'Adopter',
+              isActive: role === 'Adopter',
+              onClick: () => {
+                // Close the placeholder panel since Adopters can't configure scopes
+                cesdk.ui.closePanel(
+                  '//ly.img.panel/inspector/placeholderSettings'
+                );
+                engine.editor.setRole('Adopter');
+              }
+            });
+          }
+        });
+      }
+    );
+
+    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
+      'ly.img.undoRedo.navigationBar',
+      'ly.img.spacer',
+      'ly.img.roleToggle.navigationBar',
+      'ly.img.spacer'
+    ]);
+
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+
+    // Select the headline and open the placeholder panel so users see the scope settings
+    engine.block.select(headlineBlock);
+    setTimeout(() => {
+      cesdk.ui.openPanel('//ly.img.panel/inspector/placeholderSettings');
+    }, 300);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to understand the two-surface pattern, configure roles for different user groups, and set up scope restrictions that control what Adopters can edit.
+
+## Understanding the Two-Surface Pattern
+
+Template-based workflows typically involve two distinct user groups with different needs:
+
+| Surface         | Users                | Role      | What they can do                              |
+| --------------- | -------------------- | --------- | --------------------------------------------- |
+| Creator Surface | Designers, admins    | `Creator` | Full editing—build templates, set locks       |
+| Adopter Surface | End users, marketers | `Adopter` | Restricted editing—only modify unlocked areas |
+
+This separation protects design intent while enabling customization. The Creator role ignores all locks, giving full access. The Adopter role respects locks, restricting users to what's explicitly allowed.
+
+## Setting Up the Creator Surface
+
+The Creator surface is where templates are built. We use `engine.editor.setRole('Creator')` to give designers unrestricted access.
+
+```typescript highlight=highlight-creator-surface
+// The Creator role ignores all scope restrictions
+engine.editor.setRole('Creator');
+```
+
+In Creator mode, all operations are permitted regardless of scope settings. This is where designers build the template layout, configure which elements should be editable, set scope restrictions using `engine.block.setScopeEnabled()`, and save the template for distribution.
+
+## Setting Up the Adopter Surface
+
+The Adopter surface is where templates are used. Call `engine.editor.setRole('Adopter')` to enforce the restrictions configured by creators. In Adopter mode, users can only interact with blocks that have the appropriate scopes enabled. The Adopter role respects all lock configurations, ensuring brand consistency and design intent are maintained.
+
+## When to Use This Pattern
+
+This two-surface approach works well for:
+
+- **Brand template systems**: Marketing teams customize approved templates
+- **Design approval workflows**: Creators build, reviewers can't accidentally modify
+- **Self-service customization**: End users personalize within guardrails
+- **White-label products**: Customers can only edit designated areas
+
+For simpler use cases where all users have the same permissions, you may not need separate surfaces.
+
+## Configuring What Users Can Edit
+
+The scope system controls what Adopters can modify. In Creator mode, we enable specific scopes on blocks that should be editable.
+
+```typescript highlight=highlight-configure-scopes
+// Configure which elements Adopters can edit
+// Enable selection and text editing on the headline
+engine.block.setScopeEnabled(headlineBlock, 'editor/select', true);
+engine.block.setScopeEnabled(headlineBlock, 'text/edit', true);
+
+// Leave all scopes disabled on the logo (default state)
+// This prevents Adopters from selecting or modifying the logo
+```
+
+When Adopters load this template, they can edit the headline text but nothing else. The `editor/select` scope must be enabled for users to interact with a block at all. For comprehensive scope configuration patterns, see [Lock Content](./rules/lock-content.md).
+
+## Configuring Scopes in the Editor UI
+
+Designers can also configure scopes visually without writing code. In Creator mode, select any block and open the Placeholder panel in the inspector. This panel provides toggles for each scope:
+
+- **Allow selecting** (`editor/select`): Users can click to select the block
+- **Allow editing text** (`text/edit`): Users can modify text content
+- **Allow changing fill** (`fill/change`): Users can swap images or change colors
+- **Allow moving** (`layer/move`): Users can reposition the block
+- **Allow deleting** (`lifecycle/destroy`): Users can remove the block
+
+Changes made in the Placeholder panel are equivalent to calling `engine.block.setScopeEnabled()` programmatically. When the template is saved, these settings persist and apply when Adopters load the template.
+
+## Adding a Role Toggle
+
+Add a segmented control to the navigation bar that switches between Creator and Adopter modes. Engine calls inside the builder are automatically reactive—the component re-renders when the role changes.
+
+```typescript highlight=highlight-toggle-role
+// Add a role toggle to the navigation bar (engine calls are reactive)
+cesdk.ui.registerComponent('ly.img.roleToggle.navigationBar', ({ builder }) => {
+  const role = engine.editor.getRole();
+  builder.ButtonGroup('role-toggle', {
+    children: () => {
+      builder.Button('creator', {
+        label: 'Creator',
+        isActive: role === 'Creator',
+        onClick: () => engine.editor.setRole('Creator')
+      });
+      builder.Button('adopter', {
+        label: 'Adopter',
+        isActive: role === 'Adopter',
+        onClick: () => {
+          // Close the placeholder panel since Adopters can't configure scopes
+          cesdk.ui.closePanel('//ly.img.panel/inspector/placeholderSettings');
+          engine.editor.setRole('Adopter');
+        }
+      });
+    }
+  });
+});
+
+cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
+  'ly.img.undoRedo.navigationBar',
+  'ly.img.spacer',
+  'ly.img.roleToggle.navigationBar',
+  'ly.img.spacer'
+]);
+```
+
+## Troubleshooting
+
+| Issue                       | Cause                                  | Solution                                                    |
+| --------------------------- | -------------------------------------- | ----------------------------------------------------------- |
+| Adopter can edit everything | Wrong role or scopes not configured    | Verify role is `Adopter` and scopes are set in Creator mode |
+| Adopter can't edit anything | `editor/select` scope not enabled      | Enable `editor/select` on blocks users should interact with |
+| Creator can't set locks     | Wrong role                             | Switch to Creator role before configuring scopes            |
+| Changes not persisting      | Template not saved after scope changes | Save template after configuring scopes in Creator mode      |
+
+## API Reference
+
+| Method                                                | Description                                                    |
+| ----------------------------------------------------- | -------------------------------------------------------------- |
+| `engine.editor.setRole(role)`                         | Set the editing role (`'Creator'`, `'Adopter'`, or `'Viewer'`) |
+| `engine.editor.getRole()`                             | Get the current editing role                                   |
+| `engine.block.setScopeEnabled(block, scope, enabled)` | Enable or disable a scope on a block                           |
+| `engine.block.isScopeEnabled(block, scope)`           | Check if a scope is enabled on a block                         |
+| `cesdk.ui.registerComponent(id, renderFn)`            | Register a custom UI component                                 |
+| `builder.ButtonGroup(id, { children })`               | Create a segmented control                                     |
+| `builder.Button(id, { label, isActive, onClick })`    | Create a button                                                |
+
+### Common Scopes
+
+| Scope                 | Description                                              |
+| --------------------- | -------------------------------------------------------- |
+| `'editor/select'`     | Allow selecting the block (required for any interaction) |
+| `'fill/change'`       | Allow changing the block's fill (images, colors)         |
+| `'text/edit'`         | Allow editing text content                               |
+| `'text/character'`    | Allow changing text formatting (font, size, color)       |
+| `'layer/move'`        | Allow moving the block                                   |
+| `'layer/resize'`      | Allow resizing the block                                 |
+| `'layer/rotate'`      | Allow rotating the block                                 |
+| `'layer/crop'`        | Allow cropping the block                                 |
+| `'lifecycle/destroy'` | Allow deleting the block                                 |
+
+---
+
+## 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/create-templates/overview.md

@@ -0,0 +1,16 @@
+> 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) > [Create and Use Templates](./create-templates.md) > [Overview](./create-templates/overview.md)
+
+---
+
+These imported designs can then be adapted into editable, structured templates inside CE.SDK.
+
+---
+
+## 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/create-templates.md

@@ -0,0 +1,32 @@
+> 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) > [Create and Use Templates](./create-templates.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Overview](./create-templates/overview.md) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK.
+- [Create From Scratch](./create-templates/from-scratch.md) - Build reusable design templates programmatically using CE.SDK's APIs. Create scenes, add text and graphic blocks, configure placeholders and variables, apply editing constraints, and save templates for reuse.
+- [Import Templates](./create-templates/import.md) - Load and import design templates into CE.SDK from URLs, archives, and serialized strings.
+- [Dynamic Content](./create-templates/add-dynamic-content.md) - Use variables and placeholders to inject dynamic data into templates at design or runtime.
+- [Lock the Template](./create-templates/lock.md) - Restrict editing access to specific elements or properties in a template to enforce design rules.
+- [Edit or Remove Templates](./create-templates/edit-or-remove.md) - Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources.
+- [Add to Template Library](./create-templates/add-to-template-library.md) - Save and organize templates in an asset source for users to browse and apply from the template library.
+- [Overview](./use-templates/overview.md) - Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows.
+- [Template Library](./use-templates/library.md) - Learn how to provide a set of predefined templates in the CreativeEditor SDK.
+- [Apply a Template](./use-templates/apply-template.md) - Learn how to apply template scenes via API in the CreativeEditor SDK.
+- [Generate From Template](./use-templates/generate.md) - Learn how to generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos.
+- [Replace Content](./use-templates/replace-content.md) - Learn how to dynamically replace content within templates using CE.SDK's placeholder and variable systems.
+- [Use Templates Programmatically](./use-templates/programmatic.md) - Work with templates programmatically through CE.SDK's engine APIs to load existing templates, build new templates from scratch, modify template structures, and populate templates with dynamic data for batch processing and automation.
+
+---
+
+## 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/create-video/audio/adjust-speed.md

@@ -0,0 +1,302 @@
+> 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) > [Create and Edit Audio](./create-audio/audio.md) > [Adjust Speed](./create-video/audio/adjust-speed.md)
+
+---
+
+Control audio playback speed by adjusting the speed multiplier using CE.SDK's
+timeline UI and programmatic speed adjustment API.
+
+![Audio Speed Adjustment example showing timeline with audio blocks at different speeds](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-create-audio-audio-adjust-speed-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-audio-adjust-speed-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-speed-browser/)
+
+Playback speed adjustment changes how fast or slow audio plays without changing its pitch (though pitch shifting may occur depending on the audio processing implementation). A speed multiplier of 1.0 represents normal speed, values below 1.0 slow down playback, and values above 1.0 speed it up. This technique is commonly used for podcast speed controls, time-compressed narration, slow-motion audio effects, and accessibility features.
+
+```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-speed-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: Adjust Audio Speed Guide
+ *
+ * Demonstrates audio playback speed adjustment in CE.SDK:
+ * - Loading audio files
+ * - Adjusting playback speed with setPlaybackSpeed
+ * - Three speed presets: slow-motion (0.5x), normal (1.0x), and maximum (3.0x)
+ */
+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: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.instagram.story',
+        color: { r: 0, g: 0, b: 0, a: 1 }
+      }
+    });
+
+    const engine = cesdk.engine;
+    const scene = engine.scene.get();
+    const pages = engine.block.findByType('page');
+    const page = pages.length > 0 ? pages[0] : scene;
+
+    // Use a sample audio file
+    const audioUri =
+      'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a';
+
+    // Create an audio block and load the audio file
+    const audioBlock = engine.block.create('audio');
+    engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+
+    // Wait for audio resource to load
+    await engine.block.forceLoadAVResource(audioBlock);
+
+    // Slow Motion Audio (0.5x - half speed)
+    const slowAudioBlock = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, slowAudioBlock);
+    engine.block.setPositionX(slowAudioBlock, 100);
+    engine.block.setPositionY(slowAudioBlock, 200);
+    engine.block.setPlaybackSpeed(slowAudioBlock, 0.5);
+
+    // Normal Speed Audio (1.0x)
+    const normalAudioBlock = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, normalAudioBlock);
+    engine.block.setPositionX(normalAudioBlock, 100);
+    engine.block.setPositionY(normalAudioBlock, 400);
+    engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);
+
+    // Maximum Speed Audio (3.0x - triple speed)
+    const maxSpeedAudioBlock = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, maxSpeedAudioBlock);
+    engine.block.setPositionX(maxSpeedAudioBlock, 100);
+    engine.block.setPositionY(maxSpeedAudioBlock, 600);
+    engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0);
+
+    // Log duration changes for demonstration
+    const slowDuration = engine.block.getDuration(slowAudioBlock);
+    const normalDuration = engine.block.getDuration(normalAudioBlock);
+    const maxDuration = engine.block.getDuration(maxSpeedAudioBlock);
+
+    // eslint-disable-next-line no-console
+    console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`);
+    // eslint-disable-next-line no-console
+    console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`);
+    // eslint-disable-next-line no-console
+    console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`);
+
+    // Remove the original audio block (we only need the duplicates)
+    engine.block.destroy(audioBlock);
+
+    // Zoom to fit all audio blocks and labels
+    engine.scene.zoomToBlock(page, 40, 40, 40, 40);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to adjust audio playback speed programmatically using the Engine API, understand speed constraints, and manage how speed changes affect block duration.
+
+## Understanding Speed Concepts
+
+CE.SDK supports playback speeds from **0.25x** (quarter speed) to **3.0x** (triple speed), with **1.0x** as the default normal speed. Values below 1.0 slow down playback, values above 1.0 speed it up.
+
+**Speed and Duration**: Adjusting speed automatically changes the block's duration following an inverse relationship: `perceived_duration = original_duration / speed_multiplier`. A 10-second clip at 2.0x speed plays in 5 seconds; at 0.5x speed it takes 20 seconds. This automatic adjustment maintains synchronization when coordinating audio with other elements.
+
+**Common use cases**: Podcast playback controls (1.5x-2.0x), accessibility features (0.75x for easier comprehension), time-compressed narration, dramatic slow-motion effects (0.25x-0.5x), transcription work, and music tempo adjustments.
+
+## Setting Up Audio for Speed Adjustment
+
+### Loading Audio Files
+
+We create an audio block and load an audio file by setting its `fileURI` property.
+
+```typescript highlight-create-audio
+// Create an audio block and load the audio file
+const audioBlock = engine.block.create('audio');
+engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+
+// Wait for audio resource to load
+await engine.block.forceLoadAVResource(audioBlock);
+```
+
+Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata, which is essential for accurate duration information and playback speed control.
+
+## Adjusting Playback Speed
+
+### Setting Normal Speed
+
+By default, audio plays at normal speed (1.0x). We can explicitly set this to ensure consistent baseline behavior.
+
+```typescript highlight-set-normal-speed
+// Normal Speed Audio (1.0x)
+const normalAudioBlock = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, normalAudioBlock);
+engine.block.setPositionX(normalAudioBlock, 100);
+engine.block.setPositionY(normalAudioBlock, 400);
+engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);
+```
+
+Setting speed to 1.0 ensures the audio plays at its original recorded rate. This is useful after experimenting with different speeds and wanting to return to normal, or when initializing audio blocks programmatically to ensure consistent starting states.
+
+### Querying Current Speed
+
+We can check the current playback speed at any time using `getPlaybackSpeed`.
+
+```typescript highlight-set-normal-speed
+// Normal Speed Audio (1.0x)
+const normalAudioBlock = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, normalAudioBlock);
+engine.block.setPositionX(normalAudioBlock, 100);
+engine.block.setPositionY(normalAudioBlock, 400);
+engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);
+```
+
+This returns the current speed multiplier as a number. Use this to populate UI controls, validate that speed changes were applied, or make relative adjustments based on existing speeds.
+
+## Common Speed Presets
+
+### Slow Motion Audio (0.5x)
+
+Slowing audio to half speed creates a slow-motion effect that's useful for careful listening or transcription.
+
+```typescript highlight-set-slow-motion
+// Slow Motion Audio (0.5x - half speed)
+const slowAudioBlock = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, slowAudioBlock);
+engine.block.setPositionX(slowAudioBlock, 100);
+engine.block.setPositionY(slowAudioBlock, 200);
+engine.block.setPlaybackSpeed(slowAudioBlock, 0.5);
+```
+
+At 0.5x speed, a 10-second audio clip will take 20 seconds to play. This slower pace makes it easier to catch details, transcribe speech accurately, or create dramatic slow-motion audio effects in creative projects.
+
+### Maximum Speed (3.0x)
+
+The maximum supported speed is 3.0x, three times normal playback rate.
+
+```typescript highlight-set-maximum-speed
+// Maximum Speed Audio (3.0x - triple speed)
+const maxSpeedAudioBlock = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, maxSpeedAudioBlock);
+engine.block.setPositionX(maxSpeedAudioBlock, 100);
+engine.block.setPositionY(maxSpeedAudioBlock, 600);
+engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0);
+```
+
+At maximum speed, audio plays very quickly—a 10-second clip finishes in just 3.33 seconds. This extreme speed is useful for rapidly skimming through content to find specific moments, though comprehension becomes challenging at this rate.
+
+## Speed and Block Duration
+
+### Understanding Duration Changes
+
+When we change playback speed, CE.SDK automatically adjusts the block's duration to reflect the new playback time.
+
+```typescript highlight-speed-and-duration
+// Log duration changes for demonstration
+const slowDuration = engine.block.getDuration(slowAudioBlock);
+const normalDuration = engine.block.getDuration(normalAudioBlock);
+const maxDuration = engine.block.getDuration(maxSpeedAudioBlock);
+
+// eslint-disable-next-line no-console
+console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`);
+// eslint-disable-next-line no-console
+console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`);
+// eslint-disable-next-line no-console
+console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`);
+```
+
+The original duration represents how long the audio takes to play at normal speed. When we double the speed to 2.0x, the duration is automatically halved. The audio content is the same, but it plays through in half the time, so the block duration shrinks accordingly.
+
+This automatic adjustment keeps your composition synchronized. If you have multiple audio tracks or need to coordinate audio with video, the block durations will accurately reflect the new playback duration after speed changes.
+
+---
+
+## 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