Search Docs
Loading...
Skip to content

AI Editor

Quickly add AI-powered visual editing and media generation to your web app — seamlessly connect any AI model.

AI Editor starter kit showing an AI-powered creative editing interface

15 mins
estimated time
Download
StackBlitz
GitHub

Pre-requisites#

This guide assumes basic familiarity with React and TypeScript.

  • Node.js v20+ with npm – Download
  • Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
    See Browser Support for the full list
New Project
Existing Project

Get Started#

Start fresh with a standalone AI Editor project. This creates a complete, ready-to-run React application with Design, Photo, and Video editing modes and AI generation capabilities.

Step 1: Clone the Repository#

Terminal
git clone https://github.com/imgly/starterkit-ai-editor-react-web.git
git clone https://github.com/imgly/starterkit-ai-editor-react-web.git

The src/ folder contains the editor code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── config/
│   │   ├── design-editor/
│   │   │   ├── actions.ts                # Export/import actions
│   │   │   ├── features.ts               # Feature toggles
│   │   │   ├── i18n.ts                   # Translations
│   │   │   ├── plugin.ts                 # Main configuration plugin
│   │   │   ├── settings.ts               # Engine settings
│   │   │   └── ui/
│   │   │       ├── canvas.ts                 # Canvas configuration
│   │   │       ├── components.ts             # Custom component registration
│   │   │       ├── dock.ts                   # Dock layout configuration
│   │   │       ├── index.ts                  # Combines UI customization exports
│   │   │       ├── inspectorBar.ts           # Inspector bar layout
│   │   │       ├── navigationBar.ts          # Navigation bar layout
│   │   │       └── panel.ts                  # Panel configuration
│   │   ├── photo-editor/          # Same structure as design-editor/
│   │   └── video-editor/          # Same structure as design-editor/
│   ├── index.ts                  # Editor initialization function
│   └── plugins/
│       └── ai-app/
│           ├── ai-apps.ts
│           └── ai-providers.ts
└── index.tsx                 # Application entry point

Step 2: Install Dependencies#

Install the required packages:

Terminal
cd starterkit-ai-editor-react-web
npm install
cd starterkit-ai-editor-react-web
npm install

Step 3: Download Assets#

CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project’s public/ directory.

Terminal
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.1/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.1/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
src/index.tsx
const config = {
  // ...
  baseURL: '/assets'
  // ...
};

Step 4: Run the Development Server#

Terminal
npm run dev
npm run dev

Open http://localhost:5173 in your browser. Use the mode selector at the top to switch between Design, Photo, and Video modes.

Configure AI Providers#

The AI Editor uses proxy URLs to securely connect to AI providers. Configure your proxy endpoints in the environment:

.env
VITE_FAL_AI_PROXY_URL=https://your-server.com/api/proxy/falai
VITE_ANTHROPIC_PROXY_URL=https://your-server.com/api/proxy/anthropic
VITE_OPENAI_PROXY_URL=https://your-server.com/api/proxy/openai
VITE_ELEVENLABS_PROXY_URL=https://your-server.com/api/proxy/elevenlabs

The AI provider configuration is managed in src/imgly/plugins/ai-app/ai-providers.ts:

src/imgly/plugins/ai-app/ai-providers.ts
export function createAIProviders(mode: SceneMode): AIProviders {
  return {
    image: {
      provider: 'fal.ai',
      proxyUrl: import.meta.env.VITE_FAL_AI_PROXY_URL
    },
    video: {
      provider: 'fal.ai',
      proxyUrl: import.meta.env.VITE_FAL_AI_PROXY_URL
    },
    text: {
      provider: 'anthropic',
      proxyUrl: import.meta.env.VITE_ANTHROPIC_PROXY_URL
    },
    audio: {
      provider: 'elevenlabs',
      proxyUrl: import.meta.env.VITE_ELEVENLABS_PROXY_URL
    }
  };
}

See AI Integration for detailed provider setup and proxy server configuration.

Set Up a Scene#

CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case:

src/imgly/config/index.ts
// Create a blank design canvas - starts with an empty design scene
await cesdk.actions.run('scene.create');


// Load from a template archive - restores a previously saved project
await cesdk.loadFromArchiveURL('https://example.com/template.zip');


// Load from an image URL - creates a new scene with the image
await cesdk.createFromImage('https://example.com/image.jpg');


// Load from a scene file - restores a scene from JSON
await cesdk.loadFromURL('https://example.com/scene.json');

Customize Assets#

The AI Editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what’s included based on your needs.

Asset sources are added via plugins. Enable or disable individual sources:

src/imgly/config/design-editor/plugin.ts
import {
  FiltersAssetSource,
  StickerAssetSource,
  TextAssetSource,
  VectorShapeAssetSource,
  EffectsAssetSource,
  // ...
} from '@cesdk/cesdk-js/plugins';


// Add only the sources you need
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new StickerAssetSource());
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
// ...

For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See Serve Assets for downloading assets, configuring baseURL, and excluding unused sources to optimize load times.

Configure Actions#

Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.

Key built-in actions:

  • exportDesign – Export the current design to PNG, JPEG, PDF, or other formats
  • saveScene – Save the scene as a JSON string for later editing
  • importScene – Import a previously saved scene (supports .scene and .cesdk formats)
  • exportScene – Export the scene as a JSON file or .cesdk archive with all assets
  • uploadFile – Handle file uploads with progress tracking

Use cesdk.actions.run() to execute any action:

// Run a built-in action
await cesdk.actions.run('exportDesign', { mimeType: 'image/png' });

Import from File Picker#

src/imgly/config/design-editor/actions.ts
// Let users open images from their device
cesdk.actions.register('importImage', async () => {
  const blobURL = await cesdk.utils.loadFile({
    accept: 'image/*',
    returnType: 'objectURL'
  });
  await cesdk.createFromImage(blobURL);
});

Export and Save#

src/imgly/config/design-editor/actions.ts
// Register export action that downloads the edited design
cesdk.actions.register('exportDesign', async (exportOptions) => {
  const { blobs, options } = await cesdk.utils.export(exportOptions);
  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
});

Customize (Optional)#

Theming#

CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:

src/imgly/config/design-editor/settings.ts
// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
cesdk.ui.setTheme('dark');

See Theming for custom color schemes, CSS variables, and advanced styling options.

Localization#

Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:

src/imgly/config/design-editor/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'actions.export.image': 'Download Design',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


// Set the active locale
cesdk.i18n.setLocale('de');

See Localization for supported languages, translation key reference, and right-to-left language support.

UI Layout#

CE.SDK Editor UI Areas

Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.

See Dock, Inspector Bar, Navigation Bar, Canvas Menu, and Canvas for detailed layout customization options.

Settings & Features#

Fine-tune editor behavior through settings and features.

Settings configure core engine behavior—rendering, input handling, and history management:

src/imgly/config/design-editor/settings.ts
cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);

Features toggle which editing tools and panels appear in the UI:

src/imgly/config/design-editor/features.ts
// Toggle editor features
cesdk.feature.enable('ly.img.crop', true);
cesdk.feature.enable('ly.img.filter', true);
cesdk.feature.enable('ly.img.adjustment', true);

See Settings and Features for the complete reference.

Explore Plugins#

CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities.

AI Generation#

The AI Editor uses multiple plugins for different generation capabilities:

  • @imgly/plugin-ai-apps-web - Main AI Apps interface
  • @imgly/plugin-ai-generation-web - Core generation utilities
  • @imgly/plugin-ai-image-generation-web - Image generation (fal.ai, OpenAI)
  • @imgly/plugin-ai-text-generation-web - Text generation (Anthropic, OpenAI)
  • @imgly/plugin-ai-video-generation-web - Video generation (fal.ai)
  • @imgly/plugin-ai-audio-generation-web - Audio generation (ElevenLabs)
src/imgly/plugins/ai-app/ai-apps.ts
import AiApps from '@imgly/plugin-ai-apps-web';
import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs';


await cesdk.addPlugin(
  AiApps({
    providers: {
      text2image: FalAiImage({ proxyUrl: '...' }),
      text2text: Anthropic({ proxyUrl: '...' }),
      text2video: FalAiVideo({ proxyUrl: '...' }),
      text2audio: Elevenlabs({ proxyUrl: '...' })
    }
  })
);

See AI Integration for provider setup and supported AI features.

Background Removal#

Add AI-powered background removal that runs entirely client-side:

src/imgly/plugins/background-removal.ts
import BackgroundRemovalPlugin from '@imgly/plugin-background-removal';


await cesdk.addPlugin(BackgroundRemovalPlugin());

See Background Removal for setup instructions and configuration options.

Key Capabilities#

The AI Editor includes everything needed for AI-powered creative editing.

Image Generation

Image Generation

Generate images from text prompts or transform existing images with AI-powered styles and effects.

Video Generation

Video Generation

Create short video clips from images or prompts with AI-powered animation and effects.

Audio Generation

Audio Generation

Generate royalty-free soundtracks and audio effects from text descriptions.

Voice Generation

Voice Generation

Create natural-sounding voiceovers from text scripts with adjustable speed and voice selection.

Background Removal

Background Removal

AI-powered background removal that runs entirely in the browser without server dependencies.

Multi-Mode Editing

Multi-Mode Editing

Switch between Design, Photo, and Video editing modes with optimized configurations for each.


Troubleshooting#

Editor doesn’t load#

  • Check the container element exists: Ensure your container element is in the DOM before calling create()
  • Verify the baseURL: Assets must be accessible from the CDN or your self-hosted location
  • Check console errors: Look for CORS or network errors in browser developer tools

AI generation fails#

  • Check proxy configuration: Ensure your proxy URLs are correctly configured in .env
  • Verify API keys: Make sure your AI provider API keys are valid and have sufficient credits
  • Check network requests: Open DevTools Network tab and look for failed requests to your proxy server

Assets don’t appear#

  • Check network requests: Open DevTools Network tab and look for failed requests to cdn.img.ly
  • Self-host assets for production: See Serve Assets to host assets on your infrastructure

Watermark appears in production#

  • Add your license key: Set the license property in your configuration
  • Sign up for a trial: Get a free trial license at img.ly/forms/free-trial

Next Steps#

  • AI Integration – Configure AI providers and proxy servers
  • Configuration – Complete list of initialization options
  • Serve Assets – Self-host engine assets for production
  • Actions – Build custom export and save workflows
  • Theming – Customize colors and appearance