Skip to content

Existing SvelteKit Project

This tutorial will guide you through integrating CreativeEditor SDK (CE.SDK) with a custom component in an existing SvelteKit application. By the end, your SvelteKit app will have a fully functional CE.SDK component, ready for further customization.

Who Is This Tutorial 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 application.

What You’ll Achieve

  • Install CE.SDK via NPM.
  • Set up CE.SDK within your SvelteKit project.
  • Create a creative editor component using CE.SDK with basic configuration.
  • Render the custom CE.SDK component in your SvelteKit application.

Prerequisites

Before you begin, make sure you have:

Step 1: Install CE.SDK

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

Terminal window
npm install @cesdk/cesdk-js

Step 2: Define the Creative Editor Svelte Component

Suppose your existing SvelteKit project was created using the Svelte CLI and has 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

Inside the src/lib/ folder of your project, create a new file named CreativeEditorSDK.svelte and populate it as below:

<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;


  // deafult CreativeEditor SDK configuration
  const defaultConfig = {
    license: '<YOUR_LICENSE_KEY>', // replace it with a valid CE.SDK license key
    callbacks: { onUpload: 'local' }, // enable local file uploads in the Asset Library
    // 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>

The above Svelte component initializes a CreativeEditor SDK instance inside a <div> container. It then guarantees proper cleanup by disposing of the CE.SDK instance when the component is unmounted.

Optional: If you’re using index.js in src/lib/ to simplify component exports, add the following line:

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

Step 3: Use the Creative Editor Component

CreativeEditor SDK must be used on the client to work. In your SSR src/routes/+page.svelte route file, dynamically import the CreativeEditorSDK.svelte component inside the <script> section:

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;
  });
}

Note: browser from $app/environment is true only when the application is rendered in the browser.

Alternatively, if you exported CreativeEditorSDK in src/lib/index.js, the dynamic import can be simplified:

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

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

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

Or, if you don’t need custom configurations:

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

At the end of this step, your src/routes/+page.svelte file should look something like this:

<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 this command:

Terminal window
npm run dev

By default, the application will be served by Vite and be available on your localhost at http://localhost:5173/.

Step 5: Test the Integration

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

Troubleshooting & Common Errors

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

  • Confirm that CE.SDK is installed properly with npm install @cesdk/cesdk-js.

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

  • Ensure that you’re using $props() at the top level of the <script> section in CreativeEditorSDK.svelte, rather than inside onMount() or other lifecycle methods.

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

  • Make sure CreativeEditorSDK is dynamically imported in /src/routes/+page.svelte and 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 has not expired.

❌ Editor does not 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: