@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-templates/import/from-scene-file.md

@@ -0,0 +1,440 @@
+> 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) > [Import Templates](./create-templates/import.md) > [From Scene File](./create-templates/import/from-scene-file.md)
+
+---
+
+CE.SDK lets you load complete design templates from scene files to start projects from pre-designed templates, implement template galleries, and build template management systems.
+
+![Import Templates from Scene Files example showing CE.SDK interface with loaded template](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-import-from-scene-file-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-from-scene-file-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-from-scene-file-browser/)
+
+Scene files are portable design templates that preserve the entire design structure including blocks, assets, styles, and layout.
+
+```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-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: Import Templates from Scene Files
+ *
+ * This example demonstrates:
+ * - Loading scenes from .scene file URLs
+ * - Loading scenes from .archive (ZIP) URLs
+ * - Applying templates while preserving page dimensions
+ * - Understanding the difference between loading and applying 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());
+    // 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;
+
+    // ===== Example: Load Scene from Archive URL =====
+    // This is the recommended approach for loading complete templates
+    // with all their assets embedded in a ZIP file
+
+    // Load a complete template from an archive (ZIP) file
+    // This loads both the scene structure and all embedded assets
+    await engine.scene.loadFromArchiveURL(
+      'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'
+    );
+
+    // Alternative: Load scene from URL (.scene file)
+    // This loads only the scene structure - assets must be accessible via URLs
+    // Uncomment to try:
+    // await engine.scene.loadFromURL(
+    //   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+    // );
+
+    // Alternative: Apply template while preserving current page dimensions
+    // This is useful when you want to load template content into an existing scene
+    // with specific dimensions
+    // Uncomment to try:
+    // // First create a scene with specific dimensions
+    // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } });
+    // const page = engine.block.findByType('page')[0];
+    //
+    // // Now apply template - content will be adjusted to fit
+    // await engine.scene.applyTemplateFromURL(
+    //   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene'
+    // );
+
+    // Get the loaded scene
+    const scene = engine.scene.get();
+    if (scene) {
+      // eslint-disable-next-line no-console
+      console.log('Scene loaded successfully:', scene);
+
+      // Get information about the loaded scene
+      const pages = engine.scene.getPages();
+      // eslint-disable-next-line no-console
+      console.log(`Scene has ${pages.length} page(s)`);
+
+      // Get design unit
+      const designUnit = engine.scene.getDesignUnit();
+      // eslint-disable-next-line no-console
+      console.log('Design unit:', designUnit);
+    }
+
+    // Zoom to fit the loaded content
+    if (scene) {
+      await engine.scene.zoomToBlock(scene, {
+        padding: 40
+      });
+    }
+  }
+}
+
+export default Example;
+```
+
+This guide covers loading scenes from archives, loading from URLs, applying templates while preserving dimensions, and understanding scene file formats.
+
+## Scene File Formats
+
+CE.SDK supports two scene file formats for importing templates:
+
+### Scene Format (.scene)
+
+Scene files are JSON-based representations of design structures. They reference external assets via URLs, making them lightweight and suitable for database storage. However, the referenced assets must remain accessible at their URLs.
+
+**When to use:**
+
+- Templates stored in databases
+- Templates with hosted assets
+- Lightweight transmission
+
+### Archive Format (.archive or .zip)
+
+Archive files are self-contained packages that bundle the scene structure with all referenced assets in a ZIP file. This makes them portable and suitable for offline use.
+
+**When to use:**
+
+- Template distribution
+- Offline-capable templates
+- Complete portability
+- **Recommended for most use cases**
+
+## Load Scene from Archive
+
+The most common way to load templates is from archive URLs. This method loads both the scene structure and all embedded assets:
+
+```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-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: Import Templates from Scene Files
+ *
+ * This example demonstrates:
+ * - Loading scenes from .scene file URLs
+ * - Loading scenes from .archive (ZIP) URLs
+ * - Applying templates while preserving page dimensions
+ * - Understanding the difference between loading and applying 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());
+    // 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;
+
+    // ===== Example: Load Scene from Archive URL =====
+    // This is the recommended approach for loading complete templates
+    // with all their assets embedded in a ZIP file
+
+    // Load a complete template from an archive (ZIP) file
+    // This loads both the scene structure and all embedded assets
+    await engine.scene.loadFromArchiveURL(
+      'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'
+    );
+
+    // Alternative: Load scene from URL (.scene file)
+    // This loads only the scene structure - assets must be accessible via URLs
+    // Uncomment to try:
+    // await engine.scene.loadFromURL(
+    //   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+    // );
+
+    // Alternative: Apply template while preserving current page dimensions
+    // This is useful when you want to load template content into an existing scene
+    // with specific dimensions
+    // Uncomment to try:
+    // // First create a scene with specific dimensions
+    // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } });
+    // const page = engine.block.findByType('page')[0];
+    //
+    // // Now apply template - content will be adjusted to fit
+    // await engine.scene.applyTemplateFromURL(
+    //   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene'
+    // );
+
+    // Get the loaded scene
+    const scene = engine.scene.get();
+    if (scene) {
+      // eslint-disable-next-line no-console
+      console.log('Scene loaded successfully:', scene);
+
+      // Get information about the loaded scene
+      const pages = engine.scene.getPages();
+      // eslint-disable-next-line no-console
+      console.log(`Scene has ${pages.length} page(s)`);
+
+      // Get design unit
+      const designUnit = engine.scene.getDesignUnit();
+      // eslint-disable-next-line no-console
+      console.log('Design unit:', designUnit);
+    }
+
+    // Zoom to fit the loaded content
+    if (scene) {
+      await engine.scene.zoomToBlock(scene, {
+        padding: 40
+      });
+    }
+  }
+}
+
+export default Example;
+```
+
+```typescript highlight-load-from-archive
+// Load a complete template from an archive (ZIP) file
+// This loads both the scene structure and all embedded assets
+await engine.scene.loadFromArchiveURL(
+  'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'
+);
+```
+
+When you load from an archive:
+
+- The ZIP file is fetched and extracted
+- All assets are registered with CE.SDK
+- The scene structure is loaded
+- Asset paths are automatically resolved
+
+## Load Scene from URL
+
+You can also load scenes directly from .scene file URLs. This approach requires that all referenced assets remain accessible at their original URLs:
+
+```typescript highlight-load-from-url
+// await engine.scene.loadFromURL(
+//   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+// );
+```
+
+**Important:** With this method, if asset URLs become unavailable (404 errors, CORS issues, etc.), those assets won't load and your template may appear incomplete.
+
+## Apply Template vs Load Scene
+
+CE.SDK provides two approaches for working with templates, each serving different purposes:
+
+### Load Scene
+
+When you use `loadFromURL()` or `loadFromArchiveURL()`, CE.SDK:
+
+- Replaces the entire current scene
+- Adopts the template's page dimensions
+- Loads all content as-is
+
+This is appropriate when starting a new project from a template.
+
+### Apply Template
+
+When you use `applyTemplateFromURL()` or `applyTemplateFromString()`, CE.SDK:
+
+- Keeps your current page dimensions
+- Adjusts template content to fit
+- Preserves your scene structure
+
+This is useful when you want to load template content into an existing scene with specific dimensions:
+
+```typescript highlight-apply-template
+// // First create a scene with specific dimensions
+// await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } });
+// const page = engine.block.findByType('page')[0];
+//
+// // Now apply template - content will be adjusted to fit
+// await engine.scene.applyTemplateFromURL(
+//   'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene'
+// );
+```
+
+## Error Handling
+
+When loading templates, several issues can occur:
+
+### Network Errors
+
+Template URLs might be unreachable:
+
+```typescript
+try {
+  await engine.scene.loadFromArchiveURL(templateUrl);
+} catch (error) {
+  console.error('Failed to load template:', error);
+  // Show error message to user
+  // Fall back to default template or empty scene
+}
+```
+
+### Invalid Scene Format
+
+The file might not be a valid scene:
+
+```typescript
+try {
+  await engine.scene.loadFromURL(sceneUrl);
+} catch (error) {
+  if (error.message.includes('parse')) {
+    console.error('Invalid scene file format');
+  }
+}
+```
+
+### Missing Assets
+
+For .scene files, referenced assets might be unavailable. The scene loads but assets appear missing. Consider using archives to avoid this issue.
+
+## Performance Considerations
+
+### Loading Time
+
+Archive size directly impacts loading time:
+
+- Small archives (\< 1MB): Nearly instant
+- Medium archives (1-5MB): 1-2 seconds
+- Large archives (> 5MB): Several seconds
+
+Show loading indicators for better user experience.
+
+## CORS Considerations
+
+When loading templates from external URLs, ensure proper CORS headers are set on the server hosting the files. Archives must be accessible with appropriate CORS policies.
+
+## API Reference
+
+| Method                                | Description                                         |
+| ------------------------------------- | --------------------------------------------------- |
+| `engine.scene.loadFromArchiveURL()`   | Loads a complete scene from an archive (ZIP) file   |
+| `engine.scene.loadFromURL()`          | Loads a scene from a .scene file URL                |
+| `engine.scene.applyTemplateFromURL()` | Applies a template while preserving page dimensions |
+| `engine.scene.get()`                  | Returns the current scene block ID                  |
+| `engine.scene.getPages()`             | Returns all page IDs in the scene                   |
+| `engine.scene.getDesignUnit()`        | Returns the measurement unit                        |
+| `engine.scene.zoomToBlock()`          | Zooms the viewport to fit a specific block          |
+
+---
+
+## 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/import.md

