@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/configuration.md

@@ -1,254 +1,206 @@
-> 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) > [Configuration](./configuration.md)
 
 ---
 
-Set up CE.SDK with license keys, asset base URLs, user IDs, and runtime configuration options to match your application requirements.
-
-![Configuration example showing CE.SDK editor with theme toggle in navigation bar](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Set up CE.SDK engine with license keys, asset base URLs, user IDs, and configuration options for server-side processing.
 
 > **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-configuration-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-configuration-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-configuration-browser/)
-
-`CreativeEditorSDK.create()` initializes the full CE.SDK editor with UI components. The configuration object controls license validation, asset loading, user tracking, and UI behavior.
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-configuration-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-configuration-server-js)
+
+`CreativeEngine.init()` initializes the CE.SDK engine for headless operations in Node.js environments. The configuration object controls license validation, asset loading, user tracking, and logging behavior.
+
+```typescript file=@cesdk_web_examples/guides-configuration-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
+
+/**
+ * Custom logger that prefixes messages with timestamp and level
+ */
+function createLogger(prefix: string) {
+  return (message: string, level = 'Info') => {
+    const timestamp = new Date().toISOString();
+    console.log(`[${timestamp}] [${prefix}] [${level}] ${message}`);
+  };
+}
 
-```typescript file=@cesdk_web_examples/guides-configuration-browser/index.ts reference-only
-import CreativeEditorSDK from '@cesdk/cesdk-js';
-import Example from './browser';
+// License key removes watermarks from exports
+// Get a free trial at https://img.ly/forms/free-trial
+const license = process.env.CESDK_LICENSE ?? '';
 
-const config = {
-  // License key removes watermarks from exports
-  // Get a free trial at https://img.ly/forms/free-trial
-  // license: 'YOUR_CESDK_LICENSE_KEY',
-
-  // User ID for accurate MAU tracking across devices
-  userId: 'guides-user',
-
-  // Custom logger for debugging and monitoring
-  logger: (message: string, level?: string) => {
-    console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`);
-  },
-
-  // Enable developer mode for diagnostics
-  devMode: false,
-
-  // Accessibility settings
-  a11y: {
-    headingsHierarchyStart: 1 as const
-  },
-
-  // Location of core engine assets (WASM, data files)
-  // Default: IMG.LY CDN. For production, host assets yourself.
-  // baseURL: 'https://your-cdn.com/cesdk-assets/',
-
-  // Use local assets when developing with local packages
-  ...(import.meta.env.CESDK_USE_LOCAL && {
-    baseURL: import.meta.env.VITE_CESDK_ASSETS_BASE_URL
-  })
+// Location of core engine assets (WASM, data files)
+// For production, host assets yourself instead of using the IMG.LY CDN:
+// const baseURL = 'https://your-cdn.com/cesdk-assets/';
+
+// User ID for accurate MAU tracking
+const userId = 'server-process-' + process.pid;
+
+/**
+ * Configuration for CreativeEngine.init()
+ */
+const initConfig = {
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  license,
+  userId,
+  logger: createLogger('CE.SDK')
 };
 
-CreativeEditorSDK.create('#cesdk_container', config)
-  .then(async (cesdk: CreativeEditorSDK) => {
-    // Expose cesdk for debugging and hero screenshot generation
-    (window as any).cesdk = cesdk;
-
-    // Load the example plugin
-    await cesdk.addPlugin(new Example());
-  })
-  .catch((error: Error) => {
-    // eslint-disable-next-line no-console
-    console.error('Failed to initialize CE.SDK:', error);
-  });
-```
+/**
+ * Demonstrate runtime settings
+ */
+function demonstrateRuntimeSettings(engine: CreativeEngine): void {
+  console.log('\n=== Runtime Settings ===\n');
+
+  // Configure engine settings using setSetting/getSetting
+  engine.editor.setSetting('doubleClickToCropEnabled', false);
+  const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled');
+  console.log(`doubleClickToCropEnabled: ${cropEnabled}`);
 
-```typescript file=@cesdk_web_examples/guides-configuration-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
-
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    await cesdk.addPlugin(new DesignEditorConfig());
-    const engine = cesdk.engine;
-
-    // Create a Scene
-    engine.scene.create('VerticalStack', {
-      page: { size: { width: 800, height: 600 } }
-    });
-
-    const pages = engine.block.findByType('page');
-    const page = pages[0];
-
-    // ========================================
-    // Setup: Gradient Background with Title
-    // ========================================
-    // Create gradient background
-    const gradientFill = engine.block.createFill('gradient/linear');
-    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [
-      { color: { r: 0.15, g: 0.1, b: 0.35, a: 1.0 }, stop: 0 },
-      { color: { r: 0.4, g: 0.2, b: 0.5, a: 1.0 }, stop: 0.5 },
-      { color: { r: 0.6, g: 0.3, b: 0.4, a: 1.0 }, stop: 1 }
-    ]);
-    engine.block.setFill(page, gradientFill);
-
-    // Add centered title text
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    const titleText = engine.block.create('text');
-    engine.block.replaceText(titleText, 'Configure your Editor');
-    engine.block.setFloat(titleText, 'text/fontSize', 12);
-    engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
-    engine.block.setWidthMode(titleText, 'Auto');
-    engine.block.setHeightMode(titleText, 'Auto');
-    engine.block.appendChild(page, titleText);
-
-    // Add IMG.LY subtext
-    const subtitleText = engine.block.create('text');
-    engine.block.replaceText(subtitleText, 'Powered by IMG.LY');
-    engine.block.setFloat(subtitleText, 'text/fontSize', 6);
-    engine.block.setTextColor(subtitleText, { r: 0.9, g: 0.9, b: 0.9, a: 0.8 });
-    engine.block.setWidthMode(subtitleText, 'Auto');
-    engine.block.setHeightMode(subtitleText, 'Auto');
-    engine.block.appendChild(page, subtitleText);
-
-    // Center both texts
-    const titleWidth = engine.block.getFrameWidth(titleText);
-    const titleHeight = engine.block.getFrameHeight(titleText);
-    const subtitleWidth = engine.block.getFrameWidth(subtitleText);
-    const subtitleHeight = engine.block.getFrameHeight(subtitleText);
-
-    const spacing = 12;
-    const totalHeight = titleHeight + spacing + subtitleHeight;
-    const startY = (pageHeight - totalHeight) / 2;
-
-    engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2);
-    engine.block.setPositionY(titleText, startY);
-    engine.block.setPositionX(subtitleText, (pageWidth - subtitleWidth) / 2);
-    engine.block.setPositionY(subtitleText, startY + titleHeight + spacing);
-
-    // ========================================
-    // Runtime Configuration: Theme
-    // ========================================
-    cesdk.ui.setTheme('light');
-    const currentTheme = cesdk.ui.getTheme();
-    console.log('Current theme:', currentTheme);
-
-    // ========================================
-    // Runtime Configuration: Scale
-    // ========================================
-    cesdk.ui.setScale('modern');
-    const currentScale = cesdk.ui.getScale();
-    console.log('Current scale:', currentScale);
-
-    // ========================================
-    // Runtime Configuration: Actions
-    // ========================================
-    cesdk.actions.register('customSave', async () => {
-      const sceneBlob = await engine.scene.saveToArchive();
-      await cesdk.utils.downloadFile(sceneBlob, 'application/zip');
-    });
-
-    // ========================================
-    // Built-in Actions
-    // ========================================
-    // Add built-in export and import actions to the navigation bar
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      {
-        id: 'ly.img.actions.navigationBar',
-        children: [
-          'ly.img.saveScene.navigationBar',
-          'ly.img.exportImage.navigationBar',
-          'ly.img.exportPDF.navigationBar',
-          'ly.img.exportScene.navigationBar',
-          'ly.img.exportArchive.navigationBar',
-          'ly.img.importScene.navigationBar',
-          'ly.img.importArchive.navigationBar'
-        ]
-      }
-    );
-
-    // ========================================
-    // Engine Settings
-    // ========================================
-    engine.editor.setSetting('doubleClickToCropEnabled', true);
-    engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 });
-    const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled');
-    console.log('Double-click crop enabled:', cropEnabled);
-
-    // ========================================
-    // Internationalization: Locale
-    // ========================================
-    cesdk.i18n.setLocale('en');
-    const currentLocale = cesdk.i18n.getLocale();
-    console.log('Current locale:', currentLocale);
-
-    // ========================================
-    // Internationalization: Translations
-    // ========================================
-    cesdk.i18n.setTranslations({
-      en: {
-        'common.back': 'Go Back',
-        'common.apply': 'Apply Changes'
-      }
-    });
-
-    // Enable Auto-Fit Zoom
-    engine.scene.zoomToBlock(page);
-    engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40);
+  engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 });
+  const highlightColor = engine.editor.getSetting('highlightColor');
+  console.log(`highlightColor: ${JSON.stringify(highlightColor)}`);
+}
+
+/**
+ * Export the result to output directory
+ */
+async function exportResult(
+  engine: CreativeEngine,
+  page: number
+): Promise<string> {
+  // Create output directory
+  if (!existsSync('output')) {
+    mkdirSync('output', { recursive: true });
   }
+
+  // Export as PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  const outputPath = 'output/configuration-demo.png';
+  writeFileSync(outputPath, buffer);
+  console.log(`\nExported to ${outputPath}`);
+
+  return outputPath;
 }
 
-export default Example;
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init(initConfig);
+
+try {
+  console.log('=== CE.SDK Server Configuration Demo ===\n');
+
+  // Create a scene
+  console.log('Creating scene...');
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } }
+  });
+  const page = engine.block.findByType('page')[0];
+  console.log('Scene created (800x600)\n');
+
+  // Create gradient background (matching browser example)
+  const gradientFill = engine.block.createFill('gradient/linear');
+  engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [
+    { color: { r: 0.15, g: 0.1, b: 0.35, a: 1.0 }, stop: 0 },
+    { color: { r: 0.4, g: 0.2, b: 0.5, a: 1.0 }, stop: 0.5 },
+    { color: { r: 0.6, g: 0.3, b: 0.4, a: 1.0 }, stop: 1 }
+  ]);
+  engine.block.setFill(page, gradientFill);
+  console.log('Gradient background applied');
+
+  // Add centered title text
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+
+  const titleText = engine.block.create('text');
+  engine.block.replaceText(titleText, 'Configure your Editor');
+  engine.block.setFloat(titleText, 'text/fontSize', 12);
+  engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
+  engine.block.setWidthMode(titleText, 'Auto');
+  engine.block.setHeightMode(titleText, 'Auto');
+  engine.block.appendChild(page, titleText);
+
+  // Add IMG.LY subtext
+  const subtitleText = engine.block.create('text');
+  engine.block.replaceText(subtitleText, 'Powered by IMG.LY');
+  engine.block.setFloat(subtitleText, 'text/fontSize', 6);
+  engine.block.setTextColor(subtitleText, { r: 0.9, g: 0.9, b: 0.9, a: 0.8 });
+  engine.block.setWidthMode(subtitleText, 'Auto');
+  engine.block.setHeightMode(subtitleText, 'Auto');
+  engine.block.appendChild(page, subtitleText);
+
+  // Center both texts
+  const titleWidth = engine.block.getFrameWidth(titleText);
+  const titleHeight = engine.block.getFrameHeight(titleText);
+  const subtitleWidth = engine.block.getFrameWidth(subtitleText);
+  const subtitleHeight = engine.block.getFrameHeight(subtitleText);
+
+  const spacing = 12;
+  const totalHeight = titleHeight + spacing + subtitleHeight;
+  const startY = (pageHeight - totalHeight) / 2;
+
+  engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2);
+  engine.block.setPositionY(titleText, startY);
+  engine.block.setPositionX(subtitleText, (pageWidth - subtitleWidth) / 2);
+  engine.block.setPositionY(subtitleText, startY + titleHeight + spacing);
+  console.log('Title and subtitle added');
+
+  // Demonstrate runtime settings
+  demonstrateRuntimeSettings(engine);
+
+  // Export result
+  await exportResult(engine, page);
+
+  console.log('\nDemo complete!');
+} finally {
+  // Clean up engine resources
+  engine.dispose();
+  console.log('Engine disposed');
+}
 ```
 
+This guide covers required and optional configuration properties, and runtime APIs for server-side CE.SDK usage.
+
 ## Required Configuration
 
 The `license` property is the only required configuration. All other properties have sensible defaults.
 
-| Property  | Type     | Purpose                                 |
-| --------- | -------- | --------------------------------------- |
+| Property | Type | Purpose |
+|----------|------|---------|
 | `license` | `string` | License key to remove export watermarks |
 
-The license key validates your CE.SDK subscription and removes watermarks from exports. Get a free trial license at [https://img.ly/forms/free-trial](https://img.ly/forms/free-trial).
+The license key validates your CE.SDK subscription and removes watermarks from exports. Without a valid license, exports include a watermark. Get a free trial license at [https://img.ly/forms/free-trial](https://img.ly/forms/free-trial).
 
-## Optional Configuration
-
-These properties customize engine behavior and are all optional.
+```javascript
+const config = {
+  license: process.env.CESDK_LICENSE || ''
+};
 
-### Engine Properties
+const engine = await CreativeEngine.init(config);
+```
 
-| Property       | Type        | Purpose                                           |
-| -------------- | ----------- | ------------------------------------------------- | ---------- | ------------- | ---------------------------- |
-| `baseURL`      | `string`    | Location of core engine assets (WASM, data files) |
-| `userId`       | `string`    | User identifier for MAU tracking                  |
-| `logger`       | `function`  | Custom logging function                           |
-| `role`         | `'Creator'` | `'Adopter'`                                       | `'Viewer'` | `'Presenter'` | User role for feature access |
-| `featureFlags` | `object`    | Experimental feature toggles                      |
+## Optional Configuration
 
-### Editor Properties
+These properties customize engine behavior and are all optional.
 
-| Property  | Type      | Purpose                      |
-| --------- | --------- | ---------------------------- |
-| `devMode` | `boolean` | Enable developer diagnostics |
-| `a11y`    | `object`  | Accessibility settings       |
-| `ui`      | `object`  | User interface customization |
+| Property | Type | Default | Purpose |
+|----------|------|---------|---------|
+| `baseURL` | `string` | IMG.LY CDN | Location of core engine assets (WASM, data files) |
+| `userId` | `string` | — | User identifier for MAU tracking |
+| `logger` | `function` | Console | Custom logging function |
+| `role` | `'Creator'` | `'Adopter'` | `'Viewer'` | `'Presenter'` | `'Creator'` | User role for feature access |
+| `featureFlags` | `object` | — | Experimental feature toggles |
 
 ## Configuration Properties
 
@@ -259,211 +211,131 @@ The license key validates your CE.SDK subscription and removes watermarks from e
 ```typescript highlight=highlight-license
 // License key removes watermarks from exports
 // Get a free trial at https://img.ly/forms/free-trial
-// license: 'YOUR_CESDK_LICENSE_KEY',
-```
-
-### User ID
-
-Provide a unique user identifier for accurate Monthly Active User (MAU) tracking. This helps count users correctly when the same person accesses your application from multiple devices.
-
-```typescript highlight=highlight-userId
-// User ID for accurate MAU tracking across devices
-userId: 'guides-user',
-```
-
-### Custom Logger
-
-Replace the default console logging with a custom logger function. The logger receives a message string and an optional log level (`'Info'`, `'Warning'`, or `'Error'`).
-
-```typescript highlight=highlight-logger
-// Custom logger for debugging and monitoring
-logger: (message: string, level?: string) => {
-  console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`);
-},
-```
-
-### Developer Mode
-
-Enable developer mode to get additional diagnostics and debugging information in the console.
-
-```typescript highlight=highlight-devMode
-// Enable developer mode for diagnostics
-devMode: false,
-```
-
-### Accessibility Settings
-
-Configure accessibility options like heading hierarchy for screen readers. The `headingsHierarchyStart` property sets which heading level (1-6) the editor should start from.
-
-```typescript highlight=highlight-a11y
-// Accessibility settings
-a11y: {
-  headingsHierarchyStart: 1 as const
-},
+const license = process.env.CESDK_LICENSE ?? '';
 ```
 
 ### Asset Base URL
 
-The `baseURL` property specifies the location of core engine assets, including WASM files, data files, and JavaScript workers. By default, these load from the IMG.LY CDN. For production deployments, host these assets yourself by copying the `assets` folder from `node_modules/@cesdk/engine/assets` to your server.
+The `baseURL` property specifies the location of core engine assets, including WASM files and data files. By default, these load from the IMG.LY CDN. For production deployments, host these assets yourself by copying the `assets` folder from `node_modules/@cesdk/node/assets` to your server.
 
-Content assets like stickers and filters are loaded separately via asset source plugins (imported from `@cesdk/cesdk-js/plugins`), each of which accepts its own `baseURL` option defaulting to `https://cdn.img.ly/assets/v4`.
+The server package does not include asset source plugins. Content assets like stickers and filters are only available in browser builds.
 
 ```typescript highlight=highlight-baseURL
 // Location of core engine assets (WASM, data files)
-// Default: IMG.LY CDN. For production, host assets yourself.
-// baseURL: 'https://your-cdn.com/cesdk-assets/',
+// For production, host assets yourself instead of using the IMG.LY CDN:
+// const baseURL = 'https://your-cdn.com/cesdk-assets/';
 ```
 
-### Initialization
+### User ID
 
-Pass the configuration object to `CreativeEditorSDK.create()` along with a container element selector.
+Provide a unique user identifier for accurate Monthly Active User (MAU) tracking. This helps count users correctly when processing requests from different sources.
 
-```typescript highlight=highlight-create
-CreativeEditorSDK.create('#cesdk_container', config)
-  .then(async (cesdk: CreativeEditorSDK) => {
+```typescript highlight=highlight-userId
+// User ID for accurate MAU tracking
+const userId = 'server-process-' + process.pid;
 ```
 
-## Runtime Configuration
-
-After initialization, use dedicated APIs to modify settings dynamically.
-
-### Internationalization
-
-#### Locale
+### Custom Logger
 
-Change the UI language using `cesdk.i18n.setLocale()`.
+Replace the default console logging with a custom logger function. The logger receives a message string and an optional log level (`'Info'`, `'Warning'`, or `'Error'`).
 
-```typescript highlight=highlight-locale
-cesdk.i18n.setLocale('en');
-const currentLocale = cesdk.i18n.getLocale();
-console.log('Current locale:', currentLocale);
+```typescript highlight=highlight-custom-logger
+/**
+ * Custom logger that prefixes messages with timestamp and level
+ */
+function createLogger(prefix: string) {
+  return (message: string, level = 'Info') => {
+    const timestamp = new Date().toISOString();
+    console.log(`[${timestamp}] [${prefix}] [${level}] ${message}`);
+  };
+}
 ```
 
-#### Translations
+### Initialization
 
-Add or override UI text strings using `cesdk.i18n.setTranslations()`.
+Pass the configuration object to `CreativeEngine.init()` to start the engine.
 
-```typescript highlight=highlight-translations
-cesdk.i18n.setTranslations({
-  en: {
-    'common.back': 'Go Back',
-    'common.apply': 'Apply Changes'
-  }
-});
+```typescript highlight=highlight-setup
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init(initConfig);
 ```
 
-> **Note:** For complete localization including custom translations and RTL support, see [Localization](./user-interface/localization.md).
+## Runtime Settings
 
-### Theme
+After initialization, configure engine behavior using `engine.editor.setSetting()` and `engine.editor.getSetting()`. Settings control features like double-click crop behavior and highlight colors.
 
-Set the UI theme using `cesdk.ui.setTheme()`. Options: `'light'`, `'dark'`, or `'system'`.
+```typescript highlight=highlight-runtime-settings
+/**
+ * Demonstrate runtime settings
+ */
+function demonstrateRuntimeSettings(engine: CreativeEngine): void {
+  console.log('\n=== Runtime Settings ===\n');
 
-```typescript highlight=highlight-theme
-cesdk.ui.setTheme('light');
-const currentTheme = cesdk.ui.getTheme();
-console.log('Current theme:', currentTheme);
-```
+  // Configure engine settings using setSetting/getSetting
+  engine.editor.setSetting('doubleClickToCropEnabled', false);
+  const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled');
+  console.log(`doubleClickToCropEnabled: ${cropEnabled}`);
 
-> **Note:** For advanced theming including custom CSS variables and color schemes, see [Theming](./user-interface/appearance/theming.md).
-
-### Actions
-
-Register custom actions for user interactions like save and export.
-
-```typescript highlight=highlight-actions
-cesdk.actions.register('customSave', async () => {
-  const sceneBlob = await engine.scene.saveToArchive();
-  await cesdk.utils.downloadFile(sceneBlob, 'application/zip');
-});
+  engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 });
+  const highlightColor = engine.editor.getSetting('highlightColor');
+  console.log(`highlightColor: ${JSON.stringify(highlightColor)}`);
+}
 ```
 
-### Built-in Actions
-
-CE.SDK provides built-in actions for common operations like saving, exporting, and importing. Add them to the navigation bar using `insertOrderComponent()`:
-
-```typescript highlight=highlight-builtin-actions
-// Add built-in export and import actions to the navigation bar
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  {
-    id: 'ly.img.actions.navigationBar',
-    children: [
-      'ly.img.saveScene.navigationBar',
-      'ly.img.exportImage.navigationBar',
-      'ly.img.exportPDF.navigationBar',
-      'ly.img.exportScene.navigationBar',
-      'ly.img.exportArchive.navigationBar',
-      'ly.img.importScene.navigationBar',
-      'ly.img.importArchive.navigationBar'
-    ]
+## Exporting Results
+
+After processing a scene, export the result to a file. The engine's `block.export()` method returns a Blob that you can convert to a Buffer for file system operations.
+
+```typescript highlight=highlight-export-result
+/**
+ * Export the result to output directory
+ */
+async function exportResult(
+  engine: CreativeEngine,
+  page: number
+): Promise<string> {
+  // Create output directory
+  if (!existsSync('output')) {
+    mkdirSync('output', { recursive: true });
   }
-);
-```
-
-**Available built-in actions:**
-
-| Action ID                            | Purpose                    |
-| ------------------------------------ | -------------------------- |
-| `ly.img.saveScene.navigationBar`     | Save scene to cloud        |
-| `ly.img.exportImage.navigationBar`   | Export as image (PNG/JPEG) |
-| `ly.img.exportPDF.navigationBar`     | Export as PDF              |
-| `ly.img.exportScene.navigationBar`   | Export scene file          |
-| `ly.img.exportArchive.navigationBar` | Export as archive (ZIP)    |
-| `ly.img.importScene.navigationBar`   | Import scene file          |
-| `ly.img.importArchive.navigationBar` | Import archive (ZIP)       |
-
-> **Note:** For detailed navigation bar customization including adding buttons and rearranging elements, see [Navigation Bar](./user-interface/customization/navigation-bar.md).
-
-> **Note:** For a complete guide on registering and managing actions, see [Actions](./actions.md).
 
-### Scale
+  // Export as PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  const outputPath = 'output/configuration-demo.png';
+  writeFileSync(outputPath, buffer);
+  console.log(`\nExported to ${outputPath}`);
 
-Adjust UI scale for different device types. Options: `'normal'`, `'large'`, or `'modern'`.
-
-```typescript highlight=highlight-scale
-cesdk.ui.setScale('modern');
-const currentScale = cesdk.ui.getScale();
-console.log('Current scale:', currentScale);
+  return outputPath;
+}
 ```
 
-> **Note:** For advanced scale configuration including responsive callbacks, see [Theming](./user-interface/appearance/theming.md).
+## Engine Disposal
 
-### Engine Settings
+Clean up engine resources when done processing by calling `engine.dispose()`. Place this in a finally block to ensure cleanup even if errors occur.
 
-Configure engine behavior using `engine.editor.setSetting()`.
-
-```typescript highlight=highlight-settings
-engine.editor.setSetting('doubleClickToCropEnabled', true);
-engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 });
-const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled');
-console.log('Double-click crop enabled:', cropEnabled);
+```typescript highlight=highlight-dispose
+// Clean up engine resources
+engine.dispose();
 ```
 
-> **Note:** For a complete reference of available engine settings, see [Engine Interface](./engine-interface.md).
-
 ## API Reference
 
-| Method                            | Purpose                                |
-| --------------------------------- | -------------------------------------- |
-| `CreativeEditorSDK.create()`      | Initialize editor                      |
-| `cesdk.ui.setTheme()`             | Set UI theme                           |
-| `cesdk.i18n.setLocale()`          | Set UI locale                          |
-| `cesdk.i18n.setTranslations()`    | Add translations                       |
-| `cesdk.ui.setScale()`             | Set UI scale                           |
-| `cesdk.actions.register()`        | Register custom actions                |
-| `cesdk.ui.insertOrderComponent()` | Add built-in actions to navigation bar |
-| `cesdk.utils.downloadFile()`      | Download blob as file                  |
-| `engine.editor.setSetting()`      | Set engine setting                     |
+| Method | Category | Purpose |
+|--------|----------|---------|
+| `CreativeEngine.init()` | Initialization | Initialize headless engine with config |
+| `engine.editor.setSetting()` | Runtime | Set engine setting |
+| `engine.editor.getSetting()` | Runtime | Get engine setting |
+| `engine.block.export()` | Export | Export block to image format |
+| `engine.dispose()` | Lifecycle | Clean up engine resources |
 
-## Next Steps
 
-- [Headless Mode](./concepts/headless-mode/browser.md) - Use CE.SDK without the UI
 
 ---
 
 ## 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