Skip to content

Existing Vanilla Svelte Project

This guide shows you how to integrate CreativeEditor SDK (CE.SDK) into your Svelte project through a custom component. By the end of this guide, your Svelte application will have a fully functional CE.SDK component, ready for customization.

Who Is This Guide For?

This tutorial is for developers who:

  • Have experience with Svelte.
  • Already have a vanilla Svelte project (without SvelteKit) in place.
  • Want to add a fully-featured image and video editor component to their Svelte application.

What You’ll Achieve

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

Prerequisites

Before getting started, ensure you have the following:

Step 1: Install CE.SDK

First, add CreativeEditor SDK to your project’s dependencies using the cesdk/cesdk-js NPM package. Run the following command in your project’s folder to install it:

Terminal window
npm install @cesdk/cesdk-js

Step 2: Create Your Creative Editor Svelte Component

Assume that your current vanilla Svelte project follows the default Vite initialization file structure:

your-svelte-app/
│
├── public
│   └── ...
│
└── src
│   ├── assets
│   │   └── ...
│   │
│   ├── lib
│   │   └── ...
│   │
│   ├── app.css
│   ├── App.svelte
│   ├── main.js
│   └── vite-env.d.ts
│
├── .gitignore
├── index.html
├── jsconfig.json
├── package.json
├── README.md
├── svelte.config.js
└── vite.config.js

In the src/lib/ folder of your Svelte project, create a file named CreativeEditorSDK.svelte containing the custom image and video component:

<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 sets up a CreativeEditor SDK instance with basic configuration inside a <div> container element defined in the component’s HTML section. Upon unmounting, the CE.SDK instance is correctly disposed of to release resources.

Step 3: Render the Creative Editor Component

Import the CreativeEditorSDK component into your App.svelte file. Add the following line in the <script> section of your App.svelte component:

import CreativeEditorSDK from './lib/CreativeEditorSDK.svelte';

You can now render the CreativeEditorSDK component in the template section of App.svelte as follows:

<CreativeEditorSDK
  config={
    {
      // custom configs ...
    }
  }
/>

Or, without custom props:

<CreativeEditorSDK />

Your App.svelte will look something like this:

<script>
  // other imports...
  import CreativeEditorSDK from "./lib/CreativeEditorSDK.svelte";
</script>


<main>
  <!-- other components... -->
  <CreativeEditorSDK
    config={{
      // custom configs ...
    }}
  />
  <!-- other components... -->
</main>


<style>
  /* custom stylying... */
</style>

Step 4: Serve the Project

Run the project locally using the development server provided by the bundler configured in your project. In this case, we’re using Vite, so execute the following command:

Terminal window
npm run dev

By default, the Svelte local application will 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 on the page.

Troubleshooting & Common Errors

❌ Error: The following dependencies are imported but could not be resolved: @cesdk/cesdk-js

  • Verify that you’ve correctly installed CE.SDK via npm install @cesdk/cesdk-js.

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

  • Make sure to load the CreativeEditorSDK.svelte component’s props using $props() in the top-level <script> section, not inside onMount() or other lifecycle functions.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

  • Double-check that your license key is valid and hasn’t expired.

❌ Editor does not load

  • Check the browser console for any errors.
  • Verify that your component paths and imports are correct.

Next Steps

Congratulations! You’ve successfully integrated CE.SDK into your existing Svelte project. Now, take some time to explore the SDK and move on to the next steps whenever you’re ready: