Automated Resizing - React

Automatically generate size variations of your design and easily scale your marketing materials across different platforms.

Design Editor starter kit showing a professional design editing interface

10 mins

estimated time

Download

StackBlitz

GitHub

Prerequisites#

Before you begin, make sure you have the following:

Node.js v20+ and npm installed locally – Download Node.js
A supported browser – 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 Automated Resizing project. This creates a complete, ready-to-run React application that demonstrates content-aware resizing across multiple social media formats.

Step 1: Clone the Repository#

Terminal

git clone https://github.com/imgly/starterkit-automated-resizing-react-web.git

git clone https://github.com/imgly/starterkit-automated-resizing-react-web.git

npx degit imgly/starterkit-automated-resizing-react-web starterkit-automated-resizing-react-web

npx degit imgly/starterkit-automated-resizing-react-web starterkit-automated-resizing-react-web

The src/ folder contains the React application:

src/
├── app/                          # Demo application
├── imgly/
│   ├── advanced-editor-config/
│   │   ├── 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
│   ├── design-editor-config/
│   │   ├── 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
│   ├── index.ts                  # Editor initialization function
│   ├── resizing.ts               # Content-aware resizing logic
│   └── types.ts                  # TypeScript type definitions
└── index.tsx                 # Application entry point

Step 2: Install Dependencies#

Install the required packages:

Terminal

cd starterkit-automated-resizing-react-web
npm install

cd starterkit-automated-resizing-react-web
npm install

cd starterkit-automated-resizing-react-web
pnpm install

cd starterkit-automated-resizing-react-web
pnpm install

cd starterkit-automated-resizing-react-web
yarn

cd starterkit-automated-resizing-react-web
yarn

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

const config = {
  // ...
  baseURL: '/assets'
  // ...
};

Step 4: Run the Development Server#

Terminal

npm run dev

npm run dev

pnpm run dev

pnpm run dev

yarn dev

yarn dev

Open http://localhost:5173 in your browser.

Get Started#

Integrate the Automated Resizing into an existing React application. This adds the editor configuration to your current project structure.

Step 1: Clone#

Terminal

cd your-project

cd your-project

Clone the starter kit and copy the editor configuration to your project:

Terminal

git clone https://github.com/imgly/starterkit-automated-resizing-react-web.git
cp -r starterkit-automated-resizing-react-web/src/imgly ./src/imgly
rm -rf starterkit-automated-resizing-react-web

git clone https://github.com/imgly/starterkit-automated-resizing-react-web.git
cp -r starterkit-automated-resizing-react-web/src/imgly ./src/imgly
rm -rf starterkit-automated-resizing-react-web

npx degit imgly/starterkit-automated-resizing-react-web/src/imgly ./src/imgly

npx degit imgly/starterkit-automated-resizing-react-web/src/imgly ./src/imgly

The imgly/ folder contains the editor configuration:

imgly/
├── advanced-editor-config/
│   ├── 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
├── design-editor-config/
│   ├── 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
├── index.ts                  # Editor initialization function
├── resizing.ts               # Content-aware resizing logic
└── types.ts                  # TypeScript type definitions

Step 2: Install Dependencies#

Install the required packages for the editor:

Core Editor#

Install the Creative Editor SDK:

Terminal

npm install @cesdk/cesdk-js

npm install @cesdk/cesdk-js

pnpm add @cesdk/cesdk-js

pnpm add @cesdk/cesdk-js

yarn add @cesdk/cesdk-js

yarn add @cesdk/cesdk-js

Step 3: Download Assets#

CE.SDK requires engine assets (fonts, icons, UI elements) to function. For React projects, place these in your public/ directory which is served automatically.

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

Step 4: Create the Editor Component#

Choose your editing mode and initialize the editor accordingly:

Design Editor

Advanced Editor

import CreativeEditor from '@cesdk/cesdk-js/react';
import { initAutomatedResizingDesignEditor } from './imgly';

export default function DesignEditor() {
  return (
    <CreativeEditor
      config={{ baseURL: '/assets' }}
      init={initAutomatedResizingDesignEditor}
      width="100vw"
      height="100vh"
    />
  );
}

import CreativeEditor from '@cesdk/cesdk-js/react';
import { initAutomatedResizingAdvancedEditor } from './imgly';

export default function DesignEditor() {
  return (
    <CreativeEditor
      config={{ baseURL: '/assets' }}
      init={initAutomatedResizingAdvancedEditor}
      width="100vw"
      height="100vh"
    />
  );
}

Auto Resize#

The starterkit provides the resize function for content-aware resizing:

import { resize, DEFAULT_SIZES } from './imgly';

DEFAULT_SIZES contains preset dimensions for common social media formats (Instagram Story, Instagram Post 4:5, X Post, Facebook Post). Each size follows this structure:

{
  id: 'ig-story',
  label: 'Instagram Story',
  width: 1080,
  height: 1920,
  designUnit: 'Pixel',
  platform: 'instagram'
}

resize#

Generate resized variants for all specified sizes. Returns blobs—the caller handles URL creation and cleanup:

const variants = await resize({
  engine: cesdk.engine,
  sizes: DEFAULT_SIZES,
  scene: templateSceneString,
  exportOptions: { mimeType: 'image/png' },
  onProgress: (completed, total, variant) => {
    // Create URL for rendering
    const url = URL.createObjectURL(variant.blob);
    console.log(`Generated ${completed}/${total}: ${variant.size.label}`);
  }
});

The exportOptions parameter accepts CE.SDK’s ExportOptions type, supporting formats like image/png, image/jpeg, image/webp, and quality settings.

Customize Assets#

The editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. Customize what’s included based on your needs.

Asset sources are added via plugins in src/imgly/index.ts. Enable or disable individual sources:

import {
  FiltersAssetSource,
  StickerAssetSource,
  TextAssetSource,
  VectorShapeAssetSource,
  EffectsAssetSource,
  DemoAssetSources,
  // ...
} 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());

// Demo assets include social media templates
await cesdk.addPlugin(
  new DemoAssetSources({
    include: [
      'ly.img.templates.blank.*',
      'ly.img.templates.social.*',
      'ly.img.image.*'
    ]
  })
);

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.

Customize (Optional)#

Theming#

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

// '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:

// 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.

// Get current navigation bar components
const navOrder = cesdk.ui.getNavigationBarOrder();

// Add a custom button to the navigation bar
cesdk.ui.insertNavigationBarOrderComponent(
  'ly.img.spacer',
  { id: 'my-custom-action' },
  'after'
);

// Rearrange dock items
cesdk.ui.setDockOrder([
  'ly.img.assetLibrary.dock',
  'ly.img.separator',
  'my-custom-dock-item'
]);

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:

cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
cesdk.engine.editor.setSettingBool('features/undoHistory', true);

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

// 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.

Key Capabilities#

The Automated Resizing starter kit includes everything needed for multi-format content generation.

Content-Aware Resizing

Intelligently resize designs while maintaining visual balance and element positioning.

Multi-Platform Output

Generate variants for Instagram, Facebook, X, LinkedIn, YouTube, and custom sizes in one click.

Editable Results

Fine-tune any generated variant with the full editor—adjust layouts, text, and imagery.

Template System

Start from pre-designed templates or create custom designs as your resizing source.

React Integration

Built with React 18+ using custom hooks for clean state management and component architecture.

Export Options

Export to multiple formats including PNG, JPEG, and PDF with quality and size controls.

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

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

Export fails or produces blank images#

Wait for content to load: Ensure images are fully loaded before exporting
Check CORS on images: Remote images must allow cross-origin access

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#

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
Localization – Add translations and language support

Automated Resizing for React

Prerequisites#

Get Started#

Step 1: Clone the Repository#

Step 2: Install Dependencies#

Step 3: Download Assets#

Step 4: Run the Development Server#

Get Started#

Step 1: Clone#

Step 2: Install Dependencies#

Core Editor#

Step 3: Download Assets#

Step 4: Create the Editor Component#

Auto Resize#

resize#

Customize Assets#

Customize (Optional)#

Theming#

Localization#

UI Layout#

Settings & Features#

Key Capabilities#

Content-Aware Resizing

Multi-Platform Output

Editable Results

Template System

React Integration

Export Options

Troubleshooting#

Editor doesn’t load#

Assets don’t appear#

Export fails or produces blank images#

Watermark appears in production#

Next Steps#