@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/export-save-publish/export/to-pdf.md

@@ -0,0 +1,389 @@
+> 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) > [Export Media Assets](./export-save-publish/export.md) > [To PDF](./export-save-publish/export/to-pdf.md)
+
+---
+
+Export your designs as PDF documents with high compatibility mode and underlayer support for special media printing.
+
+![Export to PDF hero image](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-export-save-publish-export-to-pdf-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-pdf-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-pdf-browser/)
+
+PDF provides a universal document format for sharing and printing designs. CE.SDK exports PDF files that preserve vector graphics, support multi-page documents, and include options for print compatibility. You can configure high compatibility mode to ensure consistent rendering across different PDF viewers, and generate underlayers for special media printing like fabric, glass, or DTF transfers.
+
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-pdf-browser/browser.ts reference-only
+import { type EditorPlugin, type 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';
+
+/**
+ * CE.SDK Plugin: Export to PDF Guide
+ *
+ * This example demonstrates:
+ * - Exporting designs as PDF documents
+ * - Configuring high compatibility mode for consistent rendering
+ * - Generating underlayers for special media printing
+ * - Controlling output dimensions
+ * - Using the built-in export action
+ */
+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());
+
+    const engine = cesdk.engine;
+
+    // Load a template scene and zoom to fit
+    await engine.scene.loadFromURL(
+      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+    );
+    const page = engine.scene.getCurrentPage();
+    if (!page) throw new Error('No page found');
+
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+
+    // Register a custom export action with PDF-specific options
+    cesdk.actions.register('exportDesign', async () => {
+      // Export the scene block to include all pages in the PDF
+      const scene = engine.scene.get()!;
+
+      // Merge PDF-specific defaults with provided options
+      const blob = await engine.block.export(scene, {
+        mimeType: 'application/pdf',
+        exportPdfWithHighCompatibility: true
+      });
+
+      await cesdk.utils.downloadFile(blob, 'application/pdf');
+    });
+
+    // Configure navigation bar with export buttons using insertOrderComponent
+    cesdk.ui.insertOrderComponent(
+      { in: 'ly.img.navigation.bar', position: 'end' },
+      {
+        id: 'ly.img.actions.navigationBar',
+        children: [
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-pdf',
+            label: 'PDF',
+            icon: '@imgly/Download',
+            onClick: async () => {
+              // Export scene to include all pages in the PDF
+              const scene = engine.scene.get()!;
+              // Export scene as PDF (includes all pages)
+              const pdfBlob = await engine.block.export(scene, {
+                mimeType: 'application/pdf'
+              });
+              // Download using CE.SDK utils
+              await cesdk.utils.downloadFile(pdfBlob, 'application/pdf');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-high-compat',
+            label: 'High Compat',
+            icon: '@imgly/Download',
+            onClick: async () => {
+              // Export scene to include all pages in the PDF
+              const scene = engine.scene.get()!;
+              // Enable high compatibility mode for consistent rendering across PDF viewers
+              // This rasterizes complex elements like gradients with transparency at scene DPI
+              const pdfBlob = await engine.block.export(scene, {
+                mimeType: 'application/pdf',
+                exportPdfWithHighCompatibility: true
+              });
+              await cesdk.utils.downloadFile(pdfBlob, 'application/pdf');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-underlayer',
+            label: 'Underlayer',
+            icon: '@imgly/Download',
+            onClick: async () => {
+              // Export scene to include all pages in the PDF
+              const scene = engine.scene.get()!;
+              // Define the underlayer spot color before export
+              // RGB values (0.8, 0.8, 0.8) provide a preview representation
+              engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8);
+
+              // Export with underlayer for special media printing
+              const pdfBlob = await engine.block.export(scene, {
+                mimeType: 'application/pdf',
+                exportPdfWithHighCompatibility: true,
+                exportPdfWithUnderlayer: true,
+                underlayerSpotColorName: 'RDG_WHITE',
+                // Negative offset shrinks underlayer to prevent visible edges
+                underlayerOffset: -2.0
+              });
+              await cesdk.utils.downloadFile(pdfBlob, 'application/pdf');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-a4',
+            label: 'A4 @ 300 DPI',
+            icon: '@imgly/Download',
+            onClick: async () => {
+              // Export scene to include all pages in the PDF
+              const scene = engine.scene.get()!;
+              // Export with specific dimensions for print output
+              const pdfBlob = await engine.block.export(scene, {
+                mimeType: 'application/pdf',
+                targetWidth: 2480, // A4 at 300 DPI (210mm)
+                targetHeight: 3508 // A4 at 300 DPI (297mm)
+              });
+              await cesdk.utils.downloadFile(pdfBlob, 'application/pdf');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-action',
+            label: 'Export',
+            icon: '@imgly/Download',
+            onClick: () => {
+              // Run built-in export with PDF format
+              cesdk.actions.run('exportDesign', {
+                mimeType: 'application/pdf'
+              });
+            }
+          }
+        ]
+      }
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers exporting designs to PDF format, configuring high compatibility mode, generating underlayers with spot colors, and controlling output dimensions.
+
+## Export to PDF
+
+Call `engine.block.export()` with `mimeType: 'application/pdf'` to export any block as a PDF document. The method returns a Blob containing the PDF data.
+
+```typescript highlight=highlight-export-pdf
+// Export scene as PDF (includes all pages)
+const pdfBlob = await engine.block.export(scene, {
+  mimeType: 'application/pdf'
+});
+```
+
+Pass the scene ID from `engine.scene.get()` to export all pages as a multi-page PDF. You can also pass a single page ID from `engine.scene.getCurrentPage()` if you only need to export one page.
+
+## Configure High Compatibility Mode
+
+Enable `exportPdfWithHighCompatibility` to rasterize complex elements like gradients with transparency at the scene's DPI. This ensures consistent rendering across all PDF viewers.
+
+```typescript highlight=highlight-high-compatibility
+// Enable high compatibility mode for consistent rendering across PDF viewers
+// This rasterizes complex elements like gradients with transparency at scene DPI
+const pdfBlob = await engine.block.export(scene, {
+  mimeType: 'application/pdf',
+  exportPdfWithHighCompatibility: true
+});
+```
+
+Use high compatibility mode when:
+
+- Designs contain gradients with transparency
+- Effects or blend modes render inconsistently across viewers
+- Maximum compatibility matters more than vector precision
+
+High compatibility mode increases file size because complex elements are converted to raster images rather than remaining as vectors.
+
+## Generate Underlayers for Special Media
+
+Underlayers provide a base ink layer (typically white) for printing on transparent or non-white substrates like fabric, glass, or acrylic. The underlayer sits behind your design elements and provides opacity on transparent materials.
+
+### Define the Underlayer Spot Color
+
+Before exporting, define a spot color that represents the underlayer ink. The RGB values provide a preview representation in PDF viewers.
+
+```typescript highlight=highlight-spot-color
+// Define the underlayer spot color before export
+// RGB values (0.8, 0.8, 0.8) provide a preview representation
+engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8);
+```
+
+The spot color name (e.g., `'RDG_WHITE'`) must match your print provider's requirements. Common names include `RDG_WHITE` for Roland DG printers and `White` for other systems.
+
+### Export with Underlayer Options
+
+Configure the underlayer spot color name and optional offset. The `underlayerOffset` adjusts the underlayer size in design units—negative values shrink it inward to prevent visible edges from print misalignment (trapping).
+
+```typescript highlight=highlight-underlayer
+// Export with underlayer for special media printing
+const pdfBlob = await engine.block.export(scene, {
+  mimeType: 'application/pdf',
+  exportPdfWithHighCompatibility: true,
+  exportPdfWithUnderlayer: true,
+  underlayerSpotColorName: 'RDG_WHITE',
+  // Negative offset shrinks underlayer to prevent visible edges
+  underlayerOffset: -2.0
+});
+```
+
+The underlayer is generated automatically from the contours of all design elements on the page. Elements with transparency will have proportionally reduced underlayer opacity.
+
+## Export at Target Dimensions
+
+Use `targetWidth` and `targetHeight` to control the exported PDF dimensions in pixels. The block renders large enough to fill the target size while maintaining aspect ratio.
+
+```typescript highlight=highlight-target-size
+// Export with specific dimensions for print output
+const pdfBlob = await engine.block.export(scene, {
+  mimeType: 'application/pdf',
+  targetWidth: 2480, // A4 at 300 DPI (210mm)
+  targetHeight: 3508 // A4 at 300 DPI (297mm)
+});
+```
+
+For print output, calculate the target dimensions based on your desired DPI:
+
+- A4 at 300 DPI: 2480 × 3508 pixels
+- Letter at 300 DPI: 2550 × 3300 pixels
+
+## Built-in Export Action
+
+Run the `exportDesign` action to execute the default export flow programmatically.
+
+```typescript highlight=highlight-trigger-export
+// Run built-in export with PDF format
+cesdk.actions.run('exportDesign', {
+  mimeType: 'application/pdf'
+});
+```
+
+This executes the registered export action, which handles the complete export process including format selection and file download.
+
+## Customize Export Action
+
+Register a custom `exportDesign` action to apply PDF-specific options automatically. This lets you set defaults like high compatibility mode that apply whenever the export action runs.
+
+```typescript highlight=highlight-customize-action
+// Register a custom export action with PDF-specific options
+cesdk.actions.register('exportDesign', async () => {
+  // Export the scene block to include all pages in the PDF
+  const scene = engine.scene.get()!;
+
+  // Merge PDF-specific defaults with provided options
+  const blob = await engine.block.export(scene, {
+    mimeType: 'application/pdf',
+    exportPdfWithHighCompatibility: true
+  });
+
+  await cesdk.utils.downloadFile(blob, 'application/pdf');
+});
+```
+
+The custom action merges your PDF defaults with any options passed when the action runs. This approach centralizes export configuration and ensures consistent behavior across your application.
+
+## Download Export
+
+Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob.
+
+```typescript highlight=highlight-download
+// Download using CE.SDK utils
+await cesdk.utils.downloadFile(pdfBlob, 'application/pdf');
+```
+
+Pass the blob and MIME type to prompt the user to save the file locally.
+
+## PDF Export Options
+
+| Option                           | Description                                                                              |
+| -------------------------------- | ---------------------------------------------------------------------------------------- |
+| `mimeType`                       | Output format. Must be `'application/pdf'`.                                              |
+| `exportPdfWithHighCompatibility` | Rasterize complex elements at scene DPI for consistent rendering. Defaults to `true`.    |
+| `exportPdfWithUnderlayer`        | Generate an underlayer from design contours. Defaults to `false`.                        |
+| `underlayerSpotColorName`        | Spot color name for the underlayer ink. Required when `exportPdfWithUnderlayer` is true. |
+| `underlayerOffset`               | Size adjustment in design units. Negative values shrink the underlayer inward.           |
+| `targetWidth`                    | Target output width in pixels. Must be used with `targetHeight`.                         |
+| `targetHeight`                   | Target output height in pixels. Must be used with `targetWidth`.                         |
+| `abortSignal`                    | Signal to cancel the export operation.                                                   |
+
+## API Reference
+
+| Method                                         | Description                                                 |
+| ---------------------------------------------- | ----------------------------------------------------------- |
+| `engine.block.export(blockId, options)`        | Export a block as PDF with format and compatibility options |
+| `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color for underlayer ink                      |
+| `engine.scene.get()`                           | Get the scene for multi-page PDF export                     |
+| `engine.scene.getCurrentPage()`                | Get the current page for single-page export                 |
+| `cesdk.actions.run()`                          | Runs a built-in action like `exportDesign`                  |
+| `cesdk.actions.register()`                     | Registers a custom action to override default behavior      |
+| `cesdk.utils.downloadFile()`                   | Triggers browser download dialog for a blob                 |
+
+## Next Steps
+
+- [Export Overview](./export-save-publish/export/overview.md) - Compare all supported export formats
+- [Export for Printing](./export-save-publish/for-printing.md) - Print workflows with DPI and color management
+- [Spot Colors](./colors/for-print/spot.md) - Define and use spot colors in designs
+- [Export Size Limits](./export-save-publish/export/size-limits.md) - Check device limits before exporting large designs
+
+---
+
+## 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/export-save-publish/export/to-png.md

@@ -0,0 +1,255 @@
+> 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) > [Export Media Assets](./export-save-publish/export.md) > [To PNG](./export-save-publish/export/to-png.md)
+
+---
+
+Export your designs as PNG images with full transparency support and configurable compression.
+
+![Export to PNG hero image](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-export-save-publish-export-to-png-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-png-browser/)
+
+PNG (Portable Network Graphics) provides lossless compression with full alpha channel support. It's ideal for web graphics, UI elements, and content requiring crisp edges or transparency.
+
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-png-browser/browser.ts reference-only
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+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());
+    // 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());
+
+    const engine = cesdk.engine;
+
+    await engine.scene.loadFromURL(
+      'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
+    );
+    const page = engine.scene.getCurrentPage();
+    if (!page) throw new Error('No page found');
+    await engine.scene.zoomToBlock(page, { padding: 40 });
+
+    // Setup export functionality
+    await this.setupExportActions(cesdk, page);
+  }
+
+  private async setupExportActions(
+    cesdk: CreativeEditorSDK,
+    page: number
+  ): Promise<void> {
+    const engine = cesdk.engine;
+
+    // Add export button to navigation bar
+    cesdk.ui.insertOrderComponent(
+      { in: 'ly.img.navigation.bar', position: 'end' },
+      {
+        id: 'ly.img.actions.navigationBar',
+        children: [
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-design',
+            label: 'Export PNG',
+            icon: '@imgly/Save',
+            onClick: async () => {
+              const blob = await engine.block.export(page, {
+                mimeType: 'image/png'
+              });
+
+              await cesdk.utils.downloadFile(blob, 'image/png');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-design',
+            label: 'Export PNG (default)',
+            icon: '@imgly/Save',
+            onClick: () => cesdk.actions.run('exportDesign')
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-design',
+            label: 'Export PNG (compressed)',
+            icon: '@imgly/Save',
+            onClick: async () => {
+              // Export with compression
+              const compressedBlob = await engine.block.export(page, {
+                mimeType: 'image/png',
+                pngCompressionLevel: 9
+              });
+
+              await cesdk.utils.downloadFile(compressedBlob, 'image/png');
+            }
+          },
+          {
+            id: 'ly.img.action.navigationBar',
+            key: 'export-design',
+            label: 'Export PNG (hd)',
+            icon: '@imgly/Save',
+            onClick: async () => {
+              const hdBlob = await engine.block.export(page, {
+                mimeType: 'image/png',
+                targetWidth: 1920,
+                targetHeight: 1080
+              });
+
+              await cesdk.utils.downloadFile(hdBlob, 'image/png');
+            }
+          }
+        ]
+      }
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers exporting designs to PNG, configuring compression, controlling output dimensions, and using built-in export actions.
+
+## Export to PNG
+
+Call `engine.block.export()` with `mimeType: 'image/png'` to export any block as a PNG image. The method returns a Blob containing the image data.
+
+```typescript highlight=highlight-export-png
+const blob = await engine.block.export(page, {
+  mimeType: 'image/png'
+});
+```
+
+Pass the page ID from `engine.scene.getCurrentPage()` or any block ID to export specific elements.
+
+## Export Options
+
+PNG export supports several configuration options for compression, dimensions, and text rendering.
+
+### Compression Level
+
+The `pngCompressionLevel` option (0-9) controls file size vs. encoding speed. Higher values produce smaller files but take longer to encode. PNG compression is lossless, so quality remains unchanged.
+
+```typescript highlight=highlight-compression
+const compressedBlob = await engine.block.export(page, {
+  mimeType: 'image/png',
+  pngCompressionLevel: 9
+});
+```
+
+- **0**: No compression, fastest encoding
+- **5**: Balanced (default)
+- **9**: Maximum compression, slowest encoding
+
+### Target Dimensions
+
+Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio.
+
+```typescript highlight=highlight-target-size
+const hdBlob = await engine.block.export(page, {
+  mimeType: 'image/png',
+  targetWidth: 1920,
+  targetHeight: 1080
+});
+```
+
+If the target aspect ratio differs from the block's aspect ratio, the output extends beyond the target on one axis to preserve proportions.
+
+### All PNG Export Options
+
+| Option                | Description                                                                                                                     |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `mimeType`            | Output format. Defaults to `'image/png'`.                                                                                       |
+| `pngCompressionLevel` | Compression level (0-9). Higher values produce smaller files but take longer to encode. Quality is unaffected. Defaults to `5`. |
+| `targetWidth`         | Target output width in pixels. Must be used with `targetHeight`.                                                                |
+| `targetHeight`        | Target output height in pixels. Must be used with `targetWidth`.                                                                |
+| `allowTextOverhang`   | When `true`, text blocks with glyphs extending beyond their frame export with full glyph bounds visible. Defaults to `false`.   |
+| `abortSignal`         | Signal to cancel the export operation.                                                                                          |
+
+## Built-in Export Action
+
+CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`:
+
+```typescript highlight=highlight-builtin-action
+onClick: () => cesdk.actions.run('exportDesign');
+```
+
+The built-in action exports the current page as PNG and prompts the user to download the result. Add an export button to the navigation bar to let users trigger this action from the UI.
+
+## API Reference
+
+| Method                                     | Description                                           |
+| ------------------------------------------ | ----------------------------------------------------- |
+| `engine.block.export(blockId, options)`    | Export a block as PNG with format and quality options |
+| `cesdk.actions.run('exportDesign')`        | Run the built-in export action with progress dialog   |
+| `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device                  |
+
+## Next Steps
+
+- [Export Overview](./export-save-publish/export/overview.md) - Compare all supported export formats
+- [Export Size Limits](./export-save-publish/export/size-limits.md) - Check device limits before exporting large designs
+- [Export with Color Mask](./export-save-publish/export/with-color-mask.md) - Remove specific colors and generate alpha masks
+- [Partial Export](./export-save-publish/export/partial-export.md) - Export specific blocks or regions
+
+---
+
+## 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