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