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

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.

Prerequisites#

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

Setup#

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

Congratulations!#

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


File:
<script>
  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.dispose();
        cesdk = null;
      }
    } catch (err) {
      console.warn(`CreativeEditor SDK failed to unmount.`, { err });
    }
  });


</script>


<div
  id="cesdk_container"
  bind:this={container}
/>


<style>
  #cesdk_container {
    height: 100vh;
    width: 100vw;
  }
</style>