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:
- Node.js v20+ and NPM 10+ installed. Download the latest LTS version of Node.js and NPM.
- A SvelteKit v2 project created using the Svelte CLI.
- A valid CE.SDK license key (Get a free trial).
Step 1: Install CE.SDK#
Add CreativeEditor SDK to your project’s dependencies by installing the @cesdk/cesdk-js NPM package:
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 componentslet 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:
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#
- Open
http://localhost:5173/
in your browser. - 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 inCreativeEditorSDK.svelte
, rather than insideonMount()
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: