Search
Loading...
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 (Get a free trial).

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: