@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/open-the-editor/from-htmlcanvas.md

@@ -0,0 +1,228 @@
+> 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) > [Open the Editor](./open-the-editor.md) > [Create From HTMLCanvas](./open-the-editor/from-htmlcanvas.md)
+
+---
+
+Create a CE.SDK scene from an HTMLCanvas element's rendered content, enabling editing of canvas-based graphics.
+
+![Create From HTMLCanvas example showing canvas content loaded in CE.SDK](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 5 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-open-the-editor-from-htmlcanvas-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-from-htmlcanvas-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-from-htmlcanvas-browser/)
+
+You can capture any graphics rendered to a canvas—2D drawings, WebGL content, or programmatically generated visuals—and use them as the starting point for editing in CE.SDK. The workflow extracts canvas content as a data URL and passes it to the scene API.
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-from-htmlcanvas-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 == null) {
+      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());
+
+    const engine = cesdk.engine;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 512;
+    canvas.height = 512;
+
+    const ctx = canvas.getContext('2d');
+    if (ctx == null) {
+      throw new Error('Could not get 2D context');
+    }
+
+    // Draw a gradient background
+    const gradient = ctx.createLinearGradient(0, 0, 512, 512);
+    gradient.addColorStop(0, '#4158D0');
+    gradient.addColorStop(0.5, '#C850C0');
+    gradient.addColorStop(1, '#FFCC70');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 512, 512);
+
+    // Draw "img.ly" text
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = 'bold 72px Arial, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('img.ly', 256, 256);
+
+    const dataURL = canvas.toDataURL();
+
+    // Second parameter is DPI: 72 for screen, 300 for print (default)
+    await engine.scene.createFromImage(dataURL);
+
+    // Enable auto-fit zoom on the page
+    const pages = engine.block.findByType('page');
+    if (pages.length > 0) {
+      engine.scene.enableZoomAutoFit(pages[0], 'Both', 40, 40, 40, 40);
+    }
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to create a canvas element, draw content to it, extract that content as a data URL, and create an editable CE.SDK scene from the result.
+
+## Create the Canvas
+
+Start by creating a canvas element with specific dimensions. These dimensions determine the resulting scene size.
+
+```typescript highlight=highlight-setup
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+```
+
+The canvas `width` and `height` attributes set the actual pixel dimensions, not CSS styling.
+
+## Get the Drawing Context
+
+Obtain the 2D rendering context from the canvas to draw content.
+
+```typescript highlight=highlight-draw-canvas
+const ctx = canvas.getContext('2d');
+if (ctx == null) {
+  throw new Error('Could not get 2D context');
+}
+```
+
+Use the context to render any graphics—2D drawings, chart visualizations, or programmatic visuals.
+
+## Extract as Data URL
+
+Extract the canvas content as a base64-encoded data URL using `toDataURL()`.
+
+```typescript highlight=highlight-extract-data-url
+const dataURL = canvas.toDataURL();
+```
+
+The default format is PNG. For JPEG with compression, use `canvas.toDataURL('image/jpeg', 0.9)`.
+
+## Create Scene from Data URL
+
+Pass the data URL to `engine.scene.createFromImage()` to create an editable scene. The page dimensions automatically match the source image.
+
+```typescript highlight=highlight-create-scene
+// Second parameter is DPI: 72 for screen, 300 for print (default)
+await engine.scene.createFromImage(dataURL);
+```
+
+The second parameter controls DPI: use 72 for screen display or 300 (default) for print output.
+
+## Common Canvas Sources
+
+The `createFromImage()` method accepts any valid image data URL, making it compatible with various canvas sources:
+
+- **Chart Libraries** — D3.js, Chart.js, and Plotly render visualizations to canvas
+- **WebGL Content** — 3D renders, games, and complex visualizations
+- **Drawing Applications** — Capture user-created sketches and annotations
+- **QR Code Generators** — Libraries like `qrcode.js` render directly to canvas
+- **Generative Art** — p5.js and Processing.js output to canvas elements
+- **Video Frames** — Draw video frames to canvas with `drawImage(video, 0, 0)`
+
+Each source follows the same pattern: render to canvas, extract with `toDataURL()`, and pass to CE.SDK.
+
+## Troubleshooting
+
+**Canvas content not appearing**
+
+Verify the canvas has content before calling `toDataURL()`. Async rendering can produce blank exports. For WebGL canvases, set `preserveDrawingBuffer: true` in the context options.
+
+**Tainted canvas errors**
+
+Cross-origin images drawn to the canvas taint it, preventing `toDataURL()` calls. Use `crossOrigin="anonymous"` when loading images, and ensure the server sends proper CORS headers.
+
+**Scene dimensions incorrect**
+
+Canvas `width` and `height` attributes determine the actual pixel dimensions, not CSS styling. The data URL captures attribute dimensions, not the displayed size.
+
+**WebGL context lost**
+
+WebGL contexts can be lost due to GPU resource limits. Listen for the `webglcontextlost` event and handle gracefully by recreating the context or notifying the user.
+
+## API Reference
+
+| Method                                                       | Description                                                               |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `engine.scene.createFromImage(url, dpi?, pixelScaleFactor?)` | Creates a scene from an image URL or data URL. Default DPI is 300.        |
+| `engine.scene.get()`                                         | Returns the current scene block ID, or `null` if no scene exists.         |
+| `engine.scene.enableZoomAutoFit(id, axis, ...padding)`       | Enables automatic zoom to fit the specified block.                        |
+| `engine.block.findByType(type)`                              | Finds all blocks of the specified type.                                   |
+| `canvas.toDataURL(type?, quality?)`                          | Exports canvas content as a base64 data URL. Default type is `image/png`. |
+| `canvas.getContext('2d')`                                    | Returns the 2D rendering context for drawing operations.                  |
+
+## Next Steps
+
+[Create From Image](./open-the-editor/from-image.md) shows how to load scenes from image URLs directly.
+
+[Start With Blank Canvas](./open-the-editor/blank-canvas.md) covers starting with an empty scene for new designs.
+
+[Save a Scene](./export-save-publish/save.md) explains how to save your edited scene for later use.
+
+[Load a Scene](./open-the-editor/load-scene.md) demonstrates loading previously saved scenes.
+
+---
+
+## 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/open-the-editor/from-image.md

@@ -0,0 +1,205 @@
+> 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) > [Open the Editor](./open-the-editor.md) > [Create From Image](./open-the-editor/from-image.md)
+
+---
+
+Create an editable scene from an image file using CE.SDK, with automatic page
+dimensions matching the source image for seamless image editing workflows.
+
+![Create From Image example showing an image loaded into CE.SDK ready for editing](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 5 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-open-the-editor-from-image-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-from-image-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-from-image-browser/)
+
+Starting from an existing image allows you to use the editor for customizing individual assets. The `engine.scene.createFromImage()` method fetches the image, creates a scene with matching dimensions, and sets up pixel-based design units. This differs from loading a saved scene file, as you're creating new editable content from raw image data.
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-from-image-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+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());
+    const engine = cesdk.engine;
+
+    // ========================================
+    // Create Scene from Remote Image URL
+    // ========================================
+    // The most common approach: load an image directly from a URL
+    const imageUrl = 'https://img.ly/static/ubq_samples/sample_4.jpg';
+
+    // Create a scene sized to match the image dimensions
+    await engine.scene.createFromImage(imageUrl);
+
+    // The scene is now ready for editing with the image as content
+
+    // ========================================
+    // Working with the Created Scene
+    // ========================================
+    // After creating the scene, access the page for modifications
+    const pages = engine.block.findByType('page');
+    const page = pages[0];
+
+    if (page) {
+      // Get the page dimensions (set from the image)
+      const width = engine.block.getWidth(page);
+      const height = engine.block.getHeight(page);
+      console.log(`Scene created with dimensions: ${width}x${height}`);
+    }
+
+    // Zoom to show the full scene
+    if (page) {
+      await engine.scene.zoomToBlock(page);
+    }
+  }
+}
+
+export default Example;
+```
+
+## Create Scene from Remote URL
+
+The most common approach is loading an image directly from a URL. Pass the URL to `createFromImage()` to fetch the image and create a scene sized to match its dimensions.
+
+```typescript highlight-create-from-url
+// The most common approach: load an image directly from a URL
+const imageUrl = 'https://img.ly/static/ubq_samples/sample_4.jpg';
+
+// Create a scene sized to match the image dimensions
+await engine.scene.createFromImage(imageUrl);
+
+// The scene is now ready for editing with the image as content
+```
+
+The method returns a promise that resolves once the image is loaded and the scene is ready for editing. The scene's page dimensions automatically match the image.
+
+## Create Scene from HTMLImageElement
+
+When you have an image already displayed on your page, extract its `src` attribute and pass it to `createFromImage()`. This is useful when integrating with existing image galleries or previews.
+
+```typescript
+const element = document.getElementById('source-image') as HTMLImageElement;
+const imageURL = element.src;
+const scene = await engine.scene.createFromImage(imageURL);
+```
+
+## Create Scene from Blob
+
+For images from file uploads, drag-and-drop, or fetch responses, create an object URL from the blob first. Use `URL.createObjectURL()` to get a URL that `createFromImage()` can load.
+
+```typescript
+const blob = await fetch(imageUrl).then((response) => response.blob());
+const objectURL = URL.createObjectURL(blob);
+const scene = await engine.scene.createFromImage(objectURL);
+```
+
+This pattern works with file inputs (`input.files[0]`), clipboard data, and any other blob source.
+
+## Create Scene from Canvas Element
+
+For images rendered on a canvas element, export the canvas to a blob, then create the scene. Use `canvas.toBlob()` for better performance with large images.
+
+```typescript
+const canvas = document.getElementById('source-canvas') as HTMLCanvasElement;
+canvas.toBlob(async (blob) => {
+  if (blob) {
+    const objectURL = URL.createObjectURL(blob);
+    const scene = await engine.scene.createFromImage(objectURL);
+  }
+});
+```
+
+## Configure Scene Parameters
+
+The `createFromImage()` method accepts optional parameters for DPI, pixel scale factor, and scene layout.
+
+```typescript
+const scene = await engine.scene.createFromImage(
+  imageUrl,
+  300, // dpi - defaults to 300
+  1, // pixelScaleFactor - defaults to 1
+  'Free' // sceneLayout - defaults to 'Free'
+);
+```
+
+- **DPI**: Affects the relationship between pixel and physical dimensions (defaults to 300)
+- **Pixel Scale Factor**: Accounts for high-DPI displays (defaults to 1)
+- **Scene Layout**: Controls page arrangement - 'Free', 'HorizontalStack', 'VerticalStack', or 'DepthStack' (defaults to 'Free')
+
+## Working with the Created Scene
+
+After creating the scene, use `engine.block.findByType('page')` to access the page. The scene contains a single page with the image as its content.
+
+```typescript highlight-work-with-scene
+// After creating the scene, access the page for modifications
+const pages = engine.block.findByType('page');
+const page = pages[0];
+
+if (page) {
+  // Get the page dimensions (set from the image)
+  const width = engine.block.getWidth(page);
+  const height = engine.block.getHeight(page);
+  console.log(`Scene created with dimensions: ${width}x${height}`);
+}
+```
+
+## Saving Your Work
+
+To persist changes after editing, use `engine.scene.saveToString()` or `engine.scene.saveToArchive()`. See [Saving Scenes](./export-save-publish/save.md) for details.
+
+## Troubleshooting
+
+**Image fails to load**
+
+- Verify the image URL is accessible and returns a valid image
+- Check CORS headers if loading from a different origin
+- Ensure the image format is supported (JPG, PNG, WebP, GIF)
+
+**Scene dimensions don't match expected size**
+
+- The scene uses pixel design units by default
+- DPI affects how dimensions translate to physical measurements
+- Check pixelScaleFactor if rendering appears scaled
+
+**Blob URL not working**
+
+- Ensure `URL.createObjectURL()` is called before the blob is released
+- Object URLs are only valid within the same document context
+- Consider revoking object URLs when no longer needed to free memory
+
+## API Reference
+
+| Method                         | Description                        |
+| ------------------------------ | ---------------------------------- |
+| `engine.scene.createFromImage` | Create scene from image URL        |
+| `engine.block.findByType`      | Find blocks by type in scene       |
+| `engine.block.getWidth`        | Get block width                    |
+| `engine.block.getHeight`       | Get block height                   |
+| `URL.createObjectURL`          | Create URL from blob (Browser API) |
+| `engine.scene.saveToString`    | Save scene to string format        |
+| `engine.scene.saveToArchive`   | Save scene with embedded assets    |
+
+---
+
+## 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/open-the-editor/from-template.md

@@ -0,0 +1,189 @@
+> 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) > [Open the Editor](./open-the-editor.md) > [Create From Template](./open-the-editor/from-template.md)
+
+---
+
+Load pre-designed templates to give users a professional starting point instead of a blank canvas.
+
+![Create From Template example showing a postcard template loaded in the editor](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 5 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-open-the-editor-from-template-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-from-template-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-from-template-browser/)
+
+Templates provide consistent layouts and styling that users can customize for their needs. CE.SDK supports loading templates from remote URLs, local strings, and applying template content to existing scenes while preserving page dimensions.
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-from-template-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+import businessCardSceneString from './assets/business-card.scene?raw';
+
+class Example implements EditorPlugin {
+  name = packageJson.name;
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    await cesdk.addPlugin(new DesignEditorConfig());
+
+    if (cesdk == null) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    const engine = cesdk.engine;
+    const templateUrl =
+      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+    await engine.scene.loadFromURL(templateUrl);
+
+    const textBlocks = engine.block.findByType('text');
+    if (textBlocks.length > 0) {
+      engine.block.replaceText(textBlocks[0], 'Welcome to CE.SDK');
+    }
+
+    // Zoom to fit the page in view
+    const pages = engine.block.findByType('page');
+    if (pages.length > 0) {
+      engine.scene.zoomToBlock(pages[0]);
+    }
+
+    // Add custom navigation bar actions for template operations
+    cesdk.ui.insertOrderComponent(
+      { in: 'ly.img.navigation.bar', position: 'end' },
+      {
+        id: 'ly.img.actions.navigationBar',
+        children: [
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'load-from-string-action',
+            label: 'Load from String',
+            iconName: '@imgly/icons/Essentials/Download',
+            onClick: async () => {
+              await engine.scene.loadFromString(businessCardSceneString);
+              const scene = engine.scene.get();
+              if (scene != null) {
+                await engine.scene.zoomToBlock(scene, { padding: 40 });
+              }
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'apply-template-action',
+            label: 'Apply Template',
+            iconName: '@imgly/icons/Essentials/TemplateLibrary',
+            onClick: async () => {
+              const applyTemplateUrl =
+                'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene';
+              await engine.scene.applyTemplateFromURL(applyTemplateUrl);
+              const scene = engine.scene.get();
+              if (scene != null) {
+                await engine.scene.zoomToBlock(scene, { padding: 40 });
+              }
+            }
+          }
+        ]
+      }
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to load templates from URLs and strings, and how to apply templates to existing scenes.
+
+## Load a Template from URL
+
+The most common approach is loading templates from a remote URL. The engine replaces any existing scene with the loaded template.
+
+```typescript highlight-load-from-url
+const templateUrl =
+  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+await engine.scene.loadFromURL(templateUrl);
+```
+
+The template URL should point to a valid `.scene` file hosted on a server with appropriate CORS headers.
+
+## Load a Template from String
+
+When templates are stored in a database or retrieved from custom storage, use `engine.scene.loadFromString()`. This accepts the scene data as a string, typically from a previous `engine.scene.saveToString()` call.
+
+```typescript highlight-load-from-string
+await engine.scene.loadFromString(businessCardSceneString);
+```
+
+This approach is useful for loading templates from your backend API, restoring saved user designs, or working with templates stored in databases.
+
+## Apply a Template to an Existing Scene
+
+To apply template content while preserving the current page dimensions, use `engine.scene.applyTemplateFromURL()`. The template content automatically adjusts to fit the existing page size.
+
+```typescript highlight-apply-template
+await engine.scene.applyTemplateFromURL(applyTemplateUrl);
+```
+
+This is useful when users have already set up a canvas size and you want to populate it with template content without changing the dimensions.
+
+## Modify Template Content
+
+After loading a template, customize the content using block APIs. Find elements and modify them as needed.
+
+```typescript highlight-modify-content
+const textBlocks = engine.block.findByType('text');
+if (textBlocks.length > 0) {
+  engine.block.replaceText(textBlocks[0], 'Welcome to CE.SDK');
+}
+```
+
+Common modifications include:
+
+- **Updating text content**: `engine.block.replaceText(blockId, 'New text')`
+- **Swapping images**: `engine.block.setString(fill, 'fill/image/imageFileURI', newUrl)`
+- **Adjusting colors**: `engine.block.setColor(blockId, 'fill/solid/color', newColor)`
+
+## Troubleshooting
+
+### Template Fails to Load
+
+- Verify the template URL is accessible and returns a valid scene file
+- Check CORS headers allow fetching from the template source
+- Ensure the template format is compatible with your CE.SDK version
+
+### Assets Not Displaying After Load
+
+- Template scene files store asset references as URLs; ensure those URLs remain accessible
+- Use archives (`.zip`) for self-contained templates with bundled assets
+- Configure a URI resolver if assets are hosted on different servers
+
+## API Reference
+
+| Method                                   | Description                                  |
+| ---------------------------------------- | -------------------------------------------- |
+| `engine.scene.loadFromURL()`             | Load a scene from a remote URL               |
+| `engine.scene.loadFromString()`          | Load a scene from a string                   |
+| `engine.scene.applyTemplateFromURL()`    | Apply template to existing scene from URL    |
+| `engine.scene.applyTemplateFromString()` | Apply template to existing scene from string |
+| `engine.block.findByType()`              | Find blocks by type                          |
+| `engine.block.findByKind()`              | Find blocks by kind                          |
+| `engine.block.replaceText()`             | Replace text content in a text block         |
+
+## Next Steps
+
+- [Load a Scene](./open-the-editor/load-scene.md) - Load saved scenes from various sources
+- [Save a Design](./export-save-publish/save.md) - Save your customized template
+- [Import a Design](./open-the-editor/import-design.md) - Import designs from archives or other 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