@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/import-media/edit-or-remove-assets.md

@@ -0,0 +1,489 @@
+> 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) > [Import Media Assets](./import-media.md) > [Edit or Remove Assets](./import-media/edit-or-remove-assets.md)
+
+---
+
+Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources.
+
+![Edit or Remove Assets](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-import-media-edit-or-remove-assets-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-edit-or-remove-assets-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-edit-or-remove-assets-browser/)
+
+Assets in local sources can be modified or removed after they have been added. CE.SDK provides two levels of removal: individual assets within a source and entire asset sources. This guide covers how to query, update, and remove assets programmatically, as well as how to notify the UI when changes occur.
+
+```typescript file=@cesdk_web_examples/guides-import-media-edit-or-remove-assets-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';
+
+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: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.print.iso.a6.landscape'
+      }
+    });
+
+    const engine = cesdk.engine;
+
+    // ===== Section 1: Create a Local Asset Source =====
+    // Create a local asset source to manage images
+    engine.asset.addLocalSource('my-uploads');
+
+    // Add some sample assets to the source
+    engine.asset.addAssetToSource('my-uploads', {
+      id: 'image-1',
+      label: { en: 'Mountain Landscape' },
+      tags: { en: ['nature', 'mountain'] },
+      meta: {
+        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        blockType: '//ly.img.ubq/graphic'
+      }
+    });
+
+    engine.asset.addAssetToSource('my-uploads', {
+      id: 'image-2',
+      label: { en: 'Ocean Waves' },
+      tags: { en: ['nature', 'water'] },
+      meta: {
+        uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+        thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+        blockType: '//ly.img.ubq/graphic'
+      }
+    });
+
+    engine.asset.addAssetToSource('my-uploads', {
+      id: 'image-3',
+      label: { en: 'Forest Path' },
+      tags: { en: ['nature', 'forest'] },
+      meta: {
+        uri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+        thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+        blockType: '//ly.img.ubq/graphic'
+      }
+    });
+
+    // ===== Section 2: Find Assets in a Source =====
+    // Query assets from the source to find specific assets
+    const result = await engine.asset.findAssets('my-uploads', {
+      query: 'nature',
+      page: 0,
+      perPage: 100
+    });
+
+    console.log('Found assets:', result.assets.length);
+    const assetToModify = result.assets.find((a) => a.id === 'image-1');
+    console.log('Asset to modify:', assetToModify?.label);
+
+    // ===== Section 3: Update Asset Metadata =====
+    // To update an asset's metadata, remove it and add an updated version
+    // This pattern ensures the asset library reflects the latest data
+    engine.asset.removeAssetFromSource('my-uploads', 'image-1');
+
+    // Add the updated version with new metadata
+    engine.asset.addAssetToSource('my-uploads', {
+      id: 'image-1',
+      label: { en: 'Updated Mountain Photo' }, // New label
+      tags: { en: ['nature', 'mountain', 'updated'] }, // New tags
+      meta: {
+        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        blockType: '//ly.img.ubq/graphic'
+      }
+    });
+
+    // ===== Section 4: Remove an Asset from a Source =====
+    // Remove a single asset from the source
+    // Blocks already using this asset on the canvas remain unaffected
+    engine.asset.removeAssetFromSource('my-uploads', 'image-2');
+    console.log('Removed image-2 from my-uploads');
+
+    // ===== Section 5: Notify UI of Changes =====
+    // After modifying assets, notify the UI to refresh
+    // This triggers update events for components like the asset library panel
+    engine.asset.assetSourceContentsChanged('my-uploads');
+
+    // ===== Section 6: Create a Second Source for Removal Demo =====
+    // Create a temporary source to demonstrate source removal
+    engine.asset.addLocalSource('temporary-uploads');
+
+    engine.asset.addAssetToSource('temporary-uploads', {
+      id: 'temp-1',
+      label: { en: 'Temporary Image' },
+      meta: {
+        uri: 'https://img.ly/static/ubq_samples/sample_4.jpg',
+        thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg',
+        blockType: '//ly.img.ubq/graphic'
+      }
+    });
+
+    // ===== Section 7: Remove an Entire Asset Source =====
+    // Remove a complete asset source and all its assets
+    // Any UI panels displaying this source will stop showing content
+    engine.asset.removeSource('temporary-uploads');
+    console.log('Removed temporary-uploads source');
+
+    // ===== Section 8: Listen to Asset Source Events =====
+    // Subscribe to lifecycle events for asset sources
+    const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => {
+      console.log(`Source added: ${sourceId}`);
+    });
+
+    const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => {
+      console.log(`Source removed: ${sourceId}`);
+    });
+
+    const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => {
+      console.log(`Source updated: ${sourceId}`);
+    });
+
+    // Demonstrate events by creating and removing a source
+    engine.asset.addLocalSource('event-demo-source');
+    engine.asset.assetSourceContentsChanged('event-demo-source');
+    engine.asset.removeSource('event-demo-source');
+
+    // Clean up subscriptions when no longer needed
+    unsubscribeAdded();
+    unsubscribeRemoved();
+    unsubscribeUpdated();
+
+    // ===== Configure Asset Library Display =====
+    // Configure the asset library to show our custom source
+    cesdk.ui.updateAssetLibraryEntry('ly.img.image', {
+      sourceIds: ['my-uploads'],
+      gridBackgroundType: 'cover',
+      previewBackgroundType: 'contain'
+    });
+
+    // Open the asset library to show the custom uploads
+    cesdk.ui.openPanel('//ly.img.panel/assetLibrary', {
+      payload: {
+        entries: ['ly.img.image']
+      }
+    });
+  }
+}
+
+export default Example;
+```
+
+## Setup
+
+Initialize CE.SDK and create a local asset source with sample assets. The example creates a design scene and populates a local source with 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: {
+    sourceId: 'ly.img.page.presets',
+    assetId: 'ly.img.page.presets.print.iso.a6.landscape'
+  }
+});
+
+const engine = cesdk.engine;
+```
+
+## Creating a Local Asset Source
+
+Before editing or removing assets, you need a local source with assets. Use `engine.asset.addLocalSource()` to create a source, then `engine.asset.addAssetToSource()` to populate it.
+
+```typescript highlight=highlight-create-source
+// Create a local asset source to manage images
+engine.asset.addLocalSource('my-uploads');
+
+// Add some sample assets to the source
+engine.asset.addAssetToSource('my-uploads', {
+  id: 'image-1',
+  label: { en: 'Mountain Landscape' },
+  tags: { en: ['nature', 'mountain'] },
+  meta: {
+    uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+    thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+    blockType: '//ly.img.ubq/graphic'
+  }
+});
+
+engine.asset.addAssetToSource('my-uploads', {
+  id: 'image-2',
+  label: { en: 'Ocean Waves' },
+  tags: { en: ['nature', 'water'] },
+  meta: {
+    uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+    thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+    blockType: '//ly.img.ubq/graphic'
+  }
+});
+
+engine.asset.addAssetToSource('my-uploads', {
+  id: 'image-3',
+  label: { en: 'Forest Path' },
+  tags: { en: ['nature', 'forest'] },
+  meta: {
+    uri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+    thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+    blockType: '//ly.img.ubq/graphic'
+  }
+});
+```
+
+Each asset has a unique `id`, descriptive `label` and `tags` for searchability, and `meta` properties including the `uri` for the asset file.
+
+## Finding Assets in a Source
+
+Use `engine.asset.findAssets()` to query assets from a source. You can search by query string to match labels and tags, and paginate results for large sources.
+
+```typescript highlight=highlight-find-assets
+// Query assets from the source to find specific assets
+const result = await engine.asset.findAssets('my-uploads', {
+  query: 'nature',
+  page: 0,
+  perPage: 100
+});
+
+console.log('Found assets:', result.assets.length);
+const assetToModify = result.assets.find((a) => a.id === 'image-1');
+console.log('Asset to modify:', assetToModify?.label);
+```
+
+The `findAssets()` method returns an object containing the `assets` array, `total` count, `currentPage`, and optionally `nextPage` for pagination.
+
+## Updating Asset Metadata
+
+CE.SDK does not provide a direct update method for assets. To modify an asset's metadata (labels, tags, URIs), remove the existing asset and add an updated version with the same ID.
+
+```typescript highlight=highlight-update-metadata
+// To update an asset's metadata, remove it and add an updated version
+// This pattern ensures the asset library reflects the latest data
+engine.asset.removeAssetFromSource('my-uploads', 'image-1');
+
+// Add the updated version with new metadata
+engine.asset.addAssetToSource('my-uploads', {
+  id: 'image-1',
+  label: { en: 'Updated Mountain Photo' }, // New label
+  tags: { en: ['nature', 'mountain', 'updated'] }, // New tags
+  meta: {
+    uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+    thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+    blockType: '//ly.img.ubq/graphic'
+  }
+});
+```
+
+This pattern ensures the asset library reflects the latest metadata. The asset ID remains the same, so any references to the asset continue to work.
+
+## Removing an Asset from a Source
+
+Remove individual assets using `engine.asset.removeAssetFromSource()`. The asset is permanently deleted from the source, but blocks already using that asset on the canvas remain unaffected.
+
+```typescript highlight=highlight-remove-asset
+// Remove a single asset from the source
+// Blocks already using this asset on the canvas remain unaffected
+engine.asset.removeAssetFromSource('my-uploads', 'image-2');
+console.log('Removed image-2 from my-uploads');
+```
+
+Removing an asset only affects the asset library—it does not modify or delete any blocks that were created using that asset.
+
+## Notifying the UI of Changes
+
+After modifying assets in a source, call `engine.asset.assetSourceContentsChanged()` to notify UI components. This triggers update events for the asset library panel and any other components displaying the source.
+
+```typescript highlight=highlight-notify-ui
+// After modifying assets, notify the UI to refresh
+// This triggers update events for components like the asset library panel
+engine.asset.assetSourceContentsChanged('my-uploads');
+```
+
+Without this notification, UI components may show stale data until the user navigates away and returns.
+
+## Creating a Temporary Source
+
+You can create additional sources for temporary or session-specific assets. These sources can be removed entirely when no longer needed.
+
+```typescript highlight=highlight-create-temp-source
+// Create a temporary source to demonstrate source removal
+engine.asset.addLocalSource('temporary-uploads');
+
+engine.asset.addAssetToSource('temporary-uploads', {
+  id: 'temp-1',
+  label: { en: 'Temporary Image' },
+  meta: {
+    uri: 'https://img.ly/static/ubq_samples/sample_4.jpg',
+    thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg',
+    blockType: '//ly.img.ubq/graphic'
+  }
+});
+```
+
+## Removing an Entire Asset Source
+
+Remove a complete asset source and all its assets using `engine.asset.removeSource()`. Any UI panels displaying this source will stop showing content for that source.
+
+```typescript highlight=highlight-remove-source
+// Remove a complete asset source and all its assets
+// Any UI panels displaying this source will stop showing content
+engine.asset.removeSource('temporary-uploads');
+console.log('Removed temporary-uploads source');
+```
+
+Use this when cleaning up temporary sources or when a user explicitly deletes an entire category of assets.
+
+## Listening to Asset Source Events
+
+Subscribe to lifecycle events to react when sources are added, removed, or updated. These events are useful for analytics, cleanup tasks, or syncing with external systems.
+
+```typescript highlight=highlight-events
+// Subscribe to lifecycle events for asset sources
+const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => {
+  console.log(`Source added: ${sourceId}`);
+});
+
+const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => {
+  console.log(`Source removed: ${sourceId}`);
+});
+
+const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => {
+  console.log(`Source updated: ${sourceId}`);
+});
+
+// Demonstrate events by creating and removing a source
+engine.asset.addLocalSource('event-demo-source');
+engine.asset.assetSourceContentsChanged('event-demo-source');
+engine.asset.removeSource('event-demo-source');
+
+// Clean up subscriptions when no longer needed
+unsubscribeAdded();
+unsubscribeRemoved();
+unsubscribeUpdated();
+```
+
+Each subscription returns an unsubscribe function. Call it when you no longer need to receive events to prevent memory leaks.
+
+## Best Practices
+
+- **Query before modifying**: Use `findAssets()` to verify the asset exists before attempting removal
+- **Notify UI after changes**: Always call `assetSourceContentsChanged()` after modifying a source
+- **Clean up subscriptions**: Store unsubscribe functions and call them when the component unmounts or the source is removed
+- **Handle missing assets gracefully**: Check if `findAssets()` returns the expected asset before operating on it
+- **Use descriptive IDs**: Choose asset IDs that are unique and meaningful for easier debugging
+
+## Troubleshooting
+
+| Issue               | Cause                                | Solution                                                 |
+| ------------------- | ------------------------------------ | -------------------------------------------------------- |
+| Asset not found     | ID mismatch or asset already removed | Use `findAssets()` to list available assets              |
+| UI not updating     | Missing notification                 | Call `assetSourceContentsChanged()` after modifications  |
+| Cannot remove asset | Source is not a local source         | Only local sources support `removeAssetFromSource()`     |
+| Events not firing   | Subscription not active              | Verify the subscription was created before the operation |
+
+## API Reference
+
+| Method                                      | Category            | Purpose                                                  |
+| ------------------------------------------- | ------------------- | -------------------------------------------------------- |
+| `engine.asset.findAssets()`                 | Asset Discovery     | Query assets from a source with filtering and pagination |
+| `engine.asset.addAssetToSource()`           | Asset Lifecycle     | Add or update an asset in a local source                 |
+| `engine.asset.removeAssetFromSource()`      | Asset Lifecycle     | Remove a single asset from a local source                |
+| `engine.asset.removeSource()`               | Source Management   | Remove an entire asset source and all its assets         |
+| `engine.asset.assetSourceContentsChanged()` | UI Notification     | Notify UI that source contents changed                   |
+| `engine.asset.onAssetSourceAdded()`         | Event Subscriptions | Subscribe to source addition events                      |
+| `engine.asset.onAssetSourceRemoved()`       | Event Subscriptions | Subscribe to source removal events                       |
+| `engine.asset.onAssetSourceUpdated()`       | Event Subscriptions | Subscribe to source content change events                |
+
+---
+
+## 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/import-media/file-format-support.md

@@ -0,0 +1,178 @@
+> 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) > [Import Media Assets](./import-media.md) > [File Format Support](./import-media/file-format-support.md)
+
+---
+
+When building creative applications with CE.SDK, understanding which file formats your users can import is crucial for delivering a smooth editing experience. CE.SDK supports a comprehensive range of modern media formats.
+
+This guide provides a complete reference of supported file formats for importing media, templates, and fonts into CE.SDK on web platforms.
+
+## Supported Import Formats
+
+CE.SDK supports importing the following media types directly in the browser:
+
+| Category      | Supported Formats                                                                       |
+| ------------- | --------------------------------------------------------------------------------------- |
+| **Images**    | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp`                                |
+| **Video**     | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) |
+| **Audio**     | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3)                                |
+| **Animation** | `.json` (Lottie)                                                                        |
+| **Templates** | `.idml` (InDesign), `.psd` (Photoshop), `.scene` (CE.SDK Native)                        |
+
+> **Note:** Need to import a format not listed here? CE.SDK allows you to create custom
+> importers for any file type by using our Scene and Block APIs
+> programmatically. Contact our support team to learn more about implementing
+> custom importers.
+
+## Video and Audio Codecs
+
+While container formats (`.mp4`, `.mov`, `.webm`) define how media is packaged, codecs determine how the content is compressed. CE.SDK supports the following codecs for web playback and editing:
+
+### Video Codecs
+
+- **H.264 / AVC** (in `.mp4` or `.mov`) – Universally supported across all modern browsers
+- **H.265 / HEVC** (in `.mp4` or `.mov`) – Requires platform-specific support; availability varies by browser and operating system
+- **VP8, VP9, AV1** (in `.webm`) – Modern web-native codecs with broad browser support
+
+### Audio Codecs
+
+- **MP3** (in `.mp3` files or within `.mp4`/`.mov` containers)
+- **AAC** (in `.m4a`, `.mp4`, or `.mov` containers)
+
+> **Warning:** H.265/HEVC support varies by browser and requires hardware acceleration or
+> licensed software decoders. Always test video playback on your target browsers
+> before deploying H.265 content to end users.
+
+## Size Limits and Constraints
+
+CE.SDK processes all media client-side in the browser, which means performance is bounded by the user's hardware capabilities. Here are the practical limits to keep in mind:
+
+### Image Resolution Limits
+
+| Constraint            | Recommendation / Limit                                                                                                                                                                                                |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Input Resolution**  | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting.  |
+| **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device's GPU capabilities and available memory. |
+
+All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user's hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded.
+
+> **Note:** To ensure consistent results across devices, test higher output sizes on your
+> target hardware and set conservative defaults in production.
+
+### Video Resolution and Duration Limits
+
+| Constraint     | Recommendation / Limit                                                                                                                                                                                                                                                                                                         |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user's hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab's memory cap (~2 GB)**. |
+| **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration                                                                                                                                                                                                                           |
+| **Duration**   | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware.                                       |
+
+> **Note:** Performance scales with client hardware. For best results with high-resolution
+> or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are
+> recommended.
+
+## Format-Specific Considerations
+
+### SVG Limitations
+
+CE.SDK uses Skia for SVG parsing and rendering. While most SVG files render correctly, there are some important limitations to be aware of:
+
+#### Text Elements
+
+- SVG text elements are not supported – any text in SVG files will not be rendered.
+- Convert text to paths in your vector editor before exporting if text is needed.
+
+#### Styling Limitations
+
+- CSS styles included in SVGs are not supported – use presentation attributes instead.
+- RGBA color syntax is not supported – use `fill-opacity` and `stroke-opacity` attributes.
+- When exporting SVGs from design tools, choose the "presentation attributes" option.
+
+#### Unsupported SVG Elements
+
+The following SVG elements are not supported:
+
+- Animation elements (`<animate>`)
+- Foreign object (`<foreignObject>`)
+- Text-related elements (`<altGlyph>`, `<font>`, `<glyph>`)
+- Script elements (`<script>`)
+- Some filter elements (`<feComponentTransfer>`, `<feConvolveMatrix>`, `<feTile>`, `<feDropShadow>`)
+- Inlined SVGs via `<image>` or `<feImage>` elements
+
+> **Note:** When preparing SVG assets, always export with "presentation attributes" and
+> convert text to paths for maximum compatibility with CE.SDK.
+
+### WebP Support
+
+WebP images are fully supported for import. CE.SDK handles both lossy and lossless WebP formats, including images with transparency (alpha channel). WebP provides excellent compression with high quality, making it ideal for web-based creative applications.
+
+### Animated GIF Considerations
+
+While CE.SDK can import animated GIF files, they are rendered as static images showing only the first frame. For animated content, consider using:
+
+- **Lottie animations** (`.json`) for vector-based animations
+- **Video files** (`.mp4`, `.webm`) for complex animated content
+
+### Template Format Details
+
+CE.SDK supports importing templates from popular design applications:
+
+- **IDML** (InDesign Markup Language) – Import layouts and designs created in Adobe InDesign
+- **PSD** (Photoshop Document) – Import layered Photoshop files with preserved layer structure
+- **SCENE** – CE.SDK's native scene format, optimized for fast loading and editing
+
+When importing IDML or PSD files, CE.SDK preserves layer hierarchy, text formatting, and design structure where possible. Some advanced effects or features specific to the source application may require manual adjustment after import.
+
+## Font Format Support
+
+CE.SDK supports modern web font formats for typography:
+
+| Format   | Description                       |
+| -------- | --------------------------------- |
+| `.ttf`   | TrueType Font                     |
+| `.otf`   | OpenType Font                     |
+| `.woff`  | Web Open Font Format              |
+| `.woff2` | Compressed Web Open Font Format 2 |
+
+> **Warning:** Ensure fonts are appropriately licensed before embedding them in your
+> application. Many commercial fonts have specific licensing requirements for
+> web use and redistribution.
+
+## Best Practices
+
+### Format Selection
+
+When building your application, consider these format recommendations:
+
+- **Images**: Use `.webp` for the best compression-to-quality ratio on the web. Fall back to `.png` for transparency or `.jpeg` for photographs without transparency.
+- **Video**: Prefer `.mp4` with H.264 encoding for maximum browser compatibility. Use `.webm` for modern browsers when you need open-source codecs.
+- **Audio**: Use `.mp3` for universal compatibility or `.m4a` (AAC) for better quality at smaller file sizes.
+- **Templates**: Use `.scene` format for CE.SDK-to-CE.SDK workflows, or import from `.psd`/`.idml` when migrating content from design tools.
+
+### Validation and Error Handling
+
+Always validate file formats before attempting import:
+
+1. **Check MIME types** on file upload to quickly reject unsupported formats
+2. **Validate file extensions** as a first line of defense
+3. **Monitor file sizes** to prevent memory issues with extremely large files
+4. **Provide clear error messages** to users when imports fail, explaining which formats are supported
+
+### Memory Management
+
+For web applications, be mindful of browser memory constraints:
+
+- Large video files (>100 MB) may cause performance issues or browser tab crashes
+- Multiple high-resolution images loaded simultaneously can exhaust GPU memory
+- Consider implementing lazy loading for asset libraries with many files
+- Provide progress indicators for large file imports to improve user experience
+
+---
+
+## 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