@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-video.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 Edit Videos](./create-video.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Create Videos Overview](./create-video/overview.md) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing.
+- [Video and Audio Timeline Web Editor](./create-video/timeline-editor.md) - Use the timeline editor to arrange and edit video clips, audio, and animations frame by frame.
+- [Control Audio and Video](./create-video/control.md) - Learn to play, pause, seek, and preview audio and video content in CE.SDK using playback controls and solo mode.
+- [Trim Video Clips](./edit-video/trim.md) - Learn how to trim video clips in CE.SDK to control which portion of media plays back.
+- [Split Video and Audio](./edit-video/split.md) - Learn how to split video and audio clips at specific time points in CE.SDK, creating two independent segments from a single clip.
+- [Join and Arrange Video Clips](./edit-video/join-and-arrange.md) - Combine multiple video clips into sequences and organize them on the timeline using tracks and time offsets in CE.SDK.
+- [Transform](./edit-video/transform.md) - Documentation for Transform
+- [Add Captions](./edit-video/add-captions.md) - Documentation for adding captions to videos
+- [Update Caption Presets](./create-video/update-caption-presets.md) - Extend video captions with custom caption styles using simple content.json updates
+- [Add Watermark](./edit-video/add-watermark.md) - Add text and image watermarks to videos using CE.SDK for copyright protection, branding, and content attribution with timeline management and visibility controls.
+- [Redact Sensitive Content in Videos](./edit-video/redaction.md) - Redact sensitive video content using blur, pixelization, or solid overlays. Essential for privacy protection when obscuring faces, license plates, or personal information.
+- [Video Editor SDK](./overview.md) - Explore video editing features in CE.SDK including trimming, splitting, captions, and programmatic editing.
+- [Video Limitations](./create-video/limitations.md) - Understand resolution limits, duration constraints, codec support, and browser-specific restrictions when working with video in 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/edit-image/add-watermark.md

