Search Docs
Loading...
Skip to content

Vectorizer Editor for Electron

Transform your pixel-based images into scalable vector graphics with Vectorizer Plugin.

Vectorizer Editor starter kit showing Image vectorization interface

15 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
  • Basic familiarity with Electron’s main and renderer process architecture
New Project
Existing Project

Get Started#

Create a new Electron application with Vectorizer Editor integration.

Step 1: Create a New Project#

Use electron-vite for a modern Electron development experience:

Terminal
npm create @quick-start/electron your-project-name — —template vanilla-ts
cd your-project-name npm install
npm create @quick-start/electron your-project-name — —template vanilla-ts
cd your-project-name npm install

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-vectorizer-editor-ts-web.git
cp -r starterkit-vectorizer-editor-ts-web/src/imgly ./src/renderer/imgly rm
-rf starterkit-vectorizer-editor-ts-web
git clone https://github.com/imgly/starterkit-vectorizer-editor-ts-web.git
cp -r starterkit-vectorizer-editor-ts-web/src/imgly ./src/renderer/imgly rm
-rf starterkit-vectorizer-editor-ts-web

Step 3: Install Dependencies#

Core Editor#

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

Vectorizer Plugin#

Terminal
npm install @imgly/plugin-vectorizer-web
npm install @imgly/plugin-vectorizer-web

Step 4: Download Assets#

Download and extract assets to the resources/ directory for bundling with the app:

Terminal
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.0/imgly-assets.zip
unzip imgly-assets.zip -d resources/
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 resources/
rm imgly-assets.zip

Step 5: Configure Asset Serving#

Update your main process to serve assets. In src/main/index.ts:

import { app, BrowserWindow, protocol } from 'electron';
import { join } from 'path';


// Register protocol for serving assets
app.whenReady().then(() => {
  protocol.registerFileProtocol('cesdk', (request, callback) => {
    const url = request.url.replace('cesdk://', '');
    const filePath = join(app.getAppPath(), 'resources', 'assets', url);
    callback({ path: filePath });
  });
});

Step 6: Initialize the Editor#

Update the renderer process (src/renderer/index.ts):

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { initVectorizerEditor } from './imgly';


const config = {
  baseURL: 'cesdk://assets',
};


CreativeEditorSDK.create('#cesdk_container', config)
  .then(async cesdk => {
    await initVectorizerEditor(cesdk);
  })
  .catch(console.error);

Update src/renderer/index.html to include the container:

<div id="cesdk_container" style="width: 100%; height: 100vh;"></div>

Step 7: Run the Application#

Terminal
npm run dev
npm run dev

Using Image Vectorization#

The editor provides two ways to generate Image vectorizations:

Via Dock Panel#

  1. Click the “Vectorize” button in the dock (left sidebar)
  2. The Vectorizer panel opens with generation options
  3. Enter your URL or text content
  4. Customize colors and size
  5. Click “Generate” to add the Image vectorization to your design

Via Canvas Menu#

  1. Right-click on the canvas
  2. Select “Vectorize Image” from the context menu
  3. The Vectorizer panel opens for customization

Packaging for Distribution#

When packaging your Electron app, ensure the assets are included:

electron-builder.config.js
module.exports = {
  extraResources: [
    {
      from: 'resources/assets',
      to: 'assets',
    },
  ],
};

Customize Assets#

The Vectorizer 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' });

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

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


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

Key Capabilities#

Image Vectorization

Image Vectorization

Generate customizable Image vectorizations with custom colors, sizes, and content. Add them to any design with a single click.

Cross-Platform Desktop

Cross-Platform Desktop

Build native desktop apps for Windows, macOS, and Linux with full offline support.

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.

Offline Support

Offline Support

All assets can be bundled with your app for fully offline functionality.

Export Options

Export Options

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


Troubleshooting#

Assets not loading#

  • Check protocol registration: Ensure the custom protocol is registered in the main process
  • Verify asset paths: Check that assets are in the correct resources/ directory
  • Check extraResources config: Ensure electron-builder is configured to include assets

Image vectorization panel doesn’t open#

  • Check plugin installation: Ensure @imgly/plugin-vectorizer-web is installed
  • Verify plugin setup: Check that setupVectorizerPlugin(cesdk) is called during initialization

Watermark appears#

  • 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