@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,4 +1,4 @@
-> 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).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.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)
 
@@ -6,97 +6,99 @@
 
 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/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-open-the-editor-from-template-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-from-template-server-js)
 
 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());
+```typescript file=@cesdk_web_examples/guides-open-the-editor-from-template-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync, readFileSync } from 'fs';
+import { createInterface } from 'readline';
+import { config } from 'dotenv';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+// Load environment variables
+config();
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function promptUser(question: string): Promise<boolean> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
 
-    if (cesdk == null) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
-    const engine = cesdk.engine;
+  try {
     const templateUrl =
       'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
     await engine.scene.loadFromURL(templateUrl);
 
+    console.log('Template loaded successfully.');
+
+    // Load scene from string (file read)
+    const sceneFilePath = join(__dirname, 'assets', 'business-card.scene');
+    const sceneString = readFileSync(sceneFilePath, 'utf-8');
+    await engine.scene.loadFromString(sceneString);
+
+    console.log('Scene loaded from string.');
+
     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]);
-    }
+    const shouldExport = await promptUser(
+      'Export the template to PNG? (y/n): '
+    );
+    if (shouldExport) {
+      const outputDir = './output';
+      if (!existsSync(outputDir)) {
+        mkdirSync(outputDir, { recursive: true });
+      }
 
-    // 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 });
-              }
-            }
-          }
-        ]
+      const pages = engine.block.findByType('page');
+      if (pages.length > 0) {
+        const blob = await engine.block.export(pages[0], {
+          mimeType: 'image/png'
+        });
+        const buffer = Buffer.from(await blob.arrayBuffer());
+        writeFileSync(`${outputDir}/template-result.png`, buffer);
+        console.log('Exported template to output/template-result.png');
       }
-    );
+    } else {
+      console.log('Export skipped.');
+    }
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
-This guide covers how to load templates from URLs and strings, and how to apply templates to existing scenes.
+This guide covers how to load templates from URLs and strings, modify content, and export the result.
 
 ## Load a Template from URL
 
@@ -108,27 +110,17 @@ const templateUrl =
 await engine.scene.loadFromURL(templateUrl);
 ```
 
-The template URL should point to a valid `.scene` file hosted on a server with appropriate CORS headers.
+The template URL should point to a valid `.scene` file hosted on a server.
 
 ## 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.
+When templates are stored in a database or file system, use `engine.scene.loadFromString()`. This accepts the scene data as a string.
 
 ```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);
+await engine.scene.loadFromString(sceneString);
 ```
 
-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.
+This approach is useful for loading templates from your backend storage, restoring saved user designs, or working with templates stored in databases.
 
 ## Modify Template Content
 
@@ -147,13 +139,58 @@ Common modifications include:
 - **Swapping images**: `engine.block.setString(fill, 'fill/image/imageFileURI', newUrl)`
 - **Adjusting colors**: `engine.block.setColor(blockId, 'fill/solid/color', newColor)`
 
+## Export with User Confirmation
+
+For interactive CLI applications, prompt the user before exporting the result.
+
+```typescript highlight-prompt-helper
+async function promptUser(question: string): Promise<boolean> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
+```
+
+Then use the prompt to confirm export:
+
+```typescript highlight-export-with-prompt
+    const shouldExport = await promptUser(
+      'Export the template to PNG? (y/n): '
+    );
+    if (shouldExport) {
+      const outputDir = './output';
+      if (!existsSync(outputDir)) {
+        mkdirSync(outputDir, { recursive: true });
+      }
+
+      const pages = engine.block.findByType('page');
+      if (pages.length > 0) {
+        const blob = await engine.block.export(pages[0], {
+          mimeType: 'image/png'
+        });
+        const buffer = Buffer.from(await blob.arrayBuffer());
+        writeFileSync(`${outputDir}/template-result.png`, buffer);
+        console.log('Exported template to output/template-result.png');
+      }
+    } else {
+      console.log('Export skipped.');
+    }
+```
+
 ## 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
+- Check network connectivity from your server
 
 ### Assets Not Displaying After Load
 
@@ -163,15 +200,15 @@ Common modifications include:
 
 ## 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    |
+| 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         |
+| `engine.block.findByType()` | Find blocks by type |
+| `engine.block.replaceText()` | Replace text content in a text block |
+| `engine.block.export()` | Export a block to image or PDF |
 
 ## Next Steps
 
@@ -179,11 +216,13 @@ Common modifications include:
 - [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
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js 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
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support