@@ -0,0 +1,497 @@
+> 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 Images](./edit-image.md) > [Add Watermark](./edit-image/add-watermark.md)
+
+---
+
+Add text and image watermarks to designs programmatically using CE.SDK's block API.
+
+![Add Watermark example showing a design with text and logo watermarks](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-edit-image-add-watermark-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-add-watermark-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-add-watermark-browser/)
+
+Watermarks protect intellectual property, indicate ownership, add branding, or mark content as drafts. CE.SDK supports two types of watermarks: **text watermarks** created from text blocks for copyright notices and brand names, and **image watermarks** created from graphic blocks with image fills for logos and symbols.
+
+```typescript file=@cesdk_web_examples/guides-edit-image-add-watermark-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+
+/**
+ * CE.SDK Plugin: Add Watermark Guide
+ *
+ * Demonstrates adding text and image watermarks to designs:
+ * - Creating text watermarks with custom styling
+ * - Creating logo watermarks using graphic blocks
+ * - Positioning watermarks side by side at the bottom
+ * - Applying drop shadows for visibility
+ * - Exporting watermarked 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());
+    const engine = cesdk.engine;
+
+    // Create a scene with custom page dimensions
+    const scene = engine.scene.create();
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 600);
+    engine.block.appendChild(scene, page);
+
+    const pageWidth = engine.block.getWidth(page);
+    const pageHeight = engine.block.getHeight(page);
+
+    // Create a gradient background for the page
+    const gradientFill = engine.block.createFill('gradient/linear');
+
+    // Set a modern purple-to-cyan gradient
+    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [
+      { color: { r: 0.39, g: 0.4, b: 0.95, a: 1 }, stop: 0 }, // Indigo
+      { color: { r: 0.02, g: 0.71, b: 0.83, a: 1 }, stop: 1 } // Cyan
+    ]);
+
+    // Set diagonal gradient direction (top-left to bottom-right)
+    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0);
+    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0);
+    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1);
+    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1);
+
+    // Apply gradient to page
+    engine.block.setFill(page, gradientFill);
+
+    // Create a centered title text
+    const titleText = engine.block.create('text');
+    engine.block.setString(titleText, 'text/text', 'Add Watermark');
+    engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center');
+    engine.block.appendChild(page, titleText);
+
+    // Style the title
+    engine.block.setTextFontSize(titleText, 14);
+    engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 });
+    engine.block.setWidthMode(titleText, 'Auto');
+    engine.block.setHeightMode(titleText, 'Auto');
+
+    // Center the title on the page
+    const titleWidth = engine.block.getFrameWidth(titleText);
+    const titleHeight = engine.block.getFrameHeight(titleText);
+    engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2);
+    engine.block.setPositionY(titleText, (pageHeight - titleHeight) / 2);
+
+    // Create a text block for the watermark
+    const textWatermark = engine.block.create('text');
+
+    // Set the watermark text content
+    engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly');
+
+    // Left-align the text for the watermark
+    engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left');
+
+    // Add the text block to the page
+    engine.block.appendChild(page, textWatermark);
+
+    // Set font size for the watermark
+    engine.block.setTextFontSize(textWatermark, 4);
+
+    // Set text color to white for contrast
+    engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 });
+
+    // Set opacity to make it semi-transparent
+    engine.block.setOpacity(textWatermark, 0.8);
+
+    // Set width mode to auto so text fits its content
+    engine.block.setWidthMode(textWatermark, 'Auto');
+    engine.block.setHeightMode(textWatermark, 'Auto');
+
+    // Create a graphic block for the logo watermark
+    const logoWatermark = engine.block.create('graphic');
+
+    // Create a rect shape for the logo
+    const rectShape = engine.block.createShape('rect');
+    engine.block.setShape(logoWatermark, rectShape);
+
+    // Create an image fill with a logo
+    const imageFill = engine.block.createFill('image');
+    engine.block.setString(
+      imageFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/imgly_logo.jpg'
+    );
+
+    // Apply the fill to the graphic block
+    engine.block.setFill(logoWatermark, imageFill);
+
+    // Set content fill mode to contain the image within bounds
+    engine.block.setContentFillMode(logoWatermark, 'Contain');
+
+    // Add to page
+    engine.block.appendChild(page, logoWatermark);
+
+    // Size the logo watermark
+    const logoWidth = 80;
+    const logoHeight = 50;
+    engine.block.setWidth(logoWatermark, logoWidth);
+    engine.block.setHeight(logoWatermark, logoHeight);
+
+    // Set opacity for the logo watermark
+    engine.block.setOpacity(logoWatermark, 0.8);
+
+    // Position padding from edges
+    const padding = 15;
+
+    // Position text watermark at bottom-left
+    engine.block.setPositionX(textWatermark, padding);
+    engine.block.setPositionY(textWatermark, pageHeight - padding - 20);
+
+    // Position logo watermark at top-right
+    engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth);
+    engine.block.setPositionY(logoWatermark, padding);
+
+    // Add drop shadow to text watermark for better visibility
+    engine.block.setDropShadowEnabled(textWatermark, true);
+    engine.block.setDropShadowOffsetX(textWatermark, 1);
+    engine.block.setDropShadowOffsetY(textWatermark, 1);
+    engine.block.setDropShadowBlurRadiusX(textWatermark, 2);
+    engine.block.setDropShadowBlurRadiusY(textWatermark, 2);
+    engine.block.setDropShadowColor(textWatermark, {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0.5
+    });
+
+    // Add drop shadow to logo watermark
+    engine.block.setDropShadowEnabled(logoWatermark, true);
+    engine.block.setDropShadowOffsetX(logoWatermark, 1);
+    engine.block.setDropShadowOffsetY(logoWatermark, 1);
+    engine.block.setDropShadowBlurRadiusX(logoWatermark, 2);
+    engine.block.setDropShadowBlurRadiusY(logoWatermark, 2);
+    engine.block.setDropShadowColor(logoWatermark, {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0.5
+    });
+
+    // Add export button to the navigation bar
+    cesdk.ui.insertOrderComponent(
+      { in: 'ly.img.navigation.bar', position: 'end' },
+      {
+        id: 'ly.img.actions.navigationBar',
+        children: [
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-watermarked',
+            label: 'Export',
+            icon: '@imgly/Download',
+            onClick: async () => {
+              // Export the watermarked design
+              const blob = await engine.block.export(page, {
+                mimeType: 'image/png'
+              });
+
+              // Download the watermarked image
+              await cesdk.utils.downloadFile(blob, 'image/png');
+            }
+          }
+        ]
+      }
+    );
+
+    // Zoom to fit the page in view with padding and enable auto-fit
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to create text and logo watermarks, position them on a design, style them for visibility, and export the watermarked result.
+
+## Setup and Prerequisites
+
+We start by initializing CE.SDK, loading asset sources, and creating a scene with a custom page size. The page provides the canvas where we'll add our watermarks.
+
+```typescript highlight=highlight-setup
+const engine = cesdk.engine;
+
+// Create a scene with custom page dimensions
+const scene = engine.scene.create();
+const page = engine.block.create('page');
+engine.block.setWidth(page, 800);
+engine.block.setHeight(page, 600);
+engine.block.appendChild(scene, page);
+
+const pageWidth = engine.block.getWidth(page);
+const pageHeight = engine.block.getHeight(page);
+```
+
+We use `engine.scene.create('VerticalStack', {...})` to create a scene with custom page dimensions. The page dimensions are retrieved for positioning calculations later.
+
+## Creating Text Watermarks
+
+Text watermarks display copyright notices, URLs, or brand names. We create a text block, set its content, and add it to the page.
+
+```typescript highlight=highlight-create-text-watermark
+// Create a text block for the watermark
+const textWatermark = engine.block.create('text');
+
+// Set the watermark text content
+engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly');
+
+// Left-align the text for the watermark
+engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left');
+
+// Add the text block to the page
+engine.block.appendChild(page, textWatermark);
+```
+
+The `engine.block.create('text')` method creates a new text block. We set the text content using `engine.block.setString()` with the `'text/text'` property.
+
+### Styling the Text
+
+We configure the font size, color, and opacity to make the watermark visible but unobtrusive.
+
+```typescript highlight=highlight-style-text-watermark
+// Set font size for the watermark
+engine.block.setTextFontSize(textWatermark, 4);
+
+// Set text color to white for contrast
+engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 });
+
+// Set opacity to make it semi-transparent
+engine.block.setOpacity(textWatermark, 0.8);
+
+// Set width mode to auto so text fits its content
+engine.block.setWidthMode(textWatermark, 'Auto');
+engine.block.setHeightMode(textWatermark, 'Auto');
+```
+
+Key styling options:
+
+- **Font size** - Use sizes between 14-18px for subtle watermarks
+- **Text color** - White or black depending on the image background
+- **Opacity** - Values between 0.5-0.7 provide a balanced, semi-transparent appearance
+- **Size mode** - Set to `'Auto'` so the block automatically fits its text content
+
+### Positioning the Watermarks
+
+We calculate the watermark positions based on the page dimensions and place the logo and text side-by-side at the bottom center of the page.
+
+```typescript highlight=highlight-position-text-watermark
+// Position padding from edges
+const padding = 15;
+
+// Position text watermark at bottom-left
+engine.block.setPositionX(textWatermark, padding);
+engine.block.setPositionY(textWatermark, pageHeight - padding - 20);
+
+// Position logo watermark at top-right
+engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth);
+engine.block.setPositionY(logoWatermark, padding);
+```
+
+We retrieve the rendered frame dimensions using `engine.block.getFrameWidth()` and `engine.block.getFrameHeight()`, calculate the total width of both watermarks with spacing, then center them horizontally. The vertical position places them near the bottom with padding from the edge.
+
+## Creating Logo Watermarks
+
+Logo watermarks use graphic blocks with image fills to display brand symbols or company logos.
+
+```typescript highlight=highlight-create-logo-watermark
+// Create a graphic block for the logo watermark
+const logoWatermark = engine.block.create('graphic');
+
+// Create a rect shape for the logo
+const rectShape = engine.block.createShape('rect');
+engine.block.setShape(logoWatermark, rectShape);
+
+// Create an image fill with a logo
+const imageFill = engine.block.createFill('image');
+engine.block.setString(
+  imageFill,
+  'fill/image/imageFileURI',
+  'https://img.ly/static/ubq_samples/imgly_logo.jpg'
+);
+
+// Apply the fill to the graphic block
+engine.block.setFill(logoWatermark, imageFill);
+
+// Set content fill mode to contain the image within bounds
+engine.block.setContentFillMode(logoWatermark, 'Contain');
+
+// Add to page
+engine.block.appendChild(page, logoWatermark);
+```
+
+We create a graphic block, assign a rect shape, then create an image fill with the logo URI. The fill is applied to the graphic block before adding it to the page.
+
+### Sizing the Logo
+
+We set fixed dimensions for the logo and apply opacity to match the text watermark.
+
+```typescript highlight=highlight-size-logo-watermark
+// Size the logo watermark
+const logoWidth = 80;
+const logoHeight = 50;
+engine.block.setWidth(logoWatermark, logoWidth);
+engine.block.setHeight(logoWatermark, logoHeight);
+
+// Set opacity for the logo watermark
+engine.block.setOpacity(logoWatermark, 0.8);
+```
+
+A good rule is to size logos to 10-20% of the page width. This keeps them visible without dominating the design.
+
+## Enhancing Visibility with Drop Shadows
+
+Drop shadows improve watermark readability against varied backgrounds by adding contrast.
+
+```typescript highlight=highlight-add-drop-shadow
+// Add drop shadow to text watermark for better visibility
+engine.block.setDropShadowEnabled(textWatermark, true);
+engine.block.setDropShadowOffsetX(textWatermark, 1);
+engine.block.setDropShadowOffsetY(textWatermark, 1);
+engine.block.setDropShadowBlurRadiusX(textWatermark, 2);
+engine.block.setDropShadowBlurRadiusY(textWatermark, 2);
+engine.block.setDropShadowColor(textWatermark, {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0.5
+});
+
+// Add drop shadow to logo watermark
+engine.block.setDropShadowEnabled(logoWatermark, true);
+engine.block.setDropShadowOffsetX(logoWatermark, 1);
+engine.block.setDropShadowOffsetY(logoWatermark, 1);
+engine.block.setDropShadowBlurRadiusX(logoWatermark, 2);
+engine.block.setDropShadowBlurRadiusY(logoWatermark, 2);
+engine.block.setDropShadowColor(logoWatermark, {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0.5
+});
+```
+
+Drop shadow parameters:
+
+- **Offset X/Y** - Distance from the block (2-4 pixels works well)
+- **Blur Radius X/Y** - Softness of the shadow (4-8 pixels for subtle effect)
+- **Color** - Black with 0.5 alpha provides soft contrast without being harsh
+
+## Exporting Watermarked Images
+
+After adding watermarks, we add an export button to the navigation bar that downloads the watermarked image when clicked.
+
+```typescript highlight=highlight-export-watermarked
+// Add export button to the navigation bar
+cesdk.ui.insertOrderComponent(
+  { in: 'ly.img.navigation.bar', position: 'end' },
+  {
+    id: 'ly.img.actions.navigationBar',
+    children: [
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'export-watermarked',
+        label: 'Export',
+        icon: '@imgly/Download',
+        onClick: async () => {
+          // Export the watermarked design
+          const blob = await engine.block.export(page, {
+            mimeType: 'image/png'
+          });
+
+          // Download the watermarked image
+          await cesdk.utils.downloadFile(blob, 'image/png');
+        }
+      }
+    ]
+  }
+);
+```
+
+We use `cesdk.ui.insertOrderComponent()` to add a custom button to the editor's navigation bar. When clicked, `engine.block.export()` renders the page with all watermarks and returns a blob that `cesdk.utils.downloadFile()` downloads to the user's device. Supported formats include PNG, JPEG, and WebP.
+
+## Troubleshooting
+
+**Watermark not visible**
+
+- Verify the block is within page bounds using position values
+- Check opacity is between 0.3-1.0
+- Ensure `engine.block.appendChild()` was called to add the block to the page
+
+**Position appears incorrect**
+
+- Recalculate positions using current `pageWidth` and `pageHeight`
+- Account for watermark dimensions when calculating corner positions
+- Remember that coordinates start from the top-left corner
+
+**Text not legible**
+
+- Increase font size to at least 36px
+- Add a drop shadow for contrast against complex backgrounds
+- Increase opacity if the watermark is too faint
+
+**Logo quality issues**
+
+- Use a higher resolution source image for the logo
+- Avoid scaling the logo beyond its original dimensions
+
+## API Reference
+
+| Method                                              | Purpose                             |
+| --------------------------------------------------- | ----------------------------------- |
+| `engine.block.create(type)`                         | Create text or graphic blocks       |
+| `engine.block.createShape(type)`                    | Create shapes for graphic blocks    |
+| `engine.block.createFill(type)`                     | Create image fills for logos        |
+| `engine.block.setString(id, property, value)`       | Set text content or image URI       |
+| `engine.block.setTextFontSize(id, size)`            | Set text font size                  |
+| `engine.block.setTextColor(id, color)`              | Set text color                      |
+| `engine.block.setOpacity(id, opacity)`              | Set block transparency              |
+| `engine.block.setPositionX(id, value)`              | Set horizontal position             |
+| `engine.block.setPositionY(id, value)`              | Set vertical position               |
+| `engine.block.setWidth(id, value)`                  | Set block width                     |
+| `engine.block.setHeight(id, value)`                 | Set block height                    |
+| `engine.block.getFrameWidth(id)`                    | Get rendered frame width            |
+| `engine.block.getFrameHeight(id)`                   | Get rendered frame height           |
+| `engine.block.setDropShadowEnabled(id, enabled)`    | Enable drop shadow                  |
+| `engine.block.setDropShadowOffsetX(id, offset)`     | Set shadow X offset                 |
+| `engine.block.setDropShadowOffsetY(id, offset)`     | Set shadow Y offset                 |
+| `engine.block.setDropShadowBlurRadiusX(id, radius)` | Set shadow blur                     |
+| `engine.block.setDropShadowColor(id, color)`        | Set shadow color                    |
+| `engine.block.export(id, options)`                  | Export block to blob                |
+| `cesdk.ui.insertOrderComponent(options, component)` | Add custom button to navigation bar |
+| `cesdk.utils.downloadFile(blob, mimeType)`          | Download blob as file               |
+
+## Next Steps
+
+- [Text Styling](./text/styling.md) — Style text blocks with fonts, colors, and effects
+- [Export Overview](./export-save-publish/export/overview.md) — Export options and formats for watermarked images
+- [Crop Images](./edit-image/transform/crop.md) — Transform images before watermarking
+
+---
+
+## 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/edit-image/overview.md

@@ -0,0 +1,22 @@
+> 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 Images](./edit-image.md) > [Overview](./edit-image/overview.md)
+
+---
+
+The CreativeEditor SDK (CE.SDK) offers powerful image editing capabilities designed for seamless integration into your application. You can give your users full control through an intuitive user interface or implement fully automated workflows via the SDK’s programmatic API.
+
+Image editing with CE.SDK is fully client-side, ensuring fast performance, data privacy, and offline compatibility. Whether you're building a photo editor, design tool, or automation workflow, CE.SDK provides everything you need—plus the flexibility to integrate AI tools for tasks like adding or removing objects, swapping backgrounds, or creating variants.
+
+[Launch Web Demo](https://img.ly/showcases/cesdk)
+
+[Get Started](./get-started/overview.md)
+
+---
+
+## 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