Existing SvelteKit Project - SvelteKit

This guide shows you how to integrate CreativeEditor SDK (CE.SDK) in an existing SvelteKit app. You can follow these steps to get a SvelteKit app with a fully functional CE.SDK custom component, ready for editing, templating, or further customization.

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 for developers who:

Are familiar with SvelteKit.
Already have a SvelteKit project set up.
Want to integrate a powerful image and video editing component into their SvelteKit app.

What You’ll Achieve#

Install CE.SDK.
Set up CE.SDK within your SvelteKit project.
Create a creative editor component using CE.SDK.
Render the custom CE.SDK component.

Prerequisites#

Before you begin, make sure you have:

Node.js v20+. Download the latest LTS version of Node.js.
A package manager (npm, yarn, pnpm)
A SvelteKit v2 project created using the Svelte CLI.
A valid CE.SDK license key.

Step 1: Install CE.SDK#

Add CreativeEditor SDK to your project’s dependencies by installing the @cesdk/cesdk-js package:

npm

yarn

pnpm

shell npm install @cesdk/cesdk-js

shell yarn add @cesdk/cesdk-js

shell pnpm add @cesdk/cesdk-js

Step 2: Define the Creative Editor Svelte Component#

If you used the Svelte CLI to create your SvelteKit project, it should have the following structure:

your-sveltekit-app/
│
├── src
│   ├── app.html
│   ├── lib
│   │   └── ...
│   └── routes
│       └── ...
│
├── static
│   └── ...
│
├── .gitignore
├── .npmrc
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
├── svelte.config.js
└── vite.config.js

To start creating your custom CE.SDK component, follow these steps:

Navigate to src/lib/ folder of your project.
Create a new file named CreativeEditorSDK.svelte.
Paste the following code into CreativeEditorSDK.svelte:

JavaScript

TypeScript

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

  // Reference to the container HTML element where CE.SDK will be initialized
  let container;
  // Where to keep track of the CE.SDK instance
  let cesdk = null;

  // Default CreativeEditor SDK configuration
  const defaultConfig = {
    license: '<YOUR_LICENSE_KEY>', // Replace with a valid CE.SDK license key
    // Other default configs...
  };

  // Accessing the component's props
  const { el, children, class: _, config, ...props } = $props();

  // Hook to initialize the CreativeEditorSDK component
  onMount(() => {
    // Integrate the configs read from props with the default ones
    const ceSDKConfig = {
      ...defaultConfig,
      ...config,
    };

    try {
      // Initialize the CreativeEditorSDK instance in the container element
      // using the given config
      CreativeEditorSDK.create(container, ceSDKConfig).then(async instance => {
        cesdk = instance;

        // Do something with the instance of CreativeEditor SDK (e.g., populate
        // the asset library with default / demo asset sources)
        await Promise.all([
          cesdk.addDefaultAssetSources(),
          cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
        ]);

        // Create a new design scene in the editor
        await cesdk.createDesignScene();
      });
    } catch (err) {
      console.warn(`CreativeEditor SDK failed to mount.`, { err });
    }
  });

  // Hook to clean up when the component unmounts
  onDestroy(() => {
    try {
      // Dispose of the CE.SDK instance if it exists
      if (cesdk) {
        cesdk.dispose();
        cesdk = null;
      }
    } catch (err) {
      // Log error if CreativeEditor SDK fails to unmount
      console.warn(`CreativeEditor SDK failed to unmount.`, { err });
    }
  });
</script>

<!-- The container HTML element where the CE.SDK editor will be mounted -->
<div id="cesdk_container" bind:this="{container}"></div>

<style>
  /* Styling for the CE.SDK container element to take full viewport size */
  #cesdk_container {
    height: 100vh;
    width: 100vw;
  }
</style>

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

  // Reference to the container HTML element where CE.SDK will be initialized
  /** @type {HTMLDivElement | null} */
  let container = null;
  // Where to keep track of the CE.SDK instance
  /** @type {any}*/
  let cesdk = null;

  // Default CreativeEditor SDK configuration
  /** @type {Record<string, any>}*/
  export let config = {};

  /** @type {'local'}*/
  const ON_UPLOAD = 'local';
  const defaultConfig = {
    license: '<YOUR_LICENSE_KEY>', // Replace with a valid CE.SDK license key
    callbacks: { onUpload: ON_UPLOAD }, // Enable local file uploads in the Asset Library
    // Other default configs...
  };

  // Hook to initialize the CreativeEditorSDK component
  onMount(() => {
    // Integrate the configs read from props with the default ones
    const ceSDKConfig = {
      ...defaultConfig,
      ...config,
    };

    if (!container) return;

    try {
      // Initialize the CreativeEditorSDK instance in the container element
      // using the given config
      CreativeEditorSDK.create(container, ceSDKConfig).then(async instance => {
        cesdk = instance;

        // Do something with the instance of CreativeEditor SDK (e.g., populate
        // the asset library with default / demo asset sources)
        await Promise.all([
          cesdk.addDefaultAssetSources(),
          cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
        ]);

        // Create a new design scene in the editor
        await cesdk.createDesignScene();
      });
    } catch (err) {
      console.warn(`CreativeEditor SDK failed to mount.`, { err });
    }
  });

  // Hook to clean up when the component unmounts
  onDestroy(() => {
    try {
      // Dispose of the CE.SDK instance if it exists
      if (cesdk) {
        cesdk.dispose();
        cesdk = null;
      }
    } catch (err) {
      // Log error if CreativeEditor SDK fails to unmount
      console.warn(`CreativeEditor SDK failed to unmount.`, { err });
    }
  });
</script>

<!-- The container HTML element where the CE.SDK editor will be mounted -->
<div id="cesdk_container" bind:this="{container}"></div>

<style>
  /* Styling for the CE.SDK container element to take full viewport size */
  #cesdk_container {
    height: 100vh;
    width: 100vw;
  }
</style>

This Svelte component:

Initializes the CreativeEditor SDK inside the component’s <div> container.
Disposes of the SDK instance on unmount to free resources.

Optional: Export Component Using the Module System#

If you organize your SvelteKit project’s components in a single src/lib/index.js file, add the following line to index.js:

export { default as CreativeEditorSDK } from './CreativeEditorSDK.svelte';

Step 3: Use the Creative Editor Component#

CreativeEditor SDK only runs on the client. To handle client-side rendering, you have to:

Import the component in a route file.
Render the component on a page withing your project.

Import the CreativeEditorSDK Component#

Dynamically import CreativeEditorSDK component as follows:

Open the relevant SSR route file, where you want to embed the component (for example, src/routes/+page.svelte).
Navigate to the <script> section.
Paste this code to dynamically import the CreativeEditorSDK component:

JavaScript

TypeScript

import { browser } from '$app/environment'; // True only if the app is running in the browser
// Use the browser flag to conditionally render client-side components
let isClient = browser;

let CreativeEditorSDK;
if (isClient) {
  // Dynamically import the CreativeEditorSDK component only in the browser
  import('$lib/CreativeEditorSDK.svelte').then(module => {
    CreativeEditorSDK = module.default;
  });
}

<script lang="ts">
import type { ComponentType } from 'svelte';
import { browser } from '$app/environment'; // True only if the app is running in the browser
// Use the browser flag to conditionally render client-side components
let isClient = browser;

let CreativeEditorSDK: ComponentType | null = null;
if (isClient) {
  // Dynamically import the CreativeEditorSDK component only in the browser
  import('$lib/CreativeEditorSDK.svelte').then(module => {
    CreativeEditorSDK = module.default;
  });
}
</script>

{#if isClient && CreativeEditorSDK}
  <CreativeEditorSDK
    config={{
      // Your custom configs here
    }}
  />
{/if}

Optional: Import Components Using the Module System#

If you exported CreativeEditorSDK in src/lib/index.js, you can simplify the dynamic import:

import('$lib').then(module => {
  CreativeEditorSDK = module.CreativeEditorSDK;
});

Render the CreativeEditorSDK Component#

Now, make sure that your app renders the video editor component only on the client side. Add this to the template section of your SvelteKit route:

Default Configs

Custom Configs

{#if isClient && CreativeEditorSDK}
<CreativeEditorSDK />
{/if}

{#if isClient && CreativeEditorSDK}
  <CreativeEditorSDK
    config={{
      // Your custom configs here
    }}
  />
{/if}

Your final src/routes/+page.svelte file should look like this:

Default Configs

Custom Configs

<script>
  // Other imports...

  import { browser } from "$app/environment"; // True only if the app is running in the browser
  // Use the browser flag to conditionally render client-side components
  let isClient = browser;

  let CreativeEditorSDK;
  if (isClient) {
    // Dynamically import the CreativeEditorSDK component only in the browser
    import("$lib/CreativeEditorSDK.svelte").then(module => {
      CreativeEditorSDK = module.default;
    });
  }
</script>

<main>
  <!-- Other components... -->
  {#if isClient && CreativeEditorSDK}
    <CreativeEditorSDK />
  {/if}
  <!-- Other components... -->
</main>

<style>
  /* Custom styling... */
</style>

<script>
  // Other imports...

  import { browser } from "$app/environment"; // True only if the app is running in the browser
  // Use the browser flag to conditionally render client-side components
  let isClient = browser;

  let CreativeEditorSDK;
  if (isClient) {
    // Dynamically import the CreativeEditorSDK component only in the browser
    import("$lib/CreativeEditorSDK.svelte").then(module => {
      CreativeEditorSDK = module.default;
    });
  }
</script>

<main>
  <!-- Other components... -->
  {#if isClient && CreativeEditorSDK}
    <CreativeEditorSDK
      config={{
        // Custom configs...
      }}
    />
  {/if}
  <!-- Other components... -->
</main>

<style>
  /* Custom styling... */
</style>

Step 4: Serve the SvelteKit Project Locally#

Start your SvelteKit project locally with the run command. Basic ones are:

npm

yarn

pnpm

shell npm run dev

shell yarn dev

shell pnpm run dev

Step 5: Test the Integration#

By default, Vite serves your app on your localhost. To test the integration:

Open http://localhost:5173/ in your browser.
A fully functional CE.SDK editor should load.

Troubleshooting & Common Errors#

❌ Error: Cannot find module '@cesdk/cesdk-js'

Check that you’ve installed CE.SDK with npm install @cesdk/cesdk-js.

❌ Error: The $props rune is only available inside .svelte and .svelte.js/ts files

Open CreativeEditorSDK.svelte.
Check the top level of the <script> section.
Make sure you’re using $props() at this level, rather than inside onMount() or other lifecycle methods.

❌ Error: Error when evaluating SSR module /src/routes/+page.svelte: document is not defined

In /src/routes/+page.svelte, make sure CreativeEditorSDK is:
- Dynamically imported.
- Only rendered on the client side.

❌ 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 correct and hasn’t expired.

❌ Editor doesn’t load

Check the browser console for any errors.
Ensure that component and library imports are correct.

Next Steps#

Congratulations! You’ve successfully integrated CE.SDK into an existing SvelteKit project. Now, feel free to explore the SDK and proceed to the next steps whenever you’re ready: