@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/starterkits/video-animations.md

@@ -1,853 +0,0 @@
-> 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:** [Starter Kits](./starterkits.md) > [Video Editing](./starterkits/video-editing.md) > [Video Animations](./starterkits/video-animations.md)
-
----
-
-Effortlessly add animations to any element in CE.SDK videos using our extensive preset library.
-
-![Video Animations starter kit showing a professional video editing interface](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
-> **Reading time:** 10 minutes
->
-> **Resources:**
->
-> - [Download examples](https://github.com/imgly/starterkit-video-animations-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/starterkit-video-animations-ts-web/tree/release-$UBQ_VERSION$)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-video-animations-ts-web/tree/release-$UBQ_VERSION$)
-> - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-video-animations/)
-
----
-
-## Pre-requisites
-
-This guide assumes basic familiarity with JavaScript or TypeScript.
-
-- **Node.js v20+** with npm – [Download](https://nodejs.org/)
-- **Supported browsers** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+<br />
-  See [Browser Support](./browser-support.md) for the full list
-
----
-
-<Tabs syncKey="project-type">
-  <TabItem label="New Project">
-    ## Get Started
-
-    Start fresh with a standalone Video Animations project. This creates a complete, ready-to-run application.
-
-    ## Step 1: Clone the Repository
-
-    <TerminalTabs>
-      <TerminalTab label="git">
-        {`git clone https://github.com/imgly/starterkit-video-animations-ts-web.git`}
-      </TerminalTab>
-
-      <TerminalTab label="degit">
-        {`npx degit imgly/starterkit-video-animations-ts-web starterkit-video-animations-ts-web`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    The `src/` folder contains the editor code:
-
-    ```
-    src/
-    ├── imgly/
-    │   ├── config/
-    │   │   ├── actions.ts                # Export/import actions
-    │   │   ├── features.ts               # Feature toggles
-    │   │   ├── i18n.ts                   # Translations
-    │   │   ├── plugin.ts                 # Main configuration plugin
-    │   │   ├── settings.ts               # Engine settings
-    │   │   └── ui/
-    │   │       ├── canvas.ts                 # Canvas configuration
-    │   │       ├── components.ts             # Custom component registration
-    │   │       ├── dock.ts                   # Dock layout configuration
-    │   │       ├── index.ts                  # Combines UI customization exports
-    │   │       ├── inspectorBar.ts           # Inspector bar layout
-    │   │       ├── navigationBar.ts          # Navigation bar layout
-    │   │       └── panel.ts                  # Panel configuration
-    │   ├── index.ts                  # Editor initialization function
-    │   └── resolveAssetPath.ts
-    └── index.ts
-    ```
-
-    ### What Makes This Starterkit Unique
-
-    This starterkit is pre-configured with:
-
-    - **Scene Templates** - Two production-ready video templates (Lunar Cosmetics landscape, Surf School portrait) loaded from CDN
-    - **Custom Audio Library** - Soundstripe music tracks with thumbnails and metadata
-    - **Animation Panel** - Auto-opens when the editor loads to highlight animation features
-    - **URL Persistence** - Template selection is saved to URL parameters for easy sharing
-    - **Custom Asset Loader** - Utility plugin that loads assets from JSON with base URL placeholder replacement
-
-    ## Step 2: Install Dependencies
-
-    Install the required packages:
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        {`cd starterkit-video-animations-ts-web
-          npm install`}
-      </TerminalTab>
-
-      <TerminalTab label="pnpm">
-        {`cd starterkit-video-animations-ts-web
-          pnpm install`}
-      </TerminalTab>
-
-      <TerminalTab label="yarn">
-        {`cd starterkit-video-animations-ts-web
-          yarn`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    ## Step 3: Download Assets
-
-    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
-
-    <TerminalTabs>
-      <TerminalTab label="Download">
-        {`curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/imgly-assets.zip
-          unzip imgly-assets.zip -d public/
-          rm imgly-assets.zip`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in `src/index.ts`.
-
-    ```typescript title="src/index.ts"
-    const config = {
-      // ...
-      baseURL: '/assets'
-      // ...
-    };
-    ```
-
-    ## Step 4: Run the Development Server
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        {`npm run dev`}
-      </TerminalTab>
-
-      <TerminalTab label="pnpm">
-        {`pnpm run dev`}
-      </TerminalTab>
-
-      <TerminalTab label="yarn">
-        {`yarn dev`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    Open `http://localhost:5173` in your browser.
-
-  </TabItem>
-
-  <TabItem label="Existing Project">
-    ## Get Started
-
-    Integrate the Video Animations into an existing web application. This adds the editor configuration to your current project structure.
-
-    ## Step 1: Clone
-
-    <TerminalTabs>
-      <TerminalTab label="Navigate">
-        {`cd your-project`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    Clone the starter kit and copy the editor configuration to your project:
-
-    <TerminalTabs>
-      <TerminalTab label="git">
-        {`git clone https://github.com/imgly/starterkit-video-animations-ts-web.git
-          cp -r starterkit-video-animations-ts-web/src/imgly ./src/imgly
-          rm -rf starterkit-video-animations-ts-web`}
-      </TerminalTab>
-
-      <TerminalTab label="degit">
-        {`npx degit imgly/starterkit-video-animations-ts-web/src/imgly ./src/imgly`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    > **Adjust Path:** The default destination is `./src/imgly`. Adjust the path to match your project structure.
-
-    The `imgly/` folder contains the editor configuration:
-
-    ```
-    imgly/
-    ├── config/
-    │   ├── actions.ts                # Export/import actions
-    │   ├── features.ts               # Feature toggles
-    │   ├── i18n.ts                   # Translations
-    │   ├── plugin.ts                 # Main configuration plugin
-    │   ├── settings.ts               # Engine settings
-    │   └── ui/
-    │       ├── canvas.ts                 # Canvas configuration
-    │       ├── components.ts             # Custom component registration
-    │       ├── dock.ts                   # Dock layout configuration
-    │       ├── index.ts                  # Combines UI customization exports
-    │       ├── inspectorBar.ts           # Inspector bar layout
-    │       ├── navigationBar.ts          # Navigation bar layout
-    │       └── panel.ts                  # Panel configuration
-    ├── index.ts                  # Editor initialization function
-    └── resolveAssetPath.ts
-    ```
-
-    ### What Makes This Starterkit Unique
-
-    This starterkit is pre-configured with:
-
-    - **Scene Templates** - Two production-ready video templates (Lunar Cosmetics landscape, Surf School portrait) loaded from CDN
-    - **Custom Audio Library** - Soundstripe music tracks with thumbnails and metadata
-    - **Animation Panel** - Auto-opens when the editor loads to highlight animation features
-    - **URL Persistence** - Template selection is saved to URL parameters for easy sharing
-    - **Custom Asset Loader** - Utility plugin that loads assets from JSON with base URL placeholder replacement
-
-    ## Step 2: Install Dependencies
-
-    Install the required packages for the editor:
-
-    ### Core Editor
-
-    Install the Creative Editor SDK:
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        {`npm install @cesdk/cesdk-js@$UBQ_VERSION$`}
-      </TerminalTab>
-
-      <TerminalTab label="pnpm">
-        {`pnpm add @cesdk/cesdk-js@$UBQ_VERSION$`}
-      </TerminalTab>
-
-      <TerminalTab label="yarn">
-        {`yarn add @cesdk/cesdk-js@$UBQ_VERSION$`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    ## Step 3: Download Assets
-
-    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
-
-    <TerminalTabs>
-      <TerminalTab label="Download">
-        {`curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/imgly-assets.zip
-          unzip imgly-assets.zip -d public/
-          rm imgly-assets.zip`}
-      </TerminalTab>
-    </TerminalTabs>
-
-    > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 5: Initialize the Editor.
-
-    ## Step 4: Add a Container Element
-
-    Add a container element to your HTML where the editor will be mounted:
-
-    ```html
-    <div id="cesdk_container" style="width: 100%; height: 100vh;"></div>
-    ```
-
-    ## Step 5: Initialize the Editor
-
-    Import and call the initialization function from your application's entry point:
-
-    ```typescript title="src/index.ts"
-    import CreativeEditorSDK from '@cesdk/cesdk-js';
-
-    import { initVideoAnimationsEditor } from './imgly';
-
-    const config = {
-      userId: 'your-user-id',
-      baseURL: '/assets'
-      // license: 'YOUR_LICENSE_KEY',
-    };
-
-    CreativeEditorSDK.create('#cesdk_container', config)
-      .then(async (cesdk) => {
-        await initVideoAnimationsEditor(cesdk);
-      })
-      .catch((error) => {
-        console.error('Failed to initialize CE.SDK:', error);
-      });
-    ```
-
-  </TabItem>
-</Tabs>
-
-## Set Up a Scene
-
-CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case:
-
-```typescript title="src/index.ts"
-// Load from a video URL - creates a new scene with the video
-await cesdk.createFromVideo('https://example.com/video.mp4');
-
-// Load from a template archive - restores a previously saved project
-await cesdk.loadFromArchiveURL('https://example.com/template.zip');
-
-// Create a blank video canvas - starts with an empty video scene
-await cesdk.actions.run('scene.create', { mode: 'Video' });
-
-// Load from a scene file - restores a scene from JSON
-await cesdk.loadFromURL('https://example.com/scene.json');
-```
-
-The `createFromVideo()` method is ideal for video editing workflows, as it automatically creates a scene with the video on a timeline.
-
-> **More Loading Options:** See [Open the Editor](./open-the-editor.md) for all available loading methods.
-
-## Scene Templates
-
-This starterkit includes two pre-built video templates that demonstrate different use cases:
-
-```typescript title="src/imgly/index.ts"
-const VIDEO_SCENES_ASSETS: ContentJSON = {
-  version: '1.0.0',
-  id: 'ly.img.video.scene',
-  assets: [
-    {
-      id: 'lunar-cosmetics',
-      label: { en: 'Lunar Cosmetics · Landscape Example' },
-      meta: {
-        uri: '{{base_url}}/lunar-cosmetics.scene',
-        thumbUri: '{{base_url}}/lunar-cosmetics.png',
-        blockType: '//ly.img.ubq/scene'
-      }
-    },
-    {
-      id: 'surf-school',
-      label: { en: 'Surf School · Portrait Example' },
-      meta: {
-        uri: '{{base_url}}/surf-school.scene',
-        thumbUri: '{{base_url}}/surf-school.png',
-        blockType: '//ly.img.ubq/scene'
-      }
-    }
-  ]
-};
-```
-
-**Key features:**
-
-- **Landscape and portrait formats** - Templates showcase both video orientations
-- **CDN-hosted** - Assets are served from `https://img.ly/showcases/cesdk/cases/animations/templates`
-- **Placeholder replacement** - The `{{base_url}}` placeholder is replaced at runtime with the CDN URL
-- **Custom dock entry** - Templates appear in a dedicated "Example Templates" section in the asset library
-
-The templates are registered as a custom asset source and appear in the dock as the first item, making them immediately visible to users.
-
-## Custom Audio Library
-
-The starterkit integrates Soundstripe music tracks as a custom audio asset source:
-
-```typescript title="src/imgly/index.ts"
-const AUDIO_ASSETS: ContentJSON = {
-  version: '1.0.0',
-  id: 'ly.img.audio',
-  assets: [
-    {
-      id: 'Cody_Martin_Lemon_Drop_instrumental_4_19',
-      label: { en: 'Cody Martin Lemon Drop Instrumental' },
-      meta: {
-        uri: '{{base_url}}/Cody_Martin_Lemon_Drop_instrumental_4_19.mp3',
-        thumbUri: '{{base_url}}/thumbnails/cody-martin.jpeg',
-        blockType: '//ly.img.ubq/audio',
-        mimeType: 'audio/mpeg',
-        duration: '259'
-      }
-    }
-    // ... more tracks
-  ]
-};
-```
-
-**Key features:**
-
-- **7 curated tracks** - Professional instrumental music from Soundstripe
-- **Thumbnail previews** - Each track has an associated artist thumbnail
-- **Duration metadata** - Track lengths are pre-defined for timeline placement
-- **Custom library name** - The audio library is labeled "Soundstripe" instead of the default name
-
-The audio assets are loaded from `/assets/audio/` and appear as a dedicated library in the dock.
-
-## Animation Panel Auto-Open
-
-The starterkit automatically opens the animation panel when the editor loads, drawing attention to the animation features:
-
-```typescript title="src/imgly/index.ts"
-async function openAnimationPanel(instance: CreativeEditorSDK) {
-  const engine = instance.engine;
-  for (const block of engine.block.findAll()) {
-    // Get background clips
-    if (engine.block.isAlwaysOnBottom(block)) {
-      for (const child of engine.block.getChildren(block)) {
-        // Select the first one that is visible
-        if (engine.block.isVisibleAtCurrentPlaybackTime(child)) {
-          engine.block.select(child);
-          await new Promise((resolve) => setTimeout(resolve, 100));
-          instance.ui.openPanel('//ly.img.panel/inspector/animation');
-          break;
-        }
-      }
-      break;
-    }
-  }
-}
-
-// Open animation panel on initialization
-openAnimationPanel(cesdk);
-
-// Open animation panel on scene change
-engine.scene.onActiveChanged(() => {
-  openAnimationPanel(cesdk);
-});
-```
-
-This automatically:
-
-1. Finds the first visible background clip
-2. Selects it
-3. Opens the animation inspector panel
-4. Re-opens the panel when switching between templates
-
-## URL State Persistence
-
-Template selection is persisted to the URL for easy sharing and bookmarking:
-
-```typescript title="src/imgly/index.ts"
-function persistSelectedTemplateToURL(templateName: string) {
-  const url = new URL(window.location.href);
-  url.searchParams.set('template', templateName);
-  window.history.pushState({}, '', url);
-}
-```
-
-When a user selects a template, the template ID is added to the URL as `?template=lunar-cosmetics` or `?template=surf-school`. This allows users to share direct links to specific templates.
-
-## Custom Asset Source Utility
-
-The starterkit includes a reusable utility for loading custom asset sources from JSON:
-
-```typescript title="src/imgly/plugins/load-asset-source-from-json.ts"
-export async function loadAssetSourceFromContentJSON(
-  engine: CreativeEngine,
-  content: ContentJSON,
-  baseURL = '',
-  applyAsset?: ((asset: AssetResult) => Promise<number | undefined>) | undefined
-) {
-  const { assets, id: sourceId } = content;
-
-  engine.asset.addLocalSource(sourceId, undefined, applyAsset);
-  assets.forEach((asset) => {
-    if (asset.meta) {
-      Object.entries(asset.meta).forEach(([key, value]: [string, unknown]) => {
-        const stringValue: string = String(value);
-        if (stringValue.includes('{{base_url}}')) {
-          const updated = stringValue.replace('{{base_url}}', baseURL);
-          if (asset.meta) {
-            (asset.meta as Record<string, unknown>)[key] = updated;
-          }
-        }
-      });
-    }
-
-    engine.asset.addAssetToSource(sourceId, asset);
-  });
-}
-```
-
-**Key features:**
-
-- **Placeholder replacement** - Replaces `{{base_url}}` in asset URIs and thumbnail URIs
-- **Optional apply callback** - Custom logic can be executed when assets are applied (used for template switching)
-- **Type-safe interface** - Defines `ContentJSON` interface for asset definitions
-
-This utility makes it easy to add custom asset libraries with dynamic base URLs, useful for:
-
-- CDN-hosted assets with environment-specific URLs
-- Testing with local vs production assets
-- Multi-tenant deployments with customer-specific asset sources
-
-## Customize Assets
-
-The Video Animations uses asset source plugins to provide built-in libraries for video clips, audio, effects, stickers, and fonts. The starter kit includes a curated selection—customize what's included based on your needs.
-
-Asset sources are added via plugins in `src/index.ts`. Enable or disable individual sources:
-
-```typescript title="src/index.ts"
-import {
-  FiltersAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  VectorShapeAssetSource,
-  EffectsAssetSource
-  // ...
-} from '@cesdk/cesdk-js/plugins';
-
-// Add only the sources you need
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(new StickerAssetSource());
-await cesdk.addPlugin(new TextAssetSource());
-await cesdk.addPlugin(new VectorShapeAssetSource());
-await cesdk.addPlugin(new EffectsAssetSource());
-// ...
-```
-
-> **Available Asset Sources:** See [Asset Source Plugins](./plugins/asset-sources.md) for the complete list of available sources.
-
-For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](./serve-assets.md) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times.
-
-## Configure Actions
-
-Actions are functions that handle user interactions like exporting videos, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.
-
-**Key built-in actions:**
-
-- `exportDesign` – Export the current video to MP4 format
-- `saveScene` – Save the scene as a JSON string for later editing
-- `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats)
-- `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets
-- `uploadFile` – Handle file uploads with progress tracking
-
-Use `cesdk.actions.run()` to execute any action:
-
-```typescript
-// Run a built-in action
-await cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' });
-```
-
-#### Import from File Picker
-
-```typescript title="src/imgly/config/actions.ts"
-// Let users open videos from their device
-cesdk.actions.register('importVideo', async () => {
-  const blobURL = await cesdk.utils.loadFile({
-    accept: 'video/*',
-    returnType: 'objectURL'
-  });
-  await cesdk.createFromVideo(blobURL);
-});
-```
-
-#### Export and Save
-
-```typescript title="src/imgly/config/actions.ts"
-// Register export action that downloads the edited video
-cesdk.actions.register('exportDesign', async (exportOptions) => {
-  const { blobs, options } = await cesdk.utils.export(exportOptions);
-  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
-});
-```
-
-#### Upload to Your Backend
-
-```typescript title="src/imgly/config/actions.ts"
-// Override the built-in exportDesign action to send to your server
-cesdk.actions.register('exportDesign', async (exportOptions) => {
-  const { blobs } = await cesdk.utils.export(exportOptions);
-
-  const formData = new FormData();
-  formData.append('video', blobs[0], 'edited-video.mp4');
-
-  const response = await fetch('/api/upload', {
-    method: 'POST',
-    body: formData
-  });
-
-  const { url } = await response.json();
-  console.log('Uploaded to:', url);
-});
-```
-
-> **Learn More:** See [Actions](./actions.md) for the full list of built-in actions, how to run them, and how to register custom actions.
-
----
-
-## Customize (Optional)
-
-### Theming
-
-CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:
-
-```typescript title="src/imgly/config/settings.ts"
-// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
-cesdk.ui.setTheme('dark');
-```
-
-See [Theming](./user-interface/appearance/theming.md) for custom color schemes, CSS variables, and advanced styling options.
-
-### Localization
-
-Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:
-
-```typescript title="src/imgly/config/i18n.ts"
-// Override specific labels
-cesdk.i18n.setTranslations({
-  en: {
-    'actions.export.video': 'Download Video',
-    'common.cancel': 'Cancel',
-    'common.apply': 'Apply'
-  }
-});
-
-// Add a new language
-cesdk.i18n.setTranslations({
-  de: {
-    'actions.export.video': 'Video herunterladen'
-  }
-});
-
-// Set the active locale
-cesdk.i18n.setLocale('de');
-```
-
-See [Localization](./user-interface/localization.md) for supported languages, translation key reference, and right-to-left language support.
-
-### UI Layout
-
-![CE.SDK Editor UI Areas](https://img.ly/docs/cesdk/../_shared/assets/CESDK-UI.png)
-
-Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.
-
-```typescript title="src/imgly/config/ui/navigationBar.ts"
-// Get current navigation bar components
-const navOrder = cesdk.ui.getNavigationBarOrder();
-
-// Add a custom button to the navigation bar
-cesdk.ui.insertNavigationBarOrderComponent(
-  'ly.img.spacer',
-  { id: 'my-custom-action' },
-  'after'
-);
-
-// Rearrange dock items
-cesdk.ui.setDockOrder([
-  'ly.img.assetLibrary.dock',
-  'ly.img.separator',
-  'my-custom-dock-item'
-]);
-
-// Customize the inspector bar
-cesdk.ui.setInspectorBarOrder([
-  'ly.img.fill.inspectorBar',
-  'ly.img.separator',
-  'ly.img.filter.inspectorBar'
-]);
-```
-
-The Order API methods follow a consistent pattern across all UI areas:
-
-- `get*Order()` – Retrieve the current component order
-- `set*Order()` – Replace the entire order
-- `insert*OrderComponent()` – Add components relative to existing ones
-
-See [Dock](./user-interface/customization/dock.md), [Inspector Bar](./user-interface/customization/inspector-bar.md), [Navigation Bar](./user-interface/customization/navigation-bar.md), [Canvas Menu](./user-interface/customization/canvas-menu.md), and [Canvas](./user-interface/customization/canvas.md) for detailed layout customization options.
-
-### Custom Components
-
-Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API.
-
-```typescript title="src/imgly/config/ui/components.ts"
-// Register a custom component
-cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => {
-  const selectedBlocks = engine.block.findAllSelected();
-
-  builder.Button('apply-effect', {
-    label: 'Apply Effect',
-    isDisabled: selectedBlocks.length === 0,
-    onClick: () => {
-      // Apply custom logic to selected blocks
-    }
-  });
-});
-
-// Add the component to the navigation bar
-cesdk.ui.insertNavigationBarOrderComponent(
-  'ly.img.spacer',
-  'my-custom-button',
-  'after'
-);
-```
-
-Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required.
-
-See [Register New Component](./user-interface/ui-extensions/register-new-component.md) for the complete builder API and component patterns.
-
-### Settings & Features
-
-Fine-tune editor behavior through settings and features.
-
-**Settings** configure core engine behavior—rendering, input handling, and history management:
-
-```typescript title="src/imgly/config/settings.ts"
-cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
-cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
-cesdk.engine.editor.setSettingBool('features/undoHistory', true);
-```
-
-**Features** toggle which editing tools and panels appear in the UI:
-
-```typescript title="src/imgly/config/features.ts"
-// Toggle editor features
-cesdk.feature.enable('ly.img.trim', true);
-cesdk.feature.enable('ly.img.filter', true);
-cesdk.feature.enable('ly.img.adjustment', true);
-```
-
-See [Settings](./settings.md) and [Features](./user-interface/customization/disable-or-enable.md) for the complete reference.
-
-### Explore Plugins
-
-CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior.
-
-#### AI Integration
-
-Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers.
-
-```typescript title="src/imgly/config/plugin.ts"
-import AIPlugin from '@imgly/plugin-ai-generation';
-
-// Configure AI generation
-await cesdk.addPlugin(
-  AIPlugin({
-    provider: 'your-ai-provider',
-    apiKey: 'your-api-key'
-  })
-);
-```
-
-See [AI Integration](./user-interface/ai-integration.md) for provider setup and supported AI features.
-
-#### Custom Asset Sources
-
-Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source.
-
-```typescript title="src/imgly/config/plugin.ts"
-import UnsplashAssetSource from '@imgly/plugin-unsplash';
-
-// Add Unsplash integration
-await cesdk.addPlugin(
-  UnsplashAssetSource({
-    accessKey: 'your-unsplash-access-key'
-  })
-);
-```
-
-See [Custom Asset Sources](./import-media/from-remote-source/unsplash.md) for integration patterns.
-
-#### Discover More Plugins
-
-Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include:
-
-- **Vectorizer** – Convert raster images to vectors
-- **Design Presets** – Pre-built design templates
-- **Social Media Templates** – Platform-specific sizing
-- **And more** – Check the repository for the latest additions
-
----
-
-## Key Capabilities
-
-The Video Animations includes everything needed for professional video editing.
-
-<CapabilityGrid
-features={[
-{
-title: 'Timeline Editing',
-description:
-'Multi-track timeline with drag-and-drop clips, transitions, and precise trimming controls.',
-imageId: 'transform',
-},
-{
-title: 'Visual Effects',
-description:
-'Apply filters, color grading, and visual effects to enhance your video content.',
-imageId: 'filters',
-},
-{
-title: 'Text & Graphics',
-description:
-'Add animated text, titles, and graphic overlays with comprehensive styling controls.',
-imageId: 'text-editing',
-},
-{
-title: 'Audio Management',
-description:
-'Add background music, voiceovers, and sound effects with volume and timing controls.',
-imageId: 'green-screen',
-},
-{
-title: 'Asset Libraries',
-description:
-'Access built-in collections of video clips, stickers, and graphics, plus import custom assets.',
-imageId: 'asset-libraries',
-},
-{
-title: 'Video Export',
-description:
-'Export to MP4 format with customizable resolution, quality, and encoding settings.',
-imageId: 'client-side',
-},
-]}
-/>
-
-<br />
-
-> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark.
-
----
-
-## Troubleshooting
-
-### Editor doesn't load
-
-- **Check the container element exists**: Ensure your container element is in the DOM before calling `create()`
-- **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location
-- **Check console errors**: Look for CORS or network errors in browser developer tools
-
-### Assets don't appear
-
-- **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly`
-- **Self-host assets for production**: See [Serve Assets](./serve-assets.md) to host assets on your infrastructure
-
-### Export fails or produces blank video
-
-- **Wait for content to load**: Ensure videos are fully loaded before exporting
-- **Check CORS on videos**: Remote videos must allow cross-origin access
-
-### Video export takes too long
-
-- **Reduce resolution**: Lower output resolution significantly improves encoding speed
-- **Shorten clip length**: Longer videos take proportionally longer to encode
-- **Check system resources**: Video encoding is CPU-intensive; close other applications
-
-### Audio doesn't play
-
-- **Check browser autoplay policies**: Browsers require user interaction before playing audio
-- **Verify audio format**: Ensure audio files are in a supported format (MP3, WAV, AAC)
-
-### Watermark appears in production
-
-- **Add your license key**: Set the `license` property in your configuration
-- **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial)
-
----
-
-## Next Steps
-
-- [Configuration](./configuration.md) – Complete list of initialization options
-- [Serve Assets](./serve-assets.md) – Self-host engine assets for production
-- [Actions](./actions.md) – Build custom export and save workflows
-- [Theming](./user-interface/appearance/theming.md) – Customize colors and appearance
-- [Localization](./user-interface/localization.md) – Add translations and language support
-
----
-
-## 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