Integrate CreativeEditor SDK (CE.SDK) into your Svelte project with a custom component. This guide shows you how to embed a working CE.SDK component in your app, and prepare it for customization.
Who Is This Guide For?#
This tutorial is for developers who:
- Work with Svelte.
- Maintain a vanilla Svelte project (not SvelteKit).
- Want to integrate a full-featured image and video editor into their app.
What You’ll Achieve#
- Install CE.SDK in your project.
- Set up CE.SDK within your Svelte project.
- Render the custom CE.SDK Svelte component in your app.
Prerequisites#
Make sure your system has the following before you start:
- Node.js v20+ installed locally Download the latest LTS version of Node.js.
- A Svelte 5+ project, managed with a build tool like Vite, Parcel, or RSBuild.
- A valid CE.SDK license key (Get a free trial).
Step 1: Install CE.SDK#
First, add CreativeEditor SDK to your project’s dependencies using your project’s package manager. Run the following command in your project’s repository to install it:
npm install @cesdk/cesdk-js
yarn add @cesdk/cesdk-js
pnpm add @cesdk/cesdk-js
Step 2: Create Your Creative Editor Svelte Component#
The examples assume a vanilla Svelte project with the default Vite file structure, adapt as needed for other layouts. A typical Svelte project structure looks like this:
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
You create a new component by adding a file in your project’s components folder. In a typical Vite setup, this folder is src/lib/
. Adjust the location if your project uses a different structure, then:
- Create a file named
CreativeEditorSDK.svelte
. - Paste the following code into
CreativeEditorSDK.svelte
to define a custom image and video component. - Replace
<YOUR_LICENSE_KEY>
with your CE.SDK license key.
<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 it 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', withUploadAssetSources: true }), ]);
// 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 a CreativeEditor SDK instance.
- Applies a basic configuration and attaches it to a
<div>
container in the HTML section. - Disposes of the CE.SDK instance on unmount to free resources.
Step 3: Render the Creative Editor Component#
Import the CreativeEditorSDK
component into a Svelte file where you want to use it. For example, add the following line in the <script>
section of App.svelte
:
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 properties:
<CreativeEditorSDK />
Your App.svelte
should now look 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 bundler configured in your project. This example uses Vite with the following command:
npm run dev
yarn dev
pnpm run dev
By default, the Svelte local app is available on your localhost at http://localhost:5173/
.
Step 5: Test the Integration#
- Open
http://localhost:5173/
in your browser. - A fully functional CE.SDK editor should load on the page where you integrated it.
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.
❌ Error: The $props rune is only available inside .svelte and .svelte.js/ts files
-
Calling
$props()
in the wrong place causes this error. To fix it:- Use
$props()
only in the top-level<script>
section of your Svelte component. - Don’t call it inside
onMount()
or any other lifecycle function.
- Use
❌ 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 doesn’t 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: