Skip to content

Clone GitHub SvelteKit Project

This guide will walk you through the process of downloading and running a pre-configured CreativeEditor SDK (CE.SDK) integration project for SvelteKit from GitHub. That’s the quickest way to get up and running with CE.SDK, as you won’t need to start from scratch.

Who Is This Guide For?

This guide is intended for developers who:

  • Want to experiment with CE.SDK without the complexity of setting up a custom environment.
  • Prefer working with a pre-built SvelteKit template or sample project.
  • Are comfortable using Git and Node.js to set up local development environments.

What You’ll Achieve

By following this guide, you will:

  • Clone a pre-configured CE.SDK integration project for SvelteKit from GitHub.
  • Install the necessary dependencies and run the project locally.
  • Access a fully functional editor in your browser.

Prerequisites

Before you start, ensure 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 for using CE.SDK. Start a free trial to redeem yours.

Step 1: Clone the GitHub Repository

Begin by cloning the CE.SDK examples repository from GitHub:

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

Then navigate to the SvelteKit integration folder:

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

Step 2: Install the Dependencies

Once you’re in the project directory, install the required dependencies using npm:

Terminal window
npm install

This will download and install all the packages specified in the project’s package.json file.

Step 3: Add Your License Key

Locate the CE.SDK editor component file (you can find at /src/lib/CreativeEditorSDK.svelte) and replace the placeholder license key with your valid key:

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

Step 4: Run the Project

Launch the local Vite development server by running:

Terminal window
npm run dev

By default, the SvelteKit application will be listening at your localhost on http://localhost:5173/.

Troubleshooting & Common Issues

❌ Issue: Module not found or missing packages

  • Ensure you’ve run npm install and that it completed without any issues.

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

  • Double-check that you’ve run npm install before executing npm run dev. This step also 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

  • Verify 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

  • Look for any server-side errors in the terminal.
  • Check the browser console for detailed error messages.

Next Steps

Congratulations! You’ve successfully integrated CE.SDK into SvelteKit. When you’re ready, dive into the SDK and proceed to the next steps: