@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/filters-and-effects.md

@@ -0,0 +1,28 @@
+> 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) > [Filters and Effects](./filters-and-effects.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Filters & Effects Library](./filters-and-effects/overview.md) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying.
+- [Supported Filters and Effects](./filters-and-effects/support.md) - View the full list of visual effects and filters available in CE.SDK, including both built-in and custom options.
+- [Apply Filters and Effects](./filters-and-effects/apply.md) - Apply filters and effects to design elements to enhance images and create visual transformations.
+- [Create Custom Filters](./filters-and-effects/create-custom-filters.md) - Extend CE.SDK with custom LUT filter asset sources for brand-specific color grading and filter collections.
+- [Chroma Key (Green Screen)](./filters-and-effects/chroma-key-green-screen.md) - Apply the green screen effect to images and videos, replacing specific colors with transparency for compositing workflows.
+- [Blur Effects](./filters-and-effects/blur.md) - Apply blur effects to design elements to create depth, focus attention, or soften backgrounds.
+- [Create a Custom LUT Filter](./filters-and-effects/create-custom-lut-filter.md) - Create and apply custom LUT filters to achieve consistent, brand-aligned visual styles.
+- [Distortion Effects](./filters-and-effects/distortion.md) - Apply distortion effects to warp, shift, and transform design elements for dynamic artistic visuals in CE.SDK.
+- [Duotone](./filters-and-effects/duotone.md) - Apply duotone effects to images, mapping tones to two colors for stylized visuals, vintage aesthetics, or brand-specific treatments.
+
+---
+
+## 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/agent-skills.md

@@ -0,0 +1,119 @@
+> 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) > [Build with AI](./get-started/build-with-ai.md) > [Agent Skills](./get-started/agent-skills.md)
+
+---
+
+The CE.SDK Agent Skills plugin gives AI coding assistants bundled documentation, guided code generation, and autonomous project scaffolding for building applications with CreativeEditor SDK across 10 Web frameworks.
+
+## What Are Agent Skills?
+
+[Agent Skills](https://agentskills.io) are portable knowledge packs that plug into AI coding assistants. By installing the CE.SDK skills, you get:
+
+- **Offline documentation**: All guides, API references, and best practices bundled locally — no external API calls
+- **Guided code generation**: Build and explain skills that walk through CE.SDK implementation step by step
+- **Autonomous scaffolding**: A builder agent that creates complete CE.SDK projects from scratch
+
+## Available Skills
+
+| Skill            | Description                                                              |
+| ---------------- | ------------------------------------------------------------------------ |
+| `docs-react`     | Look up CE.SDK React reference guides and documentation                  |
+| `docs-vue`       | Look up CE.SDK Vue.js reference guides and documentation                 |
+| `docs-svelte`    | Look up CE.SDK Svelte reference guides and documentation                 |
+| `docs-sveltekit` | Look up CE.SDK SvelteKit reference guides and documentation              |
+| `docs-angular`   | Look up CE.SDK Angular reference guides and documentation                |
+| `docs-nextjs`    | Look up CE.SDK Next.js reference guides and documentation                |
+| `docs-nuxtjs`    | Look up CE.SDK Nuxt.js reference guides and documentation                |
+| `docs-electron`  | Look up CE.SDK Electron reference guides and documentation               |
+| `docs-js`        | Look up CE.SDK Vanilla JavaScript reference guides and documentation     |
+| `docs-node`      | Look up CE.SDK Node.js reference guides and documentation                |
+| `build`          | Implement features, write code, and set up CE.SDK Web projects           |
+| `explain`        | Explain how CE.SDK Web features work — concepts, architecture, workflows |
+
+The plugin also includes a **builder** agent that autonomously scaffolds complete CE.SDK web applications — detecting your framework, applying starter kit templates, and implementing features end-to-end.
+
+## Setup Instructions
+
+### Claude Code Plugin
+
+Add the marketplace and install the plugin:
+
+```bash
+# Add the marketplace (one-time setup)
+claude plugin marketplace add imgly/agent-skills
+
+# Install the plugin
+claude plugin install cesdk@imgly
+```
+
+### Vercel Skills CLI
+
+Install using the [Vercel Skills CLI](https://github.com/vercel-labs/skills):
+
+```bash
+# Install all skills for Claude Code
+npx skills add imgly/agent-skills -a claude-code
+
+# Install a specific skill only
+npx skills add imgly/agent-skills --skill docs-react -a claude-code
+
+# List available skills first
+npx skills add imgly/agent-skills --list
+```
+
+### Manual Copy
+
+For any skills-compatible agent, copy skill folders directly from the [GitHub repository](https://github.com/imgly/agent-skills):
+
+```bash
+# Clone the repo
+git clone https://github.com/imgly/agent-skills.git
+
+# Copy a specific skill into your Claude Code project
+cp -r agent-skills/plugins/cesdk/skills/docs-react .claude/skills/cesdk-docs-react
+
+# Or copy the builder agent
+cp agent-skills/plugins/cesdk/agents/builder.md .claude/agents/cesdk-builder.md
+```
+
+## Usage
+
+Once installed, invoke skills with slash commands in your AI coding assistant:
+
+### Look up documentation
+
+```
+/cesdk:docs-react configuration
+/cesdk:docs-vue getting started
+/cesdk:docs-nextjs server-side rendering
+```
+
+### Build a feature
+
+```
+/cesdk:build add text overlays to images
+/cesdk:build create a photo editor with filters
+```
+
+### Explain a concept
+
+```
+/cesdk:explain how the block hierarchy works
+/cesdk:explain export pipeline and output formats
+```
+
+## How It Works
+
+Each documentation skill bundles the complete CE.SDK guides and API references for its framework in a compressed index. Skills read directly from these local files — no external services or MCP servers are required.
+
+The build skill includes starter kit templates for common use cases like design editors, video editors, and photo editors. It detects your project's framework and generates code accordingly.
+
+---
+
+## 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/build-with-ai.md

@@ -0,0 +1,45 @@
+> 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) > [Build with AI](./get-started/build-with-ai.md)
+
+---
+
+Give your AI coding assistant full context about CE.SDK to generate accurate
+code and get instant answers. Choose the integration that fits your workflow.
+
+## Choose Your Approach
+
+### Using a Coding Agent?
+
+If you're working with an AI coding assistant like Claude Code or OpenAI Codex, install our **Agent Skills** for the best experience. Skills bundle offline documentation, guided code generation and autonomous project scaffolding directly into your agent.
+
+[Set Up Agent Skills](./get-started/agent-skills.md)
+
+### Using an AI-Powered IDE?
+
+Connect your IDE to our **MCP Server** for real-time documentation search. Works with Claude Desktop, Cursor, VS Code Copilot, Windsurf and any MCP-compatible tool.
+
+[Connect MCP Server](./get-started/mcp-server.md)
+
+### Need Raw Documentation for AI?
+
+Download our **LLMs.txt** files to manually load CE.SDK documentation into any AI tool. Available as a compact index or full documentation bundle.
+
+[Download LLMs.txt](./llms-txt.md)
+
+---
+
+## Related Pages
+
+- [Agent Skills](./get-started/agent-skills.md) - Install CE.SDK documentation and code generation skills for AI coding assistants.
+- [MCP Server](./get-started/mcp-server.md) - Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server.
+- [LLMs.txt](./llms-txt.md) - Our documentation is available in LLMs.txt format
+
+---
+
+## 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/mcp-server.md

@@ -0,0 +1,119 @@
+> 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) > [Build with AI](./get-started/build-with-ai.md) > [MCP Server](./get-started/mcp-server.md)
+
+---
+
+The CE.SDK MCP server provides a standardized interface that allows any compatible AI assistant to search and access our documentation. This enables AI tools like Claude, Cursor, and VS Code Copilot to provide more accurate, context-aware help when working with CE.SDK.
+
+## What is MCP?
+
+The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard that enables AI assistants to securely connect to external data sources. By connecting your AI tools to our MCP server, you get:
+
+- **Accurate answers**: AI assistants can search and retrieve the latest CE.SDK documentation
+- **Context-aware help**: Get platform-specific guidance for your development environment
+- **Up-to-date information**: Always access current documentation without relying on training data
+
+## Available Tools
+
+The MCP server exposes two tools:
+
+| Tool     | Description                                   |
+| -------- | --------------------------------------------- |
+| `search` | Search documentation by query string          |
+| `fetch`  | Retrieve the full content of a document by ID |
+
+## Server Endpoint
+
+| URL                      | Transport       |
+| ------------------------ | --------------- |
+| `https://mcp.img.ly/mcp` | Streamable HTTP |
+
+No authentication is required.
+
+## Setup Instructions
+
+### Claude Code
+
+Add the MCP server with a single command:
+
+```bash
+claude mcp add --transport http imgly_docs https://mcp.img.ly/mcp
+```
+
+### Claude Desktop
+
+1. Open Claude Desktop and go to **Settings** (click your profile icon)
+2. Navigate to **Connectors** in the sidebar
+3. Click **Add custom connector**
+4. Enter the URL: `https://mcp.img.ly/mcp`
+5. Click **Add** to connect
+
+### Cursor
+
+Add the following to your Cursor MCP configuration. You can use either:
+
+- **Project-specific**: `.cursor/mcp.json` in your project root
+- **Global**: `~/.cursor/mcp.json`
+
+```json
+{
+  "mcpServers": {
+    "imgly_docs": {
+      "url": "https://mcp.img.ly/mcp"
+    }
+  }
+}
+```
+
+### VS Code
+
+Add to your workspace configuration at `.vscode/mcp.json`:
+
+```json
+{
+  "servers": {
+    "imgly_docs": {
+      "type": "http",
+      "url": "https://mcp.img.ly/mcp"
+    }
+  }
+}
+```
+
+### Windsurf
+
+Add the following to your Windsurf MCP configuration at `~/.codeium/windsurf/mcp_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "imgly_docs": {
+      "serverUrl": "https://mcp.img.ly/mcp"
+    }
+  }
+}
+```
+
+### Other Clients
+
+For other MCP-compatible clients, use the endpoint `https://mcp.img.ly/mcp` with HTTP transport. Refer to your client's documentation for the specific configuration format.
+
+## Usage
+
+Once configured, your AI assistant will automatically have access to CE.SDK documentation. You can ask questions like:
+
+- "How do I add a text block in CE.SDK?"
+- "Show me how to export a design as PNG"
+- "What are the available blend modes?"
+
+The AI will search our documentation and provide answers based on the latest CE.SDK guides and API references.
+
+---
+
+## 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/overview.md

@@ -0,0 +1,28 @@
+> 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)
+
+---
+
+Everything you need to integrate CE.SDK into your application. Learn what the
+SDK offers, get up and running with starter kits, explore AI-powered
+workflows, and understand our licensing model.
+
+---
+
+## Related Pages
+
+- [Javascript Creative Editor SDK](./what-is-cesdk.md) - CreativeEditor SDK offers a fully-featured JavaScript library for creating and editing rich visual designs directly within the browser.
+- [Capabilities](./capabilities.md) - Explore the full list of CE.SDK capabilities available for your platform, including design, video, image, text, and more.
+- [Quickstart](./get-started/vanilla-js/quickstart.md) - Get started with CE.SDK by choosing a starter kit
+- [Build with AI](./get-started/build-with-ai.md) - Give your AI coding assistant context about CE.SDK to generate accurate code and get instant answers.
+- [Licensing](./licensing.md) - Understand CE.SDK’s flexible licensing, trial options, and how keys work across dev, staging, and production.
+
+---
+
+## 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

@@ -0,0 +1,175 @@
+> 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