Search
Loading...
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: