Clone GitHub Vanilla Svelte Project - Svelte

Download and run a prebuilt vanilla Svelte project from GitHub, with CreativeEditor SDK (CE.SDK) already integrated. It’s the fastest way to get started with CE.SDK—no need to set up the app from scratch.

What’s CreativeEditor SDK?#

CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case.

CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license.

Free Trial

Purchase License

Who Is This Guide For?#

This guide is ideal for developers who:

Want to test quickly CE.SDK.
Prefer working with a pre-configured Svelte sample project (without SvelteKit).
Are familiar with Git and Node.js on local environments.

What You’ll Achieve#

Clone the CE.SDK Svelte project from GitHub.
Install dependencies and run the project locally.
Launch a fully functional image and video editor directly in your browser.

Prerequisites#

Before getting started, make sure you have the following:

Git: Required to clone the project from GitHub. Download Git.
The latest LTS version of Node.js and npm: Needed to install dependencies and run the local server. Download Node.js.
A valid CE.SDK license key (Get a free trial).

Step 1: Clone the GitHub Repository#

First, clone the CE.SDK examples repository from GitHub:

Git

GitHub CLI

npx

git clone https://github.com/imgly/cesdk-web-examples.git

Clone taking too long?

Try a shallow clone instead:

git clone --depth=1 --branch main --single-branch https://github.com/imgly/cesdk-web-examples.git

Then navigate to the Angular integration folder:

cd cesdk-web-examples/integrate-with-svelte

gh repo clone imgly/cesdk-web-examples

Clone taking too long?

Try a shallow clone instead:

gh repo clone imgly/cesdk-web-examples -- --depth=1 --branch main --single-branch imgly/cesdk-web-examples

Then navigate to the Angular integration folder:

cd cesdk-web-examples/integrate-with-svelte

Use npx degit to clone only the Angular integration example:

npx degit https://github.com/imgly/cesdk-web-examples/integrate-with-svelte

Step 2: Install the Dependencies#

Install the project’s dependencies via npm:

npm install

Step 3: Add Your License Key#

Open the project in your IDE.
Open the CE.SDK editor component file: /src/lib/CreativeEditorSDK.svelte.
Replace the placeholder license key with your own:

const defaultConfig = {
  license: '<YOUR_LICENSE_KEY>', // Replace with your CE.SDK license key
  // ...
};

Step 4: Run the Project#

Start the local Vite development server by running:

npm run dev

By default, the Svelte application runs on localhost on http://localhost:5173/. Open that URL in your browser to see the creative editor in action.

Troubleshooting & Common Issues#

❌ Issue: Module not found or missing packages

Ensure you ran npm install and that it completed successfully without errors.

❌ Error: 'vite' is not recognized as an internal or external command, operable program or batch file.

Double-check that you ran npm install to install Vite before executing npm run dev. The project requires Vite to run locally.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

Confirm that your CE.SDK license key is valid, hasn’t expired, and is correctly added to the defaultConfig object.

❌ Issue: The editor doesn’t appear

Check the browser console for any specific error messages that might help you troubleshoot.

Next Steps#

Congratulations! You’ve successfully set up CE.SDK in Svelte. When you’re ready, dive deeper into the SDK and proceed with the next steps: