@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-templates/add-dynamic-content.md

@@ -0,0 +1,307 @@
+> 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 Use Templates](./create-templates.md) > [Insert Dynamic Content](./create-templates/add-dynamic-content.md)
+
+---
+
+Dynamic content transforms static designs into flexible, data-driven templates. CE.SDK provides three complementary capabilities—text variables, placeholders, and editing constraints—that work together to enable personalization while maintaining design integrity.
+
+![Dynamic Content example showing variables and placeholders](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-create-templates-add-dynamic-content-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-add-dynamic-content-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-dynamic-content-browser/)
+
+```typescript file=@cesdk_web_examples/guides-create-templates-add-dynamic-content-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: Dynamic Content Overview
+ *
+ * Demonstrates the dynamic content capabilities in CE.SDK templates:
+ * - Text Variables: Insert {{tokens}} that resolve to dynamic values
+ * - Placeholders: Create drop zones for swappable images/videos
+ * - Editing Constraints: Lock properties while allowing controlled changes
+ */
+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: 600, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+
+    // Set editor role to Adopter for template usage
+    engine.editor.setRole('Adopter');
+
+    const page = engine.block.findByType('page')[0];
+
+    // Content area: 480px wide, centered (left margin = 160px)
+    const contentX = 160;
+    const contentWidth = 480;
+
+    // TEXT VARIABLES: Define variables for personalization
+    engine.variable.setString('firstName', 'Jane');
+    engine.variable.setString('lastName', 'Doe');
+    engine.variable.setString('companyName', 'IMG.LY');
+
+    // Create heading with company variable
+    const headingText = engine.block.create('text');
+    engine.block.replaceText(
+      headingText,
+      'Welcome to {{companyName}}, {{firstName}} {{lastName}}.'
+    );
+    engine.block.setWidth(headingText, contentWidth);
+    engine.block.setHeightMode(headingText, 'Auto');
+    engine.block.setFloat(headingText, 'text/fontSize', 64);
+    engine.block.setEnum(headingText, 'text/horizontalAlignment', 'Left');
+    engine.block.appendChild(page, headingText);
+    engine.block.setPositionX(headingText, contentX);
+    engine.block.setPositionY(headingText, 200);
+
+    // Create description with bullet points
+    const descriptionText = engine.block.create('text');
+    engine.block.replaceText(
+      descriptionText,
+      'This example demonstrates dynamic templates.\n\n' +
+        '• Text Variables — Personalize content with {{tokens}}\n' +
+        '• Placeholders — Swappable images and media\n' +
+        '• Editing Constraints — Protected brand elements'
+    );
+    engine.block.setWidth(descriptionText, contentWidth);
+    engine.block.setHeightMode(descriptionText, 'Auto');
+    engine.block.setFloat(descriptionText, 'text/fontSize', 44);
+    engine.block.setEnum(descriptionText, 'text/horizontalAlignment', 'Left');
+    engine.block.appendChild(page, descriptionText);
+    engine.block.setPositionX(descriptionText, contentX);
+    engine.block.setPositionY(descriptionText, 300);
+
+    // Discover all variables in the scene
+    const allVariables = engine.variable.findAll();
+    console.log('Variables in scene:', allVariables);
+
+    // PLACEHOLDERS: Create hero image as a swappable drop zone
+    const heroImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_1.jpg',
+      { size: { width: contentWidth, height: 140 } }
+    );
+    engine.block.appendChild(page, heroImage);
+    engine.block.setPositionX(heroImage, contentX);
+    engine.block.setPositionY(heroImage, 40);
+
+    // Enable placeholder behavior for the hero image
+    if (engine.block.supportsPlaceholderBehavior(heroImage)) {
+      engine.block.setPlaceholderBehaviorEnabled(heroImage, true);
+      engine.block.setPlaceholderEnabled(heroImage, true);
+
+      if (engine.block.supportsPlaceholderControls(heroImage)) {
+        engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true);
+        engine.block.setPlaceholderControlsButtonEnabled(heroImage, true);
+      }
+    }
+
+    // Find all placeholders in the scene
+    const placeholders = engine.block.findAllPlaceholders();
+    console.log('Placeholders in scene:', placeholders.length);
+
+    // EDITING CONSTRAINTS: Add logo that cannot be moved or selected
+    const logo = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/imgly_logo.jpg',
+      { size: { width: 100, height: 25 } }
+    );
+    engine.block.appendChild(page, logo);
+    engine.block.setPositionX(logo, 350);
+    engine.block.setPositionY(logo, 540);
+
+    // Lock the logo: prevent moving, resizing, and selection
+    engine.block.setScopeEnabled(logo, 'layer/move', false);
+    engine.block.setScopeEnabled(logo, 'layer/resize', false);
+    engine.block.setScopeEnabled(logo, 'editor/select', false);
+
+    // Verify constraints are applied
+    const canSelect = engine.block.isScopeEnabled(logo, 'editor/select');
+    const canMove = engine.block.isScopeEnabled(logo, 'layer/move');
+    console.log('Logo - canSelect:', canSelect, 'canMove:', canMove);
+
+    // Zoom to fit the page with autoFit enabled
+    await cesdk.actions.run('zoom.toBlock', page, {
+      padding: 40,
+      animate: false,
+      autoFit: true
+    });
+
+    console.log('Dynamic Content demo initialized.');
+
+    cesdk.engine.block.setSelected(page, false);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to use dynamic content capabilities in CE.SDK templates. The example creates a social media card with personalized name and company variables, a replaceable hero image, and a protected logo.
+
+## Dynamic Content Capabilities
+
+CE.SDK offers three ways to make templates dynamic:
+
+- **Text Variables** — Insert `{{tokens}}` in text that resolve to dynamic values at runtime
+- **Placeholders** — Mark blocks as drop zones where users can swap images or videos
+- **Editing Constraints** — Lock specific properties to protect brand elements while allowing controlled changes
+
+## Text Variables
+
+Text variables enable data-driven text personalization. Define variables using `engine.variable.setString()`, then reference them in text blocks with `{{variableName}}` tokens.
+
+```typescript highlight-text-variables
+engine.variable.setString('firstName', 'Jane');
+engine.variable.setString('lastName', 'Doe');
+engine.variable.setString('companyName', 'IMG.LY');
+
+// Create heading with company variable
+const headingText = engine.block.create('text');
+engine.block.replaceText(
+  headingText,
+  'Welcome to {{companyName}}, {{firstName}} {{lastName}}.'
+);
+```
+
+Variables are defined globally and can be referenced in any text block. The `findAll()` method returns all variable keys in the scene, useful for building dynamic editing interfaces.
+
+> **Note:** Variable keys are case-sensitive. `{{Name}}` and `{{name}}` are different variables.
+
+## Placeholders
+
+Placeholders turn design blocks into drop zones for swappable media. Mark an image block as a placeholder, and users can replace its content while the surrounding design remains fixed.
+
+```typescript highlight-placeholders
+// Enable placeholder behavior for the hero image
+if (engine.block.supportsPlaceholderBehavior(heroImage)) {
+  engine.block.setPlaceholderBehaviorEnabled(heroImage, true);
+  engine.block.setPlaceholderEnabled(heroImage, true);
+
+  if (engine.block.supportsPlaceholderControls(heroImage)) {
+    engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true);
+    engine.block.setPlaceholderControlsButtonEnabled(heroImage, true);
+  }
+}
+```
+
+Enable placeholder behavior with `setPlaceholderBehaviorEnabled()`, then enable user interaction with `setPlaceholderEnabled()`. The visual overlay and replace button are controlled separately via `setPlaceholderControlsOverlayEnabled()` and `setPlaceholderControlsButtonEnabled()`.
+
+## Editing Constraints
+
+Editing constraints protect design integrity by limiting what users can modify. Use scope-based APIs to lock specific properties while keeping others editable.
+
+```typescript highlight-editing-constraints
+// Lock the logo: prevent moving, resizing, and selection
+engine.block.setScopeEnabled(logo, 'layer/move', false);
+engine.block.setScopeEnabled(logo, 'layer/resize', false);
+engine.block.setScopeEnabled(logo, 'editor/select', false);
+
+// Verify constraints are applied
+const canSelect = engine.block.isScopeEnabled(logo, 'editor/select');
+const canMove = engine.block.isScopeEnabled(logo, 'layer/move');
+console.log('Logo - canSelect:', canSelect, 'canMove:', canMove);
+```
+
+The `setScopeEnabled()` method controls individual properties. Setting `'editor/select'` to `false` prevents users from selecting the block entirely, making it completely non-interactive. Combined with `'layer/move'` and `'layer/resize'`, this creates a fully protected element.
+
+## Choosing the Right Capability
+
+| Need                     | Capability          |
+| ------------------------ | ------------------- |
+| Dynamic text content     | Text Variables      |
+| Swappable images/videos  | Placeholders        |
+| Lock specific properties | Editing Constraints |
+
+## API Reference
+
+| Method                                         | Description                              |
+| ---------------------------------------------- | ---------------------------------------- |
+| `engine.editor.setRole()`                      | Set user role (Creator, Adopter, Viewer) |
+| `engine.variable.findAll()`                    | Get all variable keys in the scene       |
+| `engine.variable.setString()`                  | Create or update a text variable         |
+| `engine.variable.getString()`                  | Read a variable's current value          |
+| `engine.block.supportsPlaceholderBehavior()`   | Check placeholder support                |
+| `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior              |
+| `engine.block.setPlaceholderEnabled()`         | Enable user interaction                  |
+| `engine.block.findAllPlaceholders()`           | Find all placeholder blocks              |
+| `engine.block.setScopeEnabled()`               | Enable or disable editing scope          |
+| `engine.block.isScopeEnabled()`                | Query scope state                        |
+
+---
+
+## Related Pages
+
+- [Text Variables](./create-templates/add-dynamic-content/text-variables.md) - Define dynamic text elements that can be populated with custom values during design generation.
+- [Placeholders](./create-templates/add-dynamic-content/placeholders.md) - Use placeholders to mark editable image, video, or text areas within a locked template layout.
+- [Set Editing Constraints](./create-templates/add-dynamic-content/set-editing-constraints.md) - Learn how to control editing capabilities in CE.SDK templates using the Scope system to lock positions, prevent transformations, and create guided editing experiences
+
+---
+
+## 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/create-templates/add-to-template-library.md

@@ -0,0 +1,297 @@
+> 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 Use Templates](./create-templates.md) > [Add to Template Library](./create-templates/add-to-template-library.md)
+
+---
+
+Create a template library where users can browse, preview, and apply templates from a custom asset source.
+
+![Add to Template Library](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-create-templates-add-to-template-library-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-add-to-template-library-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-to-template-library-browser/)
+
+Templates in CE.SDK are stored and accessed through the asset system. A template library is a local asset source configured to hold and serve template assets, allowing users to browse thumbnails and apply templates to their designs.
+
+```typescript file=@cesdk_web_examples/guides-create-templates-add-to-template-library-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 to Template Library
+ *
+ * This example demonstrates how to create a template library by:
+ * 1. Creating a local asset source for templates
+ * 2. Adding templates with metadata (label, thumbnail, URI)
+ * 3. Configuring the UI to display the template library
+ * 4. Saving scenes as templates
+ */
+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 local asset source for templates
+    engine.asset.addLocalSource('my-templates', undefined, async (asset) => {
+      // Apply the selected template to the current scene
+      await engine.scene.applyTemplateFromURL(asset.meta!.uri as string);
+      // Set zoom to auto-fit after applying template
+      await cesdk.actions.run('zoom.toPage', { autoFit: true });
+      return undefined;
+    });
+
+    // Add a template to the source with metadata
+    engine.asset.addAssetToSource('my-templates', {
+      id: 'template-postcard',
+      label: { en: 'Postcard' },
+      meta: {
+        uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene',
+        thumbUri:
+          'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg'
+      }
+    });
+
+    // Add more templates
+    engine.asset.addAssetToSource('my-templates', {
+      id: 'template-business-card',
+      label: { en: 'Business Card' },
+      meta: {
+        uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_business_card_1.scene',
+        thumbUri:
+          'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_business_card_1.jpg'
+      }
+    });
+
+    engine.asset.addAssetToSource('my-templates', {
+      id: 'template-social-media',
+      label: { en: 'Social Media Post' },
+      meta: {
+        uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_post_1.scene',
+        thumbUri:
+          'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_instagram_post_1.jpg'
+      }
+    });
+
+    // Add translation for the library entry
+    cesdk.i18n.setTranslations({
+      en: { 'libraries.my-templates-entry.label': 'My Templates' }
+    });
+
+    // Add the template source to the asset library
+    cesdk.ui.addAssetLibraryEntry({
+      id: 'my-templates-entry',
+      sourceIds: ['my-templates'],
+      previewLength: 3,
+      previewBackgroundType: 'cover',
+      gridBackgroundType: 'cover',
+      gridColumns: 2,
+      cardLabelPosition: () => 'below'
+    });
+
+    // Add template library to the dock
+    cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
+      ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }),
+      'ly.img.spacer',
+      {
+        id: 'ly.img.assetLibrary.dock',
+        key: 'my-templates-dock',
+        label: 'My Templates',
+        icon: '@imgly/Template',
+        entries: ['my-templates-entry']
+      }
+    ]);
+
+    // Load the first template
+    await engine.scene.loadFromURL(
+      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+    );
+
+    // Set zoom to auto-fit
+    await cesdk.actions.run('zoom.toPage', { autoFit: true });
+
+    // Open the template library panel by default
+    cesdk.ui.openPanel('//ly.img.panel/assetLibrary', {
+      payload: { entries: ['my-templates-entry'] }
+    });
+
+    // Save as string format (lightweight, references remote assets)
+    const templateString = await engine.scene.saveToString();
+    console.log('Template saved as string. Length:', templateString.length);
+
+    // Save as archive format (self-contained with bundled assets)
+    const templateBlob = await engine.scene.saveToArchive();
+    console.log('Template saved as archive. Size:', templateBlob.size, 'bytes');
+
+    // List all registered asset sources
+    const sources = engine.asset.findAllSources();
+    console.log('Registered sources:', sources);
+
+    // Notify UI when source contents change
+    engine.asset.assetSourceContentsChanged('my-templates');
+
+    // Query templates from the source
+    const queryResult = await engine.asset.findAssets('my-templates', {
+      page: 0,
+      perPage: 10
+    });
+    console.log('Templates in library:', queryResult.total);
+
+    // Remove a template from the source
+    engine.asset.removeAssetFromSource('my-templates', 'template-social-media');
+    console.log('Removed template-social-media from library');
+
+    cesdk.ui.insertOrderComponent(
+      { in: 'ly.img.navigation.bar', position: 'end' },
+      {
+        id: 'ly.img.actions.navigationBar',
+        children: [
+          'ly.img.saveScene.navigationBar',
+          'ly.img.exportArchive.navigationBar'
+        ]
+      }
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to save scenes as templates, create a template asset source, and add templates with metadata.
+
+## Saving Templates
+
+Scenes can be exported in two formats for use as templates.
+
+### String Format
+
+Use `engine.scene.saveToString()` to serialize the scene to a base64 string. This lightweight format references remote assets by URL and is ideal for templates where assets are hosted on a CDN.
+
+```typescript highlight=highlight-save-string
+// Save as string format (lightweight, references remote assets)
+const templateString = await engine.scene.saveToString();
+console.log('Template saved as string. Length:', templateString.length);
+```
+
+### Archive Format
+
+For self-contained templates that bundle all assets, use `engine.scene.saveToArchive()`. This returns a Blob containing all assets bundled together, making templates portable without external dependencies.
+
+```typescript highlight=highlight-save-archive
+// Save as archive format (self-contained with bundled assets)
+const templateBlob = await engine.scene.saveToArchive();
+console.log('Template saved as archive. Size:', templateBlob.size, 'bytes');
+```
+
+## Creating a Template Asset Source
+
+Register a local asset source using `engine.asset.addLocalSource()` with an ID and `applyAsset` callback.
+
+```typescript highlight=highlight-create-source
+// Create a local asset source for templates
+engine.asset.addLocalSource('my-templates', undefined, async (asset) => {
+  // Apply the selected template to the current scene
+  await engine.scene.applyTemplateFromURL(asset.meta!.uri as string);
+  // Set zoom to auto-fit after applying template
+  await cesdk.actions.run('zoom.toPage', { autoFit: true });
+  return undefined;
+});
+```
+
+The `applyAsset` callback receives the selected asset and determines how to apply it. We use `engine.scene.applyTemplateFromURL()` to load the template from the asset's `meta.uri` property. The template is applied to the current scene, adjusting content to fit the existing page dimensions.
+
+## Adding Templates to the Source
+
+Register templates using `engine.asset.addAssetToSource()` with an asset definition that includes metadata for display and loading.
+
+```typescript highlight=highlight-add-templates
+// Add a template to the source with metadata
+engine.asset.addAssetToSource('my-templates', {
+  id: 'template-postcard',
+  label: { en: 'Postcard' },
+  meta: {
+    uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene',
+    thumbUri:
+      'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg'
+  }
+});
+```
+
+Each template asset requires:
+
+- `id` - Unique identifier for the template
+- `label` - Localized display name shown in the template library
+- `meta.uri` - URL to the `.scene` file that will be loaded when the template is selected
+- `meta.thumbUri` - URL to a preview image displayed in the template library grid
+
+## Managing Templates
+
+After the initial setup, you can manage templates programmatically.
+
+```typescript highlight=highlight-manage-templates
+// List all registered asset sources
+const sources = engine.asset.findAllSources();
+console.log('Registered sources:', sources);
+
+// Notify UI when source contents change
+engine.asset.assetSourceContentsChanged('my-templates');
+
+// Query templates from the source
+const queryResult = await engine.asset.findAssets('my-templates', {
+  page: 0,
+  perPage: 10
+});
+console.log('Templates in library:', queryResult.total);
+
+// Remove a template from the source
+engine.asset.removeAssetFromSource('my-templates', 'template-social-media');
+console.log('Removed template-social-media from library');
+```
+
+Use `engine.asset.findAllSources()` to list registered sources. When you add or remove templates from a source, call `engine.asset.assetSourceContentsChanged()` to refresh the UI. To remove a template, use `engine.asset.removeAssetFromSource()`.
+
+## Troubleshooting
+
+| Issue                         | Cause                                        | Solution                                           |
+| ----------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| Templates not appearing in UI | Asset source not added to library entry      | Ensure `sourceIds` includes the template source ID |
+| Template fails to load        | Incorrect URI in asset meta                  | Verify the `uri` points to a valid `.scene` file   |
+| Thumbnails not displaying     | Missing or incorrect `thumbUri`              | Check the thumbnail URL is accessible              |
+| Apply callback not triggered  | `applyAsset` not defined in `addLocalSource` | Provide the callback when creating the source      |
+
+## API Reference
+
+| Method                                      | Description                                          |
+| ------------------------------------------- | ---------------------------------------------------- |
+| `engine.asset.addLocalSource()`             | Register a local asset source with an apply callback |
+| `engine.asset.addAssetToSource()`           | Add an asset to a registered source                  |
+| `engine.asset.removeAssetFromSource()`      | Remove an asset from a source by ID                  |
+| `engine.asset.assetSourceContentsChanged()` | Notify UI that source contents changed               |
+| `engine.scene.saveToString()`               | Serialize scene to base64 string format              |
+| `engine.scene.saveToArchive()`              | Save scene as self-contained archive blob            |
+| `engine.scene.applyTemplateFromURL()`       | Apply a template to the current scene                |
+| `cesdk.ui.addAssetLibraryEntry()`           | Add a library entry to the asset library             |
+
+---
+
+## 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