@@ -0,0 +1,244 @@
+> 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) > [Import Templates](./create-templates/import.md)
+
+---
+
+Load design templates into CE.SDK from archive URLs, scene URLs, and serialized strings.
+
+![Import Templates](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-create-templates-import-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-browser/)
+
+Templates are pre-designed scenes that provide starting points for user projects. CE.SDK supports loading templates from archive URLs with bundled assets, remote scene URLs, or serialized strings stored in databases.
+
+```typescript file=@cesdk_web_examples/guides-create-templates-import-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';
+
+// Import scene file as string for loadFromString demonstration
+import businessCardSceneString from './assets/business-card.scene?raw';
+
+// Template sources
+const fashionAdArchiveUrl =
+  'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip';
+
+const postcardSceneUrl =
+  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+
+/**
+ * CE.SDK Plugin: Import Templates
+ *
+ * Demonstrates loading templates from different sources:
+ * - Archive URLs (.zip files with bundled assets)
+ * - Scene URLs (.scene files)
+ * - Serialized strings (imported scene content)
+ */
+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;
+
+    // Load template from a scene file URL
+    await engine.scene.loadFromURL(postcardSceneUrl);
+
+    // Zoom viewport to fit the loaded scene
+    const scene = engine.scene.get();
+    if (scene != null) {
+      await engine.scene.zoomToBlock(scene, { padding: 40 });
+    }
+
+    // Verify the loaded scene
+    const loadedScene = engine.scene.get();
+    if (loadedScene != null) {
+      const pages = engine.scene.getPages();
+      // eslint-disable-next-line no-console
+      console.log(`Template loaded with ${pages.length} page(s)`);
+    }
+
+    // Configure navigation bar with template loading buttons
+    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
+      'ly.img.undoRedo.navigationBar',
+      'ly.img.spacer',
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'load-archive',
+        label: 'Import Archive',
+        icon: '@imgly/Download',
+        variant: 'regular',
+        onClick: async () => {
+          // Load template from archive URL (bundled assets)
+          await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl);
+          const s = engine.scene.get();
+          if (s != null) {
+            await engine.scene.zoomToBlock(s, { padding: 40 });
+          }
+        }
+      },
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'load-url',
+        label: 'Import URL',
+        icon: '@imgly/Download',
+        variant: 'regular',
+        onClick: async () => {
+          // Load template from scene URL
+          await engine.scene.loadFromURL(postcardSceneUrl);
+          const s = engine.scene.get();
+          if (s != null) {
+            await engine.scene.zoomToBlock(s, { padding: 40 });
+          }
+        }
+      },
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'load-string',
+        label: 'Import String',
+        icon: '@imgly/Download',
+        variant: 'regular',
+        onClick: async () => {
+          // Load template from serialized string
+          await engine.scene.loadFromString(businessCardSceneString);
+          const s = engine.scene.get();
+          if (s != null) {
+            await engine.scene.zoomToBlock(s, { padding: 40 });
+          }
+        }
+      }
+    ]);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to load templates from archives, URLs, and strings, and work with the loaded content.
+
+## Load from Archive
+
+Load a template from an archive URL using `loadFromArchiveURL()`. Archives are `.zip` files that bundle the scene with all its assets, making them portable and self-contained.
+
+```typescript highlight=highlight-load-from-archive
+// Load template from archive URL (bundled assets)
+await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl);
+```
+
+## Load from URL
+
+Load a template from a remote `.scene` file URL using `loadFromURL()`. The scene file is a JSON-based format that references assets via URLs.
+
+```typescript highlight=highlight-load-from-url
+// Load template from a scene file URL
+await engine.scene.loadFromURL(postcardSceneUrl);
+```
+
+## Load from String
+
+For templates stored in databases or received from APIs, load from a serialized string using `loadFromString()`. This method works with content previously saved using `engine.scene.saveToString()`.
+
+```typescript highlight=highlight-load-from-string
+// Load template from serialized string
+await engine.scene.loadFromString(businessCardSceneString);
+```
+
+## Working with the Loaded Scene
+
+After loading a template, you can verify its contents and adjust the viewport.
+
+### Verify the Scene
+
+Use `engine.scene.get()` to retrieve the scene block and `engine.scene.getPages()` to inspect its pages.
+
+```typescript highlight=highlight-get-scene
+// Verify the loaded scene
+const loadedScene = engine.scene.get();
+if (loadedScene != null) {
+  const pages = engine.scene.getPages();
+  // eslint-disable-next-line no-console
+  console.log(`Template loaded with ${pages.length} page(s)`);
+}
+```
+
+### Zoom to Content
+
+Fit the loaded template in the viewport using `zoomToBlock()` with optional padding.
+
+```typescript highlight=highlight-zoom-to-scene
+// Zoom viewport to fit the loaded scene
+const scene = engine.scene.get();
+if (scene != null) {
+  await engine.scene.zoomToBlock(scene, { padding: 40 });
+}
+```
+
+---
+
+## Related Pages
+
+- [Import Templates from Scene Files](./create-templates/import/from-scene-file.md) - Load and import templates from scene files in CE.SDK for web applications
+
+---
+
+## 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