@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/create-composition/lock-design.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) > [Create and Edit Compositions](./create-composition.md) > [Lock Design](./create-composition/lock-design.md)
 
@@ -6,82 +6,36 @@
 
 Protect design elements from unwanted modifications using CE.SDK's scope-based permission system.
 
-![Lock Design Hero](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-composition-lock-design-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-lock-design-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-lock-design-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-lock-design-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-lock-design-server-js)
 
 CE.SDK uses a two-layer scope system to control editing permissions. Global scopes set defaults for the entire scene, while block-level scopes override when the global setting is `Defer`. This enables flexible permission models from fully locked to selectively editable designs.
 
-```typescript file=@cesdk_web_examples/guides-create-composition-lock-design-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext, Scope } from '@cesdk/cesdk-js';
-import packageJson from './package.json';
-
-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';
-
-class LockDesign 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' }
-    });
+```typescript file=@cesdk_web_examples/guides-create-composition-lock-design-server-js/server-js.ts reference-only
+import CreativeEngine, { type Scope } from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
 
-    const engine = cesdk.engine;
+config(); // Load .env file
+
+async function lockDesignExample() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE,
+  });
+
+  try {
+    // Create scene with page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
+    });
     const page = engine.block.findByType('page')[0]!;
 
     // Create sample content to demonstrate different locking techniques
@@ -191,19 +145,31 @@ class LockDesign implements EditorPlugin {
     const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit');
     console.log('Text block text/edit enabled:', textEditEnabled); // true
 
-    // Select the text block to demonstrate editability
-    engine.block.select(textBlock);
+    // Export the scene to demonstrate the design
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+
+    // Ensure output directory exists
+    if (!existsSync('./output')) {
+      mkdirSync('./output', { recursive: true });
+    }
+
+    writeFileSync('./output/locked-design.png', buffer);
+    console.log('Design exported to ./output/locked-design.png');
+
+  } finally {
+    engine.dispose();
   }
 }
 
-export default LockDesign;
+lockDesignExample().catch(console.error);
 ```
 
-This guide covers how to lock entire designs, selectively enable specific editing capabilities, and check permissions programmatically.
+This guide covers how to lock entire designs, selectively enable specific editing capabilities, and check permissions programmatically in a server environment.
 
 ## Understanding the Scope Permission Model
 
-Scopes control what operations users can perform on design elements. CE.SDK combines global scope settings with block-level settings to determine the final permission.
+Scopes control what operations can be performed on design elements. CE.SDK combines global scope settings with block-level settings to determine the final permission.
 
 | Global Scope | Block Scope | Result    |
 | ------------ | ----------- | --------- |
@@ -232,11 +198,11 @@ for (const scope of scopes) {
 }
 ```
 
-When all scopes are set to `Deny`, users cannot modify any aspect of the design. This includes selecting, moving, editing text, or changing any visual properties.
+When all scopes are set to `Deny`, any operations on the design would be blocked. This is useful for creating protected templates that users cannot modify.
 
 ## Enabling Selection for Interactive Blocks
 
-Before users can interact with any block, you must enable the `editor/select` scope. Without selection, users cannot click on or access any blocks, even if other editing capabilities are enabled.
+Before users can interact with any block through an application, you must enable the `editor/select` scope. Without selection enabled, blocks cannot be accessed programmatically for editing.
 
 ```typescript highlight=highlight-enable-selection
 // Enable selection for specific blocks
@@ -245,15 +211,15 @@ engine.block.setScopeEnabled(textBlock, 'editor/select', true);
 engine.block.setScopeEnabled(placeholderBlock, 'editor/select', true);
 ```
 
-Setting the global `editor/select` scope to `Defer` delegates the decision to each block. We then enable selection only on the specific blocks users should be able to interact with.
+Setting the global `editor/select` scope to `Defer` delegates the decision to each block. We then enable selection only on the specific blocks that should be modifiable.
 
 ## Selective Locking Patterns
 
-Lock everything first, then selectively enable specific capabilities on chosen blocks. This pattern provides fine-grained control over what users can modify.
+Lock everything first, then selectively enable specific capabilities on chosen blocks. This pattern provides fine-grained control over what can be modified.
 
 ### Text-Only Editing
 
-To allow users to edit text content while protecting everything else, enable the `text/edit` scope. For text styling changes like font, size, and color, also enable `text/character`.
+To allow text content editing while protecting everything else, enable the `text/edit` scope. For text styling changes like font, size, and color, also enable `text/character`.
 
 ```typescript highlight=highlight-text-editing
 // Enable text editing on the text block
@@ -263,11 +229,11 @@ engine.block.setScopeEnabled(textBlock, 'text/edit', true);
 engine.block.setScopeEnabled(textBlock, 'text/character', true);
 ```
 
-Users can now type new text content in the designated text block but cannot move, resize, or delete it.
+Only the designated text block can have its content modified while other properties remain locked.
 
 ### Image Replacement
 
-To allow users to swap images while protecting layout and position, enable the `fill/change` scope on placeholder blocks.
+To allow image replacement while protecting layout and position, enable the `fill/change` scope on placeholder blocks.
 
 ```typescript highlight=highlight-image-replacement
 // Enable image replacement on the placeholder block
@@ -275,25 +241,28 @@ engine.editor.setGlobalScope('fill/change', 'Defer');
 engine.block.setScopeEnabled(placeholderBlock, 'fill/change', true);
 ```
 
-Users can replace the image content but the block's position, dimensions, and other properties remain locked.
+The image content can be replaced but the block's position, dimensions, and other properties remain locked.
 
 ## Checking Permissions
 
 Verify whether operations are permitted using `engine.block.isAllowedByScope()`. This method evaluates both global and block-level settings to return the effective permission state.
 
 ```typescript highlight=highlight-check-permissions
-// Check if operations are permitted on blocks
-const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit');
-const canMoveImage = engine.block.isAllowedByScope(imageBlock, 'layer/move');
-const canReplacePlaceholder = engine.block.isAllowedByScope(
-  placeholderBlock,
-  'fill/change'
-);
-
-console.log('Permission status:');
-console.log('- Can edit text:', canEditText); // true
-console.log('- Can move locked image:', canMoveImage); // false
-console.log('- Can replace placeholder:', canReplacePlaceholder); // true
+    // Check if operations are permitted on blocks
+    const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit');
+    const canMoveImage = engine.block.isAllowedByScope(
+      imageBlock,
+      'layer/move'
+    );
+    const canReplacePlaceholder = engine.block.isAllowedByScope(
+      placeholderBlock,
+      'fill/change'
+    );
+
+    console.log('Permission status:');
+    console.log('- Can edit text:', canEditText); // true
+    console.log('- Can move locked image:', canMoveImage); // false
+    console.log('- Can replace placeholder:', canReplacePlaceholder); // true
 ```
 
 The distinction between checking methods is:
@@ -307,19 +276,29 @@ The distinction between checking methods is:
 To work with scopes programmatically, you can discover all available scope names and check their current settings.
 
 ```typescript highlight=highlight-get-scopes
-// Discover all available scopes
-const allScopes: Scope[] = engine.editor.findAllScopes();
-console.log('Available scopes:', allScopes);
-
-// Check global scope settings
-const textEditGlobal = engine.editor.getGlobalScope('text/edit');
-const layerMoveGlobal = engine.editor.getGlobalScope('layer/move');
-console.log('Global text/edit:', textEditGlobal); // 'Defer'
-console.log('Global layer/move:', layerMoveGlobal); // 'Deny'
-
-// Check block-level scope settings
-const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit');
-console.log('Text block text/edit enabled:', textEditEnabled); // true
+    // Discover all available scopes
+    const allScopes: Scope[] = engine.editor.findAllScopes();
+    console.log('Available scopes:', allScopes);
+
+    // Check global scope settings
+    const textEditGlobal = engine.editor.getGlobalScope('text/edit');
+    const layerMoveGlobal = engine.editor.getGlobalScope('layer/move');
+    console.log('Global text/edit:', textEditGlobal); // 'Defer'
+    console.log('Global layer/move:', layerMoveGlobal); // 'Deny'
+
+    // Check block-level scope settings
+    const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit');
+    console.log('Text block text/edit enabled:', textEditEnabled); // true
+```
+
+## Cleanup
+
+Always dispose the engine when finished to release resources.
+
+```typescript highlight=highlight-cleanup
+} finally {
+  engine.dispose();
+}
 ```
 
 ## Available Scopes Reference
@@ -352,11 +331,13 @@ console.log('Text block text/edit enabled:', textEditEnabled); // true
 | `editor/add`             | Add new blocks                          |
 | `editor/select`          | Select blocks                           |
 
+
+
 ---
 
 ## 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

package/assets/docs/guide/create-composition/multi-page.md

@@ -1,131 +1,139 @@
-> 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) > [Create and Edit Compositions](./create-composition.md) > [Multi-Page Layouts](./create-composition/multi-page.md)
 
 ---
 
-Create multi-page designs in CE.SDK for brochures, presentations, catalogs, and other documents requiring multiple pages within a single scene.
-
-![Multi-Page Layouts](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Create and manage multi-page designs programmatically using CE.SDK's headless engine for documents like brochures, presentations, and catalogs.
 
 > **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-composition-multi-page-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-multi-page-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-multi-page-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-multi-page-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-composition-multi-page-server-js)
 
 Multi-page layouts allow you to create documents with multiple artboards within a single scene. Each page operates as an independent canvas that can contain different content while sharing the same scene context. CE.SDK provides scene layout modes that automatically arrange pages vertically, horizontally, or in a free-form canvas.
 
-```typescript file=@cesdk_web_examples/guides-create-composition-multi-page-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+```typescript file=@cesdk_web_examples/guides-create-composition-multi-page-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { mkdirSync, writeFileSync } from 'fs';
 
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+config();
 
 /**
- * CE.SDK Plugin: Multi-Page Layouts Guide
+ * CE.SDK Server Guide: Multi-Page Layouts
  *
- * This example demonstrates:
+ * Demonstrates programmatic multi-page layout management:
  * - Creating scenes with multiple pages
  * - Adding and configuring pages
  * - Scene layout types (HorizontalStack)
  * - Stack spacing between pages
+ * - Exporting multi-page designs
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-    await cesdk.addPlugin(new DesignEditorConfig());
-    const engine = cesdk.engine;
-
-    // Create a scene with HorizontalStack layout
-    engine.scene.create('HorizontalStack');
-
-    // Get the stack container
-    const [stack] = engine.block.findByType('stack');
-
-    // Add spacing between pages (20 pixels in screen space)
-    engine.block.setFloat(stack, 'stack/spacing', 20);
-    engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
-
-    // Create the first page
-    const firstPage = engine.block.create('page');
-    engine.block.setWidth(firstPage, 800);
-    engine.block.setHeight(firstPage, 600);
-    engine.block.appendChild(stack, firstPage);
-
-    // Add content to the first page
-    const imageBlock1 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_1.jpg',
-      { size: { width: 300, height: 200 } }
-    );
-    engine.block.setPositionX(imageBlock1, 250);
-    engine.block.setPositionY(imageBlock1, 200);
-    engine.block.appendChild(firstPage, imageBlock1);
-
-    // Create a second page with different content
-    const secondPage = engine.block.create('page');
-    engine.block.setWidth(secondPage, 800);
-    engine.block.setHeight(secondPage, 600);
-    engine.block.appendChild(stack, secondPage);
-
-    // Add a different image to the second page
-    const imageBlock2 = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_2.jpg',
-      { size: { width: 300, height: 200 } }
-    );
-    engine.block.setPositionX(imageBlock2, 250);
-    engine.block.setPositionY(imageBlock2, 200);
-    engine.block.appendChild(secondPage, imageBlock2);
-
-    engine.block.select(firstPage);
-    engine.scene.enableZoomAutoFit(firstPage, 'Both');
+
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+
+try {
+  // Create a scene with HorizontalStack layout
+  engine.scene.create('HorizontalStack');
+
+  // Get the stack container
+  const [stack] = engine.block.findByType('stack');
+
+  // Add spacing between pages (20 pixels in screen space)
+  engine.block.setFloat(stack, 'stack/spacing', 20);
+  engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
+
+  // Create the first page
+  const firstPage = engine.block.create('page');
+  engine.block.setWidth(firstPage, 800);
+  engine.block.setHeight(firstPage, 600);
+  engine.block.appendChild(stack, firstPage);
+
+  // Add content to the first page
+  const imageBlock1 = await engine.block.addImage(
+    'https://img.ly/static/ubq_samples/sample_1.jpg',
+    { size: { width: 300, height: 200 } }
+  );
+  engine.block.setPositionX(imageBlock1, 250);
+  engine.block.setPositionY(imageBlock1, 200);
+  engine.block.appendChild(firstPage, imageBlock1);
+
+  // Create a second page with different content
+  const secondPage = engine.block.create('page');
+  engine.block.setWidth(secondPage, 800);
+  engine.block.setHeight(secondPage, 600);
+  engine.block.appendChild(stack, secondPage);
+
+  // Add a different image to the second page
+  const imageBlock2 = await engine.block.addImage(
+    'https://img.ly/static/ubq_samples/sample_2.jpg',
+    { size: { width: 300, height: 200 } }
+  );
+  engine.block.setPositionX(imageBlock2, 250);
+  engine.block.setPositionY(imageBlock2, 200);
+  engine.block.appendChild(secondPage, imageBlock2);
+
+  // Export each page as a separate image
+  mkdirSync('output', { recursive: true });
+  const pages = engine.block.findByType('page');
+
+  for (let i = 0; i < pages.length; i++) {
+    const blob = await engine.block.export(pages[i], { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`output/page-${i + 1}.png`, buffer);
+    console.log(`Exported page ${i + 1}`);
   }
-}
 
-export default Example;
+  console.log('Multi-page layout example complete');
+} finally {
+  engine.dispose();
+}
 ```
 
-This guide covers how to create multi-page scenes, add pages, and configure spacing between pages.
+This guide covers how to create multi-page scenes, add pages, configure spacing, and export pages as individual images.
 
-## Using the Built-in Page Management UI
+## Setting Up the Engine
 
-The CE.SDK editor provides built-in UI controls for managing pages. Users can interact with the page panel to add new pages, duplicate existing ones, reorder them with drag-and-drop, delete pages, and navigate between pages by clicking.
+First, initialize the CE.SDK engine in headless mode for server-side processing.
 
-The page panel displays thumbnails of all pages in the scene, making it easy to understand the document structure at a glance. When you click a page thumbnail, the viewport automatically zooms to that page.
+```typescript highlight=highlight-setup
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+```
 
-## Creating Multi-Page Scenes Programmatically
+## Creating Multi-Page Scenes
 
 We can create scenes with multiple pages using the engine API. The scene acts as a container for pages, and each page can hold any number of content blocks.
 
 ### Creating a Scene with Pages
 
-We create a new scene using `engine.scene.create()` and specify the layout type. The layout type determines how pages are arranged in the viewport. After creating the scene, we get the stack container and create pages within it.
+We create a new scene using `engine.scene.create()` and specify the layout type. The layout type determines how pages are arranged. After creating the scene, we get the stack container and create pages within it.
 
 ```typescript highlight=highlight-create-scene
-// Create a scene with HorizontalStack layout
-engine.scene.create('HorizontalStack');
+  // Create a scene with HorizontalStack layout
+  engine.scene.create('HorizontalStack');
 
-// Get the stack container
-const [stack] = engine.block.findByType('stack');
+  // Get the stack container
+  const [stack] = engine.block.findByType('stack');
 
-// Add spacing between pages (20 pixels in screen space)
-engine.block.setFloat(stack, 'stack/spacing', 20);
-engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
+  // Add spacing between pages (20 pixels in screen space)
+  engine.block.setFloat(stack, 'stack/spacing', 20);
+  engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
 
-// Create the first page
-const firstPage = engine.block.create('page');
-engine.block.setWidth(firstPage, 800);
-engine.block.setHeight(firstPage, 600);
-engine.block.appendChild(stack, firstPage);
+  // Create the first page
+  const firstPage = engine.block.create('page');
+  engine.block.setWidth(firstPage, 800);
+  engine.block.setHeight(firstPage, 600);
+  engine.block.appendChild(stack, firstPage);
 ```
 
 The scene is created with a `HorizontalStack` layout, meaning pages are arranged side by side from left to right. We then create a page, set its dimensions, and append it to the stack container.
@@ -147,43 +155,53 @@ Setting `stack/spacingInScreenspace` to `true` means the spacing value is interp
 To add additional pages, we create new page blocks, set their dimensions, and append them to the stack container.
 
 ```typescript highlight=highlight-add-page
-// Create a second page with different content
-const secondPage = engine.block.create('page');
-engine.block.setWidth(secondPage, 800);
-engine.block.setHeight(secondPage, 600);
-engine.block.appendChild(stack, secondPage);
-
-// Add a different image to the second page
-const imageBlock2 = await engine.block.addImage(
-  'https://img.ly/static/ubq_samples/sample_2.jpg',
-  { size: { width: 300, height: 200 } }
-);
-engine.block.setPositionX(imageBlock2, 250);
-engine.block.setPositionY(imageBlock2, 200);
-engine.block.appendChild(secondPage, imageBlock2);
+  // Create a second page with different content
+  const secondPage = engine.block.create('page');
+  engine.block.setWidth(secondPage, 800);
+  engine.block.setHeight(secondPage, 600);
+  engine.block.appendChild(stack, secondPage);
+
+  // Add a different image to the second page
+  const imageBlock2 = await engine.block.addImage(
+    'https://img.ly/static/ubq_samples/sample_2.jpg',
+    { size: { width: 300, height: 200 } }
+  );
+  engine.block.setPositionX(imageBlock2, 250);
+  engine.block.setPositionY(imageBlock2, 200);
+  engine.block.appendChild(secondPage, imageBlock2);
 ```
 
 Each page can contain different content. Here we add different images to each page to demonstrate independent page content.
 
 ## Scene Layout Types
 
-CE.SDK supports different layout modes that control how pages are arranged on the canvas. You specify the layout type when creating the scene with `engine.scene.create()`.
+CE.SDK supports different layout modes that control how pages are arranged. You specify the layout type when creating the scene with `engine.scene.create()`.
 
-**Free Layout** is the default where pages can be positioned anywhere on the canvas. This provides complete control over page placement.
+**Free Layout** is the default where pages can be positioned anywhere. This provides complete control over page placement.
 
-**VerticalStack Layout** arranges pages automatically in a vertical stack from top to bottom. This is useful for scroll-based document previews.
+**VerticalStack Layout** arranges pages automatically in a vertical stack from top to bottom.
 
-**HorizontalStack Layout** arranges pages side by side from left to right. This is useful for carousel-style presentations or side-by-side comparisons.
+**HorizontalStack Layout** arranges pages side by side from left to right.
 
-## Setting the Zoom Level
+## Exporting Pages
 
-We can control the viewport zoom level using `engine.scene.setZoomLevel()`. A value of 1.0 represents 100% zoom.
+We can export each page individually as an image file. This is useful for generating thumbnails, previews, or final output files.
 
-```typescript highlight=highlight-zoom
-engine.block.select(firstPage);
-engine.scene.enableZoomAutoFit(firstPage, 'Both');
+```typescript highlight=highlight-export
+  // Export each page as a separate image
+  mkdirSync('output', { recursive: true });
+  const pages = engine.block.findByType('page');
+
+  for (let i = 0; i < pages.length; i++) {
+    const blob = await engine.block.export(pages[i], { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`output/page-${i + 1}.png`, buffer);
+    console.log(`Exported page ${i + 1}`);
+  }
 ```
 
+The export loop iterates through all pages and saves each one as a PNG file. You can also export to other formats like JPEG or PDF.
+
 ## Troubleshooting
 
 **Page not visible after creation**: Ensure the page is attached to the stack with `appendChild()` and has valid dimensions set with `setWidth()` and `setHeight()`.
@@ -194,11 +212,13 @@ engine.scene.enableZoomAutoFit(firstPage, 'Both');
 
 **Spacing not visible**: Check that `stack/spacing` is set to a positive value and that you're using a stack layout (HorizontalStack or VerticalStack).
 
+
+
 ---
 
 ## 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