Search
Loading...
Skip to content

New Svelte Project without UI

This guide shows you how to integrate the CreativeEditor SDK (CE.SDK) Engine—without its built-in UI—into a Svelte application (not using SvelteKit). This setup is perfect for automating creative tasks entirely through client-side code without any user interaction, or building a fully customized editing interface.

Who Is This Guide For?#

This guide is for developers who:

  • Want to build a custom UI instead of relying on CE.SDK’s default editor.
  • Plan to use CE.SDK in automation browser workflows, without displaying a visual editor.
  • Have already completed the “Getting Started with CE.SDK in Svelte” tutorial and are ready to move on to more complex use cases.

What You’ll Achieve#

  • Initialize the CE.SDK headless engine in a Svelte component.
  • Programmatically create and manipulate a CE.SDK scene.
  • 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#

Before you begin, make sure you have:

  • 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 @cesdk/engine npm package:

Terminal window
npm install @cesdk/engine

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

Inside your src/lib/ folder (or wherever you keep your Svelte components), create a file called CustomEditor.svelte defining the following component:

<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>

Once CreativeEngine is initialized, you can access and manipulate a scene as you want. In this example, we add a sample image to the canvas and include a button that reduces its opacity by 20% on each click.

In particular, the changeOpacity() function uses the CE.SDK headless block API to fetch the current opacity of the image and update it dynamically.

Note: Attaching the CE.SDK canvas to the DOM is completely optional. You can also use the engine purely for automation—without any UI. For instance, you could adjust image properties like opacity in memory, then export or process the result without rendering it on screen.

You can now customize the look and feel of your editor using your own styles, as below:

<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: Use the Creative Editor Component#

In the <script> section of the Svelte component where you want to render the editor, import CustomEditor:

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

Then, include the CustomEditor component in the template section of your Svelte component:

<CustomEditor />

Now, when you run your Svelte app and navigate to the page containing <CustomEditor>, you’ll see a sample image displayed on the canvas along with a “Reduce Opacity” button. Each time you click the button, the image’s opacity will decrease by 20%.

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 config.

❌ 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: