@imgly/codesign-mcp 0.1.5 → 0.1.7

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

@@ -1,364 +0,0 @@
-> 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 MP4](./export-save-publish/export/to-mp4.md)
-
----
-
-Export your video compositions as MP4 files with H.264 encoding, progress tracking, and configurable quality settings.
-
-![Export to MP4 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-mp4-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-mp4-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-mp4-browser/)
-
-MP4 is the most widely supported video format, using H.264 encoding for efficient compression. CE.SDK handles frame rendering, encoding, and audio muxing entirely client-side, giving you control over quality and file size.
-
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-mp4-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;
-
-    cesdk.feature.enable('ly.img.video');
-    await engine.scene.loadFromURL(
-      'https://cdn.img.ly/assets/demo/v3/ly.img.video.template/templates/milli-surf-school.scene'
-    );
-    const page = engine.scene.getCurrentPage();
-    if (!page) throw new Error('No page found');
-
-    await cesdk.actions.run('zoom.toPage', { autoFit: true });
-
-    // Setup export functionality
-    await this.setupExportActions(cesdk, page);
-  }
-
-  private async setupExportActions(
-    cesdk: CreativeEditorSDK,
-    page: number
-  ): Promise<void> {
-    const engine = cesdk.engine;
-
-    // Add export buttons 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-builtin',
-            label: 'Export Video',
-            icon: '@imgly/Save',
-            onClick: () => {
-              cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' });
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-video',
-            label: 'Export MP4',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const dialog = cesdk.utils.showLoadingDialog({
-                title: 'Exporting Video',
-                message: 'Encoding MP4...',
-                progress: 0
-              });
-
-              try {
-                const blob = await engine.block.exportVideo(page, {
-                  mimeType: 'video/mp4',
-                  onProgress: (_, encoded, total) => {
-                    dialog.updateProgress({ value: encoded, max: total });
-                  }
-                });
-
-                dialog.close();
-                await cesdk.utils.downloadFile(blob, 'video/mp4');
-              } catch (error) {
-                dialog.showError({ message: 'Export failed' });
-                throw error;
-              }
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-video-progress',
-            label: 'Export (dialog)',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const dialog = cesdk.utils.showLoadingDialog({
-                title: 'Exporting Video',
-                message: 'Encoding MP4...',
-                progress: 0
-              });
-
-              try {
-                const blob = await engine.block.exportVideo(page, {
-                  onProgress: (_, encoded, total) => {
-                    dialog.updateProgress({ value: encoded, max: total });
-                  }
-                });
-
-                dialog.showSuccess({ message: 'Export complete!' });
-                await cesdk.utils.downloadFile(blob, 'video/mp4');
-              } catch (error) {
-                dialog.showError({ message: 'Export failed' });
-                throw error;
-              }
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-video-hd',
-            label: 'Export HD',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const dialog = cesdk.utils.showLoadingDialog({
-                title: 'Exporting HD Video',
-                message: 'Encoding 1080p...',
-                progress: 0
-              });
-
-              try {
-                const blob = await engine.block.exportVideo(page, {
-                  targetWidth: 1920,
-                  targetHeight: 1080,
-                  framerate: 30,
-                  onProgress: (_, encoded, total) => {
-                    dialog.updateProgress({ value: encoded, max: total });
-                  }
-                });
-
-                dialog.close();
-                await cesdk.utils.downloadFile(blob, 'video/mp4');
-              } catch (error) {
-                dialog.showError({ message: 'Export failed' });
-                throw error;
-              }
-            }
-          },
-          {
-            id: 'ly.img.action.navigationBar',
-            key: 'export-video-quality',
-            label: 'Export HQ',
-            icon: '@imgly/Save',
-            onClick: async () => {
-              const dialog = cesdk.utils.showLoadingDialog({
-                title: 'Exporting HQ Video',
-                message: 'Encoding high quality...',
-                progress: 0
-              });
-
-              try {
-                const blob = await engine.block.exportVideo(page, {
-                  h264Profile: 100,
-                  videoBitrate: 8_000_000,
-                  onProgress: (_, encoded, total) => {
-                    dialog.updateProgress({ value: encoded, max: total });
-                  }
-                });
-
-                dialog.close();
-                await cesdk.utils.downloadFile(blob, 'video/mp4');
-              } catch (error) {
-                dialog.showError({ message: 'Export failed' });
-                throw error;
-              }
-            }
-          }
-        ]
-      }
-    );
-  }
-}
-
-export default Example;
-```
-
-This guide covers exporting videos to MP4, tracking progress, configuring resolution and quality, and using built-in export actions.
-
-## Export to MP4
-
-Call `engine.block.exportVideo()` with a page block to export it as an MP4 video. The method returns a Blob containing the encoded video data.
-
-```typescript highlight=highlight-export-video
-const blob = await engine.block.exportVideo(page, {
-  mimeType: 'video/mp4',
-```
-
-Pass the page ID from `engine.scene.getCurrentPage()` to export the current video scene.
-
-## Export Options
-
-Video export supports configuration options for progress tracking, resolution, framerate, and encoding quality.
-
-### Progress Dialog
-
-Use `cesdk.utils.showLoadingDialog()` to display a progress dialog during export. The `onProgress` callback updates the dialog with rendering progress.
-
-```typescript highlight=highlight-progress-dialog
-const dialog = cesdk.utils.showLoadingDialog({
-  title: 'Exporting Video',
-  message: 'Encoding MP4...',
-  progress: 0
-});
-
-try {
-  const blob = await engine.block.exportVideo(page, {
-    onProgress: (_, encoded, total) => {
-      dialog.updateProgress({ value: encoded, max: total });
-    }
-  });
-
-  dialog.showSuccess({ message: 'Export complete!' });
-  await cesdk.utils.downloadFile(blob, 'video/mp4');
-} catch (error) {
-  dialog.showError({ message: 'Export failed' });
-  throw error;
-}
-```
-
-The dialog provides `updateProgress()` to show a progress bar, `showSuccess()` for completion feedback, and `showError()` for failures. The `onProgress` callback receives rendered frames, encoded frames, and total frames.
-
-### Resolution and Framerate
-
-Use `targetWidth`, `targetHeight`, and `framerate` to control output dimensions and smoothness.
-
-```typescript highlight=highlight-resolution
-const blob = await engine.block.exportVideo(page, {
-  targetWidth: 1920,
-  targetHeight: 1080,
-  framerate: 30,
-```
-
-If only one dimension is specified, the other is calculated to maintain aspect ratio. Default framerate is 30 fps.
-
-### H.264 Profile and Quality
-
-The `h264Profile` option controls encoding quality and device compatibility:
-
-- **66 (Baseline)**: Maximum compatibility, lower compression
-- **77 (Main)**: Balanced quality and compatibility (default)
-- **100 (High)**: Best compression, modern devices only
-
-Set `videoBitrate` in bits per second to control file size.
-
-```typescript highlight=highlight-quality
-const blob = await engine.block.exportVideo(page, {
-  h264Profile: 100,
-  videoBitrate: 8_000_000,
-```
-
-### All MP4 Export Options
-
-| Option         | Description                                                                              |
-| -------------- | ---------------------------------------------------------------------------------------- |
-| `mimeType`     | Output format: `'video/mp4'` or `'video/quicktime'`. Defaults to `'video/mp4'`.          |
-| `onProgress`   | Callback receiving `(renderedFrames, encodedFrames, totalFrames)` for progress tracking. |
-| `targetWidth`  | Target output width in pixels.                                                           |
-| `targetHeight` | Target output height in pixels.                                                          |
-| `framerate`    | Target framerate in Hz. Defaults to `30`.                                                |
-| `h264Profile`  | H.264 profile: 66 (Baseline), 77 (Main), 100 (High). Defaults to `77`.                   |
-| `h264Level`    | H.264 level multiplied by 10 (e.g., 52 = level 5.2). Defaults to `52`.                   |
-| `videoBitrate` | Video bitrate in bits/second. `0` enables automatic selection.                           |
-| `audioBitrate` | Audio bitrate in bits/second. `0` enables automatic selection.                           |
-| `timeOffset`   | Start time in seconds for partial export. Defaults to `0`.                               |
-| `duration`     | Export duration in seconds. Defaults to scene duration.                                  |
-| `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
-cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' });
-```
-
-The built-in action exports the current page as MP4 and prompts the user to download the result. It displays a progress dialog during encoding.
-
-## API Reference
-
-| Method                                       | Description                                            |
-| -------------------------------------------- | ------------------------------------------------------ |
-| `engine.block.exportVideo(blockId, options)` | Export a page block as MP4 video with encoding options |
-| `cesdk.actions.run('exportDesign', options)` | Run the built-in export action with progress dialog    |
-| `cesdk.utils.showLoadingDialog(options)`     | Show a loading dialog with progress tracking           |
-| `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 videos
-- [Export Audio](./guides/export-save-publish/export/audio.md) - Export audio tracks separately
-- [Partial Export](./export-save-publish/export/partial-export.md) - Export specific blocks or timeline segments
-
----
-
-## 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/get-started/vanilla-js/quickstart.md

@@ -1,175 +0,0 @@
-> 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:** [Get Started](./get-started/overview.md) > [Quickstart JS/TS](./get-started/vanilla-js/quickstart.md)
-
----
-
-Get started with CE.SDK. Choose a starter kit below to see it in action, then
-follow the integration guide.
-
-## Starter Kits
-
-Try the live demos below to see each editor in action, then get started with the one that fits your use case.
-
-<SolutionGrid>
-  <SolutionCard title="Photo Editor" description="This CE.SDK editor configuration is equipped with the essentials for photo editing and includes advanced tools such as background removal." contentId="r6kq0u" liveExampleUrl="/examples/starterkit-photo-editor/" heroImage={photoHero} />
-
-  <SolutionCard title="Design Editor" description="Our easy to use editor variant focused on layout, text, and images is ideal for adapting existing templates." contentId="8unj9u" liveExampleUrl="/examples/starterkit-design-editor/" heroImage={designHero} />
-
-  <SolutionCard title="Design Editor (Advanced)" description="Our editor variant for professional users, grants granular control over designs." contentId="87riel" liveExampleUrl="/examples/starterkit-advanced-design-editor/" heroImage={advancedHero} />
-
-  <SolutionCard title="Design Viewer" description="Lightweight design viewing for your web app—pan, zoom, and navigate multi-page designs. Runs entirely in the browser with no server dependencies." contentId="zgs556" liveExampleUrl="/examples/starterkit-design-viewer/" heroImage={viewerHero} />
-
-  <SolutionCard title="Video Editor" description="Take the Video Editor for a test run and see how powerful editing features meet seamless and intuitive design. All with fully customizable UI and asset library." contentId="e1nlor" liveExampleUrl="/examples/starterkit-video-editor/" heroImage={videoHero} />
-
-  <SolutionCard title="Video Editor (Advanced)" description="Comprehensive video editing for your web app—professional tools for timeline editing, visual effects, and MP4 export. Runs entirely in the browser with no server dependencies." contentId="2a68z2" liveExampleUrl="/examples/starterkit-advanced-video-editor/" heroImage={advancedVideoHero} />
-
-  <SolutionCard title="Video Player" description="Lightweight video playback for your web app—play, pause, and navigate video content. Runs entirely in the browser with no server dependencies." contentId="6sjm1w" liveExampleUrl="/examples/starterkit-video-player/" heroImage={playerHero} />
-
-  <SolutionCard title="AI Editor" description="Quickly add AI-powered visual editing and media generation to your web app — seamlessly connect any AI model." contentId="4z6j9l" liveExampleUrl="/examples/starterkit-ai-editor/" heroImage={aiHero} />
-
-  <SolutionCard title="T-Shirt Designer" description="Apparel Editor for creating print-ready design." contentId="jwinqr" liveExampleUrl="/examples/starterkit-t-shirt-designer/" heroImage={tshirtHero} />
-
-  <SolutionCard title="Product Editor" description="Product Editor for customizing any product with print-ready designs." contentId="p7m8k2" liveExampleUrl="/examples/starterkit-product-editor/" heroImage={productHero} />
-</SolutionGrid>
-
-### Video Editing
-
-Create and edit video compositions with timeline editing, captions, animations, and template-based generation.
-
-<SolutionGrid>
-  <SolutionCard title="Start with Video" description="Initialize the editor with a video matching the page size." contentId="swv001" liveExampleUrl="/examples/starterkit-start-with-video/" heroImage={startWithVideoHero} />
-
-  <SolutionCard title="Video Captions" description="Enhance video creation by importing, customizing, and styling captions directly within the editor." contentId="vcap01" liveExampleUrl="/examples/starterkit-video-captions/" heroImage={videoCaptionsHero} />
-
-  <SolutionCard title="Video Animations" description="Effortlessly add animations to any element in CE.SDK videos using our extensive preset library." contentId="vanim1" liveExampleUrl="/examples/starterkit-video-animations/" heroImage={videoAnimationsHero} />
-
-  <SolutionCard title="Automated Video Generation" description="Streamline asset production with video placeholders." contentId="8om1qg" heroImage={automatedVideoHero} />
-</SolutionGrid>
-
-### Plugins
-
-Add powerful custom functionality to the editor in a matter of seconds.
-
-<SolutionGrid>
-  <SolutionCard title="Background Removal Editor" description="Effortlessly remove background from images directly in the browser with no additional costs and privacy concerns." contentId="bgrmv1" liveExampleUrl="/examples/starterkit-background-removal-editor/" heroImage={bgRemovalHero} />
-
-  <SolutionCard title="QR Code Editor" description="Easily generate and customize QR codes within CE.SDK." contentId="qrcde1" liveExampleUrl="/examples/starterkit-qr-code-editor/" heroImage={qrCodeHero} />
-
-  <SolutionCard title="Cutout Lines Editor" description="CE.SDK's cutout plugin enables effortless creation and customization of cutout shapes for web-to-print users." contentId="ctltl1" liveExampleUrl="/examples/starterkit-cutout-lines-editor/" heroImage={cutoutHero} />
-
-  <SolutionCard title="Vectorizer Editor" description="Transform your pixel-based images into scalable vector graphics with Vectorizer Plugin." contentId="vctre1" liveExampleUrl="/examples/starterkit-vectorizer-editor/" heroImage={vectorizerHero} />
-</SolutionGrid>
-
-### Custom Built UIs
-
-Fully custom UIs built with React using the Engine API. Freely adapt to your use case.
-
-<SolutionGrid>
-  <SolutionCard title="Postcard UI" description="Built to facilitate optimal post- and greeting-card design, from changing accent colors and selecting fonts to custom messages and pictures." contentId="03mijr" liveExampleUrl="/examples/starterkit-postcard-ui/" heroImage={postcardHero} />
-
-  <SolutionCard title="Photobook UI" description="Custom UI for building photo books focusing on theming, page layouts, and managing photo assets." contentId="m5ob81" liveExampleUrl="/examples/starterkit-photobook-ui/" heroImage={photobookHero} />
-
-  <SolutionCard title="Mobile UI" description="Easily build custom mobile UIs and provide a seamless design editing experience for your users, on both iOS and Android." contentId="h7k2m1" liveExampleUrl="/examples/starterkit-mobile-ui/" heroImage={mobileUiHero} />
-
-  <SolutionCard title="Photo UI" description="Photo UI is equipped with advanced photo editing options while remaining easy and intuitive to use. Try the demo and see for yourself." contentId="w9p3t6" liveExampleUrl="/examples/starterkit-photo-ui/" heroImage={photoUiHero} />
-
-  <SolutionCard title="Apparel UI" description="Custom, mobile apparel UI for creating print-ready design." contentId="ec0cfb" liveExampleUrl="/examples/starterkit-apparel-ui/" heroImage={apparelHero} />
-</SolutionGrid>
-
-### Customization
-
-Configure the editor UI to fit your design—theming, localization, export options, and layout controls.
-
-<SolutionGrid>
-  <SolutionCard title="Theming" description="Effortlessly adapt the UI of the CreativeEditor SDK to best match your app. With Theming you can easily change elements like theme, scaling, and background." contentId="jkl012" liveExampleUrl="/examples/starterkit-theming/" heroImage={themingHero} />
-
-  <SolutionCard title="Translation & Internationalization" description="Ships with English and German. Supports translations for any language." contentId="lngde1" liveExampleUrl="/examples/starterkit-translation-internationalization/" heroImage={translationHero} />
-
-  <SolutionCard title="Single Page Editor" description="The editor shows only one active page at a time." contentId="sngpg1" liveExampleUrl="/examples/starterkit-single-page-editor/" heroImage={singlePageHero} />
-
-  <SolutionCard title="Start With Image" description="Initialize the editor with an image matching the page size." contentId="stwim1" liveExampleUrl="/examples/starterkit-start-with-image/" heroImage={startWithImageHero} />
-
-  <SolutionCard title="Export Options Editor" description="Export designs in JPG, PNG, or PDF with custom quality, page ranges, and dimensions using CE.SDK's advanced export features." contentId="expopt" liveExampleUrl="/examples/starterkit-export-options/" heroImage={exportOptionsHero} />
-
-  <SolutionCard title="Force Crop Editor" description="Start editing with predefined crop presets to simplify content creation and maintain layout consistency." contentId="fcrp01" liveExampleUrl="/examples/starterkit-force-crop-editor/" heroImage={forceCropHero} />
-
-  <SolutionCard title="Print-Ready PDF Editor" description="Deliver print-ready CMYK PDF/X-3 files straight from your web app. Perfect for web-to-print and marketing automation." contentId="prpdf1" liveExampleUrl="/examples/starterkit-print-ready-pdf-editor/" heroImage={printPdfHero} />
-
-  <SolutionCard title="Video Export Options" description="Choose a suitable Frames per Second option and export videos in SD, HD, FHD, 2K, 4K, or define custom quality." contentId="veo001" liveExampleUrl="/examples/starterkit-video-export-options/" heroImage={videoExportHero} />
-</SolutionGrid>
-
-### Assets
-
-Leverage the versatile asset API to add custom asset sources or create new asset types.
-
-<SolutionGrid>
-  <SolutionCard title="Unsplash Editor" description="CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from Unsplash in the editor." contentId="u5sp1h" liveExampleUrl="/examples/starterkit-unsplash-asset-source/" heroImage={unsplashHero} />
-
-  <SolutionCard title="Pexels Image Editor" description="CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from Pexels in the editor." contentId="pxlsie" liveExampleUrl="/examples/starterkit-pexels-image-asset-source/" heroImage={pexelsHero} />
-
-  <SolutionCard title="Getty Images Editor" description="CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from Getty Images in the editor." contentId="gtyie1" liveExampleUrl="/examples/starterkit-getty-images-asset-source/" heroImage={gettyHero} />
-
-  <SolutionCard title="Airtable Image Editor" description="CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from an Airtable spreadsheet in the editor." contentId="artbl1" liveExampleUrl="/examples/starterkit-airtable-image-asset-source/" heroImage={airtableHero} />
-
-  <SolutionCard title="Layouts Editor" description="Allow users to select different layouts without changing page content." contentId="layot1" liveExampleUrl="/examples/starterkit-layouts-asset-source/" heroImage={layoutsHero} />
-
-  <SolutionCard title="Page Sizes Editor" description="Automatically adapt the same design or template to different page sizes and easily scale marketing campaigns and print materials across platforms." contentId="pgsz01" liveExampleUrl="/examples/starterkit-page-sizes-asset-source/" heroImage={pageSizesHero} />
-</SolutionGrid>
-
-### Templating
-
-Create templates by defining placeholders, constraints, and premium content libraries.
-
-<SolutionGrid>
-  <SolutionCard title="Placeholders" description="Ensure staying on brand and simplify the design process by defining placeholders and design constraints." contentId="ghi789" liveExampleUrl="/examples/starterkit-placeholders/" heroImage={placeholdersHero} />
-
-  <SolutionCard title="Form-Based Template Adoption" description="Use a form-based custom panel in CE.SDK to enable users to easily customize templates." contentId="fbtmp1" liveExampleUrl="/examples/starterkit-form-based-template-adoption/" heroImage={formTemplateHero} />
-</SolutionGrid>
-
-### Creative Automation
-
-Create dynamic templates to auto-generate image and design variations from data sources.
-
-<SolutionGrid>
-  <SolutionCard title="3D Mockup Editor" description="Integrate CE.SDK with 3D libraries for real-time, interactive design previews on products. Enhance accuracy and boost conversions with lifelike visuals." contentId="od0zz3" liveExampleUrl="/examples/starterkit-3d-product-preview/" heroImage={mockup3dHero} />
-
-  <SolutionCard title="Mockup Editor" description="Easily visualize the final product with the Mockup Editor. Suitable for apparel, postcards, posters, business cards, and social media product designs." contentId="e8eejr" liveExampleUrl="/examples/starterkit-product-preview/" heroImage={mockupHero} />
-
-  <SolutionCard title="Design Generator" description="Automatically generate ready-to-use designs from a set of input parameters." contentId="v8y4l9" liveExampleUrl="/examples/starterkit-automatic-design-generation/" heroImage={designGenHero} />
-
-  <SolutionCard title="Multi Image Generation" description="Generate multiple image variants for a single data point." contentId="g7jzku" liveExampleUrl="/examples/starterkit-multi-image-generation/" heroImage={multiImageHero} />
-
-  <SolutionCard title="Data Merge" description="Generate a batch of images from a set of data, for instance team cards." contentId="d4evnm" liveExampleUrl="/examples/starterkit-batch-image-generation/" heroImage={dataMergeHero} />
-
-  <SolutionCard title="Auto-Resizer" description="Automatically generate size variations of your design and easily scale your marketing materials across different platforms." contentId="t2jxae" liveExampleUrl="/examples/starterkit-automated-resizing/" heroImage={autoResizeHero} />
-
-  <SolutionCard title="Export Using Renderer" description="The Renderer brings CE.SDK's design engine to your backend with fast, compliant, enterprise-ready export for images, PDFs, and video, enabling organizations to generate media at scale with full fidelity and predictable performance." contentId="exprnd" liveExampleUrl="/examples/starterkit-export-using-renderer/" heroImage={exportRendererHero} />
-</SolutionGrid>
-
-### Extensibility
-
-Extend editor functionality with file format imports, content moderation, design validation, and version history.
-
-<SolutionGrid>
-  <SolutionCard title="Photoshop Template Import" description="Transform your existing Photoshop templates for use in the CE.SDK with our Importer. Preserve design elements and streamline the transition between platforms." contentId="psd001" liveExampleUrl="/examples/starterkit-psd-template-import/" heroImage={psdHero} />
-
-  <SolutionCard title="PowerPoint Template Import" description="Transform PowerPoint slides into editable CE.SDK designs. All formatting preserved." contentId="pptx01" liveExampleUrl="/examples/starterkit-pptx-template-import/" heroImage={pptxHero} />
-
-  <SolutionCard title="InDesign Template Import" description="Transform your existing InDesign templates for use in the CE.SDK with our Importer. Preserve design elements and streamline the transition between platforms." contentId="idml01" liveExampleUrl="/examples/starterkit-indesign-template-import/" heroImage={indesignHero} />
-
-  <SolutionCard title="Content Moderation" description="Content moderation made easy. Decide what type of imagery to restrict and receive automatic notifications flagging content that might be violating your guidelines." contentId="abc123" liveExampleUrl="/examples/starterkit-content-moderation/" heroImage={contentModHero} />
-
-  <SolutionCard title="Design Validation" description="Reduce the risk of misprints and speed up validation process thanks to design validation. Automatic error notifications will let you know if the design is not print-ready." contentId="def456" liveExampleUrl="/examples/starterkit-design-validation/" heroImage={designValHero} />
-
-  <SolutionCard title="Version History" description="With Version History, you can monitor changes made to each design and easily restore past versions if needed." contentId="vh1st0" liveExampleUrl="/examples/starterkit-version-history/" heroImage={versionHistoryHero} />
-</SolutionGrid>
-
----
-
-## 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