@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/stickers-and-shapes/create-edit/vector-edit.md

@@ -0,0 +1,362 @@
+> 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 guide shows how to use the vector edit APIs to enter path editing mode, switch between move, bend, add and delete modes, control bezier handle mirroring, and manage anchor points on any shape.
+
+> **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-stickers-and-shapes-vector-edit-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-stickers-and-shapes-vector-edit-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-vector-edit-browser/)
+
+Vector edit mode lets you modify any shape at the path level. When you enter vector edit mode on a shape, CE.SDK converts it to a vector path and exposes its anchor points and bezier handles for direct manipulation.
+
+```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-vector-edit-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import {
+  BlurAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+
+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());
+
+    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());
+
+    // Enable vector path editing feature
+    cesdk.feature.enable('ly.img.shape.edit');
+
+    await cesdk.actions.run('scene.create', {
+      page: { width: 100, height: 100, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Create a graphic block with a star shape
+    const graphic = engine.block.create('graphic');
+    const starShape = engine.block.createShape('star');
+    engine.block.setShape(graphic, starShape);
+
+    const solidFill = engine.block.createFill('color');
+    engine.block.setFill(graphic, solidFill);
+    engine.block.setWidth(graphic, 60);
+    engine.block.setHeight(graphic, 60);
+    engine.block.appendChild(page, graphic);
+    engine.block.setPositionX(graphic, 20);
+    engine.block.setPositionY(graphic, 20);
+
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+
+    // Select the graphic block and enter vector edit mode.
+    // This converts the shape to a vector path so you can
+    // manipulate individual anchor points and curves.
+    engine.block.select(graphic);
+    engine.editor.setEditMode('Vector');
+
+    // Move mode (default): select and drag anchor points.
+    // All mode flags start as false — move mode is active
+    // when none of the other modes are set.
+
+    // Bend mode: drag path segments to pull out bezier handles.
+    engine.editor.setVectorEditBendMode(true);
+    engine.editor.getVectorEditBendMode(); // true
+
+    // Add mode: click on a path segment to insert a new anchor point.
+    engine.editor.setVectorEditBendMode(false);
+    engine.editor.setVectorEditAddMode(true);
+    engine.editor.getVectorEditAddMode(); // true
+
+    // Delete mode: click an anchor point to remove it from the path.
+    engine.editor.setVectorEditAddMode(false);
+    engine.editor.setVectorEditDeleteMode(true);
+    engine.editor.getVectorEditDeleteMode(); // true
+
+    // Return to move mode by clearing all flags.
+    engine.editor.setVectorEditDeleteMode(false);
+
+    // Mirror mode controls how bezier handles behave when you
+    // adjust one side of an anchor point.
+    // 0 = None: handles move independently.
+    // 1 = Angle & Length: handles mirror both angle and length.
+    // 2 = Angle Only: handles mirror angle but keep their own length.
+    if (engine.editor.hasSelectedVectorNode()) {
+      engine.editor.setSelectedVectorNodeMirrorMode(1);
+      engine.editor.getSelectedVectorNodeMirrorMode(); // 1
+
+      // Toggle smooth/sharp for the selected node.
+      engine.editor.toggleSelectedVectorNodeSmooth();
+    }
+
+    // Query whether any vector anchor node is currently selected.
+    engine.editor.hasSelectedVectorNode();
+
+    // Insert a new anchor point at the midpoint of the
+    // selected segment (only works in add mode).
+    engine.editor.setVectorEditAddMode(true);
+    // engine.editor.addVectorNode();
+
+    // Remove the currently selected anchor point from the path.
+    // engine.editor.deleteVectorNode();
+    engine.editor.setVectorEditAddMode(false);
+
+    // Exit vector edit mode and return to the normal transform mode.
+    engine.editor.setEditMode('Transform');
+  }
+}
+
+export default Example;
+```
+
+## Setup
+
+Before using vector edit, enable the `ly.img.shape.edit` feature flag. This flag is disabled by default and must be explicitly enabled. The design editor and video editor starter kits enable it automatically.
+
+```typescript highlight-setup
+await cesdk.addPlugin(new DesignEditorConfig());
+
+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());
+
+// Enable vector path editing feature
+cesdk.feature.enable('ly.img.shape.edit');
+
+await cesdk.actions.run('scene.create', {
+  page: { width: 100, height: 100, unit: 'Pixel' }
+});
+
+const engine = cesdk.engine;
+const page = engine.block.findByType('page')[0];
+
+// Create a graphic block with a star shape
+const graphic = engine.block.create('graphic');
+const starShape = engine.block.createShape('star');
+engine.block.setShape(graphic, starShape);
+
+const solidFill = engine.block.createFill('color');
+engine.block.setFill(graphic, solidFill);
+engine.block.setWidth(graphic, 60);
+engine.block.setHeight(graphic, 60);
+engine.block.appendChild(page, graphic);
+engine.block.setPositionX(graphic, 20);
+engine.block.setPositionY(graphic, 20);
+
+await engine.scene.zoomToBlock(page, { padding: 40 });
+```
+
+## Entering Vector Edit Mode
+
+Select a block that supports shapes and call `engine.editor.setEditMode('Vector')`. CE.SDK converts the current shape to a vector path so you can manipulate individual anchor points and curves.
+
+```typescript highlight-enterVectorEdit
+// Select the graphic block and enter vector edit mode.
+// This converts the shape to a vector path so you can
+// manipulate individual anchor points and curves.
+engine.block.select(graphic);
+engine.editor.setEditMode('Vector');
+```
+
+## Edit Modes
+
+Vector edit provides four mutually exclusive modes. Only one can be active at a time — setting a new mode clears the others. When all mode flags are `false`, you are in the default **move mode**.
+
+| Mode   | Purpose                                              |
+| ------ | ---------------------------------------------------- |
+| Move   | Select and drag anchor points and control handles    |
+| Bend   | Drag path segments to pull out bezier handles        |
+| Add    | Click on a path segment to insert a new anchor point |
+| Delete | Click an anchor point to remove it from the path     |
+
+```typescript highlight-modes
+// Move mode (default): select and drag anchor points.
+// All mode flags start as false — move mode is active
+// when none of the other modes are set.
+
+// Bend mode: drag path segments to pull out bezier handles.
+engine.editor.setVectorEditBendMode(true);
+engine.editor.getVectorEditBendMode(); // true
+
+// Add mode: click on a path segment to insert a new anchor point.
+engine.editor.setVectorEditBendMode(false);
+engine.editor.setVectorEditAddMode(true);
+engine.editor.getVectorEditAddMode(); // true
+
+// Delete mode: click an anchor point to remove it from the path.
+engine.editor.setVectorEditAddMode(false);
+engine.editor.setVectorEditDeleteMode(true);
+engine.editor.getVectorEditDeleteMode(); // true
+
+// Return to move mode by clearing all flags.
+engine.editor.setVectorEditDeleteMode(false);
+```
+
+## Mirror Mode
+
+Mirror mode controls how the two bezier handles of an anchor point behave when you adjust one of them.
+
+| Value | Name           | Behavior                                              |
+| ----- | -------------- | ----------------------------------------------------- |
+| `0`   | None           | Handles move independently                            |
+| `1`   | Angle & Length | Handles mirror both direction and distance            |
+| `2`   | Angle Only     | Handles mirror direction but keep independent lengths |
+
+Use `toggleSelectedVectorNodeSmooth()` to quickly switch between a sharp corner (no handles) and a smooth curve.
+
+```typescript highlight-mirrorMode
+// Mirror mode controls how bezier handles behave when you
+// adjust one side of an anchor point.
+// 0 = None: handles move independently.
+// 1 = Angle & Length: handles mirror both angle and length.
+// 2 = Angle Only: handles mirror angle but keep their own length.
+if (engine.editor.hasSelectedVectorNode()) {
+  engine.editor.setSelectedVectorNodeMirrorMode(1);
+  engine.editor.getSelectedVectorNodeMirrorMode(); // 1
+
+  // Toggle smooth/sharp for the selected node.
+  engine.editor.toggleSelectedVectorNodeSmooth();
+}
+```
+
+## Node Operations
+
+Use these APIs to query selection state and add or remove anchor points programmatically.
+
+```typescript highlight-nodeOperations
+// Query whether any vector anchor node is currently selected.
+engine.editor.hasSelectedVectorNode();
+
+// Insert a new anchor point at the midpoint of the
+// selected segment (only works in add mode).
+engine.editor.setVectorEditAddMode(true);
+// engine.editor.addVectorNode();
+
+// Remove the currently selected anchor point from the path.
+// engine.editor.deleteVectorNode();
+engine.editor.setVectorEditAddMode(false);
+```
+
+## Exiting Vector Edit Mode
+
+Call `engine.editor.setEditMode('Transform')` to leave vector edit mode and return to the normal transform controls.
+
+```typescript highlight-exitVectorEdit
+// Exit vector edit mode and return to the normal transform mode.
+engine.editor.setEditMode('Transform');
+```
+
+## Keyboard Shortcuts
+
+In the built-in editor UI, vector edit mode supports keyboard shortcuts:
+
+- **Backspace / Delete** removes the selected anchor point from the path.
+
+## Troubleshooting
+
+### Edit Path Button Not Visible
+
+- Ensure the `ly.img.shape.edit` feature flag is enabled via `cesdk.feature.enable('ly.img.shape.edit')`.
+- Verify the selected block supports shapes: `engine.block.supportsShape(block)` must return `true`.
+
+### Shape Not Converting
+
+- Only blocks with a valid shape can enter vector edit mode. If the block has no shape, create and assign one first using `engine.block.createShape()` and `engine.block.setShape()`.
+
+## API Reference
+
+| Method                                                | Category  | Purpose                           |
+| ----------------------------------------------------- | --------- | --------------------------------- |
+| `engine.editor.setEditMode('Vector')`                 | Mode      | Enter vector edit mode            |
+| `engine.editor.setEditMode('Transform')`              | Mode      | Exit vector edit mode             |
+| `engine.editor.setVectorEditBendMode(flag)`           | Mode      | Enable or disable bend mode       |
+| `engine.editor.getVectorEditBendMode()`               | Mode      | Query bend mode state             |
+| `engine.editor.setVectorEditAddMode(flag)`            | Mode      | Enable or disable add mode        |
+| `engine.editor.getVectorEditAddMode()`                | Mode      | Query add mode state              |
+| `engine.editor.setVectorEditDeleteMode(flag)`         | Mode      | Enable or disable delete mode     |
+| `engine.editor.getVectorEditDeleteMode()`             | Mode      | Query delete mode state           |
+| `engine.editor.hasSelectedVectorNode()`               | Selection | Check if an anchor is selected    |
+| `engine.editor.addVectorNode()`                       | Edit      | Insert anchor at segment midpoint |
+| `engine.editor.deleteVectorNode()`                    | Edit      | Remove selected anchor            |
+| `engine.editor.toggleSelectedVectorNodeSmooth()`      | Edit      | Toggle smooth/sharp anchor        |
+| `engine.editor.setSelectedVectorNodeMirrorMode(mode)` | Edit      | Set handle mirror behavior        |
+| `engine.editor.getSelectedVectorNodeMirrorMode()`     | Edit      | Query handle mirror mode          |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/stickers-and-shapes/insert-qr-code.md

@@ -0,0 +1,208 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Shapes](./shapes.md) > [Insert QR Code](./stickers-and-shapes/insert-qr-code.md) > [Plugins](./plugins.md) > [QR Code](./stickers-and-shapes/insert-qr-code.md)
+
+---
+
+Add scannable QR codes to designs programmatically using image fills.
+
+![QR code demonstration showing image fill approach](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-stickers-and-shapes-insert-qr-code-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-stickers-and-shapes-insert-qr-code-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-insert-qr-code-browser/)
+
+QR codes encode URLs that mobile devices can scan, making them useful for marketing materials, business cards, event posters, and product packaging. This guide shows how to generate QR codes as images and add them to CE.SDK designs.
+
+> **Note:** For a simpler integration, consider using the official [@imgly/plugin-qr-code-web](https://www.npmjs.com/package/@imgly/plugin-qr-code-web) plugin which provides ready-to-use QR code functionality.
+
+```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-insert-qr-code-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import {
+  BlurAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+import { generateQRCodeDataURL } from './qr-utils';
+
+class Example implements EditorPlugin {
+  name = packageJson.name;
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    await cesdk.addPlugin(new DesignEditorConfig());
+
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({ include: ['ly.img.image.upload'] })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: [
+          'ly.img.templates.blank.*',
+          'ly.img.templates.presentation.*',
+          'ly.img.templates.print.*',
+          'ly.img.templates.social.*',
+          'ly.img.image.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new EffectsAssetSource());
+    await cesdk.addPlugin(new FiltersAssetSource());
+    await cesdk.addPlugin(new PagePresetsAssetSource());
+    await cesdk.addPlugin(new StickerAssetSource());
+    await cesdk.addPlugin(new TextAssetSource());
+    await cesdk.addPlugin(new TextComponentAssetSource());
+    await cesdk.addPlugin(new TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+
+    await cesdk.actions.run('scene.create', {
+      page: { width: 800, height: 600, unit: 'Pixel' }
+    });
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    const qrSize = 200;
+
+    // ===== Demonstration: QR Code as Image Fill =====
+    // Generate QR code as data URL image with custom colors
+    const qrImageUrl = await generateQRCodeDataURL('https://img.ly', {
+      width: 256,
+      color: { dark: '#1a5fb4', light: '#ffffff' }
+    });
+
+    // Create graphic block with rectangle shape and image fill
+    const imageQrBlock = engine.block.create('graphic');
+    const rectShape = engine.block.createShape('rect');
+    engine.block.setShape(imageQrBlock, rectShape);
+
+    // Create image fill with QR code data URL
+    const imageFill = engine.block.createFill('image');
+    engine.block.setString(imageFill, 'fill/image/imageFileURI', qrImageUrl);
+    engine.block.setFill(imageQrBlock, imageFill);
+
+    // Set dimensions and position for image-based QR code
+    engine.block.setWidth(imageQrBlock, qrSize);
+    engine.block.setHeight(imageQrBlock, qrSize);
+    engine.block.setPositionX(imageQrBlock, 300);
+    engine.block.setPositionY(imageQrBlock, 200);
+
+    // Add to page
+    engine.block.appendChild(page, imageQrBlock);
+
+    // Add label for the QR code
+    const textBlock = engine.block.create('text');
+    engine.block.replaceText(textBlock, 'Image Fill');
+    engine.block.setFloat(textBlock, 'text/fontSize', 69);
+    engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(textBlock, 300);
+    engine.block.setPositionX(textBlock, 250);
+    engine.block.setPositionY(textBlock, 420);
+    engine.block.appendChild(page, textBlock);
+
+    // Zoom to fit all content
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+  }
+}
+
+export default Example;
+```
+
+## Generating QR Code Images
+
+Use a QR code library like `qrcode` to generate QR codes as data URLs with custom colors.
+
+```typescript highlight-generate-image
+// Generate QR code as data URL image with custom colors
+const qrImageUrl = await generateQRCodeDataURL('https://img.ly', {
+  width: 256,
+  color: { dark: '#1a5fb4', light: '#ffffff' }
+});
+```
+
+The `toDataURL` method creates a base64-encoded image that works directly with CE.SDK's image fill. You can customize the colors at generation time.
+
+## Creating a QR Code Block
+
+Create a graphic block with a rectangle shape and apply the QR code as an image fill.
+
+```typescript highlight-create-image-block
+// Create graphic block with rectangle shape and image fill
+const imageQrBlock = engine.block.create('graphic');
+const rectShape = engine.block.createShape('rect');
+engine.block.setShape(imageQrBlock, rectShape);
+
+// Create image fill with QR code data URL
+const imageFill = engine.block.createFill('image');
+engine.block.setString(imageFill, 'fill/image/imageFileURI', qrImageUrl);
+engine.block.setFill(imageQrBlock, imageFill);
+```
+
+Image fills use a rectangle shape with the QR code as the fill content. This approach is straightforward and supports color customization at generation time.
+
+## Positioning and Sizing
+
+Set the QR code dimensions and position on the page.
+
+```typescript highlight-position-image
+// Set dimensions and position for image-based QR code
+engine.block.setWidth(imageQrBlock, qrSize);
+engine.block.setHeight(imageQrBlock, qrSize);
+engine.block.setPositionX(imageQrBlock, 300);
+engine.block.setPositionY(imageQrBlock, 200);
+
+// Add to page
+engine.block.appendChild(page, imageQrBlock);
+```
+
+Maintain a square aspect ratio by setting equal width and height. For reliable scanning, keep QR codes at least 100x100 pixels.
+
+## API Reference
+
+| Method                                                       | Category  | Purpose                          |
+| ------------------------------------------------------------ | --------- | -------------------------------- |
+| `engine.block.create('graphic')`                             | Creation  | Create graphic block for QR code |
+| `engine.block.createShape('rect')`                           | Shapes    | Create rectangle shape           |
+| `engine.block.setShape(id, shape)`                           | Shapes    | Apply shape to graphic block     |
+| `engine.block.createFill('image')`                           | Fills     | Create image fill                |
+| `engine.block.setString(id, 'fill/image/imageFileURI', uri)` | Fills     | Set image data URL               |
+| `engine.block.setFill(id, fill)`                             | Fills     | Apply fill to block              |
+| `engine.block.setWidth(id, width)`                           | Transform | Set QR code width                |
+| `engine.block.setHeight(id, height)`                         | Transform | Set QR code height               |
+| `engine.block.setPositionX(id, x)`                           | Transform | Set horizontal position          |
+| `engine.block.setPositionY(id, y)`                           | Transform | Set vertical position            |
+| `engine.block.appendChild(parent, child)`                    | Hierarchy | Add QR code to page              |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/stickers.md

@@ -0,0 +1,21 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Stickers](./stickers.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Create Stickers](./stickers-and-shapes/create-edit/create-stickers.md) - Create stickers in CE.SDK using image fills for icons, logos, emoji, and multi-color graphics
+- [Create Cutout](./stickers-and-shapes/create-cutout.md) - Create cutout paths for cutting printers to produce die-cut stickers, iron-on decals, and custom-shaped prints.
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support