Search Docs
Loading...
Skip to content

Getty Images Editor for Vue

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 a design interface with Getty Images photos

10 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

  • Node.js v22+ 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#

Create a new Vue application with Getty Images Editor integration.

Step 1: Create a New Project#

Terminal 
npm create vue@latest your-project-name
cd your-project-name
npm create vue@latest your-project-name
cd your-project-name

Step 2: Clone the Starter Kit#

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

Terminal 
git clone https://github.com/imgly/starterkit-getty-asset-source-ts-web.git
cp -r starterkit-getty-asset-source-ts-web/src/imgly ./src/imgly
rm -rf starterkit-getty-asset-source-ts-web
git clone https://github.com/imgly/starterkit-getty-asset-source-ts-web.git
cp -r starterkit-getty-asset-source-ts-web/src/imgly ./src/imgly
rm -rf starterkit-getty-asset-source-ts-web

Step 3: Install Dependencies#

Install the required packages for the editor:

Core Editor#

Install the Creative Editor SDK:

Terminal 
npm install @cesdk/cesdk-js@1.80.0
npm install @cesdk/cesdk-js@1.80.0

Background Removal#

Add AI-powered background removal:

Terminal 
npm install @imgly/background-removal onnxruntime-web
npm install @imgly/background-removal onnxruntime-web

The onnxruntime-web package provides the machine learning runtime required for client-side AI processing.

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.80.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.80.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip

Step 5: Create the Editor Component#

Create a Vue component using the official CE.SDK Vue wrapper (e.g., GettyImagesEditor.vue):

<template>
  <CreativeEditor
    :config="{ baseURL: '/assets' }"
    :init="initGettyImagesEditor"
    width="100vw"
    height="100vh"
  />
</template>


<script setup lang="ts">
import { initGettyImagesEditor } from './imgly';
import CreativeEditor from '@cesdk/cesdk-js/vue';
</script>

Step 6: Use the Component#

Use the component in your app:

<template>
  <GettyImagesEditor />
</template>


<script setup lang="ts">
import GettyImagesEditor from './components/GettyImagesEditor.vue';
</script>

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/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.load('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.load('https://example.com/scene.json');

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

Customize Assets#

The Getty Images 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 in src/imgly/index.ts. Enable or disable individual sources:

src/imgly/index.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 (.imgly or .scene)
  • exportScene – Export the scene as an .imgly file, either the scene alone or an 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);
});

Getty Images Integration#

The Getty Images Editor replaces the default image library with Getty Images’ extensive collection of premium stock photos.

How It Works#

The integration uses a proxy server to securely authenticate with Getty Images API. A custom asset source translates Getty Images API responses to CE.SDK’s asset format.

src/imgly/index.ts
// Add Getty Images library integration
// Requires: a proxy server for Getty Images API authentication
// Configure: Pass gettyProxyUrl option or set VITE_GETTY_IMAGES_PROXY_URL env var
await cesdk.addPlugin(new GettyImagesAssetSourcePlugin({
  proxyUrl: options.gettyProxyUrl
}));

Search and Browse#

Users can search Getty Images’ library or browse featured collections:

  • Search: Type keywords to find relevant premium photos
  • Collections: Browse curated collections and editorial images
  • Pagination: Automatically loads more results as users scroll

Licensing and Attribution#

Getty Images requires proper licensing for all images. The integration ensures:

  • Licensing compliance: Images are properly licensed for use
  • Rights information: Metadata includes usage rights and restrictions
  • Attribution: Proper credit and attribution information is tracked

Set Up Getty Images Proxy Server#

For production use, you must proxy Getty Images API requests through your server. This keeps your credentials secure and prevents exposure in client-side code.

Why a Proxy?#

  • Security: API credentials should never be in frontend code
  • Rate limiting: Control and monitor API usage
  • Compliance: Required by Getty Images API guidelines

Proxy Implementation#

Create a proxy endpoint that adds your Getty Images credentials. The starter kit includes a complete example at api/getty-images-proxy-example.ts:

api/getty-images-proxy.ts
// Example serverless function (Vercel, AWS Lambda, etc.)
export default async function handler(req, res) {
  const apiKey = process.env.GETTY_IMAGES_API_KEY;
  const apiSecret = process.env.GETTY_IMAGES_API_SECRET;


  const response = await fetch(`https://api.gettyimages.com${req.url}`, {
    headers: {
      'Api-Key': apiKey,
      'Api-Secret': apiSecret
    }
  });


  const data = await response.json();
  res.json(data);
}

Configure the Proxy URL#

Set the environment variable to point to your proxy:

.env
VITE_GETTY_IMAGES_PROXY_URL=https://your-domain.com/api/getty-images

Then pass it to the init function:

src/main.ts
await initGettyImagesEditor(cesdk, {
  gettyProxyUrl: import.meta.env.VITE_GETTY_IMAGES_PROXY_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': 'Getty Images',
    'actions.export.image': 'Download Design',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


// Add a new language
cesdk.i18n.setTranslations({
  de: {
    'libraries.gettyImages.label': 'Getty Images',
    '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'
]);


// Customize the inspector bar
cesdk.ui.setInspectorBarOrder([
  'ly.img.fill.inspectorBar',
  'ly.img.separator',
  'ly.img.filter.inspectorBar'
]);

The Order API methods follow a consistent pattern across all UI areas:

  • get*Order() – Retrieve the current component order
  • set*Order() – Replace the entire order
  • insert*OrderComponent() – Add components relative to existing ones

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 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-4 and 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.

Discover More Plugins#

Explore the full plugin ecosystem in the IMG.LY plugins repository. Available plugins include:

  • Vectorizer – Convert raster images to vectors
  • Design Presets – Pre-built design templates
  • Social Media Templates – Platform-specific sizing
  • And more – Check the repository for the latest additions

Key Capabilities#

The Getty Images Editor combines professional design tools with premium stock photography.

Getty Images Integration

Getty Images Integration

Search and use millions of premium high-quality stock photos with proper licensing and attribution.

Server-Side Auth

Server-Side Auth

Secure proxy server authentication keeps your Getty Images credentials safe.

Professional Filters

Professional Filters

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

Text & Typography

Text & Typography

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

Multi-Page Documents

Multi-Page Documents

Create presentations, brochures, and multi-page designs.

Export Options

Export Options

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


Troubleshooting#

Getty Images photos don’t load#

  • Check proxy server: Verify your proxy server is running and accessible
  • Check proxy URL: Verify you’ve configured the Getty Images proxy URL correctly
  • Check console errors: Look for network errors or CORS issues
  • Test proxy directly: Ensure your proxy server is returning valid responses

“Getty Images proxy URL not configured” warning#

  • Set environment variable: Set VITE_GETTY_IMAGES_PROXY_URL in your .env file
  • Pass to init function: Pass gettyProxyUrl to initGettyImagesEditor()
  • For development: The demo proxy is used automatically if no URL is provided

Rate limiting errors#

  • Monitor request rates: Getty Images API has rate limits based on your plan
  • Check proxy logs: Your proxy should log API requests and rate limit headers
  • Upgrade plan: Contact Getty Images for increased rate limits

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

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#