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 LicenseWho 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 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 alicense
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: