New Svelte Project without UI - Svelte

Learn how to embed the CreativeEditor SDK (CE.SDK) Engine—without the default UI—in a vanilla Svelte app (not SvelteKit). This headless approach lets you drive the editor through code, and render your customized interface as needed.

What’s CreativeEditor SDK?#

CreativeEditor SDK (CE.SDK) lets you integrate a customizable image and video editor into your web app. It includes filters, text overlays, and other media editing tools, and adapts easily to your use case.

CreativeEditor SDK is a commercial product. To use it, you need a valid license key. If you don’t have one yet, you can get a free trial or purchase a license.

Free Trial Purchase License

Who Is This Guide For?#

This guide is for developers who:

Want to design a custom editor UI.
Need to run CE.SDK in browser automation workflows with no visual editor.
Have completed a Getting Started with CE.SDK in Svelte.
Are ready for more advanced use cases.

What You’ll Achieve#

Launch CE.SDK headless engine in a Svelte component.
Script scene edits.
Add a custom button that reduces an image’s opacity by 20% each time it’s clicked.
(Optional) Render the CE.SDK canvas while still controlling the editor with your own custom UI.

Prerequisites#

What you need before starting:

A working Svelte project (without SvelteKit).
Completed the “Getting Started with CE.SDK in Svelte” tutorial.
A valid CE.SDK license key (Get a free trial).

Step 1: Install CE.SDK Engine#

To use CE.SDK in headless mode within a Svelte project, install the engine package. Use your project’s package manager to run the following command in your project’s root directory:

npm

yarn

pnpm

npm install @cesdk/engine

yarn add @cesdk/engine

pnpm add @cesdk/engine

Step 2: Define a Custom Editor Component With Headless UI#

Once you’ve successfully installed the package, create a new vanilla Svelte component by following these steps:

Create a New Svelte Component#

Open your components folder (typically, src/lib/).
Create a new file called CustomEditor.svelte
Paste the following code into CustomEditor.svelte:

<script>
  import { onMount } from 'svelte';
  import CreativeEngine from '@cesdk/engine';

  // To store the DOM container where the CreativeEngine canvas will be attached
  let canvasContainer;
  // To store the CreativeEngine instance
  let engine;
  // To store the ID of the image block added to the scene
  let imageBlockId = null;

  onMount(async () => {
    // Your CE.SDK configurations
    const config = {
      license: '<YOUR_CE_SDK_LICENSE>', // Replace this with your CE.SDK license
    };

    // Initialize CreativeEngine in headless mode
    engine = await CreativeEngine.init(config);

    // Append CreativeEngine canvas to the DOM (optional)
    if (canvasContainer && engine.element) {
      canvasContainer.appendChild(engine.element);
    }

    // Get the current scene or create a new one
    let scene = engine.scene.get();
    if (!scene) {
      scene = engine.scene.create();
      const page = engine.block.create('page');
      engine.block.appendChild(scene, page);
    }

    // Get the first page block
    const [page] = engine.block.findByType('page');

    // Append a block to show an image on the page
    const imageBlock = engine.block.create('graphic');
    imageBlockId = imageBlock;
    engine.block.setShape(imageBlock, engine.block.createShape('rect'));

    // Fill the block with an image from a public source
    const imageFill = engine.block.createFill('image');
    engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [
      {
        uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg',
        width: 1024,
        height: 683,
      },
    ]);
    engine.block.setFill(imageBlock, imageFill);
    engine.block.appendChild(page, imageBlock);

    // Zoom to fit the page in the editor view
    engine.scene.zoomToBlock(page);
  });

  // Callback to change the opacity of the image
  function changeOpacity() {
    if (engine && imageBlockId != null) {
      // Get the current opacity value of the image
      const currentOpacity = engine.block.getOpacity(imageBlockId);
      // Reduce the opacity of the image by 20% on each click
      engine.block.setOpacity(imageBlockId, currentOpacity * 0.8);
    }
  }
</script>

<div class="editor-container">
  <div class="canvas-container" bind:this="{canvasContainer}"></div>
  <div class="button-overlay">
    <button on:click="{changeOpacity}">Reduce Opacity</button>
  </div>
</div>

Once CreativeEngine is initialized, you can access and edit a scene with full flexibility.. In the preceding code:

We add a sample image to the canvas.
We include a button that reduces its opacity.
Each click reduces the image’s opacity by 20%.

In particular, the changeOpacity() function:

Uses the CE.SDK headless block API
Fetches the current opacity of the image
Updates it dynamically.

Style the Component#

Customize appearance of your editor, by pasting the following CSS at the end of your CustomEditor.svelte file:

//... Component code above
<style>
  .editor-container {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .canvas-container {
    width: 100%;
    height: 100%;
  }

  .button-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .button-overlay button {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    transition:
      border-color 0.25s,
      box-shadow 0.25s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .button-overlay button:hover {
    border-color: #646cff;
    box-shadow: 0 4px 10px rgba(100, 108, 255, 0.2);
  }

  .button-overlay button:focus,
  .button-overlay button:focus-visible {
    outline: 2px solid #646cff;
    outline-offset: 2px;
  }
</style>

Modify the styles to fit your application’s design.

Here’s the final CustomEditor.svelte file

<script>
  import { onMount } from 'svelte';
  import CreativeEngine from '@cesdk/engine';

  // To store the DOM container where the CreativeEngine canvas will be attached
  let canvasContainer;
  // To store the CreativeEngine instance
  let engine;
  // To store the ID of the image block added to the scene
  let imageBlockId = null;

  onMount(async () => {
    // Your CE.SDK configurations
    const config = {
      license: '<YOUR_CE_SDK_LICENSE>', // replace this with your CE.SDK license
    };

    // Initialize CreativeEngine in headless mode
    engine = await CreativeEngine.init(config);

    // Append CE.SDK canvas to the DOM (optional)
    if (canvasContainer && engine.element) {
      canvasContainer.appendChild(engine.element);
    }

    // Get the current scene or create a new one
    let scene = engine.scene.get();
    if (!scene) {
      scene = engine.scene.create();
      const page = engine.block.create('page');
      engine.block.appendChild(scene, page);
    }

    // Get the first page block
    const [page] = engine.block.findByType('page');

    // Append a block to show an image on the page
    const imageBlock = engine.block.create('graphic');
    imageBlockId = imageBlock;
    engine.block.setShape(imageBlock, engine.block.createShape('rect'));

    // Fill the block with an image from a public source
    const imageFill = engine.block.createFill('image');
    engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [
      {
        uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg',
        width: 1024,
        height: 683,
      },
    ]);
    engine.block.setFill(imageBlock, imageFill);
    engine.block.appendChild(page, imageBlock);

    // Zoom to fit the page in the editor view
    engine.scene.zoomToBlock(page);
  });

  // Callback to change the opacity of the image
  function changeOpacity() {
    if (engine && imageBlockId != null) {
      // Get the current opacity value of the image
      const currentOpacity = engine.block.getOpacity(imageBlockId);
      // Reduce the opacity of the image by 20% at each click
      engine.block.setOpacity(imageBlockId, currentOpacity * 0.8);
    }
  }
</script>

<div class="editor-container">
  <div class="canvas-container" bind:this="{canvasContainer}"></div>
  <div class="button-overlay">
    <button on:click="{changeOpacity}">Reduce Opacity</button>
  </div>
</div>

<style>
  .editor-container {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .canvas-container {
    width: 100%;
    height: 100%;
  }

  .button-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .button-overlay button {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    transition:
      border-color 0.25s,
      box-shadow 0.25s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .button-overlay button:hover {
    border-color: #646cff;
    box-shadow: 0 4px 10px rgba(100, 108, 255, 0.2);
  }

  .button-overlay button:focus,
  .button-overlay button:focus-visible {
    outline: 2px solid #646cff;
    outline-offset: 2px;
  }
</style>

Step 3: Embed the Custom Editor Component#

To embed your new Creative Editor component:

Choose where you want to render it in your app
Go to the <script> section of the relevant Svelte component/page (for example, App.svelte).
Import CustomEditor:

import CustomEditor from './lib/CustomEditor.svelte';

Add the CustomEditor component in the template section of your file:

<CustomEditor />

Step 4: Test the Custom Editor#

Run your app locally
Navigate to the page containing <CustomEditor>
Your app should display a sample image displayed on the canvas, along with a “Reduce Opacity” button
Click the button to see the image’s opacity decrease by 20% with each click.

Use Cases#

Congratulations! You’ve successfully set the stage for:

Creating fully customized creative tools using Svelte.
Automating the creation of graphics and visual assets.
Dynamically controlling the CE.SDK engine in browser-based workflows.

Troubleshooting & Common Errors#

❌ Error: The following dependencies are imported but could not be resolved: @cesdk/engine

Make sure you’ve installed CreativeEngine correctly using npm install @cesdk/engine.

❌ Error: CE.SDK canvas doesn’t render

Ensure you’re appending engine.element to a valid HTML element. Then, confirm that the DOM reference exists and is available when the engine is initialized.

❌ Error: Missing license key in config

Check that your config object includes a license property and that it’s set to your CE.SDK license key.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

Verify that your license key is valid, hasn’t expired, and is correctly included in your configuration.

❌ Issue: The custom editor component doesn’t behave as expected

Inspect the browser console for errors to help pinpoint the issue.

Next Steps#

This guide sets the foundation for creating a custom UI with Svelte. Next, learn how to: