Skip to content

Clone GitHub Vanilla Svelte Project

This guide walks you through downloading and running a prebuilt CreativeEditor SDK (CE.SDK) integration project using Svelte (without SvelteKit) from GitHub. It’s the fastest way to get started with CE.SDK—no need to set up everything from scratch.

Who Is This Guide For?

This guide is ideal for developers who:

  • Want to try out CE.SDK without setting up a custom environment.
  • Prefer working with a preconfigured Svelte sample project (without SvelteKit).
  • Are comfortable using Git and Node.js to set up local development environments.

What You’ll Achieve

  • Clone the CE.SDK Svelte integration 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: Required to use CE.SDK. Obtain one by starting a free trial.

Step 1: Clone the GitHub Repository

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

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

Then navigate to the Svelte integration folder:

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

Step 2: Install the Dependencies

Install the project’s dependencies via npm:

Terminal window
npm install

Step 3: Add Your License Key

Open the CE.SDK editor component file (located at /src/lib/CreativeEditorSDK.svelte), and replace the placeholder license key with your own:

const defaultConfig = {
  license: '<YOUR_CE_SDK_LICENSE>', // replace this with your CE.SDL license key
  // ...
};

Step 4: Run the Project

Start the local Vite development server by running:

Terminal window
npm run dev

By default, the Svelte application will be accessible at your 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 before executing npm run dev. This step installs Vite, which is required to run the project 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: