@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/automation/data-merge.md

@@ -0,0 +1,406 @@
+> 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) > [Automate Workflows](./automation.md) > [Data Merge](./automation/data-merge.md)
+
+---
+
+Generate personalized designs from a single template by merging external data into CE.SDK templates using text variables and placeholder blocks.
+
+![Data Merge example showing personalized business card design](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-automation-data-merge-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-data-merge-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-data-merge-browser/)
+
+Data merge generates multiple personalized designs from a single template by replacing variable content with external data. Use it for certificates, badges, team cards, or any design requiring consistent layout with varying content.
+
+```typescript file=@cesdk_web_examples/guides-automation-data-merge-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: Data Merge Guide
+ *
+ * Demonstrates merging external data into templates:
+ * - Setting text variables with engine.variable.setString()
+ * - Finding variables with engine.variable.findAll()
+ * - Finding blocks by name with engine.block.findByName()
+ * - Updating image content in placeholder blocks
+ * - Exporting personalized designs
+ */
+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: 400, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Sample data to merge into the template
+    const sampleData = {
+      name: 'Alex Smith',
+      title: 'Creative Developer',
+      email: 'alex.smith@example.com',
+      photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg'
+    };
+
+    // Create a profile photo block with a semantic name
+    const photoBlock = engine.block.create('graphic');
+    engine.block.setShape(photoBlock, engine.block.createShape('rect'));
+    const photoFill = engine.block.createFill('image');
+    engine.block.setString(
+      photoFill,
+      'fill/image/imageFileURI',
+      sampleData.photoUrl
+    );
+    engine.block.setFill(photoBlock, photoFill);
+    engine.block.setWidth(photoBlock, 150);
+    engine.block.setHeight(photoBlock, 150);
+    engine.block.setPositionX(photoBlock, 50);
+    engine.block.setPositionY(photoBlock, 125);
+    engine.block.setName(photoBlock, 'profile-photo');
+    engine.block.appendChild(page, photoBlock);
+
+    // Create a text block with variable placeholders
+    const textBlock = engine.block.create('text');
+    const textContent = `{{name}}
+{{title}}
+{{email}}`;
+    engine.block.replaceText(textBlock, textContent);
+    engine.block.setWidthMode(textBlock, 'Auto');
+    engine.block.setHeightMode(textBlock, 'Auto');
+    engine.block.setFloat(textBlock, 'text/fontSize', 32);
+    engine.block.setPositionX(textBlock, 230);
+    engine.block.setPositionY(textBlock, 140);
+    engine.block.appendChild(page, textBlock);
+
+    // Set the variable values from data
+    engine.variable.setString('name', sampleData.name);
+    engine.variable.setString('title', sampleData.title);
+    engine.variable.setString('email', sampleData.email);
+
+    // Discover all variables in the scene
+    const variables = engine.variable.findAll();
+    console.log('Variables in scene:', variables);
+
+    // Check if the text block references any variables
+    const hasVariables = engine.block.referencesAnyVariables(textBlock);
+    console.log('Text block has variables:', hasVariables);
+
+    // Find blocks by their semantic name
+    const [foundPhotoBlock] = engine.block.findByName('profile-photo');
+    if (foundPhotoBlock) {
+      console.log('Found profile-photo block:', foundPhotoBlock);
+
+      // Update the image content
+      const fill = engine.block.getFill(foundPhotoBlock);
+      engine.block.setString(
+        fill,
+        'fill/image/imageFileURI',
+        'https://img.ly/static/ubq_samples/sample_2.jpg'
+      );
+    }
+
+    // Export the personalized design
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    console.log('Exported PNG blob:', blob.size, 'bytes');
+
+    // Create a download link for the exported image
+    const url = URL.createObjectURL(blob);
+    console.log('Download URL created:', url);
+
+    // Select the text block to show the variable values
+    engine.block.select(textBlock);
+
+    console.log(
+      'Data merge guide initialized. Try changing variable values in the console.'
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to prepare templates with variables, set values from data, and export personalized designs.
+
+## Initialize the Editor
+
+We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our template.
+
+```typescript highlight=highlight-setup
+await cesdk.addPlugin(new DesignEditorConfig());
+
+// Add asset source plugins
+await cesdk.addPlugin(new BlurAssetSource());
+await cesdk.addPlugin(new ColorPaletteAssetSource());
+await cesdk.addPlugin(new CropPresetsAssetSource());
+await cesdk.addPlugin(
+  new UploadAssetSources({ include: ['ly.img.image.upload'] })
+);
+await cesdk.addPlugin(
+  new DemoAssetSources({
+    include: [
+      'ly.img.templates.blank.*',
+      'ly.img.templates.presentation.*',
+      'ly.img.templates.print.*',
+      'ly.img.templates.social.*',
+      'ly.img.image.*'
+    ]
+  })
+);
+await cesdk.addPlugin(new EffectsAssetSource());
+await cesdk.addPlugin(new FiltersAssetSource());
+await cesdk.addPlugin(new PagePresetsAssetSource());
+await cesdk.addPlugin(new StickerAssetSource());
+await cesdk.addPlugin(new TextAssetSource());
+await cesdk.addPlugin(new TextComponentAssetSource());
+await cesdk.addPlugin(new TypefaceAssetSource());
+await cesdk.addPlugin(new VectorShapeAssetSource());
+
+await cesdk.actions.run('scene.create', {
+  page: { width: 800, height: 400, unit: 'Pixel' }
+});
+
+const engine = cesdk.engine;
+const page = engine.block.findByType('page')[0];
+```
+
+## Prepare Sample Data
+
+In a real application, data comes from a CSV file, database, or API. Here we define a sample record with the fields we want to merge into the template.
+
+```typescript highlight=highlight-sample-data
+// Sample data to merge into the template
+const sampleData = {
+  name: 'Alex Smith',
+  title: 'Creative Developer',
+  email: 'alex.smith@example.com',
+  photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg'
+};
+```
+
+Each data record contains field names that map to template variables and placeholder blocks.
+
+## Create Template Layout
+
+We build the template by creating blocks and assigning semantic names. The profile photo block uses `setName()` so we can find and update it later.
+
+```typescript highlight=highlight-create-template
+// Create a profile photo block with a semantic name
+const photoBlock = engine.block.create('graphic');
+engine.block.setShape(photoBlock, engine.block.createShape('rect'));
+const photoFill = engine.block.createFill('image');
+engine.block.setString(
+  photoFill,
+  'fill/image/imageFileURI',
+  sampleData.photoUrl
+);
+engine.block.setFill(photoBlock, photoFill);
+engine.block.setWidth(photoBlock, 150);
+engine.block.setHeight(photoBlock, 150);
+engine.block.setPositionX(photoBlock, 50);
+engine.block.setPositionY(photoBlock, 125);
+engine.block.setName(photoBlock, 'profile-photo');
+engine.block.appendChild(page, photoBlock);
+```
+
+Using semantic names like `profile-photo` makes it easy to locate and modify blocks when processing different data records.
+
+## Add Text with Variables
+
+Text variables use double curly brace syntax: `{{variableName}}`. We create a text block with variable placeholders for name, title, and email.
+
+```typescript highlight=highlight-create-text-with-variables
+// Create a text block with variable placeholders
+const textBlock = engine.block.create('text');
+const textContent = `{{name}}
+{{title}}
+{{email}}`;
+engine.block.replaceText(textBlock, textContent);
+engine.block.setWidthMode(textBlock, 'Auto');
+engine.block.setHeightMode(textBlock, 'Auto');
+engine.block.setFloat(textBlock, 'text/fontSize', 32);
+engine.block.setPositionX(textBlock, 230);
+engine.block.setPositionY(textBlock, 140);
+engine.block.appendChild(page, textBlock);
+```
+
+Variables in text blocks automatically display their values when set through the Variable API.
+
+## Set Variable Values
+
+We use `engine.variable.setString()` to define the value for each variable. When a variable is set, all text blocks referencing that variable update automatically.
+
+```typescript highlight=highlight-set-variables
+// Set the variable values from data
+engine.variable.setString('name', sampleData.name);
+engine.variable.setString('title', sampleData.title);
+engine.variable.setString('email', sampleData.email);
+```
+
+Variable values persist throughout the engine session. Setting a variable to a new value updates all references immediately.
+
+## Discover Variables
+
+Use `engine.variable.findAll()` to discover which variables exist in the scene. Use `engine.block.referencesAnyVariables()` to check if a specific block contains variable references.
+
+```typescript highlight=highlight-discover-variables
+// Discover all variables in the scene
+const variables = engine.variable.findAll();
+console.log('Variables in scene:', variables);
+
+// Check if the text block references any variables
+const hasVariables = engine.block.referencesAnyVariables(textBlock);
+console.log('Text block has variables:', hasVariables);
+```
+
+This is useful when loading existing templates to determine which data fields are required.
+
+## Find and Update Placeholder Blocks
+
+Use `engine.block.findByName()` to locate blocks by their semantic name. Once found, you can update properties like image content by modifying the fill URI.
+
+```typescript highlight=highlight-find-by-name
+// Find blocks by their semantic name
+const [foundPhotoBlock] = engine.block.findByName('profile-photo');
+if (foundPhotoBlock) {
+  console.log('Found profile-photo block:', foundPhotoBlock);
+
+  // Update the image content
+  const fill = engine.block.getFill(foundPhotoBlock);
+  engine.block.setString(
+    fill,
+    'fill/image/imageFileURI',
+    'https://img.ly/static/ubq_samples/sample_2.jpg'
+  );
+}
+```
+
+This pattern works well for updating profile photos, logos, or other image placeholders in templates.
+
+## Export the Design
+
+After merging data into the template, export the personalized design using `engine.block.export()`.
+
+```typescript highlight=highlight-export
+// Export the personalized design
+const blob = await engine.block.export(page, { mimeType: 'image/png' });
+console.log('Exported PNG blob:', blob.size, 'bytes');
+
+// Create a download link for the exported image
+const url = URL.createObjectURL(blob);
+console.log('Download URL created:', url);
+```
+
+You can export to PNG, JPEG, WebP, or PDF formats. For batch processing, collect blobs in an array or write directly to a file system.
+
+## Troubleshooting
+
+### Variables Not Rendering
+
+If variable placeholders show instead of values:
+
+- Verify the variable name matches exactly (case-sensitive)
+- Use `engine.variable.findAll()` to check which variables are defined
+- Ensure `engine.variable.setString()` was called before rendering
+
+### Block Not Found
+
+If `findByName()` returns an empty array:
+
+- Check the block name was set with `engine.block.setName()`
+- Verify the name string matches exactly (case-sensitive)
+- Ensure the block exists in the current scene
+
+### Image Not Updating
+
+If placeholder images don't update:
+
+- Get the fill block first with `engine.block.getFill()`
+- Use the correct property path: `fill/image/imageFileURI`
+- Verify the image URL is accessible and valid
+
+## API Reference
+
+| Method                                           | Description                                 |
+| ------------------------------------------------ | ------------------------------------------- |
+| `engine.variable.setString(name, value)`         | Set a text variable's value                 |
+| `engine.variable.getString(name)`                | Get a text variable's value                 |
+| `engine.variable.findAll()`                      | List all variable names in the scene        |
+| `engine.variable.remove(name)`                   | Remove a variable                           |
+| `engine.block.findByName(name)`                  | Find blocks by their semantic name          |
+| `engine.block.setName(block, name)`              | Set a block's semantic name                 |
+| `engine.block.replaceText(block, text)`          | Replace text content in a text block        |
+| `engine.block.referencesAnyVariables(block)`     | Check if block contains variable references |
+| `engine.block.getFill(block)`                    | Get the fill block of a design block        |
+| `engine.block.setString(block, property, value)` | Set a string property value                 |
+| `engine.block.export(block, options)`            | Export a block to an image format           |
+
+---
+
+## 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/automation/design-generation.md

@@ -0,0 +1,107 @@
+> 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) > [Automate Workflows](./automation.md) > [Design Generation](./automation/design-generation.md)
+
+---
+
+Automating design generation simplifies workflows and allows you to create
+dynamic, personalized designs at scale. By combining design templates with
+external data or user-provided input, you can quickly generate professional
+outputs for various use cases, from banner ads to direct mail.
+
+With IMG.LY, you can use templates to define dynamic elements such as text, images, or other assets. These elements are populated with real-time data or user inputs during the generation process. This guide will walk you through the process of using the CE.SDK for programmatic design generation.
+
+[Launch Web Demo](https://img.ly/showcases/cesdk/headless-design/web)
+
+## Populating a Template
+
+A design template is a pre-configured layout that includes placeholders for dynamic elements such as text, images, or other assets. These placeholders define where and how specific content will appear in the final design. During the generation process, the placeholders are replaced with actual data to create a completed output.
+
+- **Creating or Editing Templates:** Design templates can be created or edited directly within the CE.SDK using our UI or programmatically. Learn more in the [Create Templates guide](./create-templates.md).
+- **Dynamic Content Sources:** Templates can be populated with data from various sources, such as:
+  - **JSON files:** Useful for batch operations where data is pre-prepared.
+  - **External APIs:** Ideal for real-time updates and dynamic integrations.
+  - **User Input:** Data provided directly by the user through a UI.
+
+For detailed information on using and managing templates, see [Use Templates](./use-templates/overview.md).
+
+Below is a diagram illustrating how data is merged into a template to produce a final design:
+
+![Template data merge process diagram showing how variables and assets flow into the final output](https://img.ly/docs/cesdk/./assets/schema.excalidraw.svg)
+
+## Example Workflow
+
+### 1. Prepare the Template
+
+Start by designing a template with text variables. Here's an example postcard template with placeholders for the recipient's details:
+
+![Example postcard template with highlighted variable placeholders for name and address](https://img.ly/docs/cesdk/./assets/scene-example-backside.png)
+
+### 2. Load the Template into the Editor
+
+Initialize the CE.SDK and load your prepared template:
+
+```ts example=basic-scene marker=cesdk-init-after
+// Load a template from your server or a CDN
+const sceneUrl =
+  'https://cdn.img.ly/assets/demo/v4/ly.img.template/templates/cesdk_postcard_2.scene';
+await engine.scene.loadFromURL(sceneUrl);
+```
+
+### 3. Provide Data to Populate the Template
+
+Populate your template with data from your chosen source:
+
+```ts example=basic-scene marker=cesdk-init-after
+// Option 1: Prepare your data as a javascript object
+const data = {
+  textVariables: {
+    first_name: 'John',
+    last_name: 'Doe',
+    address: '123 Main St.',
+    city: 'Anytown'
+  }
+};
+// Option 2: Fetch from an API
+// const data = await fetch('https://api.example.com/design-data').then(res => res.json());
+engine.variable.setString('first_name', data.textVariables.first_name);
+engine.variable.setString('last_name', data.textVariables.last_name);
+engine.variable.setString('address', data.textVariables.address);
+engine.variable.setString('city', data.textVariables.city);
+```
+
+### 4. Export the Final Design
+
+Once the template is populated, export the final design in your preferred format:
+
+```ts example=basic-scene marker=cesdk-init-after
+const output = await engine.block.export(engine.scene.get(), {
+  mimeType: 'application/pdf'
+});
+// Success: 'output' contains your generated design as a PDF Blob
+// You can now save it or display it in your application
+```
+
+Here's what your final output should look like:
+
+![Exported postcard design showing populated name and address fields](https://img.ly/docs/cesdk/./assets/scene-example-backside-export.png)
+
+Need help with exports? Check out the [Export Guide](./export-save-publish/export.md) for detailed instructions and options.
+
+## Troubleshooting
+
+If you encounter issues during the generation process:
+
+- Verify that all your variable names exactly match those in your template
+- Ensure your template is accessible from the provided URL
+- Check that your data values are in the correct format (strings for text variables)
+- Monitor the console for detailed error messages from the 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/automation/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) > [Automate Workflows](./automation.md) > [Overview](./automation/overview.md)
+
+---
+
+### Output Formats
+
+---
+
+## 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/automation.md

@@ -0,0 +1,24 @@
+> 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) > [Automate Workflows](./automation.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Overview](./automation/overview.md) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale.
+- [Batch Processing](./automation/batch-processing.md) - Manage batch processing workflows in web apps with CE.SDK
+- [Auto-Resize](./automation/auto-resize.md) - Configure blocks to dynamically adjust dimensions using Absolute, Percent, and Auto sizing modes for responsive layouts and content-driven expansion.
+- [Data Merge](./automation/data-merge.md) - Generate personalized designs from templates by merging external data using text variables and placeholder blocks
+- [Automate Design Generation](./automation/design-generation.md) - Generate on-brand designs programmatically using templates, variables, and CE.SDK’s headless API.
+
+---
+
+## 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/browser-support.md

@@ -0,0 +1,38 @@
+> 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:** [Compatibility & Security](./compatibility.md) > [Browser Support](./browser-support.md)
+
+---
+
+The CreativeEditor SDK requires specific APIs to fully function.
+For video-related features, the required APIs are only supported in certain browsers.
+As a result, the list of supported browsers is currently limited to the following:
+
+| Supported Browser | Graphics Editing                              | Video Editing     | Video Export      |
+| ----------------- | --------------------------------------------- | ----------------- | ----------------- |
+| Chrome            | **114** or newer                              | **114** or newer  | **114** or newer  |
+| Chrome Android    | **114** or newer                              | not supported     | not supported     |
+| Chrome iOS        | **114** or newer (on iOS/iPadOS 15 or newer)  | not supported     | not supported     |
+| Edge              | **114** or newer                              | **114** or newer  | **114** or newer  |
+| Firefox           | **115** or newer                              | **130** or newer  | not supported     |
+| Safari            | **15.6** or newer                             | **26.0** or newer | **26.0** or newer |
+| Safari iOS        | **15.6** or newer (on iOS/iPadOS 15 or newer) | not supported     | not supported     |
+
+**Note:** Firefox supports video editing (decoding) starting with version 130 via the WebCodecs API. However, video export (encoding) is not supported because Firefox does not include the patent-encumbered H.264 and AAC codecs required for video encoding.
+
+For video features, CE.SDK automatically shows warning dialogs when unsupported browsers try to use video functionality. You can also detect video support programmatically using the `video.decode.checkSupport` and `video.encode.checkSupport` actions, or the silent `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` utilities. See the [Actions API](./actions.md) for implementation details.
+
+While other browsers based on the Chromium project might work fine (Arc, Brave, Opera, Vivaldi etc.) they are not officially supported.
+
+## Host Platform Restrictions
+
+All supported browsers rely on the host's platform APIs for different kind of functionality (e.g. video support). Check our [known editor limitations](./compatibility.md) for more details on these.
+
+---
+
+## 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/capabilities.md

@@ -0,0 +1,18 @@
+> 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:** [Get Started](./get-started/overview.md) > [Capabilities](./capabilities.md)
+
+---
+
+A comprehensive overview of all CE.SDK capabilities available for .
+
+<CapabilityTable platform={props.platform.id} />
+
+---
+
+## 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