Search Docs
Loading...
Skip to content

Background Removal Editor for SvelteKit

Effortlessly remove background from images directly in the browser with no additional costs and privacy concerns.

Background Removal Editor starter kit showing AI-powered background removal 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#

Create a new SvelteKit application with Background Removal Editor integration.

Step 1: Create a New Project#

Terminal
npx sv create your-project-name
cd your-project-name
npx sv create 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-background-removal-editor-ts-web.git
cp -r starterkit-background-removal-editor-ts-web/src/lib/imgly ./src/lib/imgly
cp starterkit-background-removal-editor-ts-web/static/assets/remove-bg.png ./static/assets/
rm -rf starterkit-background-removal-editor-ts-web
git clone https://github.com/imgly/starterkit-background-removal-editor-ts-web.git
cp -r starterkit-background-removal-editor-ts-web/src/lib/imgly ./src/lib/imgly
cp starterkit-background-removal-editor-ts-web/static/assets/remove-bg.png ./static/assets/
rm -rf starterkit-background-removal-editor-ts-web

Step 3: Install Dependencies#

Core Editor#

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

Background Removal#

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

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

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

Step 5: Create the Editor Component#

Create a Svelte component using the CE.SDK imperative API (e.g., src/lib/BackgroundRemovalEditor.svelte):

<script>
  import { onMount, onDestroy } from 'svelte';
  import CreativeEditorSDK from '@cesdk/cesdk-js';
  import { initBackgroundRemovalEditor } from './imgly';


  let container;
  let cesdk = null;


  onMount(async () => {
    cesdk = await CreativeEditorSDK.create(container, {
      baseURL: '/assets'
    });
    await initBackgroundRemovalEditor(cesdk);
  });


  onDestroy(() => {
    if (cesdk) {
      cesdk.dispose();
    }
  });
</script>


<div bind:this={container} style="width: 100vw; height: 100vh;"></div>

Step 6: Use the Component#

Import and use the component in your page route (e.g., src/routes/+page.svelte):

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';


  let BackgroundRemovalEditor;


  onMount(async () => {
    const module = await import('$lib/BackgroundRemovalEditor.svelte');
    BackgroundRemovalEditor = module.default;
  });
</script>


{#if browser && BackgroundRemovalEditor}
  <svelte:component this={BackgroundRemovalEditor} />
{/if}

SSR Error#

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

Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The browser check from $app/environment ensures the component only renders client-side.

Alternatively, disable SSR for the entire page by adding a +page.ts file:

export const ssr = false;

This allows you to use a simpler static import in +page.svelte:

<script>
  import BackgroundRemovalEditor from '$lib/BackgroundRemovalEditor.svelte';
</script>


<BackgroundRemovalEditor />

Using Background Removal#

The editor provides two ways to remove backgrounds:

Via Canvas Menu#

  1. Select an image in the editor
  2. The canvas menu appears with a “BG Removal” button
  3. Click the button to AI-remove the background

Via Apps Panel#

  1. Click the “Apps” button in the dock (left sidebar)
  2. The Apps panel opens showing “Remove Background”
  3. Select an image, then click “Remove Background” in the panel

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.

Key Capabilities#

AI Background Removal

AI Background Removal

Remove backgrounds with one click. Uses ONNX Runtime for client-side AI processing—no server needed.

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 dynamic imports with the browser check from $app/environment, or disable SSR for the page.

Background removal is slow on first use#

  • This is expected: The first use downloads AI models (~30MB). Subsequent uses are instant as models are cached by the browser.

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#