Skip to main content
CESDK/Web/Getting Started/Integrations

Integrate CreativeEditor SDK with Svelte

In this example, we will show you how to integrate CreativeEditor SDK with Svelte.

View the full code on GitHub.


No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing


Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CE.SDK module and the stylesheet containing the default theme settings.

2. Create an empty Container#

We need to add an empty <div> as a container for the SDK. We configure the <div> element to fully fill the browser window.

3. Create a CreativeEditorSDK component#

We setup a basic component that'll encapsulate the SDK. The component is configured to fill the browser window and creates a CreativeEditorSDK instance when mounted.

4. Loading the CreativeEditorSDK#

We instantiate the SDK in the component's onMount handler. To allow configuration of the SDK from outside the component, we pass a config object from the component's props. As all our assets are served through our CDN, that's all we need for now.

5. Serving locally#

In order to use the editor we need to run our project via npm.

npm run dev will spin up a development server at http://localhost:5000


You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { onMount, onDestroy } from 'svelte';
let container;
let cesdk = null;
onMount(() => {
const { el, children, class: _, config, ...props } = $$props;
try {
CreativeEditorSDK.init(container, config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
} catch (err) {
console.warn(`CreativeEditor SDK failed to mount.`, { err });
onDestroy(() => {
try {
if (cesdk) {
cesdk = null;
} catch (err) {
console.warn(`CreativeEditor SDK failed to unmount.`, { err });
#cesdk_container {
height: 100vh;
width: 100vw;