@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/concepts/templating.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:** [Concepts](./concepts.md) > [Templating](./concepts/templating.md)
 
@@ -6,83 +6,85 @@
 
 Templates transform static designs into dynamic, data-driven content. They combine reusable layouts with variable text and placeholder media, enabling personalization at scale.
 
-![Templating example showing a personalized postcard design](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-concepts-templating-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-templating-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-templating-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-templating-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-templating-server-js)
 
 A template is a regular CE.SDK scene that contains **variable tokens** in text and **placeholder blocks** for media. When you load a template, you can populate the variables with data and swap placeholder content—producing personalized designs without modifying the underlying layout.
 
-```typescript file=@cesdk_web_examples/guides-concepts-templating-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+```typescript file=@cesdk_web_examples/guides-concepts-templating-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
 
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Templating Concepts
+ * CE.SDK Server Example: Templating Concepts
  *
  * Demonstrates the core template concepts in CE.SDK:
  * - Loading a template from URL
  * - Discovering and setting variables
  * - Discovering placeholders
+ * - Exporting personalized 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;
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
+  try {
     // Load a postcard template from URL
     // Templates are scenes containing variable tokens and placeholder blocks
     const templateUrl =
       'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
     await engine.scene.loadFromURL(templateUrl);
 
-    // Zoom to show the full page in the viewport
-    const page = engine.scene.getCurrentPage();
-    if (page) {
-      await engine.scene.zoomToBlock(page, { padding: 40 });
-    }
-
     // Discover what variables this template expects
     // Variables are named slots that can be populated with data
     const variableNames = engine.variable.findAll();
-    // eslint-disable-next-line no-console
     console.log('Template variables:', variableNames);
 
     // Set variable values to personalize the template
     // These values replace {{variableName}} tokens in text blocks
     engine.variable.setString('Name', 'Jane');
     engine.variable.setString('Greeting', 'Wish you were here!');
-    // eslint-disable-next-line no-console
     console.log('Variables set successfully.');
 
     // Discover placeholder blocks in the template
     // Placeholders mark content slots for user or automation replacement
     const placeholders = engine.block.findAllPlaceholders();
-    // eslint-disable-next-line no-console
     console.log('Template placeholders:', placeholders.length);
 
-    // eslint-disable-next-line no-console
+    // Export the personalized design to a PNG file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const pages = engine.scene.getPages();
+    const blob = await engine.block.export(pages[0], {
+      mimeType: 'image/png'
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/templating-personalized.png`, buffer);
+    console.log('Exported to output/templating-personalized.png');
+
     console.log('Templating guide completed successfully.');
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide explains the core concepts. For implementation details, see the guides linked in each section.
@@ -91,24 +93,54 @@ This guide explains the core concepts. For implementation details, see the guide
 
 Any CE.SDK scene can become a template by adding dynamic elements:
 
-| Element                 | Purpose                   | Example                      |
-| ----------------------- | ------------------------- | ---------------------------- |
-| **Variables**           | Dynamic text replacement  | `Hello, {{firstName}}!`      |
-| **Placeholders**        | Swappable media slots     | Profile photo, product image |
-| **Editing Constraints** | Protected design elements | Locked logo, fixed layout    |
+| Element | Purpose | Example |
+|---------|---------|---------|
+| **Variables** | Dynamic text replacement | `Hello, {{firstName}}!` |
+| **Placeholders** | Swappable media slots | Profile photo, product image |
+| **Editing Constraints** | Protected design elements | Locked logo, fixed layout |
 
 Templates separate **design** (created once by designers) from **content** (populated at runtime with data). This enables workflows like batch generation, form-based customization, and user personalization.
 
+## Loading Templates
+
+Load a template from a URL using `engine.scene.loadFromURL()`. This replaces the current scene with the template's structure, including any pages, blocks, variables, and placeholders.
+
+```typescript highlight-load-template
+// Load a postcard template from URL
+// Templates are scenes containing variable tokens and placeholder blocks
+const templateUrl =
+  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+await engine.scene.loadFromURL(templateUrl);
+```
+
+Templates are standard CE.SDK scene files. You can load them from your own servers, CDNs, or cloud storage.
+
 ## Variables
 
 Variables enable dynamic text without modifying the design structure. Text blocks contain `{{variableName}}` tokens that CE.SDK resolves at render time.
 
+### Discovering Variables
+
+Use `engine.variable.findAll()` to discover what variables a template expects:
+
+```typescript highlight-discover-variables
+// Discover what variables this template expects
+// Variables are named slots that can be populated with data
+const variableNames = engine.variable.findAll();
+console.log('Template variables:', variableNames);
+```
+
+This returns an array of variable names defined in the template.
+
+### Setting Variable Values
+
+Populate variables with `engine.variable.setString()`:
+
 ```typescript highlight-set-variables
 // Set variable values to personalize the template
 // These values replace {{variableName}} tokens in text blocks
 engine.variable.setString('Name', 'Jane');
 engine.variable.setString('Greeting', 'Wish you were here!');
-// eslint-disable-next-line no-console
 console.log('Variables set successfully.');
 ```
 
@@ -119,22 +151,30 @@ console.log('Variables set successfully.');
 - CE.SDK automatically updates all text blocks using that variable
 - Tokens are case-sensitive; unmatched tokens render as literal text
 
-Variables are scene-scoped and persist when you save the template. Use `engine.variable.findAll()` to discover what variables a template expects.
+Variables are scene-scoped and persist when you save the template.
 
 [Learn more about text variables →](./create-templates/add-dynamic-content/text-variables.md)
 
 ## Placeholders
 
-Placeholders mark blocks as content slots that users or automation can replace. When you enable placeholder behavior on an image block, it displays an overlay pattern and replacement button in the editor.
+Placeholders mark blocks as content slots that users or automation can replace. When you enable placeholder behavior on an image block, it becomes a designated swap target.
+
+### Discovering Placeholders
+
+Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a loaded template:
+
+```typescript highlight-discover-placeholders
+// Discover placeholder blocks in the template
+// Placeholders mark content slots for user or automation replacement
+const placeholders = engine.block.findAllPlaceholders();
+console.log('Template placeholders:', placeholders.length);
+```
 
 **How placeholders work:**
 
 - Enable with `engine.block.setPlaceholderEnabled(block, true)`
-- Add visual UI with `engine.block.setPlaceholderBehaviorEnabled(fill, true)`
-- Users in Adopter mode can select and replace placeholder content
-- Other design elements remain locked
-
-Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a loaded template.
+- Placeholder blocks are marked for content replacement
+- You can programmatically replace placeholder content with new images or media
 
 [Learn more about placeholders →](./create-templates/add-dynamic-content/placeholders.md)
 
@@ -142,53 +182,57 @@ Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a
 
 Templates support several common workflows:
 
-### Form-Based Customization
-
-Load a template, present a form for variable values, and let users customize text while the design stays consistent. The editor UI handles placeholder replacement through drag-and-drop.
-
 ### Batch Generation
 
 Load a template programmatically, iterate through data records, set variables for each record, and export personalized designs. This powers use cases like certificates, badges, and personalized marketing.
 
 ### Design Systems
 
-Create template libraries where designers maintain approved layouts and end users customize within defined boundaries using variables and placeholders.
+Create template libraries where designers maintain approved layouts and automation populates them with data at scale.
 
-## Loading and Applying Templates
+### Content Personalization
 
-CE.SDK provides two approaches for working with templates:
+Load templates on the server, populate with user-specific data, and deliver personalized content without exposing the template structure.
 
-**Load a template** with `engine.scene.loadFromURL()` to replace the current scene entirely, including page dimensions:
+## Exporting Personalized Designs
 
-```typescript highlight-load-template
-// Load a postcard template from URL
-// Templates are scenes containing variable tokens and placeholder blocks
-const templateUrl =
-  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
-await engine.scene.loadFromURL(templateUrl);
+After populating variables, export the personalized design:
 
-// Zoom to show the full page in the viewport
-const page = engine.scene.getCurrentPage();
-if (page) {
-  await engine.scene.zoomToBlock(page, { padding: 40 });
-}
+```typescript highlight-export
+    // Export the personalized design to a PNG file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const pages = engine.scene.getPages();
+    const blob = await engine.block.export(pages[0], {
+      mimeType: 'image/png'
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/templating-personalized.png`, buffer);
+    console.log('Exported to output/templating-personalized.png');
 ```
 
-**Apply a template** with `engine.scene.applyTemplateFromURL()` to merge template content into an existing scene while preserving current page dimensions.
+Use `engine.block.export()` to render pages to PNG, JPEG, or PDF format. The exported blob can be saved to the file system or uploaded to cloud storage.
 
-[Learn more about importing templates →](./create-templates/import.md)
+## Engine Cleanup
+
+Always dispose of the engine when finished to free resources:
+
+```typescript highlight-cleanup
+engine.dispose();
+```
 
-## Creating Templates
+Use a `try/finally` block to ensure cleanup happens even if an error occurs during processing.
 
-Build templates by adding variable tokens to text blocks and configuring placeholder behavior on media blocks. Save with `engine.scene.saveToString()` or `engine.scene.saveToArchive()`.
 
-[Learn more about creating templates →](./create-templates/from-scratch.md)
 
 ---
 
 ## 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/concepts/terminology.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:** [Concepts](./concepts.md) > [Terminology](./concepts/terminology.md)
 
@@ -12,27 +12,27 @@ CE.SDK uses consistent terminology across all platforms. Understanding what we c
 
 ### Engine
 
-All operations—creating scenes, manipulating blocks, rendering, and exporting—go through the _Engine_. Initialize it once and use it throughout your application's lifecycle.
+All operations—creating scenes, manipulating blocks, rendering, and exporting—go through the *Engine*. Initialize it once and use it throughout your application's lifecycle.
 
 ### Scene
 
-The root container for all design content. A _Scene_ contains _Pages_, which contain _Blocks_. Only one _Scene_ can be active per _Engine_ instance. You can create a _Scene_ programmatically or load one from a file.
+The root container for all design content. A *Scene* contains *Pages*, which contain *Blocks*. Only one *Scene* can be active per *Engine* instance. You can create a *Scene* programmatically or load one from a file.
 
-_Scenes_ support both static designs (social posts, print materials, graphics) and time-based content (duration, playback time, animation).
+*Scenes* support both static designs (social posts, print materials, graphics) and time-based content (duration, playback time, animation).
 
 See [Scenes](./concepts/scenes.md) for details.
 
 ### Page
 
-_Pages_ are containers within a _Scene_ that hold content _Blocks_ (see below) and define working area dimensions.
+*Pages* are containers within a *Scene* that hold content *Blocks* (see below) and define working area dimensions.
 
-For static designs, pages are individual artboards. For video editing, pages are time-based compositions where _Blocks_ are arranged across time. See [Pages](./concepts/pages.md) for details.
+For static designs, pages are individual artboards. For video editing, pages are time-based compositions where *Blocks* are arranged across time. See [Pages](./concepts/pages.md) for details.
 
 ### Block
 
-The fundamental building unit in CE.SDK. Everything visible in a design is a _Block_—images, text, shapes, graphics, audio, video—and even _Pages_ themselves. _Blocks_ form a parent-child hierarchy.
+The fundamental building unit in CE.SDK. Everything visible in a design is a *Block*—images, text, shapes, graphics, audio, video—and even *Pages* themselves. *Blocks* form a parent-child hierarchy.
 
-Each _Block_ has two identifiers:
+Each *Block* has two identifiers:
 
 - **DesignBlockId**: A numeric handle (integer) used in API calls
 - **UUID**: A stable string identifier that persists across save and load operations
@@ -41,11 +41,11 @@ See [Blocks](./concepts/blocks.md) for details.
 
 ## Block Anatomy
 
-Modify a _Block's_ appearance and behavior by attaching _Fills_, _Shapes_, and _Effects_. Most of these modifiers must be created separately and then attached to a _Block_.
+Modify a *Block's* appearance and behavior by attaching *Fills*, *Shapes*, and *Effects*. Most of these modifiers must be created separately and then attached to a *Block*.
 
 ### Fill
 
-_Fills_ cover the surface of a _Block's_ shape:
+*Fills* cover the surface of a *Block's* shape:
 
 - **Color Fill**: Solid color
 - **Gradient Fill**: Linear, radial, or conical gradients
@@ -56,7 +56,7 @@ See the [Color Fills](./fills/color.md), [Gradient Fills](./filters-and-effects/
 
 ### Shape
 
-_Shapes_ define a _Block's_ outline and dimensions, determining the silhouette and how the _Fill_ is clipped. _Shape_ types include:
+*Shapes* define a *Block's* outline and dimensions, determining the silhouette and how the *Fill* is clipped. *Shape* types include:
 
 - **Rect**: Rectangles and squares
 - **Ellipse**: Circles and ovals
@@ -65,11 +65,11 @@ _Shapes_ define a _Block's_ outline and dimensions, determining the silhouette a
 - **Line**: Straight lines
 - **Vector Path**: Custom vector shapes
 
-Like _Fills_, _Shapes_ are created separately and attached to _Blocks_. See [Shapes](./shapes.md) for details.
+Like *Fills*, *Shapes* are created separately and attached to *Blocks*. See [Shapes](./shapes.md) for details.
 
 ### Effect
 
-_Effects_ are non-destructive visual modifications applied to a _Block_. Multiple _Effects_ can be stacked. _Effect_ categories include:
+*Effects* are non-destructive visual modifications applied to a *Block*. Multiple *Effects* can be stacked. *Effect* categories include:
 
 - **Adjustments**: Brightness, contrast, saturation, and other image corrections
 - **Filters**: LUT-based color grading, duotone
@@ -83,7 +83,7 @@ The order determines how multiple effects attached to a single block interact. S
 
 ### Blur
 
-A modifier that reduces sharpness. _Blur_ types include:
+A modifier that reduces sharpness. *Blur* types include:
 
 - **Uniform Blur**: Even blur across the entire block
 - **Radial Blur**: Circular blur from a center point
@@ -95,17 +95,17 @@ See [Blur](./filters-and-effects/blur.md) for details.
 
 ### Drop Shadow
 
-A built-in block property (not an _Effect_) that renders a shadow beneath blocks. _Drop Shadow_ has dedicated API methods for enabling, color, offset, and blur radius.
+A built-in block property (not an *Effect*) that renders a shadow beneath blocks. *Drop Shadow* has dedicated API methods for enabling, color, offset, and blur radius.
 
 > **Warning:** Unlike effects, drop shadow is configured directly on the block rather than created and attached separately.
 
 ## Block Handling
 
-These terms describe how _Blocks_ are categorized and identified.
+These terms describe how *Blocks* are categorized and identified.
 
 ### Type
 
-The built-in _Type_ defines a _Block's_ core behavior and available properties. _Type_ is immutable—you choose it when creating the _Block_.
+The built-in *Type* defines a *Block's* core behavior and available properties. *Type* is immutable—you choose it when creating the *Block*.
 
 - `//ly.img.ubq/graphic` — Visual block for images, shapes, and graphics
 - `//ly.img.ubq/text` — Text content
@@ -120,11 +120,11 @@ The built-in _Type_ defines a _Block's_ core behavior and available properties.
 - `//ly.img.ubq/caption` — Caption/subtitle block
 - `//ly.img.ubq/captionTrack` — Track for captions
 
-The _Type_ determines which properties and capabilities a _Block_ has.
+The *Type* determines which properties and capabilities a *Block* has.
 
 ### Kind
 
-A custom string label you assign to categorize _Blocks_ for your application. Unlike _Type_, _Kind_ is mutable and application-defined. Changing the _Kind_ has no effect on appearance or behavior at the engine level. You can query and search for _Blocks_ by _Kind_. Common uses:
+A custom string label you assign to categorize *Blocks* for your application. Unlike *Type*, *Kind* is mutable and application-defined. Changing the *Kind* has no effect on appearance or behavior at the engine level. You can query and search for *Blocks* by *Kind*. Common uses:
 
 - Categorizing template elements ("logo", "headline", "background")
 - Filtering blocks for custom UI
@@ -132,41 +132,41 @@ A custom string label you assign to categorize _Blocks_ for your application. Un
 
 ### Property
 
-A configurable attribute of a _Block_. _Properties_ have types (`Bool`, `Int`, `Float`, `String`, `Color`, `Enum`) and paths like `text/fontSize` or `fill/image/imageFileURI`.
+A configurable attribute of a *Block*. *Properties* have types (`Bool`, `Int`, `Float`, `String`, `Color`, `Enum`) and paths like `text/fontSize` or `fill/image/imageFileURI`.
 
-Access _Properties_ using type-specific getter and setter methods. Each _Block_ type exposes different properties, which you can discover programmatically. See [Blocks](./concepts/blocks.md) for details.
+Access *Properties* using type-specific getter and setter methods. Each *Block* type exposes different properties, which you can discover programmatically. See [Blocks](./concepts/blocks.md) for details.
 
 ## Assets and Resources
 
 ### Asset
 
-Think of _Assets_ as media items that you can provide to your users: images, videos, audio files, fonts, stickers, or templates—anything that can be added to a design. _Assets_ have metadata including:
+Think of *Assets* as media items that you can provide to your users: images, videos, audio files, fonts, stickers, or templates—anything that can be added to a design. *Assets* have metadata including:
 
 - **ID**: Unique identifier within an asset source
 - **Label**: Display name
 - **Meta**: Custom metadata (URI, dimensions, format)
 - **Thumbnail URI**: Preview image URL
 
-_Assets_ are provided by _Asset Sources_ and added through the UI or programmatically.
+*Assets* are provided by *Asset Sources* and added through the UI or programmatically.
 
 ### Asset Source
 
-A provider of _Assets_. _Asset Sources_ can be built-in (like the default sticker library) or custom. _Asset Sources_ implement a query interface returning paginated results with search and filtering.
+A provider of *Assets*. *Asset Sources* can be built-in (like the default sticker library) or custom. *Asset Sources* implement a query interface returning paginated results with search and filtering.
 
 - **Local Asset Source**: Assets defined in JSON, loaded at initialization
 - **Remote Asset Source**: Custom implementation fetching from external APIs
 
-Register _Asset Sources_ with the _Engine_ to make _Assets_ available throughout your application.
+Register *Asset Sources* with the *Engine* to make *Assets* available throughout your application.
 
 ### Resource
 
-Loaded data from an _Asset_ URI. When you reference an image or video URL in a _Block_, the _Engine_ fetches and caches the _Resource_. _Resources_ include binary data and metadata for rendering. See [Resources](./concepts/resources.md) for details.
+Loaded data from an *Asset* URI. When you reference an image or video URL in a *Block*, the *Engine* fetches and caches the *Resource*. *Resources* include binary data and metadata for rendering. See [Resources](./concepts/resources.md) for details.
 
 ### Buffer
 
-A resizable container for arbitrary binary data. _Buffers_ are useful for dynamically generated content that doesn't come from a URL, such as synthesized audio or programmatically created images.
+A resizable container for arbitrary binary data. *Buffers* are useful for dynamically generated content that doesn't come from a URL, such as synthesized audio or programmatically created images.
 
-Create a _Buffer_, write data to it, and reference it by URI in _Block_ properties. _Buffer_ data is not serialized with scenes and changes cannot be undone. See [Buffers](./concepts/buffers.md) for details.
+Create a *Buffer*, write data to it, and reference it by URI in *Block* properties. *Buffer* data is not serialized with scenes and changes cannot be undone. See [Buffers](./concepts/buffers.md) for details.
 
 ## Templating and Automation
 
@@ -174,21 +174,21 @@ These terms describe dynamic content and reusable designs.
 
 ### Template
 
-A reusable design with predefined structure and styling. _Templates_ typically contain _Placeholders_ and _Variables_ that users customize while maintaining overall layout and branding.
+A reusable design with predefined structure and styling. *Templates* typically contain *Placeholders* and *Variables* that users customize while maintaining overall layout and branding.
 
-_Templates_ are scenes saved in a format that can be loaded and modified.
+*Templates* are scenes saved in a format that can be loaded and modified.
 
 ### Placeholder
 
-A _Block_ marked for content replacement. When a _Block's_ placeholder property is enabled, it signals that the _Block_ expects user-provided content—an image drop zone or editable text field.
+A *Block* marked for content replacement. When a *Block's* placeholder property is enabled, it signals that the *Block* expects user-provided content—an image drop zone or editable text field.
 
-_Placeholders_ indicate which parts of a design should be customized versus fixed. See [Placeholders](./create-templates/add-dynamic-content/placeholders.md) for details.
+*Placeholders* indicate which parts of a design should be customized versus fixed. See [Placeholders](./create-templates/add-dynamic-content/placeholders.md) for details.
 
 ### Variable
 
-A named value referenced in text blocks using `{{variableName}}` syntax. _Variables_ enable data-driven design generation by populating templates with dynamic content.
+A named value referenced in text blocks using `{{variableName}}` syntax. *Variables* enable data-driven design generation by populating templates with dynamic content.
 
-Define _Variables_ at the scene level and reference them in text blocks. When a _Variable_ value changes, all referencing text blocks update automatically. See [Text Variables](./create-templates/add-dynamic-content/text-variables.md) for details.
+Define *Variables* at the scene level and reference them in text blocks. When a *Variable* value changes, all referencing text blocks update automatically. See [Text Variables](./create-templates/add-dynamic-content/text-variables.md) for details.
 
 ## Permissions and Scopes
 
@@ -196,7 +196,7 @@ These terms relate to controlling what operations are allowed.
 
 ### Scope
 
-A permission setting controlling whether specific operations are allowed on a _Block_. _Scopes_ enable fine-grained control over what users can modify—essential for template workflows where some elements should be editable and others locked.
+A permission setting controlling whether specific operations are allowed on a *Block*. *Scopes* enable fine-grained control over what users can modify—essential for template workflows where some elements should be editable and others locked.
 
 Common scopes:
 
@@ -207,16 +207,16 @@ Common scopes:
 - `lifecycle/destroy` — Allow or prevent deletion
 - `editor/select` — Allow or prevent selection
 
-Enable or disable _Scopes_ per _Block_ to create controlled editing experiences. See [Lock Design Elements](./create-templates/lock.md) for details.
+Enable or disable *Scopes* per *Block* to create controlled editing experiences. See [Lock Design Elements](./create-templates/lock.md) for details.
 
 ### Role
 
-A preset collection of _Scope_ settings. CE.SDK defines two built-in _Roles_:
+A preset collection of *Scope* settings. CE.SDK defines two built-in *Roles*:
 
 - **Creator**: Full access to all operations, for template authors
 - **Adopter**: Restricted access for end-users customizing templates
 
-_Roles_ provide a convenient way to apply consistent permission sets.
+*Roles* provide a convenient way to apply consistent permission sets.
 
 ## Layout and Units
 
@@ -224,7 +224,7 @@ These terms relate to positioning and measurement.
 
 ### Design Unit
 
-The measurement unit for dimensions in a _Scene_. The choice affects how positions, sizes, and exports are interpreted. Options:
+The measurement unit for dimensions in a *Scene*. The choice affects how positions, sizes, and exports are interpreted. Options:
 
 - **Pixel**: Screen pixels, default for digital designs
 - **Millimeter**: Metric measurement for print
@@ -244,7 +244,7 @@ These terms describe how CE.SDK runs.
 
 ### Scene Capabilities
 
-Every _Scene_ supports the full range of features:
+Every *Scene* supports the full range of features:
 
 - **Static designs**: Content arranged spatially on pages.
 - **Video editing**: Blocks can have duration, time offset, playback time, and animation properties.
@@ -260,7 +260,7 @@ Running CE.SDK without the built-in UI. Used for:
 - Custom UI implementations
 - Batch processing
 
-In _Headless Mode_, you work directly with _Engine_ APIs without the visual editor. See [Headless Mode](./concepts/headless-mode/browser.md) for setup.
+In *Headless Mode*, you work directly with *Engine* APIs without the visual editor. See [Headless Mode](./concepts/headless-mode.md) for setup.
 
 ## Events and State
 
@@ -268,7 +268,7 @@ These terms relate to monitoring changes.
 
 ### Event / Subscription
 
-A callback mechanism for reacting to changes in the _Engine_. Subscribe to events and receive notifications when state changes. Common events:
+A callback mechanism for reacting to changes in the *Engine*. Subscribe to events and receive notifications when state changes. Common events:
 
 - Selection changes
 - Block state changes
@@ -278,19 +278,21 @@ Subscriptions return an unsubscribe function to call when you no longer need not
 
 ### Block State
 
-The current status of a _Block_ indicating readiness or issues:
+The current status of a *Block* indicating readiness or issues:
 
 - **Ready**: Normal state, no pending operations
 - **Pending**: Operation in progress, with optional progress value (0-1)
 - **Error**: Operation failed, with error type (`ImageDecoding`, `VideoDecoding`, `FileFetch`, etc.)
 
-_Block State_ reflects the combined status of the _Block_ and its attached _Fill_, _Shape_, and _Effects_.
+*Block State* reflects the combined status of the *Block* and its attached *Fill*, *Shape*, and *Effects*.
+
+
 
 ---
 
 ## 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