Search Docs
Loading...
Skip to content

Getty Images Editor for Browser

CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from Getty Images in the editor.

Getty Images Editor starter kit showing stock photo integration

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
  • Getty Images API Proxy – A server-side proxy that handles Getty Images API authentication and returns data in CE.SDK format
  • 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#

Run the Getty Images Editor starter kit directly with Vite.

Step 1: Clone the Starter Kit#

Terminal
git clone https://github.com/imgly/starterkit-getty-asset-source-ts-web.git
cd starterkit-getty-asset-source-ts-web
git clone https://github.com/imgly/starterkit-getty-asset-source-ts-web.git
cd starterkit-getty-asset-source-ts-web

Step 2: Configure Getty Images API Proxy#

Copy the example environment file and add your Getty Images API proxy URL:

Terminal
cp .env.example .envEdit .env and add your VITE_GETTY_IMAGES_PROXY_URL#
cp .env.example .envEdit .env and add your VITE_GETTY_IMAGES_PROXY_URL#

Your proxy server should accept query, page, and perPage parameters and return data in CE.SDK’s AssetsQueryResult format.

Step 3: Install Dependencies#

Terminal
npm install
npm install

Step 4: 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.0/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.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip

Step 5: Run the Development Server#

Terminal
npm run dev
npm run dev

Open http://localhost:5173 in your browser. Click “Getty Images” in the dock to search and browse stock photos.

Using Getty Images#

The editor integrates Getty Images as the primary image source, replacing the default image library.

Browsing Photos#

  1. Click the “Getty Images” button in the dock (left sidebar)
  2. The Getty Images library opens showing curated photos
  3. Click any photo to add it to your design

Searching Photos#

  1. Open the Getty Images library
  2. Use the search bar at the top of the panel
  3. Type your search query and press Enter
  4. Browse results and click to add photos

Replacing Images#

  1. Select an existing image in your design
  2. Click “Replace” in the inspector
  3. The Getty Images library opens automatically
  4. Select a new photo to replace the current one

Set Up a Scene#

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

src/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');

The createDesignScene() method is ideal for design workflows, as it creates a blank canvas ready for content.

Customize the Getty Images Integration#

The Getty Images asset source plugin can be customized by modifying src/imgly/plugins/getty-images.ts:

src/imgly/plugins/getty-images.ts
export class GettyImagesAssetSourcePlugin implements EditorPlugin {
  name = 'cesdk-getty-images-asset-source';
  version = CreativeEditorSDK.version;


  private options: GettyImagesAssetSourcePluginOptions;


  constructor(options: GettyImagesAssetSourcePluginOptions = {}) {
    this.options = options;
  }


  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    // Use proxy URL from options
    const proxyUrl = this.options.proxyUrl ?? '';


    // Create and add the asset source
    const gettyImagesAssetSource = createGettyImagesAssetSource(proxyUrl);
    cesdk.engine.asset.addSource(gettyImagesAssetSource);


    // Configure dock to show Getty Images instead of default images
    const currentDockOrder = cesdk.ui.getDockOrder();
    cesdk.ui.setDockOrder(
      currentDockOrder.map((component) => {
        if (component.key === 'ly.img.image') {
          return {
            id: 'ly.img.assetLibrary.dock',
            key: 'gettyImages',
            label: 'libraries.gettyImages.label',
            entries: ['gettyImagesImageAssets']
          };
        }
        return component;
      })
    );
  }
}

Proxy Server Response Format#

Your proxy server must return data in CE.SDK’s AssetsQueryResult format:

interface AssetsQueryResult {
  assets: AssetResult[];
  total: number;
  currentPage: number;
  nextPage: number | undefined;
}


interface AssetResult {
  id: string;
  meta: {
    thumbUri: string;
    uri: string;
    width: number;
    height: number;
    mimeType: string;
  };
  credits?: {
    name: string;
    url: string;
  };
}

The proxy should accept these query parameters:

  • query – Search query string
  • page – Page number (1-based)
  • perPage – Number of results per page

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/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/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);
});

Upload to Your Backend#

src/imgly/config/actions.ts
// Override the built-in exportDesign action to send to your server
cesdk.actions.register('exportDesign', async (exportOptions) => {
  const { blobs } = await cesdk.utils.export(exportOptions);


  const formData = new FormData();
  formData.append('design', blobs[0], 'design.png');


  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });


  const { url } = await response.json();
  console.log('Uploaded to:', url);
});

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/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/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'libraries.gettyImages.label': 'Stock Photos',
    'actions.export.image': 'Download Design',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


// Add a new language
cesdk.i18n.setTranslations({
  de: {
    'libraries.gettyImages.label': 'Stockfotos',
    'actions.export.image': 'Design herunterladen'
  }
});


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

src/imgly/config/ui/navigationBar.ts
// 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.

Custom Components#

Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API.

src/imgly/config/ui/components.ts
// Register a custom component
cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => {
  const selectedBlocks = engine.block.findAllSelected();


  builder.Button('apply-effect', {
    label: 'Apply Effect',
    isDisabled: selectedBlocks.length === 0,
    onClick: () => {
      // Apply custom logic to selected blocks
    }
  });
});


// Add the component to the navigation bar
cesdk.ui.insertNavigationBarOrderComponent(
  'ly.img.spacer',
  'my-custom-button',
  'after'
);

Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required.

See Register New Component for the complete builder API and component patterns.

Settings & Features#

Fine-tune editor behavior through settings and features.

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

src/imgly/config/settings.ts
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:

src/imgly/config/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. Plugins can add new features, integrate third-party services, or customize editor behavior.

Background Removal#

Add AI-powered background removal that runs entirely client-side. The background removal plugin processes images directly in the browser without sending data to external servers.

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


// Add background removal capability
await cesdk.addPlugin(BackgroundRemovalPlugin());

See Background Removal for setup instructions and configuration options.

Export print-ready PDF/X-3 files with CMYK color profiles for professional printing workflows.

src/imgly/config/plugin.ts
import PrintReadyPDFPlugin from '@imgly/plugin-print-ready-pdf';


// Add print-ready PDF export capability
await cesdk.addPlugin(PrintReadyPDFPlugin());

See Print Ready PDF for setup instructions and configuration options.

AI Integration#

Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers.

src/imgly/config/plugin.ts
import AIPlugin from '@imgly/plugin-ai-generation';


// Configure AI generation
await cesdk.addPlugin(AIPlugin({
  provider: 'your-ai-provider',
  apiKey: 'your-api-key'
}));

See AI Integration for provider setup and supported AI features.

Key Capabilities#

The Getty Images Editor includes premium stock photo integration plus full design editing capabilities.

Getty Images Integration

Getty Images Integration

Search and browse millions of premium stock photos from Getty Images. Add photos to your designs with one click.

Professional Filters

Professional Filters

Apply color grading with LUT filters, duotone effects, and customizable image adjustments.

Text & Typography

Text & Typography

Add styled text with comprehensive typography controls, fonts, and visual effects.

Design Templates

Design Templates

Start from pre-built templates or create designs from scratch with a full-featured canvas.

Server-Side Auth

Server-Side Auth

Getty Images API authentication handled securely through your proxy server.

Export Options

Export Options

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


Troubleshooting#

”Please provide your Getty Images API proxy URL” alert#

  • Set your proxy URL: Add VITE_GETTY_IMAGES_PROXY_URL to your .env file or pass it to initGettyImagesEditor()
  • Verify proxy is running: Ensure your proxy server is accessible from the browser

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

Getty Images photos don’t load#

  • Verify your proxy server: Make sure your proxy is running and returning valid responses
  • Check CORS configuration: Ensure your proxy allows requests from your domain
  • Test the proxy directly: Make a direct request to your proxy URL to verify it works
  • Check network requests: Look for 401, 403, or 500 errors in the Network tab

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#