Search Docs
Loading...
Skip to content

Pexels Image Editor for Nuxt.js

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

Pexels Image Editor starter kit showing Pexels stock photo integration interface

10 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

  • Pexels API Key – Get your free API key at Pexels API
  • 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#

Create a new Nuxt.js application with Pexels Image Editor integration.

Step 1: Create a New Project#

Terminal
npx nuxi@latest init your-project-name
cd your-project-name
npx nuxi@latest init 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-pexels-asset-source-ts-web.git
cp -r starterkit-pexels-asset-source-ts-web/app/imgly ./app/imgly
rm -rf starterkit-pexels-asset-source-ts-web
git clone https://github.com/imgly/starterkit-pexels-asset-source-ts-web.git
cp -r starterkit-pexels-asset-source-ts-web/app/imgly ./app/imgly
rm -rf starterkit-pexels-asset-source-ts-web

Step 3: Install Dependencies#

Core Editor#

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

Step 4: Download Assets#

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: Create the Editor Component#

Create a client-only Vue component using the .client.vue suffix (e.g., PexelsImageEditor.client.vue):

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


// Get your free API key at https://www.pexels.com/api/
const PEXELS_API_KEY = 'YOUR_PEXELS_API_KEY';


// Wrapper to pass API key to initialization
const initWithApiKey = (cesdk: any) => initPexelsImageEditor(cesdk, { pexelsApiKey: PEXELS_API_KEY });
</script>


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

Save this file as components/PexelsImageEditor.client.vue to ensure it only renders on the client.

Step 6: Use the Component#

Import and use the component in your page:

<template>
  <PexelsImageEditor />
</template>


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

SSR Error#

If you encounter the error window is not defined, it means the component is being rendered on the server. CE.SDK requires browser APIs and must run client-side only.

Use either the .client.vue suffix (shown above) or wrap the component with <ClientOnly>:

<template>
  <ClientOnly>
    <PexelsImageEditor />
  </ClientOnly>
</template>

Using Pexels Stock Photos#

The editor provides access to millions of free stock photos from Pexels:

Via Dock Panel#

  1. Click the “Pexels” button in the dock (left sidebar)
  2. Browse curated photos or use the search bar to find specific images
  3. Click any photo to add it to your design

Via Replace#

  1. Select an image block in the editor
  2. Click “Replace” in the context menu
  3. Choose a photo from Pexels to replace the current image

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 Assets#

The Pexels Image 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 (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' });

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.pexels.label': 'Stock Photos',
    'actions.export.image': 'Download Design',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


// Add a new language
cesdk.i18n.setTranslations({
  de: {
    'libraries.pexels.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#

Pexels Stock Photos

Pexels Stock Photos

Access millions of free, high-quality stock photos from Pexels. Search and browse directly within the editor.

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.

Asset Libraries

Asset Libraries

Access built-in collections of templates, stickers, shapes, and graphics, plus import custom assets.

Privacy-First

Privacy-First

All processing happens locally in the browser. No data is sent to external servers.

Export Options

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

SSR Error: “window is not defined”#

CE.SDK requires browser APIs and cannot run during server-side rendering. Use the .client.vue suffix or wrap your component with <ClientOnly>.

Pexels photos don’t load#

  • Check your API key: Ensure you have set a valid Pexels API key via VITE_PEXELS_API_KEY or passed it to initPexelsImageEditor()
  • Check network requests: Open DevTools Network tab and look for failed requests to api.pexels.com
  • Get a free API key: Visit Pexels API to get your free key

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#