--- title: "Loading Indicator" description: "Customize the loading screen that appears while the CE.SDK editor initializes by adding headings, body text, or removing the spinner." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/-575e91/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/sveltekit/user-interface/customization-72b2f8/) > [Loading Indicator](https://img.ly/docs/cesdk/sveltekit/-575e91/) --- Customize the loading screen that appears while the CE.SDK editor initializes by configuring a spinner, heading, and body text.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-loading-indicator-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-loading-indicator-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-customization-loading-indicator-browser/) The loading indicator fills the editor canvas while the engine initializes and disappears once ready. By default only a spinner is shown, but you can add a heading and body text or remove the spinner entirely. All configuration uses static pre-init APIs that must be called **before** `CreativeEditorSDK.create()`, because the loading screen renders before the editor instance exists. ```typescript file=@cesdk_web_examples/guides-user-interface-customization-loading-indicator-browser/index.ts reference-only import CreativeEditorSDK from '@cesdk/cesdk-js'; import Example from './browser'; const customSpinner = ` `; CreativeEditorSDK.ui.addIconSet('custom-loading-spinner', customSpinner); CreativeEditorSDK.i18n.setTranslations({ en: { 'loading.heading': 'Welcome', 'loading.text': 'Preparing your editor...' }, de: { 'loading.heading': 'Willkommen', 'loading.text': 'Editor wird vorbereitet...' } }); CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ 'ly.img.loading.spinner', { id: 'ly.img.loading.heading', content: 'loading.heading' }, { id: 'ly.img.loading.text', content: 'loading.text' } ]); // To show only text without a spinner, omit the spinner: // CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ // { id: 'ly.img.loading.heading', content: 'Loading' }, // { id: 'ly.img.loading.text', content: 'Please wait...' } // ]); // Apply theme from URL query param (used by hero image capture script) const theme = new URLSearchParams(window.location.search).get('theme'); if (theme === 'dark' || theme === 'light') { CreativeEditorSDK.ui.setTheme(theme); } const config = { // license: import.meta.env.VITE_CESDK_LICENSE, userId: 'guides-user', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: import.meta.env.VITE_CESDK_ASSETS_BASE_URL }) }; CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` ## Loading Components Three component types are available: - **`ly.img.loading.spinner`**: An animated spinner icon. Pass as a plain string ID. - **`ly.img.loading.heading`**: Large heading text. Pass as `{ id: 'ly.img.loading.heading', content: 'text or translation key' }`. - **`ly.img.loading.text`**: Body text below the heading. Pass as `{ id: 'ly.img.loading.text', content: 'text or translation key' }`. We configure them by calling `CreativeEditorSDK.ui.setComponentOrder()` with the area `{ in: 'ly.img.loading' }` and an array of components. They render vertically in the order specified. ```typescript highlight=highlight-configure-loading CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ 'ly.img.loading.spinner', { id: 'ly.img.loading.heading', content: 'loading.heading' }, { id: 'ly.img.loading.text', content: 'loading.text' } ]); ``` We then create the editor as usual. The loading screen displays our custom content while the engine initializes: ```typescript highlight=highlight-create-editor CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` To show only text without a spinner, omit the spinner from the array: ```typescript highlight=highlight-text-only // To show only text without a spinner, omit the spinner: // CreativeEditorSDK.ui.setComponentOrder({ in: 'ly.img.loading' }, [ // { id: 'ly.img.loading.heading', content: 'Loading' }, // { id: 'ly.img.loading.text', content: 'Please wait...' } // ]); ``` ## Custom Spinner Animation The spinner renders an SVG icon with symbol ID `@imgly/EditorProgress`. To replace it, register a custom icon set via `CreativeEditorSDK.ui.addIconSet()` before creating the editor. The SVG must contain a `` element with `id="@imgly/EditorProgress"`. Use `currentColor` for stroke and fill values so the spinner adapts to the active theme. ```typescript highlight=highlight-custom-spinner const customSpinner = ` `; CreativeEditorSDK.ui.addIconSet('custom-loading-spinner', customSpinner); ``` ## Translating Loading Text The `content` values support i18n. If a `content` string matches a translation key, the translated value is displayed. Otherwise the literal string is used as a fallback. Register translations via `CreativeEditorSDK.i18n.setTranslations()` before creating the editor, then pass the translation key as the `content` value: ```typescript highlight=highlight-translate-loading CreativeEditorSDK.i18n.setTranslations({ en: { 'loading.heading': 'Welcome', 'loading.text': 'Preparing your editor...' }, de: { 'loading.heading': 'Willkommen', 'loading.text': 'Editor wird vorbereitet...' } }); ``` ## Troubleshooting **Loading indicator not changing.** Ensure `setComponentOrder` is called *before* `CreativeEditorSDK.create()`. Calls made after initialization have no effect on the loading screen. **Text not appearing.** Verify that component objects include the `content` property. A string ID like `'ly.img.loading.heading'` without a content object will not render text. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Auto Captions" description: "Integrate automatic caption generation into your CE.SDK application using the Auto Caption plugin with pluggable speech-to-text providers." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/-73368c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Auto Captions](https://img.ly/docs/cesdk/sveltekit/-73368c/) --- Generate captions automatically from spoken audio in video and audio blocks using CE.SDK's Auto Caption plugin. > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-ai-integration-auto-captions-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-ai-integration-auto-captions-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-auto-captions-browser/) The Auto Caption plugin extracts audio from media blocks, sends it to a speech-to-text provider, and creates timed caption blocks from the transcription. It supports both a built-in UI workflow where users select which blocks to transcribe and a programmatic API for automation. The plugin ships with an ElevenLabs Scribe V2 provider via fal.ai, and you can implement your own provider using the `TranscriptionProvider` interface. For manually creating and editing captions, see [Add Captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/). ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-auto-captions-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import type { TranscriptionProvider } from '@imgly/plugin-autocaption-web'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import AutocaptionPlugin from '@imgly/plugin-autocaption-web'; import { ElevenLabsScribeV2 } from '@imgly/plugin-autocaption-web/fal-ai'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins for the video editor await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Register the Auto Caption plugin with the built-in ElevenLabs provider await cesdk.addPlugin( AutocaptionPlugin({ provider: ElevenLabsScribeV2({ // The proxy URL forwards requests to fal.ai with the API key added // server-side, keeping the key out of the browser proxyUrl: 'https://your-server.com/api/fal-proxy' }) }) ); // Create a video scene and add a video clip with spoken audio await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; engine.block.setDuration(page, 30); const videoUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; const track = engine.block.create('track'); engine.block.appendChild(page, track); const videoClip = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 30, timeOffset: 0 } }); engine.block.appendChild(track, videoClip); engine.block.fillParent(track); // Example: Implementing a custom transcription provider // Use this pattern to connect any speech-to-text service // eslint-disable-next-line @typescript-eslint/no-unused-vars const _customProvider: TranscriptionProvider = { name: 'My Custom STT', async transcribe(audio: Blob, options?) { // Send the audio blob to your speech-to-text service const formData = new FormData(); formData.append('audio', audio, 'audio.mp4'); if (options?.language) { formData.append('language', options.language); } const response = await fetch('https://your-stt-api.com/transcribe', { method: 'POST', body: formData, signal: options?.abortSignal }); const result = await response.json(); // Return the transcription as a valid SRT string return { srt: result.srt }; } }; // To use the custom provider instead of ElevenLabs: // AutocaptionPlugin({ provider: customProvider }) // Open the caption panel so the Auto Caption button is visible cesdk.ui.openPanel('//ly.img.panel/inspector/caption'); } } export default Example; ``` This guide covers how to use the built-in auto caption UI, install and configure the plugin with the ElevenLabs provider, set up a proxy server for secure API communication, implement a custom transcription provider, and troubleshoot common issues. ## Using the Built-in Auto Caption UI The Auto Caption plugin adds an "Auto Caption" button to the caption panel. Clicking it opens an auto-generate view where you select which media blocks to transcribe. ### Accessing the Auto-Generate View Open the caption panel from the inspector and click the "Auto Caption" button. The auto-generate view lists all audio and video blocks in the scene with checkboxes. Muted blocks and video blocks without audio tracks appear disabled and cannot be selected. ### Selecting Blocks Use the checkboxes to choose which blocks to include in caption generation. The "Select All" button selects every eligible block, and "Deselect All" clears the selection. Only blocks with audible audio content can be selected. ### Generating and Cancelling Captions Click "Generate Captions" to start transcription. The plugin extracts audio from each selected block, sends it to the configured provider, and creates caption blocks from the returned transcription. You can cancel an in-progress generation at any time — the plugin cleans up any partially created caption blocks. After generation completes, the view switches to the caption edit view where you can review, restyle, and adjust the generated captions. ## Installing the Plugin Install `@imgly/plugin-autocaption-web` alongside `@cesdk/cesdk-js`. The plugin version must match the CE.SDK version (unified versioning). ```typescript highlight-install-plugin import AutocaptionPlugin from '@imgly/plugin-autocaption-web'; import { ElevenLabsScribeV2 } from '@imgly/plugin-autocaption-web/fal-ai'; ``` The plugin is imported as a default export, and the fal.ai provider is imported from the `/fal-ai` subpath. The `@fal-ai/client` dependency is bundled into the provider, so you don't need to install it separately. ## Configuring the Built-in Provider We register the Auto Caption plugin with `cesdk.addPlugin()`, passing the ElevenLabs Scribe V2 provider configured with a `proxyUrl`. The proxy URL points to your server endpoint that forwards requests to fal.ai with the API key added server-side. ```typescript highlight-configure-provider // Register the Auto Caption plugin with the built-in ElevenLabs provider await cesdk.addPlugin( AutocaptionPlugin({ provider: ElevenLabsScribeV2({ // The proxy URL forwards requests to fal.ai with the API key added // server-side, keeping the key out of the browser proxyUrl: 'https://your-server.com/api/fal-proxy' }) }) ); ``` The `ElevenLabsScribeV2()` factory accepts a configuration object with `proxyUrl` (required) and optional `headers` for custom authentication headers. You can also pass `debug: true` to the `AutocaptionPlugin()` call to enable console logging of each pipeline step, including audio sizes and provider timings. ## Setting Up a Proxy Server The built-in provider communicates with fal.ai to run the ElevenLabs Scribe V2 model. Calling fal.ai directly from the browser would expose your API key in client-side code, which is insecure. A proxy server sits between the browser and fal.ai. Your browser sends requests to your own server endpoint, which adds the fal.ai API key and forwards the request. The API key never leaves the server. Your proxy endpoint needs to: - Accept POST requests from the browser - Add the `Authorization` header with your fal.ai API key - Forward the request body to fal.ai - Handle CORS so the browser can reach the endpoint For detailed proxy implementation instructions, see [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/). ## Implementing a Custom Transcription Provider You can use any speech-to-text service by implementing the `TranscriptionProvider` interface. The interface requires a `name` string and a `transcribe()` method that receives an audio blob and returns SRT text. ```typescript highlight-custom-provider // Example: Implementing a custom transcription provider // Use this pattern to connect any speech-to-text service // eslint-disable-next-line @typescript-eslint/no-unused-vars const _customProvider: TranscriptionProvider = { name: 'My Custom STT', async transcribe(audio: Blob, options?) { // Send the audio blob to your speech-to-text service const formData = new FormData(); formData.append('audio', audio, 'audio.mp4'); if (options?.language) { formData.append('language', options.language); } const response = await fetch('https://your-stt-api.com/transcribe', { method: 'POST', body: formData, signal: options?.abortSignal }); const result = await response.json(); // Return the transcription as a valid SRT string return { srt: result.srt }; } }; // To use the custom provider instead of ElevenLabs: // AutocaptionPlugin({ provider: customProvider }) ``` ### The TranscriptionProvider Interface The `transcribe()` method receives two arguments: - **`audio`**: A `Blob` in audio/mp4 format, produced by `engine.block.exportAudio()`. Send this to your speech-to-text service. - **`options`**: An optional object with: - `language`: A BCP-47 language code (e.g., `"en"`, `"de"`, `"pt"`) for the expected spoken language. - `abortSignal`: An `AbortSignal` to cancel the transcription request. Pass this to `fetch()` or your HTTP client to abort the request. - `maxLineLength`: Maximum characters per SRT line (default 37). - `maxLines`: Maximum lines per SRT cue (default 1). - `debug`: Enable verbose logging to the console (default `false`). The method must return `{ srt: string }` containing a valid SRT-formatted subtitle string. The plugin then passes this SRT to `engine.block.createCaptionsFromURI()` to create the caption blocks. ## Caption Generation Workflow When the user clicks "Generate Captions", the plugin runs the following pipeline for each selected block: 1. **Load media** — Calls `engine.block.forceLoadAVResource()` to ensure the media is ready. 2. **Export audio** — Extracts audio via `engine.block.exportAudio()`, producing an MP4 blob. 3. **Transcribe** — Sends the blob to the `TranscriptionProvider.transcribe()` method. 4. **Create captions** — Converts the SRT string to caption blocks with `engine.block.createCaptionsFromURI()`. 5. **Add to track** — Appends caption blocks to a caption track on the page using `engine.block.appendChild()`. 6. **Style** — Applies the `ly.img.caption.presets.outline` preset via `engine.asset.fetchAsset()` and `engine.asset.applyToBlock()`. 7. **Position** — Centers the first caption with `engine.block.alignHorizontally()` and `engine.block.alignVertically()`. 8. **Undo step** — Wraps the entire operation in a single undo step with `engine.editor.addUndoStep()`. Multiple blocks are processed in parallel using `Promise.all`. Existing caption tracks are removed before new ones are created. ## Handling Errors and Notifications The plugin handles errors per-block, so if one block fails, others continue processing. When transcription fails or no speech is detected, the plugin shows a notification via `cesdk.ui.showNotification()`. - **Total failure**: All blocks failed — shows an error notification. - **Partial failure**: Some blocks succeeded, others failed — shows a warning listing which blocks had issues. - **Cancellation**: When the user cancels, the plugin throws an `AbortError` and cleans up any caption blocks already created during the current generation. ## Troubleshooting - **Plugin not appearing in caption panel**: Verify `cesdk.addPlugin()` is called with the `AutocaptionPlugin()` result and the caption panel is enabled in the editor. - **Proxy errors**: Check that `proxyUrl` is accessible from the browser, handles CORS preflight requests, and correctly forwards the fal.ai API key. - **"No speech detected" for all blocks**: Verify audio blocks are not muted and contain audible speech. Video blocks without audio tracks are intentionally disabled. - **Generation hangs or times out**: Check network connectivity to fal.ai through your proxy. The ElevenLabs model can take 10-30 seconds for longer audio. - **Captions not styled correctly**: Verify the `CaptionPresetsAssetSource` plugin is registered, which provides the `ly.img.caption.presets` asset source. - **Muted blocks cannot be selected**: This is intentional. Muted audio blocks and video blocks without audio tracks produce no audio output for transcription. ## Next Steps - [Add Captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/) — Manually create and edit caption blocks - [Update Caption Presets](https://img.ly/docs/cesdk/sveltekit/create-video/update-caption-presets-e9c385/) — Customize caption styling presets - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Integrate AI Features](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) — Overview of AI integration --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Customize the Clip Context Menu" description: "Control which actions appear in the video timeline clip context menu, reorder built-in actions, and add custom entries per clip type." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/-f8e7d6/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) > [Customization](https://img.ly/docs/cesdk/sveltekit/user-interface/customization-72b2f8/) > [Clip Context Menu](https://img.ly/docs/cesdk/sveltekit/-f8e7d6/) --- Customize the dropdown menu on video timeline clips — control which actions appear, their order, and add custom entries per clip type.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-clip-context-menu-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-user-interface-customization-clip-context-menu-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-customization-clip-context-menu-browser/) The clip context menu is the dropdown that opens via a dedicated button on each clip in the video timeline. CE.SDK provides a different default menu per clip type: background clips show move, overlay, mute, and trim actions; overlay clips show layering and clip-conversion actions; caption clips show merge, add, and delete actions. All menus are customizable through the `ly.img.video.clip.menu` UI area using the Component Order API. ```typescript file=@cesdk_web_examples/guides-user-interface-customization-clip-context-menu-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable video editing features cesdk.feature.enable('ly.img.video.*'); await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create'); // Retrieve the default clip menu order for background clips const clipOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'clip' } }); // eslint-disable-next-line no-console console.log('Default clip menu order:', clipOrder); // Retrieve the default overlay menu order const overlayOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }); // eslint-disable-next-line no-console console.log('Default overlay menu order:', overlayOrder); // Retrieve the default caption menu order const captionOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'caption' } }); // eslint-disable-next-line no-console console.log('Default caption menu order:', captionOrder); // Replace the overlay menu with a simplified layout cesdk.ui.setComponentOrder( { in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }, [ 'ly.img.video.clip.menu.setAsClip', 'ly.img.separator', 'ly.img.video.clip.menu.duplicate', 'ly.img.video.clip.menu.delete' ] ); // Add a custom "Export Clip" action to the background clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', before: 'ly.img.video.clip.menu.delete', when: { clipType: 'clip' } }, { id: 'ly.img.video.clip.menu.action', key: 'export-clip', label: 'Export Clip', icon: '@imgly/Download', onClick: () => { // eslint-disable-next-line no-console console.log('Export Clip action triggered'); } } ); // Remove the placeholder action from the background clip menu cesdk.ui.removeOrderComponent({ in: 'ly.img.video.clip.menu', match: 'ly.img.video.clip.menu.placeholder', when: { clipType: 'clip' } }); // Insert a separator after the trim action in the clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', after: 'ly.img.video.clip.menu.trim', when: { clipType: 'clip' } }, 'ly.img.separator' ); // Disable the custom export action conditionally cesdk.ui.updateOrderComponent( { in: 'ly.img.video.clip.menu', match: { id: 'ly.img.video.clip.menu.action', key: 'export-clip' }, when: { clipType: 'clip' } }, { isDisabled: false } ); } } export default Example; ``` This guide covers reading the default menu order, replacing or modifying the menu per clip type, removing and inserting built-in actions, and adding custom actions with callbacks. ## Default Menu Actions Each clip type has its own default order. The menu renders components in the order defined by `setComponentOrder` or the built-in defaults. **Clip (Background Track):** Move Left, Move Right, Set as Overlay, Mute, Trim, Replace, Placeholder, Duplicate, Delete — with separators grouping related actions. **Overlay (Foreground Track):** Bring Forward, Send Backward, Set as Clip, Mute, Trim, Replace, Placeholder, Duplicate, Delete. **Caption:** Merge Captions, Add Caption, Delete. ### Available Component IDs All built-in component IDs that you can use when configuring menu orders: | Component ID | Purpose | |---|---| | `ly.img.video.clip.menu.moveLeft` | Move clip earlier in the track | | `ly.img.video.clip.menu.moveRight` | Move clip later in the track | | `ly.img.video.clip.menu.bringForward` | Move overlay one layer up | | `ly.img.video.clip.menu.sendBackward` | Move overlay one layer down | | `ly.img.video.clip.menu.setAsOverlay` | Convert clip to overlay | | `ly.img.video.clip.menu.setAsClip` | Convert overlay to clip | | `ly.img.video.clip.menu.mute` | Toggle audio mute | | `ly.img.video.clip.menu.trim` | Open trim controls | | `ly.img.video.clip.menu.caption.merge` | Merge adjacent captions | | `ly.img.video.clip.menu.caption.add` | Add a new caption | | `ly.img.video.clip.menu.replace` | Replace clip media | | `ly.img.video.clip.menu.placeholder` | Toggle placeholder mode | | `ly.img.video.clip.menu.duplicate` | Duplicate the clip | | `ly.img.video.clip.menu.delete` | Delete the clip | | `ly.img.video.clip.menu.action` | Generic custom action slot | | `ly.img.separator` | Visual separator between groups | ## Reading the Current Order We retrieve the current menu order for any clip type using `cesdk.ui.getComponentOrder()`. Pass the `when` option with `clipType` to target a specific clip type. Without a `when` clause, the default `'clip'` type order is returned. ```typescript highlight=highlight-read-order // Retrieve the default clip menu order for background clips const clipOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'clip' } }); // eslint-disable-next-line no-console console.log('Default clip menu order:', clipOrder); // Retrieve the default overlay menu order const overlayOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }); // eslint-disable-next-line no-console console.log('Default overlay menu order:', overlayOrder); // Retrieve the default caption menu order const captionOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.video.clip.menu', when: { clipType: 'caption' } }); // eslint-disable-next-line no-console console.log('Default caption menu order:', captionOrder); ``` This is useful for inspecting the current state before making modifications, or for building a UI that displays the current configuration. ## Replacing the Entire Order We can override the full menu for a clip type using `cesdk.ui.setComponentOrder()`. Pass an array of component IDs to define the complete new order. Each clip type is configured independently — changing the overlay menu does not affect clip or caption menus. ```typescript highlight=highlight-replace-order // Replace the overlay menu with a simplified layout cesdk.ui.setComponentOrder( { in: 'ly.img.video.clip.menu', when: { clipType: 'overlay' } }, [ 'ly.img.video.clip.menu.setAsClip', 'ly.img.separator', 'ly.img.video.clip.menu.duplicate', 'ly.img.video.clip.menu.delete' ] ); ``` Here we replace the overlay menu with only four items: a "Set as Clip" action, a separator, then duplicate and delete. All other default overlay actions are removed. ## Removing Actions We remove a specific action from a clip type's menu using `cesdk.ui.removeOrderComponent()`. The `match` option accepts a component ID string, an index, or a predicate function. ```typescript highlight=highlight-remove-action // Remove the placeholder action from the background clip menu cesdk.ui.removeOrderComponent({ in: 'ly.img.video.clip.menu', match: 'ly.img.video.clip.menu.placeholder', when: { clipType: 'clip' } }); ``` This removes only the placeholder action from the background clip menu. The overlay and caption menus remain unchanged. ## Inserting Actions We insert a component before or after an existing one using `cesdk.ui.insertOrderComponent()`. The options support `before`, `after`, and `position` (`'start'`, `'end'`, or a numeric index) placement. ```typescript highlight=highlight-insert-action // Insert a separator after the trim action in the clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', after: 'ly.img.video.clip.menu.trim', when: { clipType: 'clip' } }, 'ly.img.separator' ); ``` Here we add a separator after the trim action, visually grouping trim with the actions above it and separating it from the actions below. ## Adding Custom Actions We register a custom action using the `ly.img.video.clip.menu.action` component ID. Pass a `ClipContextMenuCustomAction` object with `key`, `label`, `onClick`, and optionally `icon` and `isDisabled`. ```typescript highlight=highlight-custom-action // Add a custom "Export Clip" action to the background clip menu cesdk.ui.insertOrderComponent( { in: 'ly.img.video.clip.menu', before: 'ly.img.video.clip.menu.delete', when: { clipType: 'clip' } }, { id: 'ly.img.video.clip.menu.action', key: 'export-clip', label: 'Export Clip', icon: '@imgly/Download', onClick: () => { // eslint-disable-next-line no-console console.log('Export Clip action triggered'); } } ); ``` The `key` must be unique across all custom actions in the same menu. The `onClick` handler runs when the user selects the action. You can use any icon from the `@imgly/icons` package. The `ClipContextMenuCustomAction` interface: ```typescript interface ClipContextMenuCustomAction { id: 'ly.img.video.clip.menu.action'; key: string; onClick: () => void | Promise; label: string; icon?: string; isDisabled?: boolean; } ``` ## Updating Existing Actions We modify properties of an existing component using `cesdk.ui.updateOrderComponent()`. The update can be a partial object or an updater function. ```typescript highlight=highlight-update-action // Disable the custom export action conditionally cesdk.ui.updateOrderComponent( { in: 'ly.img.video.clip.menu', match: { id: 'ly.img.video.clip.menu.action', key: 'export-clip' }, when: { clipType: 'clip' } }, { isDisabled: false } ); ``` Use `match` with both `id` and `key` to target a specific custom action. You can update any property including `label`, `icon`, `isDisabled`, and `onClick`. ## Clip-Type-Specific Customization Each of the three clip types (`'clip'`, `'overlay'`, `'caption'`) has its own independent order. Changes to one do not affect the others. Use the `when: { clipType }` option on every operation to target a specific clip type. Omitting it defaults to `'clip'`. This independence lets you tailor each menu to its context. For example, overlays need layering controls while captions need merge actions — and you can customize each without worrying about side effects. ## Troubleshooting - **Action not appearing**: Verify the component ID is included in the order for the correct clip type. Use `getComponentOrder` to inspect the current order. - **Custom action not clickable**: Ensure `isDisabled` is not set to `true` and `onClick` is a valid function. - **Changes affecting wrong clip type**: Always pass `when: { clipType }` to target the intended clip type. Without it, operations default to `'clip'`. - **Separator not showing**: Separators are only rendered between visible actions. If adjacent actions are hidden, the separator may not appear. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Actions API" description: "Learn how to use the Actions API to register and customize action handlers in CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) --- The Actions API provides a centralized way to manage and customize actions for various user interactions in CE.SDK. > **Note:** The Actions API is available after CE.SDK initialization through > `cesdk.actions`. > **Tip:** CE.SDK also provides a Utils API (`cesdk.utils`) with utility functions for > common operations like exporting, file handling, and UI dialogs. These > utilities can be used directly or within your custom actions. ## API Methods The Actions API provides four methods: - `register(actionId, handler)` - Register an action function for a specific event - `get(actionId)` - Retrieve a registered action function - `run(actionId, ...args)` - Execute a registered action with the provided arguments (throws if not registered) - `list(matcher)` - Lists registered action IDs, optionally filtered by wildcard pattern ## Getting Started Register actions after initializing CE.SDK: ```javascript import CreativeEditorSDK from '@cesdk/cesdk-js'; const cesdk = await CreativeEditorSDK.create(container, { // license: 'YOUR_CESDK_LICENSE_KEY', }); // Register an action cesdk.actions.register('actionType', async (...args) => { // Your custom implementation return result; }); // Execute a registered action await cesdk.actions.run('actionType', arg1, arg2); // Or retrieve an action to call it later const action = cesdk.actions.get('actionType'); // List all registered actions const allActions = cesdk.actions.list(); // List actions matching a pattern const exportActions = cesdk.actions.list({ matcher: 'export*' }); ``` ## Default Actions CE.SDK automatically registers the following default actions: ### Scene Creation - `scene.create` - Creates a new scene with configurable layout and page sizes ### Action Handlers - `saveScene` - Saves the current scene (default: downloads scene file) - `shareScene` - Shares the current scene (no default implementation) - `exportDesign` - Exports design in various formats (default: downloads the exported file) - `importScene` - Imports scene or archive files (default: opens file picker) - `exportScene` - Exports scene or archive (default: downloads the file) - `uploadFile` - Uploads files to asset sources (default: local upload for development) - `onUnsupportedBrowser` - Handles unsupported browsers (no default implementation) - `video.decode.checkSupport` - Checks video decoding/playback support (shows blocking dialog if unsupported) - `video.encode.checkSupport` - Checks video encoding/export support (shows warning dialog if unsupported) ### Zoom Actions - `zoom.toBlock` - Zoom to a specific block with configurable padding - `zoom.toPage` - Zoom to the current page with auto-fit support - `zoom.toSelection` - Zoom to currently selected blocks - `zoom.in` - Zoom in by one step with configurable maximum - `zoom.out` - Zoom out by one step with configurable minimum - `zoom.toLevel` - Set zoom to a specific level ### Scroll Actions - `scroll.toPage` - Scroll the viewport to center on a specific page with optional animation ### Video Timeline Zoom Actions - `timeline.zoom.in` - Zoom in the video timeline by one step - `timeline.zoom.out` - Zoom out the video timeline by one step - `timeline.zoom.fit` - Fit the video timeline to show all content - `timeline.zoom.toLevel` - Set the video timeline zoom to a specific level - `timeline.zoom.reset` - Reset the video timeline zoom to default (1.0) > **Note:** The `shareScene` and `onUnsupportedBrowser` actions do not have default > implementations and must be registered manually. > **Tip:** CE.SDK provides both an Actions API for handling user actions and a Utils API > for utility functions. See the Utils API section below for details on > available utilities. ### Scene Creation #### `scene.create` Creates a new scene with configurable mode, layout and page sizes. Returns the scene block ID. ```javascript // Create a scene await cesdk.actions.run('scene.create'); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `layout` | `SceneLayout` | `'VerticalStack'` | The scene layout. | | `page` | `PageSpec` | — | A single page specification. Cannot be used together with `pages`. | | `pageCount` | `number` | `1` | Number of pages to create from the single `page` spec. Ignored when `pages` is used. | | `pages` | `PageSpec[]` | — | An array of page specifications, one page per entry. Cannot be used together with `page`. | #### Page Specification Pages can be specified in three ways: **1. Direct dimensions** Specify width, height, and unit directly: ```javascript await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); // With fixed orientation (prevents rotation from swapping dimensions) await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel', fixedOrientation: true } }); ``` **2. Asset source reference** Reference a page preset from an asset source by its source and asset IDs: ```javascript // Use an Instagram Story preset await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); ``` **3. Asset object** Pass an asset object directly, for example one returned by `engine.asset.findAssets()`: ```javascript const result = await cesdk.engine.asset.findAssets('ly.img.page.presets', { query: '' }); await cesdk.actions.run('scene.create', { page: result.assets[0] }); ``` #### Multiple Pages Create scenes with multiple pages: ```javascript // Multiple pages with different sizes await cesdk.actions.run('scene.create', { pages: [ { width: 1080, height: 1920, unit: 'Pixel' }, { width: 1920, height: 1080, unit: 'Pixel' } ] }); // Multiple identical pages using pageCount await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' }, pageCount: 3 }); ``` > **Tip:** When no `page` or `pages` option is provided, `scene.create` creates a single > page with the default format from the configured page preset asset sources. ### Scene Management Actions #### `saveScene` Handles saving the current scene. Default implementation downloads the scene file. ```javascript // Basic implementation cesdk.actions.register('saveScene', async () => { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene saved:', scene.length, 'characters'); // Production: // await yourAPI.saveScene(scene); cesdk.ui.showNotification('Scene saved successfully'); }); // With loading dialog cesdk.actions.register('saveScene', async () => { const dialogController = cesdk.utils.showLoadingDialog({ title: 'Saving Scene', message: 'Please wait...', progress: 'indeterminate', }); try { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene saved:', scene.length, 'characters'); // Production: // await yourAPI.saveScene(scene); dialogController.showSuccess({ title: 'Saved', message: 'Scene saved successfully', }); } catch (error) { dialogController.showError({ title: 'Save Failed', message: 'Could not save the scene', }); throw error; } }); ``` #### `shareScene` Handles scene sharing. No default implementation. ```javascript // Register share functionality cesdk.actions.register('shareScene', async () => { const scene = await cesdk.engine.scene.saveToString(); const shareUrl = 'https://example.com/shared-scene-placeholder'; console.log('Scene ready to share:', scene.length, 'characters'); // Production: // const shareUrl = await yourAPI.createShareableLink(scene); await navigator.share({ url: shareUrl }); }); ``` #### `importScene` and `exportScene` Handle scene import/export operations with support for both scene files and archives. ```javascript // Import scene or archive cesdk.actions.register('importScene', async ({ format }) => { if (format === 'archive') { console.log('Archive import requested'); // Production: // const archive = await yourAPI.loadArchive(); // await cesdk.engine.scene.loadFromArchiveURL(archive); } else { console.log('Scene import requested'); // Production: // const scene = await yourAPI.loadScene(); // await cesdk.engine.scene.loadFromString(scene); } }); // Export scene or archive cesdk.actions.register('exportScene', async ({ format }) => { if (format === 'archive') { const archive = await cesdk.engine.scene.saveToArchive(); console.log('Archive ready for export:', archive.length, 'bytes'); // Production: // await yourAPI.uploadArchive(archive); } else { const scene = await cesdk.engine.scene.saveToString(); console.log('Scene ready for export:', scene.length, 'characters'); // Production: // await yourAPI.uploadScene(scene); } }); ``` ### Export Operations #### `exportDesign` Handles all export operations (images, PDFs, videos). Default implementation downloads the exported file. ```javascript // Basic implementation cesdk.actions.register('exportDesign', async options => { // Use the utils API to perform the export with loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); console.log('Exported', blobs.length, 'files'); blobs.forEach((blob, i) => console.log(`File ${i + 1}:`, blob.size, 'bytes')); // Production: // await Promise.all(blobs.map(blob => yourCDN.upload(blob))); cesdk.ui.showNotification('Export completed successfully'); }); // Direct engine export with custom loading dialog (bypassing utils) cesdk.actions.register('exportDesign', async options => { const dialogController = cesdk.utils.showLoadingDialog({ title: 'Exporting', message: 'Processing your export...', }); try { const page = cesdk.engine.scene.getCurrentPage(); if (page === null) { throw new Error('No page selected for export'); } let result; if (options?.mimeType?.startsWith('video/')) { // Video export with progress result = await cesdk.engine.block.exportVideo(page, { ...options, onProgress: (rendered, encoded, total) => { dialogController.updateProgress({ value: rendered, max: total, }); }, }); } else { // Static export (image/PDF) result = await cesdk.engine.block.export(page, options); } console.log('File ready for export:', result.size, 'bytes'); // Production: // await yourCDN.upload(result); dialogController.showSuccess({ title: 'Export Complete', message: 'Files uploaded successfully', }); } catch (error) { dialogController.showError({ title: 'Export Failed', message: 'Could not complete the export', }); throw error; } }); ``` ### File Upload Action #### `uploadFile` Handles file uploads to asset sources. Default implementation uses local upload for development. ```javascript // Register production upload handler cesdk.actions.register('uploadFile', async (file, onProgress, context) => { console.log('Uploading file:', file.name, file.size, 'bytes'); onProgress(50); // Simulate progress await new Promise(resolve => setTimeout(resolve, 500)); onProgress(100); // Production: // const asset = await yourStorageService.upload(file, { // onProgress: (percent) => onProgress(percent), // context // }); // Return AssetDefinition return { id: 'local-' + Date.now(), label: { en: file.name }, meta: { uri: URL.createObjectURL(file), thumbUri: URL.createObjectURL(file), kind: 'image', width: 1920, height: 1080, // Production: // uri: asset.url, // thumbUri: asset.thumbnailUrl, // width: asset.width, // height: asset.height }, }; }); ``` You can control which file types users can upload by setting the `upload/supportedMimeTypes` setting: ```javascript // Example 1: Only allow images cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'image/png,image/jpeg,image/gif,image/svg+xml', ); // Example 2: Allow images and videos cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'image/png,image/jpeg,image/gif,video/mp4,video/quicktime', ); // Example 3: Allow specific document types cesdk.engine.editor.setSettingString( 'upload/supportedMimeTypes', 'application/pdf,image/png,image/jpeg', ); ``` > **Caution:** The default `uploadFile` implementation uses local upload for development > only. Always register a proper upload handler for production. ### Unsupported Browser Action #### `onUnsupportedBrowser` Handles unsupported browser detection. No default implementation is provided. ```javascript // Register handler for unsupported browsers cesdk.actions.register('onUnsupportedBrowser', () => { // Redirect to a custom compatibility page window.location.href = '/browser-not-supported'; }); ``` ### Video Support Actions CE.SDK provides actions to detect video capabilities at runtime. These actions help you handle browsers and platforms that lack required video codecs, particularly Linux browsers and Firefox. #### `video.decode.checkSupport` Checks if the browser supports video decoding and playback via the WebCodecs API. If unsupported, displays a blocking error dialog that users cannot dismiss. Returns `true` if video decoding is supported, `false` otherwise. ```javascript // Check video decode support before loading video content const isSupported = cesdk.actions.run('video.decode.checkSupport'); if (!isSupported) { // A blocking error dialog is shown automatically // The user cannot proceed with video editing return; } // Safe to proceed with video content await cesdk.engine.scene.loadFromURL(videoSceneUrl); // You can also disable the dialog and handle feedback yourself: const supportedSilently = cesdk.actions.run('video.decode.checkSupport', { dialog: false }); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `dialog` | `boolean \| { show: boolean; backdrop?: 'transparent' \| 'opaque' }` | `true` (backdrop: `'opaque'`) | Controls dialog display. Use `false` to disable, or an object for fine-grained control. | > **Caution:** The `video.decode.checkSupport` action shows a blocking dialog with no dismiss option > when video is not supported. Only call this action when you intend to work > with video content. #### `video.encode.checkSupport` Checks if the browser supports video encoding/export (H.264 video and AAC audio encoding). If unsupported, displays a warning dialog that users can dismiss to continue editing. Returns a `Promise` - `true` if video encoding is supported, `false` otherwise. ```javascript // Check video encode support before attempting export const canExport = await cesdk.actions.run('video.encode.checkSupport'); if (!canExport) { // A warning dialog is shown automatically // User can dismiss and continue editing // Consider offering server-side export as alternative console.log('Video export unavailable - consider server-side rendering'); } // You can also disable the dialog and handle feedback yourself: const canExportSilently = await cesdk.actions.run('video.encode.checkSupport', { dialog: false }); ``` **Options:** | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `dialog` | `boolean \| { show: boolean; backdrop?: 'transparent' \| 'opaque' }` | `true` (backdrop: `'transparent'`) | Controls dialog display. Use `false` to disable, or an object for fine-grained control. | > **Tip:** For platforms that don't support client-side video export (Linux, Firefox), > consider using [CE.SDK Renderer](#broken-link-7f3e9a) > for server-side video rendering. #### Platform Support | Platform | Video Import | Video Export | | -------- | ------------ | ------------ | | Chrome/Edge (Windows, macOS) | ✅ | ✅ | | Safari (macOS) | ✅ | ✅ | | Chrome (Linux) | ❌ | ❌ | | Firefox (all platforms) | ❌ | ❌ | ### Zoom Actions CE.SDK provides built-in zoom actions for controlling the viewport zoom level and focus. These actions are automatically registered and can be customized or called programmatically. #### Available Zoom Actions - `zoom.toBlock` - Zoom to a specific block with configurable padding - `zoom.toPage` - Zoom to the current page (or a specified page) - `zoom.toSelection` - Zoom to the currently selected blocks - `zoom.in` - Zoom in by one step - `zoom.out` - Zoom out by one step - `zoom.toLevel` - Set zoom to a specific level #### `zoom.toBlock` Zooms the viewport to fit a specific block. ```javascript // Zoom to a block with default settings await cesdk.actions.run('zoom.toBlock', blockId); // Zoom with custom padding and animation await cesdk.actions.run('zoom.toBlock', blockId, { padding: 50, // Uniform padding on all sides animate: true, autoFit: false }); // Different padding for each side await cesdk.actions.run('zoom.toBlock', blockId, { padding: { top: 20, bottom: 20, left: 40, right: 40 }, animate: { duration: 0.3, easing: 'EaseInOut' } }); ``` #### `zoom.toPage` Zooms to the current page or a specified page. If no options are provided, defaults to the current page. ```javascript // Zoom to current page with auto-fit await cesdk.actions.run('zoom.toPage', { autoFit: true, animate: false }); // Zoom with custom padding await cesdk.actions.run('zoom.toPage', { padding: { x: 40, y: 80 }, animate: true }); ``` #### `zoom.toSelection` Zooms to fit all currently selected blocks in the viewport. ```javascript // Zoom to selection with animation await cesdk.actions.run('zoom.toSelection', { padding: 40, animate: true }); // Auto-fit to selection await cesdk.actions.run('zoom.toSelection', { autoFit: true, padding: { x: 20, y: 20 } }); ``` #### `zoom.in` and `zoom.out` Step-based zoom controls with configurable limits. ```javascript // Zoom in with default settings await cesdk.actions.run('zoom.in'); // Zoom in with custom maximum await cesdk.actions.run('zoom.in', { maxZoom: 4, // Maximum zoom level animate: true }); // Zoom out with custom minimum await cesdk.actions.run('zoom.out', { minZoom: 0.25, // Minimum zoom level animate: { duration: 0.2, easing: 'EaseOut' } }); ``` #### `zoom.toLevel` Sets the zoom to a specific level. ```javascript // Set zoom to 100% await cesdk.actions.run('zoom.toLevel', 1.0); // Set zoom to 200% with animation await cesdk.actions.run('zoom.toLevel', 2.0, { animate: true, minZoom: 0.125, maxZoom: 32 }); // Fit to width (50% zoom) await cesdk.actions.run('zoom.toLevel', 0.5, { animate: { duration: 0.3, easing: 'EaseInOut' } }); ``` #### Padding Options Padding can be specified in multiple ways: ```javascript // Uniform padding on all sides { padding: 20 } // Different horizontal and vertical padding { padding: { x: 40, y: 20 } } // Individual padding for each side { padding: { top: 10, bottom: 20, left: 30, right: 40 } } ``` #### Animation Options Animation can be a boolean or an object with detailed settings: ```javascript // Simple animation toggle { animate: true } // Uses default duration and easing { animate: false } // No animation // Detailed animation configuration { animate: { duration: 0.3, // Duration in seconds easing: 'EaseInOut', // 'Linear', 'EaseIn', 'EaseOut', or 'EaseInOut' interruptible: true // Whether the animation can be interrupted } } ``` #### Auto-Fit Mode The `autoFit` option enables automatic zoom adjustment when the viewport resizes: ```javascript // Enable auto-fit to maintain proper framing await cesdk.actions.run('zoom.toPage', { autoFit: true, padding: { x: 40, y: 80 } }); ``` When auto-fit is enabled, the zoom level will automatically adjust to keep the target properly framed when the viewport size changes. #### Custom Zoom Action Example You can override the default zoom actions with custom implementations: ```javascript // Custom zoom to page with analytics cesdk.actions.register('zoom.toPage', async (options) => { // Track zoom event console.log('User zoomed to page'); // Get current page const currentPage = cesdk.engine.scene.getCurrentPage(); if (!currentPage) return; // Apply custom zoom logic await cesdk.engine.scene.zoomToBlock(currentPage, { padding: options?.padding ?? { x: 50, y: 100 }, animate: options?.animate ?? true }); // Custom post-zoom behavior cesdk.ui.showNotification('Zoomed to page'); }); ``` ### Video Timeline Zoom Actions The video timeline has its own set of zoom controls for managing the timeline view. These actions are registered when the video timeline component is active and provide instant zoom without animation. #### `timeline.zoom.in` Zooms in the video timeline by one step (multiplies current zoom level by 1.25). ```javascript // Zoom in the timeline await cesdk.actions.run('timeline.zoom.in'); ``` #### `timeline.zoom.out` Zooms out the video timeline by one step (divides current zoom level by 1.25). ```javascript // Zoom out the timeline await cesdk.actions.run('timeline.zoom.out'); ``` #### `timeline.zoom.fit` Automatically adjusts the timeline zoom to fit all content in the visible area. ```javascript // Fit timeline to show all content await cesdk.actions.run('timeline.zoom.fit'); ``` #### `timeline.zoom.toLevel` Sets the timeline zoom to a specific level. ```javascript // Set timeline zoom to 100% await cesdk.actions.run('timeline.zoom.toLevel', 1.0); // Set timeline zoom to 150% await cesdk.actions.run('timeline.zoom.toLevel', 1.5); // Set timeline zoom to 50% await cesdk.actions.run('timeline.zoom.toLevel', 0.5); ``` #### `timeline.zoom.reset` Resets the timeline zoom to the default level (1.0 or 100%). ```javascript // Reset timeline zoom to default await cesdk.actions.run('timeline.zoom.reset'); ``` ### Scroll Actions CE.SDK provides a scroll action for panning the viewport to different pages without changing the zoom level. This is useful for multi-page navigation where you want to maintain the current zoom. #### `scroll.toPage` Scrolls the viewport to center on a specific page without changing the zoom level. ```javascript // Scroll to current page without animation await cesdk.actions.run('scroll.toPage'); // Scroll to current page with smooth animation await cesdk.actions.run('scroll.toPage', { animate: true }); // Scroll to a specific page await cesdk.actions.run('scroll.toPage', { pageId: myPageId, animate: true }); ``` #### Parameters The `scroll.toPage` action accepts an optional options object: - `pageId` (optional): The ID of the page to scroll to. If not provided, scrolls to the current page. - `animate` (optional): Whether to animate the scroll transition. Default is `false`. #### Scroll vs Zoom The key difference between `scroll.toPage` and `zoom.toPage`: - **`scroll.toPage`**: Pans the viewport to center on the page while maintaining the current zoom level - **`zoom.toPage`**: Adjusts the zoom level to fit the page within the viewport with padding Use `scroll.toPage` when you want to navigate between pages in a multi-page document while keeping the same zoom level. Use `zoom.toPage` when you want to frame a page properly within the viewport. ## Utils API CE.SDK provides a Utils API with utility functions for common operations. These utilities are available through `cesdk.utils`: ### Loading Dialogs ```javascript // Create and manage loading dialogs const dialogController = cesdk.utils.showLoadingDialog({ title: 'Processing...', message: 'Please wait', // Can also be an array of strings progress: 0, // Initial progress value or 'indeterminate' cancelLabel: 'Cancel', abortTitle: 'Abort Operation?', abortMessage: 'Are you sure you want to abort?', abortLabel: 'Abort', size: 'large', // 'regular' or 'large' clickOutsideToClose: false, onAbort: () => console.log('User cancelled'), onDone: () => console.log('Dialog closed'), }); // Update progress dialogController.updateProgress({ value: 50, max: 100 }); // Show success or error dialogController.showSuccess({ title: 'Done!', message: 'Operation completed', }); dialogController.showError({ title: 'Error', message: 'Something went wrong' }); // Close dialog dialogController.close(); ``` ### Export Utility The export utility automatically handles both static (images, PDFs) and video exports: ```javascript // Export image or PDF const { blobs, options } = await cesdk.utils.export({ mimeType: 'image/png', pngCompressionLevel: 7, }); // Export video (automatically detected by MIME type) const { blobs, options } = await cesdk.utils.export({ mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => { console.log(`Progress: ${rendered}/${total} frames`); }, }); ``` ### File Operations ```javascript // Load file from user const file = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'File', // 'dataURL', 'text', 'blob', 'arrayBuffer', or 'File' }); // Download file to user's device await cesdk.utils.downloadFile(blob, 'image/png'); // Local upload (development only) const asset = await cesdk.utils.localUpload(file, context); ``` ### Video Support Detection Check browser video capabilities before working with video content: ```javascript // Check if video decoding/playback is supported if (cesdk.utils.supportsVideoDecode()) { // Safe to load and play video content await cesdk.engine.scene.loadFromURL(videoSceneUrl); } else { // Show fallback UI or message console.log('Video playback not available in this browser'); } // Check if video encoding/export is supported (async) if (await cesdk.utils.supportsVideoEncode()) { // Video export is available const blob = await cesdk.engine.block.exportVideo(page); } else { // Suggest server-side rendering alternative console.log('Video export not available - consider using CE.SDK Renderer'); } ``` These utilities provide the same checks as the `video.decode.checkSupport` and `video.encode.checkSupport` actions, but without showing dialogs. Use them when you want to check support silently and handle the UI yourself. ## Implementation Examples ### Environment-Based Upload Strategy ```javascript // Use local upload in development, CDN in production cesdk.actions.register('uploadFile', async (file, onProgress, context) => { if (process.env.NODE_ENV === 'development') { // Use utils for local upload return await cesdk.utils.localUpload(file, context); } else { console.log('Production upload for:', file.name); onProgress(100); // Production: // const asset = await yourCDNService.upload(file, { // onProgress: onProgress // }); return { id: 'prod-' + Date.now(), label: { en: file.name }, meta: { uri: URL.createObjectURL(file), thumbUri: URL.createObjectURL(file), // Production: // uri: asset.url, // thumbUri: asset.thumbnailUrl }, }; } }); ``` ### Combining Utils with Custom Logic ```javascript // Use utils for heavy lifting, add custom business logic cesdk.actions.register('exportDesign', async options => { console.log('Export started:', { format: options?.mimeType }); // Production: // analytics.track('export_started', { format: options?.mimeType }); // Use utils to handle the export with loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); // Custom post-processing if (exportOptions.mimeType === 'application/pdf') { console.log('PDF ready for watermarking:', blobs[0].size, 'bytes'); // Production: // const watermarkedBlob = await addWatermark(blobs[0]); // await cesdk.utils.downloadFile(watermarkedBlob, 'application/pdf'); await cesdk.utils.downloadFile(blobs[0], 'application/pdf'); } else { // Direct download for other formats await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); } console.log('Export completed:', { format: exportOptions.mimeType }); // Production: // analytics.track('export_completed', { format: exportOptions.mimeType }); }); ``` ## Registering Custom Actions with Custom IDs Beyond the predefined action types, you can register actions with custom IDs for your own application-specific needs: ```javascript // Register a custom action cesdk.actions.register('myCustomAction', async data => { console.log('Custom action triggered with:', data); return { success: true, processedData: data }; }); // Execute the custom action using run const result = await cesdk.actions.run('myCustomAction', { someData: 'value' }); // Or retrieve it for conditional execution const customAction = cesdk.actions.get('myCustomAction'); if (customAction) { const result = await customAction({ someData: 'value' }); } ``` ## Discovering Registered Actions Use `list()` to get all registered action IDs or find actions matching a pattern: ```javascript // Get all registered action IDs const registeredActions = cesdk.actions.list(); console.log('Available actions:', registeredActions); // Find actions matching a pattern const exportActions = cesdk.actions.list({ matcher: 'export*' }); console.log('Export actions:', exportActions); ``` ## Using Actions with Navigation Actions The navigation bar actions in CE.SDK automatically use the registered actions: ### Default Navigation Bar Actions The default navigation bar actions map to actions: - Save action → `saveScene` action - Share action → `shareScene` action - Export actions → `exportDesign` action - Import scene/archive → `importScene` action - Export scene/archive → `exportScene` action --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Animation" description: "Add motion to designs with support for keyframes, timeline editing, and programmatic animation control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation-ce900c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) - Add motion to designs with support for keyframes, timeline editing, and programmatic animation control. - [Supported Animation Types](https://img.ly/docs/cesdk/sveltekit/animation/types-4e5f41/) - Apply different animation types to design blocks in CE.SDK and configure their properties. - [Create Animations](https://img.ly/docs/cesdk/sveltekit/animation/create-15cf50/) - Build animations manually or with presets to animate objects, text, and scenes within your design. - [Edit Animations](https://img.ly/docs/cesdk/sveltekit/animation/edit-32c12a/) - Modify existing animations in CE.SDK by reading properties, changing duration and easing, adjusting direction, and replacing or removing animations from blocks. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Animations" description: "Build animations manually or with presets to animate objects, text, and scenes within your design." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/create-15cf50/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/sveltekit/animation/create-15cf50/) --- Add motion to design elements by creating entrance, exit, and loop animations using CE.SDK's animation system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-browser/) CE.SDK provides a unified animation system for adding motion to design elements. Animations are created as separate block instances and attached to target blocks using type-specific methods. You can apply entrance animations (how blocks appear), exit animations (how blocks leave), and loop animations (continuous motion while visible). Text blocks support additional properties for word-by-word or character-by-character reveals. ```typescript file=@cesdk_web_examples/guides-animation-create-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Animations Guide * * Demonstrates animation features in CE.SDK: * - Creating entrance (In) animations * - Creating exit (Out) animations * - Creating loop animations * - Configuring duration and easing * - Text animations with writing styles * - Managing animation lifecycle */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]; // Set page dimensions and duration const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setDuration(page, 5.0); // Create gradient background if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.8, a: 1.0 }, stop: 0 }, { color: { r: 0.1, g: 0.3, b: 0.6, a: 1.0 }, stop: 0.5 }, { color: { r: 0.2, g: 0.1, b: 0.4, a: 1.0 }, stop: 1 } ]); // Diagonal gradient from top-left to bottom-right engine.block.setFloat( gradientFill, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( gradientFill, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); } // ===== Title: "Create Animations" with entrance animation ===== const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Create Animations'); engine.block.setTextFontSize(titleBlock, 120); engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setDuration(titleBlock, 5.0); // Check if block supports animations before applying if (engine.block.supportsAnimation(titleBlock)) { // Create an entrance animation const slideIn = engine.block.createAnimation('slide'); engine.block.setInAnimation(titleBlock, slideIn); engine.block.setDuration(slideIn, 1.2); engine.block.setFloat( slideIn, 'animation/slide/direction', (3 * Math.PI) / 2 ); engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut'); } // Center title horizontally and position in upper third const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight * 0.25); // ===== IMG.LY Logo with pulsating loop animation ===== const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, logoBlock); engine.block.setDuration(logoBlock, 5.0); // Contain the image within the block frame engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain'); // Create a pulsating loop animation const pulsating = engine.block.createAnimation('pulsating_loop'); engine.block.setLoopAnimation(logoBlock, pulsating); engine.block.setDuration(pulsating, 1.5); // Add fade entrance for the logo const logoFadeIn = engine.block.createAnimation('fade'); engine.block.setInAnimation(logoBlock, logoFadeIn); engine.block.setDuration(logoFadeIn, 0.8); engine.block.setEnum(logoFadeIn, 'animationEasing', 'EaseOut'); // Position logo below title, centered const logoWidth = engine.block.getFrameWidth(logoBlock); engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2); engine.block.setPositionY(logoBlock, pageHeight * 0.25 + titleHeight + 40); // ===== Subtitle with text animation ===== const subtitleBlock = engine.block.create('text'); engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop'); engine.block.setTextFontSize(subtitleBlock, 48); engine.block.setTextColor(subtitleBlock, { r: 0.9, g: 0.9, b: 1.0, a: 0.9 }); engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); engine.block.setDuration(subtitleBlock, 5.0); // Create text animation with word-by-word reveal const textAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(subtitleBlock, textAnim); engine.block.setDuration(textAnim, 1.5); // Configure text animation writing style (Line, Word, or Character) engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word'); // Set overlap for cascading effect (0 = sequential, 0-1 = cascading) engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3); // Position subtitle below logo const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX(subtitleBlock, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleBlock, pageHeight * 0.65); // ===== Bottom right text with exit animation ===== const footerBlock = engine.block.create('text'); engine.block.replaceText(footerBlock, 'Powered by CE.SDK'); engine.block.setTextFontSize(footerBlock, 32); engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 }); engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right'); engine.block.setWidthMode(footerBlock, 'Auto'); engine.block.setHeightMode(footerBlock, 'Auto'); engine.block.appendChild(page, footerBlock); // Footer appears at start and fades out at the end engine.block.setTimeOffset(footerBlock, 0); engine.block.setDuration(footerBlock, 5.0); // Create exit animation that plays at the end of the block's duration const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(footerBlock, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); // Position footer at bottom right with padding const footerWidth = engine.block.getFrameWidth(footerBlock); const footerHeight = engine.block.getFrameHeight(footerBlock); engine.block.setPositionX(footerBlock, pageWidth - footerWidth - 60); engine.block.setPositionY(footerBlock, pageHeight - footerHeight - 40); // ===== Animation Properties Demo ===== // Create slide animation and configure direction for title const titleInAnim = engine.block.getInAnimation(titleBlock); if (titleInAnim !== 0) { // Discover all available properties for this animation const properties = engine.block.findAllProperties(titleInAnim); console.log('Slide animation properties:', properties); } // Example: Retrieve animations to verify they're attached const currentTitleIn = engine.block.getInAnimation(titleBlock); const currentLogoLoop = engine.block.getLoopAnimation(logoBlock); const currentFooterOut = engine.block.getOutAnimation(footerBlock); console.log( 'Animation IDs - Title In:', currentTitleIn, 'Logo Loop:', currentLogoLoop, 'Footer Out:', currentFooterOut ); // Get available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set initial playback time to show the scene after animations start engine.block.setPlaybackTime(page, 2.0); } } export default Example; ``` This guide covers how to create and configure animations programmatically, including entrance, exit, loop, and text animations with customizable timing and easing. ## Animation Fundamentals We first verify that a block supports animations before creating and attaching them. The basic pattern involves creating an animation instance with `createAnimation()`, then attaching it using the appropriate setter method. ```typescript highlight-check-support const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Create Animations'); engine.block.setTextFontSize(titleBlock, 120); engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setDuration(titleBlock, 5.0); // Check if block supports animations before applying if (engine.block.supportsAnimation(titleBlock)) { // Create an entrance animation const slideIn = engine.block.createAnimation('slide'); engine.block.setInAnimation(titleBlock, slideIn); engine.block.setDuration(slideIn, 1.2); engine.block.setFloat( slideIn, 'animation/slide/direction', (3 * Math.PI) / 2 ); engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut'); } ``` Animation support is available for: - **Graphic blocks** with image or video fills - **Text blocks** with additional writing style options - **Shape blocks** with fills CE.SDK provides several animation presets: - **Entrance animations**: slide, fade, blur, zoom, pop, wipe, pan - **Exit animations**: same types as entrance - **Loop animations**: breathing\_loop, spin\_loop, fade\_loop, pulsating\_loop, jump\_loop, squeeze\_loop, sway\_loop ## Entrance Animations Entrance animations define how blocks appear on screen. We create the animation with `createAnimation()`, attach it with `setInAnimation()`, and configure the duration with `setDuration()`. ```typescript highlight-entrance-animation // Add fade entrance for the logo const logoFadeIn = engine.block.createAnimation('fade'); engine.block.setInAnimation(logoBlock, logoFadeIn); engine.block.setDuration(logoFadeIn, 0.8); engine.block.setEnum(logoFadeIn, 'animationEasing', 'EaseOut'); ``` The `animationEasing` property controls the animation curve. Available options include Linear, EaseIn, EaseOut, and EaseInOut. ## Exit Animations Exit animations define how blocks leave the screen. We attach them with `setOutAnimation()`. CE.SDK manages timing automatically to prevent overlap between entrance and exit animations. ```typescript highlight-exit-animation const footerBlock = engine.block.create('text'); engine.block.replaceText(footerBlock, 'Powered by CE.SDK'); engine.block.setTextFontSize(footerBlock, 32); engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 }); engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right'); engine.block.setWidthMode(footerBlock, 'Auto'); engine.block.setHeightMode(footerBlock, 'Auto'); engine.block.appendChild(page, footerBlock); // Footer appears at start and fades out at the end engine.block.setTimeOffset(footerBlock, 0); engine.block.setDuration(footerBlock, 5.0); // Create exit animation that plays at the end of the block's duration const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(footerBlock, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); ``` When a block has both entrance and exit animations, CE.SDK adjusts their timing based on the block's duration in the composition. ## Loop Animations Loop animations run continuously while the block is visible. We use animation types ending in `_loop` and attach them with `setLoopAnimation()`. ```typescript highlight-loop-animation const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, logoBlock); engine.block.setDuration(logoBlock, 5.0); // Contain the image within the block frame engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain'); // Create a pulsating loop animation const pulsating = engine.block.createAnimation('pulsating_loop'); engine.block.setLoopAnimation(logoBlock, pulsating); engine.block.setDuration(pulsating, 1.5); ``` Loop animations continue throughout the block's visible duration, creating continuous motion effects like breathing, spinning, or pulsating. ## Animation Properties Each animation type exposes configurable properties. We use `setFloat()` and `setEnum()` to adjust these properties, and `findAllProperties()` to discover available options. ```typescript highlight-animation-properties // Create slide animation and configure direction for title const titleInAnim = engine.block.getInAnimation(titleBlock); if (titleInAnim !== 0) { // Discover all available properties for this animation const properties = engine.block.findAllProperties(titleInAnim); console.log('Slide animation properties:', properties); } ``` Common configurable properties include: - **Direction**: Set in radians for slide animations (0=right, PI/2=bottom, PI=left, 3\*PI/2=top) - **Easing**: Linear, EaseIn, EaseOut, EaseInOut ## Text Animations Text blocks support additional animation properties for granular control over how text appears. The `textAnimationWritingStyle` property controls whether the animation applies to the entire text, line by line, word by word, or character by character. ```typescript highlight-text-animation const subtitleBlock = engine.block.create('text'); engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop'); engine.block.setTextFontSize(subtitleBlock, 48); engine.block.setTextColor(subtitleBlock, { r: 0.9, g: 0.9, b: 1.0, a: 0.9 }); engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); engine.block.setDuration(subtitleBlock, 5.0); // Create text animation with word-by-word reveal const textAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(subtitleBlock, textAnim); engine.block.setDuration(textAnim, 1.5); // Configure text animation writing style (Line, Word, or Character) engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word'); // Set overlap for cascading effect (0 = sequential, 0-1 = cascading) engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3); ``` Writing style options: - **Line**: Animate entire lines together - **Word**: Animate word by word - **Character**: Animate character by character The `textAnimationOverlap` property (0 to 1) controls the cascading effect. A value of 0 means sequential animation, while values closer to 1 create more overlap between segments. ## Managing Animation Lifecycle We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`. A return value of 0 indicates no animation is attached. ```typescript highlight-manage-lifecycle // Example: Retrieve animations to verify they're attached const currentTitleIn = engine.block.getInAnimation(titleBlock); const currentLogoLoop = engine.block.getLoopAnimation(logoBlock); const currentFooterOut = engine.block.getOutAnimation(footerBlock); console.log( 'Animation IDs - Title In:', currentTitleIn, 'Logo Loop:', currentLogoLoop, 'Footer Out:', currentFooterOut ); // Get available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); ``` When replacing animations, destroy the old instance with `destroy()` to prevent memory leaks. ## Troubleshooting ### Animation Not Playing Verify the block supports animations with `supportsAnimation()`. Check that playback is active on the page. ### Duration Issues Ensure the animation is attached to a block before setting its duration. Duration is set on the animation instance, not the block. ### Memory Leaks When replacing an animation, destroy the old animation instance before creating a new one: ```typescript const current = engine.block.getInAnimation(block); if (current !== 0) { engine.block.destroy(current); } const newAnim = engine.block.createAnimation('fade'); engine.block.setInAnimation(block, newAnim); ``` ### Timing Conflicts If entrance and exit animations seem to overlap incorrectly, CE.SDK automatically adjusts durations to prevent conflicts. Reduce individual animation durations if needed. ## API Reference | Method | Description | | --------------------------------------------- | ------------------------------------------ | | `engine.block.createAnimation(type)` | Create animation instance | | `engine.block.supportsAnimation(block)` | Check if block supports animations | | `engine.block.setInAnimation(block, anim)` | Attach entrance animation | | `engine.block.setOutAnimation(block, anim)` | Attach exit animation | | `engine.block.setLoopAnimation(block, anim)` | Attach loop animation | | `engine.block.getInAnimation(block)` | Get entrance animation (0 if none) | | `engine.block.getOutAnimation(block)` | Get exit animation (0 if none) | | `engine.block.getLoopAnimation(block)` | Get loop animation (0 if none) | | `engine.block.setDuration(anim, seconds)` | Set animation duration | | `engine.block.setEnum(anim, prop, value)` | Set enum property (easing, writing style) | | `engine.block.setFloat(anim, prop, value)` | Set float property (direction, overlap) | | `engine.block.findAllProperties(anim)` | List available properties | | `engine.block.getEnumValues(prop)` | Get enum options | | `engine.block.destroy(anim)` | Destroy animation instance | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) — Detailed non-text block animations - [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) — Text-specific animation control - [Edit Animations](https://img.ly/docs/cesdk/sveltekit/animation/edit-32c12a/) — Modify existing animations - [Animation Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) — Animation concepts --- ## Related Pages - [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) - Apply movement, scaling, rotation, or opacity changes to elements using time-based keyframes. - [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) - Animate text elements with effects like fade, typewriter, and bounce for dynamic visual presentation. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Base Animations" description: "Apply movement, scaling, rotation, or opacity changes to elements using time-based keyframes." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/sveltekit/animation/create-15cf50/) > [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) --- Add motion to design blocks with entrance, exit, and loop animations using CE.SDK's animation system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-base-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-base-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-base-browser/) Base animations in CE.SDK add motion to design blocks through entrance (In), exit (Out), and loop animations. Animations are created as separate objects and attached to blocks, enabling reusable configurations across multiple elements. ```typescript file=@cesdk_web_examples/guides-animation-create-base-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Base Animations Guide * * Demonstrates animation features for design blocks in CE.SDK: * - Creating and applying entrance (In) animations * - Creating and applying exit (Out) animations * - Creating and applying loop animations * - Configuring duration and easing * - Managing animation lifecycle */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set white background color if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) { const fill = engine.block.createFill('color'); engine.block.setFill(page, fill); } engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Calculate grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block const createImageBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Check animation support and create entrance animation const block1 = await createImageBlock(0, imageUrls[0]); // Check if block supports animations before applying if (engine.block.supportsAnimation(block1)) { // Create an entrance animation const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); } // Block 2: Entrance animation with easing configuration const block2 = await createImageBlock(1, imageUrls[1]); // Create a fade entrance animation with easing const fadeInAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeInAnimation); engine.block.setDuration(fadeInAnimation, 1.0); engine.block.setEnum(fadeInAnimation, 'animationEasing', 'EaseOut'); // Block 3: Exit animation const block3 = await createImageBlock(2, imageUrls[2]); // Create an exit animation const zoomInAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomInAnimation); engine.block.setDuration(zoomInAnimation, 1.0); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block3, fadeOutAnimation); engine.block.setDuration(fadeOutAnimation, 1.0); engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn'); // Block 4: Loop animation const block4 = await createImageBlock(3, imageUrls[3]); // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block4, breathingLoop); engine.block.setDuration(breathingLoop, 1.0); // Block 5: Animation properties and slide direction const block5 = await createImageBlock(4, imageUrls[4]); // Create slide animation and configure direction const slideFromTop = engine.block.createAnimation('slide'); engine.block.setInAnimation(block5, slideFromTop); engine.block.setDuration(slideFromTop, 1.0); // Set slide direction (in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top) engine.block.setFloat( slideFromTop, 'animation/slide/direction', Math.PI / 2 ); engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut'); // Discover all available properties for this animation const properties = engine.block.findAllProperties(slideFromTop); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Block 6: Get animations and replace them const block6 = await createImageBlock(5, imageUrls[5]); // Set initial animations const initialIn = engine.block.createAnimation('pan'); engine.block.setInAnimation(block6, initialIn); engine.block.setDuration(initialIn, 1.0); const spinLoop = engine.block.createAnimation('spin_loop'); engine.block.setLoopAnimation(block6, spinLoop); engine.block.setDuration(spinLoop, 1.0); // Get current animations const currentIn = engine.block.getInAnimation(block6); const currentLoop = engine.block.getLoopAnimation(block6); const currentOut = engine.block.getOutAnimation(block6); // eslint-disable-next-line no-console console.log( 'Animation IDs - In:', currentIn, 'Loop:', currentLoop, 'Out:', currentOut ); // Replace in animation (destroy old one first to avoid memory leaks) if (currentIn !== 0) { engine.block.destroy(currentIn); } const newInAnimation = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block6, newInAnimation); engine.block.setDuration(newInAnimation, 1.0); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Set initial playback time to 1 second (after entrance animations) engine.block.setPlaybackTime(page, 1.0); } } export default Example; ``` This guide covers creating animations, attaching them to blocks, configuring properties like duration and easing, and managing animation lifecycle. ## Animation Fundamentals Before applying animations to a block, we verify it supports them using `supportsAnimation()`. Once confirmed, we create an animation instance and attach it to the block. ```typescript highlight-supports-animation // Check if block supports animations before applying if (engine.block.supportsAnimation(block1)) { // Create an entrance animation const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); } ``` We use `createAnimation()` with an animation type like `'slide'`, `'fade'`, or `'zoom'`. The animation is then attached using `setInAnimation()` for entrance animations. Duration is set with `setDuration()` in seconds. CE.SDK provides several animation types: - **Entrance animations**: `slide`, `fade`, `blur`, `grow`, `zoom`, `pop`, `wipe`, `pan`, `baseline`, `spin` - **Loop animations**: `spin_loop`, `fade_loop`, `blur_loop`, `pulsating_loop`, `breathing_loop`, `jump_loop`, `squeeze_loop`, `sway_loop` ## Entrance Animations Entrance animations (In animations) define how a block appears on screen. We create the animation, attach it with `setInAnimation()`, and configure its properties. ```typescript highlight-entrance-animation // Create a fade entrance animation with easing const fadeInAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeInAnimation); engine.block.setDuration(fadeInAnimation, 1.0); engine.block.setEnum(fadeInAnimation, 'animationEasing', 'EaseOut'); ``` We use `setEnum()` to configure the easing function. Available easing options include `'Linear'`, `'EaseIn'`, `'EaseOut'`, and `'EaseInOut'`. The `'EaseOut'` easing starts fast and slows down toward the end, creating a natural deceleration effect. ## Exit Animations Exit animations (Out animations) define how a block leaves the screen. We use `setOutAnimation()` to attach them. ```typescript highlight-exit-animation // Create an exit animation const zoomInAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomInAnimation); engine.block.setDuration(zoomInAnimation, 1.0); const fadeOutAnimation = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block3, fadeOutAnimation); engine.block.setDuration(fadeOutAnimation, 1.0); engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn'); ``` When using both entrance and exit animations, CE.SDK automatically manages their timing to prevent overlap. Changing the duration of an In animation may adjust the Out animation's duration to maintain valid timing. ## Loop Animations Loop animations run continuously while the block is visible. We use `setLoopAnimation()` to attach them. ```typescript highlight-loop-animation // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block4, breathingLoop); engine.block.setDuration(breathingLoop, 1.0); ``` The duration for loop animations defines the length of each cycle. A 2-second breathing loop will complete one full pulse every 2 seconds. ## Animation Properties Each animation type has specific configurable properties. We use `findAllProperties()` to discover available properties for an animation. ```typescript highlight-animation-properties // Create slide animation and configure direction const slideFromTop = engine.block.createAnimation('slide'); engine.block.setInAnimation(block5, slideFromTop); engine.block.setDuration(slideFromTop, 1.0); // Set slide direction (in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top) engine.block.setFloat( slideFromTop, 'animation/slide/direction', Math.PI / 2 ); engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut'); // Discover all available properties for this animation const properties = engine.block.findAllProperties(slideFromTop); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); ``` For slide animations, the `animation/slide/direction` property controls the entry direction in radians: - `0` — From the right - `Math.PI / 2` — From the bottom - `Math.PI` — From the left - `3 * Math.PI / 2` — From the top ## Managing Animation Lifecycle Animation objects must be properly managed to avoid memory leaks. When replacing an animation, we destroy the old one before setting the new one. We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`. ```typescript highlight-manage-animations // Set initial animations const initialIn = engine.block.createAnimation('pan'); engine.block.setInAnimation(block6, initialIn); engine.block.setDuration(initialIn, 1.0); const spinLoop = engine.block.createAnimation('spin_loop'); engine.block.setLoopAnimation(block6, spinLoop); engine.block.setDuration(spinLoop, 1.0); // Get current animations const currentIn = engine.block.getInAnimation(block6); const currentLoop = engine.block.getLoopAnimation(block6); const currentOut = engine.block.getOutAnimation(block6); // eslint-disable-next-line no-console console.log( 'Animation IDs - In:', currentIn, 'Loop:', currentLoop, 'Out:', currentOut ); // Replace in animation (destroy old one first to avoid memory leaks) if (currentIn !== 0) { engine.block.destroy(currentIn); } const newInAnimation = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block6, newInAnimation); engine.block.setDuration(newInAnimation, 1.0); ``` A return value of `0` indicates no animation is attached. Destroying a design block also destroys all its attached animations, but detached animations must be destroyed manually. ## Easing Functions We can query available easing options using `getEnumValues()`. ```typescript highlight-easing-options // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); ``` Easing functions control animation acceleration: | Easing | Description | | ----------- | --------------------------------------------- | | `Linear` | Constant speed throughout | | `EaseIn` | Starts slow, accelerates toward the end | | `EaseOut` | Starts fast, decelerates toward the end | | `EaseInOut` | Starts slow, speeds up, then slows down again | ## API Reference | Method | Description | | ------------------------------- | ------------------------------------------ | | `createAnimation(type)` | Create a new animation instance | | `supportsAnimation(block)` | Check if block supports animations | | `setInAnimation(block, anim)` | Apply entrance animation to block | | `setOutAnimation(block, anim)` | Apply exit animation to block | | `setLoopAnimation(block, anim)` | Apply loop animation to block | | `getInAnimation(block)` | Get entrance animation (returns 0 if none) | | `getOutAnimation(block)` | Get exit animation (returns 0 if none) | | `getLoopAnimation(block)` | Get loop animation (returns 0 if none) | | `setDuration(anim, seconds)` | Set animation duration | | `getDuration(anim)` | Get animation duration | | `setEnum(anim, prop, value)` | Set enum property (easing, etc.) | | `setFloat(anim, prop, value)` | Set float property (direction, etc.) | | `findAllProperties(anim)` | Get all available properties for animation | | `getEnumValues(prop)` | Get available values for enum property | | `destroy(anim)` | Destroy animation instance | ## Next Steps - [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) — Animate text with writing styles and character control - [Animation Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) — Understand animation concepts and capabilities --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Animations" description: "Animate text elements with effects like fade, typewriter, and bounce for dynamic visual presentation." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Create Animations](https://img.ly/docs/cesdk/sveltekit/animation/create-15cf50/) > [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) --- Create engaging text animations that reveal content line by line, word by word, or character by character with granular control over timing and overlap.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-text-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-text-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-text-browser/) Text animations in CE.SDK allow you to animate text blocks with granular control over how the text appears. Unlike standard block animations, text animations support writing styles that determine whether animation applies to the entire text, line by line, word by word, or character by character. ```typescript file=@cesdk_web_examples/guides-animation-create-text-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Text Animations Guide * * Demonstrates text-specific animation features in CE.SDK: * - Creating and applying animations to text blocks * - Text animation writing styles (line, word, character) * - Segment overlap configuration * - Combining with easing and duration properties */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set white background color for the page // First check if page supports fill, if not or doesn't have one, create one if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) { const fill = engine.block.createFill('color'); engine.block.setFill(page, fill); } engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Create a text block and animation // Animations are created separately and then attached to blocks const text1 = engine.block.create('text'); engine.block.setWidth(text1, blockWidth); engine.block.setHeight(text1, blockHeight); engine.block.appendChild(page, text1); const pos1 = getPosition(0); engine.block.setPositionX(text1, pos1.x); engine.block.setPositionY(text1, pos1.y); engine.block.replaceText(text1, 'Creating\nText\nAnimations'); engine.block.setFloat(text1, 'text/fontSize', 48); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text1, 'text/verticalAlignment', 'Center'); // Create an animation instance with the 'baseline' type const animation1 = engine.block.createAnimation('baseline'); // Apply the animation to the text block's entrance engine.block.setInAnimation(text1, animation1); // Set basic animation properties engine.block.setDuration(animation1, 2.0); // Writing Style: Line-by-line animation // Text animates one line at a time from top to bottom const text2 = engine.block.create('text'); engine.block.setWidth(text2, blockWidth); engine.block.setHeight(text2, blockHeight); engine.block.appendChild(page, text2); const pos2 = getPosition(1); engine.block.setPositionX(text2, pos2.x); engine.block.setPositionY(text2, pos2.y); engine.block.replaceText(text2, 'Line by line\nanimation\nfor text'); engine.block.setFloat(text2, 'text/fontSize', 42); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text2, 'text/verticalAlignment', 'Center'); const animation2 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text2, animation2); engine.block.setDuration(animation2, 2.0); // Set writing style to 'Line' for line-by-line animation engine.block.setEnum(animation2, 'textAnimationWritingStyle', 'Line'); engine.block.setEnum(animation2, 'animationEasing', 'EaseOut'); // Writing Style: Word-by-word animation // Text animates one word at a time in reading order const text3 = engine.block.create('text'); engine.block.setWidth(text3, blockWidth); engine.block.setHeight(text3, blockHeight); engine.block.appendChild(page, text3); const pos3 = getPosition(2); engine.block.setPositionX(text3, pos3.x); engine.block.setPositionY(text3, pos3.y); engine.block.replaceText(text3, 'Animate word by word for emphasis'); engine.block.setFloat(text3, 'text/fontSize', 42); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text3, 'text/verticalAlignment', 'Center'); const animation3 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text3, animation3); engine.block.setDuration(animation3, 2.5); // Set writing style to 'Word' for word-by-word animation engine.block.setEnum(animation3, 'textAnimationWritingStyle', 'Word'); engine.block.setEnum(animation3, 'animationEasing', 'EaseOut'); // Writing Style: Character-by-character animation // Text animates one character at a time (typewriter effect) const text4 = engine.block.create('text'); engine.block.setWidth(text4, blockWidth); engine.block.setHeight(text4, blockHeight); engine.block.appendChild(page, text4); const pos4 = getPosition(3); engine.block.setPositionX(text4, pos4.x); engine.block.setPositionY(text4, pos4.y); engine.block.replaceText( text4, 'Character by character for typewriter effect' ); engine.block.setFloat(text4, 'text/fontSize', 38); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text4, 'text/verticalAlignment', 'Center'); const animation4 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text4, animation4); engine.block.setDuration(animation4, 3.0); // Set writing style to 'Character' for character-by-character animation engine.block.setEnum(animation4, 'textAnimationWritingStyle', 'Character'); engine.block.setEnum(animation4, 'animationEasing', 'Linear'); // Segment Overlap: Sequential animation (overlap = 0) // Each segment completes before the next begins const text5 = engine.block.create('text'); engine.block.setWidth(text5, blockWidth); engine.block.setHeight(text5, blockHeight); engine.block.appendChild(page, text5); const pos5 = getPosition(4); engine.block.setPositionX(text5, pos5.x); engine.block.setPositionY(text5, pos5.y); engine.block.replaceText(text5, 'Sequential animation with zero overlap'); engine.block.setFloat(text5, 'text/fontSize', 40); engine.block.setEnum(text5, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text5, 'text/verticalAlignment', 'Center'); const animation5 = engine.block.createAnimation('pan'); engine.block.setInAnimation(text5, animation5); engine.block.setDuration(animation5, 2.0); engine.block.setEnum(animation5, 'textAnimationWritingStyle', 'Word'); // Set overlap to 0 for sequential animation engine.block.setFloat(animation5, 'textAnimationOverlap', 0.0); engine.block.setEnum(animation5, 'animationEasing', 'EaseOut'); // Segment Overlap: Cascading animation (overlap = 0.4) // Segments overlap partially for smooth flow const text6 = engine.block.create('text'); engine.block.setWidth(text6, blockWidth); engine.block.setHeight(text6, blockHeight); engine.block.appendChild(page, text6); const pos6 = getPosition(5); engine.block.setPositionX(text6, pos6.x); engine.block.setPositionY(text6, pos6.y); engine.block.replaceText(text6, 'Cascading animation with partial overlap'); engine.block.setFloat(text6, 'text/fontSize', 40); engine.block.setEnum(text6, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(text6, 'text/verticalAlignment', 'Center'); const animation6 = engine.block.createAnimation('pan'); engine.block.setInAnimation(text6, animation6); engine.block.setDuration(animation6, 1.5); engine.block.setEnum(animation6, 'textAnimationWritingStyle', 'Word'); // Set overlap to 0.4 for cascading effect engine.block.setFloat(animation6, 'textAnimationOverlap', 0.4); engine.block.setEnum(animation6, 'animationEasing', 'EaseOut'); // Combining animation properties: Duration and Easing // Duration controls overall timing, easing controls acceleration // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Query available writing style options const writingStyleOptions = engine.block.getEnumValues( 'textAnimationWritingStyle' ); // eslint-disable-next-line no-console console.log('Available writing style options:', writingStyleOptions); // Start playback to see animations engine.block.setPlaying(page, true); engine.block.setLooping(page, true); } } export default Example; ``` This guide covers text-specific animation properties like writing styles and segment overlap, enabling dynamic and engaging text presentations in your designs. ## Text Animation Fundamentals We create animations by first creating an animation instance, then attaching it to a text block. The animation block defines how the text will animate, while the text block contains the content and styling. ```typescript highlight-create-animation // Create an animation instance with the 'baseline' type const animation1 = engine.block.createAnimation('baseline'); // Apply the animation to the text block's entrance engine.block.setInAnimation(text1, animation1); // Set basic animation properties engine.block.setDuration(animation1, 2.0); ``` Animations are created separately using `engine.block.createAnimation()` with an animation type like 'baseline', 'fade', or 'pan'. We then attach the animation to the text block's entrance using `engine.block.setInAnimation()`. The animation duration is set with `engine.block.setDuration()`. ## Writing Style Control Text animations support different granularity levels through the `textAnimationWritingStyle` property. This controls whether the animation applies to the entire text at once, or breaks it into segments (lines, words, or characters). We can query available options using `engine.block.getEnumValues('textAnimationWritingStyle')`. ### Line-by-Line Animation The `Line` writing style animates text one line at a time from top to bottom. Each line appears sequentially, creating a structured reveal effect. ```typescript highlight-writing-style-line const animation2 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text2, animation2); engine.block.setDuration(animation2, 2.0); // Set writing style to 'Line' for line-by-line animation engine.block.setEnum(animation2, 'textAnimationWritingStyle', 'Line'); engine.block.setEnum(animation2, 'animationEasing', 'EaseOut'); ``` We use `engine.block.setEnum()` to set the writing style to `'Line'`. This is ideal for revealing multi-line text in a clear, organized manner. ### Word-by-Word Animation The `Word` writing style animates text one word at a time in reading order. This creates emphasis and draws attention to individual words. ```typescript highlight-writing-style-word const animation3 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text3, animation3); engine.block.setDuration(animation3, 2.5); // Set writing style to 'Word' for word-by-word animation engine.block.setEnum(animation3, 'textAnimationWritingStyle', 'Word'); engine.block.setEnum(animation3, 'animationEasing', 'EaseOut'); ``` Setting the writing style to `'Word'` is perfect for creating dynamic, engaging text reveals that emphasize key phrases. ### Character-by-Character Animation The `Character` writing style animates text one character at a time, creating a classic typewriter effect. This is the most granular animation option. ```typescript highlight-writing-style-character const animation4 = engine.block.createAnimation('baseline'); engine.block.setInAnimation(text4, animation4); engine.block.setDuration(animation4, 3.0); // Set writing style to 'Character' for character-by-character animation engine.block.setEnum(animation4, 'textAnimationWritingStyle', 'Character'); engine.block.setEnum(animation4, 'animationEasing', 'Linear'); ``` The `'Character'` writing style is ideal for typewriter effects and when you want maximum control over the animation timing. ## Segment Overlap Configuration The `textAnimationOverlap` property controls timing between animation segments. A value of 0 means segments animate sequentially, while values between 0 and 1 create cascading effects where segments overlap partially. We use `engine.block.setFloat()` to set the overlap value. ### Sequential Animation (Overlap = 0) When overlap is set to 0, each segment completes before the next begins, creating a clear, structured reveal effect. ```typescript highlight-overlap-sequential // Set overlap to 0 for sequential animation engine.block.setFloat(animation5, 'textAnimationOverlap', 0.0); engine.block.setEnum(animation5, 'animationEasing', 'EaseOut'); ``` Sequential animation ensures each text segment fully appears before the next one starts, making it perfect for emphasis and readability. ### Cascading Animation (Overlap = 0.4) When overlap is set to a value between 0 and 1, segments animate in a cascading pattern, creating a smooth, flowing effect as they blend together. ```typescript highlight-overlap-cascading // Set overlap to 0.4 for cascading effect engine.block.setFloat(animation6, 'textAnimationOverlap', 0.4); engine.block.setEnum(animation6, 'animationEasing', 'EaseOut'); ``` Cascading animation with partial overlap creates dynamic, fluid text reveals that feel natural and engaging. ## Combining with Animation Properties Text animations can be enhanced with standard animation properties like duration and easing. Duration controls the overall timing of the animation, while easing controls the acceleration curve. ```typescript highlight-duration-easing // Combining animation properties: Duration and Easing // Duration controls overall timing, easing controls acceleration // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Query available writing style options const writingStyleOptions = engine.block.getEnumValues( 'textAnimationWritingStyle' ); // eslint-disable-next-line no-console console.log('Available writing style options:', writingStyleOptions); ``` We use `engine.block.setEnum()` to set the easing function ('EaseIn', 'EaseOut', 'EaseInOut', 'Linear'). We can query available easing options using `engine.block.getEnumValues('animationEasing')`. Combining writing style, overlap, duration, and easing gives us complete control over how text animates. ## API Reference | Method | Description | | ------------------------------------------------- | -------------------------------------------------- | | `createAnimation(type)` | Create a new animation instance | | `setInAnimation(block, animation)` | Apply animation to block entrance | | `setLoopAnimation(block, animation)` | Apply looping animation to block | | `setOutAnimation(block, animation)` | Apply animation to block exit | | `getInAnimation(block)` | Get the entrance animation of a block | | `getLoopAnimation(block)` | Get the looping animation of a block | | `getOutAnimation(block)` | Get the exit animation of a block | | `setDuration(animation, seconds)` | Set animation duration in seconds | | `getDuration(animation)` | Get animation duration | | `setEnum(animation, property, value)` | Set enum property (writing style, easing) | | `getEnum(animation, property)` | Get enum property value | | `setFloat(animation, property, value)` | Set float property (overlap value) | | `getFloat(animation, property)` | Get float property value | | `getEnumValues(property)` | Get available enum options for a property | | `supportsAnimation(block)` | Check if block supports animations | | `replaceText(block, text)` | Set text content of a text block | | `setPlaying(block, enabled)` | Start or stop playback | | `setLooping(block, enabled)` | Enable or disable looping playback | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Animations" description: "Modify existing animations in CE.SDK by reading properties, changing duration and easing, adjusting direction, and replacing or removing animations from blocks." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/edit-32c12a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Edit Animations](https://img.ly/docs/cesdk/sveltekit/animation/edit-32c12a/) --- Modify existing animations by reading properties, changing duration and easing, and replacing or removing animations from blocks.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-edit-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-edit-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-edit-browser/) Editing animations in CE.SDK involves retrieving existing animations from blocks and modifying their properties. This guide assumes you've already created and attached animations to blocks as covered in the [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) guide. ```typescript file=@cesdk_web_examples/guides-animation-edit-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Edit Animations Guide * * Demonstrates how to edit existing animations in CE.SDK: * - Retrieving animations from blocks * - Reading animation properties (type, duration, easing) * - Modifying animation duration and easing * - Adjusting animation-specific properties * - Replacing and removing animations */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]!; // Set white background color const pageFill = engine.block.getFill(page); if (pageFill) { engine.block.setColor(pageFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); } // Calculate grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block with an initial animation const createAnimatedBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); // Add an initial slide animation const slideAnim = engine.block.createAnimation('slide'); engine.block.setInAnimation(graphic, slideAnim); engine.block.setDuration(slideAnim, 1.0); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Retrieve animations and check their existence const block1 = await createAnimatedBlock(0, imageUrls[0]); // Retrieve animations from a block const inAnimation = engine.block.getInAnimation(block1); const outAnimation = engine.block.getOutAnimation(block1); const loopAnimation = engine.block.getLoopAnimation(block1); // Check if animations exist (0 means no animation) console.log('In animation:', inAnimation !== 0 ? 'exists' : 'none'); console.log('Out animation:', outAnimation !== 0 ? 'exists' : 'none'); console.log('Loop animation:', loopAnimation !== 0 ? 'exists' : 'none'); // Get animation type if it exists if (inAnimation !== 0) { const animationType = engine.block.getType(inAnimation); console.log('Animation type:', animationType); } // Block 2: Read animation properties const block2 = await createAnimatedBlock(1, imageUrls[1]); // Read animation properties const animation2 = engine.block.getInAnimation(block2); if (animation2 !== 0) { // Get current duration const duration = engine.block.getDuration(animation2); console.log('Duration:', duration, 'seconds'); // Get current easing const easing = engine.block.getEnum(animation2, 'animationEasing'); console.log('Easing:', easing); // Discover all available properties const allProperties = engine.block.findAllProperties(animation2); console.log('Available properties:', allProperties); } // Block 3: Modify animation duration const block3 = await createAnimatedBlock(2, imageUrls[2]); // Modify animation duration const animation3 = engine.block.getInAnimation(block3); if (animation3 !== 0) { // Change duration to 1.5 seconds engine.block.setDuration(animation3, 1.5); // Verify the change const newDuration = engine.block.getDuration(animation3); console.log('Updated duration:', newDuration, 'seconds'); } // Block 4: Change easing function const block4 = await createAnimatedBlock(3, imageUrls[3]); // Change animation easing const animation4 = engine.block.getInAnimation(block4); if (animation4 !== 0) { // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set easing to EaseInOut for smooth acceleration and deceleration engine.block.setEnum(animation4, 'animationEasing', 'EaseInOut'); } // Block 5: Adjust animation-specific properties (slide direction) const block5 = await createAnimatedBlock(4, imageUrls[4]); // Adjust animation-specific properties const animation5 = engine.block.getInAnimation(block5); if (animation5 !== 0) { // Get current direction (for slide animations) const currentDirection = engine.block.getFloat( animation5, 'animation/slide/direction' ); console.log('Current direction (radians):', currentDirection); // Change direction to slide from top (3*PI/2 radians) engine.block.setFloat( animation5, 'animation/slide/direction', (3 * Math.PI) / 2 ); } // Block 6: Replace and remove animations const block6 = await createAnimatedBlock(5, imageUrls[5]); // Replace an existing animation const oldAnimation = engine.block.getInAnimation(block6); if (oldAnimation !== 0) { // Destroy the old animation to prevent memory leaks engine.block.destroy(oldAnimation); } // Create and set a new animation const newAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block6, newAnimation); engine.block.setDuration(newAnimation, 1.2); engine.block.setEnum(newAnimation, 'animationEasing', 'EaseOut'); // Add a loop animation to demonstrate removal const loopAnim = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block6, loopAnim); engine.block.setDuration(loopAnim, 1.0); // Remove the loop animation by destroying it const currentLoop = engine.block.getLoopAnimation(block6); if (currentLoop !== 0) { engine.block.destroy(currentLoop); // Verify removal - should now return 0 const verifyLoop = engine.block.getLoopAnimation(block6); console.log( 'Loop animation after removal:', verifyLoop === 0 ? 'none' : 'exists' ); } } } export default Example; ``` This guide covers retrieving animations, reading and modifying properties, changing easing functions, adjusting animation-specific settings, and replacing or removing animations. ## Retrieving Animations Before modifying an animation, we retrieve it from the block using `getInAnimation()`, `getOutAnimation()`, or `getLoopAnimation()`. A return value of `0` indicates no animation is attached. ```typescript highlight-retrieve-animations // Retrieve animations from a block const inAnimation = engine.block.getInAnimation(block1); const outAnimation = engine.block.getOutAnimation(block1); const loopAnimation = engine.block.getLoopAnimation(block1); // Check if animations exist (0 means no animation) console.log('In animation:', inAnimation !== 0 ? 'exists' : 'none'); console.log('Out animation:', outAnimation !== 0 ? 'exists' : 'none'); console.log('Loop animation:', loopAnimation !== 0 ? 'exists' : 'none'); // Get animation type if it exists if (inAnimation !== 0) { const animationType = engine.block.getType(inAnimation); console.log('Animation type:', animationType); } ``` We use `getType()` to identify the animation type (slide, fade, zoom, etc.). This is useful when you need to apply type-specific modifications. ## Reading Animation Properties We can inspect current animation settings using property getters. `getDuration()` returns the animation length in seconds, while `getEnum()` retrieves values like easing functions. ```typescript highlight-read-properties // Read animation properties const animation2 = engine.block.getInAnimation(block2); if (animation2 !== 0) { // Get current duration const duration = engine.block.getDuration(animation2); console.log('Duration:', duration, 'seconds'); // Get current easing const easing = engine.block.getEnum(animation2, 'animationEasing'); console.log('Easing:', easing); // Discover all available properties const allProperties = engine.block.findAllProperties(animation2); console.log('Available properties:', allProperties); } ``` Use `findAllProperties()` to discover all configurable properties for an animation. Different animation types expose different properties—slide animations have direction, while loop animations may have intensity or scale properties. ## Modifying Animation Duration Change animation timing with `setDuration()`. The duration is specified in seconds. ```typescript highlight-modify-duration // Modify animation duration const animation3 = engine.block.getInAnimation(block3); if (animation3 !== 0) { // Change duration to 1.5 seconds engine.block.setDuration(animation3, 1.5); // Verify the change const newDuration = engine.block.getDuration(animation3); console.log('Updated duration:', newDuration, 'seconds'); } ``` When modifying In or Out animation durations, CE.SDK automatically adjusts the paired animation to prevent overlap. For loop animations, the duration defines the cycle length. ## Changing Easing Functions Easing controls animation acceleration. We use `setEnum()` with the `'animationEasing'` property to change it. ```typescript highlight-change-easing // Change animation easing const animation4 = engine.block.getInAnimation(block4); if (animation4 !== 0) { // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); console.log('Available easing options:', easingOptions); // Set easing to EaseInOut for smooth acceleration and deceleration engine.block.setEnum(animation4, 'animationEasing', 'EaseInOut'); } ``` Use `getEnumValues('animationEasing')` to discover available options: | Easing | Description | | ----------- | ----------------------------------------------- | | `Linear` | Constant speed throughout | | `EaseIn` | Starts slow, accelerates toward the end | | `EaseOut` | Starts fast, decelerates toward the end | | `EaseInOut` | Starts slow, speeds up, then slows down again | ## Adjusting Animation-Specific Properties Each animation type has unique configurable properties. For slide animations, we can change the entry direction. ```typescript highlight-adjust-properties // Adjust animation-specific properties const animation5 = engine.block.getInAnimation(block5); if (animation5 !== 0) { // Get current direction (for slide animations) const currentDirection = engine.block.getFloat( animation5, 'animation/slide/direction' ); console.log('Current direction (radians):', currentDirection); // Change direction to slide from top (3*PI/2 radians) engine.block.setFloat( animation5, 'animation/slide/direction', (3 * Math.PI) / 2 ); } ``` The `animation/slide/direction` property uses radians: - `0` — From the right - `Math.PI / 2` — From the bottom - `Math.PI` — From the left - `3 * Math.PI / 2` — From the top For text animations, you can adjust `textAnimationWritingStyle` (Line, Word, Character) and `textAnimationOverlap` (0 for sequential, 1 for simultaneous). ## Replacing Animations To swap an animation type, destroy the existing animation before setting a new one. This prevents memory leaks from orphaned animation objects. ```typescript highlight-replace-animation // Replace an existing animation const oldAnimation = engine.block.getInAnimation(block6); if (oldAnimation !== 0) { // Destroy the old animation to prevent memory leaks engine.block.destroy(oldAnimation); } // Create and set a new animation const newAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block6, newAnimation); engine.block.setDuration(newAnimation, 1.2); engine.block.setEnum(newAnimation, 'animationEasing', 'EaseOut'); ``` We first retrieve and destroy the old animation, then create and attach a new one with the desired type and properties. ## Removing Animations Remove an animation by destroying it. After destruction, the getter returns `0`. ```typescript highlight-remove-animation // Add a loop animation to demonstrate removal const loopAnim = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block6, loopAnim); engine.block.setDuration(loopAnim, 1.0); // Remove the loop animation by destroying it const currentLoop = engine.block.getLoopAnimation(block6); if (currentLoop !== 0) { engine.block.destroy(currentLoop); // Verify removal - should now return 0 const verifyLoop = engine.block.getLoopAnimation(block6); console.log( 'Loop animation after removal:', verifyLoop === 0 ? 'none' : 'exists' ); } ``` Destroying a design block automatically destroys all its attached animations. However, detached animations must be destroyed manually to free memory. ## API Reference | Method | Description | | ------------------------------------- | -------------------------------------------------- | | `block.getInAnimation(block)` | Get entrance animation (returns 0 if none) | | `block.getOutAnimation(block)` | Get exit animation (returns 0 if none) | | `block.getLoopAnimation(block)` | Get loop animation (returns 0 if none) | | `block.getType(anim)` | Get animation type string | | `block.getDuration(anim)` | Get animation duration in seconds | | `block.setDuration(anim, seconds)` | Set animation duration | | `block.getEnum(anim, prop)` | Get enum property value | | `block.setEnum(anim, prop, value)` | Set enum property value | | `block.getFloat(anim, prop)` | Get float property value | | `block.setFloat(anim, prop, value)` | Set float property value | | `block.findAllProperties(anim)` | Get all available properties | | `block.getEnumValues(prop)` | Get available values for enum property | | `block.destroy(anim)` | Destroy animation and free memory | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) — Create entrance, exit, and loop animations - [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) — Animate text with writing styles and character control - [Animation Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) — Understand animation concepts and capabilities --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Add motion to designs with support for keyframes, timeline editing, and programmatic animation control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) --- Animations in CreativeEditor SDK (CE.SDK) bring your designs to life by adding motion to images, text, and design elements. Whether you're creating a dynamic social media post, a video ad, or an engaging product demo, animations help capture attention and communicate ideas more effectively. With CE.SDK, you can create and edit animations either through the built-in UI timeline or programmatically using the CreativeEngine API. Animated designs can be exported as MP4 videos, allowing you to deliver polished, motion-rich content entirely client-side. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported Animation Types" description: "Apply different animation types to design blocks in CE.SDK and configure their properties." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/animation/types-4e5f41/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) > [Supported Animation Types](https://img.ly/docs/cesdk/sveltekit/animation/types-4e5f41/) --- Apply entrance, exit, and loop animations to design blocks using the available animation types in CE.SDK.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-types-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-types-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-types-browser/) CE.SDK organizes animations into three categories: entrance (In), exit (Out), and loop. Each category determines when the animation plays during the block's lifecycle. This guide demonstrates different animation types and their configurable properties. ```typescript file=@cesdk_web_examples/guides-animation-types-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Supported Animation Types Guide * * Demonstrates how to use different animation types in CE.SDK: * - Entrance animations (slide, fade, zoom, spin) * - Exit animations with timing and easing * - Loop animations for continuous motion * - Animation property configuration */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set white background color if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) { const fill = engine.block.createFill('color'); engine.block.setFill(page, fill); } const pageFill = engine.block.getFill(page)!; engine.block.setColor(pageFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Calculate grid layout for 6 demonstration blocks const pageWidth = engine.block.getWidth(page)!; const pageHeight = engine.block.getHeight(page)!; const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Helper to create an image block const createImageBlock = async (index: number, imageUrl: string) => { const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl); engine.block.setFill(graphic, imageFill); engine.block.setShape(graphic, engine.block.createShape('rect')); engine.block.setWidth(graphic, blockWidth); engine.block.setHeight(graphic, blockHeight); const pos = getPosition(index); engine.block.setPositionX(graphic, pos.x); engine.block.setPositionY(graphic, pos.y); engine.block.appendChild(page, graphic); return graphic; }; // Sample images for demonstration const imageUrls = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', 'https://img.ly/static/ubq_samples/sample_4.jpg', 'https://img.ly/static/ubq_samples/sample_5.jpg', 'https://img.ly/static/ubq_samples/sample_6.jpg' ]; // Block 1: Slide entrance animation with direction const block1 = await createImageBlock(0, imageUrls[0]); // Create a slide animation that enters from the left const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); // Direction in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top engine.block.setFloat(slideAnimation, 'animation/slide/direction', Math.PI); engine.block.setEnum(slideAnimation, 'animationEasing', 'EaseOut'); // Block 2: Fade animation with easing const block2 = await createImageBlock(1, imageUrls[1]); // Create a fade entrance animation const fadeAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeAnimation); engine.block.setDuration(fadeAnimation, 1.0); engine.block.setEnum(fadeAnimation, 'animationEasing', 'EaseInOut'); // Block 3: Zoom animation const block3 = await createImageBlock(2, imageUrls[2]); // Create a zoom animation with fade effect const zoomAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomAnimation); engine.block.setDuration(zoomAnimation, 1.0); engine.block.setBool(zoomAnimation, 'animation/zoom/fade', true); // Block 4: Exit animation const block4 = await createImageBlock(3, imageUrls[3]); // Create entrance and exit animations const wipeIn = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block4, wipeIn); engine.block.setDuration(wipeIn, 1.0); engine.block.setEnum(wipeIn, 'animation/wipe/direction', 'Right'); // Exit animation plays before block disappears const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block4, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); // Block 5: Loop animation const block5 = await createImageBlock(4, imageUrls[4]); // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block5, breathingLoop); engine.block.setDuration(breathingLoop, 2.0); // Intensity: 0 = 1.25x max scale, 1 = 2.5x max scale engine.block.setFloat( breathingLoop, 'animation/breathing_loop/intensity', 0.3 ); // Block 6: Combined animations const block6 = await createImageBlock(5, imageUrls[5]); // Apply entrance, exit, and loop animations together const spinIn = engine.block.createAnimation('spin'); engine.block.setInAnimation(block6, spinIn); engine.block.setDuration(spinIn, 1.0); engine.block.setEnum(spinIn, 'animation/spin/direction', 'Clockwise'); engine.block.setFloat(spinIn, 'animation/spin/intensity', 0.5); const blurOut = engine.block.createAnimation('blur'); engine.block.setOutAnimation(block6, blurOut); engine.block.setDuration(blurOut, 1.0); const swayLoop = engine.block.createAnimation('sway_loop'); engine.block.setLoopAnimation(block6, swayLoop); engine.block.setDuration(swayLoop, 1.5); // Discover available properties for any animation const properties = engine.block.findAllProperties(slideAnimation); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); // Set initial playback time to see animations engine.block.setPlaybackTime(page, 1.9); } } export default Example; ``` This guide covers applying entrance animations (slide, fade, zoom), exit animations, loop animations, and configuring animation properties like direction, easing, and intensity. ## Entrance Animations Entrance animations define how a block appears. We use `createAnimation()` with the animation type and attach it using `setInAnimation()`. ### Slide Animation The slide animation moves a block in from a specified direction. The `direction` property uses radians where 0 is right, π/2 is bottom, π is left, and 3π/2 is top. ```typescript highlight-entrance-slide // Create a slide animation that enters from the left const slideAnimation = engine.block.createAnimation('slide'); engine.block.setInAnimation(block1, slideAnimation); engine.block.setDuration(slideAnimation, 1.0); // Direction in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top engine.block.setFloat(slideAnimation, 'animation/slide/direction', Math.PI); engine.block.setEnum(slideAnimation, 'animationEasing', 'EaseOut'); ``` ### Fade Animation The fade animation transitions opacity from invisible to fully visible. Easing controls the animation curve. ```typescript highlight-entrance-fade // Create a fade entrance animation const fadeAnimation = engine.block.createAnimation('fade'); engine.block.setInAnimation(block2, fadeAnimation); engine.block.setDuration(fadeAnimation, 1.0); engine.block.setEnum(fadeAnimation, 'animationEasing', 'EaseInOut'); ``` ### Zoom Animation The zoom animation scales the block from a smaller size to its final dimensions. The `fade` property adds an opacity transition during scaling. ```typescript highlight-entrance-zoom // Create a zoom animation with fade effect const zoomAnimation = engine.block.createAnimation('zoom'); engine.block.setInAnimation(block3, zoomAnimation); engine.block.setDuration(zoomAnimation, 1.0); engine.block.setBool(zoomAnimation, 'animation/zoom/fade', true); ``` Other entrance animation types include: - `blur` — Transitions from blurred to clear - `wipe` — Reveals with a directional wipe - `pop` — Bouncy scale effect - `spin` — Rotates the block into view - `grow` — Scales up from a point ## Exit Animations Exit animations define how a block leaves the screen. We use `setOutAnimation()` to attach them. CE.SDK prevents overlap between entrance and exit durations automatically. ```typescript highlight-exit-animation // Create entrance and exit animations const wipeIn = engine.block.createAnimation('wipe'); engine.block.setInAnimation(block4, wipeIn); engine.block.setDuration(wipeIn, 1.0); engine.block.setEnum(wipeIn, 'animation/wipe/direction', 'Right'); // Exit animation plays before block disappears const fadeOut = engine.block.createAnimation('fade'); engine.block.setOutAnimation(block4, fadeOut); engine.block.setDuration(fadeOut, 1.0); engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn'); ``` In this example, a wipe entrance transitions to a fade exit. Mirror entrance effects for visual consistency, or use contrasting effects for emphasis. ## Loop Animations Loop animations run continuously while the block is visible. They can combine with entrance and exit animations. We use `setLoopAnimation()` to attach them. ```typescript highlight-loop-animation // Create a breathing loop animation const breathingLoop = engine.block.createAnimation('breathing_loop'); engine.block.setLoopAnimation(block5, breathingLoop); engine.block.setDuration(breathingLoop, 2.0); // Intensity: 0 = 1.25x max scale, 1 = 2.5x max scale engine.block.setFloat( breathingLoop, 'animation/breathing_loop/intensity', 0.3 ); ``` The duration controls each cycle length. Loop animation types include: - `breathing_loop` — Slow scale pulse - `pulsating_loop` — Rhythmic scale - `spin_loop` — Continuous rotation - `fade_loop` — Opacity cycling - `sway_loop` — Rotational oscillation - `jump_loop` — Jumping motion - `blur_loop` — Blur cycling - `squeeze_loop` — Squeezing effect ## Combined Animations A single block can have entrance, exit, and loop animations running together. The loop animation runs throughout the block's visibility while entrance and exit animations play at the appropriate times. ```typescript highlight-combined-animations // Apply entrance, exit, and loop animations together const spinIn = engine.block.createAnimation('spin'); engine.block.setInAnimation(block6, spinIn); engine.block.setDuration(spinIn, 1.0); engine.block.setEnum(spinIn, 'animation/spin/direction', 'Clockwise'); engine.block.setFloat(spinIn, 'animation/spin/intensity', 0.5); const blurOut = engine.block.createAnimation('blur'); engine.block.setOutAnimation(block6, blurOut); engine.block.setDuration(blurOut, 1.0); const swayLoop = engine.block.createAnimation('sway_loop'); engine.block.setLoopAnimation(block6, swayLoop); engine.block.setDuration(swayLoop, 1.5); ``` ## Configuring Animation Properties Each animation type has specific configurable properties. We use `findAllProperties()` to discover available properties and `getEnumValues()` to query options for enum properties. ```typescript highlight-discover-properties // Discover available properties for any animation const properties = engine.block.findAllProperties(slideAnimation); // eslint-disable-next-line no-console console.log('Slide animation properties:', properties); // Query available easing options const easingOptions = engine.block.getEnumValues('animationEasing'); // eslint-disable-next-line no-console console.log('Available easing options:', easingOptions); ``` Common configurable properties include: - **Direction**: Controls entry/exit direction in radians or enum values - **Easing**: Animation curve (`Linear`, `EaseIn`, `EaseOut`, `EaseInOut`) - **Intensity**: Strength of the effect (varies by animation type) - **Fade**: Whether to include opacity transition ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.createAnimation(type)` | Create animation by type string | | `engine.block.setInAnimation(block, anim)` | Attach entrance animation | | `engine.block.setOutAnimation(block, anim)` | Attach exit animation | | `engine.block.setLoopAnimation(block, anim)` | Attach loop animation | | `engine.block.setDuration(anim, seconds)` | Set animation duration | | `engine.block.setFloat(anim, property, value)` | Set numeric property | | `engine.block.setEnum(anim, property, value)` | Set enum property | | `engine.block.setBool(anim, property, value)` | Set boolean property | | `engine.block.findAllProperties(anim)` | Discover configurable properties | | `engine.block.getEnumValues(property)` | Get available enum values | ## Next Steps - [Base Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/base-0fc5c4/) — Create and attach animations to blocks - [Text Animations](https://img.ly/docs/cesdk/sveltekit/animation/create/text-d6f4aa/) — Animate text with writing styles - [Animation Overview](https://img.ly/docs/cesdk/sveltekit/animation/overview-6a2ef2/) — Animation concepts and capabilities --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "API Reference" description: "Find out how to use the API of the CESDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/api-reference/overview-8f24e1/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [API Reference](https://img.ly/docs/cesdk/sveltekit/api-reference/overview-8f24e1/) --- For , the following packages are available: - [@cesdk/cesdk-js](`$\{props.platform.slug}/api/cesdk-js/`) - [@cesdk/engine](`$\{props.platform.slug}/api/engine/`) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automate Workflows" description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation-715209/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/automation/overview-34d971/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale. - [Batch Processing](https://img.ly/docs/cesdk/sveltekit/automation/batch-processing-ab2d18/) - Manage batch processing workflows in web apps with CE.SDK - [Auto-Resize](https://img.ly/docs/cesdk/sveltekit/automation/auto-resize-4c2d58/) - Configure blocks to dynamically adjust dimensions using Absolute, Percent, and Auto sizing modes for responsive layouts and content-driven expansion. - [Data Merge](https://img.ly/docs/cesdk/sveltekit/automation/data-merge-ae087c/) - Generate personalized designs from templates by merging external data using text variables and placeholder blocks - [Automate Design Generation](https://img.ly/docs/cesdk/sveltekit/automation/design-generation-98a99e/) - Generate on-brand designs programmatically using templates, variables, and CE.SDK’s headless API. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Auto-Resize" description: "Configure blocks to dynamically adjust dimensions using Absolute, Percent, and Auto sizing modes for responsive layouts and content-driven expansion." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation/auto-resize-4c2d58/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) > [Auto-Resize](https://img.ly/docs/cesdk/sveltekit/automation/auto-resize-4c2d58/) --- Configure blocks to dynamically adjust their dimensions using three sizing modes: Absolute for fixed values, Percent for parent-relative sizing, and Auto for content-driven expansion.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-auto-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-auto-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-auto-resize-browser/) CE.SDK provides three sizing modes for controlling block dimensions. Absolute mode uses fixed pixel values. Percent mode sizes blocks relative to their parent container. Auto mode automatically expands blocks to fit their content. You can set width and height modes independently, allowing flexible combinations like fixed width with auto height for text that wraps. ```typescript file=@cesdk_web_examples/guides-automation-auto-resize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Auto-Resize Guide * * Demonstrates block sizing modes and responsive layout patterns: * - Setting width and height modes (Absolute, Percent, Auto) * - Reading computed frame dimensions after layout * - Centering text blocks based on computed dimensions * - Creating responsive layouts with percentage-based sizing */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block with Auto sizing mode // Auto mode makes the block expand to fit its content const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Auto-Resize Demo'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); // Set width and height modes to Auto // The block will automatically size to fit the text content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); // Read computed frame dimensions after layout // getFrameWidth/getFrameHeight return the actual rendered size const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); console.log( `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed( 0 )} pixels` ); // Calculate centered position using frame dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerX = (pageWidth - titleWidth) / 2; const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout // Position the title at center engine.block.setPositionX(titleBlock, centerX); engine.block.setPositionY(titleBlock, centerY); // Create a block using Percent mode for responsive sizing // Percent mode sizes the block relative to its parent const backgroundBlock = engine.block.create('graphic'); engine.block.setShape(backgroundBlock, engine.block.createShape('rect')); const fill = engine.block.createFill('color'); engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); engine.block.setFill(backgroundBlock, fill); // Set to Percent mode - values are normalized (0-1) engine.block.setWidthMode(backgroundBlock, 'Percent'); engine.block.setHeightMode(backgroundBlock, 'Percent'); engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height // Center the background block engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin engine.block.setPositionY(backgroundBlock, pageHeight * 0.6); engine.block.appendChild(page, backgroundBlock); // Create a subtitle with Auto mode const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Text automatically sizes to fit content' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 32); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Read computed dimensions and center const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); const subtitleCenterX = (pageWidth - subtitleWidth) / 2; engine.block.setPositionX(subtitleBlock, subtitleCenterX); engine.block.setPositionY(subtitleBlock, pageHeight * 0.7); // Verify sizing modes const titleWidthMode = engine.block.getWidthMode(titleBlock); const titleHeightMode = engine.block.getHeightMode(titleBlock); const bgWidthMode = engine.block.getWidthMode(backgroundBlock); const bgHeightMode = engine.block.getHeightMode(backgroundBlock); console.log( `Title modes: width=${titleWidthMode}, height=${titleHeightMode}` ); console.log( `Background modes: width=${bgWidthMode}, height=${bgHeightMode}` ); // Select the title block to show the auto-sized result engine.block.select(titleBlock); console.log( 'Auto-resize guide initialized. Try changing text content to see auto-sizing in action.' ); } } export default Example; ``` This guide covers how to set and query sizing modes, read computed frame dimensions after layout, center blocks using frame dimensions, and create responsive layouts with percentage-based sizing. ## Initialize the Editor We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our layout. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; ``` ## Size Modes CE.SDK supports three sizing modes for block dimensions: - **Absolute**: Fixed dimensions in design units. The default mode where `setWidth()` and `setHeight()` set exact pixel values. - **Percent**: Dimensions relative to parent container. A value of 80 makes the block 80% of its parent's size. - **Auto**: Content-driven sizing. The block expands or contracts to fit its content, primarily useful for text blocks. ## Setting Size Modes Use `setWidthMode()` and `setHeightMode()` to configure how a block calculates its dimensions. Width and height modes can be set independently. ### Auto Mode for Text Auto mode makes text blocks expand to fit their content: ```typescript highlight=highlight-auto-mode // Create a text block with Auto sizing mode // Auto mode makes the block expand to fit its content const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Auto-Resize Demo'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); // Set width and height modes to Auto // The block will automatically size to fit the text content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); ``` With Auto mode, the block's dimensions are calculated automatically based on the content. This is useful when the text content varies and you want the block to always fit exactly. ### Percent Mode for Responsive Layouts Percent mode sizes blocks relative to their parent: ```typescript highlight=highlight-percent-mode // Create a block using Percent mode for responsive sizing // Percent mode sizes the block relative to its parent const backgroundBlock = engine.block.create('graphic'); engine.block.setShape(backgroundBlock, engine.block.createShape('rect')); const fill = engine.block.createFill('color'); engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); engine.block.setFill(backgroundBlock, fill); // Set to Percent mode - values are normalized (0-1) engine.block.setWidthMode(backgroundBlock, 'Percent'); engine.block.setHeightMode(backgroundBlock, 'Percent'); engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height // Center the background block engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin engine.block.setPositionY(backgroundBlock, pageHeight * 0.6); engine.block.appendChild(page, backgroundBlock); ``` Percent values represent the percentage of the parent container. A width of 80 with Percent mode means 80% of the parent's width. ## Reading Frame Dimensions After layout, use `getFrameWidth()` and `getFrameHeight()` to read the computed dimensions: ```typescript highlight=highlight-read-frame-dimensions // Read computed frame dimensions after layout // getFrameWidth/getFrameHeight return the actual rendered size const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); console.log( `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed( 0 )} pixels` ); ``` Frame dimensions return the actual rendered size regardless of the sizing mode. This is essential when using Auto mode since you need the computed size for positioning calculations. ## Centering Blocks Combine Auto mode with frame dimensions to center blocks based on their actual size: ```typescript highlight=highlight-center-block // Calculate centered position using frame dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerX = (pageWidth - titleWidth) / 2; const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout // Position the title at center engine.block.setPositionX(titleBlock, centerX); engine.block.setPositionY(titleBlock, centerY); ``` This pattern reads the computed dimensions after Auto sizing and calculates the centered position. ## Additional Auto-Sized Content You can create multiple auto-sized blocks and position them relative to each other: ```typescript highlight=highlight-subtitle-auto // Create a subtitle with Auto mode const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Text automatically sizes to fit content' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 32); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Read computed dimensions and center const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); const subtitleCenterX = (pageWidth - subtitleWidth) / 2; engine.block.setPositionX(subtitleBlock, subtitleCenterX); engine.block.setPositionY(subtitleBlock, pageHeight * 0.7); ``` ## Verifying Size Modes Query the current size modes to verify your configuration: ```typescript highlight=highlight-check-modes // Verify sizing modes const titleWidthMode = engine.block.getWidthMode(titleBlock); const titleHeightMode = engine.block.getHeightMode(titleBlock); const bgWidthMode = engine.block.getWidthMode(backgroundBlock); const bgHeightMode = engine.block.getHeightMode(backgroundBlock); console.log( `Title modes: width=${titleWidthMode}, height=${titleHeightMode}` ); console.log( `Background modes: width=${bgWidthMode}, height=${bgHeightMode}` ); ``` ## Troubleshooting **Frame dimensions return 0**: Layout may not have updated yet. Read frame dimensions after all content is set and the block is attached to the scene hierarchy. **Percent mode not working**: The block must have a parent container. Percent mode calculates size relative to the parent's dimensions. **Auto mode not resizing**: Auto mode works with content that has intrinsic size, primarily text blocks. Graphics require explicit dimensions. **Unexpected dimensions**: Check which mode is active using `getWidthMode()` and `getHeightMode()`. The mode affects how width and height values are interpreted. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.getWidth(block)` | Get block width in current mode | | `engine.block.setWidth(block, value)` | Set block width in current mode | | `engine.block.getWidthMode(block)` | Get current width mode: Absolute, Percent, or Auto | | `engine.block.setWidthMode(block, mode)` | Set width mode: Absolute, Percent, or Auto | | `engine.block.getHeight(block)` | Get block height in current mode | | `engine.block.setHeight(block, value)` | Set block height in current mode | | `engine.block.getHeightMode(block)` | Get current height mode: Absolute, Percent, or Auto | | `engine.block.setHeightMode(block, mode)` | Set height mode: Absolute, Percent, or Auto | | `engine.block.getFrameWidth(block)` | Get computed width after layout | | `engine.block.getFrameHeight(block)` | Get computed height after layout | | `engine.block.setPositionX(block, value)` | Set block X position | | `engine.block.setPositionY(block, value)` | Set block Y position | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Batch Processing" description: "Manage batch processing workflows in web apps with CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation/batch-processing-ab2d18/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) > [Batch Processing](https://img.ly/docs/cesdk/sveltekit/automation/batch-processing-ab2d18/) --- This guide shows you how to use CE.SDK to create and manage batch processing workflows in the browser. Batch processing automates creative operations at scale, from enabling template population and multi-format exports, to bulk transformations and production pipelines. In the browser, batch processing means automating the same CreativeEngine workflow while the tab stays open. Instead of the user editing/exporting items one by one, your front-end: 1. Loops through a dataset. 2. Produces a series of outputs. This guides helps you understand how the CE.SDK can work in a batch process workflow. ## What You’ll Learn - Two different batch processing approaches: - Sequential - Parallel - How to batch: - Templates population with data. - Exports to different formats (PNG, JPEG, PDF, MP4). - Thumbnails generation. - How to optimize memory usage. ## Batch Processing Strategies You can run batch operations in two ways: - **Sequential:** a single engine loop. - **Parallel:** multiple workers spinning up. The following examples show both approaches when running a batch export in the browser: ```ts // ... downloadBlob logic //Start the engine and download the scene const engine = await CreativeEngine.init({ license: LICENSE_KEY }); for (const record of records) { await engine.scene.loadFromString(record.scene); const blob = await engine.block.export(engine.scene.getPages()[0], 'image/png'); await downloadBlob(blob, `${record.id}.png`); } engine.dispose(); ``` 1. `CreativeEngine.init` spins up a single engine instance for the tab. 2. The loop iterates over the `record` dataset. 3. The Engine loads the scene. 4. The `export` call renders the first page as a PNG blob. 5. The code disposes of the engine to free resources. ```ts const workers = [new Worker('worker.js'), new Worker('worker.js')]; await Promise.all( records.map((record, idx) => workers[idx % workers.length].postMessage({ type: 'PROCESS', record }) ) ); ``` In this code: 1. 2 workers run in separate threads. 2. Each worker receives a different data set. 3. Each worker runs the heavier CreativeEngine work off the main thread. 4. `Promise.all` waits for every worker call to finish before moving on. The following table summarizes the pros and cons of each approach: | Approach | When to use | Pros | Cons | | --- | --- | --- | --- | | **Sequential** | - Default browser workload
- Small batch sizes
- Limited RAM on user devices | - Lower memory footprint
- Simpler code path
- Easy cleanup |- Slower total runtime
- UI can feel locked if not chunked
| | **Parallel** | - Big datasets
Enough resources in user devices
| - Higher throughput
- Can keep UI responsive
| - More memory consumption per tab
Coordination complexity
- Throttling risk | ## How To Batch Template Population For this operation, you generate personalized outputs at scale by combining: - Templates - Structured data ### Set the Data Sources Batch workflows can use a variety of data sources to populate a template, such as: - CSV files with parsing libraries - JSON from REST APIs - Databases (SQL, NoSQL) - Stream data The following examples show how to set three different data sources: ```ts await fetch('path/to/dataset.json').then((r) => r.json()); ``` ```ts await fetch('https://api.example.com/dataset').then((r) => r.json()); ``` ```ts // Define key variables let textVariables = { first_name: '', last_name: '', address: '', city: '', }; ``` ### Update the Template You can automate template population, update media, and show conditional content based on data. Find some examples in existing guides: | Action | EngineAPI function | Related guide | | --- | --- | --- | | Set text variables | `engine.variable.setString(variableId, value)` | [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) | | Update image fills | `engine.block.setString(block, 'fill/image/imageFileURI', url)` | [Insert Images](https://img.ly/docs/cesdk/sveltekit/insert-media/images-63848a/) | | Edit block properties | `engine.block.setFloat(block, key, value)` / `engine.block.setColor(block, key, color)` | [Apply Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) | ### Batch Export the Design The CE.SDK provides a set of format options when exporting the edited designs: | Format | EngineAPI function | Related guide | | --- | --- | --- | | PNG | `engine.block.export(block, 'image/png')` | [PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/) | | JPEG | `engine.block.export(block, 'image/jpeg', 0.95)` | [JPEG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-jpeg-6f88e9/) | | PDF | `engine.block.export(block, 'application/pdf')` | [PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) | | MP4 | `engine.block.exportVideo(block, MimeType.Mp4)` | [MP4](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-mp4-c998a8/) | Check all the export options in the [Export section](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/). ### Batch Thumbnail Generation from Static Scenes The export feature allows you to automate thumbnails generation by tweaking the format and the size of the design, for example: ```ts // Example: Real-time thumbnail generation const thumbnailEngine = await CreativeEngine.init({ container: null }); async function generateThumbnail(sceneData) { await thumbnailEngine.scene.loadFromString(sceneData); const page = thumbnailEngine.scene.getPages()[0]; // Generate small preview const thumbnail = await thumbnailEngine.block.export(page, 'image/jpeg', { targetWidth: 200, targetHeight: 200, quality: 0.7, }); return thumbnail; } ``` Read more about thumbnails generation in [the Engine guide](https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/). The CE.SDK also provides over 20 pre-designed text layouts to apply on thumbnails. Check the [relevant guide](https://img.ly/docs/cesdk/sveltekit/text/text-designs-a1b2c3/) to use them. ### Batch Thumbnail Generation from Video Scenes Extract representative frames from videos efficiently, and automate this action using the dedicated CE.SDK features: | Action | EngineAPI function | Related guide | | --- | --- | --- | | Load video source | `engine.scene.createFromVideo()` | [Create from Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) | | Seek to timestamp | `engine.block.setPlaybackTime()` | [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) | | Export single frame | `engine.block.export(block, options)` | [To PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/)
[Text Designs](https://img.ly/docs/cesdk/sveltekit/text/text-designs-a1b2c3/) | | Generate sequence thumbnails | `engine.block.generateVideoThumbnailSequence()` | [Trim Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) | | Size thumbnails consistently | `targetWidth / targetHeight` export options | [To PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/) | The following code shows how to **generate thumbnails from a video**: ```ts import CreativeEngine from '@cesdk/engine'; const engine = await CreativeEngine.init({ license: LICENSE_KEY }); await engine.scene.loadFromURL('/assets/video-scene.scene'); const [page] = engine.scene.getPages(); const videoBlock = engine.block .getChildren(page) .find((child) => engine.block.getType(child) === 'video'); if (videoBlock) { const videoFill = engine.block.getFill(videoBlock); await engine.block.setPlaybackTime(videoFill, 4.2); const thumbnail = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 640, targetHeight: 360 }); await downloadBlob(thumbnail, 'scene-thumb.png'); } engine.dispose(); ``` The preceding code: 1. Loads a scene containing a video. 2. Seeks to 4.2 s. 3. Exports the page as a PNG. 4. Saves the thumbnail. ## Optimize Memory Usage Every export produces and accumulates: - Blobs - URLs - Engine state Proper **cleanup** ensures batch processes complete without resource exhaustion. Without proper cleanup, the browser might: - Hits memory ceiling. - Crash. - Slow down. Consider the following actions to **avoid exhausting the client**: | Strategy | Code | | --- | --- | | Revoke blob URLs immediately after use | `URL.revokeObjectURL()` | | Dispose engine instances when finished | `engine.dispose()` | | Chunk large datasets into smaller batches | | | Consider garbage collection timing | | Treat cleanup as part of **each loop** iteration, by either: - Freeing resources **after each item**. - Chunking resources, by loading smaller parts of your datasets at a time. > **Note:** To **handle large batches**, consider the following workflows:- Split into smaller chunks. > - Log progress. > - Monitor status. ## Apply Error Handling Batch runs often work with **large records of data**. Some factors can make the job crash, such as: - A malformed asset - Timeouts When your job encounters one of these errors, you can proactively **avoid the job’s failure** using the following patterns: - Catch errors inside each loop iteration. - Log failing records so you can retry them later. - Decide whether to keep going or stop when an error happens. - Collect a summary of all failures for post-run review. For example, the preceding code to generate thumbnails now handles errors gracefully to avoid crashes: ```ts import CreativeEngine from '@cesdk/engine'; let engine; try { engine = await CreativeEngine.init({ license: LICENSE_KEY }); await engine.scene.loadFromURL('/assets/video-scene.scene'); const [page] = engine.scene.getPages(); if (!page) throw new Error('Scene has no pages.'); const videoBlock = engine.block .getChildren(page) .find((child) => engine.block.getType(child) === 'video'); if (!videoBlock) throw new Error('No video block found.'); const videoFill = engine.block.getFill(videoBlock); if (!videoFill) throw new Error('Video block is missing its fill.'); await engine.block.setPlaybackTime(videoFill, 4.2); const thumbnail = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 640, targetHeight: 360 }); await downloadBlob(thumbnail, 'scene-thumb.png'); } catch (error) { console.error('Failed to generate thumbnail', error); } finally { engine?.dispose(); } ``` ### Use Retry Logic Some errors are temporary due to factors such as: - Network hiccup - Rate limits - Busy CDN To avoid saturating the related service, you can use smart retries after a short delay. If the error persist: 1. Double the delay. 2. Retry 3. Double again the delay exponentially after each retry. This strategy allows you to identify temporary failures that could be resolved later. For **API failures**, consider using circuit breaking patterns that: - Pause the calls on repeated errors. - Test again after a delay. ### Check the Input Data Before Processing Lightweight checks can help you with: - Catching bad inputs early. - Preventing waste of time and compute on batches that’ll fail. Add checks **before**: - Launching the CE.SDK. - Loading scenes. - Exporting large scenes. The following table contains some checks **examples**: | Check | Example | | --- | --- | | Check input data structure | `if (!isValidRecord(record)) throw new Error('Invalid payload');` | | Check file existence and accessibility | `await fs.promises.access(filePath, fs.constants.R_OK);` | | Verify templates load correctly | `await engine.scene.loadFromURL(templateUrl);` | | Use dry-run mode for testing | `if (options.dryRun) return simulate(record);` | For example, the following **data validation function** checks: - The record type - The `id` - The HTTPS template URL - The presence of variants It throws descriptive errors if any of these elements are missing. ```ts function validateRecord(record) { if (typeof record !== 'object' || record === null) { throw new Error('Record must be an object'); } if (typeof record.id !== 'string') { throw new Error('Missing record id'); } if (!record.templateUrl?.startsWith('https://')) { throw new Error('Invalid template URL'); } if (!Array.isArray(record.variants) || record.variants.length === 0) { throw new Error('Record requires at least one variant'); } return true; } ``` ## Batch Process on Production When running on production, enhance browser-based batch processes with architecture and UX decisions that help the user run the workflow, such as: - **User-initiated batches**: keep work tied to explicit user actions; show confirmation dialogs for large jobs. - **Chunked processing**: split datasets into small slices (for example, 20 records) to avoid blocking the main thread. - **Resource caps**: document safe limits (for example, 50–100 exports per session) and enforce them in the UI. - **Persistence**: use `localStorage` or IndexedDB to cache progress so reloads can resume work. ### Monitor the Process Give users visibility inside the tab and send lightweight telemetry upstream. - Render UI elements that show the state, such as: - Progress bars - Per-item status chips - Send `fetch` calls to your backend for: - Error logs - Aggregated stats - When a chunk fails: 1. Show in-app notifications/snackbars. 2. Offer retries. For example, the following code: - Structures logging. - Renders it with timestamps. ```ts function reportBatchMetrics(batchMetrics) { const entry = { timestamp: new Date().toISOString(), ...batchMetrics, }; console.table([entry]); return fetch('/api/logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(entry), }); } ``` ## Troubleshooting | Issue | Cause | Solution | | -------------------------- | ------------------------------------------ | --------------------------------------------------- | | Out of memory errors | Blob URLs not revoked, engine not disposed | Call `URL.revokeObjectURL()` and `engine.dispose()` | | Slow processing speed | Template loaded each iteration | Load template once, modify variables only | | Items fail silently | Missing error handling | Wrap processing in try-catch blocks | | Inconsistent outputs | Shared state between iterations | Reset state or reload template each iteration | | Process hangs indefinitely | Uncaught promise rejection | Use error handling and timeouts | | Performance bottlenecks | Multiple | - Profile batch operations
- Identify slow operations
- Optimize export settings
- Reduce template complexity
| ### Debugging Strategies Effective troubleshooting techniques for batch processing in web apps include: - Retry with small batches. - Console log detailed error information. - Isolate problematic items. ## Next Steps - [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) - Learn headless engine operation basics - [Design Generation](https://img.ly/docs/cesdk/sveltekit/automation/design-generation-98a99e/) - Automate single design generation workflows - [Export Designs](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Deep dive into export options and formats - [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) - Work with dynamic text content in templates - [Source Sets](https://img.ly/docs/cesdk/sveltekit/import-media/source-sets-5679c8/) - Specify assets sources for each block. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Data Merge" description: "Generate personalized designs from templates by merging external data using text variables and placeholder blocks" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation/data-merge-ae087c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) > [Data Merge](https://img.ly/docs/cesdk/sveltekit/automation/data-merge-ae087c/) --- Generate personalized designs from a single template by merging external data into CE.SDK templates using text variables and placeholder blocks.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-data-merge-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-data-merge-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-data-merge-browser/) Data merge generates multiple personalized designs from a single template by replacing variable content with external data. Use it for certificates, badges, team cards, or any design requiring consistent layout with varying content. ```typescript file=@cesdk_web_examples/guides-automation-data-merge-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Data Merge Guide * * Demonstrates merging external data into templates: * - Setting text variables with engine.variable.setString() * - Finding variables with engine.variable.findAll() * - Finding blocks by name with engine.block.findByName() * - Updating image content in placeholder blocks * - Exporting personalized designs */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 400, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Sample data to merge into the template const sampleData = { name: 'Alex Smith', title: 'Creative Developer', email: 'alex.smith@example.com', photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg' }; // Create a profile photo block with a semantic name const photoBlock = engine.block.create('graphic'); engine.block.setShape(photoBlock, engine.block.createShape('rect')); const photoFill = engine.block.createFill('image'); engine.block.setString( photoFill, 'fill/image/imageFileURI', sampleData.photoUrl ); engine.block.setFill(photoBlock, photoFill); engine.block.setWidth(photoBlock, 150); engine.block.setHeight(photoBlock, 150); engine.block.setPositionX(photoBlock, 50); engine.block.setPositionY(photoBlock, 125); engine.block.setName(photoBlock, 'profile-photo'); engine.block.appendChild(page, photoBlock); // Create a text block with variable placeholders const textBlock = engine.block.create('text'); const textContent = `{{name}} {{title}} {{email}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 32); engine.block.setPositionX(textBlock, 230); engine.block.setPositionY(textBlock, 140); engine.block.appendChild(page, textBlock); // Set the variable values from data engine.variable.setString('name', sampleData.name); engine.variable.setString('title', sampleData.title); engine.variable.setString('email', sampleData.email); // Discover all variables in the scene const variables = engine.variable.findAll(); console.log('Variables in scene:', variables); // Check if the text block references any variables const hasVariables = engine.block.referencesAnyVariables(textBlock); console.log('Text block has variables:', hasVariables); // Find blocks by their semantic name const [foundPhotoBlock] = engine.block.findByName('profile-photo'); if (foundPhotoBlock) { console.log('Found profile-photo block:', foundPhotoBlock); // Update the image content const fill = engine.block.getFill(foundPhotoBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); } // Export the personalized design const blob = await engine.block.export(page, { mimeType: 'image/png' }); console.log('Exported PNG blob:', blob.size, 'bytes'); // Create a download link for the exported image const url = URL.createObjectURL(blob); console.log('Download URL created:', url); // Select the text block to show the variable values engine.block.select(textBlock); console.log( 'Data merge guide initialized. Try changing variable values in the console.' ); } } export default Example; ``` This guide covers how to prepare templates with variables, set values from data, and export personalized designs. ## Initialize the Editor We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our template. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 400, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; ``` ## Prepare Sample Data In a real application, data comes from a CSV file, database, or API. Here we define a sample record with the fields we want to merge into the template. ```typescript highlight=highlight-sample-data // Sample data to merge into the template const sampleData = { name: 'Alex Smith', title: 'Creative Developer', email: 'alex.smith@example.com', photoUrl: 'https://img.ly/static/ubq_samples/sample_1.jpg' }; ``` Each data record contains field names that map to template variables and placeholder blocks. ## Create Template Layout We build the template by creating blocks and assigning semantic names. The profile photo block uses `setName()` so we can find and update it later. ```typescript highlight=highlight-create-template // Create a profile photo block with a semantic name const photoBlock = engine.block.create('graphic'); engine.block.setShape(photoBlock, engine.block.createShape('rect')); const photoFill = engine.block.createFill('image'); engine.block.setString( photoFill, 'fill/image/imageFileURI', sampleData.photoUrl ); engine.block.setFill(photoBlock, photoFill); engine.block.setWidth(photoBlock, 150); engine.block.setHeight(photoBlock, 150); engine.block.setPositionX(photoBlock, 50); engine.block.setPositionY(photoBlock, 125); engine.block.setName(photoBlock, 'profile-photo'); engine.block.appendChild(page, photoBlock); ``` Using semantic names like `profile-photo` makes it easy to locate and modify blocks when processing different data records. ## Add Text with Variables Text variables use double curly brace syntax: `{{variableName}}`. We create a text block with variable placeholders for name, title, and email. ```typescript highlight=highlight-create-text-with-variables // Create a text block with variable placeholders const textBlock = engine.block.create('text'); const textContent = `{{name}} {{title}} {{email}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 32); engine.block.setPositionX(textBlock, 230); engine.block.setPositionY(textBlock, 140); engine.block.appendChild(page, textBlock); ``` Variables in text blocks automatically display their values when set through the Variable API. ## Set Variable Values We use `engine.variable.setString()` to define the value for each variable. When a variable is set, all text blocks referencing that variable update automatically. ```typescript highlight=highlight-set-variables // Set the variable values from data engine.variable.setString('name', sampleData.name); engine.variable.setString('title', sampleData.title); engine.variable.setString('email', sampleData.email); ``` Variable values persist throughout the engine session. Setting a variable to a new value updates all references immediately. ## Discover Variables Use `engine.variable.findAll()` to discover which variables exist in the scene. Use `engine.block.referencesAnyVariables()` to check if a specific block contains variable references. ```typescript highlight=highlight-discover-variables // Discover all variables in the scene const variables = engine.variable.findAll(); console.log('Variables in scene:', variables); // Check if the text block references any variables const hasVariables = engine.block.referencesAnyVariables(textBlock); console.log('Text block has variables:', hasVariables); ``` This is useful when loading existing templates to determine which data fields are required. ## Find and Update Placeholder Blocks Use `engine.block.findByName()` to locate blocks by their semantic name. Once found, you can update properties like image content by modifying the fill URI. ```typescript highlight=highlight-find-by-name // Find blocks by their semantic name const [foundPhotoBlock] = engine.block.findByName('profile-photo'); if (foundPhotoBlock) { console.log('Found profile-photo block:', foundPhotoBlock); // Update the image content const fill = engine.block.getFill(foundPhotoBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); } ``` This pattern works well for updating profile photos, logos, or other image placeholders in templates. ## Export the Design After merging data into the template, export the personalized design using `engine.block.export()`. ```typescript highlight=highlight-export // Export the personalized design const blob = await engine.block.export(page, { mimeType: 'image/png' }); console.log('Exported PNG blob:', blob.size, 'bytes'); // Create a download link for the exported image const url = URL.createObjectURL(blob); console.log('Download URL created:', url); ``` You can export to PNG, JPEG, WebP, or PDF formats. For batch processing, collect blobs in an array or write directly to a file system. ## Troubleshooting ### Variables Not Rendering If variable placeholders show instead of values: - Verify the variable name matches exactly (case-sensitive) - Use `engine.variable.findAll()` to check which variables are defined - Ensure `engine.variable.setString()` was called before rendering ### Block Not Found If `findByName()` returns an empty array: - Check the block name was set with `engine.block.setName()` - Verify the name string matches exactly (case-sensitive) - Ensure the block exists in the current scene ### Image Not Updating If placeholder images don't update: - Get the fill block first with `engine.block.getFill()` - Use the correct property path: `fill/image/imageFileURI` - Verify the image URL is accessible and valid ## API Reference | Method | Description | |--------|-------------| | `engine.variable.setString(name, value)` | Set a text variable's value | | `engine.variable.getString(name)` | Get a text variable's value | | `engine.variable.findAll()` | List all variable names in the scene | | `engine.variable.remove(name)` | Remove a variable | | `engine.block.findByName(name)` | Find blocks by their semantic name | | `engine.block.setName(block, name)` | Set a block's semantic name | | `engine.block.replaceText(block, text)` | Replace text content in a text block | | `engine.block.referencesAnyVariables(block)` | Check if block contains variable references | | `engine.block.getFill(block)` | Get the fill block of a design block | | `engine.block.setString(block, property, value)` | Set a string property value | | `engine.block.export(block, options)` | Export a block to an image format | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automate Design Generation" description: "Generate on-brand designs programmatically using templates, variables, and CE.SDK’s headless API." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation/design-generation-98a99e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) > [Design Generation](https://img.ly/docs/cesdk/sveltekit/automation/design-generation-98a99e/) --- Automating design generation simplifies workflows and allows you to create dynamic, personalized designs at scale. By combining design templates with external data or user-provided input, you can quickly generate professional outputs for various use cases, from banner ads to direct mail. With IMG.LY, you can use templates to define dynamic elements such as text, images, or other assets. These elements are populated with real-time data or user inputs during the generation process. This guide will walk you through the process of using the CE.SDK for programmatic design generation. [Launch Web Demo](https://img.ly/showcases/cesdk/headless-design/web) ## Populating a Template A design template is a pre-configured layout that includes placeholders for dynamic elements such as text, images, or other assets. These placeholders define where and how specific content will appear in the final design. During the generation process, the placeholders are replaced with actual data to create a completed output. - **Creating or Editing Templates:** Design templates can be created or edited directly within the CE.SDK using our UI or programmatically. Learn more in the [Create Templates guide](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/). - **Dynamic Content Sources:** Templates can be populated with data from various sources, such as: - **JSON files:** Useful for batch operations where data is pre-prepared. - **External APIs:** Ideal for real-time updates and dynamic integrations. - **User Input:** Data provided directly by the user through a UI. For detailed information on using and managing templates, see [Use Templates](https://img.ly/docs/cesdk/sveltekit/use-templates/overview-ae74e1/). Below is a diagram illustrating how data is merged into a template to produce a final design:  ## Example Workflow ### 1. Prepare the Template Start by designing a template with text variables. Here's an example postcard template with placeholders for the recipient's details:  ### 2. Load the Template into the Editor Initialize the CE.SDK and load your prepared template: ```ts example=basic-scene marker=cesdk-init-after // Load a template from your server or a CDN const sceneUrl = 'https://cdn.img.ly/assets/demo/v4/ly.img.template/templates/cesdk_postcard_2.scene'; await engine.scene.loadFromURL(sceneUrl); ``` ### 3. Provide Data to Populate the Template Populate your template with data from your chosen source: ```ts example=basic-scene marker=cesdk-init-after // Option 1: Prepare your data as a javascript object const data = { textVariables: { first_name: 'John', last_name: 'Doe', address: '123 Main St.', city: 'Anytown', }, }; // Option 2: Fetch from an API // const data = await fetch('https://api.example.com/design-data').then(res => res.json()); engine.variable.setString('first_name', data.textVariables.first_name); engine.variable.setString('last_name', data.textVariables.last_name); engine.variable.setString('address', data.textVariables.address); engine.variable.setString('city', data.textVariables.city); ``` ### 4. Export the Final Design Once the template is populated, export the final design in your preferred format: ```ts example=basic-scene marker=cesdk-init-after const output = await engine.block.export(engine.scene.get(), { mimeType: 'application/pdf', }); // Success: 'output' contains your generated design as a PDF Blob // You can now save it or display it in your application ``` Here's what your final output should look like:  Need help with exports? Check out the [Export Guide](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) for detailed instructions and options. ## Troubleshooting If you encounter issues during the generation process: - Verify that all your variable names exactly match those in your template - Ensure your template is accessible from the provided URL - Check that your data values are in the correct format (strings for text variables) - Monitor the console for detailed error messages from the CE.SDK --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/automation/overview-34d971/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) > [Overview](https://img.ly/docs/cesdk/sveltekit/automation/overview-34d971/) --- ### Output Formats --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Browser Support" description: "Find out which browsers and versions fully support CE.SDK features, including editing and video capabilities." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/sveltekit/compatibility-fef719/) > [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) --- The CreativeEditor SDK requires specific APIs to fully function. For video-related features, the required APIs are only supported in certain browsers. As a result, the list of supported browsers is currently limited to the following: | Supported Browser | Graphics Editing | Video Editing | Video Export | | ----------------- | --------------------------------------------- | ----------------- | ----------------- | | Chrome | **114** or newer | **114** or newer | **114** or newer | | Chrome Android | **114** or newer | not supported | not supported | | Chrome iOS | **114** or newer (on iOS/iPadOS 15 or newer) | not supported | not supported | | Edge | **114** or newer | **114** or newer | **114** or newer | | Firefox | **115** or newer | **130** or newer | not supported | | Safari | **15.6** or newer | **26.0** or newer | **26.0** or newer | | Safari iOS | **15.6** or newer (on iOS/iPadOS 15 or newer) | not supported | not supported | **Note:** Firefox supports video editing (decoding) starting with version 130 via the WebCodecs API. However, video export (encoding) is not supported because Firefox does not include the patent-encumbered H.264 and AAC codecs required for video encoding. For video features, CE.SDK automatically shows warning dialogs when unsupported browsers try to use video functionality. You can also detect video support programmatically using the `video.decode.checkSupport` and `video.encode.checkSupport` actions, or the silent `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` utilities. See the [Actions API](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for implementation details. While other browsers based on the Chromium project might work fine (Arc, Brave, Opera, Vivaldi etc.) they are not officially supported. ## Host Platform Restrictions All supported browsers rely on the host's platform APIs for different kind of functionality (e.g. video support). Check our [known editor limitations](https://img.ly/docs/cesdk/sveltekit/compatibility-139ef9/) for more details on these. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Colors" description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/colors/overview-16a177/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats. - [Color Basics](https://img.ly/docs/cesdk/sveltekit/colors/basics-307115/) - Learn how color works in CE.SDK, including the three supported color spaces (sRGB, CMYK, and Spot) and when to use each for screen display or print workflows. - [For Print](https://img.ly/docs/cesdk/sveltekit/colors/for-print-59bc05/) - Use print-ready color models and settings for professional-quality, production-ready exports. - [For Screen](https://img.ly/docs/cesdk/sveltekit/colors/for-screen-1911f8/) - Documentation for For Screen - [Apply Colors](https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/) - Apply solid colors to shapes, backgrounds, and other design elements. - [Create a Color Palette](https://img.ly/docs/cesdk/sveltekit/colors/create-color-palette-7012e0/) - Build reusable color palettes to maintain consistency and streamline user choices. - [Replace Individual Colors](https://img.ly/docs/cesdk/sveltekit/colors/replace-48cd71/) - Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects to swap colors or remove backgrounds. - [Adjust Colors](https://img.ly/docs/cesdk/sveltekit/colors/adjust-590d1e/) - Fine-tune images and design elements by adjusting brightness, contrast, saturation, exposure, and other color properties using CE.SDK's adjustments effect system. - [Color Conversion](https://img.ly/docs/cesdk/sveltekit/colors/conversion-bcd82b/) - Learn how to convert colors between color spaces in CE.SDK. Convert sRGB, CMYK, and spot colors programmatically for screen display or print workflows. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Colors" description: "Fine-tune images and design elements by adjusting brightness, contrast, saturation, exposure, and other color properties using CE.SDK's adjustments effect system." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/adjust-590d1e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Adjust Colors](https://img.ly/docs/cesdk/sveltekit/colors/adjust-590d1e/) --- Fine-tune images and design elements using CE.SDK's color adjustments system to control brightness, contrast, saturation, and other visual properties.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-adjust-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-adjust-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-adjust-browser/) Color adjustments allow you to modify the visual appearance of images and graphics by changing properties like brightness, contrast, saturation, and color temperature. CE.SDK implements color adjustments as an "adjustments" effect type that you can apply to compatible blocks. ```typescript file=@cesdk_web_examples/guides-colors-adjust-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Colors Guide * * Demonstrates how to adjust color properties of images and design elements: * - Creating adjustments effects * - Setting brightness, contrast, saturation, and other properties * - Enabling/disabling adjustments * - Reading adjustment values * - Applying different adjustment styles */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Enable adjustments in the inspector panel cesdk.feature.enable('ly.img.adjustment'); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a sample image to demonstrate color adjustments const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Check if a block supports effects before applying adjustments const imageBlock = await engine.block.addImage(imageUri, { size: { width: 400, height: 300 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Create an adjustments effect const adjustmentsEffect = engine.block.createEffect('adjustments'); // Attach the adjustments effect to the image block engine.block.appendEffect(imageBlock, adjustmentsEffect); // Set brightness - positive values lighten, negative values darken engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.4 ); // Set contrast - increases or decreases tonal range engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.35 ); // Set saturation - increases or decreases color intensity engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.5 ); // Set temperature - positive for warmer, negative for cooler tones engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/temperature', 0.25 ); // Read current adjustment values const brightness = engine.block.getFloat( adjustmentsEffect, 'effect/adjustments/brightness' ); console.log('Current brightness:', brightness); // Discover all available adjustment properties const allProperties = engine.block.findAllProperties(adjustmentsEffect); console.log('Available adjustment properties:', allProperties); // Disable adjustments temporarily (effect remains attached) engine.block.setEffectEnabled(adjustmentsEffect, false); console.log( 'Adjustments enabled:', engine.block.isEffectEnabled(adjustmentsEffect) ); // Re-enable adjustments engine.block.setEffectEnabled(adjustmentsEffect, true); // Create a second image to demonstrate a different adjustment style const secondImageBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 150 } }); engine.block.appendChild(page, secondImageBlock); engine.block.setPositionX(secondImageBlock, 50); engine.block.setPositionY(secondImageBlock, 50); // Apply a contrasting style: darker, high contrast, desaturated (moody look) const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(secondImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', -0.15 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.4 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/saturation', -0.3 ); // List all effects on the block const effects = engine.block.getEffects(secondImageBlock); console.log('Effects on second image:', effects.length); // Demonstrate removing an effect const tempBlock = await engine.block.addImage(imageUri, { size: { width: 150, height: 100 } }); engine.block.appendChild(page, tempBlock); engine.block.setPositionX(tempBlock, 550); engine.block.setPositionY(tempBlock, 50); const tempEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5); // Remove the effect by index const tempEffects = engine.block.getEffects(tempBlock); const effectIndex = tempEffects.indexOf(tempEffect); if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex); } // Destroy the removed effect to free memory engine.block.destroy(tempEffect); // Add refinement adjustments to demonstrate subtle enhancement properties const refinementEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, refinementEffect); // Sharpness - enhances edge definition engine.block.setFloat( refinementEffect, 'effect/adjustments/sharpness', 0.4 ); // Clarity - increases mid-tone contrast for more detail engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35); // Highlights - adjusts bright areas engine.block.setFloat( refinementEffect, 'effect/adjustments/highlights', -0.2 ); // Shadows - adjusts dark areas engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3); // Select the main image block to show adjustments panel engine.block.select(imageBlock); console.log( 'Color adjustments guide initialized. Select an image to see the adjustments panel.' ); } } export default Example; ``` This guide covers how to use the built-in adjustments UI panel and how to apply color adjustments programmatically using the block API. ## Using the Built-in Adjustments UI CE.SDK provides a built-in adjustments panel that allows users to modify color properties interactively. Users can access this panel by selecting an image or graphic block in the editor. ### Enable Adjustments Features To give users access to adjustments in the inspector panel, we enable the adjustments feature using CE.SDK's Feature API. ```typescript highlight=highlight-feature-enable // Enable adjustments in the inspector panel cesdk.feature.enable('ly.img.adjustment'); ``` With adjustments enabled, users can: - **Adjust sliders** for brightness, contrast, saturation, exposure, and more - **See real-time preview** of changes as they adjust values - **Reset adjustments** individually or all at once to restore defaults ## Programmatic Color Adjustments For applications that need to apply adjustments programmatically—whether for automation, batch processing, or dynamic user experiences—we use the block API. ### Check Block Compatibility Before applying adjustments, we verify the block supports effects. Not all block types support adjustments—for example, page blocks don't support effects directly, but image and graphic blocks do. ```typescript highlight=highlight-check-support // Check if a block supports effects before applying adjustments const imageBlock = await engine.block.addImage(imageUri, { size: { width: 400, height: 300 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); ``` ### Create and Apply Adjustments Effect Once we've confirmed a block supports effects, we create an adjustments effect and attach it to the block using `appendEffect()`. ```typescript highlight=highlight-create-adjustments // Create an adjustments effect const adjustmentsEffect = engine.block.createEffect('adjustments'); // Attach the adjustments effect to the image block engine.block.appendEffect(imageBlock, adjustmentsEffect); ``` Each block can have one adjustments effect in its effect stack. The adjustments effect provides access to all color adjustment properties through a single effect instance. ### Modify Adjustment Properties We set individual adjustment values using `setFloat()` with the effect block ID and property path. Each property uses the `effect/adjustments/` prefix followed by the property name. ```typescript highlight=highlight-set-properties // Set brightness - positive values lighten, negative values darken engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.4 ); // Set contrast - increases or decreases tonal range engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.35 ); // Set saturation - increases or decreases color intensity engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.5 ); // Set temperature - positive for warmer, negative for cooler tones engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/temperature', 0.25 ); ``` CE.SDK provides the following adjustment properties: | Property | Description | |----------|-------------| | `brightness` | Overall lightness—positive values lighten, negative values darken | | `contrast` | Tonal range—increases or decreases the difference between light and dark | | `saturation` | Color intensity—positive values increase vibrancy, negative values desaturate | | `exposure` | Exposure compensation—simulates camera exposure adjustments | | `gamma` | Gamma curve—adjusts midtone brightness | | `highlights` | Bright area intensity—controls the lightest parts of the image | | `shadows` | Dark area intensity—controls the darkest parts of the image | | `whites` | White point—adjusts the brightest pixels | | `blacks` | Black point—adjusts the darkest pixels | | `temperature` | Warm/cool color cast—positive for warmer, negative for cooler tones | | `sharpness` | Edge sharpness—enhances or softens edges | | `clarity` | Midtone contrast—increases local contrast for more definition | All properties accept float values. Experiment with different values to achieve the desired visual result. ### Read Adjustment Values We can read current adjustment values using `getFloat()` with the same property paths. Use `findAllProperties()` to discover all available properties on an adjustments effect. ```typescript highlight=highlight-read-values // Read current adjustment values const brightness = engine.block.getFloat( adjustmentsEffect, 'effect/adjustments/brightness' ); console.log('Current brightness:', brightness); // Discover all available adjustment properties const allProperties = engine.block.findAllProperties(adjustmentsEffect); console.log('Available adjustment properties:', allProperties); ``` This is useful for building custom UI controls or syncing adjustment values across your application. ### Enable and Disable Adjustments CE.SDK allows you to temporarily toggle adjustments on and off without removing them from the block. This is useful for before/after comparisons. ```typescript highlight=highlight-enable-disable // Disable adjustments temporarily (effect remains attached) engine.block.setEffectEnabled(adjustmentsEffect, false); console.log( 'Adjustments enabled:', engine.block.isEffectEnabled(adjustmentsEffect) ); // Re-enable adjustments engine.block.setEffectEnabled(adjustmentsEffect, true); ``` When you disable an adjustments effect, it remains attached to the block but won't be rendered until you enable it again. This preserves all adjustment values while giving you control over when adjustments are applied. ## Applying Different Adjustment Styles You can apply different adjustment combinations to create distinct visual styles. This example demonstrates a contrasting moody look using negative brightness, high contrast, and desaturation. ```typescript highlight=highlight-combine-effects // Create a second image to demonstrate a different adjustment style const secondImageBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 150 } }); engine.block.appendChild(page, secondImageBlock); engine.block.setPositionX(secondImageBlock, 50); engine.block.setPositionY(secondImageBlock, 50); // Apply a contrasting style: darker, high contrast, desaturated (moody look) const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(secondImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', -0.15 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.4 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/saturation', -0.3 ); // List all effects on the block const effects = engine.block.getEffects(secondImageBlock); console.log('Effects on second image:', effects.length); ``` By combining different adjustment properties, you can create warm and vibrant looks, cool and desaturated styles, or high-contrast dramatic effects. ## Refinement Adjustments Beyond basic color corrections, CE.SDK provides refinement adjustments for fine-tuning image detail and tonal balance. ```typescript highlight=highlight-refinement-adjustments // Add refinement adjustments to demonstrate subtle enhancement properties const refinementEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, refinementEffect); // Sharpness - enhances edge definition engine.block.setFloat( refinementEffect, 'effect/adjustments/sharpness', 0.4 ); // Clarity - increases mid-tone contrast for more detail engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35); // Highlights - adjusts bright areas engine.block.setFloat( refinementEffect, 'effect/adjustments/highlights', -0.2 ); // Shadows - adjusts dark areas engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3); ``` Refinement properties include: - **Sharpness** - Enhances edge definition for crisper details - **Clarity** - Increases mid-tone contrast for more depth and definition - **Highlights** - Controls the intensity of bright areas - **Shadows** - Controls the intensity of dark areas These adjustments are particularly useful for enhancing photos or preparing images for print. ## Managing Adjustments ### Remove Adjustments When you no longer need adjustments, you can remove them from the effect stack and free resources. Always destroy effects that are no longer in use to prevent memory leaks. ```typescript highlight=highlight-remove-adjustments // Demonstrate removing an effect const tempBlock = await engine.block.addImage(imageUri, { size: { width: 150, height: 100 } }); engine.block.appendChild(page, tempBlock); engine.block.setPositionX(tempBlock, 550); engine.block.setPositionY(tempBlock, 50); const tempEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5); // Remove the effect by index const tempEffects = engine.block.getEffects(tempBlock); const effectIndex = tempEffects.indexOf(tempEffect); if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex); } // Destroy the removed effect to free memory engine.block.destroy(tempEffect); ``` The `removeEffect()` method takes an index position. After removal, destroy the effect instance to ensure proper cleanup. ### Reset Adjustments To reset all adjustments to their default values, you can either: - Set each property to `0.0` individually using `setFloat()` - Remove the adjustments effect and create a new one For most cases, setting properties to `0.0` is more efficient than recreating the effect. ## Troubleshooting ### Adjustments Not Visible If adjustments don't appear after applying them: - Verify the block supports effects using `supportsEffects()` - Check that the effect is enabled with `isEffectEnabled()` - Ensure the adjustments effect was appended to the block, not just created - Confirm adjustment values are non-zero ### Unexpected Results If adjustments produce unexpected visual results: - Check the effect stack order—adjustments applied before or after other effects may produce different results - Verify property paths include the `effect/adjustments/` prefix - Use `findAllProperties()` to verify correct property names ### Property Not Found If you encounter property not found errors: - Use `findAllProperties()` to list all available properties - Ensure property paths use the correct `effect/adjustments/` prefix format ## API Reference | Method | Description | |--------|-------------| | `block.supportsEffects(block)` | Check if a block supports effects | | `block.createEffect('adjustments')` | Create an adjustments effect | | `block.appendEffect(block, effect)` | Add effect to the end of the effect stack | | `block.insertEffect(block, effect, index)` | Insert effect at a specific position | | `block.getEffects(block)` | Get all effects applied to a block | | `block.removeEffect(block, index)` | Remove effect at the specified index | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.isEffectEnabled(effect)` | Check if an effect is enabled | | `block.setFloat(effect, property, value)` | Set a float property value | | `block.getFloat(effect, property)` | Get a float property value | | `block.findAllProperties(effect)` | List all properties of an effect | | `block.destroy(effect)` | Destroy an effect and free resources | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Apply Colors" description: "Apply solid colors to shapes, backgrounds, and other design elements." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Apply Color](https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/) --- Apply solid colors to design elements like shapes, text, and backgrounds using CE.SDK's color system with support for RGB, CMYK, and spot colors.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-apply-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-apply-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-apply-browser/) Colors in CE.SDK are applied to block properties like fill, stroke, and shadow using `engine.block.setColor()`. The engine supports three color spaces: sRGB for screen display, CMYK for print production, and spot colors for specialized printing requirements. ```typescript file=@cesdk_web_examples/guides-colors-apply-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, RGBAColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Apply Colors Guide * * Demonstrates how to apply solid colors to design elements: * - Creating color objects in RGB, CMYK, and spot color spaces * - Applying colors to fill, stroke, and shadow properties * - Defining and managing spot colors * - Converting colors between color spaces */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a graphic block to apply colors to const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.setWidth(block, 200); engine.block.setHeight(block, 150); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 100); engine.block.appendChild(page, block); // Create RGB color (values 0.0-1.0) const rgbaBlue: RGBAColor = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; // Create CMYK color (cyan, magenta, yellow, black, tint) const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; // Create spot color reference const spotPink = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Pantone' }; // Define spot colors with screen preview approximations engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.41, 0.71); engine.editor.setSpotColorCMYK('Corporate-Blue', 1.0, 0.5, 0.0, 0.2); // Apply RGB color to fill const fill = engine.block.getFill(block); engine.block.setColor(fill, 'fill/color/value', rgbaBlue); // Read the current fill color const currentFillColor = engine.block.getColor(fill, 'fill/color/value'); console.log('Current fill color:', currentFillColor); // Enable and apply stroke color engine.block.setStrokeEnabled(block, true); engine.block.setStrokeWidth(block, 4); engine.block.setColor(block, 'stroke/color', cmykRed); // Enable and apply drop shadow color engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowOffsetX(block, 5); engine.block.setDropShadowOffsetY(block, 5); engine.block.setColor(block, 'dropShadow/color', spotPink); // Convert colors between color spaces const cmykFromRgb = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK' ); console.log('CMYK from RGB:', cmykFromRgb); const rgbFromCmyk = engine.editor.convertColorToColorSpace(cmykRed, 'sRGB'); console.log('RGB from CMYK:', rgbFromCmyk); // List all defined spot colors const allSpotColors = engine.editor.findAllSpotColors(); console.log('Defined spot colors:', allSpotColors); // Update a spot color definition engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.6, 0.8); console.log('Updated Pink-Flamingo spot color'); // Remove a spot color definition (falls back to magenta) engine.editor.removeSpotColor('Corporate-Blue'); console.log('Removed Corporate-Blue spot color'); // Select the block to show in the editor engine.block.select(block); console.log('Apply colors guide initialized.'); } } export default Example; ``` This guide covers how to create color objects in different color spaces, apply colors to fill, stroke, and shadow properties, work with spot colors including defining and managing them, and convert colors between color spaces. ## Create Color Objects CE.SDK represents colors as JavaScript objects with properties specific to each color space. We create color objects that match our target output—RGB for screens, CMYK for print, or spot colors for precise color matching. ```typescript highlight=highlight-create-colors // Create RGB color (values 0.0-1.0) const rgbaBlue: RGBAColor = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }; // Create CMYK color (cyan, magenta, yellow, black, tint) const cmykRed = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; // Create spot color reference const spotPink = { name: 'Pink-Flamingo', tint: 1.0, externalReference: 'Pantone' }; ``` RGB colors use `{ r, g, b, a }` with values from 0.0 to 1.0 for each channel, where `a` is alpha (opacity). CMYK colors use `{ c, m, y, k, tint }` where tint controls the overall intensity. Spot colors use `{ name, tint, externalReference }` to reference a defined spot color by name. ## Define Spot Colors Before applying a spot color, we must define its screen preview approximation. The engine needs to know how to display the color since spot colors represent inks that can't be directly rendered on screens. ```typescript highlight=highlight-define-spot // Define spot colors with screen preview approximations engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.41, 0.71); engine.editor.setSpotColorCMYK('Corporate-Blue', 1.0, 0.5, 0.0, 0.2); ``` Use `engine.editor.setSpotColorRGB()` to define the RGB approximation with red, green, and blue values from 0.0 to 1.0. Use `engine.editor.setSpotColorCMYK()` for the CMYK approximation with cyan, magenta, yellow, black, and tint values. A spot color can have both RGB and CMYK approximations defined. ## Apply Fill Colors To set a block's fill color, we first get the fill block using `engine.block.getFill()`, then apply the color using `engine.block.setColor()` with the `'fill/color/value'` property. ```typescript highlight=highlight-apply-fill // Apply RGB color to fill const fill = engine.block.getFill(block); engine.block.setColor(fill, 'fill/color/value', rgbaBlue); // Read the current fill color const currentFillColor = engine.block.getColor(fill, 'fill/color/value'); console.log('Current fill color:', currentFillColor); ``` The fill block is a separate entity from the design block. We can read the current color using `engine.block.getColor()` with the same property path. ## Apply Stroke Colors Stroke colors are applied directly to the design block using the `'stroke/color'` property. We enable the stroke first using `engine.block.setStrokeEnabled()`. ```typescript highlight=highlight-apply-stroke // Enable and apply stroke color engine.block.setStrokeEnabled(block, true); engine.block.setStrokeWidth(block, 4); engine.block.setColor(block, 'stroke/color', cmykRed); ``` The stroke renders around the edges of the block with the specified color. Set the stroke width using `engine.block.setStrokeWidth()` to control the line thickness. ## Apply Shadow Colors Drop shadow colors use the `'dropShadow/color'` property on the design block. Enable shadows first using `engine.block.setDropShadowEnabled()`. ```typescript highlight=highlight-apply-shadow // Enable and apply drop shadow color engine.block.setDropShadowEnabled(block, true); engine.block.setDropShadowOffsetX(block, 5); engine.block.setDropShadowOffsetY(block, 5); engine.block.setColor(block, 'dropShadow/color', spotPink); ``` Control the shadow position using `setDropShadowOffsetX()` and `setDropShadowOffsetY()`. Spot colors work with shadows just like RGB or CMYK colors. ## Convert Between Color Spaces Use `engine.editor.convertColorToColorSpace()` to convert any color to a different color space. This is useful when you need to output designs in a specific color format. ```typescript highlight=highlight-convert-color // Convert colors between color spaces const cmykFromRgb = engine.editor.convertColorToColorSpace( rgbaBlue, 'CMYK' ); console.log('CMYK from RGB:', cmykFromRgb); const rgbFromCmyk = engine.editor.convertColorToColorSpace(cmykRed, 'sRGB'); console.log('RGB from CMYK:', rgbFromCmyk); ``` Pass the source color object and target color space (`'sRGB'` or `'CMYK'`). Spot colors convert to their defined approximation in the target space. Note that color conversions are approximations—CMYK has a smaller color gamut than sRGB. ## List Defined Spot Colors Query all spot colors currently defined in the editor using `engine.editor.findAllSpotColors()`. This returns an array of spot color names. ```typescript highlight=highlight-list-spot // List all defined spot colors const allSpotColors = engine.editor.findAllSpotColors(); console.log('Defined spot colors:', allSpotColors); ``` This is useful for building color pickers or validating that required spot colors are defined before export. ## Update Spot Color Definitions Redefine a spot color's approximation by calling `setSpotColorRGB()` or `setSpotColorCMYK()` with the same name. All blocks using that spot color automatically update their rendered appearance. ```typescript highlight=highlight-update-spot // Update a spot color definition engine.editor.setSpotColorRGB('Pink-Flamingo', 1.0, 0.6, 0.8); console.log('Updated Pink-Flamingo spot color'); ``` This allows you to adjust how spot colors appear on screen without modifying every block that uses them. ## Remove Spot Color Definitions Remove a spot color definition using `engine.editor.removeSpotColor()`. Blocks still referencing that color fall back to the default magenta approximation. ```typescript highlight=highlight-remove-spot // Remove a spot color definition (falls back to magenta) engine.editor.removeSpotColor('Corporate-Blue'); console.log('Removed Corporate-Blue spot color'); ``` This is useful when cleaning up unused spot colors or when you need to signal that a spot color is no longer valid. ## Troubleshooting ### Spot Color Appears Magenta The spot color wasn't defined before use. Call `setSpotColorRGB()` or `setSpotColorCMYK()` with the exact spot color name before applying it to blocks. ### Stroke or Shadow Color Not Visible The effect isn't enabled. Call `setStrokeEnabled(block, true)` or `setDropShadowEnabled(block, true)` before setting the color. ### Color Looks Different After Conversion Color space conversions are approximations. CMYK has a smaller gamut than sRGB, so vibrant colors may appear muted after conversion. ### Can't Apply Color to Fill Apply colors to the fill block obtained from `getFill()`, not the parent design block. The fill is a separate entity with its own color property. ## API Reference | Method | Description | |--------|-------------| | `block.setColor(block, property, color)` | Set a color property on a block | | `block.getColor(block, property)` | Get a color property from a block | | `block.getFill(block)` | Get the fill block of a design block | | `block.setStrokeEnabled(block, enabled)` | Enable or disable stroke on a block | | `block.setDropShadowEnabled(block, enabled)` | Enable or disable drop shadow on a block | | `editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with RGB approximation | | `editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with CMYK approximation | | `editor.findAllSpotColors()` | List all defined spot colors | | `editor.removeSpotColor(name)` | Remove a spot color definition | | `editor.convertColorToColorSpace(color, colorSpace)` | Convert a color to a different color space | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Basics" description: "Learn how color works in CE.SDK, including the three supported color spaces (sRGB, CMYK, and Spot) and when to use each for screen display or print workflows." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/basics-307115/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Basics](https://img.ly/docs/cesdk/sveltekit/colors/basics-307115/) --- Understand the three color spaces in CE.SDK and when to use each for screen or print workflows.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-basics-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-basics-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-basics-browser/) CE.SDK supports three color spaces: **sRGB** for screen display, **CMYK** for print workflows, and **Spot Color** for specialized printing. Each color space serves different output types and has its own object format for the `setColor()` API. ```typescript file=@cesdk_web_examples/guides-colors-basics-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable spot color feature for the UI cesdk.feature.enable('ly.img.spotColor'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Calculate block sizes for three columns const margin = 40; const spacing = 30; const availableWidth = pageWidth - 2 * margin - 2 * spacing; const blockWidth = availableWidth / 3; const blockHeight = pageHeight - 2 * margin - 80; // Leave space for labels // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('MyBrand Red', 0.95, 0.25, 0.21); // Create three blocks to demonstrate each color space // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using RGBAColor object (values 0.0-1.0) engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using CMYKColor object (values 0.0-1.0, tint controls opacity) engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using SpotColor object (references the defined spot color) engine.block.setColor(spotFill, 'fill/color/value', { name: 'MyBrand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); // Add strokes to demonstrate stroke color property engine.block.setStrokeEnabled(srgbBlock, true); engine.block.setStrokeWidth(srgbBlock, 4); engine.block.setColor(srgbBlock, 'stroke/color', { r: 0.1, g: 0.2, b: 0.5, a: 1.0 }); engine.block.setStrokeEnabled(cmykBlock, true); engine.block.setStrokeWidth(cmykBlock, 4); engine.block.setColor(cmykBlock, 'stroke/color', { c: 0.0, m: 0.5, y: 0.6, k: 0.2, tint: 1.0 }); engine.block.setStrokeEnabled(spotBlock, true); engine.block.setStrokeWidth(spotBlock, 4); engine.block.setColor(spotBlock, 'stroke/color', { name: 'MyBrand Red', tint: 0.7, externalReference: '' }); // Create labels for each color space const labelY = margin + blockHeight + 20; const fontSize = 24; const labels = [ { text: 'sRGB', x: margin + blockWidth / 2 }, { text: 'CMYK', x: margin + blockWidth + spacing + blockWidth / 2 }, { text: 'Spot Color', x: margin + 2 * (blockWidth + spacing) + blockWidth / 2 } ]; for (const label of labels) { const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(textBlock, label.text); engine.block.setTextFontSize(textBlock, fontSize); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.appendChild(page, textBlock); // Center the label below each block const textWidth = engine.block.getWidth(textBlock); engine.block.setPositionX(textBlock, label.x - textWidth / 2); engine.block.setPositionY(textBlock, labelY); } // Position all color blocks engine.block.setPositionX(srgbBlock, margin); engine.block.setPositionY(srgbBlock, margin); engine.block.setPositionX(cmykBlock, margin + blockWidth + spacing); engine.block.setPositionY(cmykBlock, margin); engine.block.setPositionX(spotBlock, margin + 2 * (blockWidth + spacing)); engine.block.setPositionY(spotBlock, margin); // Retrieve and log color values to demonstrate getColor() const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); console.log('sRGB Color:', srgbColor); console.log('CMYK Color:', cmykColor); console.log('Spot Color:', spotColor); console.log('Color Basics example loaded successfully'); } } export default Example; ``` This guide covers how to choose the correct color space, define and apply colors using the unified `setColor()` API, and configure spot colors with screen preview approximations. ## Color Spaces Overview CE.SDK represents colors as objects with different properties depending on the color space. Use `engine.block.setColor()` to apply any color type to supported properties. **Supported color properties:** - `'fill/color/value'` - Fill color of a block - `'stroke/color'` - Stroke/outline color - `'dropShadow/color'` - Drop shadow color - `'backgroundColor/color'` - Background color - `'camera/clearColor'` - Canvas clear color ## sRGB Colors sRGB is the default color space for screen display. Pass an `RGBAColor` object with `r`, `g`, `b`, `a` components, each in the range 0.0 to 1.0. The `a` (alpha) component controls transparency. ```typescript highlight=highlight-srgb-color // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using RGBAColor object (values 0.0-1.0) engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); ``` sRGB colors are ideal for web and digital content where the output is displayed on screens. ## CMYK Colors CMYK is the color space for print workflows. Pass a `CMYKColor` object with `c`, `m`, `y`, `k` components (0.0 to 1.0) plus a `tint` value that controls opacity. ```typescript highlight=highlight-cmyk-color // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using CMYKColor object (values 0.0-1.0, tint controls opacity) engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); ``` When rendered on screen, CMYK colors are converted to RGB using standard conversion formulas. The `tint` value (0.0 to 1.0) is rendered as transparency. > **Note:** During PDF export, CMYK colors are currently converted to RGB using the standard conversion. Tint values are retained in the alpha channel. ## Spot Colors Spot colors are named colors used for specialized printing. Before using a spot color, you must define it with an RGB or CMYK approximation for screen preview. ### Defining Spot Colors Use `engine.editor.setSpotColorRGB()` or `engine.editor.setSpotColorCMYK()` to register a spot color with its screen preview approximation. ```typescript highlight=highlight-define-spot-color // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('MyBrand Red', 0.95, 0.25, 0.21); ``` ### Applying Spot Colors Reference a defined spot color using a `SpotColor` object with the `name`, `tint`, and `externalReference` properties. ```typescript highlight=highlight-spot-color // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); // Set fill color using SpotColor object (references the defined spot color) engine.block.setColor(spotFill, 'fill/color/value', { name: 'MyBrand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); ``` When rendered on screen, the spot color uses its RGB or CMYK approximation. During PDF export, spot colors are saved as a [Separation Color Space](https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.6.pdf#G9.1850648) that preserves print information. > **Note:** If a block references an undefined spot color, CE.SDK displays magenta (RGB: 1, 0, 1) as a fallback. ## Applying Stroke Colors Strokes support all three color spaces. Enable the stroke, set its width, then apply a color using the `'stroke/color'` property. ```typescript highlight=highlight-stroke-color // Add strokes to demonstrate stroke color property engine.block.setStrokeEnabled(srgbBlock, true); engine.block.setStrokeWidth(srgbBlock, 4); engine.block.setColor(srgbBlock, 'stroke/color', { r: 0.1, g: 0.2, b: 0.5, a: 1.0 }); engine.block.setStrokeEnabled(cmykBlock, true); engine.block.setStrokeWidth(cmykBlock, 4); engine.block.setColor(cmykBlock, 'stroke/color', { c: 0.0, m: 0.5, y: 0.6, k: 0.2, tint: 1.0 }); engine.block.setStrokeEnabled(spotBlock, true); engine.block.setStrokeWidth(spotBlock, 4); engine.block.setColor(spotBlock, 'stroke/color', { name: 'MyBrand Red', tint: 0.7, externalReference: '' }); ``` ## Reading Color Values Use `engine.block.getColor()` to retrieve the current color value from a property. The returned object's shape indicates the color space (RGBAColor, CMYKColor, or SpotColor). ```typescript highlight=highlight-get-color // Retrieve and log color values to demonstrate getColor() const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); console.log('sRGB Color:', srgbColor); console.log('CMYK Color:', cmykColor); console.log('Spot Color:', spotColor); ``` ## Choosing the Right Color Space | Color Space | Use Case | Output | |-------------|----------|--------| | **sRGB** | Web, digital, screen display | PNG, JPEG, WebP | | **CMYK** | Print workflows (converts to RGB) | PDF (converted) | | **Spot Color** | Specialized printing, brand colors | PDF (Separation Color Space) | ## API Reference | Method | Description | |--------|-------------| | `engine.block.setColor(id, property, value)` | Set a color property on a block. Pass an `RGBAColor`, `CMYKColor`, or `SpotColor` object. | | `engine.block.getColor(id, property)` | Get the current color value from a property. Returns an `RGBAColor`, `CMYKColor`, or `SpotColor` object. | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with an RGB approximation for screen preview. Components range from 0.0 to 1.0. | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with a CMYK approximation for screen preview. Components range from 0.0 to 1.0. | | Type | Properties | Description | |------|------------|-------------| | `RGBAColor` | `r`, `g`, `b`, `a` (0.0-1.0) | sRGB color for screen display. Alpha controls transparency. | | `CMYKColor` | `c`, `m`, `y`, `k`, `tint` (0.0-1.0) | CMYK color for print. Tint controls opacity. | | `SpotColor` | `name`, `tint`, `externalReference` | Named color for specialized printing. | ## Next Steps - [Apply Colors](https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/) - Apply colors to design elements programmatically - [CMYK Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/) - Work with CMYK for print workflows - [Spot Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/) - Define and manage spot colors for specialized printing --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Conversion" description: "Learn how to convert colors between color spaces in CE.SDK. Convert sRGB, CMYK, and spot colors programmatically for screen display or print workflows." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/conversion-bcd82b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Color Conversion](https://img.ly/docs/cesdk/sveltekit/colors/conversion-bcd82b/) --- Convert colors between sRGB, CMYK, and spot color spaces programmatically in CE.SDK.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-conversion-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-conversion-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-conversion-browser/) CE.SDK supports three color spaces: sRGB, CMYK, and SpotColor. When building color interfaces or preparing designs for export, you may need to convert colors between these spaces. The engine handles the mathematical conversion automatically through the `convertColorToColorSpace()` API. ```typescript file=@cesdk_web_examples/guides-colors-conversion-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Type guard helpers for identifying color types function isRGBAColor( color: any ): color is { r: number; g: number; b: number; a: number } { return 'r' in color && 'g' in color && 'b' in color && 'a' in color; } function isCMYKColor( color: any ): color is { c: number; m: number; y: number; k: number; tint: number } { return 'c' in color && 'm' in color && 'y' in color && 'k' in color; } function isSpotColor( color: any ): color is { name: string; tint: number; externalReference: string } { return 'name' in color && 'tint' in color && 'externalReference' in color; } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable spot color feature for the UI cesdk.feature.enable('ly.img.spotColor'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Calculate block sizes for three columns const margin = 40; const spacing = 30; const availableWidth = pageWidth - 2 * margin - 2 * spacing; const blockWidth = availableWidth / 3; const blockHeight = pageHeight - 2 * margin - 80; // Leave space for labels // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('Brand Red', 0.95, 0.25, 0.21); // Create three blocks with different color spaces // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'Brand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); // Position all color blocks engine.block.setPositionX(srgbBlock, margin); engine.block.setPositionY(srgbBlock, margin); engine.block.setPositionX(cmykBlock, margin + blockWidth + spacing); engine.block.setPositionY(cmykBlock, margin); engine.block.setPositionX(spotBlock, margin + 2 * (blockWidth + spacing)); engine.block.setPositionY(spotBlock, margin); // Create labels for each color space const labelY = margin + blockHeight + 20; const fontSize = 24; const labels = [ { text: 'sRGB', x: margin + blockWidth / 2 }, { text: 'CMYK', x: margin + blockWidth + spacing + blockWidth / 2 }, { text: 'Spot Color', x: margin + 2 * (blockWidth + spacing) + blockWidth / 2 } ]; for (const label of labels) { const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(textBlock, label.text); engine.block.setTextFontSize(textBlock, fontSize); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.appendChild(page, textBlock); // Center the label below each block const textWidth = engine.block.getWidth(textBlock); engine.block.setPositionX(textBlock, label.x - textWidth / 2); engine.block.setPositionY(textBlock, labelY); } // Convert colors to sRGB for screen display const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); // Convert CMYK to sRGB const cmykToRgba = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('CMYK converted to sRGB:', cmykToRgba); // Convert Spot color to sRGB (uses defined RGB approximation) const spotToRgba = engine.editor.convertColorToColorSpace( spotColor, 'sRGB' ); console.log('Spot color converted to sRGB:', spotToRgba); // Convert colors to CMYK for print workflows const srgbToCmyk = engine.editor.convertColorToColorSpace( srgbColor, 'CMYK' ); console.log('sRGB converted to CMYK:', srgbToCmyk); // Convert Spot color to CMYK for print output // First define CMYK approximation for the spot color engine.editor.setSpotColorCMYK('Brand Red', 0.0, 0.85, 0.9, 0.05); const spotToCmyk = engine.editor.convertColorToColorSpace( spotColor, 'CMYK' ); console.log('Spot color converted to CMYK:', spotToCmyk); // Use type guards to identify color space before conversion if (isRGBAColor(srgbColor)) { console.log( 'sRGB color components:', `R: ${srgbColor.r}, G: ${srgbColor.g}, B: ${srgbColor.b}, A: ${srgbColor.a}` ); } if (isCMYKColor(cmykColor)) { console.log( 'CMYK color components:', `C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}, Tint: ${cmykColor.tint}` ); } if (isSpotColor(spotColor)) { console.log('Spot color name:', spotColor.name, 'Tint:', spotColor.tint); } console.log('Color Conversion example loaded successfully'); } } export default Example; ``` This guide covers how to convert colors between sRGB and CMYK, handle spot color conversions, identify color types with type guards, and understand how tint and alpha values are preserved during conversion. ## Supported Color Spaces CE.SDK supports conversion between three color spaces: | Color Space | Format | Use Case | |-------------|--------|----------| | **sRGB** | `RGBAColor` with `r`, `g`, `b`, `a` (0.0-1.0) | Screen display, web output | | **CMYK** | `CMYKColor` with `c`, `m`, `y`, `k`, `tint` (0.0-1.0) | Print workflows | | **SpotColor** | `SpotColor` with `name`, `tint`, `externalReference` | Specialized printing | ## Setting Up Colors Before converting colors, you need colors in different spaces. This example creates blocks with sRGB, CMYK, and spot colors. First, define a spot color with its RGB approximation for screen preview: ```typescript highlight=highlight-define-spot-color // Define a spot color with RGB approximation for screen preview engine.editor.setSpotColorRGB('Brand Red', 0.95, 0.25, 0.21); ``` Create an sRGB color block for screen display: ```typescript highlight=highlight-srgb-color // Block 1: sRGB color (for screen display) const srgbBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( srgbBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const srgbFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(srgbFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setFill(srgbBlock, srgbFill); engine.block.setWidth(srgbBlock, blockWidth); engine.block.setHeight(srgbBlock, blockHeight); engine.block.appendChild(page, srgbBlock); ``` Create a CMYK color block for print workflows: ```typescript highlight=highlight-cmyk-color // Block 2: CMYK color (for print workflows) const cmykBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( cmykBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const cmykFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, m: 0.8, y: 0.95, k: 0.0, tint: 1.0 }); engine.block.setFill(cmykBlock, cmykFill); engine.block.setWidth(cmykBlock, blockWidth); engine.block.setHeight(cmykBlock, blockHeight); engine.block.appendChild(page, cmykBlock); ``` Create a spot color block for specialized printing: ```typescript highlight=highlight-spot-color // Block 3: Spot color (for specialized printing) const spotBlock = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( spotBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const spotFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'Brand Red', tint: 1.0, externalReference: '' }); engine.block.setFill(spotBlock, spotFill); engine.block.setWidth(spotBlock, blockWidth); engine.block.setHeight(spotBlock, blockHeight); engine.block.appendChild(page, spotBlock); ``` ## Converting to sRGB Use `engine.editor.convertColorToColorSpace(color, 'sRGB')` to convert any color to sRGB format. This is useful for displaying color values on screen or when you need RGB components for CSS or other web-based color operations. ```typescript highlight=highlight-convert-to-srgb // Convert colors to sRGB for screen display const srgbColor = engine.block.getColor(srgbFill, 'fill/color/value'); const cmykColor = engine.block.getColor(cmykFill, 'fill/color/value'); const spotColor = engine.block.getColor(spotFill, 'fill/color/value'); // Convert CMYK to sRGB const cmykToRgba = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('CMYK converted to sRGB:', cmykToRgba); // Convert Spot color to sRGB (uses defined RGB approximation) const spotToRgba = engine.editor.convertColorToColorSpace( spotColor, 'sRGB' ); console.log('Spot color converted to sRGB:', spotToRgba); ``` When converting CMYK or spot colors to sRGB, the engine returns an `RGBAColor` object with `r`, `g`, `b`, `a` properties. The tint value from CMYK or spot colors becomes the alpha value in the returned sRGB color. ## Converting to CMYK Use `engine.editor.convertColorToColorSpace(color, 'CMYK')` to convert any color to CMYK format. This is essential for print workflows where you need to ensure colors are in the correct space before export. ```typescript highlight=highlight-convert-to-cmyk // Convert colors to CMYK for print workflows const srgbToCmyk = engine.editor.convertColorToColorSpace( srgbColor, 'CMYK' ); console.log('sRGB converted to CMYK:', srgbToCmyk); // Convert Spot color to CMYK for print output // First define CMYK approximation for the spot color engine.editor.setSpotColorCMYK('Brand Red', 0.0, 0.85, 0.9, 0.05); const spotToCmyk = engine.editor.convertColorToColorSpace( spotColor, 'CMYK' ); console.log('Spot color converted to CMYK:', spotToCmyk); ``` When converting sRGB colors to CMYK, the alpha value becomes the tint value in the returned CMYK color. For spot colors, define a CMYK approximation with `setSpotColorCMYK()` before converting. > **Note:** Color space conversions may not be perfectly reversible. Some sRGB colors cannot be exactly represented in CMYK due to different color gamuts. ## Identifying Color Types Before converting a color, you may need to identify its current color space. CE.SDK provides type guard functions to check the color type. ```typescript highlight=highlight-type-guards // Use type guards to identify color space before conversion if (isRGBAColor(srgbColor)) { console.log( 'sRGB color components:', `R: ${srgbColor.r}, G: ${srgbColor.g}, B: ${srgbColor.b}, A: ${srgbColor.a}` ); } if (isCMYKColor(cmykColor)) { console.log( 'CMYK color components:', `C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}, Tint: ${cmykColor.tint}` ); } if (isSpotColor(spotColor)) { console.log('Spot color name:', spotColor.name, 'Tint:', spotColor.tint); } ``` Import the type guards from `@cesdk/cesdk-js`: - `isRGBAColor()` - Returns true if the color is an sRGB color - `isCMYKColor()` - Returns true if the color is a CMYK color - `isSpotColor()` - Returns true if the color is a spot color ## Handling Tint and Alpha The tint and alpha values represent transparency in different color spaces: | Source | Target | Transformation | |--------|--------|----------------| | sRGB (alpha) | CMYK | Alpha becomes tint | | CMYK (tint) | sRGB | Tint becomes alpha | | SpotColor (tint) | sRGB | Tint becomes alpha | | SpotColor (tint) | CMYK | Tint is preserved | ## Practical Use Cases ### Building a Color Picker When displaying a color value from a block in a custom color picker, convert to sRGB to show RGB values: ```typescript const fillColor = engine.block.getColor(fillId, 'fill/color/value'); const rgbaColor = engine.editor.convertColorToColorSpace(fillColor, 'sRGB'); // Display: R: ${rgbaColor.r * 255}, G: ${rgbaColor.g * 255}, B: ${rgbaColor.b * 255} ``` ### Export Preparation Before PDF export for print, verify colors are in CMYK format: ```typescript const color = engine.block.getColor(blockId, 'fill/color/value'); if (!isCMYKColor(color)) { const cmykColor = engine.editor.convertColorToColorSpace(color, 'CMYK'); // Log or display the CMYK values console.log(`C: ${cmykColor.c}, M: ${cmykColor.m}, Y: ${cmykColor.y}, K: ${cmykColor.k}`); } ``` ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Spot color converts to unexpected values | Spot color not defined | Call `setSpotColorRGB()` or `setSpotColorCMYK()` before conversion | | Colors look different after conversion | Color gamut differences | Some sRGB colors cannot be exactly represented in CMYK | | Type errors with converted colors | Wrong type assumption | Use type guards (`isRGBAColor`, `isCMYKColor`, `isSpotColor`) before accessing properties | ## API Reference | Method | Description | |--------|-------------| | `engine.editor.convertColorToColorSpace(color, colorSpace)` | Convert a color to the target color space. Returns an `RGBAColor` for 'sRGB' or `CMYKColor` for 'CMYK'. | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color with an RGB approximation. Components range from 0.0 to 1.0. | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define a spot color with a CMYK approximation. Components range from 0.0 to 1.0. | | Type Guard | Description | |------------|-------------| | `isRGBAColor(color)` | Returns true if the color is an `RGBAColor` object | | `isCMYKColor(color)` | Returns true if the color is a `CMYKColor` object | | `isSpotColor(color)` | Returns true if the color is a `SpotColor` object | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Color Palette" description: "Build reusable color palettes to maintain consistency and streamline user choices." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/create-color-palette-7012e0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Create a Color Palette](https://img.ly/docs/cesdk/sveltekit/colors/create-color-palette-7012e0/) --- Build custom color palettes that appear in the CE.SDK color picker using sRGB, CMYK, and Spot colors.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-create-color-palette-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-create-color-palette-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-create-color-palette-browser/) Color libraries in CE.SDK are implemented as asset sources containing individual colors as assets. Each library has a unique source ID and can include sRGB colors for screen display, CMYK colors for print workflows, and Spot colors for specialized printing applications. You configure which libraries appear in the color picker through the `'ly.img.colors'` asset library entry. ```typescript file=@cesdk_web_examples/guides-colors-create-color-palette-browser/browser.ts reference-only import type { AssetDefinition, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; // Define color assets for each color space type const colors: AssetDefinition[] = [ { id: 'brand-blue', label: { en: 'Brand Blue' }, tags: { en: ['brand', 'blue', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 } } }, { id: 'brand-coral', label: { en: 'Brand Coral' }, tags: { en: ['brand', 'coral', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.95, g: 0.45, b: 0.4 } } }, { id: 'print-magenta', label: { en: 'Print Magenta' }, tags: { en: ['print', 'magenta', 'cmyk'] }, payload: { color: { colorSpace: 'CMYK', c: 0, m: 0.9, y: 0.2, k: 0 } } }, { id: 'metallic-gold', label: { en: 'Metallic Gold' }, tags: { en: ['spot', 'metallic', 'gold'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Metallic Gold Ink', externalReference: 'Custom Inks', representation: { colorSpace: 'sRGB', r: 0.85, g: 0.65, b: 0.13 } } } } ]; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a local asset source and add each color const sourceId = 'my-brand-colors'; engine.asset.addLocalSource(sourceId); for (const color of colors) { await engine.asset.addAssetToSource(sourceId, color); } // Set labels for the color library using i18n cesdk.i18n.setTranslations({ en: { 'libraries.my-brand-colors.label': 'Brand Colors' } }); // Configure the color picker to show custom colors first, then defaults cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Configure the color picker to show custom colors alongside the defaults cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Set up the page with dimensions const page = engine.block.findByType('page')[0]; // Apply a soft cream background to the page fill // This complements the Brand Blue rectangle const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.98, g: 0.96, b: 0.92, a: 1.0 }); // Create a graphic block with Brand Blue from the custom palette const block = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( block, engine.block.createShape('//ly.img.ubq/shape/rect') ); const fill = engine.block.createFill('//ly.img.ubq/fill/color'); // Use Brand Blue from our custom palette engine.block.setColor(fill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(block, fill); engine.block.setWidth(block, 200); engine.block.setHeight(block, 200); // Center the block on the page const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setPositionX(block, (pageWidth - 200) / 2); engine.block.setPositionY(block, (pageHeight - 200) / 2); engine.block.appendChild(page, block); // Select the block and open the fill inspector to show the color picker engine.block.select(block); cesdk.ui.openPanel('//ly.img.panel/inspector/fill'); console.log('Create Color Palette example loaded successfully'); } } export default Example; ``` This guide covers how to define colors in different color spaces, create and configure color libraries, set custom labels, and control the display order in the color picker. ## Defining Color Assets Colors are added to libraries as `AssetDefinition` objects. Each color asset has an `id`, optional `label` and `tags` for display and search, and a `payload.color` property containing the color data. The color type determines which color space is used. ### sRGB Colors sRGB colors use the `AssetRGBColor` type with `colorSpace: 'sRGB'` and `r`, `g`, `b` components as floats from 0.0 to 1.0. Use sRGB colors for screen-based designs and web content. ```typescript highlight=highlight-definitions // Define color assets for each color space type const colors: AssetDefinition[] = [ { id: 'brand-blue', label: { en: 'Brand Blue' }, tags: { en: ['brand', 'blue', 'primary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 } } }, { id: 'brand-coral', label: { en: 'Brand Coral' }, tags: { en: ['brand', 'coral', 'secondary'] }, payload: { color: { colorSpace: 'sRGB', r: 0.95, g: 0.45, b: 0.4 } } }, { id: 'print-magenta', label: { en: 'Print Magenta' }, tags: { en: ['print', 'magenta', 'cmyk'] }, payload: { color: { colorSpace: 'CMYK', c: 0, m: 0.9, y: 0.2, k: 0 } } }, { id: 'metallic-gold', label: { en: 'Metallic Gold' }, tags: { en: ['spot', 'metallic', 'gold'] }, payload: { color: { colorSpace: 'SpotColor', name: 'Metallic Gold Ink', externalReference: 'Custom Inks', representation: { colorSpace: 'sRGB', r: 0.85, g: 0.65, b: 0.13 } } } } ]; ``` The example defines four colors demonstrating different color spaces. The first two colors—"Brand Blue" and "Brand Coral"—use sRGB for screen display. ### CMYK Colors CMYK colors use the `AssetCMYKColor` type with `colorSpace: 'CMYK'` and `c`, `m`, `y`, `k` components as floats from 0.0 to 1.0. Use CMYK colors for print workflows where color accuracy in printing is critical. The "Print Magenta" color in the example demonstrates the CMYK color space with cyan at 0, magenta at 0.9, yellow at 0.2, and black at 0. ### Spot Colors Spot colors use the `AssetSpotColor` type with `colorSpace: 'SpotColor'`, a `name` that identifies the spot color, an `externalReference` indicating the color book or ink system, and a `representation` using sRGB or CMYK for screen preview. The "Metallic Gold" color demonstrates the spot color format, using a custom ink reference with an sRGB representation for on-screen preview. ## Creating a Color Library We create a local asset source using `engine.asset.addLocalSource()` with a unique source ID. Then we add each color asset using `engine.asset.addAssetToSource()`. ```typescript highlight=highlight-add-library // Create a local asset source and add each color const sourceId = 'my-brand-colors'; engine.asset.addLocalSource(sourceId); for (const color of colors) { await engine.asset.addAssetToSource(sourceId, color); } ``` The source ID `'my-brand-colors'` identifies this library throughout the application. You can create multiple libraries with different source IDs to organize colors by purpose—for example, separate libraries for brand colors, print colors, and seasonal palettes. ## Configuring Library Labels We set display labels for color libraries using `cesdk.i18n.setTranslations()`. Labels use the pattern `libraries..label` where `` matches the ID used when creating the source. ```typescript highlight=highlight-config-labels // Set labels for the color library using i18n cesdk.i18n.setTranslations({ en: { 'libraries.my-brand-colors.label': 'Brand Colors' } }); ``` The label "Brand Colors" appears as the section header in the color picker. You can provide translations for multiple locales by adding additional language keys to the translations object. ## Configuring the Color Picker We control which libraries appear in the color picker and their display order using `cesdk.ui.updateAssetLibraryEntry()`. The `sourceIds` array determines both visibility and order—libraries appear in the picker in the same order as the array. ```typescript highlight=highlight-config-order // Configure the color picker to show custom colors first, then defaults cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ['my-brand-colors', 'ly.img.color.palette'] }); ``` The special source ID `'ly.img.color.palette'` represents CE.SDK's built-in default color palette. Include it in the array to show the default colors alongside your custom library. Remove it from the array to hide the default palette entirely. ## Removing Colors You can remove individual colors from a library using `engine.asset.removeAssetFromSource()` with the source ID and the color's asset ID. ```typescript engine.asset.removeAssetFromSource('my-brand-colors', 'brand-blue'); ``` This removes the color from the library immediately. The color picker updates to reflect the change the next time it renders. ## Troubleshooting ### Colors Not Appearing in Picker If your colors don't appear in the color picker: - Verify the source ID is included in the `sourceIds` array passed to `updateAssetLibraryEntry()` - Check that colors were added using `addAssetToSource()` with the correct source ID - Ensure the asset source was created with `addLocalSource()` before adding colors ### Label Not Showing If the library label doesn't appear: - Verify the translation key follows the `libraries..label` pattern exactly - Check that the source ID in the translation key matches the source ID used in `addLocalSource()` - Ensure `setTranslations()` was called before the color picker renders ### Spot Color Appears Incorrect If a spot color displays incorrectly: - Check that the `representation` property contains a valid sRGB or CMYK color for screen preview - Verify the `name` property is defined and not empty - Ensure the `colorSpace` is set to `'SpotColor'` ### Wrong Library Order The order of libraries in the color picker matches the order in the `sourceIds` array. To change the order: - Reorder the source IDs in the array passed to `updateAssetLibraryEntry()` - The first source ID appears at the top of the color picker ## API Reference | Method | Description | |--------|-------------| | `engine.asset.addLocalSource(sourceId)` | Create a local asset source for colors | | `engine.asset.addAssetToSource(sourceId, asset)` | Add a color asset to a source | | `engine.asset.removeAssetFromSource(sourceId, assetId)` | Remove a color asset from a source | | `cesdk.ui.updateAssetLibraryEntry(entryId, config)` | Configure color library display order | | `cesdk.i18n.setTranslations(translations)` | Set labels for color libraries | | Type | Properties | Description | |------|------------|-------------| | `AssetRGBColor` | `colorSpace`, `r`, `g`, `b` | sRGB color for screen display | | `AssetCMYKColor` | `colorSpace`, `c`, `m`, `y`, `k` | CMYK color for print workflows | | `AssetSpotColor` | `colorSpace`, `name`, `externalReference`, `representation` | Named spot color for specialized printing | | `AssetDefinition` | `id`, `label`, `tags`, `payload` | Color asset structure with metadata | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Print" description: "Use print-ready color models and settings for professional-quality, production-ready exports." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-print-59bc05/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/sveltekit/colors/for-print-59bc05/) --- --- ## Related Pages - [CMYK Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/) - Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control. - [Spot Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/) - Define, apply, and manage spot colors for professional print workflows with premixed inks. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "CMYK Colors" description: "Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/sveltekit/colors/for-print-59bc05/) > [CMYK Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/) --- Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-cmyk-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-cmyk-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-print-cmyk-browser/) CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard color model for print production. Unlike RGB which is additive and designed for screens, CMYK uses subtractive color mixing to represent how inks combine on paper. CE.SDK supports CMYK colors natively, allowing you to prepare designs for professional print output while maintaining accurate color representation. ```typescript file=@cesdk_web_examples/guides-colors-for-print-cmyk-browser/browser.ts reference-only import type { CMYKColor, EditorPlugin, EditorPluginContext, RGBAColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Type guard to check if a color is CMYK // Color can be RGBAColor, CMYKColor, or SpotColor const isCMYKColor = (color: unknown): color is CMYKColor => { return ( typeof color === 'object' && color !== null && 'c' in color && 'm' in color && 'y' in color && 'k' in color ); }; /** * CE.SDK Plugin: CMYK Colors Guide * * This example demonstrates: * - Creating CMYK color values for print workflows * - Applying CMYK colors to fills, strokes, and shadows * - Using the tint property for color intensity control * - Converting between RGB and CMYK color spaces * - Checking color types with type guards */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK convenience method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background to light gray for visibility (using CMYK) const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.04, tint: 1.0 }); // Helper function to create a graphic block with a color fill const createColorBlock = ( x: number, y: number, width: number, height: number, shape: 'rect' | 'ellipse' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const blockShape = engine.block.createShape(shape); engine.block.setShape(block, blockShape); engine.block.setWidth(block, width); engine.block.setHeight(block, height); engine.block.setPositionX(block, x); engine.block.setPositionY(block, y); engine.block.appendChild(page, block); const colorFill = engine.block.createFill('color'); engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Create CMYK color objects for print production // CMYK values range from 0.0 to 1.0 const cmykCyan: CMYKColor = { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykYellow: CMYKColor = { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykBlack: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 1.0, tint: 1.0 }; // Example 1: Apply CMYK Cyan to a fill const { fill: cyanFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(cyanFill, 'fill/color/value', cmykCyan); // Example 2: Apply CMYK Magenta to a fill const { fill: magentaFill } = createColorBlock(220, 50, 150, 150); engine.block.setColor(magentaFill, 'fill/color/value', cmykMagenta); // Example 3: Apply CMYK Yellow to a fill const { fill: yellowFill } = createColorBlock(390, 50, 150, 150); engine.block.setColor(yellowFill, 'fill/color/value', cmykYellow); // Example 4: Apply CMYK Black to a fill const { fill: blackFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor(blackFill, 'fill/color/value', cmykBlack); // Example 5: Use tint for partial color intensity // Tint of 0.5 gives 50% color intensity const cmykHalfMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 0.5 }; const { fill: tintedFill } = createColorBlock(50, 220, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', cmykHalfMagenta); // Example 6: Apply CMYK color to stroke const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 220, 220, 150, 150 ); // Set fill to white (using CMYK) engine.block.setColor(strokeBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }); // Enable stroke and set CMYK color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const cmykStrokeColor: CMYKColor = { c: 0.8, m: 0.2, y: 0.0, k: 0.1, tint: 1.0 }; engine.block.setColor(strokeBlock, 'stroke/color', cmykStrokeColor); // Example 7: Apply CMYK color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 390, 220, 150, 150 ); // Set fill to light gray (using CMYK) engine.block.setColor(shadowBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.05, tint: 1.0 }); // Enable drop shadow and set CMYK color engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const cmykShadowColor: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 0.6, tint: 0.8 }; engine.block.setColor(shadowBlock, 'dropShadow/color', cmykShadowColor); // Example 8: Read CMYK color from a block const { fill: readFill } = createColorBlock(560, 220, 150, 150, 'ellipse'); const cmykOrange: CMYKColor = { c: 0.0, m: 0.5, y: 1.0, k: 0.0, tint: 1.0 }; engine.block.setColor(readFill, 'fill/color/value', cmykOrange); // Retrieve and check the color const retrievedColor = engine.block.getColor(readFill, 'fill/color/value'); if (isCMYKColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `CMYK Color - C: ${retrievedColor.c}, M: ${retrievedColor.m}, Y: ${retrievedColor.y}, K: ${retrievedColor.k}, Tint: ${retrievedColor.tint}` ); } // Example 9: Convert RGB to CMYK const rgbBlue: RGBAColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const convertedCmyk = engine.editor.convertColorToColorSpace( rgbBlue, 'CMYK' ); const { fill: convertedFill } = createColorBlock(50, 390, 150, 150); engine.block.setColor(convertedFill, 'fill/color/value', convertedCmyk); // eslint-disable-next-line no-console console.log('RGB to CMYK conversion:', convertedCmyk); // Example 10: Convert CMYK to RGB (for demonstration) const cmykGreen: CMYKColor = { c: 0.7, m: 0.0, y: 1.0, k: 0.2, tint: 1.0 }; const convertedRgb = engine.editor.convertColorToColorSpace( cmykGreen, 'sRGB' ); // eslint-disable-next-line no-console console.log('CMYK to RGB conversion:', convertedRgb); // Display using original CMYK color const { fill: previewFill } = createColorBlock(220, 390, 150, 150); engine.block.setColor(previewFill, 'fill/color/value', cmykGreen); // Example 11: Use CMYK colors in gradients const gradientBlock = engine.block.create('graphic'); const gradientShape = engine.block.createShape('rect'); engine.block.setShape(gradientBlock, gradientShape); engine.block.setWidth(gradientBlock, 320); engine.block.setHeight(gradientBlock, 150); engine.block.setPositionX(gradientBlock, 390); engine.block.setPositionY(gradientBlock, 390); engine.block.appendChild(page, gradientBlock); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setFill(gradientBlock, gradientFill); // Set gradient stops with CMYK colors engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0.5 }, { color: { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to create CMYK color values, apply them to fills, strokes, and shadows, use the tint property for color intensity control, and convert between color spaces. ## Understanding CMYK Colors ### When to Use CMYK Use CMYK colors when preparing designs for commercial printing or when print service providers require CMYK values. Screen displays convert CMYK to RGB for preview, but exported PDFs retain the original CMYK values for accurate print reproduction. CMYK colors in CE.SDK have five properties: - `c` (Cyan): 0.0 to 1.0 - `m` (Magenta): 0.0 to 1.0 - `y` (Yellow): 0.0 to 1.0 - `k` (Key/Black): 0.0 to 1.0 - `tint`: 0.0 to 1.0 (controls overall color intensity) ## Creating CMYK Colors Create CMYK color objects using the `CMYKColor` interface. All component values range from 0.0 to 1.0: ```typescript highlight-create-cmyk // Create CMYK color objects for print production // CMYK values range from 0.0 to 1.0 const cmykCyan: CMYKColor = { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }; const cmykYellow: CMYKColor = { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }; const cmykBlack: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 1.0, tint: 1.0 }; ``` The tint property acts as a multiplier for the entire color—a tint of 1.0 applies the full color, while 0.5 applies 50% intensity. ## Applying CMYK Colors to Fills Apply CMYK colors to color fills using `engine.block.setColor()`. First create a color fill with `engine.block.createFill('color')`, then set its color value: ```typescript highlight-apply-fill // Example 1: Apply CMYK Cyan to a fill const { fill: cyanFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(cyanFill, 'fill/color/value', cmykCyan); ``` The same method works for any color type—RGBA, CMYK, or SpotColor. CE.SDK automatically handles the color representation internally. ## Using the Tint Property The tint property provides fine-grained control over color intensity without modifying the base CMYK values. This is useful for creating lighter variations of a color: ```typescript highlight-tint // Example 5: Use tint for partial color intensity // Tint of 0.5 gives 50% color intensity const cmykHalfMagenta: CMYKColor = { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 0.5 }; const { fill: tintedFill } = createColorBlock(50, 220, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', cmykHalfMagenta); ``` A tint of 0.5 creates a 50% lighter version of the color, useful for secondary elements or subtle backgrounds. ## Applying CMYK to Strokes Apply CMYK colors to strokes using the `stroke/color` property path: ```typescript highlight-stroke // Example 6: Apply CMYK color to stroke const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 220, 220, 150, 150 ); // Set fill to white (using CMYK) engine.block.setColor(strokeBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }); // Enable stroke and set CMYK color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const cmykStrokeColor: CMYKColor = { c: 0.8, m: 0.2, y: 0.0, k: 0.1, tint: 1.0 }; engine.block.setColor(strokeBlock, 'stroke/color', cmykStrokeColor); ``` Enable the stroke first with `setStrokeEnabled()`, set the stroke width, then apply the CMYK color. ## Applying CMYK to Drop Shadows Apply CMYK colors to drop shadows using the `dropShadow/color` property path: ```typescript highlight-shadow // Example 7: Apply CMYK color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 390, 220, 150, 150 ); // Set fill to light gray (using CMYK) engine.block.setColor(shadowBlockFill, 'fill/color/value', { c: 0.0, m: 0.0, y: 0.0, k: 0.05, tint: 1.0 }); // Enable drop shadow and set CMYK color engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const cmykShadowColor: CMYKColor = { c: 0.0, m: 0.0, y: 0.0, k: 0.6, tint: 0.8 }; engine.block.setColor(shadowBlock, 'dropShadow/color', cmykShadowColor); ``` Enable the drop shadow first, configure its offset and blur radius, then apply the CMYK color. ## Reading CMYK Colors Retrieve color values from blocks using `engine.block.getColor()`. The returned color could be RGBA, CMYK, or SpotColor, so use the `isCMYKColor()` type guard to check: ```typescript highlight-read-color // Example 8: Read CMYK color from a block const { fill: readFill } = createColorBlock(560, 220, 150, 150, 'ellipse'); const cmykOrange: CMYKColor = { c: 0.0, m: 0.5, y: 1.0, k: 0.0, tint: 1.0 }; engine.block.setColor(readFill, 'fill/color/value', cmykOrange); // Retrieve and check the color const retrievedColor = engine.block.getColor(readFill, 'fill/color/value'); if (isCMYKColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `CMYK Color - C: ${retrievedColor.c}, M: ${retrievedColor.m}, Y: ${retrievedColor.y}, K: ${retrievedColor.k}, Tint: ${retrievedColor.tint}` ); } ``` The `isCMYKColor()` type guard checks if a color has the CMYK properties (`c`, `m`, `y`, `k`). ## Converting Between Color Spaces Use `engine.editor.convertColorToColorSpace()` to convert colors between 'sRGB' and 'CMYK': ```typescript highlight-convert // Example 9: Convert RGB to CMYK const rgbBlue: RGBAColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const convertedCmyk = engine.editor.convertColorToColorSpace( rgbBlue, 'CMYK' ); const { fill: convertedFill } = createColorBlock(50, 390, 150, 150); engine.block.setColor(convertedFill, 'fill/color/value', convertedCmyk); // eslint-disable-next-line no-console console.log('RGB to CMYK conversion:', convertedCmyk); // Example 10: Convert CMYK to RGB (for demonstration) const cmykGreen: CMYKColor = { c: 0.7, m: 0.0, y: 1.0, k: 0.2, tint: 1.0 }; const convertedRgb = engine.editor.convertColorToColorSpace( cmykGreen, 'sRGB' ); // eslint-disable-next-line no-console console.log('CMYK to RGB conversion:', convertedRgb); // Display using original CMYK color const { fill: previewFill } = createColorBlock(220, 390, 150, 150); engine.block.setColor(previewFill, 'fill/color/value', cmykGreen); ``` Note that color conversions may not be perfectly reversible due to differences in color gamuts between RGB and CMYK. Some RGB colors cannot be accurately represented in CMYK and vice versa. ## Using CMYK in Gradients CMYK colors work in gradient color stops. Create a gradient fill and set stops using `engine.block.setGradientColorStops()`: ```typescript highlight-gradient // Example 11: Use CMYK colors in gradients const gradientBlock = engine.block.create('graphic'); const gradientShape = engine.block.createShape('rect'); engine.block.setShape(gradientBlock, gradientShape); engine.block.setWidth(gradientBlock, 320); engine.block.setHeight(gradientBlock, 150); engine.block.setPositionX(gradientBlock, 390); engine.block.setPositionY(gradientBlock, 390); engine.block.appendChild(page, gradientBlock); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setFill(gradientBlock, gradientFill); // Set gradient stops with CMYK colors engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { c: 1.0, m: 0.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 0.0, m: 1.0, y: 0.0, k: 0.0, tint: 1.0 }, stop: 0.5 }, { color: { c: 0.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); ``` This creates a gradient transitioning through the primary CMYK colors—cyan, magenta, and yellow. ## Troubleshooting ### Colors Look Different on Screen vs Print Screen displays convert CMYK to RGB for preview. The exported PDF retains original CMYK values. For accurate color preview, use calibrated monitors and proof prints. ### Tint Not Having Expected Effect Ensure the tint value is between 0 and 1. A tint of 0 makes the color fully transparent, while 1 applies full intensity. ### Type Guard Returns False Make sure you're checking a `Color` value returned from `engine.block.getColor()`. The `isCMYKColor()` function only works with color values, not arbitrary objects. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.setColor()` | Set a color property value | | `engine.block.getColor()` | Get a color property from a block | | `engine.editor.convertColorToColorSpace()` | Convert color to a different color space | | `engine.block.createFill()` | Create a color fill | | `engine.block.setFill()` | Assign a fill to a block | | `engine.block.getFill()` | Get the fill from a block | | `engine.block.setGradientColorStops()` | Set gradient color stops | | `isCMYKColor()` | Check if a color is CMYK | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Spot Colors" description: "Define, apply, and manage spot colors for professional print workflows with premixed inks." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Print](https://img.ly/docs/cesdk/sveltekit/colors/for-print-59bc05/) > [Spot Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/) --- Define and manage spot colors programmatically for professional print workflows with exact color matching through premixed inks.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-spot-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-print-spot-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-print-spot-browser/) Spot colors are named colors reproduced using premixed inks in print production, providing exact color matching that CMYK process colors cannot guarantee. CE.SDK maintains a registry of spot color definitions at the editor level, where each spot color has a name and screen approximations (RGB and/or CMYK) for display purposes. The actual premixed ink is used during printing based on the color name. ```typescript file=@cesdk_web_examples/guides-colors-for-print-spot-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, SpotColor } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Type guard to check if a color is a SpotColor // Color can be RGBAColor, CMYKColor, or SpotColor const isSpotColor = (color: unknown): color is SpotColor => { return ( typeof color === 'object' && color !== null && 'name' in color && 'tint' in color && 'externalReference' in color ); }; /** * CE.SDK Plugin: Spot Colors Guide * * This example demonstrates: * - Defining spot colors with RGB and CMYK approximations * - Applying spot colors to fills, strokes, and shadows * - Using tints for lighter color variations * - Querying and updating spot color definitions * - Removing spot colors and handling the magenta fallback * - Assigning spot colors to cutout types */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK convenience method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background to light gray for visibility const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Helper function to create a graphic block with a color fill const createColorBlock = ( x: number, y: number, width: number, height: number, shape: 'rect' | 'ellipse' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const blockShape = engine.block.createShape(shape); engine.block.setShape(block, blockShape); engine.block.setWidth(block, width); engine.block.setHeight(block, height); engine.block.setPositionX(block, x); engine.block.setPositionY(block, y); engine.block.appendChild(page, block); const colorFill = engine.block.createFill('color'); engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Define a spot color with RGB approximation // RGB values range from 0.0 to 1.0 engine.editor.setSpotColorRGB('Brand-Primary', 0.8, 0.1, 0.2); // Add CMYK approximation for the same spot color // This provides print-accurate preview in addition to screen display engine.editor.setSpotColorCMYK('Brand-Primary', 0.05, 0.95, 0.85, 0.0); // Define another spot color with both approximations engine.editor.setSpotColorRGB('Brand-Accent', 0.2, 0.4, 0.8); engine.editor.setSpotColorCMYK('Brand-Accent', 0.75, 0.5, 0.0, 0.0); // Apply spot colors to fills using SpotColor objects // The tint property (0.0 to 1.0) controls color intensity // The externalReference field stores metadata like color system origin const brandPrimary: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; // Create a block and apply the Brand-Primary spot color const { fill: primaryFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(primaryFill, 'fill/color/value', brandPrimary); // Apply Brand-Accent to another block const brandAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; const { fill: accentFill } = createColorBlock(220, 50, 150, 150); engine.block.setColor(accentFill, 'fill/color/value', brandAccent); // Use tints for lighter variations without defining new spot colors // Tint of 0.5 gives 50% color intensity const brandPrimaryHalfTint: SpotColor = { name: 'Brand-Primary', tint: 0.5, externalReference: '' }; const { fill: tintedFill } = createColorBlock(390, 50, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', brandPrimaryHalfTint); // Create a gradient of tints const brandAccentLightTint: SpotColor = { name: 'Brand-Accent', tint: 0.3, externalReference: '' }; const { fill: lightTintFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor( lightTintFill, 'fill/color/value', brandAccentLightTint ); // Apply spot colors to strokes and shadows const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 50, 220, 150, 150 ); // Set fill to white engine.block.setColor(strokeBlockFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Enable stroke and apply spot color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const strokeColor: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; engine.block.setColor(strokeBlock, 'stroke/color', strokeColor); // Apply spot color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 220, 220, 150, 150 ); engine.block.setColor(shadowBlockFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const shadowColor: SpotColor = { name: 'Brand-Accent', tint: 0.8, externalReference: '' }; engine.block.setColor(shadowBlock, 'dropShadow/color', shadowColor); // Query all defined spot colors const spotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Defined spot colors:', spotColors); // Query RGB approximation for a spot color const rgbaApprox = engine.editor.getSpotColorRGBA('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary RGB approximation:', rgbaApprox); // Query CMYK approximation for a spot color const cmykApprox = engine.editor.getSpotColorCMYK('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary CMYK approximation:', cmykApprox); // Read back the color from a block and check if it's a spot color const retrievedColor = engine.block.getColor( primaryFill, 'fill/color/value' ); if (isSpotColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `Retrieved SpotColor - Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}` ); } // Update an existing spot color's approximation // This changes how the color appears on screen without affecting the color name engine.editor.setSpotColorRGB('Brand-Accent', 0.3, 0.5, 0.9); // eslint-disable-next-line no-console console.log('Updated Brand-Accent RGB approximation'); // Show the updated color in a new block const { fill: updatedFill } = createColorBlock(390, 220, 150, 150); const updatedAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; engine.block.setColor(updatedFill, 'fill/color/value', updatedAccent); // Define a temporary spot color engine.editor.setSpotColorRGB('Temporary-Color', 0.5, 0.8, 0.3); // Create a block using the temporary color const { fill: tempFill } = createColorBlock(560, 220, 150, 150); const tempColor: SpotColor = { name: 'Temporary-Color', tint: 1.0, externalReference: '' }; engine.block.setColor(tempFill, 'fill/color/value', tempColor); // Remove the spot color definition // Blocks using this color will display magenta (default fallback) engine.editor.removeSpotColor('Temporary-Color'); // eslint-disable-next-line no-console console.log('Removed Temporary-Color - block now shows magenta fallback'); // Verify the color is no longer defined const remainingSpotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Remaining spot colors:', remainingSpotColors); // Assign spot colors to cutout types for die-cutting operations // First define a spot color for the die line engine.editor.setSpotColorRGB('DieLine', 1.0, 0.0, 1.0); engine.editor.setSpotColorCMYK('DieLine', 0.0, 1.0, 0.0, 0.0); // Associate the spot color with a cutout type // CutoutType can be 'Solid' or 'Dashed' engine.editor.setSpotColorForCutoutType('Solid', 'DieLine'); // Query the assigned spot color const cutoutSpotColor = engine.editor.getSpotColorForCutoutType('Solid'); // eslint-disable-next-line no-console console.log('Cutout type Solid uses spot color:', cutoutSpotColor); // Create a legend block with text const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'Spot Colors Demo'); engine.block.setTextFontSize(textBlock, 36); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 400); engine.block.appendChild(page, textBlock); // Create smaller label texts const labels = [ { text: 'Brand-Primary', x: 50, y: 205 }, { text: 'Brand-Accent', x: 220, y: 205 }, { text: 'Primary 50%', x: 390, y: 205 }, { text: 'Accent 30%', x: 560, y: 205 }, { text: 'Stroke', x: 50, y: 375 }, { text: 'Shadow', x: 220, y: 375 }, { text: 'Updated', x: 390, y: 375 }, { text: 'Removed', x: 560, y: 375 } ]; for (const label of labels) { const labelBlock = engine.block.create('text'); engine.block.replaceText(labelBlock, label.text); engine.block.setTextFontSize(labelBlock, 14); engine.block.setWidthMode(labelBlock, 'Auto'); engine.block.setHeightMode(labelBlock, 'Auto'); engine.block.setPositionX(labelBlock, label.x); engine.block.setPositionY(labelBlock, label.y); engine.block.appendChild(page, labelBlock); } // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to define spot colors with RGB and CMYK approximations, apply them to design elements with varying tints, query and update definitions, and assign spot colors to cutout types for die-cutting operations. ## Understanding Spot Colors Spot colors differ from CMYK process colors in several important ways: - **Exact color matching** - Premixed inks guarantee consistent color reproduction across print runs - **Brand consistency** - Essential for logos and brand colors (e.g., Pantone colors) - **Specialty effects** - Enable metallic, fluorescent, and other specialty inks - **Color gamut** - Some colors are unreproducible with CMYK process inks In CE.SDK, spot colors have three components: - **Name** - The identifier used in print output (e.g., "Pantone-485-C") - **Approximations** - RGB and/or CMYK values for screen display - **Tint** - A value from 0.0 to 1.0 controlling color intensity ## Define Spot Colors ### RGB Approximation We register spot colors using `engine.editor.setSpotColorRGB()`. This creates a new spot color if the name doesn't exist, or updates the approximation if it does. ```typescript highlight-define-spot-rgb // Define a spot color with RGB approximation // RGB values range from 0.0 to 1.0 engine.editor.setSpotColorRGB('Brand-Primary', 0.8, 0.1, 0.2); ``` RGB approximations display the spot color on screen during editing. The values range from 0.0 to 1.0 for each channel. ### CMYK Approximation We can add a CMYK approximation using `engine.editor.setSpotColorCMYK()`. This provides print-accurate previews alongside the RGB screen display. ```typescript highlight-define-spot-cmyk // Add CMYK approximation for the same spot color // This provides print-accurate preview in addition to screen display engine.editor.setSpotColorCMYK('Brand-Primary', 0.05, 0.95, 0.85, 0.0); // Define another spot color with both approximations engine.editor.setSpotColorRGB('Brand-Accent', 0.2, 0.4, 0.8); engine.editor.setSpotColorCMYK('Brand-Accent', 0.75, 0.5, 0.0, 0.0); ``` For best results, provide both RGB and CMYK approximations for each spot color. RGB displays on screen while CMYK enables accurate print preview. ## Apply Spot Colors to Design Elements We apply spot colors to blocks using `engine.block.setColor()` with a SpotColor object containing `name`, `tint`, and `externalReference`. ```typescript highlight-apply-spot-fill // Apply spot colors to fills using SpotColor objects // The tint property (0.0 to 1.0) controls color intensity // The externalReference field stores metadata like color system origin const brandPrimary: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; // Create a block and apply the Brand-Primary spot color const { fill: primaryFill } = createColorBlock(50, 50, 150, 150); engine.block.setColor(primaryFill, 'fill/color/value', brandPrimary); ``` The SpotColor object has these properties: - **name** - Must match a defined spot color exactly (case-sensitive) - **tint** - Controls intensity from 0.0 (transparent) to 1.0 (full strength) - **externalReference** - Optional metadata like the color system origin (e.g., "Pantone") > **Note:** The spot color must be defined before applying it to blocks. Undefined spot colors display as magenta—the default fallback color. ### Using Tints Tints create lighter variations without defining separate spot colors for each shade. A tint of 0.5 gives 50% color intensity. ```typescript highlight-tint // Use tints for lighter variations without defining new spot colors // Tint of 0.5 gives 50% color intensity const brandPrimaryHalfTint: SpotColor = { name: 'Brand-Primary', tint: 0.5, externalReference: '' }; const { fill: tintedFill } = createColorBlock(390, 50, 150, 150, 'ellipse'); engine.block.setColor(tintedFill, 'fill/color/value', brandPrimaryHalfTint); // Create a gradient of tints const brandAccentLightTint: SpotColor = { name: 'Brand-Accent', tint: 0.3, externalReference: '' }; const { fill: lightTintFill } = createColorBlock(560, 50, 150, 150); engine.block.setColor( lightTintFill, 'fill/color/value', brandAccentLightTint ); ``` Use tints for: - Color variations in design systems - Lighter backgrounds using brand colors - Gradient-like effects with consistent spot color names ### Strokes and Shadows Spot colors work with any color property, including strokes and drop shadows. ```typescript highlight-stroke-shadow // Apply spot colors to strokes and shadows const { block: strokeBlock, fill: strokeBlockFill } = createColorBlock( 50, 220, 150, 150 ); // Set fill to white engine.block.setColor(strokeBlockFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Enable stroke and apply spot color engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 8); const strokeColor: SpotColor = { name: 'Brand-Primary', tint: 1.0, externalReference: '' }; engine.block.setColor(strokeBlock, 'stroke/color', strokeColor); // Apply spot color to drop shadow const { block: shadowBlock, fill: shadowBlockFill } = createColorBlock( 220, 220, 150, 150 ); engine.block.setColor(shadowBlockFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowOffsetX(shadowBlock, 10); engine.block.setDropShadowOffsetY(shadowBlock, 10); engine.block.setDropShadowBlurRadiusX(shadowBlock, 15); engine.block.setDropShadowBlurRadiusY(shadowBlock, 15); const shadowColor: SpotColor = { name: 'Brand-Accent', tint: 0.8, externalReference: '' }; engine.block.setColor(shadowBlock, 'dropShadow/color', shadowColor); ``` The `stroke/color` and `dropShadow/color` properties accept the same SpotColor objects as fill colors. ## Query Spot Color Definitions ### List Defined Spot Colors We retrieve all defined spot colors with `engine.editor.findAllSpotColors()`. ```typescript highlight-query-spot // Query all defined spot colors const spotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Defined spot colors:', spotColors); // Query RGB approximation for a spot color const rgbaApprox = engine.editor.getSpotColorRGBA('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary RGB approximation:', rgbaApprox); // Query CMYK approximation for a spot color const cmykApprox = engine.editor.getSpotColorCMYK('Brand-Primary'); // eslint-disable-next-line no-console console.log('Brand-Primary CMYK approximation:', cmykApprox); // Read back the color from a block and check if it's a spot color const retrievedColor = engine.block.getColor( primaryFill, 'fill/color/value' ); if (isSpotColor(retrievedColor)) { // eslint-disable-next-line no-console console.log( `Retrieved SpotColor - Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}` ); } ``` This returns an array of spot color names currently registered in the editor. ### Get Color Approximations Query individual color approximations with `engine.editor.getSpotColorRGBA()` or `engine.editor.getSpotColorCMYK()`. Querying an undefined spot color returns magenta values—use this to detect missing definitions. ### Read Colors from Blocks When reading a color back from a block, `engine.block.getColor()` can return an `RGBAColor`, `CMYKColor`, or `SpotColor`. Use a type guard to check if it's a SpotColor: ```typescript const isSpotColor = (color: unknown): color is SpotColor => { return ( typeof color === 'object' && color !== null && 'name' in color && 'tint' in color && 'externalReference' in color ); }; const retrievedColor = engine.block.getColor(fill, 'fill/color/value'); if (isSpotColor(retrievedColor)) { console.log(`Name: ${retrievedColor.name}, Tint: ${retrievedColor.tint}`); } ``` ## Update and Remove Spot Colors ### Update Approximations We update spot colors by calling the set methods again with the same name. This changes how the color appears on screen without affecting the color name in the print output. ```typescript highlight-update-spot // Update an existing spot color's approximation // This changes how the color appears on screen without affecting the color name engine.editor.setSpotColorRGB('Brand-Accent', 0.3, 0.5, 0.9); // eslint-disable-next-line no-console console.log('Updated Brand-Accent RGB approximation'); // Show the updated color in a new block const { fill: updatedFill } = createColorBlock(390, 220, 150, 150); const updatedAccent: SpotColor = { name: 'Brand-Accent', tint: 1.0, externalReference: '' }; engine.block.setColor(updatedFill, 'fill/color/value', updatedAccent); ``` Existing blocks using that spot color automatically reflect the updated approximation. ### Remove Spot Colors We remove spot colors with `engine.editor.removeSpotColor()` when they're no longer needed. ```typescript highlight-remove-spot // Define a temporary spot color engine.editor.setSpotColorRGB('Temporary-Color', 0.5, 0.8, 0.3); // Create a block using the temporary color const { fill: tempFill } = createColorBlock(560, 220, 150, 150); const tempColor: SpotColor = { name: 'Temporary-Color', tint: 1.0, externalReference: '' }; engine.block.setColor(tempFill, 'fill/color/value', tempColor); // Remove the spot color definition // Blocks using this color will display magenta (default fallback) engine.editor.removeSpotColor('Temporary-Color'); // eslint-disable-next-line no-console console.log('Removed Temporary-Color - block now shows magenta fallback'); // Verify the color is no longer defined const remainingSpotColors = engine.editor.findAllSpotColors(); // eslint-disable-next-line no-console console.log('Remaining spot colors:', remainingSpotColors); ``` Removing a spot color doesn't affect blocks already using it—they display magenta until redefined or until you apply a different color. ## Spot Colors for Cutouts CE.SDK supports assigning spot colors to cutout types for die-cutting, embossing, and other print finishing operations. ```typescript highlight-cutout // Assign spot colors to cutout types for die-cutting operations // First define a spot color for the die line engine.editor.setSpotColorRGB('DieLine', 1.0, 0.0, 1.0); engine.editor.setSpotColorCMYK('DieLine', 0.0, 1.0, 0.0, 0.0); // Associate the spot color with a cutout type // CutoutType can be 'Solid' or 'Dashed' engine.editor.setSpotColorForCutoutType('Solid', 'DieLine'); // Query the assigned spot color const cutoutSpotColor = engine.editor.getSpotColorForCutoutType('Solid'); // eslint-disable-next-line no-console console.log('Cutout type Solid uses spot color:', cutoutSpotColor); ``` Use `engine.editor.setSpotColorForCutoutType()` to associate a spot color with a specific cutout type. Available cutout types are `'Solid'` and `'Dashed'`, representing different die-line styles used in print finishing. All cutout blocks of that type automatically use the assigned spot color in the output. Query the assignment with `engine.editor.getSpotColorForCutoutType()`. ## Best Practices **Define early** - Register spot colors at initialization before applying them to blocks. Undefined colors display as magenta, which can confuse users. **Use descriptive names** - Match your print vendor's reference (e.g., "Pantone-485-C") to ensure correct ink matching in production. **Provide both approximations** - RGB for screen display, CMYK for print-accurate previews. This gives designers the best experience across different workflows. **Use tints sparingly** - Prefer tints (0.0-1.0) for lighter variations rather than defining separate spot colors for each shade. This keeps your spot color list manageable. **Validate before export** - Query `findAllSpotColors()` to verify all expected spot colors are defined before exporting for print. ## Troubleshooting ### Spot Color Displays as Magenta The spot color hasn't been defined. Call `setSpotColorRGB()` or `setSpotColorCMYK()` with the color name before applying it to blocks. ### Color Approximation Looks Wrong Update the approximation values using `setSpotColorRGB()` or `setSpotColorCMYK()`. Remember that RGB values are for screen display while CMYK values are for print preview. ### Spot Color Not in Output Verify the spot color name matches exactly (names are case-sensitive). Check that the block is using a SpotColor object, not an RGB or CMYK color value. ### Can't Remove Spot Color Ensure you're using the exact name string. Note that removing a spot color doesn't update existing blocks—they'll show magenta until redefined or replaced with a different color. ## API Reference | Method | Description | | ------------------------------------------------- | ------------------------------------------------ | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define/update spot color with RGB approximation | | `engine.editor.setSpotColorCMYK(name, c, m, y, k)` | Define/update spot color with CMYK approximation | | `engine.editor.findAllSpotColors()` | Get array of all defined spot color names | | `engine.editor.getSpotColorRGBA(name)` | Query RGB approximation for a spot color | | `engine.editor.getSpotColorCMYK(name)` | Query CMYK approximation for a spot color | | `engine.editor.removeSpotColor(name)` | Remove a spot color from the registry | | `engine.editor.setSpotColorForCutoutType(type, color)` | Assign spot color to a cutout type | | `engine.editor.getSpotColorForCutoutType(type)` | Get spot color assigned to a cutout type | | `engine.block.setColor(block, property, color)` | Apply color (including SpotColor) to a property | | `engine.block.getColor(block, property)` | Read color from a block property | ## Next Steps - [Export for Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/) - Export designs with spot colors for professional print production - [Apply Colors](https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/) - Apply colors to fills, strokes, and shadows - [CMYK Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/) - Work with CMYK process colors --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Screen" description: "Documentation for For Screen" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-screen-1911f8/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/sveltekit/colors/for-screen-1911f8/) --- --- ## Related Pages - [sRGB Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/srgb-e6f59b/) - Work with sRGB colors for screen-based designs including creating RGBA colors, applying them to design elements, and converting from other color spaces. - [P3 Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/p3-706127/) - Understand the P3 wide color gamut, its platform availability in CE.SDK, and alternatives for Web development. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "P3 Colors" description: "Understand the P3 wide color gamut, its platform availability in CE.SDK, and alternatives for Web development." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-screen/p3-706127/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/sveltekit/colors/for-screen-1911f8/) > [P3 Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/p3-706127/) --- Understand the P3 wide color gamut and its availability across CE.SDK platforms. > **Not Available on Web:** P3 colors are not currently supported on Web platforms. Use [sRGB colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/srgb-e6f59b/) instead. P3 enables more vibrant reds, greens, and other colors beyond the standard sRGB gamut. This is valuable for displays that support the DCI-P3 color space, including modern Apple devices and high-end monitors. ## What is P3? The DCI-P3 color space was developed for digital cinema and has been widely adopted in consumer displays, particularly by Apple since 2016. P3 covers roughly 25% more visible colors than sRGB, especially in the red, orange, and green-cyan regions. Key differences from sRGB: - **Gamut size**: P3 encompasses a larger color range - **Primary colors**: P3 red and green are more saturated - **Backwards compatibility**: P3 content on sRGB displays is automatically converted P3 colors only appear more vibrant on P3-capable displays. On sRGB displays, colors are converted and may appear less saturated. ## Platform Support **Supported platforms:** - **Android**: `supportsP3()` and `checkP3Support()` APIs - **iOS/Swift**: `supportsP3()` and `checkP3Support()` APIs **Not supported:** - Browser - Server (Node.js) On Web platforms, CE.SDK uses sRGB as the working color space. The Web binding supports sRGB, CMYK, and Spot Colors. ## P3 vs sRGB: When to Use Each | Use Case | Recommended | | --- | --- | | Native mobile apps (Apple devices) | P3 | | Photo/video editing with color accuracy | P3 | | Web applications | sRGB | | Cross-platform consistency | sRGB | ## Next Steps - [sRGB Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/srgb-e6f59b/) — Apply sRGB colors for screen output - [Color Conversion](https://img.ly/docs/cesdk/sveltekit/colors/conversion-bcd82b/) — Convert between color spaces --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "sRGB Colors" description: "Work with sRGB colors for screen-based designs including creating RGBA colors, applying them to design elements, and converting from other color spaces." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/for-screen/srgb-e6f59b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [For Screen](https://img.ly/docs/cesdk/sveltekit/colors/for-screen-1911f8/) > [sRGB Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-screen/srgb-e6f59b/) --- Apply sRGB colors to design elements for screen-based output using RGBA color values with red, green, blue, and alpha components.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-screen-srgb-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-screen-srgb-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-screen-srgb-browser/) sRGB is the standard color space for screen displays. CE.SDK represents sRGB colors as RGBA objects where each component (red, green, blue, alpha) uses floating-point values between 0.0 and 1.0. This differs from the traditional 0-255 integer range used in many design tools. ```typescript file=@cesdk_web_examples/guides-colors-for-screen-srgb-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { isRGBAColor } from '@cesdk/engine'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: sRGB Colors Guide * * This example demonstrates: * - Creating sRGB/RGBA colors * - Applying sRGB colors to fills, strokes, and shadows * - Retrieving colors from design elements * - Converting colors to sRGB * - Working with alpha transparency * - Using type guards to identify RGBA colors */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Create RGBA color objects for sRGB color space // Values are floating-point numbers between 0.0 and 1.0 const blueColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const redColor = { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }; const greenColor = { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }; // Create semi-transparent colors using the alpha channel // Alpha of 0.5 means 50% opacity const semiTransparentPurple = { r: 0.6, g: 0.2, b: 0.8, a: 0.5 }; const semiTransparentOrange = { r: 1.0, g: 0.5, b: 0.0, a: 0.7 }; // Create blocks to demonstrate color application const block1 = engine.block.create('graphic'); engine.block.setShape(block1, engine.block.createShape('rect')); engine.block.setWidth(block1, 150); engine.block.setHeight(block1, 150); engine.block.setPositionX(block1, 50); engine.block.setPositionY(block1, 50); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); engine.block.setShape(block2, engine.block.createShape('ellipse')); engine.block.setWidth(block2, 150); engine.block.setHeight(block2, 150); engine.block.setPositionX(block2, 250); engine.block.setPositionY(block2, 50); engine.block.appendChild(page, block2); const block3 = engine.block.create('graphic'); engine.block.setShape(block3, engine.block.createShape('rect')); engine.block.setWidth(block3, 150); engine.block.setHeight(block3, 150); engine.block.setPositionX(block3, 450); engine.block.setPositionY(block3, 50); engine.block.appendChild(page, block3); // Apply sRGB colors to block fills // First create a color fill, then set its color value const fill1 = engine.block.createFill('color'); engine.block.setFill(block1, fill1); engine.block.setColor(fill1, 'fill/color/value', blueColor); const fill2 = engine.block.createFill('color'); engine.block.setFill(block2, fill2); engine.block.setColor(fill2, 'fill/color/value', redColor); const fill3 = engine.block.createFill('color'); engine.block.setFill(block3, fill3); engine.block.setColor(fill3, 'fill/color/value', greenColor); // Create blocks for stroke demonstration const strokeBlock = engine.block.create('graphic'); engine.block.setShape(strokeBlock, engine.block.createShape('rect')); engine.block.setWidth(strokeBlock, 150); engine.block.setHeight(strokeBlock, 150); engine.block.setPositionX(strokeBlock, 50); engine.block.setPositionY(strokeBlock, 250); engine.block.appendChild(page, strokeBlock); const strokeFill = engine.block.createFill('color'); engine.block.setFill(strokeBlock, strokeFill); engine.block.setColor(strokeFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Apply sRGB color to stroke engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 5); engine.block.setColor(strokeBlock, 'stroke/color', { r: 0.1, g: 0.1, b: 0.5, a: 1.0 }); // Create block for drop shadow demonstration const shadowBlock = engine.block.create('graphic'); engine.block.setShape(shadowBlock, engine.block.createShape('rect')); engine.block.setWidth(shadowBlock, 150); engine.block.setHeight(shadowBlock, 150); engine.block.setPositionX(shadowBlock, 250); engine.block.setPositionY(shadowBlock, 250); engine.block.appendChild(page, shadowBlock); const shadowFill = engine.block.createFill('color'); engine.block.setFill(shadowBlock, shadowFill); engine.block.setColor(shadowFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Apply sRGB color to drop shadow engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowBlurRadiusX(shadowBlock, 10); engine.block.setDropShadowBlurRadiusY(shadowBlock, 10); engine.block.setDropShadowOffsetX(shadowBlock, 5); engine.block.setDropShadowOffsetY(shadowBlock, 5); engine.block.setColor(shadowBlock, 'dropShadow/color', { r: 0.0, g: 0.0, b: 0.0, a: 0.4 }); // Create blocks for transparency demonstration const transparentBlock1 = engine.block.create('graphic'); engine.block.setShape(transparentBlock1, engine.block.createShape('rect')); engine.block.setWidth(transparentBlock1, 150); engine.block.setHeight(transparentBlock1, 150); engine.block.setPositionX(transparentBlock1, 450); engine.block.setPositionY(transparentBlock1, 250); engine.block.appendChild(page, transparentBlock1); const transparentFill1 = engine.block.createFill('color'); engine.block.setFill(transparentBlock1, transparentFill1); engine.block.setColor( transparentFill1, 'fill/color/value', semiTransparentPurple ); // Overlapping block to show transparency const transparentBlock2 = engine.block.create('graphic'); engine.block.setShape( transparentBlock2, engine.block.createShape('ellipse') ); engine.block.setWidth(transparentBlock2, 150); engine.block.setHeight(transparentBlock2, 150); engine.block.setPositionX(transparentBlock2, 500); engine.block.setPositionY(transparentBlock2, 300); engine.block.appendChild(page, transparentBlock2); const transparentFill2 = engine.block.createFill('color'); engine.block.setFill(transparentBlock2, transparentFill2); engine.block.setColor( transparentFill2, 'fill/color/value', semiTransparentOrange ); // Retrieve the current color from a design element const currentColor = engine.block.getColor(fill1, 'fill/color/value'); console.log('Current color:', currentColor); // Use type guard to check if color is RGBA (sRGB) if (isRGBAColor(currentColor)) { console.log('Color is sRGB/RGBA'); console.log('Red:', currentColor.r); console.log('Green:', currentColor.g); console.log('Blue:', currentColor.b); console.log('Alpha:', currentColor.a); } // Convert a CMYK color to sRGB const cmykColor = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const convertedToSrgb = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('Converted to sRGB:', convertedToSrgb); // Zoom to fit content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers creating RGBA color objects, applying them to fills, strokes, and shadows, retrieving colors from elements, converting colors to sRGB, and working with transparency. ## Using the Built-in Color Picker UI The built-in color picker allows users to select sRGB colors visually. Users can pick colors from a gradient, enter hex values, or adjust RGB sliders. The color picker automatically handles value conversion between hex and floating-point formats. The UI includes: - Color picker gradient and hue slider - Hex value input field - RGB component sliders - Opacity/alpha slider for transparency control ## Creating sRGB Colors Programmatically We first set up a design scene and get a reference to the page. ```typescript highlight=highlight-setup // Create a design scene using CE.SDK await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } ``` We create RGBA color objects by specifying r, g, b, and a properties. All four components are required and use values from 0.0 to 1.0. ```typescript highlight=highlight-create-rgba // Create RGBA color objects for sRGB color space // Values are floating-point numbers between 0.0 and 1.0 const blueColor = { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }; const redColor = { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }; const greenColor = { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }; ``` The alpha channel controls transparency. A value of 1.0 is fully opaque, while 0.0 is fully transparent. ```typescript highlight=highlight-create-transparent // Create semi-transparent colors using the alpha channel // Alpha of 0.5 means 50% opacity const semiTransparentPurple = { r: 0.6, g: 0.2, b: 0.8, a: 0.5 }; const semiTransparentOrange = { r: 1.0, g: 0.5, b: 0.0, a: 0.7 }; ``` ## Applying sRGB Colors to Fills We use `engine.block.setColor()` to apply colors to block properties. For fills, we first create a color fill and then set its color value. ```typescript highlight=highlight-apply-fill // Apply sRGB colors to block fills // First create a color fill, then set its color value const fill1 = engine.block.createFill('color'); engine.block.setFill(block1, fill1); engine.block.setColor(fill1, 'fill/color/value', blueColor); const fill2 = engine.block.createFill('color'); engine.block.setFill(block2, fill2); engine.block.setColor(fill2, 'fill/color/value', redColor); const fill3 = engine.block.createFill('color'); engine.block.setFill(block3, fill3); engine.block.setColor(fill3, 'fill/color/value', greenColor); ``` ## Applying sRGB Colors to Strokes We can apply sRGB colors to strokes using the `'stroke/color'` property path. ```typescript highlight=highlight-apply-stroke // Apply sRGB color to stroke engine.block.setStrokeEnabled(strokeBlock, true); engine.block.setStrokeWidth(strokeBlock, 5); engine.block.setColor(strokeBlock, 'stroke/color', { r: 0.1, g: 0.1, b: 0.5, a: 1.0 }); ``` ## Applying sRGB Colors to Shadows Drop shadows also support sRGB colors. We use the `'dropShadow/color'` property path. A semi-transparent black creates a natural shadow effect. ```typescript highlight=highlight-apply-shadow // Apply sRGB color to drop shadow engine.block.setDropShadowEnabled(shadowBlock, true); engine.block.setDropShadowBlurRadiusX(shadowBlock, 10); engine.block.setDropShadowBlurRadiusY(shadowBlock, 10); engine.block.setDropShadowOffsetX(shadowBlock, 5); engine.block.setDropShadowOffsetY(shadowBlock, 5); engine.block.setColor(shadowBlock, 'dropShadow/color', { r: 0.0, g: 0.0, b: 0.0, a: 0.4 }); ``` ## Retrieving Colors from Elements We use `engine.block.getColor()` to read the current color from a design element. The returned color could be RGBA, CMYK, or a spot color depending on what was set. ```typescript highlight=highlight-get-color // Retrieve the current color from a design element const currentColor = engine.block.getColor(fill1, 'fill/color/value'); console.log('Current color:', currentColor); ``` ## Identifying sRGB Colors We use the `isRGBAColor()` type guard to check if a color is sRGB. This is useful when working with colors that could be from any supported color space. ```typescript highlight=highlight-identify-rgba // Use type guard to check if color is RGBA (sRGB) if (isRGBAColor(currentColor)) { console.log('Color is sRGB/RGBA'); console.log('Red:', currentColor.r); console.log('Green:', currentColor.g); console.log('Blue:', currentColor.b); console.log('Alpha:', currentColor.a); } ``` ## Converting Colors to sRGB We use `engine.editor.convertColorToColorSpace()` to convert CMYK or spot colors to sRGB for screen display. ```typescript highlight=highlight-convert-to-srgb // Convert a CMYK color to sRGB const cmykColor = { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }; const convertedToSrgb = engine.editor.convertColorToColorSpace( cmykColor, 'sRGB' ); console.log('Converted to sRGB:', convertedToSrgb); ``` ## API Reference | Method | Description | | ---------------------------------------- | ---------------------------------------------- | | `createFill('color')` | Create a new color fill object | | `setFill(block, fill)` | Assign fill to a block | | `setColor(block, property, color)` | Set color value (RGBA) | | `getColor(block, property)` | Get current color value | | `setStrokeEnabled(block, enabled)` | Enable or disable stroke rendering | | `setStrokeWidth(block, width)` | Set stroke width | | `setDropShadowEnabled(block, enabled)` | Enable or disable drop shadow | | `convertColorToColorSpace(color, space)` | Convert color to specified color space | | `isRGBAColor(color)` | Type guard to check if color is RGBA | ## Troubleshooting **Colors appear incorrect:** Verify values are in the 0.0-1.0 range, not 0-255. A value of 255 would be clamped to 1.0. **Color not visible:** Check that the alpha value is not 0.0 and that the fill or stroke is enabled on the block. **Type errors:** Ensure all four components (r, g, b, a) are provided for RGBA colors. Omitting alpha will cause validation errors. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Manage color usage in your designs, from applying brand palettes to handling print and screen formats." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/overview-16a177/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Overview](https://img.ly/docs/cesdk/sveltekit/colors/overview-16a177/) --- Colors are a fundamental part of design in the CreativeEditor SDK (CE.SDK). Whether you're designing for digital screens or printed materials, consistent color management ensures your creations look the way you intend. CE.SDK offers flexible tools for working with colors through both the user interface and programmatically, making it easy to manage color workflows at any scale. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Replace Individual Colors" description: "Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects to swap colors or remove backgrounds." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/colors/replace-48cd71/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) > [Replace Individual Colors](https://img.ly/docs/cesdk/sveltekit/colors/replace-48cd71/) --- Selectively replace specific colors in images using CE.SDK's Recolor and Green Screen effects.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-replace-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-replace-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-replace-browser/) CE.SDK provides two specialized effects for color replacement: the **Recolor** effect swaps pixels matching a source color with a target color, while the **Green Screen** effect removes pixels matching a specified color to create transparency. Both effects use configurable tolerance parameters to control which pixels are affected, enabling use cases from product color variations to background removal. ```typescript file=@cesdk_web_examples/guides-colors-replace-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Replace Colors Guide * * Demonstrates color replacement using Recolor and Green Screen effects: * - Using the built-in effects UI * - Creating and applying Recolor effects * - Creating and applying Green Screen effects * - Configuring effect properties * - Managing multiple effects */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Calculate responsive grid layout for 6 examples const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Use sample images for demonstrations const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // Create a Recolor effect to swap red colors to blue const block1 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); // Red source color engine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0 }); // Blue target color engine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panel engine.block.setSelected(block1, true); // Configure color matching precision for Recolor effect const block2 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0 }); // Skin tone source engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0 }); // Green tint // Adjust color match tolerance (0-1, higher = more inclusive) engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3); // Adjust brightness match tolerance engine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2 ); // Adjust edge smoothness engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1); engine.block.appendEffect(block2, recolorEffect2); // Create a Green Screen effect to remove green backgrounds const block3 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen'); // Specify the color to remove (green) engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.appendEffect(block3, greenScreenEffect); // Fine-tune Green Screen removal parameters const block4 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen'); engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }); // Specific green shade // Adjust color match tolerance engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4 ); // Adjust edge smoothness for cleaner removal engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2 ); // Reduce color spill from green background engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5); engine.block.appendEffect(block4, greenScreenEffect2); // Demonstrate managing multiple effects on a block const block5 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block5); // Add multiple effects to the same block const recolor1 = engine.block.createEffect('recolor'); engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor'); engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); engine.block.appendEffect(block5, recolor2); // Get all effects on the block const effects = engine.block.getEffects(block5); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing it engine.block.setEffectEnabled(effects[0], false); // Check if effect is enabled const isEnabled = engine.block.isEffectEnabled(effects[0]); // eslint-disable-next-line no-console console.log('First effect enabled:', isEnabled); // false // Apply consistent color replacement across multiple blocks const block6 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block6); // Find all image blocks in the scene const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); // Apply a consistent recolor effect to each block allBlocks.forEach((blockId) => { // Skip if block already has effects if (engine.block.getEffects(blockId).length > 0) { return; } const batchRecolor = engine.block.createEffect('recolor'); engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', { r: 0.8, g: 0.7, b: 0.6, a: 1.0 }); engine.block.setColor(batchRecolor, 'effect/recolor/toColor', { r: 0.6, g: 0.7, b: 0.9, a: 1.0 }); engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25); engine.block.appendEffect(blockId, batchRecolor); }); // Position all blocks in a grid layout const blocks = [block1, block2, block3, block4, block5, block6]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to show all blocks engine.block.setSelected(block1, true); cesdk.engine.scene.zoomToBlock(page); } } export default Example; ``` This guide covers how to enable the built-in effects panel for interactive editing and how to apply and manage color replacement effects programmatically using the Block API. ## Using the Built-in Effects UI The CE.SDK editor provides a visual effects panel where users can add and configure Recolor and Green Screen effects interactively. Enable the effects feature using the Feature API, then users can access effects through the inspector panel. To enable effects in your editor configuration: ```typescript highlight=highlight-enable-effects-panel // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); ``` With effects enabled, users can: - Select an image block and open the effects panel - Add Recolor or Green Screen effects from the available options - Use visual color pickers to select source and target colors - Adjust tolerance sliders for color match, brightness match, and smoothness - See changes applied in real-time on the canvas ## Programmatic Color Replacement For automation workflows or custom implementations, you can create and apply color replacement effects programmatically using the Block API. Effects are created as blocks, configured with properties, and appended to target blocks. ### Creating a Recolor Effect The Recolor effect replaces pixels matching a source color with a target color. Use `engine.block.createEffect('recolor')` to create the effect, then set the `fromColor` and `toColor` properties using `engine.block.setColor()`. ```typescript highlight=highlight-create-recolor-effect // Create a Recolor effect to swap red colors to blue const block1 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); // Red source color engine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0 }); // Blue target color engine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panel engine.block.setSelected(block1, true); ``` The `fromColor` specifies which color to match in the image, and `toColor` defines the replacement color. Colors use RGBA format with values from 0 to 1. ### Configuring Color Matching Precision Fine-tune which pixels are affected by adjusting the tolerance parameters with `engine.block.setFloat()`: ```typescript highlight=highlight-configure-recolor-matching // Configure color matching precision for Recolor effect const block2 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0 }); // Skin tone source engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0 }); // Green tint // Adjust color match tolerance (0-1, higher = more inclusive) engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3); // Adjust brightness match tolerance engine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2 ); // Adjust edge smoothness engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1); engine.block.appendEffect(block2, recolorEffect2); ``` The Recolor effect has three precision parameters: - **colorMatch** (0-1): Controls hue tolerance. Higher values include more color variations around the source color. - **brightnessMatch** (0-1): Controls luminance tolerance. Higher values include pixels with different brightness levels. - **smoothness** (0-1): Controls edge blending. Higher values create softer transitions at the boundaries of affected areas. ### Creating a Green Screen Effect The Green Screen effect removes pixels matching a specified color, making them transparent. This is commonly used for background removal. ```typescript highlight=highlight-create-green-screen-effect // Create a Green Screen effect to remove green backgrounds const block3 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen'); // Specify the color to remove (green) engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.appendEffect(block3, greenScreenEffect); ``` Set the `fromColor` property to specify which color to remove. The effect will make matching pixels transparent. ### Configuring Green Screen Parameters Control the precision of color removal using these parameters: ```typescript highlight=highlight-configure-green-screen // Fine-tune Green Screen removal parameters const block4 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen'); engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }); // Specific green shade // Adjust color match tolerance engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4 ); // Adjust edge smoothness for cleaner removal engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2 ); // Reduce color spill from green background engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5); engine.block.appendEffect(block4, greenScreenEffect2); ``` The Green Screen effect parameters: - **colorMatch**: Tolerance for matching the background color - **smoothness**: Edge softness for cleaner cutouts around subjects - **spill**: Reduces color bleed from the removed background onto the subject, useful when the background color reflects onto edges ## Managing Multiple Effects A single block can have multiple effects applied. Use the effect management APIs to list, toggle, and remove effects. ```typescript highlight=highlight-manage-effects // Demonstrate managing multiple effects on a block const block5 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block5); // Add multiple effects to the same block const recolor1 = engine.block.createEffect('recolor'); engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor'); engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); engine.block.appendEffect(block5, recolor2); // Get all effects on the block const effects = engine.block.getEffects(block5); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing it engine.block.setEffectEnabled(effects[0], false); // Check if effect is enabled const isEnabled = engine.block.isEffectEnabled(effects[0]); // eslint-disable-next-line no-console console.log('First effect enabled:', isEnabled); // false ``` Key effect management methods: - `engine.block.getEffects(blockId)`: Returns an array of all effect IDs attached to a block - `engine.block.setEffectEnabled(effectId, enabled)`: Toggle an effect on/off without removing it - `engine.block.isEffectEnabled(effectId)`: Check whether an effect is currently active - `engine.block.removeEffect(blockId, index)`: Remove an effect by its index in the effects array Stacking multiple Recolor effects enables complex color transformations, such as replacing multiple colors in a single image or creating variations. ## Troubleshooting **Colors not matching as expected**: Increase the `colorMatch` tolerance for broader selection, or decrease it for more precise matching. Check that your source color closely matches the actual color in the image. **Harsh edges around replaced areas**: Increase the `smoothness` value to create softer transitions at the boundaries of affected pixels. **Color spill on Green Screen subjects**: Increase the `spill` value to reduce the green tint that often appears on edges when removing green backgrounds. **Effect not visible**: Verify that the effect is enabled using `isEffectEnabled()` and that it has been appended to the block using `appendEffect()`. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "System Compatibility" description: "Learn how device performance and hardware limits affect CE.SDK editing, rendering, and export capabilities." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/compatibility-139ef9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/sveltekit/compatibility-fef719/) > [System Compatibility](https://img.ly/docs/cesdk/sveltekit/compatibility-139ef9/) --- ## Recommended Hardware | Platform | Hardware | | ---------------- | ------------------------------------------------------------------------------ | | Desktop | A notebook or desktop released in the last 7 years and at least 4GB of memory. | | Mobile (Apple) | iPhone 8, iPad (6th gen) or newer | | Mobile (Android) | Phones & tablets released in the last 4 years | ## Video Our video feature introduces additional requirements and we generally distinguish playback (decoding) and export (encoding) capabilities. On the web, certain browser features directly depend on the host operating system. For video, this currently introduces the following limitations: - Transparency in H.265 videos is **not supported** on Windows hosts. - **Chrome on Linux** generally doesn't ship with encoder support for H.264 & AAC, which can cause video exports to fail even though decoding of non-free codecs is supported. - **Firefox** supports video editing (decoding) starting with version 130 via the WebCodecs API. However, video export is **not supported** because Firefox does not include the patent-encumbered H.264 and AAC codecs required for encoding. - **Chromium** although technically the base of Chrome doesn't include any codecs for licensing reasons and therefore can't be used for video editing. It does fall back to system-provided media libraries on e.g. macOS, but support is not guaranteed in any way. - **Linux browsers** generally have limited video support due to codec licensing. Video editing may work if the browser can decode H.264/AAC, but video export typically fails because open-source browser builds do not include the required encoders. - Video is **not supported** on mobile browsers on any platform due to technical limitations which result in performance issues. To detect these limitations at runtime, use the `video.decode.checkSupport` and `video.encode.checkSupport` actions, or the `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` utilities. ## Export Limitations The export size is limited by the hardware capabilities of the device, e.g., due to the maximum texture size that can be allocated. The maximum possible export size can be queried via API, see [export guide](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/). --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Compatibility & Security" description: "Learn about CE.SDK's compatibility and security features." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/compatibility-fef719/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/sveltekit/compatibility-fef719/) --- CE.SDK provides robust compatibility and security features across platforms. Learn about supported browsers, frameworks, file formats, language support, and how CE.SDK ensures secure operation in your applications. --- ## Related Pages - [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) - Find out which browsers and versions fully support CE.SDK features, including editing and video capabilities. - [System Compatibility](https://img.ly/docs/cesdk/sveltekit/compatibility-139ef9/) - Learn how device performance and hardware limits affect CE.SDK editing, rendering, and export capabilities. - [File Format Support](https://img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a/) - See which image, video, audio, font, and template formats CE.SDK supports for import and export. - [Security](https://img.ly/docs/cesdk/sveltekit/security-777bfd/) - Learn how CE.SDK keeps your data private with client-side processing, secure licensing, and GDPR-compliant practices. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Concepts" description: "Key concepts and principles of CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) --- Key Concepts and principles of CE.SDK. --- ## Related Pages - [Key Concepts](https://img.ly/docs/cesdk/sveltekit/key-concepts-21a270/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control. - [Key Capabilities](https://img.ly/docs/cesdk/sveltekit/key-capabilities-dbb5b1/) - Explore CE.SDK’s key features—manual editing, automation, templates, AI tools, and full UI and API control. - [Architecture](https://img.ly/docs/cesdk/sveltekit/concepts/architecture-6ea9b2/) - Understand how CE.SDK is structured around the CreativeEngine—the core runtime with six APIs for scenes, blocks, assets, events, variables, and editor state. - [Terminology](https://img.ly/docs/cesdk/sveltekit/concepts/terminology-99e82d/) - Definitions for the core terms and concepts used throughout CE.SDK documentation, including Engine, Scene, Block, Fill, Shape, Effect, and more. - [Editing Workflow](https://img.ly/docs/cesdk/sveltekit/concepts/editing-workflow-032d27/) - Control editing access with Creator, Adopter, Viewer, and Presenter roles using global and block-level scopes for tailored permissions. - [Blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) - Learn how blocks define elements in a scene and how to structure them for rendering in CE.SDK. - [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/) - Create, configure, save, and load scenes—the root container for all design elements in CE.SDK. - [Pages](https://img.ly/docs/cesdk/sveltekit/concepts/pages-7b6bae/) - Pages structure scenes in CE.SDK and must share the same dimensions to ensure consistent rendering. - [Assets](https://img.ly/docs/cesdk/sveltekit/concepts/assets-a84fdd/) - Learn how assets provide external content to CE.SDK designs and how asset sources make them available programmatically. - [Editor State](https://img.ly/docs/cesdk/sveltekit/concepts/edit-modes-1f5b6c/) - Control how users interact with content by switching between edit modes like transform, crop, and text. - [Templating](https://img.ly/docs/cesdk/sveltekit/concepts/templating-f94385/) - Understand how templates work in CE.SDK—reusable designs with variables for dynamic text and placeholders for swappable media. - [Events](https://img.ly/docs/cesdk/sveltekit/concepts/events-353f97/) - Subscribe to block creation, update, and deletion events to track changes in your CE.SDK scene. - [Buffers](https://img.ly/docs/cesdk/sveltekit/concepts/buffers-9c565b/) - Use buffers to store temporary, non-serializable data in CE.SDK via the CreativeEngine API. - [Resources](https://img.ly/docs/cesdk/sveltekit/concepts/resources-a58d71/) - Learn how CE.SDK loads and manages external media files, including preloading for performance, handling transient data, and relocating resources when URLs change. - [Undo and History](https://img.ly/docs/cesdk/sveltekit/concepts/undo-and-history-99479d/) - Manage undo and redo stacks in CE.SDK using multiple histories, callbacks, and API-based controls. - [Design Units](https://img.ly/docs/cesdk/sveltekit/concepts/design-units-cc6597/) - Configure design units (pixels, millimeters, inches) and DPI settings for print-ready output in CE.SDK. - [Headless](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) - Run headless CE.SDK's Engine inside a browser-based app. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Architecture" description: "Understand how CE.SDK is structured around the CreativeEngine—the core runtime with six APIs for scenes, blocks, assets, events, variables, and editor state." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/architecture-6ea9b2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Architecture](https://img.ly/docs/cesdk/sveltekit/concepts/architecture-6ea9b2/) --- Understand how CE.SDK is structured around the CreativeEngine and its six interconnected APIs. CE.SDK is built around the **CreativeEngine**—a single-threaded core runtime that manages state, rendering, and coordination between six specialized APIs. Understanding how these pieces connect helps you navigate the SDK effectively. ## The CreativeEngine The *Engine* is the central coordinator. All operations—creating content, manipulating blocks, rendering, and exporting—flow through it. Initialize it once and access everything else through its API namespaces. The *Engine* manages: - **One active scene** containing all design content - **Six API namespaces** for different domains of functionality - **Event dispatching** for reactive state management - **Resource loading** and caching - **Rendering** to a canvas element (browser) or headless export (server) ## Content Hierarchy CE.SDK organizes content in a tree: *Scene* → *Pages* → *Blocks*. - **Scene**: The root container. One scene per engine instance. Supports both static designs and time-based video editing. - **Pages**: Containers within a scene. Artboards for static designs, time-based compositions for video editing. - **Blocks**: The atomic units—graphics, text, audio, video. Everything visible is a block. The **Scene API** manages this hierarchy. The **Block API** manipulates individual blocks within it. See [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/), [Pages](https://img.ly/docs/cesdk/sveltekit/concepts/pages-7b6bae/), and [Blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) for details. ## The Six APIs The engine exposes six API namespaces. Here's how they interconnect: ### Scene API (`engine.scene`) Creates and manages the content hierarchy. Works with the *Block API* to populate scenes with content and the *Event API* to notify when structure changes. ### Block API (`engine.block`) The most-used API. Creates, modifies, and queries blocks. Every visual element flows through here. Blocks reference *Assets* loaded through the *Asset API* and can contain *Variables* managed by the *Variable API*. ### Asset API (`engine.asset`) Provides content to the *Block API*. Registers asset sources (images, videos, stickers, templates) and handles queries. When you add an image to a block, the *Asset API* resolves it and the *Block API* applies it. ### Variable API (`engine.variable`) Enables data-driven designs. Define variables at the scene level; reference them in text blocks with `{{variableName}}` syntax. When variable values change, affected blocks update automatically—coordinated through the *Event API*. ### Editor API (`engine.editor`) Controls application state: edit modes, undo/redo history, user roles, and permissions. The *Editor API* determines what operations the *Block API* can perform based on current role and scope settings. ### Event API (`engine.event`) The reactive backbone. Subscribe to changes across all other APIs—block modifications, selection changes, history updates. Build UIs that stay synchronized with engine state. ## How They Connect A typical flow shows the interconnection: 1. **Scene API** creates the content structure 2. **Asset API** provides images, templates, or other content 3. **Block API** creates blocks and applies assets to them 4. **Variable API** injects dynamic data into text blocks 5. **Editor API** controls what users can modify 6. **Event API** notifies your UI of every change Each API focuses on one domain but works through the others. The *Engine* coordinates these interactions. ## Scene Capabilities CE.SDK scenes support a range of capabilities: - **Static designs**: Social posts, print materials, graphics. Blocks positioned spatially. - **Time-based content**: Duration, playback time, and animation. Blocks arranged across time. The scene configuration determines which *Block API* properties and *Editor API* capabilities are available. See [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/) for details. ## Integration Patterns CE.SDK runs in two contexts: - **Browser**: The engine renders to a canvas element. Append `engine.element` to your DOM. Use with the built-in UI or build your own. - **Headless**: No rendering, just processing. Use for server-side exports, automation, and batch operations. See [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/). Both contexts use the same six APIs—only rendering differs. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Assets" description: "Learn how assets provide external content to CE.SDK designs and how asset sources make them available programmatically." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/assets-a84fdd/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Assets](https://img.ly/docs/cesdk/sveltekit/concepts/assets-a84fdd/) --- Understand the asset system—how external media and resources like images, stickers, or videos are handled in CE.SDK.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-assets-browser/) Images, videos, audio, fonts, stickers, and templates—every premade resource you can add to a design is what we call an *Asset*. The editor gets access to these Assets through *Asset Sources*. When you apply an Asset, CE.SDK creates or modifies a Block to display that content. ```typescript file=@cesdk_web_examples/guides-concepts-assets-browser/browser.ts reference-only import type { AssetQueryData, AssetResult, AssetSource, AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; /** * CE.SDK Plugin: Assets Concepts Guide * * Demonstrates the core concepts of the asset system: * - What assets are and how they differ from blocks * - Creating and registering asset sources * - Querying and applying assets */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // An asset is a content definition with metadata // It describes content that can be added to designs const stickerAsset: AssetResult = { id: 'sticker-smile', label: 'Smile Sticker', tags: ['emoji', 'happy'], groups: ['stickers'], meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', width: 62, height: 58, mimeType: 'image/svg+xml' } }; // Asset sources provide assets to the editor // Each source has an id and a findAssets() method const customSource: AssetSource = { id: 'my-assets', async findAssets(query: AssetQueryData): Promise { // Return paginated results matching the query return { assets: [stickerAsset], total: 1, currentPage: query.page, nextPage: undefined }; } }; engine.asset.addSource(customSource); // Query assets from a source const results = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10 }); console.log('Found assets:', results.total); // Apply an asset to create a block in the scene if (results.assets.length > 0) { const blockId = await engine.asset.apply('my-assets', results.assets[0]); console.log('Created block:', blockId); // Center the sticker on the page const page = engine.scene.getCurrentPage(); if (page && blockId) { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // SVG is 62x58, scale to fit nicely const stickerWidth = 62; const stickerHeight = 58; engine.block.setWidth(blockId, stickerWidth); engine.block.setHeight(blockId, stickerHeight); engine.block.setPositionX(blockId, (pageWidth - stickerWidth) / 2); engine.block.setPositionY(blockId, (pageHeight - stickerHeight) / 2); } } // Local sources support dynamic add/remove operations engine.asset.addLocalSource('uploads', ['image/svg+xml', 'image/png']); engine.asset.addAssetToSource('uploads', { id: 'uploaded-1', label: { en: 'Heart Sticker' }, meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', mimeType: 'image/svg+xml' } }); // Subscribe to asset source lifecycle events const unsubscribe = engine.asset.onAssetSourceUpdated((sourceId) => { console.log('Source updated:', sourceId); }); // Notify that source contents changed engine.asset.assetSourceContentsChanged('uploads'); unsubscribe(); } } export default Example; ``` This guide covers the core concepts of the Asset system. For detailed instructions on inserting specific media types, see the [Images](https://img.ly/docs/cesdk/sveltekit/insert-media/images-63848a/), [Videos](https://img.ly/docs/cesdk/sveltekit/insert-media/videos-a5fa03/), and [Shapes & Stickers](https://img.ly/docs/cesdk/sveltekit/insert-media/shapes-or-stickers-20ac68/) guides. ## Assets vs Blocks **Assets** are content definitions with metadata (URIs, dimensions, labels) that exist outside the scene. **Blocks** are the visual elements in the scene tree that display content. When you apply an asset, CE.SDK creates a block configured according to the asset's properties. Multiple blocks can reference the same asset, and assets can exist without being used in any block. ## The Asset Data Model An asset describes content that can be added to designs. Each asset has an `id` and optional properties: ```typescript highlight-asset-definition // An asset is a content definition with metadata // It describes content that can be added to designs const stickerAsset: AssetResult = { id: 'sticker-smile', label: 'Smile Sticker', tags: ['emoji', 'happy'], groups: ['stickers'], meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_smile.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', width: 62, height: 58, mimeType: 'image/svg+xml' } }; ``` Key properties include: - **`id`** — Unique identifier for the asset - **`label`** — Display name (can be localized) - **`tags`** — Searchable keywords - **`groups`** — Categories for filtering - **`meta`** — Content-specific data including `uri`, `thumbUri`, `blockType`, `fillType`, `width`, `height`, and `mimeType` > **Note:** See the [Content JSON Schema](https://img.ly/docs/cesdk/sveltekit/import-media/content-json-schema-a7b3d2/) guide for the complete property reference. ## Asset Sources Asset sources provide assets to the editor. Each source has an `id` and implements a `findAssets()` method that returns paginated results. ```typescript highlight-asset-source // Asset sources provide assets to the editor // Each source has an id and a findAssets() method const customSource: AssetSource = { id: 'my-assets', async findAssets(query: AssetQueryData): Promise { // Return paginated results matching the query return { assets: [stickerAsset], total: 1, currentPage: query.page, nextPage: undefined }; } }; engine.asset.addSource(customSource); ``` The `findAssets()` callback receives query parameters (`page`, `perPage`, `query`, `tags`, `groups`) and returns a result object with `assets`, `total`, `currentPage`, and `nextPage`. Sources can also implement optional methods like `getGroups()`, `getSupportedMimeTypes()`, and `applyAsset()` for custom behavior. ## Querying Assets Search and filter assets from registered sources using `findAssets()`: ```typescript highlight-query-assets // Query assets from a source const results = await engine.asset.findAssets('my-assets', { page: 0, perPage: 10 }); console.log('Found assets:', results.total); ``` Results include pagination info. Loop through pages until `nextPage` is undefined to retrieve all matching assets. ## Applying Assets Use `apply()` to create a new block from an asset: ```typescript highlight-apply-asset // Apply an asset to create a block in the scene if (results.assets.length > 0) { const blockId = await engine.asset.apply('my-assets', results.assets[0]); console.log('Created block:', blockId); // Center the sticker on the page const page = engine.scene.getCurrentPage(); if (page && blockId) { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // SVG is 62x58, scale to fit nicely const stickerWidth = 62; const stickerHeight = 58; engine.block.setWidth(blockId, stickerWidth); engine.block.setHeight(blockId, stickerHeight); engine.block.setPositionX(blockId, (pageWidth - stickerWidth) / 2); engine.block.setPositionY(blockId, (pageHeight - stickerHeight) / 2); } } ``` The method returns the new block ID, which you can use to position and configure the block. ## Local Asset Sources Local sources store assets in memory and support dynamic add/remove operations. Use these for user uploads or runtime-generated content: ```typescript highlight-local-source // Local sources support dynamic add/remove operations engine.asset.addLocalSource('uploads', ['image/svg+xml', 'image/png']); engine.asset.addAssetToSource('uploads', { id: 'uploaded-1', label: { en: 'Heart Sticker' }, meta: { uri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', thumbUri: 'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_love.svg', blockType: '//ly.img.ubq/graphic', fillType: '//ly.img.ubq/fill/image', mimeType: 'image/svg+xml' } }); ``` ## Source Events Subscribe to asset source lifecycle events for reactive UIs: ```typescript highlight-source-events // Subscribe to asset source lifecycle events const unsubscribe = engine.asset.onAssetSourceUpdated((sourceId) => { console.log('Source updated:', sourceId); }); // Notify that source contents changed engine.asset.assetSourceContentsChanged('uploads'); unsubscribe(); ``` Call `assetSourceContentsChanged()` after modifying a source to notify subscribers. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blocks" description: "Learn how blocks define elements in a scene and how to structure them for rendering in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) --- Work with blocks—the fundamental building units for all visual elements in CE.SDK designs.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-blocks-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-blocks-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-blocks-browser/) Every visual element in CE.SDK—images, text, shapes, and audio—is represented as a block. Blocks are organized in a tree structure within scenes and pages, where parent-child relationships determine rendering order and visibility. Each block has properties you can read and modify, a `Type` that defines its core behavior, and an optional `Kind` for custom categorization. ```typescript file=@cesdk_web_examples/guides-concepts-blocks-browser/browser.ts reference-only import type { EditorPlugin,EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Blocks Guide * * Demonstrates working with blocks in CE.SDK: * - Block types (graphic, text, audio, page, cutout) * - Block hierarchy (parent-child relationships) * - Block lifecycle (create, duplicate, destroy) * - Block properties and reflection * - Selection and visibility * - Block state management * - Serialization (save/load) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Find the page block - pages contain all design elements const pages = engine.block.findByType('page'); const page = pages[0]; // Query the block type - returns the full type path const pageType = engine.block.getType(page); console.log('Page block type:', pageType); // '//ly.img.ubq/page' // Type is immutable, determined at creation // Kind is a custom label you can set and change engine.block.setKind(page, 'main-canvas'); const pageKind = engine.block.getKind(page); console.log('Page kind:', pageKind); // 'main-canvas' // Find blocks by kind const mainCanvasBlocks = engine.block.findByKind('main-canvas'); console.log('Blocks with kind "main-canvas":', mainCanvasBlocks.length); // Create a graphic block for an image const graphic = engine.block.create('graphic'); // Duplicate creates a copy with a new UUID const graphicCopy = engine.block.duplicate(graphic); // Destroy removes a block - the duplicate is no longer needed engine.block.destroy(graphicCopy); // Check if a block ID is still valid after operations const isOriginalValid = engine.block.isValid(graphic); const isCopyValid = engine.block.isValid(graphicCopy); console.log('Original valid:', isOriginalValid); // true console.log('Copy valid after destroy:', isCopyValid); // false // Create a rect shape to define the graphic's bounds const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic (centered horizontally on 800px page) engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 100); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Create an image fill and attach it to the graphic const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); // Set content fill mode so the image fills the block bounds engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); // Blocks form a tree: scene > page > elements // Append the graphic to the page to make it visible engine.block.appendChild(page, graphic); // Query parent-child relationships const graphicParent = engine.block.getParent(graphic); console.log('Graphic parent is page:', graphicParent === page); // true const pageChildren = engine.block.getChildren(page); console.log('Page has children:', pageChildren.length); // Create a text block with content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position the text block (centered horizontally on 800px page) engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 450); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 80); // Set text content engine.block.setString( textBlock, 'text/text', 'Blocks are the building units of CE.SDK designs' ); // Set font size to 72pt engine.block.setFloat(textBlock, 'text/fontSize', 72); // Center-align the text engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); // Check the text block type const textType = engine.block.getType(textBlock); console.log('Text block type:', textType); // '//ly.img.ubq/text' // Use reflection to discover available properties const graphicProperties = engine.block.findAllProperties(graphic); console.log('Graphic block has', graphicProperties.length, 'properties'); // Get property type information const opacityType = engine.block.getPropertyType('opacity'); console.log('Opacity property type:', opacityType); // 'Float' // Check if properties are readable/writable const isOpacityReadable = engine.block.isPropertyReadable('opacity'); const isOpacityWritable = engine.block.isPropertyWritable('opacity'); console.log( 'Opacity readable:', isOpacityReadable, 'writable:', isOpacityWritable ); // Use type-specific getters and setters // Float properties engine.block.setFloat(graphic, 'opacity', 0.9); const opacity = engine.block.getFloat(graphic, 'opacity'); console.log('Graphic opacity:', opacity); // Bool properties engine.block.setBool(page, 'page/marginEnabled', false); const marginEnabled = engine.block.getBool(page, 'page/marginEnabled'); console.log('Page margin enabled:', marginEnabled); // Enum properties - get allowed values first const blendModes = engine.block.getEnumValues('blend/mode'); console.log( 'Available blend modes:', blendModes.slice(0, 3).join(', '), '...' ); engine.block.setEnum(graphic, 'blend/mode', 'Multiply'); const blendMode = engine.block.getEnum(graphic, 'blend/mode'); console.log('Graphic blend mode:', blendMode); // Each block has a stable UUID across save/load cycles const graphicUUID = engine.block.getUUID(graphic); console.log('Graphic UUID:', graphicUUID); // Block names are mutable labels for organization engine.block.setName(graphic, 'Hero Image'); engine.block.setName(textBlock, 'Caption'); const graphicName = engine.block.getName(graphic); console.log('Graphic name:', graphicName); // 'Hero Image' // Select a block programmatically engine.block.select(graphic); // Selects graphic, deselects others // Check selection state const isGraphicSelected = engine.block.isSelected(graphic); console.log('Graphic is selected:', isGraphicSelected); // true // Add to selection without deselecting others engine.block.setSelected(textBlock, true); // Get all selected blocks const selectedBlocks = engine.block.findAllSelected(); console.log('Selected blocks count:', selectedBlocks.length); // 2 // Subscribe to selection changes const unsubscribeSelection = engine.block.onSelectionChanged(() => { const selected = engine.block.findAllSelected(); console.log( 'Selection changed, now selected:', selected.length, 'blocks' ); }); // Control block visibility engine.block.setVisible(graphic, true); const isVisible = engine.block.isVisible(graphic); console.log('Graphic is visible:', isVisible); // Control export inclusion engine.block.setIncludedInExport(graphic, true); const inExport = engine.block.isIncludedInExport(graphic); console.log('Graphic included in export:', inExport); // Control clipping behavior engine.block.setClipped(graphic, false); const isClipped = engine.block.isClipped(graphic); console.log('Graphic is clipped:', isClipped); // Query block state - indicates loading status const graphicState = engine.block.getState(graphic); console.log('Graphic state:', graphicState.type); // 'Ready', 'Pending', or 'Error' // Subscribe to state changes (useful for loading indicators) const unsubscribeState = engine.block.onStateChanged( [graphic], (changedBlocks) => { for (const blockId of changedBlocks) { const state = engine.block.getState(blockId); console.log(`Block ${blockId} state changed to:`, state.type); if (state.type === 'Pending' && state.progress !== undefined) { console.log( 'Loading progress:', Math.round(state.progress * 100) + '%' ); } } } ); // Save blocks to a string for persistence // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const savedString = await engine.block.saveToString( [graphic, textBlock], ['buffer', 'http', 'https', 'bundle'] ); console.log('Blocks saved to string, length:', savedString.length); // Alternatively, blocks can also be saved with their assets to an archive // const savedBlocksArchive = await engine.block.saveToArchive([ // graphic, // textBlock // ]); // Load blocks from string (creates new blocks, not attached to scene) const loadedBlocks = await engine.block.loadFromString(savedString); console.log('Loaded blocks from string:', loadedBlocks.length); // Alternatively, blocks can also be loaded from an archive // const loadedBlocks = await engine.block.loadFromArchiveURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1_blocks.zip' // ); // console.log('Loaded blocks from archive URL:', loadedBlocks.length); // Alternatively, blocks can be loaded from an extracted zip file created with block.saveToArchive // const loadedBlocks = await engine.block.loadFromURL( // 'https://cdn.img.ly/assets/v6/ly.img.text.components/box/blocks.blocks' // ); // console.log('Loaded blocks from URL:', loadedBlocks.length); // Loaded blocks must be parented to appear in the scene // For demo purposes, we won't add them to avoid duplicates for (const block of loadedBlocks) { engine.block.destroy(block); } // Clean up subscriptions when done // In a real application, you'd keep these active as needed unsubscribeSelection(); unsubscribeState(); console.log('Blocks guide initialized successfully.'); console.log('Created graphic block with image fill and text block.'); console.log( 'Demonstrated: types, hierarchy, properties, selection, state, and serialization.' ); } } export default Example; ``` This guide covers block types and their uses, how to create and manage blocks programmatically, how to work with block properties using the reflection system, and how to handle selection, visibility, and state changes. ## Block Types CE.SDK provides several block types, each designed for specific content: - **graphic** (`//ly.img.ubq/graphic`): Visual blocks for images, shapes, and graphics - **text** (`//ly.img.ubq/text`): Text content with typography controls - **audio** (`//ly.img.ubq/audio`): Audio content for video scenes - **page** (`//ly.img.ubq/page`): Container blocks representing canvases or artboards - **cutout** (`//ly.img.ubq/cutout`): Blocks for masking operations We query a block's type using `getType()` and find blocks of a specific type with `findByType()`: ```typescript highlight-block-types // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Find the page block - pages contain all design elements const pages = engine.block.findByType('page'); const page = pages[0]; // Query the block type - returns the full type path const pageType = engine.block.getType(page); console.log('Page block type:', pageType); // '//ly.img.ubq/page' ``` Block types are immutable—once created, a block's type cannot change. This distinguishes type from kind. ## Type vs Kind Type and kind serve different purposes. The **type** is determined at creation and defines core behavior. The **kind** is a custom string label you assign for application-specific categorization. ```typescript highlight-type-vs-kind // Type is immutable, determined at creation // Kind is a custom label you can set and change engine.block.setKind(page, 'main-canvas'); const pageKind = engine.block.getKind(page); console.log('Page kind:', pageKind); // 'main-canvas' // Find blocks by kind const mainCanvasBlocks = engine.block.findByKind('main-canvas'); console.log('Blocks with kind "main-canvas":', mainCanvasBlocks.length); ``` Use kind to tag blocks for your application's logic. You can set it with `setKind()`, query it with `getKind()`, and find blocks by kind with `findByKind()`. ## Block Hierarchy Blocks form a tree structure where scenes contain pages, and pages contain design elements. ```typescript highlight-block-hierarchy // Blocks form a tree: scene > page > elements // Append the graphic to the page to make it visible engine.block.appendChild(page, graphic); // Query parent-child relationships const graphicParent = engine.block.getParent(graphic); console.log('Graphic parent is page:', graphicParent === page); // true const pageChildren = engine.block.getChildren(page); console.log('Page has children:', pageChildren.length); ``` Only blocks that are direct or indirect children of a page block are rendered. A scene without any page children won't display content in the editor. Use `appendChild()` to add blocks to parents, `getParent()` to query a block's parent, and `getChildren()` to get a block's children. ## Block Lifecycle Create new blocks with `create()`, duplicate existing blocks with `duplicate()`, and remove blocks with `destroy()`. After destroying a block, `isValid()` returns `false` for that block ID. ```typescript highlight-block-lifecycle // Create a graphic block for an image const graphic = engine.block.create('graphic'); // Duplicate creates a copy with a new UUID const graphicCopy = engine.block.duplicate(graphic); // Destroy removes a block - the duplicate is no longer needed engine.block.destroy(graphicCopy); // Check if a block ID is still valid after operations const isOriginalValid = engine.block.isValid(graphic); const isCopyValid = engine.block.isValid(graphicCopy); console.log('Original valid:', isOriginalValid); // true console.log('Copy valid after destroy:', isCopyValid); // false ``` When duplicating a block, all children are included, and the duplicate receives a new UUID. ## Working with Fills Graphic blocks display content through fills. We create a fill, attach it to a block, and configure its source. ```typescript highlight-fill // Create a rect shape to define the graphic's bounds const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic (centered horizontally on 800px page) engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 100); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Create an image fill and attach it to the graphic const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); // Set content fill mode so the image fills the block bounds engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); ``` CE.SDK supports several fill types including image, video, color, and gradient fills. See the [Fills guide](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/gradients-0ff079/) for details on available fill types. ## Creating Text Blocks Text blocks display formatted text content. We create a text block, position it, and set its content. ```typescript highlight-text-block // Create a text block with content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position the text block (centered horizontally on 800px page) engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 450); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 80); // Set text content engine.block.setString( textBlock, 'text/text', 'Blocks are the building units of CE.SDK designs' ); // Set font size to 72pt engine.block.setFloat(textBlock, 'text/fontSize', 72); // Center-align the text engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); // Check the text block type const textType = engine.block.getType(textBlock); console.log('Text block type:', textType); // '//ly.img.ubq/text' ``` Text blocks support extensive typography controls covered in the [Text guides](https://img.ly/docs/cesdk/sveltekit/text-8a993a/). ## Block Properties The reflection system lets you discover and manipulate any block property dynamically. Use `findAllProperties()` to get all available properties for a block—they're prefixed by category like `shape/star/points` or `text/fontSize`. ```typescript highlight-block-properties // Use reflection to discover available properties const graphicProperties = engine.block.findAllProperties(graphic); console.log('Graphic block has', graphicProperties.length, 'properties'); // Get property type information const opacityType = engine.block.getPropertyType('opacity'); console.log('Opacity property type:', opacityType); // 'Float' // Check if properties are readable/writable const isOpacityReadable = engine.block.isPropertyReadable('opacity'); const isOpacityWritable = engine.block.isPropertyWritable('opacity'); console.log( 'Opacity readable:', isOpacityReadable, 'writable:', isOpacityWritable ); ``` Query property types with `getPropertyType()`. Returns include `Bool`, `Int`, `Float`, `Double`, `String`, `Color`, `Enum`, or `Struct`. For enum properties, use `getEnumValues()` to get allowed values. ### Property Accessors Use type-specific getters and setters matching the property type: ```typescript highlight-property-accessors // Use type-specific getters and setters // Float properties engine.block.setFloat(graphic, 'opacity', 0.9); const opacity = engine.block.getFloat(graphic, 'opacity'); console.log('Graphic opacity:', opacity); // Bool properties engine.block.setBool(page, 'page/marginEnabled', false); const marginEnabled = engine.block.getBool(page, 'page/marginEnabled'); console.log('Page margin enabled:', marginEnabled); // Enum properties - get allowed values first const blendModes = engine.block.getEnumValues('blend/mode'); console.log( 'Available blend modes:', blendModes.slice(0, 3).join(', '), '...' ); engine.block.setEnum(graphic, 'blend/mode', 'Multiply'); const blendMode = engine.block.getEnum(graphic, 'blend/mode'); console.log('Graphic blend mode:', blendMode); ``` Using the wrong accessor type for a property will cause an error. Always check `getPropertyType()` if you're unsure which accessor to use. ## UUID, Names, and Identity Each block has a UUID that remains stable across save and load operations. Block names are mutable labels for organization. ```typescript highlight-uuid-identity // Each block has a stable UUID across save/load cycles const graphicUUID = engine.block.getUUID(graphic); console.log('Graphic UUID:', graphicUUID); // Block names are mutable labels for organization engine.block.setName(graphic, 'Hero Image'); engine.block.setName(textBlock, 'Caption'); const graphicName = engine.block.getName(graphic); console.log('Graphic name:', graphicName); // 'Hero Image' ``` Use `getUUID()` when you need a persistent identifier for a block. Names are useful for user-facing labels and can be changed freely with `setName()`. ## Selection Control which blocks are selected programmatically. Use `select()` to select a single block (deselecting others) or `setSelected()` to modify selection without affecting other blocks. ```typescript highlight-selection // Select a block programmatically engine.block.select(graphic); // Selects graphic, deselects others // Check selection state const isGraphicSelected = engine.block.isSelected(graphic); console.log('Graphic is selected:', isGraphicSelected); // true // Add to selection without deselecting others engine.block.setSelected(textBlock, true); // Get all selected blocks const selectedBlocks = engine.block.findAllSelected(); console.log('Selected blocks count:', selectedBlocks.length); // 2 // Subscribe to selection changes const unsubscribeSelection = engine.block.onSelectionChanged(() => { const selected = engine.block.findAllSelected(); console.log( 'Selection changed, now selected:', selected.length, 'blocks' ); }); ``` Subscribe to selection changes with `onSelectionChanged()` to update your UI when the selection state changes. ## Visibility Control whether blocks appear on the canvas and are included in exports. ```typescript highlight-visibility // Control block visibility engine.block.setVisible(graphic, true); const isVisible = engine.block.isVisible(graphic); console.log('Graphic is visible:', isVisible); // Control export inclusion engine.block.setIncludedInExport(graphic, true); const inExport = engine.block.isIncludedInExport(graphic); console.log('Graphic included in export:', inExport); ``` A block with `isVisible()` returning true may still not appear if it hasn't been added to a parent, the parent is hidden, or another block obscures it. ### Clipping Clipping determines whether a block's content is constrained to its parent's bounds. When `setClipped(block, true)` is set, any portion of the block extending beyond its parent's boundaries is hidden. When clipping is disabled, the block renders fully even if it overflows its parent container. ```typescript highlight-clipping // Control clipping behavior engine.block.setClipped(graphic, false); const isClipped = engine.block.isClipped(graphic); console.log('Graphic is clipped:', isClipped); ``` ## Block State Blocks track loading progress and error conditions through a state system with three possible states: - **Ready**: Normal state, no pending operations - **Pending**: Operation in progress with optional progress value (0-1) - **Error**: Operation failed (`ImageDecoding`, `VideoDecoding`, `FileFetch`, `AudioDecoding`, `Unknown`) ```typescript highlight-block-state // Query block state - indicates loading status const graphicState = engine.block.getState(graphic); console.log('Graphic state:', graphicState.type); // 'Ready', 'Pending', or 'Error' // Subscribe to state changes (useful for loading indicators) const unsubscribeState = engine.block.onStateChanged( [graphic], (changedBlocks) => { for (const blockId of changedBlocks) { const state = engine.block.getState(blockId); console.log(`Block ${blockId} state changed to:`, state.type); if (state.type === 'Pending' && state.progress !== undefined) { console.log( 'Loading progress:', Math.round(state.progress * 100) + '%' ); } } } ); ``` Subscribe to state changes with `onStateChanged()` to show loading indicators or handle errors in your UI. ## Serialization Save blocks to strings for persistence and restore them later. ```typescript highlight-serialization // Save blocks to a string for persistence // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const savedString = await engine.block.saveToString( [graphic, textBlock], ['buffer', 'http', 'https', 'bundle'] ); console.log('Blocks saved to string, length:', savedString.length); // Alternatively, blocks can also be saved with their assets to an archive // const savedBlocksArchive = await engine.block.saveToArchive([ // graphic, // textBlock // ]); // Load blocks from string (creates new blocks, not attached to scene) const loadedBlocks = await engine.block.loadFromString(savedString); console.log('Loaded blocks from string:', loadedBlocks.length); // Alternatively, blocks can also be loaded from an archive // const loadedBlocks = await engine.block.loadFromArchiveURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1_blocks.zip' // ); // console.log('Loaded blocks from archive URL:', loadedBlocks.length); // Alternatively, blocks can be loaded from an extracted zip file created with block.saveToArchive // const loadedBlocks = await engine.block.loadFromURL( // 'https://cdn.img.ly/assets/v6/ly.img.text.components/box/blocks.blocks' // ); // console.log('Loaded blocks from URL:', loadedBlocks.length); // Loaded blocks must be parented to appear in the scene // For demo purposes, we won't add them to avoid duplicates for (const block of loadedBlocks) { engine.block.destroy(block); } ``` Use `saveToString()` for lightweight serialization or `saveToArchive()` to include all referenced assets. Blocks can be loaded with `loadFromString()`, `loadFromArchiveURL()`, or `loadFromURL()`. For `loadFromArchiveURL()`, the URL should point to the zipped archive file previously saved with `saveToArchive()`, whereas for `loadFromURL()`, it should point to a blocks file within an unzipped archive directory. Loaded blocks are not automatically attached to the scene—you must parent them with `appendChild()` to make them visible. ## Troubleshooting **Block not visible**: Ensure the block is a child of a page that's a child of the scene. **Property setter fails**: Verify the property type matches the setter method used. Use `getPropertyType()` to check. **Block ID invalid after destroy**: Use `isValid()` before operations on potentially destroyed blocks. **State stuck in Pending**: Check network connectivity for remote resources or use state change events to monitor progress. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Buffers" description: "Use buffers to store temporary, non-serializable data in CE.SDK via the CreativeEngine API." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/buffers-9c565b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Buffers](https://img.ly/docs/cesdk/sveltekit/concepts/buffers-9c565b/) --- Store and manage temporary binary data directly in memory using CE.SDK's buffer API for dynamically generated content.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-buffers-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-buffers-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-buffers-browser/) Buffers are in-memory containers for binary data referenced via `buffer://` URIs. Unlike external files that require network or file I/O, buffers exist only during the current session and are not serialized when saving scenes. This makes them ideal for procedural audio, real-time image data, or streaming content that doesn't need to persist beyond the current editing session. ```typescript file=@cesdk_web_examples/guides-concepts-buffers-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; // Helper function to create a WAV file from audio samples function createWavFile( samples: Float32Array, sampleRate: number, numChannels: number ): Uint8Array { const bytesPerSample = 2; // 16-bit audio const blockAlign = numChannels * bytesPerSample; const byteRate = sampleRate * blockAlign; const dataSize = samples.length * bytesPerSample; const fileSize = 44 + dataSize; // WAV header is 44 bytes const buffer = new ArrayBuffer(fileSize); const view = new DataView(buffer); // Write WAV header // "RIFF" chunk descriptor writeString(view, 0, 'RIFF'); view.setUint32(4, fileSize - 8, true); // File size minus RIFF header writeString(view, 8, 'WAVE'); // "fmt " sub-chunk writeString(view, 12, 'fmt '); view.setUint32(16, 16, true); // Subchunk1Size (16 for PCM) view.setUint16(20, 1, true); // AudioFormat (1 = PCM) view.setUint16(22, numChannels, true); // NumChannels view.setUint32(24, sampleRate, true); // SampleRate view.setUint32(28, byteRate, true); // ByteRate view.setUint16(32, blockAlign, true); // BlockAlign view.setUint16(34, bytesPerSample * 8, true); // BitsPerSample // "data" sub-chunk writeString(view, 36, 'data'); view.setUint32(40, dataSize, true); // Subchunk2Size // Write audio samples as 16-bit PCM let offset = 44; for (let i = 0; i < samples.length; i++) { // Convert float (-1 to 1) to 16-bit integer const sample = Math.max(-1, Math.min(1, samples[i])); const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7fff; view.setInt16(offset, intSample, true); offset += 2; } return new Uint8Array(buffer); } function writeString(view: DataView, offset: number, str: string): void { for (let i = 0; i < str.length; i++) { view.setUint8(offset + i, str.charCodeAt(i)); } } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // Get the page (first container in video scenes) const pages = engine.block.findByType('page'); const page = pages[0]; // Add a centered text block to explain the example const textBlock = engine.block.create('text'); engine.block.setString( textBlock, 'text/text', 'The audio track in this scene lives in a buffer.' ); engine.block.setFloat(textBlock, 'text/fontSize', 108); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setHeightMode(textBlock, 'Auto'); // Set text color to white engine.block.setColor(textBlock, 'fill/solid/color', { r: 1, g: 1, b: 1, a: 1 }); // Get page dimensions and position with 10% horizontal margin const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const horizontalMargin = pageWidth * 0.1; const textWidth = pageWidth - horizontalMargin * 2; engine.block.setWidth(textBlock, textWidth); engine.block.setPositionX(textBlock, horizontalMargin); // Append to page first so layout can be computed engine.block.appendChild(page, textBlock); // Force layout computation and get the actual frame height const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionY(textBlock, (pageHeight - textHeight) / 2); // Set duration to match the scene engine.block.setDuration(textBlock, 2); // Create a buffer and get its URI const bufferUri = engine.editor.createBuffer(); console.log('Buffer URI:', bufferUri); // Generate sine wave audio samples const sampleRate = 44100; const duration = 2; // 2 seconds const frequency = 440; // A4 note const numChannels = 2; // Stereo // Create Float32Array for audio samples (interleaved stereo) const numSamples = sampleRate * duration * numChannels; const samples = new Float32Array(numSamples); // Generate a 440 Hz sine wave for (let i = 0; i < numSamples; i += numChannels) { const sampleIndex = i / numChannels; const time = sampleIndex / sampleRate; const value = Math.sin(2 * Math.PI * frequency * time) * 0.5; // 50% amplitude // Write to both left and right channels samples[i] = value; // Left channel samples[i + 1] = value; // Right channel } // Convert samples to WAV format and write to buffer const wavData = createWavFile(samples, sampleRate, numChannels); engine.editor.setBufferData(bufferUri, 0, wavData); // Verify the buffer length const bufferLength = engine.editor.getBufferLength(bufferUri); console.log('Buffer length:', bufferLength, 'bytes'); // Create an audio block const audioBlock = engine.block.create('audio'); // Assign the buffer URI to the audio block engine.block.setString(audioBlock, 'audio/fileURI', bufferUri); // Set audio duration to match the generated samples engine.block.setDuration(audioBlock, duration); // Append the audio block to the page engine.block.appendChild(page, audioBlock); // Demonstrate reading buffer data back const readData = engine.editor.getBufferData(bufferUri, 0, 100); console.log('First 100 bytes of buffer data:', readData); // Demonstrate resizing a buffer with a separate demo buffer const demoBuffer = engine.editor.createBuffer(); engine.editor.setBufferData( demoBuffer, 0, new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]) ); const demoLength = engine.editor.getBufferLength(demoBuffer); console.log('Demo buffer length before resize:', demoLength); engine.editor.setBufferLength(demoBuffer, demoLength / 2); console.log( 'Demo buffer length after resize:', engine.editor.getBufferLength(demoBuffer) ); engine.editor.destroyBuffer(demoBuffer); // Find all transient resources (including our buffer) const transientResources = engine.editor.findAllTransientResources(); console.log('Transient resources in scene:'); for (const resource of transientResources) { console.log(` URL: ${resource.URL}, Size: ${resource.size} bytes`); } // Demonstrate persisting buffer data using a Blob URL // In production, you would upload to CDN/cloud storage instead const bufferData = engine.editor.getBufferData(bufferUri, 0, bufferLength); const blob = new Blob([new Uint8Array(bufferData)], { type: 'audio/wav' }); const persistentUrl = URL.createObjectURL(blob); // Update all references from buffer:// to the new URL engine.editor.relocateResource(bufferUri, persistentUrl); console.log('Buffer relocated to:', persistentUrl); console.log('Buffers example loaded successfully'); console.log( 'Note: Audio playback requires user interaction in most browsers' ); } } export default Example; ``` This guide covers how to create and manage buffers, write and read binary data, assign buffers to block properties like audio sources, and handle transient resources when saving scenes. ## Setting Up the Scene We first create a scene and set up a page for our audio composition. ```typescript highlight-create-video-scene await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); ``` ## Creating and Managing Buffers We use `engine.editor.createBuffer()` to allocate a new buffer and receive its URI. This URI follows the `buffer://` scheme and uniquely identifies the buffer within the engine instance. ```typescript highlight-create-buffer // Create a buffer and get its URI const bufferUri = engine.editor.createBuffer(); console.log('Buffer URI:', bufferUri); ``` Buffers persist in memory until you explicitly destroy them with `engine.editor.destroyBuffer()` or the engine instance is disposed. For large buffers or long editing sessions, you should destroy buffers when they're no longer needed to free memory. ## Writing Data to Buffers To populate a buffer with binary data, we use `engine.editor.setBufferData()`. This method takes the buffer URI, an offset in bytes, and a `Uint8Array` containing the data to write. In this example, we generate a 440 Hz sine wave as stereo PCM audio samples. We create a `Float32Array` for the sample values that will be converted to a valid audio format. ```typescript highlight-generate-samples // Generate sine wave audio samples const sampleRate = 44100; const duration = 2; // 2 seconds const frequency = 440; // A4 note const numChannels = 2; // Stereo // Create Float32Array for audio samples (interleaved stereo) const numSamples = sampleRate * duration * numChannels; const samples = new Float32Array(numSamples); // Generate a 440 Hz sine wave for (let i = 0; i < numSamples; i += numChannels) { const sampleIndex = i / numChannels; const time = sampleIndex / sampleRate; const value = Math.sin(2 * Math.PI * frequency * time) * 0.5; // 50% amplitude // Write to both left and right channels samples[i] = value; // Left channel samples[i + 1] = value; // Right channel } ``` When using buffers for audio, the data must be in a recognized audio format like WAV. We convert the raw samples to a WAV file by adding the appropriate headers, then write the complete file to the buffer. ```typescript highlight-write-buffer // Convert samples to WAV format and write to buffer const wavData = createWavFile(samples, sampleRate, numChannels); engine.editor.setBufferData(bufferUri, 0, wavData); // Verify the buffer length const bufferLength = engine.editor.getBufferLength(bufferUri); console.log('Buffer length:', bufferLength, 'bytes'); ``` ## Reading Data from Buffers To read data back from a buffer, we use `engine.editor.getBufferData()` with the buffer URI, a starting offset, and the number of bytes to read. We first query the buffer length with `engine.editor.getBufferLength()` to determine how much data is available. ```typescript highlight-read-buffer // Demonstrate reading buffer data back const readData = engine.editor.getBufferData(bufferUri, 0, 100); console.log('First 100 bytes of buffer data:', readData); ``` This returns a `Uint8Array` that you can convert back to other typed arrays as needed. Partial reads are supported—you can read any range within the buffer bounds. ## Resizing Buffers You can change a buffer's size at any time with `engine.editor.setBufferLength()`. Increasing the size allocates additional space, while decreasing it truncates the data. Here we demonstrate resizing with a separate demo buffer to avoid truncating our audio data. ```typescript highlight-resize-buffer // Demonstrate resizing a buffer with a separate demo buffer const demoBuffer = engine.editor.createBuffer(); engine.editor.setBufferData( demoBuffer, 0, new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]) ); const demoLength = engine.editor.getBufferLength(demoBuffer); console.log('Demo buffer length before resize:', demoLength); engine.editor.setBufferLength(demoBuffer, demoLength / 2); console.log( 'Demo buffer length after resize:', engine.editor.getBufferLength(demoBuffer) ); engine.editor.destroyBuffer(demoBuffer); ``` Keep in mind that truncating a buffer permanently discards data beyond the new length. Always query the current length first if you need to preserve the original size, or create a copy before resizing. ## Assigning Buffers to Blocks Buffer URIs work like any other resource URI in CE.SDK. We assign them to block properties using `engine.block.setString()`. For audio blocks, we set the `audio/fileURI` property. ```typescript highlight-create-audio-block // Create an audio block const audioBlock = engine.block.create('audio'); // Assign the buffer URI to the audio block engine.block.setString(audioBlock, 'audio/fileURI', bufferUri); // Set audio duration to match the generated samples engine.block.setDuration(audioBlock, duration); // Append the audio block to the page engine.block.appendChild(page, audioBlock); ``` The same approach works for other resource properties: - **Audio blocks**: `audio/fileURI` - **Image fills**: `fill/image/imageFileURI` - **Video fills**: `fill/video/fileURI` Any property that accepts a URI can reference a buffer. ## Transient Resources and Scene Serialization Buffers are transient resources—the URI gets serialized when you save a scene, but the actual binary data does not persist. This means a saved scene will contain references to `buffer://` URIs that won't resolve when the scene is loaded again. We use `engine.editor.findAllTransientResources()` to discover all transient resources in the current scene, including buffers. Each resource includes its URL and size in bytes. ```typescript highlight-find-transient // Find all transient resources (including our buffer) const transientResources = engine.editor.findAllTransientResources(); console.log('Transient resources in scene:'); for (const resource of transientResources) { console.log(` URL: ${resource.URL}, Size: ${resource.size} bytes`); } ``` > **Note:** **Limitations**Buffers are intended for temporary data only.* Buffer data is not part of scene serialization > * Changes to buffers can't be undone using the history system Note that `engine.scene.saveToString()` does NOT include `buffer://` in its default allowed resource schemes, while `engine.block.saveToString()` does include it. You may need to configure the allowed schemes depending on your serialization needs. ## Persisting Buffer Data To permanently save buffer content, you must extract the data, upload it to persistent storage, then update the block references to point to the new URL. This example demonstrates the pattern using a Blob URL—in production, you would upload to a CDN or cloud storage instead. ```typescript highlight-persist-buffer // Demonstrate persisting buffer data using a Blob URL // In production, you would upload to CDN/cloud storage instead const bufferData = engine.editor.getBufferData(bufferUri, 0, bufferLength); const blob = new Blob([new Uint8Array(bufferData)], { type: 'audio/wav' }); const persistentUrl = URL.createObjectURL(blob); // Update all references from buffer:// to the new URL engine.editor.relocateResource(bufferUri, persistentUrl); console.log('Buffer relocated to:', persistentUrl); ``` We read the buffer data, create a persistent URL from it, then use `engine.editor.relocateResource()` to update all references to the old buffer URI throughout the scene. After relocation, you can save the scene and the new persistent URLs will be serialized. ## Troubleshooting **Buffer data not appearing in exported scene** Buffers are transient and don't persist with scene saves. Use `findAllTransientResources()` to identify buffers, then relocate them to persistent storage before exporting. **Memory usage growing unexpectedly** Call `engine.editor.destroyBuffer()` when buffers are no longer needed. Unlike external resources that can be garbage collected, buffers remain in memory until explicitly destroyed. **Data corruption when writing** Ensure the offset plus data length doesn't exceed the intended buffer bounds. Resize the buffer first with `setBufferLength()` if you need more space. **Buffer URI not recognized by block** Verify the buffer was created in the same engine instance. Buffer URIs are not portable between different engine instances or sessions. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design Units" description: "Configure design units (pixels, millimeters, inches) and DPI settings for print-ready output in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/design-units-cc6597/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Design Units](https://img.ly/docs/cesdk/sveltekit/concepts/design-units-cc6597/) --- Control measurement systems for precise physical dimensions—create print-ready documents with millimeter or inch units and configurable DPI for export quality.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-design-units-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-design-units-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-design-units-browser/) Design units determine the coordinate system for all layout values in CE.SDK—positions, sizes, and margins. The engine supports three unit types: **Pixel** for screen-based designs, **Millimeter** for metric print dimensions, and **Inch** for imperial print formats. ```typescript file=@cesdk_web_examples/guides-concepts-design-units-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Design Units Guide * * Demonstrates working with design units in CE.SDK: * - Understanding unit types (Pixel, Millimeter, Inch) * - Getting and setting the design unit * - Configuring DPI for print output * - Setting up print-ready dimensions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 210, height: 297, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the current scene const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Get the current design unit const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Current design unit:', currentUnit); // 'Pixel' by default // Set design unit to Millimeter for print workflow engine.scene.setDesignUnit('Millimeter'); // Verify the change const newUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit changed to:', newUnit); // 'Millimeter' // Set DPI to 300 for print-quality exports // Higher DPI produces higher resolution output engine.block.setFloat(scene, 'scene/dpi', 300); // Verify the DPI setting const dpi = engine.block.getFloat(scene, 'scene/dpi'); // eslint-disable-next-line no-console console.log('DPI set to:', dpi); // 300 // Get the page and set A4 dimensions (210 x 297 mm) const page = engine.block.findByType('page')[0]; // Verify dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // eslint-disable-next-line no-console console.log(`Page dimensions: ${pageWidth}mm x ${pageHeight}mm`); // Create a text block with millimeter dimensions const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position text at 20mm from left, 30mm from top engine.block.setPositionX(textBlock, 20); engine.block.setPositionY(textBlock, 30); // Set text block size to 170mm x 50mm engine.block.setWidth(textBlock, 170); engine.block.setHeight(textBlock, 50); // Add content to the text block engine.block.setString( textBlock, 'text/text', 'This A4 document uses millimeter units with 300 DPI for print-ready output.' ); // Demonstrate unit comparison // At 300 DPI: 1 inch = 300 pixels, 1 mm = ~11.81 pixels // eslint-disable-next-line no-console console.log('Unit comparison at 300 DPI:'); // eslint-disable-next-line no-console console.log( '- A4 width (210mm) will export as', 210 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( '- A4 height (297mm) will export as', 297 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( 'Design units guide initialized. Scene configured for A4 print output.' ); } } export default Example; ``` This guide covers how to get and set design units, configure DPI for export quality, and set up scenes for specific physical dimensions like A4 paper. ## Understanding Design Units ### Supported Unit Types CE.SDK supports three design unit types, each suited for different output scenarios: - **Pixel** — Default unit, ideal for screen-based designs, web graphics, and video content. One unit equals one pixel in the design coordinate space. - **Millimeter** — For print designs targeting metric dimensions (A4, A5, business cards). One unit equals one millimeter at the scene's DPI setting. - **Inch** — For print designs targeting imperial dimensions (letter, legal, US business cards). One unit equals one inch at the scene's DPI setting. ### Design Unit and DPI Relationship DPI (dots per inch) determines how physical units convert to pixels during export. At 300 DPI, a 1-inch block exports as 300 pixels wide. Higher DPI values produce higher-resolution exports suitable for professional printing. For pixel-based scenes, DPI primarily affects font size conversions since font sizes are always specified in points. ## Getting the Current Design Unit Use `engine.scene.getDesignUnit()` to retrieve the current scene's design unit. This returns one of three values: `'Pixel'`, `'Millimeter'`, or `'Inch'`. ```typescript highlight-get-design-unit // Get the current scene const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Get the current design unit const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Current design unit:', currentUnit); // 'Pixel' by default ``` ## Setting the Design Unit Use `engine.scene.setDesignUnit()` to change the measurement system. When you change the design unit, CE.SDK automatically converts existing layout values to maintain visual appearance. ```typescript highlight-set-design-unit // Set design unit to Millimeter for print workflow engine.scene.setDesignUnit('Millimeter'); // Verify the change const newUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit changed to:', newUnit); // 'Millimeter' ``` ## Configuring DPI Access DPI through the scene's `scene/dpi` property. For print workflows, 300 DPI is the standard for high-quality output. ```typescript highlight-configure-dpi // Set DPI to 300 for print-quality exports // Higher DPI produces higher resolution output engine.block.setFloat(scene, 'scene/dpi', 300); // Verify the DPI setting const dpi = engine.block.getFloat(scene, 'scene/dpi'); // eslint-disable-next-line no-console console.log('DPI set to:', dpi); // 300 ``` DPI affects different aspects depending on the design unit: - **Physical units (mm, in)**: DPI determines the pixel resolution of exported files - **Pixel units**: DPI only affects the conversion of font sizes from points to pixels ## Setting Up Print-Ready Designs For print workflows, combine `setDesignUnit()` with appropriate DPI and page dimensions. Here's how to set up an A4 document ready for print export: ```typescript highlight-set-page-dimensions // Get the page and set A4 dimensions (210 x 297 mm) const page = engine.block.findByType('page')[0]; // Verify dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // eslint-disable-next-line no-console console.log(`Page dimensions: ${pageWidth}mm x ${pageHeight}mm`); ``` ## Font Sizes and Design Units Font sizes are always specified in points (`pt`), regardless of the scene's design unit. The DPI setting affects how points convert to pixels for rendering. ```typescript highlight-create-text-block // Create a text block with millimeter dimensions const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Position text at 20mm from left, 30mm from top engine.block.setPositionX(textBlock, 20); engine.block.setPositionY(textBlock, 30); // Set text block size to 170mm x 50mm engine.block.setWidth(textBlock, 170); engine.block.setHeight(textBlock, 50); // Add content to the text block engine.block.setString( textBlock, 'text/text', 'This A4 document uses millimeter units with 300 DPI for print-ready output.' ); ``` When DPI changes, text blocks automatically adjust their rendered size to maintain visual consistency. ## Understanding Export Resolution The relationship between design units and export resolution is important for print workflows: ```typescript highlight-compare-units // Demonstrate unit comparison // At 300 DPI: 1 inch = 300 pixels, 1 mm = ~11.81 pixels // eslint-disable-next-line no-console console.log('Unit comparison at 300 DPI:'); // eslint-disable-next-line no-console console.log( '- A4 width (210mm) will export as', 210 * (300 / 25.4), 'pixels' ); // eslint-disable-next-line no-console console.log( '- A4 height (297mm) will export as', 297 * (300 / 25.4), 'pixels' ); ``` At 300 DPI: - An A4 page (210 × 297 mm) exports as 2480 × 3508 pixels - A letter page (8.5 × 11 in) exports as 2550 × 3300 pixels ## Troubleshooting ### Exported Dimensions Don't Match Expected Size Verify that DPI is set correctly for physical units. At 300 DPI, 1 inch becomes 300 pixels. Check that your design unit matches your target output format. ### Text Appears Wrong Size After Unit Change Font sizes in points auto-adjust based on DPI. If text looks incorrect, verify the DPI setting matches your workflow requirements. ### Blocks Shift Position After Changing Units CE.SDK preserves visual appearance during unit conversion. If positions seem unexpected, check the original coordinate values—the numeric values change but visual positions should remain stable. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Editor State" description: "Control how users interact with content by switching between edit modes like transform, crop, and text." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/edit-modes-1f5b6c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Editor State](https://img.ly/docs/cesdk/sveltekit/concepts/edit-modes-1f5b6c/) --- Editor state determines how users interact with content on the canvas by controlling which editing mode is active and tracking cursor behavior. This guide covers edit modes, state change subscriptions, cursor state, and interaction detection.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-editor-state-browser/) Edit modes define what type of content users can currently modify. Each mode enables different interaction behaviors—Transform mode for moving and resizing, Crop mode for adjusting content within frames, Text mode for inline text editing, and so on. The engine maintains the current edit mode as part of its state and notifies subscribers when it changes. ```typescript file=@cesdk_web_examples/guides-concepts-editor-state-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Editor State Guide * * Demonstrates working with editor state in CE.SDK: * - Understanding edit modes and switching between them * - Subscribing to state changes * - Reading cursor type and rotation * - Tracking text cursor position * - Detecting active interactions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Add an image block to demonstrate Crop mode const imageBlock = engine.block.create('graphic'); engine.block.appendChild(page, imageBlock); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setWidth(imageBlock, 350); engine.block.setHeight(imageBlock, 250); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 175); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); // Add a text block to demonstrate Text mode const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.replaceText(textBlock, 'Edit this text'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 450); engine.block.setPositionY(textBlock, 275); // Subscribe to state changes to track mode transitions // The returned function can be called to unsubscribe when no longer needed const unsubscribeFromStateChanges = engine.editor.onStateChanged(() => { const currentMode = engine.editor.getEditMode(); console.log('Edit mode changed to:', currentMode); // Also log cursor state when state changes const cursorType = engine.editor.getCursorType(); console.log('Current cursor type:', cursorType); }); console.log('State change subscription active'); // Example: Unsubscribe after a delay (in a real app, call when component unmounts) setTimeout(() => { unsubscribeFromStateChanges(); console.log('Unsubscribed from state changes'); }, 10000); // Get the current edit mode (default is Transform) const initialMode = engine.editor.getEditMode(); console.log('Initial edit mode:', initialMode); // Select the image block and switch to Crop mode engine.block.select(imageBlock); engine.editor.setEditMode('Crop'); console.log('Switched to Crop mode on image block'); // After a moment, switch to Transform mode engine.editor.setEditMode('Transform'); console.log('Switched back to Transform mode'); // Create a custom edit mode that inherits from Crop behavior engine.editor.setEditMode('MyCustomCropMode', 'Crop'); console.log( 'Created custom mode based on Crop:', engine.editor.getEditMode() ); // Switch back to Transform for the demo engine.editor.setEditMode('Transform'); // Get the cursor type to display the appropriate mouse cursor const cursorType = engine.editor.getCursorType(); console.log('Cursor type:', cursorType); // Returns: 'Arrow', 'Move', 'MoveNotPermitted', 'Resize', 'Rotate', or 'Text' // Get cursor rotation for directional cursors like resize handles const cursorRotation = engine.editor.getCursorRotation(); console.log('Cursor rotation (radians):', cursorRotation); // Apply to cursor element: transform: rotate(${cursorRotation}rad) // Select the text block and switch to Text mode to get cursor position engine.block.select(textBlock); engine.editor.setEditMode('Text'); // Get text cursor position in screen space const textCursorX = engine.editor.getTextCursorPositionInScreenSpaceX(); const textCursorY = engine.editor.getTextCursorPositionInScreenSpaceY(); console.log('Text cursor position:', { x: textCursorX, y: textCursorY }); // Use these coordinates to position a floating toolbar near the text cursor // Check if a user interaction is currently in progress const isInteracting = engine.editor.unstable_isInteractionHappening(); console.log('Is interaction happening:', isInteracting); // Use this to defer expensive operations during drag/resize operations if (!isInteracting) { console.log('Safe to perform heavy updates'); } // Switch back to Transform mode and select the image for the hero screenshot engine.editor.setEditMode('Transform'); engine.block.select(imageBlock); // Zoom to fit the page engine.scene.enableZoomAutoFit(page, 'Both'); console.log('Editor State guide initialized successfully.'); console.log('Try clicking on blocks to see edit modes change.'); console.log('Double-click on the text block to enter Text mode.'); console.log('Select the image and use the crop handle to enter Crop mode.'); } } export default Example; ``` This guide covers: - Understanding the built-in edit modes (Transform, Crop, Text, Trim, Playback, Vector) - Switching edit modes programmatically - Creating custom edit modes that inherit from built-in modes - Subscribing to state changes for UI synchronization - Reading cursor type and rotation for custom cursors - Tracking text cursor position for overlays - Detecting active user interactions ## Edit Modes CE.SDK supports five built-in edit modes, each designed for a specific type of interaction with canvas content. ### Transform Mode Transform is the default mode that allows users to move, resize, and rotate blocks on the canvas. When a block is selected in Transform mode, control handles appear for manipulation. ```typescript highlight=highlight-get-edit-mode // Get the current edit mode (default is Transform) const initialMode = engine.editor.getEditMode(); console.log('Initial edit mode:', initialMode); ``` Query the current mode using `engine.editor.getEditMode()`. The initial mode is always `'Transform'`. ### Switching Edit Modes Use `engine.editor.setEditMode()` to change the current editing mode. The mode determines what interactions are available on selected blocks. ```typescript highlight=highlight-set-edit-mode // Select the image block and switch to Crop mode engine.block.select(imageBlock); engine.editor.setEditMode('Crop'); console.log('Switched to Crop mode on image block'); // After a moment, switch to Transform mode engine.editor.setEditMode('Transform'); console.log('Switched back to Transform mode'); ``` Available modes include: - **Transform**: Move, resize, and rotate blocks (default) - **Crop**: Adjust media content within block frames - **Text**: Edit text content inline - **Trim**: Adjust clip start and end points (video scenes) - **Playback**: Play video or audio content (limited interactions) - **Vector**: Edit vector path anchor points and bezier handles ### Custom Edit Modes You can create custom modes that inherit behavior from a built-in base mode. Pass an optional second parameter to `setEditMode()` specifying the base mode. ```typescript highlight=highlight-custom-edit-mode // Create a custom edit mode that inherits from Crop behavior engine.editor.setEditMode('MyCustomCropMode', 'Crop'); console.log( 'Created custom mode based on Crop:', engine.editor.getEditMode() ); // Switch back to Transform for the demo engine.editor.setEditMode('Transform'); ``` Custom modes are useful when you need to track application-specific states while maintaining standard editing behavior. For example, you might use a custom mode to indicate that a specific tool is active in your UI while still allowing Transform interactions. ## Subscribing to State Changes The engine notifies subscribers whenever the editor state changes, including mode switches and cursor updates. ### Using onStateChanged Subscribe to state changes using `engine.editor.onStateChanged()`. The callback fires at the end of each engine update where state changed. The subscription returns an unsubscribe function for cleanup. ```typescript highlight=highlight-on-state-changed // Subscribe to state changes to track mode transitions // The returned function can be called to unsubscribe when no longer needed const unsubscribeFromStateChanges = engine.editor.onStateChanged(() => { const currentMode = engine.editor.getEditMode(); console.log('Edit mode changed to:', currentMode); // Also log cursor state when state changes const cursorType = engine.editor.getCursorType(); console.log('Current cursor type:', cursorType); }); console.log('State change subscription active'); // Example: Unsubscribe after a delay (in a real app, call when component unmounts) setTimeout(() => { unsubscribeFromStateChanges(); console.log('Unsubscribed from state changes'); }, 10000); ``` Common use cases include: - Updating toolbar UI to reflect the current mode - Showing mode-specific panels or controls - Disabling certain actions during Playback mode - Logging state transitions for analytics Always call the unsubscribe function when your component unmounts or when you no longer need updates. This prevents memory leaks and unnecessary callback invocations. ## Cursor State The engine tracks what cursor type should be displayed based on the current context and hovered element. Use this information to display the appropriate mouse cursor in your custom UI. ### Reading Cursor Type Use `engine.editor.getCursorType()` to get the cursor type to display. ```typescript highlight=highlight-cursor-type // Get the cursor type to display the appropriate mouse cursor const cursorType = engine.editor.getCursorType(); console.log('Cursor type:', cursorType); // Returns: 'Arrow', 'Move', 'MoveNotPermitted', 'Resize', 'Rotate', or 'Text' ``` The method returns one of these values: - **Arrow**: Default pointer cursor - **Move**: Indicates the element can be moved - **MoveNotPermitted**: Element cannot be moved in the current context - **Resize**: Resize handle is hovered - **Rotate**: Rotation handle is hovered - **Text**: Text editing cursor - **Cell**: Crosshair cursor for precise placement (vector editing) ### Reading Cursor Rotation For directional cursors like resize handles, use `engine.editor.getCursorRotation()` to get the rotation angle in radians. ```typescript highlight=highlight-cursor-rotation // Get cursor rotation for directional cursors like resize handles const cursorRotation = engine.editor.getCursorRotation(); console.log('Cursor rotation (radians):', cursorRotation); // Apply to cursor element: transform: rotate(${cursorRotation}rad) ``` Apply this rotation to your cursor image for correct visual feedback. For example, when hovering over a corner resize handle at 45 degrees, the rotation value reflects that angle so your cursor points in the correct direction. ## Text Cursor Position When in Text edit mode, you can track the text cursor (caret) position for rendering custom overlays or toolbars near the insertion point. ### Screen Space Coordinates Use `engine.editor.getTextCursorPositionInScreenSpaceX()` and `engine.editor.getTextCursorPositionInScreenSpaceY()` to get the cursor position in screen pixels. ```typescript highlight=highlight-text-cursor-position // Select the text block and switch to Text mode to get cursor position engine.block.select(textBlock); engine.editor.setEditMode('Text'); // Get text cursor position in screen space const textCursorX = engine.editor.getTextCursorPositionInScreenSpaceX(); const textCursorY = engine.editor.getTextCursorPositionInScreenSpaceY(); console.log('Text cursor position:', { x: textCursorX, y: textCursorY }); // Use these coordinates to position a floating toolbar near the text cursor ``` These values update as the user moves through text. Use them to position floating toolbars, formatting menus, or other UI elements relative to where the user is editing. ## Detecting Active Interactions Determine whether the user is currently in the middle of an interaction like dragging or resizing. ### Using unstable\_isInteractionHappening Call `engine.editor.unstable_isInteractionHappening()` to check if a user interaction is in progress. ```typescript highlight=highlight-interaction-happening // Check if a user interaction is currently in progress const isInteracting = engine.editor.unstable_isInteractionHappening(); console.log('Is interaction happening:', isInteracting); // Use this to defer expensive operations during drag/resize operations if (!isInteracting) { console.log('Safe to perform heavy updates'); } ``` This is useful for: - Deferring expensive operations until after the interaction completes - Showing different UI states during drag operations - Optimizing performance by batching updates Note that this API is marked unstable and may change in future releases. ## Troubleshooting ### Mode Doesn't Change Visually Ensure a block is selected that supports the target mode. For example, switching to Crop mode requires an image or video block to be selected. Switching to Text mode requires a text block. ### State Change Callback Not Firing Verify the subscription is active before the operation that changes state. If you subscribe after the state change occurs, you won't receive the initial notification. ### Cursor Type Always Arrow Check that the mouse is over an interactive element and the element supports the current edit mode. The cursor type only changes when hovering over actionable areas like handles or selectable content. ### Text Cursor Position is 0,0 Confirm the editor is in Text mode with an active text selection. The text cursor position is only valid when actively editing text content. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Editing Workflow" description: "Control editing access with Creator, Adopter, Viewer, and Presenter roles using global and block-level scopes for tailored permissions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/editing-workflow-032d27/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Editing Workflow](https://img.ly/docs/cesdk/sveltekit/concepts/editing-workflow-032d27/) --- CE.SDK controls editing access through roles and scopes, enabling template workflows where designers create locked layouts and end-users customize only permitted elements.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-editing-workflow-browser/) CE.SDK uses a two-tier permission system: **roles** define user types with preset permissions, while **scopes** control specific capabilities. This enables workflows where templates can be prepared by designers and safely customized by end-users. ```typescript file=@cesdk_web_examples/guides-concepts-editing-workflow-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * Demonstrates CE.SDK's role-based permission system with scopes. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Roles define user types: 'Creator', 'Adopter', 'Viewer', 'Presenter' const role = engine.editor.getRole(); console.log('Current role:', role); // 'Creator' // Configure scopes when role changes (role change resets to defaults) engine.editor.onRoleChanged(() => { // Set global scopes to 'Defer' so block-level scopes take effect engine.editor.setGlobalScope('editor/select', 'Defer'); engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); }); // Get page dimensions for centering const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a locked text block (brand element) const lockedText = engine.block.create('text'); engine.block.replaceText(lockedText, 'Locked Text'); engine.block.setTextFontSize(lockedText, 40); engine.block.setEnum(lockedText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(lockedText, pageWidth); engine.block.setHeightMode(lockedText, 'Auto'); engine.block.setPositionX(lockedText, 0); engine.block.setPositionY(lockedText, pageHeight / 2 - 50); engine.block.appendChild(page, lockedText); // Lock the block - Adopters cannot select, edit, or move it engine.block.setScopeEnabled(lockedText, 'editor/select', false); engine.block.setScopeEnabled(lockedText, 'text/edit', false); engine.block.setScopeEnabled(lockedText, 'layer/move', false); engine.block.setScopeEnabled(lockedText, 'lifecycle/destroy', false); // Create an editable text block (user content) const editableText = engine.block.create('text'); engine.block.replaceText(editableText, 'Editable Text'); engine.block.setTextFontSize(editableText, 40); engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(editableText, pageWidth); engine.block.setHeightMode(editableText, 'Auto'); engine.block.setPositionX(editableText, 0); engine.block.setPositionY(editableText, pageHeight / 2 + 10); engine.block.appendChild(page, editableText); // Center both texts vertically as a group const lockedHeight = engine.block.getFrameHeight(lockedText); const editableHeight = engine.block.getFrameHeight(editableText); const gap = 20; const totalHeight = lockedHeight + gap + editableHeight; const topMargin = (pageHeight - totalHeight) / 2; engine.block.setPositionY(lockedText, topMargin); engine.block.setPositionY(editableText, topMargin + lockedHeight + gap); // Editable block - enable selection and editing engine.block.setScopeEnabled(editableText, 'editor/select', true); engine.block.setScopeEnabled(editableText, 'text/edit', true); engine.block.setScopeEnabled(editableText, 'layer/move', true); // Check resolved permissions (role + global + block scopes) const canEditLocked = engine.block.isAllowedByScope( lockedText, 'text/edit' ); const canEditEditable = engine.block.isAllowedByScope( editableText, 'text/edit' ); // As Creator: both return true (Creators bypass restrictions) console.log( 'Can edit locked:', canEditLocked, 'Can edit editable:', canEditEditable ); // Switch to Adopter to apply restrictions engine.editor.setRole('Adopter'); // Select the editable block to show it's interactive engine.block.select(editableText); } } export default Example; ``` This guide covers: - The four user roles and their purposes - How scopes control editing capabilities - The permission resolution hierarchy - Common template workflow patterns ## Roles Roles define user types with different default permissions: | Role | Purpose | Default Access | |------|---------|----------------| | **Creator** | Designers building templates | Full access to all operations | | **Adopter** | End-users customizing templates | Limited by block-level scopes | | **Viewer** | Preview-only users | Read-only access | | **Presenter** | Slideshow/video presenters | Read-only with playback controls | Creators set the block-level scopes that constrain what Adopters can do. This separation enables brand consistency while allowing personalization. ```typescript highlight-roles // Roles define user types: 'Creator', 'Adopter', 'Viewer', 'Presenter' const role = engine.editor.getRole(); console.log('Current role:', role); // 'Creator' ``` ## Scopes Scopes define specific capabilities organized into categories: - **Text**: Editing content and character formatting - **Fill/Stroke**: Changing colors and shapes - **Layer**: Moving, resizing, rotating, cropping - **Appearance**: Filters, effects, shadows, animations - **Lifecycle**: Deleting and duplicating elements - **Editor**: Adding new elements and selecting ## Global vs Block-Level Scopes **Global scopes** apply editor-wide and determine whether block-level settings are checked: - `'Allow'` — Always permit the operation - `'Deny'` — Always block the operation - `'Defer'` — Check block-level scope settings **Block-level scopes** control permissions on individual blocks. These settings only take effect when the corresponding global scope is set to `'Defer'`. ```typescript highlight-global-scopes // Configure scopes when role changes (role change resets to defaults) engine.editor.onRoleChanged(() => { // Set global scopes to 'Defer' so block-level scopes take effect engine.editor.setGlobalScope('editor/select', 'Defer'); engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); }); ``` To lock a specific block, disable its scopes: ```typescript highlight-block-scopes // Lock the block - Adopters cannot select, edit, or move it engine.block.setScopeEnabled(lockedText, 'editor/select', false); engine.block.setScopeEnabled(lockedText, 'text/edit', false); engine.block.setScopeEnabled(lockedText, 'layer/move', false); engine.block.setScopeEnabled(lockedText, 'lifecycle/destroy', false); ``` ## Permission Resolution Permissions resolve in this order: 1. **Role defaults** — Each role has preset global scope values 2. **Global scope** — If `'Allow'` or `'Deny'`, this is the final answer 3. **Block-level scope** — If global is `'Defer'`, check the block's settings Use `isAllowedByScope()` to check the final computed permission for any block and scope combination: ```typescript highlight-check-permissions // Check resolved permissions (role + global + block scopes) const canEditLocked = engine.block.isAllowedByScope( lockedText, 'text/edit' ); const canEditEditable = engine.block.isAllowedByScope( editableText, 'text/edit' ); // As Creator: both return true (Creators bypass restrictions) console.log( 'Can edit locked:', canEditLocked, 'Can edit editable:', canEditEditable ); ``` ## Template Workflow Pattern A typical template workflow: 1. **Designer (Creator)** creates the template layout 2. **Designer** locks brand elements using block scopes 3. **Designer** keeps personalization fields editable 4. **End-user (Adopter)** opens the template 5. **End-user** edits only permitted elements 6. **End-user** exports the personalized result This pattern ensures brand consistency while enabling personalization. ## Implementation Guides For detailed implementation, see these guides: [Lock Design Elements](https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/) — Step-by-step instructions for locking specific elements in templates [Set Editing Constraints](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) — Configure which properties users can modify --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Events" description: "Subscribe to block creation, update, and deletion events to track changes in your CE.SDK scene." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/events-353f97/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Events](https://img.ly/docs/cesdk/sveltekit/concepts/events-353f97/) --- Monitor and react to block changes in real time by subscribing to creation, update, and destruction events in your CE.SDK scene.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-events-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-events-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-events-browser/) Events enable real-time monitoring of block changes in CE.SDK. When blocks are created, modified, or destroyed, the engine delivers these changes through callback subscriptions at the end of each update cycle. This push-based notification system eliminates the need for polling and enables efficient reactive architectures. ```typescript file=@cesdk_web_examples/guides-concepts-events-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Events Guide * * Demonstrates working with block lifecycle events in CE.SDK: * - Subscribing to all block events * - Filtering events to specific blocks * - Processing Created, Updated, and Destroyed event types * - Event batching and deduplication behavior * - Safe handling of destroyed blocks * - Proper unsubscription for cleanup */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Subscribe to events from all blocks in the scene // Pass an empty array to receive events from every block const unsubscribeAll = engine.event.subscribe([], (events) => { for (const event of events) { console.log( `[All Blocks] ${event.type} event for block ${event.block}` ); } }); // Get the current page to add blocks to const pages = engine.block.findByType('page'); const page = pages[0]; // Create a graphic block - this triggers a Created event const graphic = engine.block.create('graphic'); // Set up the graphic with a shape and fill const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 150); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Add an image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); // Append to page to make it visible engine.block.appendChild(page, graphic); console.log('Created graphic block:', graphic); // Subscribe to events for specific blocks only // This is more efficient when you only care about certain blocks const unsubscribeSpecific = engine.event.subscribe([graphic], (events) => { for (const event of events) { console.log( `[Specific Block] ${event.type} event for block ${event.block}` ); } }); // Modify the block - this triggers Updated events // Due to deduplication, multiple rapid changes result in one Updated event engine.block.setRotation(graphic, 0.1); // Rotate slightly engine.block.setFloat(graphic, 'opacity', 0.9); // Adjust opacity console.log('Modified graphic block - rotation and opacity changed'); // Process events by checking the type property const unsubscribeProcess = engine.event.subscribe([], (events) => { for (const event of events) { switch (event.type) { case 'Created': { // Block was just created - safe to use Block API const blockType = engine.block.getType(event.block); console.log(`Block created with type: ${blockType}`); break; } case 'Updated': { // Block property changed - safe to use Block API console.log(`Block ${event.block} was updated`); break; } case 'Destroyed': { // Block was destroyed - must check validity before using Block API const isValid = engine.block.isValid(event.block); console.log( `Block ${event.block} destroyed, still valid: ${isValid}` ); break; } } } }); // When handling Destroyed events, always check block validity // The block ID is no longer valid after destruction const unsubscribeDestroyed = engine.event.subscribe([], (events) => { for (const event of events) { if (event.type === 'Destroyed') { // IMPORTANT: Check validity before any Block API calls if (engine.block.isValid(event.block)) { // Block is still valid (this shouldn't happen for Destroyed events) console.log('Block is unexpectedly still valid'); } else { // Block is invalid - expected for Destroyed events // Clean up any references to this block ID console.log( `Block ${event.block} has been destroyed and is invalid` ); } } } }); // Create a second block to demonstrate destruction const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.setPositionX(textBlock, 200); engine.block.setPositionY(textBlock, 500); engine.block.setWidth(textBlock, 400); engine.block.setHeight(textBlock, 50); engine.block.setString(textBlock, 'text/text', 'Events Demo'); engine.block.setFloat(textBlock, 'text/fontSize', 48); console.log('Created text block:', textBlock); // Destroy the text block - this triggers a Destroyed event engine.block.destroy(textBlock); console.log('Destroyed text block'); // After destruction, the block ID is no longer valid const isTextBlockValid = engine.block.isValid(textBlock); console.log('Text block still valid after destroy:', isTextBlockValid); // false // Clean up subscriptions when no longer needed // This prevents memory leaks and reduces engine overhead unsubscribeAll(); unsubscribeSpecific(); unsubscribeProcess(); unsubscribeDestroyed(); console.log('Unsubscribed from all event listeners'); // Re-subscribe with a single listener for the demo UI engine.event.subscribe([], (events) => { for (const event of events) { console.log(`Event: ${event.type} - Block: ${event.block}`); } }); console.log('Events guide initialized successfully.'); console.log( 'Demonstrated: subscribing, event types, processing, and cleanup.' ); } } export default Example; ``` This guide covers subscribing to block lifecycle events, processing the three event types (`Created`, `Updated`, `Destroyed`), filtering events to specific blocks, understanding batching and deduplication behavior, and properly cleaning up subscriptions. ## Event Types CE.SDK provides three event types that capture the block lifecycle: - **`Created`**: Fires when a new block is added to the scene - **`Updated`**: Fires when any property of a block changes - **`Destroyed`**: Fires when a block is removed from the scene Each event contains a `block` property with the block ID and a `type` property indicating which event occurred. ## Subscribing to All Blocks Use `engine.event.subscribe()` to register a callback that receives batched events. Pass an empty array to receive events from all blocks in the scene: ```typescript highlight-subscribe-all // Subscribe to events from all blocks in the scene // Pass an empty array to receive events from every block const unsubscribeAll = engine.event.subscribe([], (events) => { for (const event of events) { console.log( `[All Blocks] ${event.type} event for block ${event.block}` ); } }); ``` The callback receives an array of events at the end of each engine update cycle. The function returns an unsubscribe function you should store for cleanup. ## Subscribing to Specific Blocks For better performance when you only care about certain blocks, pass an array of block IDs to filter events: ```typescript highlight-subscribe-specific // Subscribe to events for specific blocks only // This is more efficient when you only care about certain blocks const unsubscribeSpecific = engine.event.subscribe([graphic], (events) => { for (const event of events) { console.log( `[Specific Block] ${event.type} event for block ${event.block}` ); } }); ``` This reduces overhead since the engine only needs to prepare events for the blocks you're tracking. ## Creating Blocks and Handling `Created` Events When you create a block, the engine fires a `Created` event. You can safely use Block API methods on the block ID since the block is valid: ```typescript highlight-event-created // Create a graphic block - this triggers a Created event const graphic = engine.block.create('graphic'); // Set up the graphic with a shape and fill const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); // Position and size the graphic engine.block.setPositionX(graphic, 200); engine.block.setPositionY(graphic, 150); engine.block.setWidth(graphic, 400); engine.block.setHeight(graphic, 300); // Add an image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setEnum(graphic, 'contentFill/mode', 'Cover'); // Append to page to make it visible engine.block.appendChild(page, graphic); console.log('Created graphic block:', graphic); ``` Use `Created` events to initialize tracking, update UI state, or set up additional subscriptions for the new block. ## Updating Blocks and Handling `Updated` Events Modifying any property of a block triggers an `Updated` event. Due to deduplication, you receive at most one `Updated` event per block per engine update cycle, regardless of how many properties changed: ```typescript highlight-event-updated // Modify the block - this triggers Updated events // Due to deduplication, multiple rapid changes result in one Updated event engine.block.setRotation(graphic, 0.1); // Rotate slightly engine.block.setFloat(graphic, 'opacity', 0.9); // Adjust opacity console.log('Modified graphic block - rotation and opacity changed'); ``` Multiple rapid changes to the same block result in a single `Updated` event, making event handling efficient even during complex operations. ## Processing Events by Type Handle each event type appropriately by checking the `type` property. For `Created` and `Updated` events, you can safely use Block API methods. For `Destroyed` events, the block ID is no longer valid: ```typescript highlight-process-events // Process events by checking the type property const unsubscribeProcess = engine.event.subscribe([], (events) => { for (const event of events) { switch (event.type) { case 'Created': { // Block was just created - safe to use Block API const blockType = engine.block.getType(event.block); console.log(`Block created with type: ${blockType}`); break; } case 'Updated': { // Block property changed - safe to use Block API console.log(`Block ${event.block} was updated`); break; } case 'Destroyed': { // Block was destroyed - must check validity before using Block API const isValid = engine.block.isValid(event.block); console.log( `Block ${event.block} destroyed, still valid: ${isValid}` ); break; } } } }); ``` ## Handling `Destroyed` Events Safely When a block is destroyed, the block ID becomes invalid. Calling Block API methods on a destroyed block throws an exception. Always check validity with `engine.block.isValid()` before operations: ```typescript highlight-destroyed-safety // When handling Destroyed events, always check block validity // The block ID is no longer valid after destruction const unsubscribeDestroyed = engine.event.subscribe([], (events) => { for (const event of events) { if (event.type === 'Destroyed') { // IMPORTANT: Check validity before any Block API calls if (engine.block.isValid(event.block)) { // Block is still valid (this shouldn't happen for Destroyed events) console.log('Block is unexpectedly still valid'); } else { // Block is invalid - expected for Destroyed events // Clean up any references to this block ID console.log( `Block ${event.block} has been destroyed and is invalid` ); } } } }); ``` After verifying the block is invalid, you can safely clean up any local references. The destroy operation itself triggers the `Destroyed` event: ```typescript highlight-event-destroyed // Destroy the text block - this triggers a Destroyed event engine.block.destroy(textBlock); console.log('Destroyed text block'); // After destruction, the block ID is no longer valid const isTextBlockValid = engine.block.isValid(textBlock); console.log('Text block still valid after destroy:', isTextBlockValid); // false ``` Use `isValid()` to clean up any references to destroyed blocks in your application state. ## Unsubscribing from Events The `subscribe()` method returns an unsubscribe function. Call it when you no longer need events to prevent memory leaks and reduce engine overhead: ```typescript highlight-unsubscribe // Clean up subscriptions when no longer needed // This prevents memory leaks and reduces engine overhead unsubscribeAll(); unsubscribeSpecific(); unsubscribeProcess(); unsubscribeDestroyed(); console.log('Unsubscribed from all event listeners'); ``` Always unsubscribe when your component unmounts, the editor closes, or you no longer need to track changes. Keeping unnecessary subscriptions active forces the engine to prepare event lists for each subscriber at every update. ## Event Batching and Deduplication Events are collected during an engine update and delivered together at the end. The engine deduplicates events, so you receive at most one `Updated` event per block per update cycle. Event order in the callback does not reflect the actual order of changes within the update. This batching behavior means: - Multiple property changes to a single block result in one `Updated` event - You cannot determine which specific property changed from the event alone - If you need to track specific property changes, compare against cached values ## Use Cases Events support various reactive patterns in CE.SDK applications: - **Syncing external state**: Keep state management systems (Redux, MobX, Zustand) synchronized with scene changes - **Building reactive UIs**: Update UI components when blocks change without polling - **Tracking changes for undo/redo**: Monitor all block changes for custom history implementations - **Validating scene constraints**: React to block creation or property changes to enforce design rules ## Troubleshooting **Events not firing**: Ensure you haven't unsubscribed prematurely. Verify the blocks you're filtering to still exist. **Exception on `Destroyed` event**: Never call Block API methods on a destroyed block without first checking `engine.block.isValid()`. **Missing events**: Events are deduplicated—multiple rapid changes to the same property result in one `Updated` event. **Memory leaks**: Store the unsubscribe function and call it during cleanup. Forgetting to unsubscribe keeps listeners active. **Event order confusion**: Don't rely on event array order within a single callback—it doesn't reflect chronological order of changes. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Headless" description: "Run headless CE.SDK's Engine inside a browser-based app." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) --- CreativeEditor SDK (CE.SDK) **Headless Mode** allows your web app to control the Engine API without loading the built-in user interface. Instead of starting the full editor with panels and toolbars, your browser code talks directly to the Engine. That keeps the experience within your own design system—ideal for automation running on the client. ## Common Use Cases - **Automating workflows:** Merge data into templates or generate variations with no user input. - **Automated exports:** Render custom images or videos in the browser and hand them off to storage or your backend. - **Custom interfaces:** Embed the Engine beneath your own UI components. - **Background actions:** Run batch jobs or event-driven edits without overlaying the default UI. ### When to Use Headless Mode ## How Headless Mode Works The standard editor wires UI events (button clicks, drag interactions) to the Engine under the hood. In headless mode, you call the same Engine APIs yourself. ### Features Available in Headless Mode In headless mode, you keep access to the CE.SDK features while staying entirely within your app’s DOM lifecycle, such as: - Scene management - Asset manipulation - Rendering and export - Templates and dynamic content ### Requirements to Run the CreativeEngine in the Client CE.SDK’s Engine needs a **WebGL-capable environment**. When you ship a headless build in the browser: - Point the `baseURL` in your config at a publicly reachable asset directory (CDN or self-hosted) so the browser can load fonts and other Engine files—even when you install the npm package. - Only start the Engine **after the DOM is available** (for example, inside `useEffect`, `mounted`, or `DOMContentLoaded`). - **Dispose** of the Engine during tear down with `engine.dispose()` to release WebGL resources. - Ensure iframes or workers that boot the Engine expose `document` and a WebGL context. ## Set Up Headless Mode in a Web App 1. Install the Engine package: ```bash npm install @cesdk/engine ``` ```` 2. Configure your license and asset location. The global CDN works for prototypes; production apps commonly self-host the asset bundle for faster loads. ```ts const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets' }; ```` 3. Start the Engine from client-side code and reuse the instance across interactions. > **Tip:** The CreativeEngine doesn’t attach a canvas automatically. If you want a live preview, append `engine.element` onto your own layout. ## Quick Start: Initialize the Engine Headlessly When you import `@cesdk/engine`, you get the same runtime that powers the full editor. Using the CreativeEngine instead of the CreativeEditor allows you to expose the Engine interface while skipping all UI bootstrapping that comes with the editor. ```js import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets' }; let engine; export async function getEngine() { if (!engine) { engine = await CreativeEngine.init(config); } return engine; } ``` Once started, you can trigger Engine operations inside your app logic from: - Buttons - Keyboard shortcuts - Background tasks ## Example: Build and Export a Scene on a Single Click The workflow below wires the Engine to a button, so the user automatically downloads an edited PNG when clicking on a button: 1. Copy paste the following code (adjust to your stack as needed): ```js // Grab the button element const downloadButton = document.querySelector('#download-headless'); // Register an async click handler downloadButton?.addEventListener('click', async () => { // Wait for the Engine const engine = await getEngine(); // Build a fresh scene const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); // Attach the page to the scene engine.block.appendChild(scene, page); // Add an image layer const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); // Load an image fill from the CDN engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); // Set position and dimensions engine.block.setPosition(imageBlock, 100, 100); engine.block.setWidth(imageBlock, 300); engine.block.setHeight(imageBlock, 300); // Append the image to the page engine.block.appendChild(page, imageBlock); // Add a text layer const textBlock = engine.block.create('text'); // Set the text content engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!'); // Set position and dimensions engine.block.setPosition(textBlock, 100, 450); engine.block.setWidth(textBlock, 600); // Append the text to the page engine.block.appendChild(page, textBlock); // Export the page as a PNG const exportResult = await engine.block.export(page, 'image/png'); // Normalize the result to a blob const blob = exportResult instanceof Blob ? exportResult : new Blob([exportResult], { type: 'image/png' }); triggerDownload(blob, 'headless-output.png'); }); function triggerDownload(blob, filename) { // Build a temporary object URL const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); // Start the download on click link.click(); // Revoke the link and URL to release resources document.body.removeChild(link); URL.revokeObjectURL(url); } ``` 2. Add a clickable element with the matching ID somewhere in your page’s markup. For example: ```js Download headless export ``` If you’re in a component-based setup (React, Vue, Svelte, etc.), include the same button inside the component’s render/template: ```js return ( Download headless export ); ``` Once that element is in the DOM, the snippet’s querySelector('#download-headless') finds it and wires up the click handler that runs the export.

See full module

```js import CreativeEngine from '@cesdk/engine'; const config = { license: '', baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets' }; let engine; export async function getEngine() { if (!engine) { engine = await CreativeEngine.init(config); } return engine; } const downloadButton = document.querySelector('#download-headless'); downloadButton?.addEventListener('click', async () => { const engine = await getEngine(); const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setPosition(imageBlock, 100, 100); engine.block.setWidth(imageBlock, 300); engine.block.setHeight(imageBlock, 300); engine.block.appendChild(page, imageBlock); const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!'); engine.block.setPosition(textBlock, 100, 450); engine.block.setWidth(textBlock, 600); engine.block.appendChild(page, textBlock); const exportResult = await engine.block.export(page, 'image/png'); const blob = exportResult instanceof Blob ? exportResult : new Blob([exportResult], { type: 'image/png' }); triggerDownload(blob, 'headless-output.png'); }); function triggerDownload(blob, filename) { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } ```

After you add the script to your app and run the dev server: 1. Click the `#download-headless` button in your interface. 2. The Engine assembles the scene in memory and exports it as a PNG. 3. The PNG downloads locally (or you can upload it to your backend). ## Go Further Need a hybrid approach? [Engine interface guides](https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/) show how to combine headless logic with the standard editor UI. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Pages" description: "Pages structure scenes in CE.SDK and must share the same dimensions to ensure consistent rendering." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/pages-7b6bae/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Pages](https://img.ly/docs/cesdk/sveltekit/concepts/pages-7b6bae/) --- Pages define the format of your designs—every graphic block, text element, and media file lives inside a page. This guide covers how pages fit into the scene hierarchy, their properties like margins and title templates, and how to configure page dimensions for different layout modes.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-pages-browser/) Pages provide the canvas and frame for your designs. Whether you're building a multi-page document, a social media carousel, or a video composition, understanding how pages work will help you with structuring your content correctly. ```typescript file=@cesdk_web_examples/guides-concepts-pages-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Pages Guide * * Demonstrates working with pages in CE.SDK: * - Understanding the scene hierarchy (Scene → Pages → Blocks) * - Creating and managing multiple pages * - Setting page dimensions at the scene level * - Configuring page properties (margins, title templates, fills) * - Navigating between pages */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a scene with VerticalStack layout for multi-page designs engine.scene.create('VerticalStack'); // Get the stack container to configure spacing const [stack] = engine.block.findByType('stack'); engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Get the scene to set page dimensions const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Set page dimensions at the scene level (all pages share these dimensions) engine.block.setFloat(scene, 'scene/pageDimensions/width', 800); engine.block.setFloat(scene, 'scene/pageDimensions/height', 600); // Create the first page and set its dimensions const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Create the second page with the same dimensions const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add an image block to the first page const imageBlock = engine.block.create('graphic'); engine.block.appendChild(firstPage, imageBlock); // Create a rect shape for the graphic block const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Configure size and position after appending to the page engine.block.setWidth(imageBlock, 400); engine.block.setHeight(imageBlock, 300); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Create and configure the image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); // Add a text block to the second page const textBlock = engine.block.create('text'); engine.block.appendChild(secondPage, textBlock); // Configure text properties after appending to the page engine.block.replaceText(textBlock, 'Page 2'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Center the text on the page const textWidth = engine.block.getFrameWidth(textBlock); const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionX(textBlock, (800 - textWidth) / 2); engine.block.setPositionY(textBlock, (600 - textHeight) / 2); // Configure page properties on the first page // Enable and set margins for print bleed engine.block.setBool(firstPage, 'page/marginEnabled', true); engine.block.setFloat(firstPage, 'page/margin/top', 10); engine.block.setFloat(firstPage, 'page/margin/bottom', 10); engine.block.setFloat(firstPage, 'page/margin/left', 10); engine.block.setFloat(firstPage, 'page/margin/right', 10); // Set a custom title template for the first page engine.block.setString(firstPage, 'page/titleTemplate', 'Cover'); // Set a custom title template for the second page engine.block.setString(secondPage, 'page/titleTemplate', 'Content'); // Set a background fill on the second page const colorFill = engine.block.createFill('color'); engine.block.setColor(colorFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); engine.block.setFill(secondPage, colorFill); // Demonstrate finding pages const allPages = engine.scene.getPages(); console.log('All pages:', allPages); console.log('Number of pages:', allPages.length); // Get the current page (nearest to viewport center or containing selection) const currentPage = engine.scene.getCurrentPage(); console.log('Current page:', currentPage); // Alternative: Find pages using block API const pagesByType = engine.block.findByType('page'); console.log('Pages found by type:', pagesByType); // Select the first page and zoom to fit engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); console.log('Pages guide initialized with a 2-page design.'); } } export default Example; ``` This guide covers: - Understanding the scene hierarchy: Scene → Pages → Blocks - Creating and managing multiple pages - Setting page dimensions at the scene level - Configuring page properties like margins and title templates - Navigating between pages programmatically ## Pages in the Scene Hierarchy In CE.SDK, content follows a strict hierarchy: a **scene** contains **pages**, and pages contain **content blocks**. Only blocks attached to a page are rendered on the canvas. ```typescript highlight=highlight-create-scene // Create a scene with VerticalStack layout for multi-page designs engine.scene.create('VerticalStack'); // Get the stack container to configure spacing const [stack] = engine.block.findByType('stack'); engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` When you create a scene with a layout mode like `VerticalStack`, pages are automatically arranged according to that mode. Create pages using `engine.block.create('page')`, set their dimensions with `setWidth()` and `setHeight()`, then attach them to the scene (or its stack container) with `engine.block.appendChild()`. ```typescript highlight=highlight-create-pages // Create the first page and set its dimensions const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Create the second page with the same dimensions const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); ``` Content blocks must be added as children of a page to render. For graphic blocks, set both a shape and a fill for content to display. Append blocks to the page before configuring their properties. ```typescript highlight=highlight-add-content // Add an image block to the first page const imageBlock = engine.block.create('graphic'); engine.block.appendChild(firstPage, imageBlock); // Create a rect shape for the graphic block const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Configure size and position after appending to the page engine.block.setWidth(imageBlock, 400); engine.block.setHeight(imageBlock, 300); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Create and configure the image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); // Add a text block to the second page const textBlock = engine.block.create('text'); engine.block.appendChild(secondPage, textBlock); // Configure text properties after appending to the page engine.block.replaceText(textBlock, 'Page 2'); engine.block.setTextFontSize(textBlock, 48); engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Center the text on the page const textWidth = engine.block.getFrameWidth(textBlock); const textHeight = engine.block.getFrameHeight(textBlock); engine.block.setPositionX(textBlock, (800 - textWidth) / 2); engine.block.setPositionY(textBlock, (600 - textHeight) / 2); ``` ## Page Dimensions and Consistency The CE.SDK engine supports pages with different dimensions. When using stacked layout modes (VerticalStack, HorizontalStack), the Editor UI expects all pages to share the same size. However, with the `Free` layout mode, you can set different dimensions for each page in the UI. ```typescript highlight=highlight-set-dimensions // Get the scene to set page dimensions const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } // Set page dimensions at the scene level (all pages share these dimensions) engine.block.setFloat(scene, 'scene/pageDimensions/width', 800); engine.block.setFloat(scene, 'scene/pageDimensions/height', 600); ``` You can set default page dimensions at the scene level using `engine.block.setFloat()` with `scene/pageDimensions/width` and `scene/pageDimensions/height`. The `scene/aspectRatioLock` property controls whether changing one dimension automatically adjusts the other. Individual pages can also have their dimensions set directly with `setWidth()` and `setHeight()`. ## Finding and Navigating Pages CE.SDK provides several methods to locate and navigate between pages in your scene. ```typescript highlight=highlight-find-pages // Demonstrate finding pages const allPages = engine.scene.getPages(); console.log('All pages:', allPages); console.log('Number of pages:', allPages.length); // Get the current page (nearest to viewport center or containing selection) const currentPage = engine.scene.getCurrentPage(); console.log('Current page:', currentPage); // Alternative: Find pages using block API const pagesByType = engine.block.findByType('page'); console.log('Pages found by type:', pagesByType); ``` Use these methods based on your needs: - `engine.scene.getPages()` returns all pages in sorted order - `engine.scene.getCurrentPage()` returns the page containing the current selection, or the page nearest to the viewport center - `engine.block.findByType('page')` finds all page blocks in the scene - `engine.scene.findNearestToViewPortCenterByType('page')` returns pages sorted by their distance from the viewport center ## Page Properties Each page has its own properties that control its appearance and behavior. These are set on the page block itself, not on the scene. ### Margins Page margins define bleed areas useful for print designs. Enable margins and configure each side individually: ```typescript highlight=highlight-page-properties // Configure page properties on the first page // Enable and set margins for print bleed engine.block.setBool(firstPage, 'page/marginEnabled', true); engine.block.setFloat(firstPage, 'page/margin/top', 10); engine.block.setFloat(firstPage, 'page/margin/bottom', 10); engine.block.setFloat(firstPage, 'page/margin/left', 10); engine.block.setFloat(firstPage, 'page/margin/right', 10); // Set a custom title template for the first page engine.block.setString(firstPage, 'page/titleTemplate', 'Cover'); // Set a custom title template for the second page engine.block.setString(secondPage, 'page/titleTemplate', 'Content'); ``` Set `page/marginEnabled` to `true` to enable margins, then use `page/margin/top`, `page/margin/bottom`, `page/margin/left`, and `page/margin/right` to configure each side. ### Title Template The `page/titleTemplate` property defines the display label shown for each page. It supports template variables like `{{ubq.page_index}}` for dynamic numbering. The default value is `"Page {{ubq.page_index}}"`. You can customize this to show labels like "Slide 1", "Cover", or any custom text. ### Fill and Background Pages support fills for background colors or images using the standard fill system. ```typescript highlight=highlight-page-background // Set a background fill on the second page const colorFill = engine.block.createFill('color'); engine.block.setColor(colorFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); engine.block.setFill(secondPage, colorFill); ``` Create a fill using `engine.block.createFill('color')` or `engine.block.createFill('image')`, configure its properties, then apply it to the page with `engine.block.setFill(page, fill)`. ## Page Layout Modes The scene's layout mode controls how multiple pages are arranged. Set this using `engine.block.setEnum()` on the scene with the `scene/layout` property: - **VerticalStack** (default): Pages stack vertically, one below the other - **HorizontalStack**: Pages arrange horizontally, side by side - **DepthStack**: Pages overlay each other, typically used for video editing - **Free**: Pages can be positioned freely without automatic arrangement ## Pages for Static Designs vs. Video Editing Page behavior varies depending on how the scene is used. ### Static Designs For static designs, pages act like artboards. Each page is a separate canvas ideal for multi-page documents, social media posts, or print layouts. Pages exist side by side and don't have time-based properties. ### Video Editing For video editing, pages represent time-based compositions that transition sequentially during playback. Each page has playback properties: - `playback/duration` controls how long the page appears (in seconds) - `playback/time` tracks the current playback position ## Troubleshooting ### Content Not Visible If content blocks aren't appearing, check these common causes: - Verify the block is attached to a page with `engine.block.appendChild(page, block)` - For graphic blocks, ensure both a shape and fill are set - Append blocks to the page before setting their size and position ### Dimension Inconsistencies If pages appear at unexpected sizes when using stacked layouts, ensure all pages have consistent dimensions. With `Free` layout mode, pages can have different sizes. Set dimensions on individual pages using `setWidth()` and `setHeight()`. ### Page Not Found If `engine.scene.getPages()` returns an empty array, ensure a scene is loaded first. In headless mode, you must create both the scene and pages manually before querying them. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resources" description: "Learn how CE.SDK loads and manages external media files, including preloading for performance, handling transient data, and relocating resources when URLs change." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/resources-a58d71/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Resources](https://img.ly/docs/cesdk/sveltekit/concepts/resources-a58d71/) --- Manage external media files—images, videos, audio, and fonts—that blocks reference via URIs in CE.SDK.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-resources-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-resources-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-resources-browser/) Resources are external media files that blocks reference through URI properties like `fill/image/imageFileURI` or `fill/video/fileURI`. CE.SDK loads resources automatically when needed, but you can preload them for better performance. When working with temporary data like buffers or blobs, you need to persist them before saving. If resource URLs change (such as during CDN migration), you can update the mappings without modifying scene data. ```typescript file=@cesdk_web_examples/guides-concepts-resources-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Resources Guide * * Demonstrates resource management in CE.SDK: * - On-demand resource loading * - Preloading resources with forceLoadResources() * - Preloading audio/video with forceLoadAVResource() * - Finding transient resources * - Persisting transient resources during save * - Relocating resources when URLs change * - Finding all media URIs in a scene * - Detecting MIME types */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } const pages = engine.block.findByType('page'); const page = pages[0]; // Layout configuration: two blocks with equal margins const margin = 30; const gap = 20; const blockWidth = 300; const blockHeight = 200; // Set page dimensions to hug the blocks const pageWidth = margin + blockWidth + gap + blockWidth + margin; const pageHeight = margin + blockHeight + margin; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Create a graphic block with an image fill // Resources are loaded on-demand when the engine renders the block const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setPositionX(imageBlock, margin); engine.block.setPositionY(imageBlock, margin); engine.block.setWidth(imageBlock, blockWidth); engine.block.setHeight(imageBlock, blockHeight); // Create an image fill - the image loads when the block is rendered const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setEnum(imageBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, imageBlock); console.log('Created image block - resource loads on-demand when rendered'); // Preload all resources in the scene before rendering // This ensures resources are cached and ready for display console.log('Preloading all resources in the scene...'); await engine.block.forceLoadResources([scene]); console.log('All resources preloaded successfully'); // Preload specific blocks only (useful for optimizing load order) await engine.block.forceLoadResources([imageBlock]); console.log('Image block resources preloaded'); // Create a second graphic block for video const videoBlock = engine.block.create('graphic'); const videoShape = engine.block.createShape('rect'); engine.block.setShape(videoBlock, videoShape); engine.block.setPositionX(videoBlock, margin + blockWidth + gap); engine.block.setPositionY(videoBlock, margin); engine.block.setWidth(videoBlock, blockWidth); engine.block.setHeight(videoBlock, blockHeight); // Create a video fill const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ); engine.block.setFill(videoBlock, videoFill); engine.block.setEnum(videoBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, videoBlock); // Preload video resource to query its properties console.log('Preloading video resource...'); await engine.block.forceLoadAVResource(videoFill); console.log('Video resource preloaded'); // Now we can query video properties const videoDuration = engine.block.getAVResourceTotalDuration(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); console.log( `Video properties - Duration: ${videoDuration}s, Size: ${videoWidth}x${videoHeight}` ); // Find all transient resources that need persistence before export // Transient resources include buffers and blobs that won't survive serialization const transientResources = engine.editor.findAllTransientResources(); console.log(`Found ${transientResources.length} transient resources`); for (const resource of transientResources) { console.log( `Transient: URL=${resource.URL}, Size=${resource.size} bytes` ); } // Get all media URIs referenced in the scene // Useful for pre-fetching or validating resource availability const mediaURIs = engine.editor.findAllMediaURIs(); console.log(`Scene contains ${mediaURIs.length} media URIs:`); for (const uri of mediaURIs) { console.log(` - ${uri}`); } // Detect the MIME type of a resource // This downloads the resource if not already cached const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg'; const mimeType = await engine.editor.getMimeType(imageUri); console.log(`MIME type of ${imageUri}: ${mimeType}`); // Relocate a resource when its URL changes // This updates the internal cache mapping without modifying scene data const oldUrl = 'https://example.com/old-location/image.jpg'; const newUrl = 'https://cdn.example.com/new-location/image.jpg'; // In a real scenario, you would relocate after uploading to a new location: // engine.editor.relocateResource(oldUrl, newUrl); console.log(`Resource relocation example: ${oldUrl} -> ${newUrl}`); console.log('Use relocateResource() after uploading to a CDN'); // When saving, use onDisallowedResourceScheme to handle transient resources // This callback is called for each resource with a disallowed scheme (like buffer: or blob:) const sceneString = await engine.block.saveToString( [scene], ['http', 'https'], // Only allow http and https URLs async (url: string) => { // In a real app, upload the resource and return the permanent URL // const response = await uploadToCDN(url); // return response.permanentUrl; // For this example, we'll just log the URL console.log(`Would upload transient resource: ${url}`); // Return the original URL since we're not actually uploading return url; } ); console.log(`Scene saved to string (${sceneString.length} characters)`); // Set playback time to show video content in the scene engine.block.setPlaybackTime(page, 2); console.log('Resources guide initialized successfully.'); console.log( 'Demonstrated: on-demand loading, preloading, transient resources, and relocation.' ); } } export default Example; ``` This guide covers on-demand and preloaded resource loading, identifying and persisting transient resources, relocating resources when URLs change, and discovering all media URIs in a scene. ## On-Demand Loading The engine fetches resources automatically when rendering blocks or preparing exports. This approach requires no extra code but may delay the initial render while resources download. ```typescript highlight-on-demand-loading // Get the current scene and page const scene = engine.scene.get(); if (scene === null) { throw new Error('No scene available'); } const pages = engine.block.findByType('page'); const page = pages[0]; // Layout configuration: two blocks with equal margins const margin = 30; const gap = 20; const blockWidth = 300; const blockHeight = 200; // Set page dimensions to hug the blocks const pageWidth = margin + blockWidth + gap + blockWidth + margin; const pageHeight = margin + blockHeight + margin; engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Create a graphic block with an image fill // Resources are loaded on-demand when the engine renders the block const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); engine.block.setPositionX(imageBlock, margin); engine.block.setPositionY(imageBlock, margin); engine.block.setWidth(imageBlock, blockWidth); engine.block.setHeight(imageBlock, blockHeight); // Create an image fill - the image loads when the block is rendered const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setEnum(imageBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, imageBlock); console.log('Created image block - resource loads on-demand when rendered'); ``` When you create a block with an image fill, the image doesn't load immediately. The engine fetches it when the block first renders on the canvas. ## Preloading Resources Load resources before they're needed with `forceLoadResources()`. Pass block IDs to load resources for those blocks and their children. Preloading eliminates render delays and is useful when you want the scene fully ready before displaying it. ```typescript highlight-preload-resources // Preload all resources in the scene before rendering // This ensures resources are cached and ready for display console.log('Preloading all resources in the scene...'); await engine.block.forceLoadResources([scene]); console.log('All resources preloaded successfully'); // Preload specific blocks only (useful for optimizing load order) await engine.block.forceLoadResources([imageBlock]); console.log('Image block resources preloaded'); ``` Pass the scene to preload all resources in the entire design, or pass specific blocks to load only what you need. ## Preloading Audio and Video Audio and video resources require `forceLoadAVResource()` for full metadata access. The engine needs to download and parse media files before you can query properties like duration or dimensions. ```typescript highlight-preload-av // Create a second graphic block for video const videoBlock = engine.block.create('graphic'); const videoShape = engine.block.createShape('rect'); engine.block.setShape(videoBlock, videoShape); engine.block.setPositionX(videoBlock, margin + blockWidth + gap); engine.block.setPositionY(videoBlock, margin); engine.block.setWidth(videoBlock, blockWidth); engine.block.setHeight(videoBlock, blockHeight); // Create a video fill const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ); engine.block.setFill(videoBlock, videoFill); engine.block.setEnum(videoBlock, 'contentFill/mode', 'Cover'); engine.block.appendChild(page, videoBlock); // Preload video resource to query its properties console.log('Preloading video resource...'); await engine.block.forceLoadAVResource(videoFill); console.log('Video resource preloaded'); // Now we can query video properties const videoDuration = engine.block.getAVResourceTotalDuration(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); console.log( `Video properties - Duration: ${videoDuration}s, Size: ${videoWidth}x${videoHeight}` ); ``` Without preloading, properties like `getAVResourceTotalDuration()` or `getVideoWidth()` may return zero or incomplete values. ## Finding Transient Resources Transient resources are temporary data stored in buffers or blobs that won't survive scene serialization. Use `findAllTransientResources()` to discover them before saving. ```typescript highlight-find-transient // Find all transient resources that need persistence before export // Transient resources include buffers and blobs that won't survive serialization const transientResources = engine.editor.findAllTransientResources(); console.log(`Found ${transientResources.length} transient resources`); for (const resource of transientResources) { console.log( `Transient: URL=${resource.URL}, Size=${resource.size} bytes` ); } ``` Each entry includes the resource URL and its size in bytes. Common transient resources include images from clipboard paste operations, camera captures, or programmatically generated content. ## Finding Media URIs Get all media file URIs referenced in a scene with `findAllMediaURIs()`. This returns a deduplicated list of URIs from image fills, video fills, audio blocks, and other media sources. ```typescript highlight-find-media-uris // Get all media URIs referenced in the scene // Useful for pre-fetching or validating resource availability const mediaURIs = engine.editor.findAllMediaURIs(); console.log(`Scene contains ${mediaURIs.length} media URIs:`); for (const uri of mediaURIs) { console.log(` - ${uri}`); } ``` Use this for pre-fetching resources, validating availability, or building a manifest of all assets in a design. ## Detecting MIME Types Determine a resource's content type with `getMimeType()`. The engine downloads the resource if it's not already cached. ```typescript highlight-detect-mime-type // Detect the MIME type of a resource // This downloads the resource if not already cached const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg'; const mimeType = await engine.editor.getMimeType(imageUri); console.log(`MIME type of ${imageUri}: ${mimeType}`); ``` Common return values include `image/jpeg`, `image/png`, `video/mp4`, and `audio/mpeg`. This is useful when you need to verify resource types or make format-dependent decisions. ## Relocating Resources Update URL mappings when resources move with `relocateResource()`. This modifies the internal cache without changing scene data. ```typescript highlight-relocate-resource // Relocate a resource when its URL changes // This updates the internal cache mapping without modifying scene data const oldUrl = 'https://example.com/old-location/image.jpg'; const newUrl = 'https://cdn.example.com/new-location/image.jpg'; // In a real scenario, you would relocate after uploading to a new location: // engine.editor.relocateResource(oldUrl, newUrl); console.log(`Resource relocation example: ${oldUrl} -> ${newUrl}`); console.log('Use relocateResource() after uploading to a CDN'); ``` Use relocation after uploading resources to a CDN or when migrating assets between storage locations. The scene continues to reference the original URL, but the engine fetches from the new location. ## Persisting Transient Resources Handle transient resources during save with the `onDisallowedResourceScheme` callback in `saveToString()`. The callback receives each resource URL with a disallowed scheme (like `buffer:` or `blob:`) and returns the permanent URL after uploading. ```typescript highlight-persist-transient // When saving, use onDisallowedResourceScheme to handle transient resources // This callback is called for each resource with a disallowed scheme (like buffer: or blob:) const sceneString = await engine.block.saveToString( [scene], ['http', 'https'], // Only allow http and https URLs async (url: string) => { // In a real app, upload the resource and return the permanent URL // const response = await uploadToCDN(url); // return response.permanentUrl; // For this example, we'll just log the URL console.log(`Would upload transient resource: ${url}`); // Return the original URL since we're not actually uploading return url; } ); console.log(`Scene saved to string (${sceneString.length} characters)`); ``` This pattern lets you intercept temporary resources, upload them to permanent storage, and save the scene with stable URLs that will work when reloaded. ## Troubleshooting **Slow initial render**: Preload resources with `forceLoadResources()` before displaying the scene. **Export fails with missing resources**: Check `findAllTransientResources()` and persist any temporary resources before export. **Video duration returns 0**: Ensure the video resource is loaded with `forceLoadAVResource()` before querying properties. **Resources not found after reload**: Transient resources (buffers, blobs) are not serialized—relocate them to persistent URLs before saving. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scenes" description: "Create, configure, save, and load scenes—the root container for all design elements in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/) --- Scenes are the root container for all designs in CE.SDK. They hold pages, blocks, and the camera that controls what you see in the canvas—and the engine manages only one active scene at a time.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-scenes-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-scenes-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-scenes-browser/) Every design you create starts with a scene. Scenes contain pages, and pages contain the visible design elements—text, images, shapes, and other blocks. Understanding how scenes work is essential for building, saving, and restoring user designs. ```typescript file=@cesdk_web_examples/guides-concepts-scenes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Scenes Guide * * Demonstrates the complete scene lifecycle in CE.SDK: * - Creating scenes with different layouts * - Managing pages within scenes * - Configuring scene properties * - Saving and loading scenes * - Camera control and zoom */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a new design scene with VerticalStack layout // The layout controls how pages are arranged in the canvas engine.scene.create('VerticalStack'); // Get the stack container and add spacing between pages const stack = engine.block.findByType('stack')[0]; engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const page1 = engine.block.create('page'); engine.block.setWidth(page1, 800); engine.block.setHeight(page1, 600); engine.block.appendChild(stack, page1); // Create a second page const page2 = engine.block.create('page'); engine.block.setWidth(page2, 800); engine.block.setHeight(page2, 600); engine.block.appendChild(stack, page2); // Add a shape to the first page const graphic1 = engine.block.create('graphic'); engine.block.setShape(graphic1, engine.block.createShape('rect')); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setFill(graphic1, fill1); engine.block.setWidth(graphic1, 400); engine.block.setHeight(graphic1, 300); engine.block.setPositionX(graphic1, 200); engine.block.setPositionY(graphic1, 150); engine.block.appendChild(page1, graphic1); // Add a different shape to the second page const graphic2 = engine.block.create('graphic'); engine.block.setShape(graphic2, engine.block.createShape('ellipse')); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.2, a: 1 }); engine.block.setFill(graphic2, fill2); engine.block.setWidth(graphic2, 350); engine.block.setHeight(graphic2, 350); engine.block.setPositionX(graphic2, 225); engine.block.setPositionY(graphic2, 125); engine.block.appendChild(page2, graphic2); // Query scene properties const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Scene design unit:', currentUnit); // Get the scene layout const layout = engine.scene.getLayout(); // eslint-disable-next-line no-console console.log('Scene layout:', layout); // Access pages within the scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log('Number of pages:', pages.length); // Get the current page (nearest to viewport center) const currentPage = engine.scene.getCurrentPage(); // eslint-disable-next-line no-console console.log('Current page ID:', currentPage); // Zoom to show all pages in the scene const scene = engine.scene.get(); if (scene) { await engine.scene.zoomToBlock(scene, { padding: 50 }); } // Get the current zoom level const zoomLevel = engine.scene.getZoomLevel(); // eslint-disable-next-line no-console console.log('Current zoom level:', zoomLevel); // Save the scene to a string for persistence const sceneString = await engine.scene.saveToString(); // eslint-disable-next-line no-console console.log('Scene saved successfully. String length:', sceneString.length); // Demonstrate loading the scene from the saved string // This replaces the current scene with the saved version await engine.scene.loadFromString(sceneString); // eslint-disable-next-line no-console console.log('Scene loaded from saved string'); // Zoom to show all loaded pages const loadedScene = engine.scene.get(); if (loadedScene) { await engine.scene.zoomToBlock(loadedScene, { padding: 50 }); } // eslint-disable-next-line no-console console.log('Scenes guide initialized successfully.'); } } export default Example; ``` This guide covers how to create scenes from scratch, manage pages within scenes, configure scene properties, save and load designs, and control the camera's zoom and position. ## Scene Hierarchy Scenes form the root of CE.SDK's design structure. The hierarchy works as follows: - **Scene** — The root container holding all design content - **Pages** — Direct children of scenes, arranged according to the scene's layout - **Blocks** — Design elements (text, images, shapes) that belong to pages Only blocks attached to pages within the active scene are rendered in the canvas. Use `engine.scene.get()` to retrieve the current scene and `engine.scene.getPages()` to access its pages. ## Creating Scenes ### Creating an Empty Scene Use `engine.scene.create()` to create a new design scene with a configurable page layout. The layout parameter controls how pages are arranged in the canvas. ```typescript highlight-create-scene // Create a new design scene with VerticalStack layout // The layout controls how pages are arranged in the canvas engine.scene.create('VerticalStack'); // Get the stack container and add spacing between pages const stack = engine.block.findByType('stack')[0]; engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` Available layouts include: - `VerticalStack` — Pages stacked vertically - `HorizontalStack` — Pages arranged horizontally - `DepthStack` — Pages layered on top of each other - `Free` — Manual positioning ### Adding Pages After creating a scene, add pages using `engine.block.create('page')`. Configure the page dimensions and append it to the scene's stack container. ```typescript highlight-create-page // Create the first page const page1 = engine.block.create('page'); engine.block.setWidth(page1, 800); engine.block.setHeight(page1, 600); engine.block.appendChild(stack, page1); // Create a second page const page2 = engine.block.create('page'); engine.block.setWidth(page2, 800); engine.block.setHeight(page2, 600); engine.block.appendChild(stack, page2); ``` ### Adding Blocks With pages in place, add design elements like shapes, text, or images. Create a graphic block, configure its shape and fill, then append it to a page. ```typescript highlight-create-block // Add a shape to the first page const graphic1 = engine.block.create('graphic'); engine.block.setShape(graphic1, engine.block.createShape('rect')); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setFill(graphic1, fill1); engine.block.setWidth(graphic1, 400); engine.block.setHeight(graphic1, 300); engine.block.setPositionX(graphic1, 200); engine.block.setPositionY(graphic1, 150); engine.block.appendChild(page1, graphic1); // Add a different shape to the second page const graphic2 = engine.block.create('graphic'); engine.block.setShape(graphic2, engine.block.createShape('ellipse')); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.2, a: 1 }); engine.block.setFill(graphic2, fill2); engine.block.setWidth(graphic2, 350); engine.block.setHeight(graphic2, 350); engine.block.setPositionX(graphic2, 225); engine.block.setPositionY(graphic2, 125); engine.block.appendChild(page2, graphic2); ``` ## Scene Properties ### Design Units Query or configure how measurements are interpreted using `engine.scene.getDesignUnit()` and `engine.scene.setDesignUnit()`. This is useful for print workflows where precise physical dimensions matter. ```typescript highlight-scene-properties // Query scene properties const currentUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Scene design unit:', currentUnit); // Get the scene layout const layout = engine.scene.getLayout(); // eslint-disable-next-line no-console console.log('Scene layout:', layout); ``` Supported units are `'Pixel'`, `'Millimeter'`, and `'Inch'`. For more details, see the [Design Units](https://img.ly/docs/cesdk/sveltekit/concepts/design-units-cc6597/) guide. ### Scene Layout Control how pages are arranged using `engine.scene.getLayout()` and `engine.scene.setLayout()`. The layout affects how users navigate between pages in multi-page designs. ## Page Navigation Access pages within your scene using these methods: ```typescript highlight-page-navigation // Access pages within the scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log('Number of pages:', pages.length); // Get the current page (nearest to viewport center) const currentPage = engine.scene.getCurrentPage(); // eslint-disable-next-line no-console console.log('Current page ID:', currentPage); ``` The `getCurrentPage()` method returns the page nearest to the viewport center—useful for determining which page the user is currently viewing. ## Camera and Zoom ### Zoom to Block Use `engine.scene.zoomToBlock()` to frame a specific block in the viewport with padding. Pass the scene block to show all pages: ```typescript highlight-camera-zoom // Zoom to show all pages in the scene const scene = engine.scene.get(); if (scene) { await engine.scene.zoomToBlock(scene, { padding: 50 }); } // Get the current zoom level const zoomLevel = engine.scene.getZoomLevel(); // eslint-disable-next-line no-console console.log('Current zoom level:', zoomLevel); ``` ### Zoom Level Get and set the zoom level directly with `engine.scene.getZoomLevel()` and `engine.scene.setZoomLevel()`. A zoom level of 1.0 means one design unit equals one screen pixel. ### Auto-Fit Zoom For continuous auto-framing, use `engine.scene.enableZoomAutoFit()` to automatically keep a block centered as the viewport resizes. ## Saving Scenes ### Saving to String Use `engine.scene.saveToString()` to serialize the current scene. This captures the complete scene structure—pages, blocks, and their properties—as a string you can store. ```typescript highlight-save-scene // Save the scene to a string for persistence const sceneString = await engine.scene.saveToString(); // eslint-disable-next-line no-console console.log('Scene saved successfully. String length:', sceneString.length); ``` The serialized string references external assets by URL rather than embedding them. For complete portability including assets, use `engine.scene.saveToArchive()`. ## Loading Scenes ### Loading from String Use `engine.scene.loadFromString()` to restore a scene from a saved string: ```typescript highlight-load-scene // Demonstrate loading the scene from the saved string // This replaces the current scene with the saved version await engine.scene.loadFromString(sceneString); // eslint-disable-next-line no-console console.log('Scene loaded from saved string'); // Zoom to show all loaded pages const loadedScene = engine.scene.get(); if (loadedScene) { await engine.scene.zoomToBlock(loadedScene, { padding: 50 }); } ``` Loading a new scene replaces any existing scene. The engine only holds one active scene at a time. ### Loading from URL Use `engine.scene.loadFromURL()` to load a scene directly from a remote location: ```typescript await engine.scene.loadFromURL('https://example.com/design.scene'); ``` ## Troubleshooting ### Blocks Not Visible Ensure blocks are attached to pages, and pages are attached to the scene. Orphaned blocks that aren't part of the scene hierarchy won't render. ### Scene Not Loading Check that the scene URL or string is valid. If assets fail to load, consider using the `waitForResources` option to ensure everything loads before rendering. ### Zoom Not Working Verify the scene has a valid camera. Some UI configurations may override programmatic zoom controls. ## Scene Type Represents the scene and its global properties. This section describes the properties available for the **Scene Type** (`//ly.img.ubq/scene`) block type. | Property | Type | Default | Description | | ------------------------------ | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element's global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `false` | If true, this element's global sorting order is automatically adjusted to be higher than all other siblings. | | `blend/mode` | `Enum` | `"Normal"` | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Crop, Cover, Contain)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `height` | `Float` | `0` | The height of the block's frame. | | `height/mode` | `Enum` | `"Auto"` | A mode describing how the height dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/width` | `Float` | `"-"` | The width of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `playback/playing` | `Bool` | `false` | A tag that can be set on elements for their playback time to be progressed. | | `playback/soloPlaybackEnabled` | `Bool` | `false` | A tag for blocks where playback should progress while the scene is paused. | | `playback/time` | `Double` | `0` | The current playback time of the block contents in seconds. | | `position/x` | `Float` | `0` | The x-coordinate of the block's origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block's origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in radians. | | `scene/aspectRatioLock` | `Bool` | `true` | Whether the ratio of the pageDimensions' width and height should remain constant when changing either dimension. | | `scene/designUnit` | `Enum` | `"Pixel"` | The unit type in which the page values (size, distances, etc.) are defined., Possible values: `"Pixel"`, `"Millimeter"`, `"Inch"` | | `scene/dpi` | `Float` | `300` | The DPI value to use when exporting and when converting between pixels and inches or millimeter units. | | `scene/layout` | `Enum` | `"Free"` | A value describing how the scene's children are laid out., Possible values: `"Free"`, `"VerticalStack"`, `"HorizontalStack"`, `"DepthStack"` | | `scene/mode` | `Enum` | `"Video"` | The mode of this scene and all elements inside of it., *(read-only)*, Possible values: `"Design"`, `"Video"` | | `scene/pageDimensions/height` | `Float` | `1` | The height of all pages in this scene. | | `scene/pageDimensions/width` | `Float` | `1` | The width of all pages in this scene. | | `scene/pageFormatId` | `String` | `""` | The identifier of the page format configuration that was most recently selected for the pages in this scene. | | `scene/pixelScaleFactor` | `Float` | `1` | A scale factor that is applied to the final export resolution if the design unit is Pixel. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can't be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `0` | The width of the block's frame. | | `width/mode` | `Enum` | `"Auto"` | A mode describing how the width dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Templating" description: "Understand how templates work in CE.SDK—reusable designs with variables for dynamic text and placeholders for swappable media." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/templating-f94385/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Templating](https://img.ly/docs/cesdk/sveltekit/concepts/templating-f94385/) --- Templates transform static designs into dynamic, data-driven content. They combine reusable layouts with variable text and placeholder media, enabling personalization at scale.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-templating-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-templating-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-templating-browser/) A template is a regular CE.SDK scene that contains **variable tokens** in text and **placeholder blocks** for media. When you load a template, you can populate the variables with data and swap placeholder content—producing personalized designs without modifying the underlying layout. ```typescript file=@cesdk_web_examples/guides-concepts-templating-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Templating Concepts * * Demonstrates the core template concepts in CE.SDK: * - Loading a template from URL * - Discovering and setting variables * - Discovering placeholders */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Load a postcard template from URL // Templates are scenes containing variable tokens and placeholder blocks const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.loadFromURL(templateUrl); // Zoom to show the full page in the viewport const page = engine.scene.getCurrentPage(); if (page) { await engine.scene.zoomToBlock(page, { padding: 40 }); } // Discover what variables this template expects // Variables are named slots that can be populated with data const variableNames = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Template variables:', variableNames); // Set variable values to personalize the template // These values replace {{variableName}} tokens in text blocks engine.variable.setString('Name', 'Jane'); engine.variable.setString('Greeting', 'Wish you were here!'); // eslint-disable-next-line no-console console.log('Variables set successfully.'); // Discover placeholder blocks in the template // Placeholders mark content slots for user or automation replacement const placeholders = engine.block.findAllPlaceholders(); // eslint-disable-next-line no-console console.log('Template placeholders:', placeholders.length); // eslint-disable-next-line no-console console.log('Templating guide completed successfully.'); } } export default Example; ``` This guide explains the core concepts. For implementation details, see the guides linked in each section. ## What Makes a Template Any CE.SDK scene can become a template by adding dynamic elements: | Element | Purpose | Example | |---------|---------|---------| | **Variables** | Dynamic text replacement | `Hello, {{firstName}}!` | | **Placeholders** | Swappable media slots | Profile photo, product image | | **Editing Constraints** | Protected design elements | Locked logo, fixed layout | Templates separate **design** (created once by designers) from **content** (populated at runtime with data). This enables workflows like batch generation, form-based customization, and user personalization. ## Variables Variables enable dynamic text without modifying the design structure. Text blocks contain `{{variableName}}` tokens that CE.SDK resolves at render time. ```typescript highlight-set-variables // Set variable values to personalize the template // These values replace {{variableName}} tokens in text blocks engine.variable.setString('Name', 'Jane'); engine.variable.setString('Greeting', 'Wish you were here!'); // eslint-disable-next-line no-console console.log('Variables set successfully.'); ``` **How variables work:** - Define variables with `engine.variable.setString('name', 'value')` - Reference them in text: `Welcome, {{name}}!` - CE.SDK automatically updates all text blocks using that variable - Tokens are case-sensitive; unmatched tokens render as literal text Variables are scene-scoped and persist when you save the template. Use `engine.variable.findAll()` to discover what variables a template expects. [Learn more about text variables →](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) ## Placeholders Placeholders mark blocks as content slots that users or automation can replace. When you enable placeholder behavior on an image block, it displays an overlay pattern and replacement button in the editor. **How placeholders work:** - Enable with `engine.block.setPlaceholderEnabled(block, true)` - Add visual UI with `engine.block.setPlaceholderBehaviorEnabled(fill, true)` - Users in Adopter mode can select and replace placeholder content - Other design elements remain locked Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a loaded template. [Learn more about placeholders →](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) ## Template Workflows Templates support several common workflows: ### Form-Based Customization Load a template, present a form for variable values, and let users customize text while the design stays consistent. The editor UI handles placeholder replacement through drag-and-drop. ### Batch Generation Load a template programmatically, iterate through data records, set variables for each record, and export personalized designs. This powers use cases like certificates, badges, and personalized marketing. ### Design Systems Create template libraries where designers maintain approved layouts and end users customize within defined boundaries using variables and placeholders. ## Loading and Applying Templates CE.SDK provides two approaches for working with templates: **Load a template** with `engine.scene.loadFromURL()` to replace the current scene entirely, including page dimensions: ```typescript highlight-load-template // Load a postcard template from URL // Templates are scenes containing variable tokens and placeholder blocks const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.loadFromURL(templateUrl); // Zoom to show the full page in the viewport const page = engine.scene.getCurrentPage(); if (page) { await engine.scene.zoomToBlock(page, { padding: 40 }); } ``` **Apply a template** with `engine.scene.applyTemplateFromURL()` to merge template content into an existing scene while preserving current page dimensions. [Learn more about importing templates →](https://img.ly/docs/cesdk/sveltekit/create-templates/import-e50084/) ## Creating Templates Build templates by adding variable tokens to text blocks and configuring placeholder behavior on media blocks. Save with `engine.scene.saveToString()` or `engine.scene.saveToArchive()`. [Learn more about creating templates →](https://img.ly/docs/cesdk/sveltekit/create-templates/from-scratch-663cda/) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Terminology" description: "Definitions for the core terms and concepts used throughout CE.SDK documentation, including Engine, Scene, Block, Fill, Shape, Effect, and more." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/terminology-99e82d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Terminology](https://img.ly/docs/cesdk/sveltekit/concepts/terminology-99e82d/) --- A reference guide to the core terms and concepts used throughout CE.SDK documentation. CE.SDK uses consistent terminology across all platforms. Understanding what we call things helps you navigate the API, read documentation efficiently, and communicate effectively with other developers working on CE.SDK integration. ## Core Architecture ### Engine All operations—creating scenes, manipulating blocks, rendering, and exporting—go through the *Engine*. Initialize it once and use it throughout your application's lifecycle. ### Scene The root container for all design content. A *Scene* contains *Pages*, which contain *Blocks*. Only one *Scene* can be active per *Engine* instance. You can create a *Scene* programmatically or load one from a file. *Scenes* support both static designs (social posts, print materials, graphics) and time-based content (duration, playback time, animation). See [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/) for details. ### Page *Pages* are containers within a *Scene* that hold content *Blocks* (see below) and define working area dimensions. For static designs, pages are individual artboards. For video editing, pages are time-based compositions where *Blocks* are arranged across time. See [Pages](https://img.ly/docs/cesdk/sveltekit/concepts/pages-7b6bae/) for details. ### Block The fundamental building unit in CE.SDK. Everything visible in a design is a *Block*—images, text, shapes, graphics, audio, video—and even *Pages* themselves. *Blocks* form a parent-child hierarchy. Each *Block* has two identifiers: - **DesignBlockId**: A numeric handle (integer) used in API calls - **UUID**: A stable string identifier that persists across save and load operations See [Blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) for details. ## Block Anatomy Modify a *Block's* appearance and behavior by attaching *Fills*, *Shapes*, and *Effects*. Most of these modifiers must be created separately and then attached to a *Block*. ### Fill *Fills* cover the surface of a *Block's* shape: - **Color Fill**: Solid color - **Gradient Fill**: Linear, radial, or conical gradients - **Image Fill**: Image content - **Video Fill**: Video content See the [Color Fills](https://img.ly/docs/cesdk/sveltekit/fills/color-7129cd/), [Gradient Fills](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/gradients-0ff079/), [Image Fills](https://img.ly/docs/cesdk/sveltekit/fills/image-e9cb5c/), and [Video Fills](https://img.ly/docs/cesdk/sveltekit/fills/video-ec7f9f/) guides. ### Shape *Shapes* define a *Block's* outline and dimensions, determining the silhouette and how the *Fill* is clipped. *Shape* types include: - **Rect**: Rectangles and squares - **Ellipse**: Circles and ovals - **Polygon**: Multi-sided shapes - **Star**: Star shapes with configurable points - **Line**: Straight lines - **Vector Path**: Custom vector shapes Like *Fills*, *Shapes* are created separately and attached to *Blocks*. See [Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) for details. ### Effect *Effects* are non-destructive visual modifications applied to a *Block*. Multiple *Effects* can be stacked. *Effect* categories include: - **Adjustments**: Brightness, contrast, saturation, and other image corrections - **Filters**: LUT-based color grading, duotone - **Stylization**: Pixelize, posterize, half-tone, dot pattern, linocut, outliner - **Distortion**: Liquid, mirror, shifter, cross-cut, extrude blur - **Focus**: Tilt-shift, vignette - **Color**: Recolor, green screen (chroma key) - **Other**: Glow, TV glitch The order determines how multiple effects attached to a single block interact. See [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) for details. ### Blur A modifier that reduces sharpness. *Blur* types include: - **Uniform Blur**: Even blur across the entire block - **Radial Blur**: Circular blur from a center point - **Mirrored Blur**: Blur with reflection > **Note:** **Blur has a dedicated API because it composites differently than other effects.** While most effects like brightness or saturation operate only on a block's own pixels, blur needs to sample pixels from the surrounding area to calculate the blurred result. This means blur interacts with the scene's layering and transparency in ways other effects don't—when you blur a partially transparent block, the engine must handle how that blur blends with whatever content sits behind it. See [Blur](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) for details. ### Drop Shadow A built-in block property (not an *Effect*) that renders a shadow beneath blocks. *Drop Shadow* has dedicated API methods for enabling, color, offset, and blur radius. > **Warning:** Unlike effects, drop shadow is configured directly on the block rather than created and attached separately. ## Block Handling These terms describe how *Blocks* are categorized and identified. ### Type The built-in *Type* defines a *Block's* core behavior and available properties. *Type* is immutable—you choose it when creating the *Block*. - `//ly.img.ubq/graphic` — Visual block for images, shapes, and graphics - `//ly.img.ubq/text` — Text content - `//ly.img.ubq/audio` — Audio content - `//ly.img.ubq/page` — Page container - `//ly.img.ubq/scene` — Root scene container - `//ly.img.ubq/track` — Video timeline track - `//ly.img.ubq/stack` — Stack container for layering - `//ly.img.ubq/group` — Group container for organizing blocks - `//ly.img.ubq/camera` — Camera for scene viewing - `//ly.img.ubq/cutout` — Cutout/mask block - `//ly.img.ubq/caption` — Caption/subtitle block - `//ly.img.ubq/captionTrack` — Track for captions The *Type* determines which properties and capabilities a *Block* has. ### Kind A custom string label you assign to categorize *Blocks* for your application. Unlike *Type*, *Kind* is mutable and application-defined. Changing the *Kind* has no effect on appearance or behavior at the engine level. You can query and search for *Blocks* by *Kind*. Common uses: - Categorizing template elements ("logo", "headline", "background") - Filtering blocks for custom UI - Automation workflows that process blocks by purpose ### Property A configurable attribute of a *Block*. *Properties* have types (`Bool`, `Int`, `Float`, `String`, `Color`, `Enum`) and paths like `text/fontSize` or `fill/image/imageFileURI`. Access *Properties* using type-specific getter and setter methods. Each *Block* type exposes different properties, which you can discover programmatically. See [Blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) for details. ## Assets and Resources ### Asset Think of *Assets* as media items that you can provide to your users: images, videos, audio files, fonts, stickers, or templates—anything that can be added to a design. *Assets* have metadata including: - **ID**: Unique identifier within an asset source - **Label**: Display name - **Meta**: Custom metadata (URI, dimensions, format) - **Thumbnail URI**: Preview image URL *Assets* are provided by *Asset Sources* and added through the UI or programmatically. ### Asset Source A provider of *Assets*. *Asset Sources* can be built-in (like the default sticker library) or custom. *Asset Sources* implement a query interface returning paginated results with search and filtering. - **Local Asset Source**: Assets defined in JSON, loaded at initialization - **Remote Asset Source**: Custom implementation fetching from external APIs Register *Asset Sources* with the *Engine* to make *Assets* available throughout your application. ### Resource Loaded data from an *Asset* URI. When you reference an image or video URL in a *Block*, the *Engine* fetches and caches the *Resource*. *Resources* include binary data and metadata for rendering. See [Resources](https://img.ly/docs/cesdk/sveltekit/concepts/resources-a58d71/) for details. ### Buffer A resizable container for arbitrary binary data. *Buffers* are useful for dynamically generated content that doesn't come from a URL, such as synthesized audio or programmatically created images. Create a *Buffer*, write data to it, and reference it by URI in *Block* properties. *Buffer* data is not serialized with scenes and changes cannot be undone. See [Buffers](https://img.ly/docs/cesdk/sveltekit/concepts/buffers-9c565b/) for details. ## Templating and Automation These terms describe dynamic content and reusable designs. ### Template A reusable design with predefined structure and styling. *Templates* typically contain *Placeholders* and *Variables* that users customize while maintaining overall layout and branding. *Templates* are scenes saved in a format that can be loaded and modified. ### Placeholder A *Block* marked for content replacement. When a *Block's* placeholder property is enabled, it signals that the *Block* expects user-provided content—an image drop zone or editable text field. *Placeholders* indicate which parts of a design should be customized versus fixed. See [Placeholders](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) for details. ### Variable A named value referenced in text blocks using `{{variableName}}` syntax. *Variables* enable data-driven design generation by populating templates with dynamic content. Define *Variables* at the scene level and reference them in text blocks. When a *Variable* value changes, all referencing text blocks update automatically. See [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) for details. ## Permissions and Scopes These terms relate to controlling what operations are allowed. ### Scope A permission setting controlling whether specific operations are allowed on a *Block*. *Scopes* enable fine-grained control over what users can modify—essential for template workflows where some elements should be editable and others locked. Common scopes: - `layer/move` — Allow or prevent moving - `layer/resize` — Allow or prevent resizing - `layer/rotate` — Allow or prevent rotation - `layer/visibility` — Allow or prevent hiding - `lifecycle/destroy` — Allow or prevent deletion - `editor/select` — Allow or prevent selection Enable or disable *Scopes* per *Block* to create controlled editing experiences. See [Lock Design Elements](https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/) for details. ### Role A preset collection of *Scope* settings. CE.SDK defines two built-in *Roles*: - **Creator**: Full access to all operations, for template authors - **Adopter**: Restricted access for end-users customizing templates *Roles* provide a convenient way to apply consistent permission sets. ## Layout and Units These terms relate to positioning and measurement. ### Design Unit The measurement unit for dimensions in a *Scene*. The choice affects how positions, sizes, and exports are interpreted. Options: - **Pixel**: Screen pixels, default for digital designs - **Millimeter**: Metric measurement for print - **Inch**: Imperial measurement for print Set the design unit at the scene level—all dimension values are interpreted in that unit. See [Design Units](https://img.ly/docs/cesdk/sveltekit/concepts/design-units-cc6597/) for details. ### DPI (Dots Per Inch) Resolution setting affecting export quality and unit conversion. Higher DPI produces larger exports with more detail. The default is 300 DPI, suitable for print-quality output. DPI matters when working with physical units (millimeters, inches) as it determines how measurements translate to pixel dimensions during export. ## Operating Modes These terms describe how CE.SDK runs. ### Scene Capabilities Every *Scene* supports the full range of features: - **Static designs**: Content arranged spatially on pages. - **Video editing**: Blocks can have duration, time offset, playback time, and animation properties. See [Scenes](https://img.ly/docs/cesdk/sveltekit/concepts/scenes-e8596d/) for details. ### Headless Mode Running CE.SDK without the built-in UI. Used for: - Server-side rendering and export - Automation pipelines - Custom UI implementations - Batch processing In *Headless Mode*, you work directly with *Engine* APIs without the visual editor. See [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) for setup. ## Events and State These terms relate to monitoring changes. ### Event / Subscription A callback mechanism for reacting to changes in the *Engine*. Subscribe to events and receive notifications when state changes. Common events: - Selection changes - Block state changes - History (undo/redo) changes Subscriptions return an unsubscribe function to call when you no longer need notifications. See [Events](https://img.ly/docs/cesdk/sveltekit/concepts/events-353f97/) for details. ### Block State The current status of a *Block* indicating readiness or issues: - **Ready**: Normal state, no pending operations - **Pending**: Operation in progress, with optional progress value (0-1) - **Error**: Operation failed, with error type (`ImageDecoding`, `VideoDecoding`, `FileFetch`, etc.) *Block State* reflects the combined status of the *Block* and its attached *Fill*, *Shape*, and *Effects*. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Undo and History" description: "Manage undo and redo stacks in CE.SDK using multiple histories, callbacks, and API-based controls." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/concepts/undo-and-history-99479d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Concepts](https://img.ly/docs/cesdk/sveltekit/concepts-c9ff51/) > [Undo and History](https://img.ly/docs/cesdk/sveltekit/concepts/undo-and-history-99479d/) --- Implement undo/redo functionality and manage multiple history stacks to track editing operations.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-undo-and-history-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-undo-and-history-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-undo-and-history-browser/) CE.SDK automatically tracks editing operations, enabling users to undo and redo changes. The engine creates undo steps for most operations automatically. You can also create multiple independent history stacks to isolate different editing contexts, such as separate histories for a main canvas and an overlay editing panel. ```typescript file=@cesdk_web_examples/guides-concepts-undo-and-history-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Subscribe to history updates to track state changes const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated:', { canUndo, canRedo }); }); // Create a triangle shape and add an undo step to record it in history const block = engine.block.create('graphic'); engine.block.setPositionX(block, 140); engine.block.setPositionY(block, 95); engine.block.setWidth(block, 265); engine.block.setHeight(block, 265); const triangleShape = engine.block.createShape('polygon'); engine.block.setInt(triangleShape, 'shape/polygon/sides', 3); engine.block.setShape(block, triangleShape); const triangleFill = engine.block.createFill('color'); engine.block.setColor(triangleFill, 'fill/color/value', { r: 0.2, g: 0.5, b: 0.9, a: 1 }); engine.block.setFill(block, triangleFill); engine.block.appendChild(page, block); // Commit the block creation to history so it can be undone engine.editor.addUndoStep(); // Log current state - canUndo should now be true console.log('Block created. canUndo:', engine.editor.canUndo()); // Undo the block creation if (engine.editor.canUndo()) { engine.editor.undo(); console.log( 'After undo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } // Redo to restore the block if (engine.editor.canRedo()) { engine.editor.redo(); console.log( 'After redo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } // Create a second history stack for isolated operations const secondaryHistory = engine.editor.createHistory(); const primaryHistory = engine.editor.getActiveHistory(); console.log( 'Created secondary history. Primary:', primaryHistory, 'Secondary:', secondaryHistory ); // Switch to the secondary history engine.editor.setActiveHistory(secondaryHistory); console.log( 'Switched to secondary history. Active:', engine.editor.getActiveHistory() ); // Operations in secondary history are isolated from the primary history const secondBlock = engine.block.create('graphic'); engine.block.setPositionX(secondBlock, 440); engine.block.setPositionY(secondBlock, 95); engine.block.setWidth(secondBlock, 220); engine.block.setHeight(secondBlock, 220); const circleShape = engine.block.createShape('ellipse'); engine.block.setShape(secondBlock, circleShape); const circleFill = engine.block.createFill('color'); engine.block.setColor(circleFill, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.3, a: 1 }); engine.block.setFill(secondBlock, circleFill); engine.block.appendChild(page, secondBlock); // Commit changes to the secondary history engine.editor.addUndoStep(); console.log( 'Block added in secondary history. canUndo:', engine.editor.canUndo() ); // Switch back to primary history engine.editor.setActiveHistory(primaryHistory); console.log( 'Switched back to primary history. canUndo:', engine.editor.canUndo() ); // Clean up the secondary history when no longer needed engine.editor.destroyHistory(secondaryHistory); console.log('Secondary history destroyed'); // Manually add an undo step after custom operations engine.block.setPositionX(block, 190); engine.editor.addUndoStep(); console.log('Manual undo step added. canUndo:', engine.editor.canUndo()); // Remove the most recent undo step if needed if (engine.editor.canUndo()) { engine.editor.removeUndoStep(); console.log('Most recent undo step removed'); } // Reset block position to its original location engine.block.setPositionX(block, 140); // Add instruction text at the end (after all demo operations) const instructionText = engine.block.create('text'); engine.block.setPositionX(instructionText, 50); engine.block.setPositionY(instructionText, 430); engine.block.setWidth(instructionText, 700); engine.block.setHeight(instructionText, 120); engine.block.replaceText( instructionText, 'Open the browser console to see logs of the undo and redo operations in this example.' ); engine.block.setFloat(instructionText, 'text/fontSize', 90); engine.block.setEnum(instructionText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, instructionText); // Clean up subscription when done (in a real app, call this on cleanup) // unsubscribe(); void unsubscribe; } } export default Example; ``` This guide covers how to use the built-in undo/redo UI controls, perform undo and redo operations programmatically, subscribe to history changes, manually manage undo steps, and work with multiple history stacks. ## Setup We start by initializing the CE.SDK editor and creating a design scene. The engine automatically creates a history stack when the editor is initialized. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; ``` ## Using the Built-in Undo/Redo UI The CE.SDK editor includes undo and redo buttons in the navigation bar. When users make changes, the undo button becomes active. After undoing, the redo button allows restoring changes. The UI automatically reflects the current history state, disabling buttons when no operations are available. ## Automatic Undo Step Creation Most editing operations automatically create undo steps. When we add a shape to the scene, the engine records this operation in the history stack. ```typescript highlight=highlight-create-block // Create a triangle shape and add an undo step to record it in history const block = engine.block.create('graphic'); engine.block.setPositionX(block, 140); engine.block.setPositionY(block, 95); engine.block.setWidth(block, 265); engine.block.setHeight(block, 265); const triangleShape = engine.block.createShape('polygon'); engine.block.setInt(triangleShape, 'shape/polygon/sides', 3); engine.block.setShape(block, triangleShape); const triangleFill = engine.block.createFill('color'); engine.block.setColor(triangleFill, 'fill/color/value', { r: 0.2, g: 0.5, b: 0.9, a: 1 }); engine.block.setFill(block, triangleFill); engine.block.appendChild(page, block); // Commit the block creation to history so it can be undone engine.editor.addUndoStep(); ``` After creating the shape, `canUndo()` returns `true` since the operation has been recorded as an undoable step. ## Performing Undo and Redo Operations We use `engine.editor.undo()` and `engine.editor.redo()` to programmatically revert or restore changes. Before calling these methods, check availability with `engine.editor.canUndo()` and `engine.editor.canRedo()` to prevent errors. ```typescript highlight=highlight-undo // Undo the block creation if (engine.editor.canUndo()) { engine.editor.undo(); console.log( 'After undo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } ``` The undo operation reverts the most recent change. After undoing, `canRedo()` returns `true` since there's now a step available to restore. ```typescript highlight=highlight-redo // Redo to restore the block if (engine.editor.canRedo()) { engine.editor.redo(); console.log( 'After redo - canUndo:', engine.editor.canUndo(), 'canRedo:', engine.editor.canRedo() ); } ``` The redo operation restores the most recently undone change. After redoing, `canRedo()` returns `false` (unless there are more undo steps to restore). ## Subscribing to History Changes We use `engine.editor.onHistoryUpdated()` to receive notifications when the history state changes. The callback fires after any undo, redo, or new operation. This enables synchronizing custom UI elements with the current history state. ```typescript highlight=highlight-subscribe-history // Subscribe to history updates to track state changes const unsubscribe = engine.editor.onHistoryUpdated(() => { const canUndo = engine.editor.canUndo(); const canRedo = engine.editor.canRedo(); console.log('History updated:', { canUndo, canRedo }); }); ``` The subscription returns an unsubscribe function. Call it when you no longer need notifications, such as when unmounting a component. ## Managing Undo Steps Manually Most editing operations automatically create undo steps. However, some custom operations may require manual checkpoint creation using `engine.editor.addUndoStep()`. This is useful when you make multiple related changes that should be undone as a single unit. ```typescript highlight=highlight-manual-undo-step // Manually add an undo step after custom operations engine.block.setPositionX(block, 190); engine.editor.addUndoStep(); console.log('Manual undo step added. canUndo:', engine.editor.canUndo()); // Remove the most recent undo step if needed if (engine.editor.canUndo()) { engine.editor.removeUndoStep(); console.log('Most recent undo step removed'); } // Reset block position to its original location engine.block.setPositionX(block, 140); ``` We use `engine.editor.removeUndoStep()` to remove the most recent undo step. Always check `canUndo()` before calling this method to ensure an undo step is available. This can be useful when you need to discard changes without affecting the redo stack. ## Working with Multiple History Stacks CE.SDK supports multiple independent history stacks for isolated editing contexts. This is useful when you need separate undo/redo histories for different parts of your application, such as a main canvas and an overlay editor. ### Creating and Switching History Stacks We create a new history stack using `engine.editor.createHistory()`. Use `engine.editor.setActiveHistory()` to switch between stacks. Only the active history responds to undo/redo operations. ```typescript highlight=highlight-multiple-histories // Create a second history stack for isolated operations const secondaryHistory = engine.editor.createHistory(); const primaryHistory = engine.editor.getActiveHistory(); console.log( 'Created secondary history. Primary:', primaryHistory, 'Secondary:', secondaryHistory ); // Switch to the secondary history engine.editor.setActiveHistory(secondaryHistory); console.log( 'Switched to secondary history. Active:', engine.editor.getActiveHistory() ); // Operations in secondary history are isolated from the primary history const secondBlock = engine.block.create('graphic'); engine.block.setPositionX(secondBlock, 440); engine.block.setPositionY(secondBlock, 95); engine.block.setWidth(secondBlock, 220); engine.block.setHeight(secondBlock, 220); const circleShape = engine.block.createShape('ellipse'); engine.block.setShape(secondBlock, circleShape); const circleFill = engine.block.createFill('color'); engine.block.setColor(circleFill, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.3, a: 1 }); engine.block.setFill(secondBlock, circleFill); engine.block.appendChild(page, secondBlock); // Commit changes to the secondary history engine.editor.addUndoStep(); console.log( 'Block added in secondary history. canUndo:', engine.editor.canUndo() ); // Switch back to primary history engine.editor.setActiveHistory(primaryHistory); console.log( 'Switched back to primary history. canUndo:', engine.editor.canUndo() ); ``` Operations performed while a history is active only affect that history. When you switch back to the primary history, its undo/redo state remains unchanged by operations performed in the secondary history. ### Cleaning Up History Stacks We destroy unused history stacks with `engine.editor.destroyHistory()` to free resources. Always clean up secondary histories when they're no longer needed. ```typescript highlight=highlight-destroy-history // Clean up the secondary history when no longer needed engine.editor.destroyHistory(secondaryHistory); console.log('Secondary history destroyed'); ``` ## Troubleshooting Common issues when working with undo/redo functionality: - **Undo step not recorded**: Ensure changes occur after the history subscription is active. The engine only tracks operations that happen while the history is being monitored. - **Redo not available**: Performing any new action after undo clears the redo stack. This is standard behavior to prevent branching history states. - **Wrong history active**: Always verify the correct history is set with `getActiveHistory()` before performing undo/redo operations when using multiple stacks. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Configuration" description: "Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) --- Set up CE.SDK with license keys, asset base URLs, user IDs, and runtime configuration options to match your application requirements.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-configuration-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-configuration-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-configuration-browser/) `CreativeEditorSDK.create()` initializes the full CE.SDK editor with UI components. The configuration object controls license validation, asset loading, user tracking, and UI behavior. ```typescript file=@cesdk_web_examples/guides-configuration-browser/index.ts reference-only import CreativeEditorSDK from '@cesdk/cesdk-js'; import Example from './browser'; const config = { // License key removes watermarks from exports // Get a free trial at https://img.ly/forms/free-trial // license: 'YOUR_CESDK_LICENSE_KEY', // User ID for accurate MAU tracking across devices userId: 'guides-user', // Custom logger for debugging and monitoring logger: (message: string, level?: string) => { console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`); }, // Enable developer mode for diagnostics devMode: false, // Accessibility settings a11y: { headingsHierarchyStart: 1 as const }, // Location of core engine assets (WASM, data files) // Default: IMG.LY CDN. For production, host assets yourself. // baseURL: 'https://your-cdn.com/cesdk-assets/', // Use local assets when developing with local packages ...(import.meta.env.CESDK_USE_LOCAL && { baseURL: import.meta.env.VITE_CESDK_ASSETS_BASE_URL }) }; CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk: CreativeEditorSDK) => { // Expose cesdk for debugging and hero screenshot generation (window as any).cesdk = cesdk; // Load the example plugin await cesdk.addPlugin(new Example()); }) .catch((error: Error) => { // eslint-disable-next-line no-console console.error('Failed to initialize CE.SDK:', error); }); ``` ```typescript file=@cesdk_web_examples/guides-configuration-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a Scene engine.scene.create('VerticalStack', { page: { size: { width: 800, height: 600 } } }); const pages = engine.block.findByType('page'); const page = pages[0]; // ======================================== // Setup: Gradient Background with Title // ======================================== // Create gradient background const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.15, g: 0.1, b: 0.35, a: 1.0 }, stop: 0 }, { color: { r: 0.4, g: 0.2, b: 0.5, a: 1.0 }, stop: 0.5 }, { color: { r: 0.6, g: 0.3, b: 0.4, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); // Add centered title text const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const titleText = engine.block.create('text'); engine.block.replaceText(titleText, 'Configure your Editor'); engine.block.setFloat(titleText, 'text/fontSize', 12); engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.appendChild(page, titleText); // Add IMG.LY subtext const subtitleText = engine.block.create('text'); engine.block.replaceText(subtitleText, 'Powered by IMG.LY'); engine.block.setFloat(subtitleText, 'text/fontSize', 6); engine.block.setTextColor(subtitleText, { r: 0.9, g: 0.9, b: 0.9, a: 0.8 }); engine.block.setWidthMode(subtitleText, 'Auto'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.appendChild(page, subtitleText); // Center both texts const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); const subtitleWidth = engine.block.getFrameWidth(subtitleText); const subtitleHeight = engine.block.getFrameHeight(subtitleText); const spacing = 12; const totalHeight = titleHeight + spacing + subtitleHeight; const startY = (pageHeight - totalHeight) / 2; engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, startY); engine.block.setPositionX(subtitleText, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleText, startY + titleHeight + spacing); // ======================================== // Runtime Configuration: Theme // ======================================== cesdk.ui.setTheme('light'); const currentTheme = cesdk.ui.getTheme(); console.log('Current theme:', currentTheme); // ======================================== // Runtime Configuration: Scale // ======================================== cesdk.ui.setScale('modern'); const currentScale = cesdk.ui.getScale(); console.log('Current scale:', currentScale); // ======================================== // Runtime Configuration: Actions // ======================================== cesdk.actions.register('customSave', async () => { const sceneBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(sceneBlob, 'application/zip'); }); // ======================================== // Built-in Actions // ======================================== // Add built-in export and import actions to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportImage.navigationBar', 'ly.img.exportPDF.navigationBar', 'ly.img.exportScene.navigationBar', 'ly.img.exportArchive.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.importArchive.navigationBar' ] }); // ======================================== // Engine Settings // ======================================== engine.editor.setSetting('doubleClickToCropEnabled', true); engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 }); const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); console.log('Double-click crop enabled:', cropEnabled); // ======================================== // Internationalization: Locale // ======================================== cesdk.i18n.setLocale('en'); const currentLocale = cesdk.i18n.getLocale(); console.log('Current locale:', currentLocale); // ======================================== // Internationalization: Translations // ======================================== cesdk.i18n.setTranslations({ en: { 'common.back': 'Go Back', 'common.apply': 'Apply Changes' } }); // Enable Auto-Fit Zoom engine.scene.zoomToBlock(page); engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40); } } export default Example; ``` ## Required Configuration The `license` property is the only required configuration. All other properties have sensible defaults. | Property | Type | Purpose | |----------|------|---------| | `license` | `string` | License key to remove export watermarks | The license key validates your CE.SDK subscription and removes watermarks from exports. Get a free trial license at [https://img.ly/forms/free-trial](https://img.ly/forms/free-trial). ## Optional Configuration These properties customize engine behavior and are all optional. ### Engine Properties | Property | Type | Purpose | |----------|------|---------| | `baseURL` | `string` | Location of core engine assets (WASM, data files) | | `userId` | `string` | User identifier for MAU tracking | | `logger` | `function` | Custom logging function | | `role` | `'Creator'` | `'Adopter'` | `'Viewer'` | `'Presenter'` | User role for feature access | | `featureFlags` | `object` | Experimental feature toggles | ### Editor Properties | Property | Type | Purpose | |----------|------|---------| | `devMode` | `boolean` | Enable developer diagnostics | | `a11y` | `object` | Accessibility settings | | `ui` | `object` | User interface customization | ## Configuration Properties ### License Key The license key validates your CE.SDK subscription and removes watermarks from exports. Without a valid license, exports include a watermark. ```typescript highlight=highlight-license // License key removes watermarks from exports // Get a free trial at https://img.ly/forms/free-trial // license: 'YOUR_CESDK_LICENSE_KEY', ``` ### User ID Provide a unique user identifier for accurate Monthly Active User (MAU) tracking. This helps count users correctly when the same person accesses your application from multiple devices. ```typescript highlight=highlight-userId // User ID for accurate MAU tracking across devices userId: 'guides-user', ``` ### Custom Logger Replace the default console logging with a custom logger function. The logger receives a message string and an optional log level (`'Info'`, `'Warning'`, or `'Error'`). ```typescript highlight=highlight-logger // Custom logger for debugging and monitoring logger: (message: string, level?: string) => { console.log(`[CE.SDK ${level ?? 'Info'}] ${message}`); }, ``` ### Developer Mode Enable developer mode to get additional diagnostics and debugging information in the console. ```typescript highlight=highlight-devMode // Enable developer mode for diagnostics devMode: false, ``` ### Accessibility Settings Configure accessibility options like heading hierarchy for screen readers. The `headingsHierarchyStart` property sets which heading level (1-6) the editor should start from. ```typescript highlight=highlight-a11y // Accessibility settings a11y: { headingsHierarchyStart: 1 as const }, ``` ### Asset Base URL The `baseURL` property specifies the location of core engine assets, including WASM files, data files, and JavaScript workers. By default, these load from the IMG.LY CDN. For production deployments, host these assets yourself by copying the `assets` folder from `node_modules/@cesdk/engine/assets` to your server. Content assets like stickers and filters are loaded separately via asset source plugins (imported from `@cesdk/cesdk-js/plugins`), each of which accepts its own `baseURL` option defaulting to `https://cdn.img.ly/assets/v4`. ```typescript highlight=highlight-baseURL // Location of core engine assets (WASM, data files) // Default: IMG.LY CDN. For production, host assets yourself. // baseURL: 'https://your-cdn.com/cesdk-assets/', ``` ### Initialization Pass the configuration object to `CreativeEditorSDK.create()` along with a container element selector. ```typescript highlight=highlight-create CreativeEditorSDK.create('#cesdk_container', config) .then(async (cesdk: CreativeEditorSDK) => { ``` ## Runtime Configuration After initialization, use dedicated APIs to modify settings dynamically. ### Internationalization #### Locale Change the UI language using `cesdk.i18n.setLocale()`. ```typescript highlight=highlight-locale cesdk.i18n.setLocale('en'); const currentLocale = cesdk.i18n.getLocale(); console.log('Current locale:', currentLocale); ``` #### Translations Add or override UI text strings using `cesdk.i18n.setTranslations()`. ```typescript highlight=highlight-translations cesdk.i18n.setTranslations({ en: { 'common.back': 'Go Back', 'common.apply': 'Apply Changes' } }); ``` > **Note:** For complete localization including custom translations and RTL support, see [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/). ### Theme Set the UI theme using `cesdk.ui.setTheme()`. Options: `'light'`, `'dark'`, or `'system'`. ```typescript highlight=highlight-theme cesdk.ui.setTheme('light'); const currentTheme = cesdk.ui.getTheme(); console.log('Current theme:', currentTheme); ``` > **Note:** For advanced theming including custom CSS variables and color schemes, see [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/). ### Actions Register custom actions for user interactions like save and export. ```typescript highlight=highlight-actions cesdk.actions.register('customSave', async () => { const sceneBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(sceneBlob, 'application/zip'); }); ``` ### Built-in Actions CE.SDK provides built-in actions for common operations like saving, exporting, and importing. Add them to the navigation bar using `insertOrderComponent()`: ```typescript highlight=highlight-builtin-actions // Add built-in export and import actions to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportImage.navigationBar', 'ly.img.exportPDF.navigationBar', 'ly.img.exportScene.navigationBar', 'ly.img.exportArchive.navigationBar', 'ly.img.importScene.navigationBar', 'ly.img.importArchive.navigationBar' ] }); ``` **Available built-in actions:** | Action ID | Purpose | |-----------|---------| | `ly.img.saveScene.navigationBar` | Save scene to cloud | | `ly.img.exportImage.navigationBar` | Export as image (PNG/JPEG) | | `ly.img.exportPDF.navigationBar` | Export as PDF | | `ly.img.exportScene.navigationBar` | Export scene file | | `ly.img.exportArchive.navigationBar` | Export as archive (ZIP) | | `ly.img.importScene.navigationBar` | Import scene file | | `ly.img.importArchive.navigationBar` | Import archive (ZIP) | > **Note:** For detailed navigation bar customization including adding buttons and rearranging elements, see [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/). > **Note:** For a complete guide on registering and managing actions, see [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/). ### Scale Adjust UI scale for different device types. Options: `'normal'`, `'large'`, or `'modern'`. ```typescript highlight=highlight-scale cesdk.ui.setScale('modern'); const currentScale = cesdk.ui.getScale(); console.log('Current scale:', currentScale); ``` > **Note:** For advanced scale configuration including responsive callbacks, see [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/). ### Engine Settings Configure engine behavior using `engine.editor.setSetting()`. ```typescript highlight=highlight-settings engine.editor.setSetting('doubleClickToCropEnabled', true); engine.editor.setSetting('highlightColor', { r: 0, g: 0.5, b: 1, a: 1 }); const cropEnabled = engine.editor.getSetting('doubleClickToCropEnabled'); console.log('Double-click crop enabled:', cropEnabled); ``` > **Note:** For a complete reference of available engine settings, see [Engine Interface](https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/). ## API Reference | Method | Purpose | |--------|---------| | `CreativeEditorSDK.create()` | Initialize editor | | `cesdk.ui.setTheme()` | Set UI theme | | `cesdk.i18n.setLocale()` | Set UI locale | | `cesdk.i18n.setTranslations()` | Add translations | | `cesdk.ui.setScale()` | Set UI scale | | `cesdk.actions.register()` | Register custom actions | | `cesdk.ui.insertOrderComponent()` | Add built-in actions to navigation bar | | `cesdk.utils.downloadFile()` | Download blob as file | | `engine.editor.setSetting()` | Set engine setting | ## Next Steps - [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) - Use CE.SDK without the UI --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Conversion" description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/conversion/overview-44dc58/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools. - [To Base64](https://img.ly/docs/cesdk/sveltekit/conversion/to-base64-39ff25/) - Convert CE.SDK exports to Base64-encoded strings for embedding in URLs, storing in databases, or transmitting via APIs. - [To PNG](https://img.ly/docs/cesdk/sveltekit/conversion/to-png-f1660c/) - Export designs and images to PNG format with compression settings and target dimensions using CE.SDK. - [To PDF](https://img.ly/docs/cesdk/sveltekit/conversion/to-pdf-eb937f/) - Convert your design or document into a high-quality, print-ready PDF format. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/conversion/overview-44dc58/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) > [Overview](https://img.ly/docs/cesdk/sveltekit/conversion/overview-44dc58/) --- ## Supported Input and Output Formats CE.SDK accepts a range of input formats when working with designs, including: When it comes to exporting or converting designs, the SDK supports the following output formats: Each format serves different use cases, giving you the flexibility to adapt designs for your application’s needs. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To Base64" description: "Convert CE.SDK exports to Base64-encoded strings for embedding in URLs, storing in databases, or transmitting via APIs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/conversion/to-base64-39ff25/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) > [To Base64](https://img.ly/docs/cesdk/sveltekit/conversion/to-base64-39ff25/) --- Convert CE.SDK exports to Base64-encoded strings for embedding in HTML, storing in databases, or transmitting via JSON APIs.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-base64-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-base64-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-base64-browser/) Base64 encoding transforms binary image data into ASCII text, enabling you to embed images directly in HTML, store them in text-only databases, or transmit them through JSON APIs without binary handling. ```typescript file=@cesdk_web_examples/guides-conversion-to-base64-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) throw new Error('CE.SDK instance is required'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; await engine.scene.zoomToBlock(page); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); await cesdk.utils.downloadFile(blob, 'image/png'); cesdk.ui.showNotification({ message: `Base64: ${(base64.length / 1024).toFixed(0)} KB`, type: 'success' }); }, key: 'export-base64', label: 'To Base64', icon: '@imgly/Save' } ] }); cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); await cesdk.utils.downloadFile(blob, 'image/png'); }); } private blobToBase64(blob: Blob): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = () => reject(reader.error); reader.readAsDataURL(blob); }); } } export default Example; ``` ## Export a Block to Base64 Use `engine.block.export()` to export a design block as a Blob, then convert it to a Base64 data URI. ```typescript const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await blobToBase64(blob); ``` The export returns a Blob containing the rendered image. You then convert this Blob to a Base64 data URI using the browser's `FileReader` API. The resulting string includes the MIME type prefix (`data:image/png;base64,...`), making it ready for immediate use as an image source. ## Convert Blob to Base64 Convert the exported Blob into a Base64 data URI using the browser's `FileReader` API. ```typescript highlight=highlight-convert-base64 private blobToBase64(blob: Blob): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = () => reject(reader.error); reader.readAsDataURL(blob); }); } ``` The `readAsDataURL()` method returns a complete data URI including the MIME type prefix (`data:image/png;base64,...`). This wrapper converts the callback-based FileReader into a Promise for cleaner async/await usage. ## Customize the Built-in Export Action Override the default `exportDesign` action to integrate Base64 conversion into CE.SDK's built-in export flow. ```typescript highlight=highlight-custom-action cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const blob = await engine.block.export(currentPage, { mimeType: 'image/png' }); const base64 = await this.blobToBase64(blob); await cesdk.utils.downloadFile(blob, 'image/png'); }); ``` When registered, this action replaces the default export behavior. Any UI component or keyboard shortcut that triggers `exportDesign` will use your custom handler instead. ## Download the Export Use `cesdk.utils.downloadFile()` to save the exported Blob to the user's device. The method accepts a Blob and MIME type, triggering a browser download with the appropriate file extension. ## When to Use Base64 Base64 encoding works well for: - Embedding images directly in HTML or CSS without additional HTTP requests - Storing images in text-only databases like Redis or localStorage - Transmitting images through JSON APIs that don't support binary data - Generating data URIs for email templates > **Note:** Base64 increases file size by approximately 33%. For images larger than 100KB, consider binary storage or direct URL references instead. ## Troubleshooting **Base64 string too long** — Use JPEG or WebP formats with lower quality settings. Reduce dimensions with `targetWidth` and `targetHeight` export options. **Image not displaying** — Verify the data URI includes the correct MIME type prefix. Check that the string wasn't truncated during storage or transmission. **Performance issues** — FileReader operations are asynchronous but encoding large images can still block the UI. Consider Web Workers for images over 1MB. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to a Blob with format options (`mimeType`, `jpegQuality`, `webpQuality`, `targetWidth`, `targetHeight`) | | `engine.scene.getCurrentPage()` | Get the currently active page block | | `FileReader.readAsDataURL(blob)` | Convert Blob to Base64 data URI (Browser API) | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a Blob as a file | | `cesdk.actions.register(name, handler)` | Register or override an action | | `cesdk.ui.showNotification(options)` | Display a notification to the user | ## Next Steps - [Export Options](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) — Explore all available export formats and configuration - [Export to PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) — Generate PDFs for print and document workflows - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) — Export specific regions or individual elements - [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PDF" description: "Convert your design or document into a high-quality, print-ready PDF format." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/conversion/to-pdf-eb937f/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) > [To PDF](https://img.ly/docs/cesdk/sveltekit/conversion/to-pdf-eb937f/) --- The CE.SDK allows you to convert JPEG, PNG, WebP, BMP and SVG images into PDFs directly in the browser—no server-side processing required. You can perform this conversion programmatically or through the user interface.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-pdf-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-pdf-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-pdf-browser/) The CE.SDK supports converting single or multiple images to PDF while allowing transformations such as cropping, rotating, and adding text before exporting. You can also customize PDF output settings, including resolution, compatibility and underlayer. ```typescript file=@cesdk_web_examples/guides-conversion-to-pdf-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: To PDF Guide * * This example demonstrates: * - Exporting designs as PDF documents * - Configuring PDF output settings (DPI, compatibility, underlayer) * - Adding a custom PDF export button to the navigation bar */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) throw new Error('CE.SDK instance is required'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; await engine.scene.zoomToBlock(page); // Add PDF export buttons to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported successfully', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'High compatibility PDF exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF with underlayer exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-dpi', label: 'Custom DPI', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported at 150 DPI', type: 'success' }); } } ] }); } } export default Example; ``` This guide covers exporting designs as PDF documents, configuring output settings like DPI and compatibility, adding underlayers for specialty printing, and integrating PDF export into the user interface. ## Convert to PDF Programmatically You can use the CE.SDK to load an image, apply basic edits, and export it as a PDF programmatically. The following examples demonstrate how to convert a single image and how to merge multiple images into a single PDF. ### Convert a Single Image to PDF The example below loads an image, applies transformations, and exports it as a PDF. ```ts // Prepare an image URL const imageURL = 'https://img.ly/static/ubq_samples/sample_4.jpg'; // Create a new scene by loading the image immediately await cesdk.createFromImage(imageURL); // Find the automatically added graphic block with an image fill const block = engine.block.findByType('graphic')[0]; // Apply crop with a scale ratio of 2.0 engine.block.setCropScaleRatio(block, 2.0); // Export as PDF Blob const page = engine.scene.getCurrentPage()!; const blob = await engine.block.export(page, { mimeType: 'application/pdf' }); // You can now save it or display it in your application ``` ### Combine Multiple Images into a Single PDF The example below demonstrates how to merge multiple images into a single PDF document. ```ts // Prepare image URLs const images = [ 'https://img.ly/static/ubq_samples/sample_1.jpg', 'https://img.ly/static/ubq_samples/sample_2.jpg', 'https://img.ly/static/ubq_samples/sample_3.jpg', ]; // Create an empty scene with a 'VerticalStack' layout const scene = engine.scene.create('VerticalStack'); const [stack] = engine.block.findByType('stack'); // Load all images as pages for (const image of images) { // Append the new page to the stack const page = engine.block.create('page'); engine.block.appendChild(stack, page); // Set the image as the fill of the page const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', image); engine.block.setFill(page, imageFill); } // Export all images as a single PDF blob const blob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // You can now save it or display it in your application ``` ## Export a Page as PDF Use `engine.block.export()` to export a design block as a PDF. The method accepts a block ID and export options including the MIME type. ```typescript highlight=highlight-export-pdf // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); ``` Export returns a Blob containing the PDF data. You can export a single page for a single-page PDF, or export the entire scene to include all pages in a multi-page PDF document. ## Download the PDF Use `cesdk.utils.downloadFile()` to save the exported PDF to the user's device. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); ``` The utility handles creating a download link and triggering the browser's save dialog with the appropriate file extension. ## PDF Conversion via the User Interface The CE.SDK allows you to enable PDF conversion directly from the user interface. You can customize the UI to include a "Convert to PDF" button, allowing users to trigger conversion to PDF after they [upload images](https://img.ly/docs/cesdk/sveltekit/insert-media/images-63848a/) and perform any edits or adjustments. ### Add a PDF Export Button Integrate PDF export into the CE.SDK interface by adding a custom button to the navigation bar. ```typescript highlight=highlight-export-button // Add PDF export buttons to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene as PDF (includes all pages) const scene = engine.scene.get()!; const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported successfully', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'High compatibility PDF exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF with underlayer exported', type: 'success' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-dpi', label: 'Custom DPI', icon: '@imgly/Download', onClick: async () => { const scene = engine.scene.get()!; // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); cesdk.ui.showNotification({ message: 'PDF exported at 150 DPI', type: 'success' }); } } ] }); ``` The button triggers the export workflow when clicked, providing users with a convenient way to download their designs as PDF documents. ### Alternative: Register a Custom Component You can also use `ui.registerComponent` to create a more customized button with full control over styling and behavior. ```ts // Register a custom button component cesdk.ui.registerComponent( 'convert.nav', ({ builder: { Button }, engine }) => { Button('convert-to-pdf', { label: 'Convert To PDF', icon: '@imgly/Download', color: 'accent', onClick: async () => { // Export the current scene as a PDF blob const scene = engine.scene.get()!; const blob = await engine.block.export(scene, { mimeType: 'application/pdf', }); // Trigger download of the PDF blob const element = document.createElement('a'); element.setAttribute('href', window.URL.createObjectURL(blob)); element.setAttribute('download', 'converted.pdf'); element.style.display = 'none'; element.click(); element.remove(); }, }); }, ); // Add the custom button at the end of the navigation bar cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.navigation.bar' }), 'convert.nav', ]); ``` For more details on customizing the UI, see the [User Interface Configuration Guide](https://img.ly/docs/cesdk/sveltekit/user-interface/customization-72b2f8/). ## Configure PDF Output Settings The SDK provides various options for customizing PDF exports. You can control resolution, compatibility, and underlayer settings. ### Available PDF Output Settings - **Resolution:** Adjust the DPI (dots per inch) to create print-ready PDFs with the desired level of detail. - **Page Size:** Define custom dimensions in pixels for the output PDF. If specified, the block will scale to fully cover the target size while maintaining its aspect ratio. - **Compatibility:** Enable this setting to improve compatibility with various PDF viewers. When enabled, images and effects are rasterized based on the scene's DPI instead of being embedded as vector elements. - **Underlayer:** Add an underlayer beneath the image content to optimize printing on non-white or specialty media (e.g., fabric, glass). The ink type is defined in `ExportOptions` using a spot color. You can also apply a positive or negative offset, in design units, to adjust the underlayer's scale. ### Adjust DPI for Print Quality Control the output resolution by setting the scene's DPI property before export. ```typescript highlight=highlight-dpi // Adjust the scene DPI for print-ready output // Higher DPI = better quality but larger file size engine.block.setFloat(scene, 'scene/dpi', 150); ``` Higher DPI values produce better quality output but result in larger file sizes. The default is 300 DPI, which is suitable for most print applications. ### Enable High Compatibility Mode Enable high compatibility mode for consistent rendering across different PDF viewers. ```typescript highlight=highlight-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` When enabled, complex elements like gradients with transparency are rasterized at the scene's DPI setting instead of being embedded as native PDF objects. This ensures consistent appearance in viewers like Safari and macOS Preview but increases file size. ### PDF Performance Optimization The `exportPdfWithHighCompatibility` flag significantly impacts PDF export performance, especially for high-DPI content: **When `true` (default - safer but slower):** - Rasterizes images and gradients at the scene's DPI setting - Maximum compatibility with all PDF viewers including Safari and macOS Preview - Slower performance (4-10x slower for high-DPI content) - Larger file sizes **When `false` (faster but needs testing):** - Embeds images and gradients directly as native PDF objects - 6-15x faster export performance for high-DPI content - Smaller file sizes (typically 30-40% reduction) - May have rendering issues in Safari/macOS Preview with gradients that use transparency ```typescript const scene = engine.scene.get()!; // For maximum performance (test with your print workflow first) engine.block.setFloat(scene, 'scene/dpi', 150); // Reduce from default 300 const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false, // Much faster }); ``` **Before using `exportPdfWithHighCompatibility: false` in production:** - Test generated PDFs with your actual print vendor/equipment - Verify rendering in Safari and macOS Preview if end-users will view PDFs in those applications - Check that gradients with transparency render correctly - Confirm your content renders properly in Adobe Acrobat and Chrome (these typically work fine) **Safe to use `false` when:** - PDFs go directly to professional printing (not viewed in Safari/Preview) - Content is primarily photos and solid colors (minimal gradients with transparency) - Performance is critical for batch processing workflows **Keep `true` when:** - Users view PDFs in Safari or macOS Preview - Maximum compatibility is required - Content has complex gradients with transparency - You cannot test with your print workflow before production ### Add an Underlayer for Specialty Printing Add an underlayer for printing on non-white or transparent media like fabric or glass. ```typescript highlight=highlight-spot-color // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` First define the spot color that will be used for the underlayer. The RGB values provide a preview representation in the editor. ```typescript highlight=highlight-underlayer // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); ``` The underlayer creates a solid background behind your design content. The negative offset shrinks the underlayer slightly to prevent visible edges around the printed output. ### Customizing PDF Output You can configure all PDF settings together when exporting. ```ts const scene = engine.scene.get()!; // Adjust the DPI to 72 engine.block.setFloat(scene, 'scene/dpi', 72); // Set spot color to be used as underlayer engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); const blob = await engine.block.export(scene, { mimeType: 'application/pdf', // Set target width and height in pixels targetWidth: 800, targetHeight: 600, // Increase compatibility with different PDF viewers exportPdfWithHighCompatibility: true, // Add an underlayer beneath the image content exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', underlayerOffset: -2.0, }); ``` ## Troubleshooting **PDF file size too large** — Reduce the scene DPI or disable high compatibility mode. Use JPEG compression for embedded images where quality loss is acceptable. **Gradients look different in some viewers** — Enable `exportPdfWithHighCompatibility` to rasterize gradients at the scene's DPI setting for consistent appearance across all PDF viewers. **Underlayer not visible in print** — Verify the spot color name matches your print vendor's configuration exactly. Check that the PDF wasn't flattened during post-processing. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to a Blob with format options (`mimeType`, `exportPdfWithHighCompatibility`, `exportPdfWithUnderlayer`, `underlayerSpotColorName`, `underlayerOffset`, `targetWidth`, `targetHeight`) | | `engine.block.setFloat(block, property, value)` | Set a float property on a block (use `scene/dpi` to control PDF resolution) | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color for underlayer printing | | `engine.scene.get()` | Get the current scene block ID | | `engine.scene.getCurrentPage()` | Get the currently active page block | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a Blob as a file | ## Next Steps - [Export Options](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) — Explore all available export formats and configuration - [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints - [Export for Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/) — Learn more about print-specific export settings --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PNG" description: "Export designs and images to PNG format with compression settings and target dimensions using CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/conversion/to-png-f1660c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) > [To PNG](https://img.ly/docs/cesdk/sveltekit/conversion/to-png-f1660c/) --- Export designs to PNG format with lossless quality and optional transparency support.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-png-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-conversion-to-png-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-conversion-to-png-browser/) PNG is a lossless image format that preserves image quality and supports transparency. It's ideal for designs requiring pixel-perfect fidelity, logos, graphics with transparent backgrounds, and any content where quality cannot be compromised. ```typescript file=@cesdk_web_examples/guides-conversion-to-png-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Export programmatically using the engine API const exportProgrammatically = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Export with compression level (0-9) // Higher values produce smaller files but take longer const exportWithCompression = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Export with target dimensions // The block scales to fill the target while maintaining aspect ratio const exportWithDimensions = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; // Trigger the built-in export action const triggerExportAction = async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); }; // Override the default export action to customize behavior cesdk.actions.register('exportDesign', async (options) => { // Use the utils API to export with a loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); // Custom logic: log the export details console.log( `Exported ${blobs.length} file(s) as ${exportOptions.mimeType}` ); // Download the exported file await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); }); // Add export dropdown to navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-png', label: 'Export PNG', icon: '@imgly/Save', onClick: exportProgrammatically }, { id: 'ly.img.action.navigationBar', key: 'export-png-action', label: 'Export PNG (action)', icon: '@imgly/Save', onClick: triggerExportAction }, { id: 'ly.img.action.navigationBar', key: 'export-png-compressed', label: 'Export PNG (compressed)', icon: '@imgly/Save', onClick: exportWithCompression }, { id: 'ly.img.action.navigationBar', key: 'export-png-hd', label: 'Export PNG (HD)', icon: '@imgly/Save', onClick: exportWithDimensions } ] }); } } export default Example; ``` This guide covers how to export designs to PNG, configure export options, and integrate with the built-in export action. ## Export to PNG Use `engine.block.export()` to export a design block to PNG. The method returns a Blob containing the image data. ```typescript highlight=highlight-export-programmatic // Export programmatically using the engine API const exportProgrammatically = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` ## Compression Level Control the file size versus export speed tradeoff using `pngCompressionLevel`. Valid values are 0-9, where higher values produce smaller files but take longer to export. Since PNG is lossless, image quality remains unchanged. ```typescript highlight=highlight-options-compression // Export with compression level (0-9) // Higher values produce smaller files but take longer const exportWithCompression = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` The default compression level is 5, providing a good balance between file size and export speed. ## Target Dimensions Resize the output by setting `targetWidth` and `targetHeight`. The block scales to fill the target dimensions while maintaining its aspect ratio. ```typescript highlight=highlight-options-dimensions // Export with target dimensions // The block scales to fill the target while maintaining aspect ratio const exportWithDimensions = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(blob, 'image/png'); }; ``` ## Trigger the Export Action The built-in `exportDesign` action triggers the default export workflow with a loading dialog and automatically downloads the file. ```typescript highlight=highlight-export-action // Trigger the built-in export action const triggerExportAction = async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); }; ``` ## Override the Export Action Register a custom handler for the `exportDesign` action to customize behavior. This allows you to add custom logic such as uploading to a server or processing the exported file. ```typescript highlight=highlight-override-action // Override the default export action to customize behavior cesdk.actions.register('exportDesign', async (options) => { // Use the utils API to export with a loading dialog const { blobs, options: exportOptions } = await cesdk.utils.export(options); // Custom logic: log the export details console.log( `Exported ${blobs.length} file(s) as ${exportOptions.mimeType}` ); // Download the exported file await cesdk.utils.downloadFile(blobs[0], exportOptions.mimeType); }); ``` The `cesdk.utils.export()` method handles the export with a loading dialog, while `cesdk.utils.downloadFile()` triggers the browser download. ## API Reference | API | Description | | --- | --- | | `engine.block.export(block, options)` | Exports a block to a Blob with the specified options | | `cesdk.actions.run('exportDesign', options)` | Triggers the default export workflow | | `cesdk.actions.register('exportDesign', handler)` | Overrides the default export action | | `cesdk.utils.export(options)` | Exports with a loading dialog, returns `{ blobs, options }` | | `cesdk.utils.downloadFile(blob, mimeType)` | Downloads a Blob as a file | ## Next Steps - [Conversion Overview](https://img.ly/docs/cesdk/sveltekit/conversion/overview-44dc58/) - Learn about other export formats - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Understand the full export workflow - [To PDF](https://img.ly/docs/cesdk/sveltekit/conversion/to-pdf-eb937f/) - Export designs to PDF format --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Audio" description: "Create audio in videos" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) --- The **CreativeEditor (CE.SDK)** provides different **audio features** you can leverage in web-based apps. This section covers how to **add audio blocks**, **extract** audio from videos, control **playback**, generate **waveforms**, and manage **multi-track audio**. ## Use Cases Use the CE.SDK audio features when you need to create: - Background music - Voice-overs - Sound effects - Podcasts ## How Audio Works in the CE.SDK The CE.SDK represents audio as audio blocks. Each block has: - Source (file or extracted track) - Playback properties (time, speed, volume, mute) - Time-based properties (offset, duration, trim length) - Optional waveform thumbnails for UI visualization ### What Are the Time-Based Properties Each audio block has properties that determine when and how much of the sound plays: - **Offset:** the delay before an audio block begins playing inside the scene. - **Trim length**: cuts the audio to keep only a specific part of it. - **Duration**: defines how long the audio plays. ### What Are Waveforms Waveforms are **visual representations** of the audio signal over time. They show the amplitude (volume level) of the sound at each moment, using peaks and valleys. The CE.SDK can generate sampled waveform data that you can render in your UI. This is especially helpful for editing tools. ### When to Create VS. Extract Audio The CE.SDK allows you to either create a blank audio block or extract the audio from a video. - **Create an empty audio block** when you want to add external or standalone audio that doesn’t come from a video. - **Extract the audio** when it comes from a video block already in your scene. ## CE.SDK Audio Features Overview The table below summarizes the main audio-related capabilities in CE.SDK.\ Each feature is related to an example further down the page. | **Category** | **Action** | **API Name** | **Notes** | |--------------------------|-----------------------------|---------------------------------------|-----------| | **Create Audio Blocks** | Create empty audio block | `create` | Creates an audio block with no source. | | | Extract audio from video | `createAudioFromVideo` | Requires a video block ID and track index. | | **Playback Control** | Set playback position | `setPlaybackTime` | Time in seconds. | | | Volume | `setVolume` | Range `0.0–1.0`. | | | Mute | `setMuted` | Boolean. | | | Playback speed | `setPlaybackSpeed` | Range `0.25–3.0`. | | **Time Management** | Offset | `setTimeOffset` | To move the playback starting point in the scene. | | | Duration | `setDuration` | Total length (seconds). | | | Trim length | `setTrimLength` | Cuts content to a defined length. | | **Replace Audio Source** | Reload edited scene | `scene.loadFromString` | Used when replacing audio at runtime. | | **Waveforms** | Generate thumbnails | `generateAudioThumbnailSequence` | Produces waveform sample data for UI. | | **Export Audio** | Export WAV | `exportAudio` | MIME type: `audio/wav`. | | | Export MP4 | `exportAudio` | MIME type: `audio/mp4`. | ## Examples Find in the following list of examples different API calls listed in the preceding table. ### Create Audio To create an empty audio block, use: ```ts const blockId = engine.block.create('audio'); ``` Use `engine.block.createAudioFromVideo(blockId, trackIndex: number);`. This example: 1. Extracts the first audio track (1) from a video. 2. Appends it to the page for further manipulation. > **Note:** `videoBlockId` and `pageId` must refer to existing blocks. ```ts const audioBlockId = engine.block.createAudioFromVideo(videoBlockId, 0); // Attach to the page so it’s part of the scene engine.block.appendChild(pageId, audioBlockId); ``` This example: 1. Creates an audio block. 2. Attaches the audio block to the page. 3. Sets the source for the audio from a remote URL. > **Note:** `pageId` must refer to an existing page. ```ts // Create an audio block const audioBlockId = engine.block.create('audio'); await engine.block.appendChild(pageId, audioBlockId); engine.block.setString( audioBlockId, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a' ); ``` For details on loading sources, check [the dedicated guide](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/). This example exports the audio block in **mp4** format: > **Note:** `blockId` must refer to an existing audio block. ```ts engine.block.exportAudio(blockId, { mymeType: 'audio/mp4' } ); ``` This example exports the audio in **wav** format: ```ts const audioData = await engine.block.exportAudio(blockId, { mimeType: 'audio/wav' } ); ``` ### Control Audio Playback Use `engine.block.setPlaybackTime(blockId, time: number)`. This example sets the current playback at 3 seconds: ```ts engine.block.setPlaybackTime(blockId, 3) ``` Use `engine.block.setVolume(blockId, volume: number);`. This example sets the volume at 1 (max value): ```ts engine.block.setVolume(blockId, 1); ``` Use `engine.block.setMuted(blockId, muted: boolean);`. This example mutes the audio of the block: ```ts engine.block.setMuted(blockId, true); ``` Use `engine.block.setPlaybackSpeed(blockId, speed: number);`. This example multiplies the speed by 0.25: ```ts engine.block.setPlaybackSpeed(blockId, 0.25); ``` ### Manage Audio Timing If the audio has an offset of: - 0 s → It plays immediately when the scene starts. - 2 s → The CE.SDK waits 2 seconds before playing it. - 10 s → The audio only starts at the 10-second mark. Use `engine.block.setTimeOffset(blockId, offset: number)`. This example starts the audio at 2 s in the composition: ```ts engine.block.setTimeOffset(blockId, 2); ``` Use `engine.block.setDuration(blockId, duration: number)`. This example sets the audio duration for 300 seconds: ```ts engine.block.setDuration(blockId, 300) ``` Use `engine.block.setTrimLength(blockId, length: number);`. This example creates a new trim that: 1. Starts at the second 2 of the audio content. 2. Plays for 10 seconds. ```ts engine.block.setTrimOffset(blockId, 2) engine.block.setTrimLength(blockId, 10); ``` Use: ```ts engine.block.generateAudioThumbnailSequence( blockId, samplesPerChunk: number, timeBegin: number, timeEnd: number, numberOfSamples: number, numberOfChannels: number) ``` This example generates 1 audio sample that: - Produces 3 chunks of this sample. - Start at second 8. - End at second 18. - Is stereo audio (1 for mono, 2 for stereo) > **Note:** `audioBlockId` must refer to an existing block. ```ts const audioThumbnail = engine.block.generateAudioThumbnailSequence( audioBlockId, 3, // samplesPerChunk 8, // timeBegin 18, // timeEnd 1, // numberOfSamples 2, // numberOfChannels // Return the result (chunkIndex, result) => { if (result instanceof Error) { console.error('Thumbnail chunk failed', result); audioThumbnail(); return; } console.log(`Chunk ${chunkIndex}`, result); } ); ``` Once generated, integrate the waveform into your UI. ## Next Steps For each feature’s detailed instructions and options: - Explore the [CE.SDK API options](https://img.ly/docs/cesdk/sveltekit/api-reference/overview-8f24e1/). - Check the dedicated guides in the audio section. --- ## Related Pages - [Add Sound Effects](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-sound-effects-9e984e/) - Learn how to use buffers with arbitrary data to generate sound effects programmatically - [Add Music](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-music-5b182c/) - Add background music and audio tracks to video projects using CE.SDK's audio block system. - [Adjust Audio Volume](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-volume-7ecc4a/) - Learn how to adjust audio volume in CE.SDK to control playback levels, mute audio, and balance multiple audio sources in video projects. - [Adjust Audio Playback Speed](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-speed-908d57/) - Learn how to adjust audio playback speed in CE.SDK to create slow-motion, time-stretched, and fast-forward audio effects. - [Loop Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/loop-937be7/) - Create seamless repeating audio playback for background music and sound effects using CE.SDK's audio looping system. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Music" description: "Add background music and audio tracks to video projects using CE.SDK's audio block system." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-music-5b182c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) > [Add Music](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-music-5b182c/) --- Add background music and audio tracks to video projects using CE.SDK's audio block system for rich multimedia experiences.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-music-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-music-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-add-music-browser/) Audio blocks are standalone time-based blocks that play alongside video content, independent of video fills. You can add music from the built-in asset library or from custom URLs, position tracks in the composition, configure volume levels, and layer multiple audio tracks for complex soundscapes. ```typescript file=@cesdk_web_examples/guides-create-audio-add-music-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Music Guide * * Demonstrates adding background music to video projects: * - Creating audio blocks programmatically * - Setting audio source URIs * - Configuring timeline position and duration * - Adjusting audio volume * - Querying audio assets from the library * - Managing audio blocks */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found in scene'); } // Set page duration for timeline engine.block.setDuration(page, 30); // Enable audio and timeline features for the UI cesdk.feature.enable('ly.img.video.timeline'); cesdk.feature.enable('ly.img.video.audio'); cesdk.feature.enable('ly.img.video.controls.playback'); // Create an audio block for background music const audioBlock = engine.block.create('audio'); // Set the audio source file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Append audio to the page (makes it part of the timeline) engine.block.appendChild(page, audioBlock); // Wait for audio to load to get duration await engine.block.forceLoadAVResource(audioBlock); // Get the total duration of the audio file const totalDuration = engine.block.getAVResourceTotalDuration(audioBlock); console.log('Audio total duration:', totalDuration, 'seconds'); // Set when the audio starts on the timeline (0 = beginning) engine.block.setTimeOffset(audioBlock, 0); // Set how long the audio plays (use full duration or page duration) const playbackDuration = Math.min(totalDuration, 30); engine.block.setDuration(audioBlock, playbackDuration); // Set the audio volume (0.0 = mute, 1.0 = full volume) engine.block.setVolume(audioBlock, 0.8); // Get current volume const currentVolume = engine.block.getVolume(audioBlock); console.log('Audio volume:', currentVolume); // Query available audio tracks from the asset library const audioAssets = await engine.asset.findAssets('ly.img.audio', { page: 0, perPage: 10 }); console.log('Available audio assets:', audioAssets.assets.length); // Log metadata for each audio asset audioAssets.assets.forEach((asset) => { console.log('Audio asset:', { id: asset.id, label: asset.label, duration: asset.meta?.duration, uri: asset.meta?.uri }); }); // Find all audio blocks in the scene const allAudioBlocks = engine.block.findByType('audio'); console.log('Total audio blocks:', allAudioBlocks.length); // Get information about each audio block allAudioBlocks.forEach((block, index) => { const uri = engine.block.getString(block, 'audio/fileURI'); const timeOffset = engine.block.getTimeOffset(block); const duration = engine.block.getDuration(block); const volume = engine.block.getVolume(block); console.log(`Audio block ${index + 1}:`, { uri: uri.split('/').pop(), // Just filename timeOffset: `${timeOffset}s`, duration: `${duration}s`, volume: `${(volume * 100).toFixed(0)}%` }); }); // Example: Remove the second audio block if it exists if (allAudioBlocks.length > 1) { const blockToRemove = allAudioBlocks[1]; // Destroy the block to remove it and free resources engine.block.destroy(blockToRemove); console.log('Removed second audio block'); } console.log( 'Add Music guide initialized. Open the timeline to see audio tracks.' ); } } export default Example; ``` This guide covers how to add music using the built-in audio UI and how to create and configure audio blocks programmatically using the Block API. ## Using the Built-in Audio UI ### Enable Audio Features Audio blocks require timeline support. Enable the audio and timeline features to give users access to audio capabilities through the UI. ```typescript highlight-enable-audio-features // Enable audio and timeline features for the UI cesdk.feature.enable('ly.img.video.timeline'); cesdk.feature.enable('ly.img.video.audio'); cesdk.feature.enable('ly.img.video.controls.playback'); ``` These features control: - `ly.img.video.timeline` - Shows the timeline for positioning audio tracks - `ly.img.video.audio` - Enables the audio library in the dock - `ly.img.video.controls.playback` - Adds playback controls for previewing audio ### User Workflow With audio features enabled, users can add music through the interface: 1. **Open the dock** - Access the asset library panel 2. **Select audio category** - Browse available music tracks 3. **Preview tracks** - Listen to audio before adding 4. **Drag to timeline** - Add audio to the project 5. **Position on timeline** - Adjust when audio starts and ends 6. **Adjust volume** - Use the inspector to set volume levels ## Programmatic Audio Creation ### Create Audio Block We create audio blocks using `engine.block.create('audio')` and set the source file using the `audio/fileURI` property. The audio block must be appended to a page to become part of the composition. ```typescript highlight-create-audio-block // Create an audio block for background music const audioBlock = engine.block.create('audio'); // Set the audio source file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Append audio to the page (makes it part of the timeline) engine.block.appendChild(page, audioBlock); ``` Audio blocks support common formats including M4A, MP3, and WAV. The source URI can point to any accessible URL or local file. ### Configure Time Position Audio blocks have time-based properties that control when and how long they play. We use `setTimeOffset()` to set the start time and `setDuration()` to control playback length. ```typescript highlight-configure-timeline // Wait for audio to load to get duration await engine.block.forceLoadAVResource(audioBlock); // Get the total duration of the audio file const totalDuration = engine.block.getAVResourceTotalDuration(audioBlock); console.log('Audio total duration:', totalDuration, 'seconds'); // Set when the audio starts on the timeline (0 = beginning) engine.block.setTimeOffset(audioBlock, 0); // Set how long the audio plays (use full duration or page duration) const playbackDuration = Math.min(totalDuration, 30); engine.block.setDuration(audioBlock, playbackDuration); ``` The `forceLoadAVResource()` method ensures the audio file is loaded before we access its duration. This is important when you need to know the total length of the audio file for timing calculations. ### Configure Volume Volume is set using `setVolume()` with values from 0.0 (mute) to 1.0 (full volume). This volume level is applied during export and affects the final rendered output. ```typescript highlight-configure-volume // Set the audio volume (0.0 = mute, 1.0 = full volume) engine.block.setVolume(audioBlock, 0.8); // Get current volume const currentVolume = engine.block.getVolume(audioBlock); console.log('Audio volume:', currentVolume); ``` ## Working with Audio Assets ### Query Audio Library CE.SDK provides a demo audio library that you can query using the Asset API. This allows you to build custom audio selection interfaces or programmatically add tracks based on metadata. ```typescript highlight-query-audio-assets // Query available audio tracks from the asset library const audioAssets = await engine.asset.findAssets('ly.img.audio', { page: 0, perPage: 10 }); console.log('Available audio assets:', audioAssets.assets.length); // Log metadata for each audio asset audioAssets.assets.forEach((asset) => { console.log('Audio asset:', { id: asset.id, label: asset.label, duration: asset.meta?.duration, uri: asset.meta?.uri }); }); ``` Each asset includes metadata such as duration, file URI, and thumbnail URL, which you can use to display track information or make programmatic selections. ## Managing Audio Blocks ### List Audio Blocks Use `findByType('audio')` to retrieve all audio blocks in the scene. This is useful for building audio management interfaces or batch operations. ```typescript highlight-list-audio-blocks // Find all audio blocks in the scene const allAudioBlocks = engine.block.findByType('audio'); console.log('Total audio blocks:', allAudioBlocks.length); // Get information about each audio block allAudioBlocks.forEach((block, index) => { const uri = engine.block.getString(block, 'audio/fileURI'); const timeOffset = engine.block.getTimeOffset(block); const duration = engine.block.getDuration(block); const volume = engine.block.getVolume(block); console.log(`Audio block ${index + 1}:`, { uri: uri.split('/').pop(), // Just filename timeOffset: `${timeOffset}s`, duration: `${duration}s`, volume: `${(volume * 100).toFixed(0)}%` }); }); ``` ### Remove Audio To remove an audio block, call `destroy()` which removes it from the scene and frees its resources. ```typescript highlight-remove-audio // Example: Remove the second audio block if it exists if (allAudioBlocks.length > 1) { const blockToRemove = allAudioBlocks[1]; // Destroy the block to remove it and free resources engine.block.destroy(blockToRemove); console.log('Removed second audio block'); } ``` Always destroy blocks that are no longer needed to prevent memory leaks, especially when working with multiple audio files. ## API Reference | Method | Description | | -------------------------------------------------- | ----------------------------------- | | `feature.enable('ly.img.video.timeline')` | Show timeline for audio positioning | | `feature.enable('ly.img.video.audio')` | Enable audio library in dock | | `feature.enable('ly.img.video.controls.playback')` | Add playback controls | | `block.create('audio')` | Create a new audio block | | `block.setString(id, 'audio/fileURI', uri)` | Set the audio source file | | `block.setTimeOffset(id, seconds)` | Set when audio starts playing | | `block.setDuration(id, seconds)` | Set audio playback duration | | `block.setVolume(id, volume)` | Set volume (0.0 to 1.0) | | `block.getVolume(id)` | Get current volume level | | `block.getAVResourceTotalDuration(id)` | Get total audio file duration | | `block.forceLoadAVResource(id)` | Force load audio resource | | `block.findByType('audio')` | Find all audio blocks in scene | | `asset.findAssets(sourceId, query)` | Query audio assets | ## Audio Type A block for playing audio content. This section describes the properties available for the **Audio Type** (`//ly.img.ubq/audio`) block type. | Property | Type | Default | Description | | ------------------------------ | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | `audio/fileURI` | `String` | `""` | A URI referencing an audio file. | | `audio/totalDuration` | `Double` | `"-"` | The total duration of the audio file., *(read-only)* | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Crop, Cover, Contain)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `playback/duration` | `Double` | `null` | The duration in seconds for which this block should be visible. | | `playback/looping` | `Bool` | `false` | Whether the medium should start from the beginning again or should stop. | | `playback/muted` | `Bool` | `false` | Whether the audio is muted. | | `playback/playing` | `Bool` | `false` | A tag that can be set on elements for their playback time to be progressed. | | `playback/soloPlaybackEnabled` | `Bool` | `false` | A tag for blocks where playback should progress while the scene is paused. | | `playback/speed` | `Float` | `1` | The playback speed multiplier. | | `playback/time` | `Double` | `0` | The current playback time of the block contents in seconds. | | `playback/timeOffset` | `Double` | `0` | The time in seconds relative to its parent at which this block should first appear. | | `playback/trimLength` | `Double` | `"-"` | The relative duration of the clip for playback. | | `playback/trimOffset` | `Double` | `"-"` | The time within the clip at which playback should begin, in seconds. | | `playback/volume` | `Float` | `1` | Audio volume with a range of \[0, 1]. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Sound Effects" description: "Learn how to use buffers with arbitrary data to generate sound effects programmatically" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-sound-effects-9e984e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) > [Add Sound Effects](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/add-sound-effects-9e984e/) --- Generate sound effects programmatically using buffers with arbitrary audio data. Create notification chimes, alert tones, and melodies without external files.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-sound-effects-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-add-sound-effects-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-add-sound-effects-browser/) CE.SDK lets you create audio from code using buffers. This approach generates sound effects dynamically without external files—useful for notification tones, procedural audio, or any scenario where you need to synthesize audio at runtime. ```typescript file=@cesdk_web_examples/guides-create-audio-add-sound-effects-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * Creates a WAV file buffer from audio parameters and a sample generator function. * * @param sampleRate - Sample rate in Hz (e.g., 48000) * @param durationSeconds - Duration of the audio in seconds * @param generator - Function that generates sample values (-1.0 to 1.0) for each time point * @returns Uint8Array containing a stereo WAV file */ function createWavBuffer( sampleRate: number, durationSeconds: number, /* eslint-disable-next-line no-unused-vars -- Parameter name documents callback signature */ generator: (time: number) => number ): Uint8Array { const bitsPerSample = 16; const channels = 2; // Stereo output const numSamples = Math.floor(durationSeconds * sampleRate); const dataSize = numSamples * channels * (bitsPerSample / 8); // Create WAV file buffer (44-byte header + audio data) const wavBuffer = new ArrayBuffer(44 + dataSize); const view = new DataView(wavBuffer); // RIFF chunk descriptor view.setUint32(0, 0x52494646, false); // "RIFF" view.setUint32(4, 36 + dataSize, true); // File size - 8 view.setUint32(8, 0x57415645, false); // "WAVE" // fmt sub-chunk view.setUint32(12, 0x666d7420, false); // "fmt " view.setUint32(16, 16, true); // Sub-chunk size (16 for PCM) view.setUint16(20, 1, true); // Audio format (1 = PCM) view.setUint16(22, channels, true); // Number of channels view.setUint32(24, sampleRate, true); // Sample rate view.setUint32(28, sampleRate * channels * (bitsPerSample / 8), true); view.setUint16(32, channels * (bitsPerSample / 8), true); // Block align view.setUint16(34, bitsPerSample, true); // Bits per sample // data sub-chunk view.setUint32(36, 0x64617461, false); // "data" view.setUint32(40, dataSize, true); // Data size // Generate audio samples let offset = 44; for (let i = 0; i < numSamples; i++) { const time = i / sampleRate; // Generate mono sample and duplicate to both channels const value = generator(time); const sample = Math.max(-32768, Math.min(32767, Math.round(value * 32767))); view.setInt16(offset, sample, true); // Left channel view.setInt16(offset + 2, sample, true); // Right channel offset += 4; } return new Uint8Array(wavBuffer); } /** * Calculates an ADSR (Attack-Decay-Sustain-Release) envelope value for a note. * The envelope shapes the volume over time, creating natural-sounding tones. * * @param time - Current time in seconds * @param noteStart - When the note starts (seconds) * @param noteDuration - Total note duration including release (seconds) * @param attack - Time to reach peak volume (seconds) * @param decay - Time to fall from peak to sustain level (seconds) * @param sustain - Held volume level (0.0 to 1.0) * @param release - Time to fade to silence (seconds) * @returns Envelope amplitude (0.0 to 1.0) */ function adsr( time: number, noteStart: number, noteDuration: number, attack: number, decay: number, sustain: number, release: number ): number { const t = time - noteStart; if (t < 0) return 0; const noteEnd = noteDuration - release; if (t < attack) { // Attack phase: ramp up from 0 to 1 return t / attack; } else if (t < attack + decay) { // Decay phase: ramp down from 1 to sustain level return 1 - ((t - attack) / decay) * (1 - sustain); } else if (t < noteEnd) { // Sustain phase: hold at sustain level return sustain; } else if (t < noteDuration) { // Release phase: ramp down from sustain to 0 return sustain * (1 - (t - noteEnd) / release); } return 0; } // Musical note frequencies (Hz) for the 4th and 5th octaves const NOTE_FREQUENCIES = { C4: 261.63, D4: 293.66, E4: 329.63, F4: 349.23, G4: 392.0, A4: 440.0, B4: 493.88, C5: 523.25, D5: 587.33, E5: 659.25, F5: 698.46, G5: 783.99, A5: 880.0, B5: 987.77, C6: 1046.5 }; // Sound effect 1: Ascending "success" fanfare (2 seconds) // Creates a triumphant feeling with overlapping notes building to a chord const SUCCESS_CHIME = { notes: [ // Quick ascending arpeggio { freq: NOTE_FREQUENCIES.C4, start: 0.0, duration: 0.3 }, { freq: NOTE_FREQUENCIES.E4, start: 0.1, duration: 0.4 }, { freq: NOTE_FREQUENCIES.G4, start: 0.2, duration: 0.5 }, // Sustained major chord { freq: NOTE_FREQUENCIES.C5, start: 0.35, duration: 1.65 }, { freq: NOTE_FREQUENCIES.E5, start: 0.4, duration: 1.6 }, { freq: NOTE_FREQUENCIES.G5, start: 0.45, duration: 1.55 } ], totalDuration: 2.0 }; // Sound effect 2: Gentle notification melody (2 seconds) // A musical phrase that resolves pleasantly const NOTIFICATION_MELODY = { notes: [ { freq: NOTE_FREQUENCIES.E5, start: 0.0, duration: 0.4 }, { freq: NOTE_FREQUENCIES.G5, start: 0.25, duration: 0.5 }, { freq: NOTE_FREQUENCIES.A5, start: 0.6, duration: 0.3 }, { freq: NOTE_FREQUENCIES.G5, start: 0.85, duration: 0.4 }, { freq: NOTE_FREQUENCIES.E5, start: 1.15, duration: 0.85 } ], totalDuration: 2.0 }; // Sound effect 3: Alert/warning tone (2 seconds) // Descending pattern that grabs attention const ALERT_TONE = { notes: [ // Attention-grabbing high notes { freq: NOTE_FREQUENCIES.A5, start: 0.0, duration: 0.25 }, { freq: NOTE_FREQUENCIES.A5, start: 0.3, duration: 0.25 }, // Descending resolution { freq: NOTE_FREQUENCIES.F5, start: 0.6, duration: 0.4 }, { freq: NOTE_FREQUENCIES.D5, start: 0.9, duration: 0.5 }, { freq: NOTE_FREQUENCIES.A4, start: 1.3, duration: 0.7 } ], totalDuration: 2.0 }; /** * CE.SDK Plugin: Add Sound Effects Guide * * This example demonstrates: * - Creating audio buffers with arbitrary data * - Generating sound effects programmatically (chimes, notifications) * - Using WAV format for in-memory audio * - Positioning sound effects on the timeline */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a video scene (audio blocks require timeline support) await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // Get the page (timeline) const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Calculate total duration: 3 effects × 2s + 2 gaps × 0.5s = 7s const effectDuration = 2.0; const gapDuration = 0.5; const totalDuration = 3 * effectDuration + 2 * gapDuration; // 7 seconds // Set page duration to match total effects length engine.block.setDuration(page, totalDuration); // Add a centered title text to the canvas const text = engine.block.create('text'); engine.block.appendChild(page, text); engine.block.replaceText(text, 'Sound Effects Demo'); engine.block.setTextColor(text, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setFloat(text, 'text/fontSize', 48); // Center the text on the canvas const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); engine.block.setWidth(text, pageWidth); engine.block.setHeight(text, 70); engine.block.setPositionX(text, 0); engine.block.setPositionY(text, pageHeight / 2 - 35); engine.block.setEnum(text, 'text/horizontalAlignment', 'Center'); // Make text visible for the entire duration engine.block.setTimeOffset(text, 0); engine.block.setDuration(text, totalDuration); const sampleRate = 48000; // Create the "success chime" sound effect const chimeBuffer = engine.editor.createBuffer(); // Generate the chime using our helper function const chimeWav = createWavBuffer( sampleRate, SUCCESS_CHIME.totalDuration, (time) => { let sample = 0; // Mix all notes together for (const note of SUCCESS_CHIME.notes) { // Calculate envelope for this note const envelope = adsr( time, note.start, note.duration, 0.02, // Soft attack (20ms) 0.08, // Gentle decay (80ms) 0.7, // Sustain at 70% 0.25 // Smooth release (250ms) ); if (envelope > 0) { // Generate sine wave with slight harmonics for richness const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.25; const harmonic3 = Math.sin(6 * Math.PI * note.freq * time) * 0.1; sample += (fundamental + harmonic2 + harmonic3) * envelope * 0.3; } } return sample; } ); // Write WAV data to the buffer engine.editor.setBufferData(chimeBuffer, 0, chimeWav); // Create audio block for the chime (starts at 0s) const chimeBlock = engine.block.create('audio'); engine.block.appendChild(page, chimeBlock); engine.block.setString(chimeBlock, 'audio/fileURI', chimeBuffer); engine.block.setTimeOffset(chimeBlock, 0); engine.block.setDuration(chimeBlock, SUCCESS_CHIME.totalDuration); engine.block.setVolume(chimeBlock, 0.8); // Create the "notification melody" sound effect const melodyBuffer = engine.editor.createBuffer(); const melodyWav = createWavBuffer( sampleRate, NOTIFICATION_MELODY.totalDuration, (time) => { let sample = 0; for (const note of NOTIFICATION_MELODY.notes) { const envelope = adsr( time, note.start, note.duration, 0.01, // Soft attack (10ms) 0.06, // Gentle decay (60ms) 0.6, // Sustain at 60% 0.2 // Smooth release (200ms) ); if (envelope > 0) { // Pure sine wave with light 2nd harmonic for gentle tone const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2) * envelope * 0.4; } } return sample; } ); engine.editor.setBufferData(melodyBuffer, 0, melodyWav); // Starts at 2.5s (after 2s effect + 0.5s gap) const melodyBlock = engine.block.create('audio'); engine.block.appendChild(page, melodyBlock); engine.block.setString(melodyBlock, 'audio/fileURI', melodyBuffer); engine.block.setTimeOffset(melodyBlock, effectDuration + gapDuration); // 2.5s engine.block.setDuration(melodyBlock, NOTIFICATION_MELODY.totalDuration); engine.block.setVolume(melodyBlock, 0.8); // Create the "alert" sound effect const alertBuffer = engine.editor.createBuffer(); const alertWav = createWavBuffer( sampleRate, ALERT_TONE.totalDuration, (time) => { let sample = 0; for (const note of ALERT_TONE.notes) { const envelope = adsr( time, note.start, note.duration, 0.005, // Sharp attack (5ms) 0.05, // Quick decay (50ms) 0.5, // Sustain at 50% 0.15 // Medium release (150ms) ); if (envelope > 0) { // Slightly brighter tone for alert const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.2; const harmonic3 = Math.sin(6 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2 + harmonic3) * envelope * 0.35; } } return sample; } ); engine.editor.setBufferData(alertBuffer, 0, alertWav); // Starts at 5s (after 2 effects + 2 gaps) const alertBlock = engine.block.create('audio'); engine.block.appendChild(page, alertBlock); engine.block.setString(alertBlock, 'audio/fileURI', alertBuffer); engine.block.setTimeOffset(alertBlock, 2 * (effectDuration + gapDuration)); // 5s engine.block.setDuration(alertBlock, ALERT_TONE.totalDuration); engine.block.setVolume(alertBlock, 0.75); // Select the chime block to show it in the UI engine.block.select(chimeBlock); // Zoom to fit the timeline await cesdk.actions.run('zoom.toPage', { autoFit: true }); // eslint-disable-next-line no-console console.log( `Sound effects: Success (0s), Melody (2.5s), Alert (5s) - each 2s, total ${totalDuration}s` ); } } export default Example; ``` This guide covers working with buffers to create audio data and position it in the composition. ## Working with Buffers CE.SDK provides a buffer API for creating and managing arbitrary binary data in memory. Use buffers when you need to generate content programmatically rather than loading from files. ### Creating a Buffer Create a buffer with `createBuffer()`, which returns a URI you can use to reference the buffer: ```typescript highlight-buffer-create // Create the "notification melody" sound effect const melodyBuffer = engine.editor.createBuffer(); ``` ### Writing Data Write data to a buffer using `setBufferData()`. The offset parameter specifies where to start writing: ```typescript highlight-buffer-write engine.editor.setBufferData(melodyBuffer, 0, melodyWav); ``` ### Reading Data Read data back from a buffer: ```typescript const length = engine.editor.getBufferLength(buffer); const data = engine.editor.getBufferData(buffer, 0, length); ``` ### Adding an Audio Track Create an audio block and assign the buffer URI to its `audio/fileURI` property. Append it to the page to add it to the composition: ```typescript highlight-audio-track // Starts at 2.5s (after 2s effect + 0.5s gap) const melodyBlock = engine.block.create('audio'); engine.block.appendChild(page, melodyBlock); engine.block.setString(melodyBlock, 'audio/fileURI', melodyBuffer); ``` ### Cleanup Destroy buffers when no longer needed (buffers are also cleaned up automatically with the scene): ```typescript engine.editor.destroyBuffer(buffer); ``` ## Generating Audio Data To use buffers for audio, you need valid audio data. The WAV format is straightforward to generate: a 44-byte header followed by raw PCM samples. ```typescript highlight-wav-body const bitsPerSample = 16; const channels = 2; // Stereo output const numSamples = Math.floor(durationSeconds * sampleRate); const dataSize = numSamples * channels * (bitsPerSample / 8); // Create WAV file buffer (44-byte header + audio data) const wavBuffer = new ArrayBuffer(44 + dataSize); const view = new DataView(wavBuffer); // RIFF chunk descriptor view.setUint32(0, 0x52494646, false); // "RIFF" view.setUint32(4, 36 + dataSize, true); // File size - 8 view.setUint32(8, 0x57415645, false); // "WAVE" // fmt sub-chunk view.setUint32(12, 0x666d7420, false); // "fmt " view.setUint32(16, 16, true); // Sub-chunk size (16 for PCM) view.setUint16(20, 1, true); // Audio format (1 = PCM) view.setUint16(22, channels, true); // Number of channels view.setUint32(24, sampleRate, true); // Sample rate view.setUint32(28, sampleRate * channels * (bitsPerSample / 8), true); view.setUint16(32, channels * (bitsPerSample / 8), true); // Block align view.setUint16(34, bitsPerSample, true); // Bits per sample // data sub-chunk view.setUint32(36, 0x64617461, false); // "data" view.setUint32(40, dataSize, true); // Data size // Generate audio samples let offset = 44; for (let i = 0; i < numSamples; i++) { const time = i / sampleRate; // Generate mono sample and duplicate to both channels const value = generator(time); const sample = Math.max(-32768, Math.min(32767, Math.round(value * 32767))); view.setInt16(offset, sample, true); // Left channel view.setInt16(offset + 2, sample, true); // Right channel offset += 4; } return new Uint8Array(wavBuffer); ``` This code builds a stereo WAV file by writing the RIFF header, format chunk, and data chunk, then iterating through time to generate samples from a generator function that returns values between -1.0 and 1.0. ## Creating a Sound Effect Combine the buffer API with the WAV helper to create a complete sound effect. This example generates a notification melody by mixing multiple notes with harmonics: ```typescript highlight-generate-melody const melodyWav = createWavBuffer( sampleRate, NOTIFICATION_MELODY.totalDuration, (time) => { let sample = 0; for (const note of NOTIFICATION_MELODY.notes) { const envelope = adsr( time, note.start, note.duration, 0.01, // Soft attack (10ms) 0.06, // Gentle decay (60ms) 0.6, // Sustain at 60% 0.2 // Smooth release (200ms) ); if (envelope > 0) { // Pure sine wave with light 2nd harmonic for gentle tone const fundamental = Math.sin(2 * Math.PI * note.freq * time); const harmonic2 = Math.sin(4 * Math.PI * note.freq * time) * 0.15; sample += (fundamental + harmonic2) * envelope * 0.4; } } return sample; } ); ``` The generator function mixes overlapping notes, each with its own start time and duration. The `adsr()` function shapes each note's volume over time (attack, decay, sustain, release), preventing harsh clicks. Adding a second harmonic at 15% creates a warmer tone than a pure sine wave. ## Positioning in Time Position audio blocks using time offset (when it starts) and duration (how long it plays): ```typescript highlight-timeline-position engine.block.setTimeOffset(melodyBlock, effectDuration + gapDuration); // 2.5s engine.block.setDuration(melodyBlock, NOTIFICATION_MELODY.totalDuration); ``` This example spaces three sound effects with 0.5-second gaps: ``` Timeline: |----|----|----|----|----|----|----| 0s 1s 2s 3s 4s 5s 6s 7s Success: |====| ^ 0s (2s) Melody: |====| ^ 2.5s (2s) Alert: |====| ^ 5s (2s) ``` Each effect is 2 seconds with 0.5-second gaps between them, for a total duration of 7 seconds. ## Troubleshooting ### No Sound - **Check scene setup** - Ensure the audio block is attached to a page in the scene - **Verify duration** - Ensure the audio block's duration is greater than 0 - **Check buffer data** - The buffer must contain valid WAV data ### Audio Sounds Wrong - **Clipping** - Reduce sample values if they exceed -1.0 to 1.0 - **Clicking** - Add attack/release envelope to avoid pops - **Wrong pitch** - Verify frequency calculations and sample rate (48 kHz) ### Buffer Errors - **Invalid WAV** - Ensure header size fields match actual data size - **Format mismatch** - Use 16-bit PCM, stereo, 48 kHz for best compatibility --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Loop Audio" description: "Create seamless repeating audio playback for background music and sound effects using CE.SDK's audio looping system." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-audio/audio/loop-937be7/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) > [Loop](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/loop-937be7/) --- Create seamless repeating audio playback for background music, sound effects, and rhythmic elements using CE.SDK's audio looping system.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-loop-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-loop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-loop-browser/) Audio looping allows media to play continuously by restarting from the beginning when it reaches the end. When you set a block's duration longer than the audio length and enable looping, CE.SDK automatically repeats the audio to fill the entire duration. This makes looping perfect for background music, ambient soundscapes, and repeating sound effects. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-loop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Audio Loop Guide * * Demonstrates audio looping capabilities in CE.SDK: * - Creating audio blocks with looping enabled * - Controlling looping behavior with duration * - Querying looping state * - Disabling looping for one-time playback * - Understanding loop and duration interaction */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1280, height: 720, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; engine.block.setDuration(page, 30); // 30 second timeline // Use sample audio from demo assets const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'; // Create a basic audio block const audioBlock = engine.block.create('audio')!; engine.block.appendChild(page, audioBlock); // Set the audio source URI engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Load the audio resource to access metadata like duration await engine.block.forceLoadAVResource(audioBlock); // Get the total audio duration const audioDuration = engine.block.getDouble( audioBlock, 'audio/totalDuration' ); // eslint-disable-next-line no-console console.log('Audio duration:', audioDuration, 'seconds'); // Enable looping for this audio block engine.block.setLooping(audioBlock, true); // Set the block duration longer than the audio length // The audio will loop to fill the entire duration engine.block.setDuration(audioBlock, 15); // eslint-disable-next-line no-console console.log('Looping enabled - audio will repeat to fill 15 seconds'); // Check if an audio block is set to loop const isLooping = engine.block.isLooping(audioBlock); // eslint-disable-next-line no-console console.log('Is looping:', isLooping); // true // Create a second audio block to demonstrate non-looping behavior const nonLoopingAudio = engine.block.create('audio')!; engine.block.appendChild(page, nonLoopingAudio); engine.block.setString(nonLoopingAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(nonLoopingAudio); // Set time offset so it doesn't overlap with first audio engine.block.setTimeOffset(nonLoopingAudio, 16); // Disable looping (or leave it at default false) engine.block.setLooping(nonLoopingAudio, false); // Set duration longer than audio length // Audio will play once and stop (no looping) engine.block.setDuration(nonLoopingAudio, 12); // eslint-disable-next-line no-console console.log('Looping disabled - audio plays once and stops'); // Create a third audio block demonstrating looping with trim const trimmedLoopAudio = engine.block.create('audio')!; engine.block.appendChild(page, trimmedLoopAudio); engine.block.setString(trimmedLoopAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(trimmedLoopAudio); // Trim to a 2-second segment engine.block.setTrimOffset(trimmedLoopAudio, 1.0); engine.block.setTrimLength(trimmedLoopAudio, 2.0); // Enable looping and set duration longer than trim length engine.block.setLooping(trimmedLoopAudio, true); engine.block.setDuration(trimmedLoopAudio, 8.0); // Position in timeline engine.block.setTimeOffset(trimmedLoopAudio, 29); // eslint-disable-next-line no-console console.log('Trimmed loop - 2s segment will loop 4 times to fill 8s'); // Select the first audio block to show it in timeline engine.block.setSelected(audioBlock, true); // eslint-disable-next-line no-console console.log('Audio looping guide initialized successfully'); } } export default Example; ``` This guide covers how to enable and disable audio looping, control looping behavior with duration settings, and loop trimmed audio segments. ## Understanding Audio Looping When looping is enabled on an audio block, CE.SDK repeats the audio content from the beginning each time it reaches the end. This continues until the block's duration is filled. For example, a 5-second audio clip with looping enabled and a 15-second duration will play three complete times. The loop transitions are seamless—CE.SDK jumps immediately from the end back to the beginning without gaps or clicks. The audio content itself determines how smooth the loop sounds. Audio files designed for looping (with matching start and end points) create perfectly seamless loops, while non-looping audio may have audible transitions. ## Creating Audio Blocks ### Adding Audio Content Audio blocks use file URIs to reference audio sources. We create the block, add it to the page, and set the audio source. ```typescript highlight-create-audio-block // Create a basic audio block const audioBlock = engine.block.create('audio')!; engine.block.appendChild(page, audioBlock); // Set the audio source URI engine.block.setString(audioBlock, 'audio/fileURI', audioUri); ``` The `audio/fileURI` property points to the audio file. CE.SDK supports common audio formats including MP3, M4A, WAV, and AAC. ## Enabling Audio Looping ### Loading Audio Resources Before working with audio properties like duration or trim, we load the audio resource to ensure metadata is available. ```typescript highlight-load-audio-resource // Load the audio resource to access metadata like duration await engine.block.forceLoadAVResource(audioBlock); // Get the total audio duration const audioDuration = engine.block.getDouble( audioBlock, 'audio/totalDuration' ); // eslint-disable-next-line no-console console.log('Audio duration:', audioDuration, 'seconds'); ``` Loading the resource provides access to the total audio duration, which helps calculate how many times the audio will loop given a specific block duration. ### Setting Looping State We enable looping by calling `setLooping()` with `true`. When combined with a block duration longer than the audio length, the audio repeats to fill the full duration. ```typescript highlight-enable-looping // Enable looping for this audio block engine.block.setLooping(audioBlock, true); // Set the block duration longer than the audio length // The audio will loop to fill the entire duration engine.block.setDuration(audioBlock, 15); // eslint-disable-next-line no-console console.log('Looping enabled - audio will repeat to fill 15 seconds'); ``` In this example, if the audio is 5 seconds long and the block duration is 15 seconds, the audio loops three times (5 seconds × 3 = 15 seconds total). ## Querying and Controlling Looping ### Checking Looping State We can check whether an audio block has looping enabled at any time. ```typescript highlight-query-looping-state // Check if an audio block is set to loop const isLooping = engine.block.isLooping(audioBlock); // eslint-disable-next-line no-console console.log('Is looping:', isLooping); // true ``` This is useful when managing complex compositions with multiple audio tracks, allowing us to query and update looping states dynamically. ### Disabling Looping To play audio once without repeating, we set looping to `false`. ```typescript highlight-non-looping-audio const nonLoopingAudio = engine.block.create('audio')!; engine.block.appendChild(page, nonLoopingAudio); engine.block.setString(nonLoopingAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(nonLoopingAudio); // Set time offset so it doesn't overlap with first audio engine.block.setTimeOffset(nonLoopingAudio, 16); // Disable looping (or leave it at default false) engine.block.setLooping(nonLoopingAudio, false); // Set duration longer than audio length // Audio will play once and stop (no looping) engine.block.setDuration(nonLoopingAudio, 12); // eslint-disable-next-line no-console console.log('Looping disabled - audio plays once and stops'); ``` With looping disabled and a duration longer than the audio length, the audio plays once and then stops, leaving silence for the remaining duration. ## Looping with Trim Settings ### Trimming Looped Audio We can combine trimming with looping to create short repeating segments from longer audio files. ```typescript highlight-looping-with-trim // Create a third audio block demonstrating looping with trim const trimmedLoopAudio = engine.block.create('audio')!; engine.block.appendChild(page, trimmedLoopAudio); engine.block.setString(trimmedLoopAudio, 'audio/fileURI', audioUri); await engine.block.forceLoadAVResource(trimmedLoopAudio); // Trim to a 2-second segment engine.block.setTrimOffset(trimmedLoopAudio, 1.0); engine.block.setTrimLength(trimmedLoopAudio, 2.0); // Enable looping and set duration longer than trim length engine.block.setLooping(trimmedLoopAudio, true); engine.block.setDuration(trimmedLoopAudio, 8.0); // Position in timeline engine.block.setTimeOffset(trimmedLoopAudio, 29); // eslint-disable-next-line no-console console.log('Trimmed loop - 2s segment will loop 4 times to fill 8s'); ``` This trims the audio to a 2-second segment (from 1.0s to 3.0s of the source), then loops that segment four times to fill an 8-second duration. This technique is powerful for creating rhythmic loops or extracting repeatable portions from longer audio files. ### Choosing Loop Points For seamless loops, choose trim points where the audio content flows naturally from end to beginning. Audio with consistent rhythm, tone, and volume at trim boundaries creates the smoothest loops. Abrupt changes in content or volume at loop boundaries create noticeable transitions. ## API Reference | Method | Description | Parameters | Returns | | ------------------------------- | ---------------------------------- | ----------------------------------------- | --------------- | | `create(type)` | Create an audio block | `type: 'audio'` | `DesignBlockId` | | `setString(id, property, value)`| Set audio source URI | `id: DesignBlockId, property: string, value: string` | `void` | | `setLooping(id, enabled)` | Enable or disable audio looping | `id: DesignBlockId, enabled: boolean` | `void` | | `isLooping(id)` | Check if audio is set to loop | `id: DesignBlockId` | `boolean` | | `setDuration(id, duration)` | Set block playback duration | `id: DesignBlockId, duration: number` | `void` | | `getDuration(id)` | Get block duration | `id: DesignBlockId` | `number` | | `setTrimOffset(id, offset)` | Set trim start point | `id: DesignBlockId, offset: number` | `void` | | `setTrimLength(id, length)` | Set trim length | `id: DesignBlockId, length: number` | `void` | | `forceLoadAVResource(id)` | Load audio resource with metadata | `id: DesignBlockId` | `Promise` | | `getDouble(id, property)` | Get audio property value | `id: DesignBlockId, property: string` | `number` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Compositions" description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/create-composition/overview-5b19c5/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions. - [Multi-Page Layouts](https://img.ly/docs/cesdk/sveltekit/create-composition/multi-page-4d2b50/) - Create and manage multi-page designs in CE.SDK for documents like brochures, presentations, and catalogs with multiple pages in a single scene. - [Create a Collage](https://img.ly/docs/cesdk/sveltekit/create-composition/collage-f7d28d/) - Combine images into a collage using the CE.SDK. - [Design a Layout](https://img.ly/docs/cesdk/sveltekit/create-composition/layout-b66311/) - Create structured compositions using scene layouts, positioning systems, and hierarchical block organization for collages, magazines, and multi-page documents. - [Add a Background](https://img.ly/docs/cesdk/sveltekit/create-composition/add-background-375a47/) - Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks. - [Positioning and Alignment](https://img.ly/docs/cesdk/sveltekit/insert-media/position-and-align-cc6b6a/) - Precisely position, align, and distribute objects using guides, snapping, and alignment tools. - [Group and Ungroup Objects](https://img.ly/docs/cesdk/sveltekit/create-composition/group-and-ungroup-62565a/) - Group multiple design elements together so they move, scale, and transform as a single unit; ungroup to edit them individually. - [Layer Management](https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/) - Organize design elements using a layer stack for precise control over stacking and visibility. - [Lock Design](https://img.ly/docs/cesdk/sveltekit/create-composition/lock-design-0a81de/) - Protect design elements from unwanted modifications using CE.SDK's scope-based permission system. Control which properties users can edit at both global and block levels. - [Blend Modes](https://img.ly/docs/cesdk/sveltekit/create-composition/blend-modes-ad3519/) - Apply blend modes to elements to control how colors and layers interact visually. - [Programmatic Creation](https://img.ly/docs/cesdk/sveltekit/create-composition/programmatic-a688bf/) - Documentation for Programmatic Creation --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add a Background" description: "Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/add-background-375a47/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Add a Background](https://img.ly/docs/cesdk/sveltekit/create-composition/add-background-375a47/) --- Add backgrounds to designs using fills for pages and shapes, and the background color property for text blocks.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-add-background-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-add-background-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-add-background-browser/) CE.SDK provides two distinct approaches for adding backgrounds to design elements. Understanding when to use each approach ensures your designs render correctly and efficiently. ```typescript file=@cesdk_web_examples/guides-create-composition-add-background-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add a Background Guide * * This example demonstrates: * - Applying gradient fills to pages * - Adding background colors to text blocks * - Applying image fills to shapes */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Check if the page supports fill, then apply a pastel gradient if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.85, g: 0.75, b: 0.95, a: 1.0 }, stop: 0 }, { color: { r: 0.7, g: 0.9, b: 0.95, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); } // Create header text (dark, no background) const headerText = engine.block.create('text'); engine.block.setString(headerText, 'text/text', 'Learn cesdk'); engine.block.setFloat(headerText, 'text/fontSize', 56); engine.block.setWidth(headerText, 350); engine.block.setHeightMode(headerText, 'Auto'); engine.block.setPositionX(headerText, 50); engine.block.setPositionY(headerText, 230); engine.block.setColor(headerText, 'fill/solid/color', { r: 0.15, g: 0.15, b: 0.2, a: 1.0 }); engine.block.appendChild(page, headerText); // Create "Backgrounds" text with white background const featuredText = engine.block.create('text'); engine.block.setString(featuredText, 'text/text', 'Backgrounds'); engine.block.setFloat(featuredText, 'text/fontSize', 48); engine.block.setWidth(featuredText, 280); engine.block.setHeightMode(featuredText, 'Auto'); // Offset X by paddingLeft (16) so background aligns with header at X=50 engine.block.setPositionX(featuredText, 66); engine.block.setPositionY(featuredText, 280); engine.block.setColor(featuredText, 'fill/solid/color', { r: 0.2, g: 0.2, b: 0.25, a: 1.0 }); engine.block.appendChild(page, featuredText); // Add white background color to the featured text block if (engine.block.supportsBackgroundColor(featuredText)) { engine.block.setBackgroundColorEnabled(featuredText, true); engine.block.setColor(featuredText, 'backgroundColor/color', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setFloat(featuredText, 'backgroundColor/paddingLeft', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingRight', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingTop', 10); engine.block.setFloat(featuredText, 'backgroundColor/paddingBottom', 10); engine.block.setFloat(featuredText, 'backgroundColor/cornerRadius', 8); } // Create an image block on the right side const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusTL', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusTR', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusBL', 16); engine.block.setFloat(imageShape, 'shape/rect/cornerRadiusBR', 16); engine.block.setWidth(imageBlock, 340); engine.block.setHeight(imageBlock, 400); engine.block.setPositionX(imageBlock, 420); engine.block.setPositionY(imageBlock, 100); // Check if the block supports fill, then apply an image fill if (engine.block.supportsFill(imageBlock)) { const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); } engine.block.appendChild(page, imageBlock); // Create IMG.LY logo (bottom left) const logoBlock = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logoBlock, logoShape); engine.block.setWidth(logoBlock, 100); engine.block.setHeight(logoBlock, 40); engine.block.setPositionX(logoBlock, 50); engine.block.setPositionY(logoBlock, 530); if (engine.block.supportsFill(logoBlock)) { const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoBlock, logoFill); } engine.block.appendChild(page, logoBlock); // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); // Zoom to fit the page await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` ## Setup Create a design scene and get a reference to the page where we'll apply backgrounds. ```typescript highlight=highlight-setup // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } ``` ## Fills Fills are visual content applied to pages and graphic blocks. Supported fill types include solid colors, linear gradients, radial gradients, and images. ### Check Fill Support Before applying a fill, verify the block supports it with `supportsFill()`. Pages and graphic blocks typically support fills, while text blocks handle their content differently. ```typescript highlight=highlight-check-support // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); ``` ### Apply a Gradient Fill Create a fill with `createFill()` specifying the type, configure its properties, then apply it with `setFill()`. The example below creates a linear gradient with two color stops. ```typescript highlight=highlight-page-fill // Check if the page supports fill, then apply a pastel gradient if (engine.block.supportsFill(page)) { const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.85, g: 0.75, b: 0.95, a: 1.0 }, stop: 0 }, { color: { r: 0.7, g: 0.9, b: 0.95, a: 1.0 }, stop: 1 } ]); engine.block.setFill(page, gradientFill); } ``` The gradient transitions from a pastel purple at the start to a light cyan at the end. ### Apply an Image Fill Image fills display images within the block's shape bounds. Create an image fill, set its URI, and apply it to a graphic block. ```typescript highlight=highlight-shape-fill // Check if the block supports fill, then apply an image fill if (engine.block.supportsFill(imageBlock)) { const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); } ``` The shape's corner radius creates rounded corners on the image. Image fills automatically scale to cover the shape area. ## Background Color Background color is a dedicated property available specifically on text blocks. Unlike fills, background colors include configurable padding and corner radius, creating highlighted text effects without additional graphic blocks. ### Check Background Color Support Use `supportsBackgroundColor()` to verify a block supports this feature. Currently, only text blocks support background colors. ```typescript highlight=highlight-check-support // Check feature support on different blocks const pageSupportsFill = engine.block.supportsFill(page); const textSupportsBackground = engine.block.supportsBackgroundColor(featuredText); const imageSupportsFill = engine.block.supportsFill(imageBlock); console.log('Page supports fill:', pageSupportsFill); console.log('Text supports backgroundColor:', textSupportsBackground); console.log('Image supports fill:', imageSupportsFill); ``` ### Apply Background Color Enable the background color with `setBackgroundColorEnabled()`, then configure its appearance using property paths for color, padding, and corner radius. ```typescript highlight=highlight-background-color // Add white background color to the featured text block if (engine.block.supportsBackgroundColor(featuredText)) { engine.block.setBackgroundColorEnabled(featuredText, true); engine.block.setColor(featuredText, 'backgroundColor/color', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setFloat(featuredText, 'backgroundColor/paddingLeft', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingRight', 16); engine.block.setFloat(featuredText, 'backgroundColor/paddingTop', 10); engine.block.setFloat(featuredText, 'backgroundColor/paddingBottom', 10); engine.block.setFloat(featuredText, 'backgroundColor/cornerRadius', 8); } ``` The padding properties (`backgroundColor/paddingLeft`, `backgroundColor/paddingRight`, `backgroundColor/paddingTop`, `backgroundColor/paddingBottom`) control the space between the text and the background edge. The `backgroundColor/cornerRadius` property rounds the corners. ## Troubleshooting ### Fill Not Visible If a fill doesn't appear: - Ensure all color components (r, g, b) are between 0 and 1 - Check that the alpha component is greater than 0 - Verify the block supports fills with `supportsFill()` ### Background Color Not Appearing If a background color doesn't appear: - Confirm the block supports it with `supportsBackgroundColor()` - Verify `setBackgroundColorEnabled(block, true)` was called - Check that the color's alpha value is greater than 0 ### Image Not Loading If an image fill doesn't display: - Verify the image URI is accessible - Check browser console for CORS or network errors - Ensure the image format is supported (PNG, JPEG, WebP) ## API Reference | Method | Description | | --- | --- | | `engine.block.supportsFill(block)` | Check if a block supports fills | | `engine.block.createFill(type)` | Create a fill (color, gradient/linear, gradient/radial, image) | | `engine.block.setFill(block, fill)` | Apply a fill to a block | | `engine.block.getFill(block)` | Get the fill applied to a block | | `engine.block.setGradientColorStops(fill, property, stops)` | Set gradient color stops | | `engine.block.supportsBackgroundColor(block)` | Check if a block supports background color | | `engine.block.setBackgroundColorEnabled(block, enabled)` | Enable or disable background color | | `engine.block.isBackgroundColorEnabled(block)` | Check if background color is enabled | | `engine.block.setColor(block, property, color)` | Set color properties | | `engine.block.setFloat(block, property, value)` | Set float properties (padding, radius) | ## Next Steps Explore related topics: - [Apply Colors](https://img.ly/docs/cesdk/sveltekit/colors/apply-2211e3/) - Work with RGB, CMYK, and spot colors - [Fills Overview](https://img.ly/docs/cesdk/sveltekit/fills/overview-3895ee/) - Learn about all fill types in depth --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blend Modes" description: "Apply blend modes to elements to control how colors and layers interact visually." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/blend-modes-ad3519/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Blend Modes](https://img.ly/docs/cesdk/sveltekit/create-composition/blend-modes-ad3519/) --- Control how design blocks visually blend with underlying layers using CE.SDK's blend mode system for professional layered compositions.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-blend-modes-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-blend-modes-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-blend-modes-browser/) Blend modes control how a block's colors combine with underlying layers, similar to blend modes in Photoshop or other design tools. CE.SDK provides 27 blend modes organized into categories: Normal, Darken, Lighten, Contrast, Inversion, and Component. Each category serves different compositing needs—darken modes make images darker, lighten modes make them brighter, and contrast modes increase midtone contrast. ```typescript file=@cesdk_web_examples/guides-create-composition-blend-modes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Blend Modes Guide * * This example demonstrates: * - Checking if a block supports blend modes * - Setting blend modes on overlay layers * - Getting the current blend mode of a block * - Working with opacity values * - Available blend mode values */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const page = engine.block.findByType('page')[0]; // Grid configuration: 3 columns x 2 rows const cols = 3; const rows = 2; const cellWidth = 280; const cellHeight = 210; const padding = 20; const pageWidth = cols * cellWidth + (cols + 1) * padding; const pageHeight = rows * cellHeight + (rows + 1) * padding; // Set page dimensions engine.block.setWidth(page, pageWidth); engine.block.setHeight(page, pageHeight); // Base and overlay image URLs const baseImageUrl = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const overlayImageUrl = 'https://img.ly/static/ubq_samples/sample_2.jpg'; // Six commonly used blend modes to demonstrate const blendModes: Array< 'Multiply' | 'Screen' | 'Overlay' | 'Darken' | 'Lighten' | 'ColorBurn' > = ['Multiply', 'Screen', 'Overlay', 'Darken', 'Lighten', 'ColorBurn']; // Create 6 image pairs in a grid layout for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const index = row * cols + col; const x = padding + col * (cellWidth + padding); const y = padding + row * (cellHeight + padding); // Create a background image block as the base layer const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); engine.block.setWidth(backgroundBlock, cellWidth); engine.block.setHeight(backgroundBlock, cellHeight); engine.block.setPositionX(backgroundBlock, x); engine.block.setPositionY(backgroundBlock, y); // Set the image fill for the background const backgroundFill = engine.block.createFill('image'); engine.block.setString( backgroundFill, 'fill/image/imageFileURI', baseImageUrl ); engine.block.setFill(backgroundBlock, backgroundFill); engine.block.setContentFillMode(backgroundBlock, 'Cover'); engine.block.appendChild(page, backgroundBlock); // Create a second image block on top for blending const overlayBlock = engine.block.create('graphic'); const overlayShape = engine.block.createShape('rect'); engine.block.setShape(overlayBlock, overlayShape); engine.block.setWidth(overlayBlock, cellWidth); engine.block.setHeight(overlayBlock, cellHeight); engine.block.setPositionX(overlayBlock, x); engine.block.setPositionY(overlayBlock, y); // Set a different image fill for the overlay const overlayFill = engine.block.createFill('image'); engine.block.setString( overlayFill, 'fill/image/imageFileURI', overlayImageUrl ); engine.block.setFill(overlayBlock, overlayFill); engine.block.setContentFillMode(overlayBlock, 'Cover'); engine.block.appendChild(page, overlayBlock); // Check if the block supports blend modes before applying if (engine.block.supportsBlendMode(overlayBlock)) { // Apply a different blend mode to each overlay const blendMode = blendModes[index]; engine.block.setBlendMode(overlayBlock, blendMode); // Retrieve and log the current blend mode const currentMode = engine.block.getBlendMode(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} blend mode:`, currentMode); } // Check if the block supports opacity if (engine.block.supportsOpacity(overlayBlock)) { // Set the opacity to 80% for clear visibility engine.block.setOpacity(overlayBlock, 0.8); } // Retrieve and log the opacity value const opacity = engine.block.getOpacity(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} opacity:`, opacity); } } // Zoom to fit the composition await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide covers how to check blend mode support, apply blend modes programmatically, understand the available blend mode options, and combine blend modes with opacity for fine control over layer compositing. ## Checking Blend Mode Support Before applying a blend mode, verify that the block supports it using `supportsBlendMode()`. Most graphic blocks support blend modes, but always check to avoid errors. ```typescript highlight-check-support // Check if the block supports blend modes before applying if (engine.block.supportsBlendMode(overlayBlock)) { ``` Blend mode support is available for graphic blocks with image or video fills, shape blocks, and text blocks. Page blocks and scene blocks typically do not support blend modes directly. ## Setting and Getting Blend Modes Apply a blend mode with `setBlendMode()` and retrieve the current mode with `getBlendMode()`. The default blend mode is `'Normal'`, which displays the block without any blending effect. ```typescript highlight-set-blend-mode // Apply a different blend mode to each overlay const blendMode = blendModes[index]; engine.block.setBlendMode(overlayBlock, blendMode); ``` After setting a blend mode, you can confirm the change by retrieving the current value: ```typescript highlight-get-blend-mode // Retrieve and log the current blend mode const currentMode = engine.block.getBlendMode(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} blend mode:`, currentMode); ``` ## Available Blend Modes CE.SDK provides 27 blend modes organized into categories, each producing different visual results: ### Normal Modes - **`PassThrough`** - Allows children of a group to blend with layers below the group - **`Normal`** - Default mode with no blending effect ### Darken Modes These modes darken the result by comparing the base and blend colors: - **`Darken`** - Selects the darker of the base and blend colors - **`Multiply`** - Multiplies colors, producing darker results (great for shadows) - **`ColorBurn`** - Darkens base color by increasing contrast - **`LinearBurn`** - Darkens base color by decreasing brightness - **`DarkenColor`** - Selects the darker color based on luminosity ### Lighten Modes These modes lighten the result by comparing colors: - **`Lighten`** - Selects the lighter of the base and blend colors - **`Screen`** - Multiplies the inverse of colors, producing lighter results (great for highlights) - **`ColorDodge`** - Lightens base color by decreasing contrast - **`LinearDodge`** - Lightens base color by increasing brightness - **`LightenColor`** - Selects the lighter color based on luminosity ### Contrast Modes These modes increase midtone contrast: - **`Overlay`** - Combines Multiply and Screen based on the base color - **`SoftLight`** - Similar to Overlay but with a softer effect - **`HardLight`** - Similar to Overlay but based on the blend color - **`VividLight`** - Burns or dodges colors based on the blend color - **`LinearLight`** - Increases or decreases brightness based on blend color - **`PinLight`** - Replaces colors based on the blend color - **`HardMix`** - Reduces colors to white, black, or primary colors ### Inversion Modes These modes create inverted or subtracted effects: - **`Difference`** - Subtracts the darker from the lighter color - **`Exclusion`** - Similar to Difference with lower contrast - **`Subtract`** - Subtracts blend color from base color - **`Divide`** - Divides base color by blend color ### Component Modes These modes affect specific color components: - **`Hue`** - Uses the hue of the blend color with base saturation and luminosity - **`Saturation`** - Uses the saturation of the blend color - **`Color`** - Uses the hue and saturation of the blend color - **`Luminosity`** - Uses the luminosity of the blend color ## Combining Blend Modes with Opacity For finer control over compositing, combine blend modes with opacity. Opacity reduces overall visibility while the blend mode affects color interaction with underlying layers. ```typescript highlight-set-opacity // Check if the block supports opacity if (engine.block.supportsOpacity(overlayBlock)) { // Set the opacity to 80% for clear visibility engine.block.setOpacity(overlayBlock, 0.8); } ``` You can retrieve the current opacity value to confirm changes or read existing state: ```typescript highlight-get-opacity // Retrieve and log the opacity value const opacity = engine.block.getOpacity(overlayBlock); // eslint-disable-next-line no-console console.log(`Cell ${index + 1} opacity:`, opacity); ``` > **Tip:** Start with full opacity (1.0) when experimenting with blend modes, then reduce > opacity to soften the effect. Common values are 0.5-0.7 for subtle blending > effects. ## Troubleshooting ### Blend Mode Has No Visible Effect If a blend mode doesn't produce visible changes: - Ensure there are underlying layers for the block to blend with. Blend modes only affect compositing with content below. - Verify the blend mode is applied to the correct block using `getBlendMode()`. - Check that the block has visible content (fill or image) to blend. ### Cannot Set Blend Mode If `setBlendMode()` throws an error: - Check that `supportsBlendMode()` returns `true` for the block. - Verify the block ID is valid and the block exists in the scene. - Ensure you're passing a valid blend mode string from the available options. ### Unexpected Blending Results If the visual result doesn't match expectations: - Verify the blend mode category matches your intent (darken vs lighten vs contrast). - Check the stacking order of blocks—blend modes affect content below the block. - Experiment with different blend modes from the same category to find the best visual match. ## API Reference | Method | Description | | ---------------------------------------- | ------------------------------------------------- | | `engine.block.supportsBlendMode(id)` | Check if a block supports blend modes | | `engine.block.setBlendMode(id, mode)` | Set the blend mode for a block | | `engine.block.getBlendMode(id)` | Get the current blend mode of a block | | `engine.block.supportsOpacity(id)` | Check if a block supports opacity | | `engine.block.setOpacity(id, opacity)` | Set the opacity for a block (0-1) | | `engine.block.getOpacity(id)` | Get the current opacity of a block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Collage" description: "Combine images into a collage using the CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/collage-f7d28d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Create a Collage](https://img.ly/docs/cesdk/sveltekit/create-composition/collage-f7d28d/) --- This guide shows you how to add a **Collage** feature in your web app with the help of the CE.SDK. A collage allows you to reuse images and assets as you change the layout of the scene. > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/CaseComponent.jsx) > > - [Open in StackBlitz](https://stackblitz.com/fork/github/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/showcase-layouts?title=IMG.LY+CE.SDK%3A+Layouts\&file=src%2Fcomponents%2Fcase%2FCaseComponent.jsx) > > - [Live demo](https://img.ly/showcases/cesdk/layouts/web) **Layouts** in CE.SDK are predefined templates that dictate how to arrange images and assets within a single composition. They allow you to create visually appealing collages by specifying each image’s: - Position - Size - Orientation relative to other assets on the page Layouts instantly create visuals and allow you to skip manually arranging each asset. ## What You’ll Learn In this guide, you will learn how to: - Set up the layout panel in the CE.SDK UI. - Use a layout file for collages. - Use TypeScript to apply layouts in your custom UI. ## When to Use Layouts The CE.SDK **Layout** feature is ideal for: - Photo collages - Grid layouts - Magazine spreads - Social media posts ## Difference Between Layouts and Templates Layouts are [custom assets](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/) that differ from templates: - **Templates:** Load **new assets** and replace the existing scene. - **Layouts:** Keep existing assets but change their arrangement on the page. Preserving assets while changing the layout **isn’t a native CE.SDK feature**. The following sections explain how to leverage the CE.SDK to do it in your app using JavaScript. ## How Collages Work When you choose a collage layout, the app needs to: 1. Load a new layout file. 2. Extract content from your current design. 3. Map content to new layout positions. 4. Preserve images and text in visual order. You trigger this workflow when a user selects a layout from the **Layouts** panel in the CE.SDK UI. ## Add a Layouts Panel to the CE.SDK UI The CE.SDK allows you to add [custom panels to the UI](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/panel-7ce1ee/). To add a **Layouts** panel for collage selection, you need to create it and load custom assets to configure its appearance and behavior. For this action, you need: 1. A layout file defining the collage structure (use [this one](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/CustomLayouts.json) to get started). 2. Thumbnail images for preview (find a collection [here](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/showcase-layouts/public/cases/layouts)). ### 1. Add a Layouts Option to the CE.SDK Menu To **customize the CE.SDK UI** and create a **Layouts** panel, use the CE.SDK UserInterfaceAPI. Add a Layout button with `ui.setComponentOrder({ in: 'ly.img.dock' }, order)`, using the following properties: - `id` - `key` - `label` - `icon` - `entries` For example: ```ts cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'layouts-dock-entry', label: 'Layouts', icon: '@imgly/Layout', entries: ['layouts'], }, ]); ``` ### 2. Customize the Layouts Panel Appearance To configure how the **Layouts** panel looks and behaves, use the `ui.addAssetLibraryEntry()` helper with the following options: - `id`: Unique identifier for the panel. - `sourceIds`: Which assets to display. - `previewLength`: How many preview items to display in the panel. - `gridColumns`: How many columns to contain the previews in the panel. - `gridItemHeight`: The shape of each tile in the panel grid. - `previewBackgroundType`: How to fit the previews inside their tiles (cover/contain). - `gridBackgroundType`: How to display the panel background (cover/contain). For example, the demo uses this configuration: ```jsx title="CustomCase.jsx" instance.ui.addAssetLibraryEntry({ id: 'ly.img.layouts', // Referenced in the dock entry in Step 1 sourceIds: ['ly.img.layouts'], // Points to our custom layout asset source previewLength: 2, // Number of preview items int the compact panel gridColumns: 2, // Organize tiles in 2 columns gridItemHeight: 'square', // Square tiles previewBackgroundType: 'contain', // Fit compact panel background gridBackgroundType: 'contain' // Fit panel background }); ``` To learn more about panel customization, check the [Panel Customization guide](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/panel-7ce1ee/). ### 3. Load Custom Assets The demo uses a [helper function](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/lib/loadAssetSourceFromContentJSON.ts) to load a custom layout asset source from a JSON file. This file defines the available layouts and their metadata. You can reuse this logic by defining both: - A `ContentJSON` object (like `CustomLayouts.json`) - A `baseURL` for your custom assets that replaces the `{{base_url}}`. ```jsx title="CustomCase.jsx" import { createApplyLayoutAsset } from './lib/createApplyLayoutAsset'; import loadAssetSourceFromContentJSON from './lib/loadAssetSourceFromContentJSON'; // ... const caseAssetPath = (path, caseId = 'layouts') => `${process.env.NEXT_PUBLIC_URL_HOSTNAME}${process.env.NEXT_PUBLIC_URL}/cases/${caseId}${path}`; // Call the helper to load the layout assets loadAssetSourceFromContentJSON( instance.engine, // Pss the CE.SDK engine to load assets into LAYOUT_ASSETS, // Pass the JSON bundle caseAssetPath(''), // Base URL for assets createApplyLayoutAsset(instance.engine) // Callback to createApplyLayoutAsset.js helper ); await instance.loadFromURL(caseAssetPath('/custom-layouts.scene')); // Load the scene // ... ``` In the previous example, the helper accepts an optional **applyAsset callback**, so: 1. A user picks a layout from the library. 2. The engine invokes the callback to apply it. 3. The engine replaces the current page’s structure with the layout while keeping the user’s images/text. Asset preservation isn't a CE.SDK native feature. It’s handled in the `createApplyLayoutAsset.js` helper, which you can find in [the repository](https://github.com/imgly/cesdk-web-examples/blob/main/showcase-layouts/src/components/case/lib/createApplyLayoutAsset.js). ## Apply the Collage When applying a collage, the following actions need to be implemented: 1. Changing the structure of the design. 2. Transferring the existing content to the new structure. 3. Deleting the previous scene. You can find this workflow in the `createApplyLayoutAsset()` helper from the demo. Follow these steps to replicate it: ### 1. Prepare and Allow changes - Allow block deletion with `editor.setGlobalScope('lifecycle/destroy', 'Allow')`. - Clear the selected blocks with `block.setSelected(block, false)`. ```js title="createApplyLayoutAsset.js" const scopeBefore = engine.editor.getGlobalScope('lifecycle/destroy'); engine.editor.setGlobalScope('lifecycle/destroy', 'Allow'); const page = engine.scene.getCurrentPage(); engine.block.findAllSelected().forEach((block) => engine.block.setSelected(block, false)); ``` ### 2. Load the New Layout - Load the new layout with `block.loadFromString()`. - Return the first page from the loaded blocks as the layout page. ```js title="createApplyLayoutAsset.js" const sceneString = await fetch(asset.meta.uri).then((response) => response.text()); const blocks = await engine.block.loadFromString(sceneString); const layoutPage = blocks[0]; ``` ### 3. Backup Current Page - Duplicate the current page with `block.duplicate()` to keep a backup of the existing content. - The CE.SDK uses this backup to transfer images and text to the new layout. - Clear the current page structure by destroying all its children. ```js title="createApplyLayoutAsset.js" const oldPage = engine.block.duplicate(page); engine.block.getChildren(page).forEach((child) => { engine.block.destroy(child); }); engine.block.getChildren(layoutPage).forEach((child) => { engine.block.insertChild(page, child, engine.block.getChildren(page).length); }); ``` ### 4. Transfer Content Copy user text and images onto the new layout: ```js title="createApplyLayoutAsset.js" copyAssets(engine, oldPage, page); ``` ### 5. Sort Blocks Visually and Pair Content Grab text and image blocks from both pages in visual order (top to bottom, left to right): ```js title="createApplyLayoutAsset.js" const fromChildren = visuallySortBlocks(engine, getChildrenTree(engine, fromPageId).flat()); const textsOnFromPage = fromChildren.filter((childId) => engine.block.getType(childId).includes('text')); const imagesOnFromPage = fromChildren.filter((childId) => engine.block.getKind(childId) === 'image'); // same for toPageId -> textsOnToPage, imagesOnToPage ``` Then apply the content from the old page to the new layout by looping through the blocks: ```js title="createApplyLayoutAsset.js" const fromText = engine.block.getString(fromBlock, 'text/text'); const fromFontFileUri = engine.block.getString(fromBlock, 'text/fontFileUri'); const fromTypeface = engine.block.getTypeface(fromBlock); engine.block.setFont(toBlock, fromFontFileUri, fromTypeface); const fromTextFillColor = engine.block.getColor(fromBlock, 'fill/solid/color'); engine.block.setString(toBlock, 'text/text', fromText); engine.block.setColor(toBlock, 'fill/solid/color', fromTextFillColor); ``` ```js title="createApplyLayoutAsset.js" const fromImageFill = engine.block.getFill(fromBlock); const toImageFill = engine.block.getFill(toBlock); const fromImageFileUri = engine.block.getString(fromImageFill, 'fill/image/imageFileURI'); engine.block.setString(toImageFill, 'fill/image/imageFileURI', fromImageFileUri); const fromImageSourceSets = engine.block.getSourceSet(fromImageFill, 'fill/image/sourceSet'); engine.block.setSourceSet(toImageFill, 'fill/image/sourceSet', fromImageSourceSets); if (engine.block.supportsPlaceholderBehavior(fromBlock)) { engine.block.setPlaceholderBehaviorEnabled( toBlock, engine.block.isPlaceholderBehaviorEnabled(fromBlock) ); } engine.block.resetCrop(toBlock); ``` ### 6. Cleanup and Restore State Cleanup temporary blocks with `block.destroy()` and restore global scope: ```js title="createApplyLayoutAsset.js" engine.block.destroy(oldPage); engine.block.destroy(layoutPage); engine.editor.setGlobalScope('lifecycle/destroy', scopeBefore); if (config.addUndoStep) { engine.editor.addUndoStep(); } return page; ``` This keeps the editor stable and predictable after the layout changes and prevents: - Stray selections. - Ghost placeholders. - Unused assets left at the scene. ## Advanced Collage Techniques The CE.SDK BlockAPI eases the transfer of [placeholder behavior](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) when moving images between blocks. You can use it to: 1. Checks if the block supports placeholder behavior with `supportsPlaceholderBehavior`. 2. Apply the same setting to the target image block with: - `isPlaceholderBehaviorEnabled()` - `setPlaceholderBehaviorEnabled()` ```js title="createApplyLayoutAsset.js" if (engine.block.supportsPlaceholderBehavior(fromBlock)) { engine.block.setPlaceholderBehaviorEnabled( toBlock, engine.block.isPlaceholderBehaviorEnabled(fromBlock), ); } ``` This maintains the behavior of current placeholders after the layout swap. To ensure the CE.SDK uses all the existing images when applying a layout, you can: 1. Handle overflow when more images than slots: ```js title="createApplyLayoutAsset.js" for ( let index = 0; index < imagesOnToPage.length && index < imagesOnFromPage.length; index++ ) { ... } ``` 2. Fill empty slots with defaults or placeholders: ```js title="createApplyLayoutAsset.js" // loop condition ends when sources run out, leaving remaining target slots unchanged index < imagesOnToPage.length && index < imagesOnFromPage.length; ``` 3. List content by importance or metadata: ```js title="createApplyLayoutAsset.js" const visuallySortBlocks = (engine, blocks) => { const blocksWithCoordinates = blocks .map((block) => ({ block, coordinates: [ Math.round(engine.block.getPositionX(block)), Math.round(engine.block.getPositionY(block)) ] })) .sort(({ coordinates: [X1, Y1] }, { coordinates: [X2, Y2] }) => { if (Y1 === Y2) return X1 - X2; return Y1 - Y2; }); return blocksWithCoordinates.map(({ block }) => block); }; ``` For a better user experience, consider adding animations when applying layouts: ```tsx title="LoadingSpinner.tsx" const LoadingSpinner = () => { return

; }; ``` You can code more customizations to incorporate these effects into collage transitions: - Fading - Sliding - Morphing ## Optimize the Layout Workflow For a better user experience when creating collages, consider these optimizations: | Topic | Strategies | | --- | --- | | **Asset Loading** | ・ Lazy load thumbnails and cache scene files
・ Preload common layouts and minimize file sizes
・ Use CDN for efficient asset delivery | | **Content Transfer** | ・ Batch block operations to reduce engine calls
・ Optimize sorting algorithms and memory usage
・ Handle large page structures efficiently | | **Visual Cues** | ・ Show loading states and support undo/redo
・ Add error recovery and prevent accidental changes | ## Troubleshooting | ❌ Issue | ✅ Solutions | | --- | --- | | Layout not applying | ・ Verify asset source registration and callback connection
・ Check browser console for scene files or CORS errors
・ Check the validity of scene file URLs | | Content lost during layout change | ・ Debug visual sorting with console logs
・ Verify block type filtering is correct
・ Test with different content settings| | Incorrect visual order | ・ Adjust coordinate rounding tolerance in sorting
・ Flatten complex hierarchies before sorting
・ Test with well-defined layout structures | | Performance degradation | ・ Optimize scene file sizes
・ Batch engine operations
・ Profile and optimize content transfer | | Undo not working | ・ Ensure `addUndoStep()` called after all changes complete
・ Verify undo configuration in engine setup | ## Next Steps Now that know how to create collages with layouts, explore these related guides to expand your CE.SDK knowledge: - [Apply Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/overview-4ebe30/) - Work with templates instead of layouts - [Create Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) - Import custom assets - [Customize UI Panels](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/panel-7ce1ee/) - Advanced UI customization - [Work with Images](https://img.ly/docs/cesdk/sveltekit/insert-media/images-63848a/) - Manage image blocks and fills - [Scene Management](https://img.ly/docs/cesdk/sveltekit/open-the-editor/load-scene-478833/) - Load and save scenes --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Group and Ungroup Objects" description: "Group multiple design elements together so they move, scale, and transform as a single unit; ungroup to edit them individually." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/group-and-ungroup-62565a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Group and Ungroup Objects](https://img.ly/docs/cesdk/sveltekit/create-composition/group-and-ungroup-62565a/) --- Group multiple blocks to move, scale, and transform them as a single unit; ungroup to edit them individually.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-grouping-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-grouping-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-grouping-browser/) Groups let you treat multiple blocks as a cohesive unit. Grouped blocks move, scale, and rotate together while maintaining their relative positions. Groups can contain other groups, enabling hierarchical compositions. > **Note:** Groups are not currently available when editing videos. ```typescript file=@cesdk_web_examples/guides-create-composition-grouping-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Group and Ungroup Objects Guide * * This example demonstrates: * - Creating multiple graphic blocks * - Checking if blocks can be grouped * - Grouping blocks together * - Navigating into and out of groups * - Ungrouping blocks * - Finding and inspecting groups */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a design scene and get the page await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Create a graphic block with a colored rectangle shape const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, 120); engine.block.setHeight(block1, 120); engine.block.setPositionX(block1, 200); engine.block.setPositionY(block1, 240); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.4, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block1, fill1); engine.block.appendChild(page, block1); // Create two more blocks for grouping const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 120); engine.block.setHeight(block2, 120); engine.block.setPositionX(block2, 340); engine.block.setPositionY(block2, 240); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.4, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page, block2); const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 120); engine.block.setHeight(block3, 120); engine.block.setPositionX(block3, 480); engine.block.setPositionY(block3, 240); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.5, g: 0.8, b: 0.5, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page, block3); // Check if the blocks can be grouped together const canGroup = engine.block.isGroupable([block1, block2, block3]); console.log('Blocks can be grouped:', canGroup); // Group the blocks together if (canGroup) { const groupId = engine.block.group([block1, block2, block3]); console.log('Created group with ID:', groupId); // Select the group to show it in the UI engine.block.setSelected(groupId, true); // Enter the group to select individual members engine.block.enterGroup(groupId); // Select a specific member within the group engine.block.setSelected(block2, true); console.log('Selected member inside group'); // Exit the group to return selection to the parent group engine.block.exitGroup(block2); console.log('Exited group, group is now selected'); // Find all groups in the scene const allGroups = engine.block.findByType('group'); console.log('Number of groups in scene:', allGroups.length); // Check the type of the group block const groupType = engine.block.getType(groupId); console.log('Group block type:', groupType); // Get the members of the group const members = engine.block.getChildren(groupId); console.log('Group has', members.length, 'members'); // Ungroup the blocks to make them independent again engine.block.ungroup(groupId); console.log('Ungrouped blocks'); // Verify blocks are no longer in a group const groupsAfterUngroup = engine.block.findByType('group'); console.log('Groups after ungrouping:', groupsAfterUngroup.length); // Re-group for the final display const finalGroup = engine.block.group([block1, block2, block3]); engine.block.setSelected(finalGroup, true); } // Enable auto-fit zoom to keep the page centered engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to check if blocks can be grouped, create and dissolve groups, navigate into groups to select individual members, and find existing groups in a scene. ## Understanding Groups Groups are blocks with type `'group'` that contain child blocks as members. Transformations applied to a group affect all members proportionally—position, scale, and rotation cascade to all children. Groups can be nested, meaning a group can contain other groups. This enables complex hierarchical structures where multiple logical units can be combined and manipulated together. > **Note:** **What cannot be grouped*** Scene blocks cannot be grouped > * Blocks already part of a group cannot be grouped again until ungrouped ## Create the Blocks We first create several graphic blocks that we'll group together. Each block has a different color fill to make them visually distinct. ```typescript highlight=highlight-create-blocks // Create a graphic block with a colored rectangle shape const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, 120); engine.block.setHeight(block1, 120); engine.block.setPositionX(block1, 200); engine.block.setPositionY(block1, 240); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 0.4, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block1, fill1); engine.block.appendChild(page, block1); ``` ## Check If Blocks Can Be Grouped Before grouping, verify that the selected blocks can be grouped using `engine.block.isGroupable()`. This method returns `true` if all blocks can be grouped together, or `false` if any block is a scene or already belongs to a group. ```typescript highlight=highlight-check-groupable // Check if the blocks can be grouped together const canGroup = engine.block.isGroupable([block1, block2, block3]); console.log('Blocks can be grouped:', canGroup); ``` ## Create a Group Use `engine.block.group()` to combine multiple blocks into a new group. The method returns the ID of the newly created group block. The group inherits the combined bounding box of its members. ```typescript highlight=highlight-create-group // Group the blocks together if (canGroup) { const groupId = engine.block.group([block1, block2, block3]); console.log('Created group with ID:', groupId); // Select the group to show it in the UI engine.block.setSelected(groupId, true); ``` ## Navigate Group Selection CE.SDK provides methods to navigate into and out of groups while editing. ### Enter a Group When a group is selected, use `engine.block.enterGroup()` to enter editing mode for that group. This allows you to select and modify individual members within the group. ```typescript highlight=highlight-enter-group // Enter the group to select individual members engine.block.enterGroup(groupId); // Select a specific member within the group engine.block.setSelected(block2, true); console.log('Selected member inside group'); ``` ### Exit a Group When editing a member inside a group, use `engine.block.exitGroup()` to return selection to the parent group. This method takes a member block ID and selects its parent group. ```typescript highlight=highlight-exit-group // Exit the group to return selection to the parent group engine.block.exitGroup(block2); console.log('Exited group, group is now selected'); ``` ## Find and Inspect Groups Discover groups in a scene and inspect their contents using `engine.block.findByType()`, `engine.block.getType()`, and `engine.block.getChildren()`. ```typescript highlight=highlight-find-groups // Find all groups in the scene const allGroups = engine.block.findByType('group'); console.log('Number of groups in scene:', allGroups.length); // Check the type of the group block const groupType = engine.block.getType(groupId); console.log('Group block type:', groupType); // Get the members of the group const members = engine.block.getChildren(groupId); console.log('Group has', members.length, 'members'); ``` Use `engine.block.findByType('group')` to get all group blocks in the current scene. Use `engine.block.getType()` to check if a specific block is a group (returns `'//ly.img.ubq/group'`). Use `engine.block.getChildren()` to get the member blocks of a group. ## Ungroup Blocks Use `engine.block.ungroup()` to dissolve a group and release its children back to the parent container. The children maintain their current positions in the scene. ```typescript highlight=highlight-ungroup // Ungroup the blocks to make them independent again engine.block.ungroup(groupId); console.log('Ungrouped blocks'); // Verify blocks are no longer in a group const groupsAfterUngroup = engine.block.findByType('group'); console.log('Groups after ungrouping:', groupsAfterUngroup.length); ``` ## Troubleshooting ### Blocks Cannot Be Grouped If `engine.block.isGroupable()` returns `false`: - Check if any of the blocks is a scene block (scenes cannot be grouped) - Check if any block is already part of a group (use `engine.block.getParent()` to verify) - Ensure all block IDs are valid ### Enter Group Has No Effect If `engine.block.enterGroup()` doesn't change selection: - Verify the block is a group using `engine.block.getType()` - Ensure the `'editor/select'` scope is enabled ### Group Not Visible After Creation If a newly created group is not visible: - Check that the member blocks were visible before grouping - Verify the group's opacity using `engine.block.getOpacity()` ## API Reference | Method | Description | | --- | --- | | `engine.block.isGroupable(ids)` | Check if blocks can be grouped together | | `engine.block.group(ids)` | Create a group from multiple blocks | | `engine.block.ungroup(id)` | Dissolve a group and release its children | | `engine.block.enterGroup(id)` | Enter group editing mode (select member) | | `engine.block.exitGroup(id)` | Exit group editing mode (select parent group) | | `engine.block.findByType(type)` | Find all blocks of a specific type | | `engine.block.getType(id)` | Get the type string of a block | | `engine.block.getParent(id)` | Get the parent block | | `engine.block.getChildren(id)` | Get child blocks of a container | ## Next Steps Explore related topics: - [Layer Management](https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/) - Control z-order and visibility of blocks - [Position and Align](https://img.ly/docs/cesdk/sveltekit/insert-media/position-and-align-cc6b6a/) - Arrange blocks precisely on the canvas - [Lock Design](https://img.ly/docs/cesdk/sveltekit/create-composition/lock-design-0a81de/) - Prevent modifications to specific elements --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Layer Management" description: "Organize design elements using a layer stack for precise control over stacking and visibility." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Layers](https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/) --- Organize design elements in CE.SDK using a hierarchical layer stack to control stacking order, visibility, and element relationships.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layer-management-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layer-management-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-layer-management-browser/) Design elements in CE.SDK are organized in a hierarchical parent-child structure. Children of a block are rendered in order, with the last child appearing on top. This layer stack model gives you precise control over how elements overlap and interact visually. ```typescript file=@cesdk_web_examples/guides-create-composition-layer-management-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Layer Management Guide * * This example demonstrates: * - Navigating parent-child hierarchy * - Adding and positioning blocks in the layer stack * - Changing z-order (bring to front, send to back) * - Controlling visibility * - Duplicating and removing blocks */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Create a colored rectangle const redRect = engine.block.create('graphic'); engine.block.setShape(redRect, engine.block.createShape('rect')); const redFill = engine.block.createFill('color'); engine.block.setFill(redRect, redFill); engine.block.setColor(redFill, 'fill/color/value', { r: 0.9, g: 0.2, b: 0.2, a: 1 }); engine.block.setWidth(redRect, 180); engine.block.setHeight(redRect, 180); engine.block.setPositionX(redRect, 220); engine.block.setPositionY(redRect, 120); // Create additional rectangles to demonstrate layer ordering const greenRect = engine.block.create('graphic'); engine.block.setShape(greenRect, engine.block.createShape('rect')); const greenFill = engine.block.createFill('color'); engine.block.setFill(greenRect, greenFill); engine.block.setColor(greenFill, 'fill/color/value', { r: 0.2, g: 0.8, b: 0.2, a: 1 }); engine.block.setWidth(greenRect, 180); engine.block.setHeight(greenRect, 180); engine.block.setPositionX(greenRect, 280); engine.block.setPositionY(greenRect, 180); const blueRect = engine.block.create('graphic'); engine.block.setShape(blueRect, engine.block.createShape('rect')); const blueFill = engine.block.createFill('color'); engine.block.setFill(blueRect, blueFill); engine.block.setColor(blueFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1 }); engine.block.setWidth(blueRect, 180); engine.block.setHeight(blueRect, 180); engine.block.setPositionX(blueRect, 340); engine.block.setPositionY(blueRect, 240); // Add blocks to the page - last appended is on top engine.block.appendChild(page, redRect); engine.block.appendChild(page, greenRect); engine.block.appendChild(page, blueRect); // Get the parent of a block const parent = engine.block.getParent(redRect); console.log('Parent of red rectangle:', parent); // Get all children of the page const children = engine.block.getChildren(page); console.log('Page children (in render order):', children); // Insert a new block at a specific position (index 0 = back) const yellowRect = engine.block.create('graphic'); engine.block.setShape(yellowRect, engine.block.createShape('rect')); const yellowFill = engine.block.createFill('color'); engine.block.setFill(yellowRect, yellowFill); engine.block.setColor(yellowFill, 'fill/color/value', { r: 0.95, g: 0.85, b: 0.2, a: 1 }); engine.block.setWidth(yellowRect, 180); engine.block.setHeight(yellowRect, 180); engine.block.setPositionX(yellowRect, 160); engine.block.setPositionY(yellowRect, 60); engine.block.insertChild(page, yellowRect, 0); // Bring the red rectangle to the front engine.block.bringToFront(redRect); console.log('Red rectangle brought to front'); // Send the blue rectangle to the back engine.block.sendToBack(blueRect); console.log('Blue rectangle sent to back'); // Move the green rectangle forward one layer engine.block.bringForward(greenRect); console.log('Green rectangle moved forward'); // Move the yellow rectangle backward one layer engine.block.sendBackward(yellowRect); console.log('Yellow rectangle moved backward'); // Check and toggle visibility const isVisible = engine.block.isVisible(blueRect); console.log('Blue rectangle visible:', isVisible); // Hide the blue rectangle temporarily engine.block.setVisible(blueRect, false); console.log('Blue rectangle hidden'); // Show it again for the final composition engine.block.setVisible(blueRect, true); console.log('Blue rectangle shown again'); // Duplicate a block const duplicateGreen = engine.block.duplicate(greenRect); engine.block.setPositionX(duplicateGreen, 400); engine.block.setPositionY(duplicateGreen, 300); // Change the duplicate's color to purple const purpleFill = engine.block.createFill('color'); engine.block.setFill(duplicateGreen, purpleFill); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.8, a: 1 }); console.log('Green rectangle duplicated'); // Check if a block is valid before operations const isValidBefore = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid before destroy:', isValidBefore); // Remove a block from the scene engine.block.destroy(yellowRect); console.log('Yellow rectangle destroyed'); // Check validity after destruction const isValidAfter = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid after destroy:', isValidAfter); engine.scene.zoomToBlock(page, 40, 40, 40, 40); } } export default Example; ``` This guide covers how to navigate the block hierarchy, reorder elements in the layer stack, toggle visibility, and manage block lifecycles through duplication and deletion. ## Creating Visual Blocks To demonstrate layer ordering, we create colored rectangles that overlap on the canvas. Each block is created using `engine.block.create()` and configured with a shape, fill color, dimensions, and position. ```typescript highlight=highlight-create-block // Create a colored rectangle const redRect = engine.block.create('graphic'); engine.block.setShape(redRect, engine.block.createShape('rect')); const redFill = engine.block.createFill('color'); engine.block.setFill(redRect, redFill); engine.block.setColor(redFill, 'fill/color/value', { r: 0.9, g: 0.2, b: 0.2, a: 1 }); engine.block.setWidth(redRect, 180); engine.block.setHeight(redRect, 180); engine.block.setPositionX(redRect, 220); engine.block.setPositionY(redRect, 120); ``` ## Navigating the Block Hierarchy CE.SDK organizes blocks in a parent-child tree structure. Every block can have one parent and multiple children. Understanding this hierarchy is essential for programmatic layer management. ### Getting a Block's Parent We retrieve the parent of any block using `engine.block.getParent()`. This returns the parent's block ID, or null if the block has no parent (such as the scene root). ```typescript highlight=highlight-get-parent // Get the parent of a block const parent = engine.block.getParent(redRect); console.log('Parent of red rectangle:', parent); ``` Knowing a block's parent helps you understand where it sits in the hierarchy and enables operations like reparenting or finding sibling blocks. ### Listing Child Blocks We get all direct children of a block using `engine.block.getChildren()`. Children are returned sorted in their rendering order, where the last child renders in front of other children. ```typescript highlight=highlight-get-children // Get all children of the page const children = engine.block.getChildren(page); console.log('Page children (in render order):', children); ``` This method is useful for iterating through all elements on a page or within a group. ## Adding and Positioning Blocks When you create a new block, it exists independently until you add it to the hierarchy. There are two ways to attach blocks to a parent: appending to the end or inserting at a specific position. ### Appending Blocks We add a block as the last child of a parent using `engine.block.appendChild()`. Since the last child renders on top, the appended block becomes the topmost element. ```typescript highlight=highlight-append-child // Add blocks to the page - last appended is on top engine.block.appendChild(page, redRect); engine.block.appendChild(page, greenRect); engine.block.appendChild(page, blueRect); ``` When you append multiple blocks in sequence, each new block appears in front of the previous ones. ### Inserting at a Specific Position We insert a block at a specific index in the layer stack using `engine.block.insertChild()`. Index 0 places the block at the back, behind all other children. ```typescript highlight=highlight-insert-child // Insert a new block at a specific position (index 0 = back) const yellowRect = engine.block.create('graphic'); engine.block.setShape(yellowRect, engine.block.createShape('rect')); const yellowFill = engine.block.createFill('color'); engine.block.setFill(yellowRect, yellowFill); engine.block.setColor(yellowFill, 'fill/color/value', { r: 0.95, g: 0.85, b: 0.2, a: 1 }); engine.block.setWidth(yellowRect, 180); engine.block.setHeight(yellowRect, 180); engine.block.setPositionX(yellowRect, 160); engine.block.setPositionY(yellowRect, 60); engine.block.insertChild(page, yellowRect, 0); ``` This gives you precise control over where new elements appear in the stacking order. ### Reparenting Blocks When you add a block to a new parent using `appendChild()` or `insertChild()`, it is automatically removed from its previous parent. This makes reparenting operations straightforward without needing to manually detach blocks first. ## Changing Z-Order Once blocks are in the hierarchy, you can change their stacking order without removing and re-adding them. CE.SDK provides four methods for z-order manipulation. ### Bring to Front We move an element to the top of its siblings using `engine.block.bringToFront()`. This gives the block the highest stacking order among its siblings. ```typescript highlight=highlight-bring-to-front // Bring the red rectangle to the front engine.block.bringToFront(redRect); console.log('Red rectangle brought to front'); ``` ### Send to Back We move an element behind all its siblings using `engine.block.sendToBack()`. This gives the block the lowest stacking order among its siblings. ```typescript highlight=highlight-send-to-back // Send the blue rectangle to the back engine.block.sendToBack(blueRect); console.log('Blue rectangle sent to back'); ``` ### Move Forward One Layer We move an element one position forward using `engine.block.bringForward()`. This swaps the block with its immediate sibling in front. ```typescript highlight=highlight-bring-forward // Move the green rectangle forward one layer engine.block.bringForward(greenRect); console.log('Green rectangle moved forward'); ``` ### Move Backward One Layer We move an element one position backward using `engine.block.sendBackward()`. This swaps the block with its immediate sibling behind. ```typescript highlight=highlight-send-backward // Move the yellow rectangle backward one layer engine.block.sendBackward(yellowRect); console.log('Yellow rectangle moved backward'); ``` These incremental operations are useful for fine-tuning the layer order without jumping to extremes. ## Controlling Visibility Visibility allows you to temporarily hide elements without removing them from the scene. Hidden elements remain in the hierarchy and preserve their properties, but are not rendered. ### Checking and Toggling Visibility We query the current visibility state using `engine.block.isVisible()` and change it using `engine.block.setVisible()`. ```typescript highlight=highlight-visibility // Check and toggle visibility const isVisible = engine.block.isVisible(blueRect); console.log('Blue rectangle visible:', isVisible); // Hide the blue rectangle temporarily engine.block.setVisible(blueRect, false); console.log('Blue rectangle hidden'); // Show it again for the final composition engine.block.setVisible(blueRect, true); console.log('Blue rectangle shown again'); ``` Visibility is useful for creating before/after comparisons, hiding elements during editing, or implementing show/hide functionality in your application. ## Managing Block Lifecycle CE.SDK provides methods for duplicating blocks to create copies and destroying blocks to remove them permanently. ### Duplicating Blocks We create a copy of a block and all its children using `engine.block.duplicate()`. By default, the duplicate is attached to the same parent as the original. ```typescript highlight=highlight-duplicate // Duplicate a block const duplicateGreen = engine.block.duplicate(greenRect); engine.block.setPositionX(duplicateGreen, 400); engine.block.setPositionY(duplicateGreen, 300); // Change the duplicate's color to purple const purpleFill = engine.block.createFill('color'); engine.block.setFill(duplicateGreen, purpleFill); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.8, a: 1 }); console.log('Green rectangle duplicated'); ``` The duplicated block is positioned at the same location as the original. You typically want to reposition it to make it visible as a separate element. ### Checking Block Validity Before performing operations on a block, we can verify it still exists using `engine.block.isValid()`. A block becomes invalid after it has been destroyed. ```typescript highlight=highlight-is-valid // Check if a block is valid before operations const isValidBefore = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid before destroy:', isValidBefore); ``` ### Removing Blocks We permanently remove a block and all its children from the scene using `engine.block.destroy()`. This operation cannot be undone programmatically. ```typescript highlight=highlight-destroy // Remove a block from the scene engine.block.destroy(yellowRect); console.log('Yellow rectangle destroyed'); // Check validity after destruction const isValidAfter = engine.block.isValid(yellowRect); console.log('Yellow rectangle valid after destroy:', isValidAfter); ``` After destruction, any references to the block become invalid. Attempting to use an invalid block ID will result in errors. ## Framing the Result After making layer changes, we zoom to fit the page in the viewport so the composition is clearly visible. ```typescript highlight=highlight-zoom engine.scene.zoomToBlock(page, 40, 40, 40, 40); ``` ## Troubleshooting **Block not visible after appendChild**: The block may be behind other elements. Use `engine.block.bringToFront()` or adjust the insert index to control stacking order. **getParent returns null**: The block is not attached to any parent. Use `engine.block.appendChild()` or `engine.block.insertChild()` to attach it to a page or container. **Changes not reflected**: The block handle may be invalid. Check with `engine.block.isValid()` before performing operations. **Z-order not updating**: Verify you're operating on the correct block ID and that the block is in the expected parent context. **Duplicate not appearing**: If `attachToParent` is set to false, the duplicate won't be attached automatically. Set it to true or manually attach the duplicate to a parent. ## API Reference | Method | Description | | --- | --- | | `engine.block.getParent(id)` | Get the parent block of a given block | | `engine.block.getChildren(id)` | Get all child blocks in rendering order | | `engine.block.appendChild(parent, child)` | Append a block as the last child | | `engine.block.insertChild(parent, child, index)` | Insert a block at a specific position | | `engine.block.bringToFront(id)` | Bring a block to the front of its siblings | | `engine.block.sendToBack(id)` | Send a block to the back of its siblings | | `engine.block.bringForward(id)` | Move a block one position forward | | `engine.block.sendBackward(id)` | Move a block one position backward | | `engine.block.isVisible(id)` | Check if a block is visible | | `engine.block.setVisible(id, visible)` | Set the visibility of a block | | `engine.block.duplicate(id, attachToParent?)` | Duplicate a block and its children | | `engine.block.destroy(id)` | Remove a block and its children | | `engine.block.isValid(id)` | Check if a block handle is valid | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design a Layout" description: "Create structured compositions using scene layouts, positioning systems, and hierarchical block organization for collages, magazines, and multi-page documents." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/layout-b66311/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Design a Layout](https://img.ly/docs/cesdk/sveltekit/create-composition/layout-b66311/) --- Create structured compositions using stack layouts that automatically arrange pages vertically or horizontally with consistent spacing.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layout-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-layout-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-layout-browser/) Stack layouts arrange pages automatically with consistent spacing. Vertical stacks arrange pages top-to-bottom, while horizontal stacks arrange them left-to-right. This eliminates manual positioning for compositions like photo collages, product catalogs, or social media carousels. ```typescript file=@cesdk_web_examples/guides-create-composition-layout-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) throw new Error('CE.SDK instance is required'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a scene with vertical stack layout // Pages arrange top-to-bottom automatically engine.scene.create('VerticalStack'); // Get the stack container created with the scene const [stack] = engine.block.findByType('stack'); // Create two pages that will stack vertically const page1 = engine.block.create('page'); engine.block.setWidth(page1, 400); engine.block.setHeight(page1, 300); engine.block.appendChild(stack, page1); const page2 = engine.block.create('page'); engine.block.setWidth(page2, 400); engine.block.setHeight(page2, 300); engine.block.appendChild(stack, page2); // Configure spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Add image content to page 1 const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const block1 = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.setPositionX(block1, 25); engine.block.setPositionY(block1, 25); engine.block.appendChild(page1, block1); // Add a colored rectangle to page 2 const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 350); engine.block.setHeight(block2, 250); engine.block.setPositionX(block2, 25); engine.block.setPositionY(block2, 25); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page2, block2); // Switch to horizontal stack layout // Pages now arrange left-to-right engine.scene.setLayout('HorizontalStack'); // Verify the layout type const currentLayout = engine.scene.getLayout(); console.log('Current layout:', currentLayout); // Add a new page to the existing stack // The page automatically appears at the end const page3 = engine.block.create('page'); engine.block.setWidth(page3, 400); engine.block.setHeight(page3, 300); engine.block.appendChild(stack, page3); // Add content to the new page const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 350); engine.block.setHeight(block3, 250); engine.block.setPositionX(block3, 25); engine.block.setPositionY(block3, 25); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.3, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page3, block3); // Reorder pages using insertChild // Move page3 to the first position engine.block.insertChild(stack, page3, 0); // Verify the new order const pageOrder = engine.block.getChildren(stack); console.log('Page order after reordering:', pageOrder); // Update spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 40); // Verify the spacing value const updatedSpacing = engine.block.getFloat(stack, 'stack/spacing'); console.log('Updated spacing:', updatedSpacing); // Zoom to show all pages in the stack await engine.scene.zoomToBlock(stack, { padding: 50 }); } } export default Example; ``` This guide covers how to: - Create vertical and horizontal stack layouts - Add pages and blocks to stacks - Configure spacing between stacked pages - Reorder pages within a stack - Switch between stack and free layouts ## Create a Vertical Stack Layout Vertical stacks arrange pages from top to bottom. Create a scene with `VerticalStack` layout, then add pages to the stack container. ```typescript highlight=highlight-vertical-stack // Create a scene with vertical stack layout // Pages arrange top-to-bottom automatically engine.scene.create('VerticalStack'); // Get the stack container created with the scene const [stack] = engine.block.findByType('stack'); // Create two pages that will stack vertically const page1 = engine.block.create('page'); engine.block.setWidth(page1, 400); engine.block.setHeight(page1, 300); engine.block.appendChild(stack, page1); const page2 = engine.block.create('page'); engine.block.setWidth(page2, 400); engine.block.setHeight(page2, 300); engine.block.appendChild(stack, page2); // Configure spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` When you create a scene with `VerticalStack` layout, CE.SDK automatically creates a stack container. Pages added to this container are positioned vertically with the configured spacing. The `spacingInScreenspace` property ensures spacing remains consistent regardless of zoom level. ## Add Blocks to Pages Each page can contain multiple blocks. Create blocks with shapes and fills, position them within the page, then append them to the page. ```typescript highlight=highlight-add-blocks // Add image content to page 1 const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const block1 = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.setPositionX(block1, 25); engine.block.setPositionY(block1, 25); engine.block.appendChild(page1, block1); // Add a colored rectangle to page 2 const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, 350); engine.block.setHeight(block2, 250); engine.block.setPositionX(block2, 25); engine.block.setPositionY(block2, 25); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.setFill(block2, fill2); engine.block.appendChild(page2, block2); ``` Blocks require a shape and fill to be visible. Use `addImage()` for image content, or create graphic blocks with custom shapes and color fills. Position blocks within their parent page using `setPositionX()` and `setPositionY()`. ## Switch to Horizontal Layout Change the layout direction at any time using `setLayout()`. Horizontal stacks arrange pages left-to-right instead of top-to-bottom. ```typescript highlight=highlight-horizontal-stack // Switch to horizontal stack layout // Pages now arrange left-to-right engine.scene.setLayout('HorizontalStack'); // Verify the layout type const currentLayout = engine.scene.getLayout(); console.log('Current layout:', currentLayout); ``` Horizontal layouts work well for carousels, timelines, and horizontal galleries. Existing pages automatically reposition when you change the layout type. ## Add Pages to Existing Stacks Add new pages to an existing stack at any time. Pages automatically appear at the end of the stack with proper spacing. ```typescript highlight=highlight-add-page // Add a new page to the existing stack // The page automatically appears at the end const page3 = engine.block.create('page'); engine.block.setWidth(page3, 400); engine.block.setHeight(page3, 300); engine.block.appendChild(stack, page3); // Add content to the new page const block3 = engine.block.create('graphic'); const shape3 = engine.block.createShape('rect'); engine.block.setShape(block3, shape3); engine.block.setWidth(block3, 350); engine.block.setHeight(block3, 250); engine.block.setPositionX(block3, 25); engine.block.setPositionY(block3, 25); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.9, g: 0.5, b: 0.3, a: 1.0 }); engine.block.setFill(block3, fill3); engine.block.appendChild(page3, block3); ``` The stack container manages positioning automatically. You can add content to the new page before or after appending it to the stack. ## Reorder Pages Change page order using `insertChild()` to place a page at a specific index within the stack. ```typescript highlight=highlight-reorder // Reorder pages using insertChild // Move page3 to the first position engine.block.insertChild(stack, page3, 0); // Verify the new order const pageOrder = engine.block.getChildren(stack); console.log('Page order after reordering:', pageOrder); ``` Removing a page from its current position and reinserting it at index 0 moves it to the first position. All other pages shift to accommodate the change. ## Change Stack Spacing Adjust spacing between pages using the `stack/spacing` property on the stack block. ```typescript highlight=highlight-spacing // Update spacing between stacked pages engine.block.setFloat(stack, 'stack/spacing', 40); // Verify the spacing value const updatedSpacing = engine.block.getFloat(stack, 'stack/spacing'); console.log('Updated spacing:', updatedSpacing); ``` Spacing updates immediately and pages reposition automatically. Use `getFloat()` to verify the current spacing value. ## Switch to Free Layout For manual positioning, switch to `Free` layout. Pages keep their positions but stop auto-arranging. ```typescript // Check current layout type const layout = engine.scene.getLayout(); // Convert to free layout for manual positioning engine.scene.setLayout('Free'); // Now position pages manually const [page] = engine.block.findByType('page'); engine.block.setPositionX(page, 100); engine.block.setPositionY(page, 200); ``` Free layout gives full control over page positions. Use this when you need precise positioning that stack layouts cannot provide. ## Troubleshooting **Pages not arranging automatically** — Verify the scene layout type is `VerticalStack` or `HorizontalStack` using `getLayout()`. **Spacing not applying** — Check that you're setting spacing on the stack block, not the scene. Use `findByType('stack')` to get the stack container. **Pages overlapping** — Ensure pages are direct children of the stack container. Nested pages won't auto-arrange properly. **Can't position manually** — Stack layouts override manual positions. Switch to `Free` layout for manual control. **Wrong stacking order** — Child order determines position. Use `insertChild()` to move pages to specific positions. ## API Reference | Method | Description | |--------|-------------| | `engine.scene.create(layout)` | Create a scene with specified layout (`'Free'`, `'VerticalStack'`, `'HorizontalStack'`) | | `engine.scene.setLayout(layout)` | Change the layout type of the current scene | | `engine.scene.getLayout()` | Get the current layout type | | `engine.block.findByType('stack')` | Find the stack container block | | `engine.block.setFloat(id, 'stack/spacing', value)` | Set spacing between stacked pages | | `engine.block.getFloat(id, 'stack/spacing')` | Get current spacing value | | `engine.block.appendChild(parent, child)` | Add a page to the stack | | `engine.block.insertChild(parent, child, index)` | Insert a page at a specific position | | `engine.block.getChildren(id)` | Get child blocks in order | ## Next Steps - [Auto-resize](https://img.ly/docs/cesdk/sveltekit/automation/auto-resize-4c2d58/) — Make blocks fit parent containers - [Manual Positioning](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/move-818dd9/) — Position blocks in free layouts - [Layer Hierarchies](https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/) — Organize blocks in hierarchical structures - [Create a Collage](https://img.ly/docs/cesdk/sveltekit/create-composition/collage-f7d28d/) — Build photo collages with templates --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Lock Design" description: "Protect design elements from unwanted modifications using CE.SDK's scope-based permission system. Control which properties users can edit at both global and block levels." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/lock-design-0a81de/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Lock Design](https://img.ly/docs/cesdk/sveltekit/create-composition/lock-design-0a81de/) --- Protect design elements from unwanted modifications using CE.SDK's scope-based permission system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-lock-design-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-lock-design-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-lock-design-browser/) CE.SDK uses a two-layer scope system to control editing permissions. Global scopes set defaults for the entire scene, while block-level scopes override when the global setting is `Defer`. This enables flexible permission models from fully locked to selectively editable designs. ```typescript file=@cesdk_web_examples/guides-create-composition-lock-design-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, Scope } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class LockDesign implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Create sample content to demonstrate different locking techniques const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Column 1: Fully Locked const caption1 = engine.block.create('text'); engine.block.setString(caption1, 'text/text', 'Fully Locked'); engine.block.setFloat(caption1, 'text/fontSize', 32); engine.block.setWidth(caption1, 220); engine.block.setHeight(caption1, 50); engine.block.setPositionX(caption1, 30); engine.block.setPositionY(caption1, 30); engine.block.appendChild(page, caption1); const imageBlock = await engine.block.addImage(imageUri, { x: 30, y: 100, size: { width: 220, height: 165 } }); engine.block.appendChild(page, imageBlock); // Column 2: Text Editing Only const caption2 = engine.block.create('text'); engine.block.setString(caption2, 'text/text', 'Text Editing'); engine.block.setFloat(caption2, 'text/fontSize', 32); engine.block.setWidth(caption2, 220); engine.block.setHeight(caption2, 50); engine.block.setPositionX(caption2, 290); engine.block.setPositionY(caption2, 30); engine.block.appendChild(page, caption2); const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', 'Edit Me'); engine.block.setFloat(textBlock, 'text/fontSize', 72); engine.block.setWidth(textBlock, 220); engine.block.setHeight(textBlock, 165); engine.block.setPositionX(textBlock, 290); engine.block.setPositionY(textBlock, 100); engine.block.appendChild(page, textBlock); // Column 3: Image Replace Only const caption3 = engine.block.create('text'); engine.block.setString(caption3, 'text/text', 'Image Replace'); engine.block.setFloat(caption3, 'text/fontSize', 32); engine.block.setWidth(caption3, 220); engine.block.setHeight(caption3, 50); engine.block.setPositionX(caption3, 550); engine.block.setPositionY(caption3, 30); engine.block.appendChild(page, caption3); const placeholderBlock = await engine.block.addImage(imageUri, { x: 550, y: 100, size: { width: 220, height: 165 } }); engine.block.appendChild(page, placeholderBlock); // Lock the entire design by setting all scopes to Deny const scopes = engine.editor.findAllScopes(); for (const scope of scopes) { engine.editor.setGlobalScope(scope, 'Deny'); } // Enable selection for specific blocks engine.editor.setGlobalScope('editor/select', 'Defer'); engine.block.setScopeEnabled(textBlock, 'editor/select', true); engine.block.setScopeEnabled(placeholderBlock, 'editor/select', true); // Enable text editing on the text block engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('text/character', 'Defer'); engine.block.setScopeEnabled(textBlock, 'text/edit', true); engine.block.setScopeEnabled(textBlock, 'text/character', true); // Enable image replacement on the placeholder block engine.editor.setGlobalScope('fill/change', 'Defer'); engine.block.setScopeEnabled(placeholderBlock, 'fill/change', true); // Check if operations are permitted on blocks const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit'); const canMoveImage = engine.block.isAllowedByScope( imageBlock, 'layer/move' ); const canReplacePlaceholder = engine.block.isAllowedByScope( placeholderBlock, 'fill/change' ); console.log('Permission status:'); console.log('- Can edit text:', canEditText); // true console.log('- Can move locked image:', canMoveImage); // false console.log('- Can replace placeholder:', canReplacePlaceholder); // true // Discover all available scopes const allScopes: Scope[] = engine.editor.findAllScopes(); console.log('Available scopes:', allScopes); // Check global scope settings const textEditGlobal = engine.editor.getGlobalScope('text/edit'); const layerMoveGlobal = engine.editor.getGlobalScope('layer/move'); console.log('Global text/edit:', textEditGlobal); // 'Defer' console.log('Global layer/move:', layerMoveGlobal); // 'Deny' // Check block-level scope settings const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit'); console.log('Text block text/edit enabled:', textEditEnabled); // true // Select the text block to demonstrate editability engine.block.select(textBlock); } } export default LockDesign; ``` This guide covers how to lock entire designs, selectively enable specific editing capabilities, and check permissions programmatically. ## Understanding the Scope Permission Model Scopes control what operations users can perform on design elements. CE.SDK combines global scope settings with block-level settings to determine the final permission. | Global Scope | Block Scope | Result | | ------------ | ----------- | --------- | | `Allow` | any | Permitted | | `Deny` | any | Blocked | | `Defer` | enabled | Permitted | | `Defer` | disabled | Blocked | Global scopes have three possible values: - **`Allow`**: The operation is always permitted, regardless of block-level settings - **`Deny`**: The operation is always blocked, regardless of block-level settings - **`Defer`**: The permission depends on the block-level scope setting Block-level scopes are binary: enabled or disabled. They only take effect when the global scope is set to `Defer`. ## Locking an Entire Design To lock all editing operations, iterate through all available scopes and set each to `Deny`. We use `engine.editor.findAllScopes()` to discover all scope names dynamically. ```typescript highlight=highlight-lock-entire-design // Lock the entire design by setting all scopes to Deny const scopes = engine.editor.findAllScopes(); for (const scope of scopes) { engine.editor.setGlobalScope(scope, 'Deny'); } ``` When all scopes are set to `Deny`, users cannot modify any aspect of the design. This includes selecting, moving, editing text, or changing any visual properties. ## Enabling Selection for Interactive Blocks Before users can interact with any block, you must enable the `editor/select` scope. Without selection, users cannot click on or access any blocks, even if other editing capabilities are enabled. ```typescript highlight=highlight-enable-selection // Enable selection for specific blocks engine.editor.setGlobalScope('editor/select', 'Defer'); engine.block.setScopeEnabled(textBlock, 'editor/select', true); engine.block.setScopeEnabled(placeholderBlock, 'editor/select', true); ``` Setting the global `editor/select` scope to `Defer` delegates the decision to each block. We then enable selection only on the specific blocks users should be able to interact with. ## Selective Locking Patterns Lock everything first, then selectively enable specific capabilities on chosen blocks. This pattern provides fine-grained control over what users can modify. ### Text-Only Editing To allow users to edit text content while protecting everything else, enable the `text/edit` scope. For text styling changes like font, size, and color, also enable `text/character`. ```typescript highlight=highlight-text-editing // Enable text editing on the text block engine.editor.setGlobalScope('text/edit', 'Defer'); engine.editor.setGlobalScope('text/character', 'Defer'); engine.block.setScopeEnabled(textBlock, 'text/edit', true); engine.block.setScopeEnabled(textBlock, 'text/character', true); ``` Users can now type new text content in the designated text block but cannot move, resize, or delete it. ### Image Replacement To allow users to swap images while protecting layout and position, enable the `fill/change` scope on placeholder blocks. ```typescript highlight=highlight-image-replacement // Enable image replacement on the placeholder block engine.editor.setGlobalScope('fill/change', 'Defer'); engine.block.setScopeEnabled(placeholderBlock, 'fill/change', true); ``` Users can replace the image content but the block's position, dimensions, and other properties remain locked. ## Checking Permissions Verify whether operations are permitted using `engine.block.isAllowedByScope()`. This method evaluates both global and block-level settings to return the effective permission state. ```typescript highlight=highlight-check-permissions // Check if operations are permitted on blocks const canEditText = engine.block.isAllowedByScope(textBlock, 'text/edit'); const canMoveImage = engine.block.isAllowedByScope( imageBlock, 'layer/move' ); const canReplacePlaceholder = engine.block.isAllowedByScope( placeholderBlock, 'fill/change' ); console.log('Permission status:'); console.log('- Can edit text:', canEditText); // true console.log('- Can move locked image:', canMoveImage); // false console.log('- Can replace placeholder:', canReplacePlaceholder); // true ``` The distinction between checking methods is: - `isAllowedByScope()` returns the **effective permission** after evaluating all scope levels - `isScopeEnabled()` returns only the **block-level setting** - `getGlobalScope()` returns only the **global setting** ## Discovering Available Scopes To work with scopes programmatically, you can discover all available scope names and check their current settings. ```typescript highlight=highlight-get-scopes // Discover all available scopes const allScopes: Scope[] = engine.editor.findAllScopes(); console.log('Available scopes:', allScopes); // Check global scope settings const textEditGlobal = engine.editor.getGlobalScope('text/edit'); const layerMoveGlobal = engine.editor.getGlobalScope('layer/move'); console.log('Global text/edit:', textEditGlobal); // 'Defer' console.log('Global layer/move:', layerMoveGlobal); // 'Deny' // Check block-level scope settings const textEditEnabled = engine.block.isScopeEnabled(textBlock, 'text/edit'); console.log('Text block text/edit enabled:', textEditEnabled); // true ``` ## Available Scopes Reference | Scope | Description | | ------------------------ | --------------------------------------- | | `layer/move` | Move block position | | `layer/resize` | Resize block dimensions | | `layer/rotate` | Rotate block | | `layer/flip` | Flip block horizontally or vertically | | `layer/crop` | Crop block content | | `layer/opacity` | Change block opacity | | `layer/blendMode` | Change blend mode | | `layer/visibility` | Toggle block visibility | | `layer/clipping` | Change clipping behavior | | `fill/change` | Change fill content | | `fill/changeType` | Change fill type | | `stroke/change` | Change stroke properties | | `shape/change` | Change shape type | | `text/edit` | Edit text content | | `text/character` | Change text styling (font, size, color) | | `appearance/adjustments` | Change color adjustments | | `appearance/filter` | Apply or change filters | | `appearance/effect` | Apply or change effects | | `appearance/blur` | Apply or change blur | | `appearance/shadow` | Apply or change shadows | | `appearance/animation` | Apply or change animations | | `lifecycle/destroy` | Delete the block | | `lifecycle/duplicate` | Duplicate the block | | `editor/add` | Add new blocks | | `editor/select` | Select blocks | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Multi-Page Layouts" description: "Create and manage multi-page designs in CE.SDK for documents like brochures, presentations, and catalogs with multiple pages in a single scene." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/multi-page-4d2b50/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Multi-Page Layouts](https://img.ly/docs/cesdk/sveltekit/create-composition/multi-page-4d2b50/) --- Create multi-page designs in CE.SDK for brochures, presentations, catalogs, and other documents requiring multiple pages within a single scene.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-multi-page-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-multi-page-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-multi-page-browser/) Multi-page layouts allow you to create documents with multiple artboards within a single scene. Each page operates as an independent canvas that can contain different content while sharing the same scene context. CE.SDK provides scene layout modes that automatically arrange pages vertically, horizontally, or in a free-form canvas. ```typescript file=@cesdk_web_examples/guides-create-composition-multi-page-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Multi-Page Layouts Guide * * This example demonstrates: * - Creating scenes with multiple pages * - Adding and configuring pages * - Scene layout types (HorizontalStack) * - Stack spacing between pages */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a scene with HorizontalStack layout engine.scene.create('HorizontalStack'); // Get the stack container const [stack] = engine.block.findByType('stack'); // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); // Add content to the first page const imageBlock1 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock1, 250); engine.block.setPositionY(imageBlock1, 200); engine.block.appendChild(firstPage, imageBlock1); // Create a second page with different content const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add a different image to the second page const imageBlock2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_2.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock2, 250); engine.block.setPositionY(imageBlock2, 200); engine.block.appendChild(secondPage, imageBlock2); engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); } } export default Example; ``` This guide covers how to create multi-page scenes, add pages, and configure spacing between pages. ## Using the Built-in Page Management UI The CE.SDK editor provides built-in UI controls for managing pages. Users can interact with the page panel to add new pages, duplicate existing ones, reorder them with drag-and-drop, delete pages, and navigate between pages by clicking. The page panel displays thumbnails of all pages in the scene, making it easy to understand the document structure at a glance. When you click a page thumbnail, the viewport automatically zooms to that page. ## Creating Multi-Page Scenes Programmatically We can create scenes with multiple pages using the engine API. The scene acts as a container for pages, and each page can hold any number of content blocks. ### Creating a Scene with Pages We create a new scene using `engine.scene.create()` and specify the layout type. The layout type determines how pages are arranged in the viewport. After creating the scene, we get the stack container and create pages within it. ```typescript highlight=highlight-create-scene // Create a scene with HorizontalStack layout engine.scene.create('HorizontalStack'); // Get the stack container const [stack] = engine.block.findByType('stack'); // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); // Create the first page const firstPage = engine.block.create('page'); engine.block.setWidth(firstPage, 800); engine.block.setHeight(firstPage, 600); engine.block.appendChild(stack, firstPage); ``` The scene is created with a `HorizontalStack` layout, meaning pages are arranged side by side from left to right. We then create a page, set its dimensions, and append it to the stack container. ### Configuring Page Spacing We can add spacing between pages in a stack layout using the `stack/spacing` property. This creates visual separation between pages. ```typescript highlight=highlight-stack-spacing // Add spacing between pages (20 pixels in screen space) engine.block.setFloat(stack, 'stack/spacing', 20); engine.block.setBool(stack, 'stack/spacingInScreenspace', true); ``` Setting `stack/spacingInScreenspace` to `true` means the spacing value is interpreted as screen pixels, maintaining consistent visual spacing regardless of zoom level. ### Adding More Pages To add additional pages, we create new page blocks, set their dimensions, and append them to the stack container. ```typescript highlight=highlight-add-page // Create a second page with different content const secondPage = engine.block.create('page'); engine.block.setWidth(secondPage, 800); engine.block.setHeight(secondPage, 600); engine.block.appendChild(stack, secondPage); // Add a different image to the second page const imageBlock2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_2.jpg', { size: { width: 300, height: 200 } } ); engine.block.setPositionX(imageBlock2, 250); engine.block.setPositionY(imageBlock2, 200); engine.block.appendChild(secondPage, imageBlock2); ``` Each page can contain different content. Here we add different images to each page to demonstrate independent page content. ## Scene Layout Types CE.SDK supports different layout modes that control how pages are arranged on the canvas. You specify the layout type when creating the scene with `engine.scene.create()`. **Free Layout** is the default where pages can be positioned anywhere on the canvas. This provides complete control over page placement. **VerticalStack Layout** arranges pages automatically in a vertical stack from top to bottom. This is useful for scroll-based document previews. **HorizontalStack Layout** arranges pages side by side from left to right. This is useful for carousel-style presentations or side-by-side comparisons. ## Setting the Zoom Level We can control the viewport zoom level using `engine.scene.setZoomLevel()`. A value of 1.0 represents 100% zoom. ```typescript highlight=highlight-zoom engine.block.select(firstPage); engine.scene.enableZoomAutoFit(firstPage, 'Both'); ``` ## Troubleshooting **Page not visible after creation**: Ensure the page is attached to the stack with `appendChild()` and has valid dimensions set with `setWidth()` and `setHeight()`. **Cannot add content to page**: Verify you're appending blocks to the page block, not the scene directly. Content blocks should be children of pages. **Pages overlapping**: When using stack layouts, make sure pages are appended to the stack container (found via `findByType('stack')`), not directly to the scene. **Spacing not visible**: Check that `stack/spacing` is set to a positive value and that you're using a stack layout (HorizontalStack or VerticalStack). --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Combine and arrange multiple elements to create complex, multi-page, or layered design compositions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/overview-5b19c5/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Overview](https://img.ly/docs/cesdk/sveltekit/create-composition/overview-5b19c5/) --- ## Exporting Compositions CE.SDK compositions can be exported in several formats: --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Programmatic Creation" description: "Documentation for Programmatic Creation" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-composition/programmatic-a688bf/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) > [Programmatic Creation](https://img.ly/docs/cesdk/sveltekit/create-composition/programmatic-a688bf/) --- Build compositions entirely through code using CE.SDK's APIs for automation, batch processing, and custom interfaces.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-programmatic-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-composition-programmatic-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-composition-programmatic-browser/) CE.SDK provides a complete API for building designs through code. Instead of relying on user interactions through the built-in UI, you can create scenes, add blocks like text, images, and shapes, and position them programmatically. This approach enables automation workflows, batch processing, server-side rendering, and integration with custom interfaces. ```typescript file=@cesdk_web_examples/guides-create-composition-programmatic-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Programmatic Creation Guide * * Demonstrates building compositions entirely through code: * - Creating scenes and pages with social media dimensions * - Setting page background colors * - Adding text blocks with mixed styling (bold, italic, colors) * - Adding line shapes as dividers * - Adding images * - Positioning and sizing blocks */ // Roboto typeface with all variants for mixed styling const ROBOTO_TYPEFACE = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf', subFamily: 'Regular' }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold', weight: 'bold' as const }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Italic.ttf', subFamily: 'Italic', style: 'italic' as const }, { uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-BoldItalic.ttf', subFamily: 'Bold Italic', weight: 'bold' as const, style: 'italic' as const } ] }; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; engine.block.setFloat(scene, 'scene/dpi', 300); const page = engine.block.findByType('page')[0]; // Set page background to light lavender color const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.94, g: 0.93, b: 0.98, a: 1.0 }); engine.block.setFill(page, backgroundFill); // Add main headline text with bold Roboto font const headline = engine.block.create('text'); engine.block.replaceText( headline, 'Integrate\nCreative Editing\ninto your App' ); engine.block.setFont( headline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(headline, 'text/lineHeight', 0.78); // Make headline bold if (engine.block.canToggleBoldFont(headline)) { engine.block.toggleBoldFont(headline); } engine.block.setTextColor(headline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Absolute'); engine.block.setWidth(headline, 960); engine.block.setHeight(headline, 300); engine.block.setBool(headline, 'text/automaticFontSizeEnabled', true); engine.block.setPositionX(headline, 60); engine.block.setPositionY(headline, 80); engine.block.appendChild(page, headline); // Add tagline with mixed styling using range-based APIs // "in hours," (purple italic) + "not months." (black bold) const tagline = engine.block.create('text'); const taglineText = 'in hours,\nnot months.'; engine.block.replaceText(tagline, taglineText); // Set up Roboto typeface with all variants for mixed styling engine.block.setFont( tagline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(tagline, 'text/lineHeight', 0.78); // Style "in hours," - purple and italic (characters 0-9) engine.block.setTextColor( tagline, { r: 0.2, g: 0.2, b: 0.8, a: 1.0 }, 0, 9 ); if (engine.block.canToggleItalicFont(tagline, 0, 9)) { engine.block.toggleItalicFont(tagline, 0, 9); } // Style "not months." - black and bold (characters 10-21) engine.block.setTextColor( tagline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 10, 21 ); if (engine.block.canToggleBoldFont(tagline, 10, 21)) { engine.block.toggleBoldFont(tagline, 10, 21); } // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(tagline, 'Absolute'); engine.block.setHeightMode(tagline, 'Absolute'); engine.block.setWidth(tagline, 960); engine.block.setHeight(tagline, 220); engine.block.setBool(tagline, 'text/automaticFontSizeEnabled', true); engine.block.setPositionX(tagline, 60); engine.block.setPositionY(tagline, 551); engine.block.appendChild(page, tagline); // Add CTA text "Start a Free Trial" with bold font const ctaTitle = engine.block.create('text'); engine.block.replaceText(ctaTitle, 'Start a Free Trial'); engine.block.setFont( ctaTitle, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(ctaTitle, 'text/fontSize', 80); engine.block.setFloat(ctaTitle, 'text/lineHeight', 1.0); if (engine.block.canToggleBoldFont(ctaTitle)) { engine.block.toggleBoldFont(ctaTitle); } engine.block.setTextColor(ctaTitle, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setWidthMode(ctaTitle, 'Absolute'); engine.block.setHeightMode(ctaTitle, 'Auto'); engine.block.setWidth(ctaTitle, 664.6); engine.block.setPositionX(ctaTitle, 64); engine.block.setPositionY(ctaTitle, 952); engine.block.appendChild(page, ctaTitle); // Add website URL with regular font const ctaUrl = engine.block.create('text'); engine.block.replaceText(ctaUrl, 'www.img.ly'); engine.block.setFont(ctaUrl, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE); engine.block.setFloat(ctaUrl, 'text/fontSize', 80); engine.block.setFloat(ctaUrl, 'text/lineHeight', 1.0); engine.block.setTextColor(ctaUrl, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setWidthMode(ctaUrl, 'Absolute'); engine.block.setHeightMode(ctaUrl, 'Auto'); engine.block.setWidth(ctaUrl, 664.6); engine.block.setPositionX(ctaUrl, 64); engine.block.setPositionY(ctaUrl, 1006); engine.block.appendChild(page, ctaUrl); // Add horizontal divider line const dividerLine = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(dividerLine, lineShape); const lineFill = engine.block.createFill('color'); engine.block.setColor(lineFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(dividerLine, lineFill); engine.block.setWidth(dividerLine, 418); engine.block.setHeight(dividerLine, 11.3); engine.block.setPositionX(dividerLine, 64); engine.block.setPositionY(dividerLine, 460); engine.block.appendChild(page, dividerLine); // Add IMG.LY logo image const logo = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logo, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logo, logoFill); engine.block.setContentFillMode(logo, 'Contain'); engine.block.setWidth(logo, 200); engine.block.setHeight(logo, 65); engine.block.setPositionX(logo, 820); engine.block.setPositionY(logo, 960); engine.block.appendChild(page, logo); // Export the composition to PNG const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1080, targetHeight: 1080 }); // In browser, create a download link const url = URL.createObjectURL(blob); console.log('Export complete. Download URL:', url); // Zoom to show the page await cesdk.actions.run('zoom.toPage', { autoFit: true }); } } export default Example; ``` This guide covers how to create a scene structure with social media dimensions, set background colors, add text with mixed styling, line shapes, images, and export the finished composition. ## Initialize CE.SDK We start by initializing CE.SDK and loading the asset sources. The asset source plugins (imported from `@cesdk/cesdk-js/plugins`) provide access to fonts, images, and other assets. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); ``` ## Create Scene Structure We create the foundation of our composition with social media dimensions (1080x1080 pixels for Instagram). A scene contains one or more pages, and pages contain the design blocks. ```typescript highlight=highlight-create-scene await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get()!; ``` The `cesdk.actions.run('scene.create')` method creates a new design scene with a page. We set the page dimensions using `setWidth()` and `setHeight()`. ## Set Page Background We set the page background using a color fill. This demonstrates how to create and assign fills to blocks. ```typescript highlight=highlight-add-background // Set page background to light lavender color const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.94, g: 0.93, b: 0.98, a: 1.0 }); engine.block.setFill(page, backgroundFill); ``` We create a color fill using `createFill('color')`, set the color via `setColor()` with the `fill/color/value` property, then assign the fill to the page. ## Add Text Blocks Text blocks allow you to add and style text content. We demonstrate three different approaches to text sizing and styling. ### Create Text and Set Content Create a text block and set its content with `replaceText()`: ```typescript highlight=highlight-text-create // Add main headline text with bold Roboto font const headline = engine.block.create('text'); engine.block.replaceText( headline, 'Integrate\nCreative Editing\ninto your App' ); engine.block.setFont( headline, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(headline, 'text/lineHeight', 0.78); ``` ### Style Entire Text Block Apply styling to the entire text block using `toggleBoldFont()` and `setTextColor()`: ```typescript highlight=highlight-text-style-block // Make headline bold if (engine.block.canToggleBoldFont(headline)) { engine.block.toggleBoldFont(headline); } engine.block.setTextColor(headline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); ``` ### Enable Automatic Font Sizing Configure the text block to automatically scale its font size to fit within fixed dimensions: ```typescript highlight=highlight-text-auto-size // Set fixed container size and enable automatic font sizing engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Absolute'); engine.block.setWidth(headline, 960); engine.block.setHeight(headline, 300); engine.block.setBool(headline, 'text/automaticFontSizeEnabled', true); ``` ### Range-based Text Styling Apply different styles to specific character ranges within a single text block: ```typescript highlight=highlight-text-range-style // Style "in hours," - purple and italic (characters 0-9) engine.block.setTextColor( tagline, { r: 0.2, g: 0.2, b: 0.8, a: 1.0 }, 0, 9 ); if (engine.block.canToggleItalicFont(tagline, 0, 9)) { engine.block.toggleItalicFont(tagline, 0, 9); } // Style "not months." - black and bold (characters 10-21) engine.block.setTextColor( tagline, { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, 10, 21 ); if (engine.block.canToggleBoldFont(tagline, 10, 21)) { engine.block.toggleBoldFont(tagline, 10, 21); } ``` The range-based APIs accept start and end character indices: - `setTextColor(id, color, from, to)` - Apply color to a specific character range - `toggleBoldFont(id, from, to)` - Toggle bold styling for a range - `toggleItalicFont(id, from, to)` - Toggle italic styling for a range ### Fixed Font Size Set an explicit font size instead of using auto-sizing: ```typescript highlight=highlight-text-fixed-size // Add CTA text "Start a Free Trial" with bold font const ctaTitle = engine.block.create('text'); engine.block.replaceText(ctaTitle, 'Start a Free Trial'); engine.block.setFont( ctaTitle, ROBOTO_TYPEFACE.fonts[0].uri, ROBOTO_TYPEFACE ); engine.block.setFloat(ctaTitle, 'text/fontSize', 80); engine.block.setFloat(ctaTitle, 'text/lineHeight', 1.0); ``` ## Add Shapes We create shapes using graphic blocks. CE.SDK supports `rect`, `line`, `ellipse`, `polygon`, `star`, and `vector_path` shapes. ### Create a Shape Block Create a graphic block and assign a shape to it: ```typescript highlight=highlight-shape-create // Add horizontal divider line const dividerLine = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(dividerLine, lineShape); ``` ### Apply Fill to Shape Create a color fill and apply it to the shape: ```typescript highlight=highlight-shape-fill const lineFill = engine.block.createFill('color'); engine.block.setColor(lineFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(dividerLine, lineFill); ``` ## Add Images We add images using graphic blocks with image fills. ### Create an Image Block Create a graphic block with a rect shape and an image fill: ```typescript highlight=highlight-image-create // Add IMG.LY logo image const logo = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logo, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logo, logoFill); ``` We set the image URL via `setString()` with the `fill/image/imageFileURI` property. ## Position and Size Blocks All blocks use the same positioning and sizing APIs: ```typescript highlight=highlight-block-position engine.block.setContentFillMode(logo, 'Contain'); engine.block.setWidth(logo, 200); engine.block.setHeight(logo, 65); engine.block.setPositionX(logo, 820); engine.block.setPositionY(logo, 960); engine.block.appendChild(page, logo); ``` - `setWidth()` / `setHeight()` - Set block dimensions - `setPositionX()` / `setPositionY()` - Set block position - `setContentFillMode()` - Control how content fills the block (`Contain`, `Cover`, `Crop`) - `appendChild()` - Add the block to the page hierarchy ## Export the Composition CE.SDK provides two approaches for exporting compositions in browser environments. ### Export Using the Engine API The `engine.block.export()` method exports a block as a blob that you can use programmatically: ```typescript highlight=highlight-export-api // Export the composition to PNG const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1080, targetHeight: 1080 }); // In browser, create a download link const url = URL.createObjectURL(blob); console.log('Export complete. Download URL:', url); ``` In browser environments, you can create a download URL from the blob using `URL.createObjectURL()`. ### Export Using Built-in Actions Alternatively, use the built-in export panel or actions for a complete export dialog: ```typescript await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); ``` The export panel lets users choose format and settings interactively, while `cesdk.actions.run('export.page', options)` triggers export directly with specified options. ## Troubleshooting - **Blocks not appearing**: Verify that `appendChild()` attaches blocks to the page. Blocks must be part of the scene hierarchy to render. - **Text styling not applied**: Verify character indices are correct for range-based APIs. The indices are UTF-16 based. - **Image stretched**: Use `setContentFillMode(block, 'Contain')` to maintain the image's aspect ratio. - **Export fails**: Verify that page dimensions are set before export. The export requires valid dimensions. ## Next Steps - [Layer Management](https://img.ly/docs/cesdk/sveltekit/create-composition/layer-management-18f07a/) - Control block stacking and organization - [Positioning and Alignment](https://img.ly/docs/cesdk/sveltekit/insert-media/position-and-align-cc6b6a/) - Precise block placement - [Group and Ungroup](https://img.ly/docs/cesdk/sveltekit/create-composition/group-and-ungroup-62565a/) - Group blocks for unified transforms - [Blend Modes](https://img.ly/docs/cesdk/sveltekit/create-composition/blend-modes-ad3519/) - Control how blocks interact visually - [Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) - Export options and formats --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Templates" description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/create-templates/overview-4ebe30/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK. - [Create From Scratch](https://img.ly/docs/cesdk/sveltekit/create-templates/from-scratch-663cda/) - Build reusable design templates programmatically using CE.SDK's APIs. Create scenes, add text and graphic blocks, configure placeholders and variables, apply editing constraints, and save templates for reuse. - [Import Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/import-e50084/) - Load and import design templates into CE.SDK from URLs, archives, and serialized strings. - [Dynamic Content](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/) - Use variables and placeholders to inject dynamic data into templates at design or runtime. - [Lock the Template](https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/) - Restrict editing access to specific elements or properties in a template to enforce design rules. - [Edit or Remove Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/edit-or-remove-38a8be/) - Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources. - [Add to Template Library](https://img.ly/docs/cesdk/sveltekit/create-templates/add-to-template-library-8bfbc7/) - Save and organize templates in an asset source for users to browse and apply from the template library. - [Overview](https://img.ly/docs/cesdk/sveltekit/use-templates/overview-ae74e1/) - Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows. - [Template Library](https://img.ly/docs/cesdk/sveltekit/use-templates/library-b3c704/) - Learn how to provide a set of predefined templates in the CreativeEditor SDK. - [Apply a Template](https://img.ly/docs/cesdk/sveltekit/use-templates/apply-template-35c73e/) - Learn how to apply template scenes via API in the CreativeEditor SDK. - [Generate From Template](https://img.ly/docs/cesdk/sveltekit/use-templates/generate-334e15/) - Learn how to generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos. - [Replace Content](https://img.ly/docs/cesdk/sveltekit/use-templates/replace-content-4c482b/) - Learn how to dynamically replace content within templates using CE.SDK's placeholder and variable systems. - [Use Templates Programmatically](https://img.ly/docs/cesdk/sveltekit/use-templates/programmatic-9349f3/) - Work with templates programmatically through CE.SDK's engine APIs to load existing templates, build new templates from scratch, modify template structures, and populate templates with dynamic data for batch processing and automation. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Dynamic Content" description: "Use variables and placeholders to inject dynamic data into templates at design or runtime." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/) --- Dynamic content transforms static designs into flexible, data-driven templates. CE.SDK provides three complementary capabilities—text variables, placeholders, and editing constraints—that work together to enable personalization while maintaining design integrity.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-dynamic-content-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-dynamic-content-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-dynamic-content-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-add-dynamic-content-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Dynamic Content Overview * * Demonstrates the dynamic content capabilities in CE.SDK templates: * - Text Variables: Insert {{tokens}} that resolve to dynamic values * - Placeholders: Create drop zones for swappable images/videos * - Editing Constraints: Lock properties while allowing controlled changes */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Set editor role to Adopter for template usage engine.editor.setRole('Adopter'); const page = engine.block.findByType('page')[0]; // Content area: 480px wide, centered (left margin = 160px) const contentX = 160; const contentWidth = 480; // TEXT VARIABLES: Define variables for personalization engine.variable.setString('firstName', 'Jane'); engine.variable.setString('lastName', 'Doe'); engine.variable.setString('companyName', 'IMG.LY'); // Create heading with company variable const headingText = engine.block.create('text'); engine.block.replaceText( headingText, 'Welcome to {{companyName}}, {{firstName}} {{lastName}}.' ); engine.block.setWidth(headingText, contentWidth); engine.block.setHeightMode(headingText, 'Auto'); engine.block.setFloat(headingText, 'text/fontSize', 64); engine.block.setEnum(headingText, 'text/horizontalAlignment', 'Left'); engine.block.appendChild(page, headingText); engine.block.setPositionX(headingText, contentX); engine.block.setPositionY(headingText, 200); // Create description with bullet points const descriptionText = engine.block.create('text'); engine.block.replaceText( descriptionText, 'This example demonstrates dynamic templates.\n\n' + '• Text Variables — Personalize content with {{tokens}}\n' + '• Placeholders — Swappable images and media\n' + '• Editing Constraints — Protected brand elements' ); engine.block.setWidth(descriptionText, contentWidth); engine.block.setHeightMode(descriptionText, 'Auto'); engine.block.setFloat(descriptionText, 'text/fontSize', 44); engine.block.setEnum(descriptionText, 'text/horizontalAlignment', 'Left'); engine.block.appendChild(page, descriptionText); engine.block.setPositionX(descriptionText, contentX); engine.block.setPositionY(descriptionText, 300); // Discover all variables in the scene const allVariables = engine.variable.findAll(); console.log('Variables in scene:', allVariables); // PLACEHOLDERS: Create hero image as a swappable drop zone const heroImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: contentWidth, height: 140 } } ); engine.block.appendChild(page, heroImage); engine.block.setPositionX(heroImage, contentX); engine.block.setPositionY(heroImage, 40); // Enable placeholder behavior for the hero image if (engine.block.supportsPlaceholderBehavior(heroImage)) { engine.block.setPlaceholderBehaviorEnabled(heroImage, true); engine.block.setPlaceholderEnabled(heroImage, true); if (engine.block.supportsPlaceholderControls(heroImage)) { engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true); engine.block.setPlaceholderControlsButtonEnabled(heroImage, true); } } // Find all placeholders in the scene const placeholders = engine.block.findAllPlaceholders(); console.log('Placeholders in scene:', placeholders.length); // EDITING CONSTRAINTS: Add logo that cannot be moved or selected const logo = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 100, height: 25 } } ); engine.block.appendChild(page, logo); engine.block.setPositionX(logo, 350); engine.block.setPositionY(logo, 540); // Lock the logo: prevent moving, resizing, and selection engine.block.setScopeEnabled(logo, 'layer/move', false); engine.block.setScopeEnabled(logo, 'layer/resize', false); engine.block.setScopeEnabled(logo, 'editor/select', false); // Verify constraints are applied const canSelect = engine.block.isScopeEnabled(logo, 'editor/select'); const canMove = engine.block.isScopeEnabled(logo, 'layer/move'); console.log('Logo - canSelect:', canSelect, 'canMove:', canMove); // Zoom to fit the page with autoFit enabled await cesdk.actions.run('zoom.toBlock', page, { padding: 40, animate: false, autoFit: true }); console.log('Dynamic Content demo initialized.'); cesdk.engine.block.setSelected(page, false); } } export default Example; ``` This guide covers how to use dynamic content capabilities in CE.SDK templates. The example creates a social media card with personalized name and company variables, a replaceable hero image, and a protected logo. ## Dynamic Content Capabilities CE.SDK offers three ways to make templates dynamic: - **Text Variables** — Insert `{{tokens}}` in text that resolve to dynamic values at runtime - **Placeholders** — Mark blocks as drop zones where users can swap images or videos - **Editing Constraints** — Lock specific properties to protect brand elements while allowing controlled changes ## Text Variables Text variables enable data-driven text personalization. Define variables using `engine.variable.setString()`, then reference them in text blocks with `{{variableName}}` tokens. ```typescript highlight-text-variables engine.variable.setString('firstName', 'Jane'); engine.variable.setString('lastName', 'Doe'); engine.variable.setString('companyName', 'IMG.LY'); // Create heading with company variable const headingText = engine.block.create('text'); engine.block.replaceText( headingText, 'Welcome to {{companyName}}, {{firstName}} {{lastName}}.' ); ``` Variables are defined globally and can be referenced in any text block. The `findAll()` method returns all variable keys in the scene, useful for building dynamic editing interfaces. > **Note:** Variable keys are case-sensitive. `{{Name}}` and `{{name}}` are different variables. ## Placeholders Placeholders turn design blocks into drop zones for swappable media. Mark an image block as a placeholder, and users can replace its content while the surrounding design remains fixed. ```typescript highlight-placeholders // Enable placeholder behavior for the hero image if (engine.block.supportsPlaceholderBehavior(heroImage)) { engine.block.setPlaceholderBehaviorEnabled(heroImage, true); engine.block.setPlaceholderEnabled(heroImage, true); if (engine.block.supportsPlaceholderControls(heroImage)) { engine.block.setPlaceholderControlsOverlayEnabled(heroImage, true); engine.block.setPlaceholderControlsButtonEnabled(heroImage, true); } } ``` Enable placeholder behavior with `setPlaceholderBehaviorEnabled()`, then enable user interaction with `setPlaceholderEnabled()`. The visual overlay and replace button are controlled separately via `setPlaceholderControlsOverlayEnabled()` and `setPlaceholderControlsButtonEnabled()`. ## Editing Constraints Editing constraints protect design integrity by limiting what users can modify. Use scope-based APIs to lock specific properties while keeping others editable. ```typescript highlight-editing-constraints // Lock the logo: prevent moving, resizing, and selection engine.block.setScopeEnabled(logo, 'layer/move', false); engine.block.setScopeEnabled(logo, 'layer/resize', false); engine.block.setScopeEnabled(logo, 'editor/select', false); // Verify constraints are applied const canSelect = engine.block.isScopeEnabled(logo, 'editor/select'); const canMove = engine.block.isScopeEnabled(logo, 'layer/move'); console.log('Logo - canSelect:', canSelect, 'canMove:', canMove); ``` The `setScopeEnabled()` method controls individual properties. Setting `'editor/select'` to `false` prevents users from selecting the block entirely, making it completely non-interactive. Combined with `'layer/move'` and `'layer/resize'`, this creates a fully protected element. ## Choosing the Right Capability | Need | Capability | | --- | --- | | Dynamic text content | Text Variables | | Swappable images/videos | Placeholders | | Lock specific properties | Editing Constraints | ## API Reference | Method | Description | | --- | --- | | `engine.editor.setRole()` | Set user role (Creator, Adopter, Viewer) | | `engine.variable.findAll()` | Get all variable keys in the scene | | `engine.variable.setString()` | Create or update a text variable | | `engine.variable.getString()` | Read a variable's current value | | `engine.block.supportsPlaceholderBehavior()` | Check placeholder support | | `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior | | `engine.block.setPlaceholderEnabled()` | Enable user interaction | | `engine.block.findAllPlaceholders()` | Find all placeholder blocks | | `engine.block.setScopeEnabled()` | Enable or disable editing scope | | `engine.block.isScopeEnabled()` | Query scope state | --- ## Related Pages - [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) - Define dynamic text elements that can be populated with custom values during design generation. - [Placeholders](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) - Use placeholders to mark editable image, video, or text areas within a locked template layout. - [Set Editing Constraints](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) - Learn how to control editing capabilities in CE.SDK templates using the Scope system to lock positions, prevent transformations, and create guided editing experiences --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Placeholders" description: "Use placeholders to mark editable image, video, or text areas within a locked template layout." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/) > [Placeholders](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) --- Placeholders turn design blocks into drop-zones that users can swap content into while maintaining full control over layout and styling.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-placeholders-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-placeholders-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-dynamic-content-placeholders-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-placeholders-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Dynamic Content Placeholders * * This example demonstrates three different placeholder configurations: * 1. All placeholder controls enabled (all scopes + behavior + controls) * 2. Fill properties only (fill scopes + behavior + controls) * 3. No placeholder features (default state) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1200, height: 800, unit: 'Pixel' } }); const engine = cesdk.engine; engine.editor.setRole('Adopter'); // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page dimensions for horizontal layout const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Layout configuration for 3 blocks horizontally const blockWidth = 300; const blockHeight = 300; const spacing = 50; const startX = (pageWidth - blockWidth * 3 - spacing * 2) / 2; const blockY = (pageHeight - blockHeight) / 2 + 40; // Offset for labels const labelY = blockY - 50; // Sample images const imageUri1 = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageUri2 = 'https://img.ly/static/ubq_samples/sample_2.jpg'; const imageUri3 = 'https://img.ly/static/ubq_samples/sample_3.jpg'; // Define ALL available scopes for reference const allScopes: Array< | 'text/edit' | 'text/character' | 'fill/change' | 'fill/changeType' | 'stroke/change' | 'shape/change' | 'layer/move' | 'layer/resize' | 'layer/rotate' | 'layer/flip' | 'layer/crop' | 'layer/opacity' | 'layer/blendMode' | 'layer/visibility' | 'layer/clipping' | 'appearance/adjustments' | 'appearance/filter' | 'appearance/effect' | 'appearance/blur' | 'appearance/shadow' | 'appearance/animation' | 'lifecycle/destroy' | 'lifecycle/duplicate' | 'editor/add' | 'editor/select' > = [ 'text/edit', 'text/character', 'fill/change', 'fill/changeType', 'stroke/change', 'shape/change', 'layer/move', 'layer/resize', 'layer/rotate', 'layer/flip', 'layer/crop', 'layer/opacity', 'layer/blendMode', 'layer/visibility', 'layer/clipping', 'appearance/adjustments', 'appearance/filter', 'appearance/effect', 'appearance/blur', 'appearance/shadow', 'appearance/animation', 'lifecycle/destroy', 'lifecycle/duplicate', 'editor/add', 'editor/select' ]; // Block 1: All Placeholder Controls Enabled const block1 = await engine.block.addImage(imageUri1, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block1); engine.block.setPositionX(block1, startX); engine.block.setPositionY(block1, blockY); // Step 1: Explicitly disable ALL scopes first allScopes.forEach((scope) => { engine.block.setScopeEnabled(block1, scope, false); }); // Step 2: Enable specific scopes for full placeholder functionality // General/Layer options engine.block.setScopeEnabled(block1, 'layer/opacity', true); engine.block.setScopeEnabled(block1, 'layer/blendMode', true); engine.block.setScopeEnabled(block1, 'lifecycle/duplicate', true); engine.block.setScopeEnabled(block1, 'lifecycle/destroy', true); // Arrange scopes engine.block.setScopeEnabled(block1, 'layer/move', true); engine.block.setScopeEnabled(block1, 'layer/resize', true); engine.block.setScopeEnabled(block1, 'layer/rotate', true); engine.block.setScopeEnabled(block1, 'layer/flip', true); // Fill scopes (for image replacement and cropping) engine.block.setScopeEnabled(block1, 'fill/change', true); engine.block.setScopeEnabled(block1, 'fill/changeType', true); engine.block.setScopeEnabled(block1, 'layer/crop', true); // Appearance scopes engine.block.setScopeEnabled(block1, 'appearance/adjustments', true); engine.block.setScopeEnabled(block1, 'appearance/filter', true); engine.block.setScopeEnabled(block1, 'appearance/effect', true); engine.block.setScopeEnabled(block1, 'appearance/blur', true); engine.block.setScopeEnabled(block1, 'appearance/shadow', true); engine.block.setScopeEnabled(block1, 'appearance/animation', true); engine.block.setScopeEnabled(block1, 'editor/select', true); // Step 3: Enable placeholder behavior ("Act as a placeholder") // This makes the block interactive in Adopter mode engine.block.setPlaceholderEnabled(block1, true); // Step 4: Check if block/fill supports placeholder features const fill1 = engine.block.getFill(block1); const supportsBehavior = engine.block.supportsPlaceholderBehavior(fill1); const supportsControls = engine.block.supportsPlaceholderControls(block1); // Enable placeholder behavior on the fill (for graphic blocks) if (supportsBehavior) { engine.block.setPlaceholderBehaviorEnabled(fill1, true); } // Enable placeholder overlay pattern if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); } // Enable placeholder button if (supportsControls) { engine.block.setPlaceholderControlsButtonEnabled(block1, true); } // Complete "Act as Placeholder" setup const fillForConfig = engine.block.getFill(block1); if (engine.block.supportsPlaceholderBehavior(fillForConfig)) { engine.block.setPlaceholderBehaviorEnabled(fillForConfig, true); } if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); engine.block.setPlaceholderControlsButtonEnabled(block1, true); } // Block 2: Fill Properties Only const block2 = await engine.block.addImage(imageUri2, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block2); engine.block.setPositionX(block2, startX + blockWidth + spacing); engine.block.setPositionY(block2, blockY); // Batch operation: Apply settings to multiple blocks const graphicBlocks = [block1, block2]; graphicBlocks.forEach((block) => { // Enable placeholder for each block engine.block.setPlaceholderEnabled(block, true); const fill = engine.block.getFill(block); if (engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } }); // Step 1: Explicitly disable ALL scopes first allScopes.forEach((scope) => { engine.block.setScopeEnabled(block2, scope, false); }); // Step 2: Enable ONLY fill-related scopes engine.block.setScopeEnabled(block2, 'fill/change', true); engine.block.setScopeEnabled(block2, 'fill/changeType', true); engine.block.setScopeEnabled(block2, 'layer/crop', true); engine.block.setScopeEnabled(block2, 'editor/select', true); // Step 3: Enable placeholder behavior ("Act as a placeholder") engine.block.setPlaceholderEnabled(block2, true); // Step 4: Enable fill-based placeholder behavior and visual controls const fill2 = engine.block.getFill(block2); if (engine.block.supportsPlaceholderBehavior(fill2)) { engine.block.setPlaceholderBehaviorEnabled(fill2, true); } if (engine.block.supportsPlaceholderControls(block2)) { engine.block.setPlaceholderControlsOverlayEnabled(block2, true); engine.block.setPlaceholderControlsButtonEnabled(block2, true); } // Block 3: No Placeholder Features (Default State) const block3 = await engine.block.addImage(imageUri3, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, block3); engine.block.setPositionX(block3, startX + (blockWidth + spacing) * 2); engine.block.setPositionY(block3, blockY); // Explicitly disable ALL scopes to ensure default state allScopes.forEach((scope) => { engine.block.setScopeEnabled(block3, scope, false); }); // No placeholder behavior enabled - this block remains non-interactive // Add descriptive labels above each block const labelConfig = { height: 40, fontSize: 34, fontUri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf', fontFamily: 'Roboto' }; // Label for Block 1 const label1 = engine.block.create('text'); engine.block.appendChild(page, label1); engine.block.setPositionX(label1, startX); engine.block.setPositionY(label1, labelY); engine.block.setWidth(label1, blockWidth); engine.block.setHeight(label1, labelConfig.height); engine.block.replaceText(label1, 'All Controls'); engine.block.setTextColor(label1, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label1, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label1, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label1, 'text/horizontalAlignment', 'Center'); // Label for Block 2 const label2 = engine.block.create('text'); engine.block.appendChild(page, label2); engine.block.setPositionX(label2, startX + blockWidth + spacing); engine.block.setPositionY(label2, labelY); engine.block.setWidth(label2, blockWidth); engine.block.setHeight(label2, labelConfig.height); engine.block.replaceText(label2, 'Fill Only'); engine.block.setTextColor(label2, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label2, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label2, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label2, 'text/horizontalAlignment', 'Center'); // Label for Block 3 const label3 = engine.block.create('text'); engine.block.appendChild(page, label3); engine.block.setPositionX(label3, startX + (blockWidth + spacing) * 2); engine.block.setPositionY(label3, labelY); engine.block.setWidth(label3, blockWidth); engine.block.setHeight(label3, labelConfig.height); engine.block.replaceText(label3, 'Disabled'); engine.block.setTextColor(label3, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); engine.block.setFont(label3, labelConfig.fontUri, { name: labelConfig.fontFamily, fonts: [ { uri: labelConfig.fontUri, subFamily: 'Bold' } ] }); engine.block.setFloat(label3, 'text/fontSize', labelConfig.fontSize); engine.block.setEnum(label3, 'text/horizontalAlignment', 'Center'); // Verify configurations // eslint-disable-next-line no-console console.log('Block 1 - All Controls:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block1) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block1, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - layer/resize:', engine.block.isScopeEnabled(block1, 'layer/resize') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block1, 'fill/change') ); // eslint-disable-next-line no-console console.log( ' - layer/crop:', engine.block.isScopeEnabled(block1, 'layer/crop') ); // eslint-disable-next-line no-console console.log( ' - appearance/adjustments:', engine.block.isScopeEnabled(block1, 'appearance/adjustments') ); // eslint-disable-next-line no-console console.log('\nBlock 2 - Fill Only:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block2) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block2, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block2, 'fill/change') ); // eslint-disable-next-line no-console console.log( ' - fill/changeType:', engine.block.isScopeEnabled(block2, 'fill/changeType') ); // eslint-disable-next-line no-console console.log( ' - layer/crop:', engine.block.isScopeEnabled(block2, 'layer/crop') ); // eslint-disable-next-line no-console console.log('\nBlock 3 - Disabled:'); // eslint-disable-next-line no-console console.log( ' Placeholder enabled:', engine.block.isPlaceholderEnabled(block3) ); // eslint-disable-next-line no-console console.log(' Scopes enabled:'); // eslint-disable-next-line no-console console.log( ' - layer/move:', engine.block.isScopeEnabled(block3, 'layer/move') ); // eslint-disable-next-line no-console console.log( ' - fill/change:', engine.block.isScopeEnabled(block3, 'fill/change') ); // eslint-disable-next-line no-console console.log('\nPlaceholder configurations initialized successfully'); } } export default Example; ``` This guide covers placeholder fundamentals, checking support, enabling behavior, and configuring visual controls for graphic and text blocks. ## Placeholder Fundamentals Placeholders convert design blocks into interactive drop-zones where users can swap content while maintaining layout and styling control. ### Two Distinct Features **Placeholder behavior** enables drag-and-drop replacement and exposes scope checks for content validation. **Placeholder controls** provide visual affordances: an overlay pattern and a "Replace" button for guided interaction. ### Block-Level vs Fill-Level Behavior The key distinction in placeholder implementation depends on block type: **For graphic blocks** (images/videos): Placeholder behavior is enabled on the **fill**, while controls are enabled on the **block**. This pattern reflects how graphic blocks contain fills that can be replaced. **For text blocks**: Placeholder behavior and controls are both enabled directly on the **block**. We can check support with `supportsPlaceholderBehavior()` for both blocks and fills, and `supportsPlaceholderControls()` for blocks. ## Checking Placeholder Support Before enabling placeholder features, check if a block supports them: ```typescript highlight-check-support // Step 4: Check if block/fill supports placeholder features const fill1 = engine.block.getFill(block1); const supportsBehavior = engine.block.supportsPlaceholderBehavior(fill1); const supportsControls = engine.block.supportsPlaceholderControls(block1); ``` The `supportsPlaceholderBehavior()` method indicates whether a block can become a drop-zone. The `supportsPlaceholderControls()` method shows if visual controls (overlay and button) are available. ## Enabling Placeholder Behavior To convert a block into a placeholder drop-zone, enable placeholder behavior. The approach differs based on block type. ### For Graphic Blocks (Images/Videos) For graphic blocks, placeholder behavior must be enabled on the **fill**, not the block itself: ```typescript highlight-enable-behavior // Enable placeholder behavior on the fill (for graphic blocks) if (supportsBehavior) { engine.block.setPlaceholderBehaviorEnabled(fill1, true); } ``` This pattern is critical: `setPlaceholderBehaviorEnabled()` is called on the fill obtained from `block.getFill()`. This reflects the underlying architecture where graphic blocks contain replaceable fills. ### For Text Blocks For text blocks, placeholder behavior is enabled directly on the block, as text blocks don't use fills in the same way. We can verify placeholder behavior state with `isPlaceholderBehaviorEnabled()` on the appropriate target (fill for graphics, block for text). ## Enabling Adopter Mode Interaction Placeholder behavior alone isn't enough - blocks must also be enabled for interaction in Adopter mode: ```typescript highlight-enable-adopter-mode // Step 3: Enable placeholder behavior ("Act as a placeholder") // This makes the block interactive in Adopter mode engine.block.setPlaceholderEnabled(block1, true); ``` The `setPlaceholderEnabled()` method controls whether the placeholder is interactive for users in Adopter role. CE.SDK distinguishes Creator (full access) and Adopter (replace-only) roles. ### Automatic Management In practice, `setPlaceholderEnabled()` is typically managed automatically by the editor: when you enable relevant scopes (like `fill/change` for graphics or `text/edit` for text), the placeholder interaction is automatically enabled. When all scopes are disabled, placeholder interaction is automatically disabled. This automatic behavior simplifies template creation workflows. ## Configuring Visual Feedback Placeholders can display visual indicators to guide users through the replacement workflow. ### Combined Setup: The "Act as Placeholder" Pattern In the CE.SDK UI, the "Act as Placeholder" checkbox enables placeholder behavior and both visual controls simultaneously. This combined pattern is the recommended approach: ```typescript highlight-full-configuration // Complete "Act as Placeholder" setup const fillForConfig = engine.block.getFill(block1); if (engine.block.supportsPlaceholderBehavior(fillForConfig)) { engine.block.setPlaceholderBehaviorEnabled(fillForConfig, true); } if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); engine.block.setPlaceholderControlsButtonEnabled(block1, true); } ``` This pattern ensures placeholder behavior is enabled on the appropriate target (fill for graphics, block for text) along with both visual controls on the block. ### Individual Control Options Visual controls can also be managed independently if needed: **Overlay Pattern** - The overlay shows a dotted surface indicating a drop-zone: ```typescript highlight-enable-overlay // Enable placeholder overlay pattern if (supportsControls) { engine.block.setPlaceholderControlsOverlayEnabled(block1, true); } ``` **Replace Button** - The button provides a single-tap entry point for touch devices: ```typescript highlight-enable-button // Enable placeholder button if (supportsControls) { engine.block.setPlaceholderControlsButtonEnabled(block1, true); } ``` Individual control is useful when you want specific visual feedback without the full placeholder workflow. ## Scope Requirements and Dependencies Placeholders depend on specific scopes being enabled to function correctly. Understanding these dependencies prevents common configuration errors. For graphic blocks (images/videos), the `fill/change` scope must be enabled before placeholder behavior will work. When you disable `fill/change`, the editor automatically disables placeholder behavior and controls to maintain consistency. For text blocks, the `text/edit` scope must be enabled before placeholder behavior can function. **Optional related scopes** that enhance placeholder functionality: - `fill/changeType` - Allows changing between image, video, and solid color fills - `layer/crop` - Enables cropping replacement images - `text/character` - Allows font and character formatting for text placeholders ## Working with Multiple Placeholders When creating templates with multiple placeholders, apply settings systematically: ```typescript highlight-batch-operation // Batch operation: Apply settings to multiple blocks const graphicBlocks = [block1, block2]; graphicBlocks.forEach((block) => { // Enable placeholder for each block engine.block.setPlaceholderEnabled(block, true); const fill = engine.block.getFill(block); if (engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } }); ``` This pattern works well for collage templates, product showcases, or any layout requiring multiple content slots. ## API Reference | Method | Description | |--------|-------------| | `engine.block.supportsPlaceholderBehavior()` | Checks whether the block supports placeholder behavior | | `engine.block.setPlaceholderBehaviorEnabled()` | Enables or disables placeholder behavior for a block | | `engine.block.isPlaceholderBehaviorEnabled()` | Queries whether placeholder behavior is enabled | | `engine.block.setPlaceholderEnabled()` | Enables or disables placeholder interaction in Adopter mode | | `engine.block.isPlaceholderEnabled()` | Queries whether placeholder interaction is enabled | | `engine.block.supportsPlaceholderControls()` | Checks whether the block supports placeholder controls | | `engine.block.setPlaceholderControlsOverlayEnabled()` | Enables or disables the placeholder overlay pattern | | `engine.block.isPlaceholderControlsOverlayEnabled()` | Queries whether the overlay pattern is shown | | `engine.block.setPlaceholderControlsButtonEnabled()` | Enables or disables the placeholder button | | `engine.block.isPlaceholderControlsButtonEnabled()` | Queries whether the placeholder button is shown | ## Next Steps - [Lock the Template](https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/) - Restrict editing access to specific elements or properties to enforce design rules - [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) - Define dynamic text elements that can be populated with custom values --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Set Editing Constraints" description: "Learn how to control editing capabilities in CE.SDK templates using the Scope system to lock positions, prevent transformations, and create guided editing experiences" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/set-editing-constraints-c892c0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/) > [Set Editing Constraints](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) --- Control what users can edit in templates by setting fine-grained permissions on individual blocks or globally across your scene using CE.SDK's Scope system.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-set-editing-constraints-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-set-editing-constraints-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-dynamic-content-set-editing-constraints-browser/) Editing constraints in CE.SDK allow you to lock specific properties of design elements while keeping others editable. The Scope system provides granular control over 20+ editing capabilities including movement, resizing, rotation, fill changes, text editing, and lifecycle operations. ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-set-editing-constraints-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Set Editing Constraints Guide * * This example demonstrates: * - Setting global scopes to respect block-level settings * - Disabling move scope to lock position * - Disabling lifecycle scopes to prevent deletion */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene await cesdk.actions.run('scene.create', { page: { width: 1200, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background color const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // ===== Configure Global Scopes ===== // Set global scopes to 'Defer' to respect block-level scope settings // Without this, global 'Allow' settings might override block-level restrictions engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer'); // Global scope modes: // - 'Allow': Always allow (overrides block-level settings) // - 'Deny': Always deny (overrides block-level settings) // - 'Defer': Use block-level settings (respects setScopeEnabled) // Calculate layout for 4 examples (2x2 grid) const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const margin = 40; const spacing = 20; const blockWidth = (pageWidth - margin * 2 - spacing) / 2; const blockHeight = (pageHeight - margin * 2 - spacing) / 2; const getPosition = (index: number) => { const col = index % 2; const row = Math.floor(index / 2); return { x: margin + col * (blockWidth + spacing), y: margin + row * (blockHeight + spacing) }; }; // Helper function to create a labeled example block const createExampleBlock = ( labelText: string, backgroundColor: { r: number; g: number; b: number }, applyScopesCallback?: (blockId: number) => void ): number => { // Create container block const block = engine.block.create('graphic'); const shape = engine.block.createShape('rect'); engine.block.setShape(block, shape); engine.block.setWidth(block, blockWidth); engine.block.setHeight(block, blockHeight); // Set background color const fill = engine.block.createFill('color'); engine.block.setFill(block, fill); engine.block.setColor(fill, 'fill/color/value', { ...backgroundColor, a: 1.0 }); // Add label text const textBlock = engine.block.create('text'); engine.block.setWidth(textBlock, blockWidth * 0.85); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setString(textBlock, 'text/text', labelText); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setFloat(textBlock, 'text/fontSize', 36); // Append text to get dimensions engine.block.appendChild(block, textBlock); // Center text in container const textWidth = engine.block.getWidth(textBlock); const textHeight = engine.block.getHeight(textBlock); engine.block.setPositionX(textBlock, (blockWidth - textWidth) / 2); engine.block.setPositionY(textBlock, (blockHeight - textHeight) / 2); // Set text color to white const textFill = engine.block.createFill('color'); engine.block.setFill(textBlock, textFill); engine.block.setColor(textFill, 'fill/color/value', { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Apply scope configuration to both blocks if (applyScopesCallback) { applyScopesCallback(block); applyScopesCallback(textBlock); } // Append container to page engine.block.appendChild(page, block); return block; }; // ===== Example 1: Lock Position (Disable Move Scope) ===== const disableMoveScope = (block: number) => { // Disable move scope engine.block.setScopeEnabled(block, 'layer/move', false); // Explicitly enable other transform scopes engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true); }; const moveLockedBlock = createExampleBlock( 'Locked\nposition', { r: 0.5, g: 0.75, b: 0.9 }, disableMoveScope ); // Block position is locked - users cannot move or reposition it // Other scopes are explicitly enabled: resizing, rotation, flipping, deletion, duplication // ===== Example 2: Prevent Deletion (Disable Lifecycle Scopes) ===== const disableLifecycleScopes = (block: number) => { // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Explicitly enable transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); }; const lifecycleLockedBlock = createExampleBlock( 'Cannot\ndelete', { r: 0.75, g: 0.75, b: 0.75 }, disableLifecycleScopes ); // Block cannot be deleted or duplicated // Other scopes are explicitly enabled: moving, resizing, rotation, flipping // ===== Example 3: All Scopes Enabled ===== const enableAllScopes = (block: number) => { // Explicitly enable all transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true); // Explicitly enable fill scopes engine.block.setScopeEnabled(block, 'fill/change', true); engine.block.setScopeEnabled(block, 'fill/changeType', true); // Explicitly enable text scopes engine.block.setScopeEnabled(block, 'text/edit', true); engine.block.setScopeEnabled(block, 'text/character', true); }; const fullyEditableBlock = createExampleBlock( 'Fully\neditable', { r: 0.5, g: 0.85, b: 0.5 }, enableAllScopes ); // All scopes are explicitly enabled - users have full editing capabilities // This is the default behavior, but explicitly enabling shows clear intent // ===== Example 4: All Scopes Disabled ===== const disableAllScopes = (block: number) => { // Disable all transform scopes engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); engine.block.setScopeEnabled(block, 'layer/rotate', false); engine.block.setScopeEnabled(block, 'layer/flip', false); engine.block.setScopeEnabled(block, 'layer/crop', false); // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Disable fill scopes engine.block.setScopeEnabled(block, 'fill/change', false); engine.block.setScopeEnabled(block, 'fill/changeType', false); engine.block.setScopeEnabled(block, 'stroke/change', false); // Disable text scopes engine.block.setScopeEnabled(block, 'text/edit', false); engine.block.setScopeEnabled(block, 'text/character', false); // Disable shape scopes engine.block.setScopeEnabled(block, 'shape/change', false); // Disable editor scopes engine.block.setScopeEnabled(block, 'editor/select', false); // Disable appearance scopes engine.block.setScopeEnabled(block, 'layer/opacity', false); engine.block.setScopeEnabled(block, 'layer/blendMode', false); engine.block.setScopeEnabled(block, 'layer/visibility', false); }; const fullyLockedBlock = createExampleBlock( 'Fully\nlocked', { r: 0.9, g: 0.5, b: 0.5 }, disableAllScopes ); // All scopes are disabled - block is completely locked and cannot be edited // Useful for watermarks, logos, or legal disclaimers // ===== Block-Level Scope Setting Example ===== // Check if a scope is enabled for a specific block const canMove = engine.block.isScopeEnabled(moveLockedBlock, 'layer/move'); const canDelete = engine.block.isScopeEnabled( lifecycleLockedBlock, 'lifecycle/destroy' ); const canEditFully = engine.block.isScopeEnabled( fullyEditableBlock, 'layer/move' ); const canEditLocked = engine.block.isScopeEnabled( fullyLockedBlock, 'layer/move' ); // eslint-disable-next-line no-console console.log('Move-locked block - layer/move enabled:', canMove); // false // eslint-disable-next-line no-console console.log( 'Lifecycle-locked block - lifecycle/destroy enabled:', canDelete ); // false // eslint-disable-next-line no-console console.log('Fully editable block - layer/move enabled:', canEditFully); // true // eslint-disable-next-line no-console console.log('Fully locked block - layer/move enabled:', canEditLocked); // false // Position blocks in 2x2 grid const blocks = [ fullyEditableBlock, moveLockedBlock, lifecycleLockedBlock, fullyLockedBlock ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Deselect all blocks engine.block.findAllSelected().forEach((block) => { engine.block.setSelected(block, false); }); // Zoom to fit content await engine.scene.zoomToBlock(page, { padding: 50, animate: false }); // Log instructions // eslint-disable-next-line no-console console.log(` === Editing Constraints Demo === Try interacting with the 4 examples (arranged in 2x2 grid): Top row: 1. "Fully editable" (green): All scopes enabled - complete editing freedom 2. "Locked position" (light blue): Cannot move, but can resize/edit/delete Bottom row: 3. "Cannot delete" (light grey): Cannot delete/duplicate, but can move/resize/edit 4. "Fully locked" (red): All scopes disabled - completely locked Note: Global scopes are set to 'Defer' to respect block-level settings. `); } } export default Example; ``` This guide demonstrates how to apply editing constraints to create brand templates, guided editing experiences, and form-based workflows. ## Understanding Scopes ### What are Scopes? A scope is a permission key that controls a specific editing capability in CE.SDK. Each scope represents a distinct action users can perform, such as moving blocks (`'layer/move'`), changing fills (`'fill/change'`), or editing text content (`'text/edit'`). By enabling or disabling scopes, you control exactly what users can and cannot do with each design element. Scopes exist at two levels: - **Block-level scopes**: Per-block permissions set using `setScopeEnabled()` - **Global scopes**: Default behavior for all blocks set using `setGlobalScope()` ### Available Scope Categories CE.SDK provides scopes organized into logical categories: | Category | Purpose | Example Scopes | | --- | --- | --- | | **Text Editing** | Control text content and formatting | `text/edit`, `text/character` | | **Fill & Stroke** | Manage colors and gradients | `fill/change`, `fill/changeType`, `stroke/change` | | **Shape** | Modify shape properties | `shape/change` | | **Layer Transform** | Control position and dimensions | `layer/move`, `layer/resize`, `layer/rotate`, `layer/flip`, `layer/crop` | | **Layer Appearance** | Manage visual properties | `layer/opacity`, `layer/blendMode`, `layer/visibility` | | **Effects & Filters** | Apply visual effects | `appearance/adjustments`, `appearance/filter`, `appearance/effect`, `appearance/blur`, `appearance/shadow` | | **Lifecycle** | Control creation and deletion | `lifecycle/destroy`, `lifecycle/duplicate` | | **Editor** | Manage scene-level actions | `editor/add`, `editor/select` | ## Scope Configuration ### Global Scope Modes Global scopes set the default behavior for all blocks in the scene. They have three modes: - **Allow**: Always allow the action, overriding block-level settings - **Deny**: Always deny the action, overriding block-level settings - **Defer**: Use block-level settings (default mode) To ensure block-level scope settings are respected, set relevant global scopes to 'Defer': ```typescript highlight=highlight-global-scopes // Set global scopes to 'Defer' to respect block-level scope settings // Without this, global 'Allow' settings might override block-level restrictions engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); engine.editor.setGlobalScope('lifecycle/destroy', 'Defer'); engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer'); // Global scope modes: // - 'Allow': Always allow (overrides block-level settings) // - 'Deny': Always deny (overrides block-level settings) // - 'Defer': Use block-level settings (respects setScopeEnabled) ``` Without setting global scopes to 'Defer', default 'Allow' settings might override your block-level restrictions. This is essential when applying fine-grained constraints. ### Scope Resolution Priority When both global and block-level scopes are set, they resolve in this order: 1. **Global Deny** takes highest priority (action always denied) 2. **Global Allow** takes second priority (action always allowed) 3. **Global Defer** defers to block-level settings (default behavior) ## Setting Block-Level Constraints ### Locking Position Prevent users from moving or repositioning a block while allowing other edits: ```typescript highlight=highlight-disable-move-scope const disableMoveScope = (block: number) => { // Disable move scope engine.block.setScopeEnabled(block, 'layer/move', false); // Explicitly enable other transform scopes engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); // Explicitly enable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', true); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', true); }; const moveLockedBlock = createExampleBlock( 'Locked\nposition', { r: 0.5, g: 0.75, b: 0.9 }, disableMoveScope ); // Block position is locked - users cannot move or reposition it // Other scopes are explicitly enabled: resizing, rotation, flipping, deletion, duplication ``` The block position is locked—users cannot move or reposition it. Other scopes remain enabled, allowing resizing, editing, and deletion. This pattern maintains layout integrity while allowing content updates. ### Preventing Deletion Protect blocks from being deleted or duplicated: ```typescript highlight=highlight-disable-lifecycle-scopes const disableLifecycleScopes = (block: number) => { // Disable lifecycle scopes engine.block.setScopeEnabled(block, 'lifecycle/destroy', false); engine.block.setScopeEnabled(block, 'lifecycle/duplicate', false); // Explicitly enable transform scopes engine.block.setScopeEnabled(block, 'layer/move', true); engine.block.setScopeEnabled(block, 'layer/resize', true); engine.block.setScopeEnabled(block, 'layer/rotate', true); engine.block.setScopeEnabled(block, 'layer/flip', true); }; const lifecycleLockedBlock = createExampleBlock( 'Cannot\ndelete', { r: 0.75, g: 0.75, b: 0.75 }, disableLifecycleScopes ); // Block cannot be deleted or duplicated // Other scopes are explicitly enabled: moving, resizing, rotation, flipping ``` Users cannot delete or duplicate the block but can still move, resize, and edit it. Use this for essential template elements that must remain present. ### Checking Scope State Query the current state of any scope for a block: ```typescript highlight=highlight-block-level-scope-check // Check if a scope is enabled for a specific block const canMove = engine.block.isScopeEnabled(moveLockedBlock, 'layer/move'); const canDelete = engine.block.isScopeEnabled( lifecycleLockedBlock, 'lifecycle/destroy' ); const canEditFully = engine.block.isScopeEnabled( fullyEditableBlock, 'layer/move' ); const canEditLocked = engine.block.isScopeEnabled( fullyLockedBlock, 'layer/move' ); // eslint-disable-next-line no-console console.log('Move-locked block - layer/move enabled:', canMove); // false // eslint-disable-next-line no-console console.log( 'Lifecycle-locked block - lifecycle/destroy enabled:', canDelete ); // false // eslint-disable-next-line no-console console.log('Fully editable block - layer/move enabled:', canEditFully); // true // eslint-disable-next-line no-console console.log('Fully locked block - layer/move enabled:', canEditLocked); // false ``` Use `isScopeEnabled()` to check the block-level setting. This returns whether the scope is enabled at the block level, but doesn't consider global scope settings. ### Checking Effective Permissions Check the effective permission considering both block and global settings: ```typescript // Check if scope is allowed (considers global + block settings) const moveAllowed = engine.block.isAllowedByScope(block, 'layer/move'); ``` `isAllowedByScope()` returns the final permission after resolving block-level and global scope settings. Use this when you need to know if an action is actually permitted. ## API Reference | Method | Description | | --- | --- | | `engine.block.setScopeEnabled()` | Enable or disable a scope for a specific block | | `engine.block.isScopeEnabled()` | Check if a scope is enabled at the block level | | `engine.block.isAllowedByScope()` | Check if a scope is allowed considering both block and global settings | | `engine.editor.setGlobalScope()` | Set global scope policy (`'Allow'`, `'Deny'`, or `'Defer'`) | | `engine.editor.findAllScopes()` | List all available scope keys | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Variables" description: "Define dynamic text elements that can be populated with custom values during design generation." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Insert Dynamic Content](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content-53fad7/) > [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) --- Text variables enable data-driven template personalization in CE.SDK. Insert placeholder tokens like `{{ firstName }}` into text blocks, then populate them with actual values programmatically. This separates design from content, enabling automated document generation, batch processing, and mass personalization workflows.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-text-variables-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-dynamic-content-text-variables-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-dynamic-content-text-variables-browser/) ```typescript file=@cesdk_web_examples/guides-create-templates-dynamic-content-text-variables-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Text Variables Guide * * Demonstrates text variable management in CE.SDK with a single comprehensive example: * - Discovering variables with findAll() * - Creating and updating variables with setString() * - Reading variable values with getString() * - Binding variables to text blocks with {{variable}} tokens * - Detecting variable references with referencesAnyVariables() * - Removing variables with remove() * - Localizing variable labels */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Localize variable labels that appear in the Variables panel UI cesdk.i18n.setTranslations({ en: { 'variables.firstName.label': 'First Name', 'variables.lastName.label': 'Last Name', 'variables.email.label': 'Email Address', 'variables.company.label': 'Company Name', 'variables.title.label': 'Job Title' } }); // Pattern 1: Discover all existing variables in the scene // This is useful when loading templates to see what variables need values const existingVariables = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Existing variables:', existingVariables); // [] // Pattern 2: Create and update text variables // If a variable doesn't exist, setString() creates it // If it already exists, setString() updates its value engine.variable.setString('firstName', 'Alex'); engine.variable.setString('lastName', 'Smith'); engine.variable.setString('email', 'alex.smith@example.com'); engine.variable.setString('company', 'IMG.LY'); engine.variable.setString('title', 'Creative Developer'); // Pattern 3: Read variable values at runtime const firstName = engine.variable.getString('firstName'); // eslint-disable-next-line no-console console.log('First name variable:', firstName); // 'Alex' // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}} Email: {{email}} Position: {{title}} Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); // Center the text block on the page (after font size is set) // Get the actual frame dimensions of the block (including its bounds) const frameX = engine.block.getFrameX(textBlock); const frameY = engine.block.getFrameY(textBlock); const frameWidth = engine.block.getFrameWidth(textBlock); const frameHeight = engine.block.getFrameHeight(textBlock); // Calculate centered position accounting for frame offset engine.block.setPositionX(textBlock, (pageWidth - frameWidth) / 2 - frameX); engine.block.setPositionY( textBlock, (pageHeight - frameHeight) / 2 - frameY ); // Check if the block contains variable references const hasVariables = engine.block.referencesAnyVariables(textBlock); // eslint-disable-next-line no-console console.log('Text block has variables:', hasVariables); // true // Create and then remove a temporary variable to demonstrate removal engine.variable.setString('tempVariable', 'Temporary Value'); // eslint-disable-next-line no-console console.log('Variables before removal:', engine.variable.findAll()); // Remove the temporary variable engine.variable.remove('tempVariable'); // eslint-disable-next-line no-console console.log('Variables after removal:', engine.variable.findAll()); // Select the text block to show the Variables panel engine.block.setSelected(textBlock, true); // Final check: List all variables in the scene const finalVariables = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Final variables in scene:', finalVariables); // Expected: ['firstName', 'lastName', 'email', 'company', 'title'] // Build a custom Variables Manager panel // CE.SDK doesn't include a built-in UI for creating/managing variables, // so you can build one using the Panel Builder API cesdk.ui.registerPanel( 'ly.img.variablesManager', ({ builder, engine: panelEngine, state }) => { const { Section, TextInput, Button } = builder; // State for creating new variables const newVariableName = state('newVariableName', ''); const newVariableValue = state('newVariableValue', ''); // Section: Create New Variable Section('create-variable', { title: 'Create New Variable', children: () => { TextInput('new-name', { inputLabel: 'Variable Name', ...newVariableName }); TextInput('new-value', { inputLabel: 'Default Value', ...newVariableValue }); Button('create-btn', { label: 'Create Variable', color: 'accent', isDisabled: !newVariableName.value.trim(), onClick: () => { const name = newVariableName.value.trim(); if (name) { panelEngine.variable.setString(name, newVariableValue.value); newVariableName.setValue(''); newVariableValue.setValue(''); } } }); } }); // Section: Existing Variables const variables = panelEngine.variable.findAll(); Section('existing-variables', { title: `Manage Variables (${variables.length})`, children: () => { if (variables.length === 0) { builder.Text('no-vars', { content: 'No variables defined yet.' }); return; } variables.forEach(varName => { TextInput(`var-${varName}`, { inputLabel: varName, value: panelEngine.variable.getString(varName), setValue: value => { panelEngine.variable.setString(varName, value); }, suffix: { icon: '@imgly/TrashBin', tooltip: 'Delete variable', onClick: () => { panelEngine.variable.remove(varName); } } }); }); } }); } ); // Set the panel title cesdk.i18n.setTranslations({ en: { 'panel.ly.img.variablesManager': 'Custom Variables Panel' } }); // Add a dock button to open the panel cesdk.ui.registerComponent('variablesManager.dock', ({ builder: b }) => { const isPanelOpen = cesdk.ui.isPanelOpen('ly.img.variablesManager'); b.Button('variables-dock-btn', { label: 'Variables', icon: '@imgly/Text', onClick: () => { if (isPanelOpen) { cesdk.ui.closePanel('ly.img.variablesManager'); } else { cesdk.ui.openPanel('ly.img.variablesManager'); } }, isActive: isPanelOpen }); }); // Add button to dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', 'variablesManager.dock' ]); } } export default Example; ``` This guide covers how to discover, create, update, and manage text variables both through the UI and programmatically using the Variables API. ## Introduction Text variables allow you to design templates once and personalize them with different content for each use. At render time, CE.SDK replaces variable tokens with actual values provided through the Variables API. This approach is ideal for: - **Automated document generation** - Certificates, invoices, reports - **Mass personalization** - Marketing materials with recipient data - **Data-driven design** - Templates populated from JSON, CSV, or APIs - **Form-based editing** - Expose variables through custom interfaces ## Using the Built-in Insert Variable UI CE.SDK includes an *Insert Variable* dropdown in the text editing canvas menu that allows template authors to insert variable tokens into text blocks. > **Caution:** The Insert Variable dropdown **only appears when at least one variable is > already defined** in the scene. If no variables exist, the dropdown will not > be visible. You must first create variables programmatically using > `engine.variable.setString()` before the UI becomes available. To use the Insert Variable UI: 1. **Define variables** using `engine.variable.setString()` — the dropdown won't appear without this step 2. **Enter text edit mode** by double-clicking a text block 3. **Click the Insert Variable dropdown** in the canvas menu (or press `Ctrl+Shift+L` / `Cmd+Shift+L`) The dropdown allows you to: - **Insert tokens** into text blocks using `{{variableName}}` syntax - **Select from all defined variables** in the current scene Variables appear with localized labels when you configure translations through the i18n API. > **Note:** CE.SDK does not include a built-in UI for end users to *create* or *manage* > variables — the Insert Variable dropdown only lets users insert existing > variables into text. If you need a UI for creating and editing variables, see > [Building a Variables Manager Panel](#building-a-variables-manager-panel) > below. ## Discovering Variables When working with templates that already contain variables, discover what variables exist before populating them with values. ```typescript highlight-discover-variables // Pattern 1: Discover all existing variables in the scene // This is useful when loading templates to see what variables need values const existingVariables = engine.variable.findAll(); // eslint-disable-next-line no-console console.log('Existing variables:', existingVariables); // [] ``` The `findAll()` method returns an array of all variable keys defined in the scene. This is essential when loading templates to understand what data needs to be provided. ## Creating and Updating Variables Create or update variables using `setString()`. If the variable doesn't exist, it will be created. If it already exists, its value will be updated. ```typescript highlight-create-update-variables // Pattern 2: Create and update text variables // If a variable doesn't exist, setString() creates it // If it already exists, setString() updates its value engine.variable.setString('firstName', 'Alex'); engine.variable.setString('lastName', 'Smith'); engine.variable.setString('email', 'alex.smith@example.com'); engine.variable.setString('company', 'IMG.LY'); engine.variable.setString('title', 'Creative Developer'); ``` > **Note:** Variable keys are case-sensitive. `{{ Name }}` and `{{ name }}` are different > variables. ## Reading Variable Values Retrieve the current value of a variable at runtime using `getString()`. This is useful for validation or displaying current values in custom UI. ```typescript highlight-read-variable-value // Pattern 3: Read variable values at runtime const firstName = engine.variable.getString('firstName'); // eslint-disable-next-line no-console console.log('First name variable:', firstName); // 'Alex' ``` ## Binding Variables to Text Blocks Insert variable tokens directly into text block content using the `{{variableName}}` syntax. CE.SDK automatically detects and resolves these tokens at render time. ### Single Variable ```typescript highlight-single-variable-binding // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}} Email: {{email}} Position: {{title}} Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); ``` ### Multiple Variables Combine multiple variables in a single text block: ```typescript highlight-multiple-variable-binding // Create a single comprehensive text block demonstrating all variable patterns const textBlock = engine.block.create('text'); // Multi-line text combining: // - Single variable ({{firstName}}) // - Multiple variables ({{firstName}} {{lastName}}) // - Variables in context (Email: {{email}}) const textContent = `Hello, {{firstName}}! Full Name: {{firstName}} {{lastName}} Email: {{email}} Position: {{title}} Company: {{company}}`; engine.block.replaceText(textBlock, textContent); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setFloat(textBlock, 'text/fontSize', 52); engine.block.appendChild(page, textBlock); ``` The variables resolve in place, maintaining the surrounding text and formatting. ## Detecting Variable References Check if a block contains variable references using `referencesAnyVariables()`. This returns `true` if the block's text contains any `{{variable}}` tokens. ```typescript highlight-detect-variable-references // Check if the block contains variable references const hasVariables = engine.block.referencesAnyVariables(textBlock); // eslint-disable-next-line no-console console.log('Text block has variables:', hasVariables); // true ``` This is useful for identifying which blocks need variable values before export or for implementing validation logic. ## Removing Variables Remove unused variables from the scene with `remove()`. This cleans up the variable store when certain variables are no longer needed. ```typescript highlight-remove-variable // Create and then remove a temporary variable to demonstrate removal engine.variable.setString('tempVariable', 'Temporary Value'); // eslint-disable-next-line no-console console.log('Variables before removal:', engine.variable.findAll()); // Remove the temporary variable engine.variable.remove('tempVariable'); // eslint-disable-next-line no-console console.log('Variables after removal:', engine.variable.findAll()); ``` After removal, the variable no longer exists in the scene. Text blocks that reference removed variables will display the token literally (e.g., `{{removedVar}}`). ## Localizing Variable Labels In CE.SDK (with UI), display friendly labels for variables in the inspector panel using i18n translations. Map variable keys to human-readable names that appear in the UI. ```typescript highlight-localize-variables // Localize variable labels that appear in the Variables panel UI cesdk.i18n.setTranslations({ en: { 'variables.firstName.label': 'First Name', 'variables.lastName.label': 'Last Name', 'variables.email.label': 'Email Address', 'variables.company.label': 'Company Name', 'variables.title.label': 'Job Title' } }); ``` Without localization, the Insert Variable dropdown shows the technical variable key (e.g., `firstName`). With localization, it shows the friendly label (e.g., "First Name"). ## Combining with Other Features Text variables work seamlessly with other CE.SDK template features: ### With Placeholders Use **placeholders** for dynamic images and videos while **variables** personalize text content. This combination enables fully dynamic templates where both visuals and copy change per use case. ### With Editing Constraints Lock layout elements while allowing only variable token editing. This ensures brand consistency while enabling content personalization. ### With Role-Based Editing Show the Insert Variable dropdown only to template authors (Creator role) and hide it from end users (Adopter role). This guides the editing experience based on user permissions. ## Building a Variables Manager Panel CE.SDK's built-in Insert Variable dropdown only allows users to insert existing variables — it doesn't provide a UI for creating or managing variables. If you want end users to create, edit, and delete variables through the editor interface, you can build a custom panel using the Panel Builder API. The following example creates a Variables Manager panel with: - A form to create new variables with a name and default value - A list of existing variables with editable values and delete buttons - A dock button to toggle the panel ```typescript highlight-variables-manager-panel // Build a custom Variables Manager panel // CE.SDK doesn't include a built-in UI for creating/managing variables, // so you can build one using the Panel Builder API cesdk.ui.registerPanel( 'ly.img.variablesManager', ({ builder, engine: panelEngine, state }) => { const { Section, TextInput, Button } = builder; // State for creating new variables const newVariableName = state('newVariableName', ''); const newVariableValue = state('newVariableValue', ''); // Section: Create New Variable Section('create-variable', { title: 'Create New Variable', children: () => { TextInput('new-name', { inputLabel: 'Variable Name', ...newVariableName }); TextInput('new-value', { inputLabel: 'Default Value', ...newVariableValue }); Button('create-btn', { label: 'Create Variable', color: 'accent', isDisabled: !newVariableName.value.trim(), onClick: () => { const name = newVariableName.value.trim(); if (name) { panelEngine.variable.setString(name, newVariableValue.value); newVariableName.setValue(''); newVariableValue.setValue(''); } } }); } }); // Section: Existing Variables const variables = panelEngine.variable.findAll(); Section('existing-variables', { title: `Manage Variables (${variables.length})`, children: () => { if (variables.length === 0) { builder.Text('no-vars', { content: 'No variables defined yet.' }); return; } variables.forEach(varName => { TextInput(`var-${varName}`, { inputLabel: varName, value: panelEngine.variable.getString(varName), setValue: value => { panelEngine.variable.setString(varName, value); }, suffix: { icon: '@imgly/TrashBin', tooltip: 'Delete variable', onClick: () => { panelEngine.variable.remove(varName); } } }); }); } }); } ); // Set the panel title cesdk.i18n.setTranslations({ en: { 'panel.ly.img.variablesManager': 'Custom Variables Panel' } }); // Add a dock button to open the panel cesdk.ui.registerComponent('variablesManager.dock', ({ builder: b }) => { const isPanelOpen = cesdk.ui.isPanelOpen('ly.img.variablesManager'); b.Button('variables-dock-btn', { label: 'Variables', icon: '@imgly/Text', onClick: () => { if (isPanelOpen) { cesdk.ui.closePanel('ly.img.variablesManager'); } else { cesdk.ui.openPanel('ly.img.variablesManager'); } }, isActive: isPanelOpen }); }); // Add button to dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', 'variablesManager.dock' ]); ``` This panel integrates with the dock and provides a complete variable management experience. Users can create new variables, edit existing values, and remove variables they no longer need. > **Note:** For more information on building custom panels, see the > [Create a Custom Panel](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/create-custom-panel-d87b83/) guide. ## API Reference | Method | Description | | --------------------------------------- | ------------------------------------------- | | `engine.variable.findAll()` | Get array of all variable keys in the scene | | `engine.variable.setString()` | Create or update a text variable | | `engine.variable.getString()` | Read the current value of a variable | | `engine.variable.remove()` | Delete a variable from the scene | | `engine.block.referencesAnyVariables()` | Check if a block contains variable tokens | | `engine.block.replaceText()` | Set text content (supports variable tokens) | | `cesdk.i18n.setTranslations()` | Set UI labels for variable names | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add to Template Library" description: "Save and organize templates in an asset source for users to browse and apply from the template library." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/add-to-template-library-8bfbc7/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Add to Template Library](https://img.ly/docs/cesdk/sveltekit/create-templates/add-to-template-library-8bfbc7/) --- Create a template library where users can browse, preview, and apply templates from a custom asset source.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-to-template-library-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-add-to-template-library-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-add-to-template-library-browser/) Templates in CE.SDK are stored and accessed through the asset system. A template library is a local asset source configured to hold and serve template assets, allowing users to browse thumbnails and apply templates to their designs. ```typescript file=@cesdk_web_examples/guides-create-templates-add-to-template-library-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add to Template Library * * This example demonstrates how to create a template library by: * 1. Creating a local asset source for templates * 2. Adding templates with metadata (label, thumbnail, URI) * 3. Configuring the UI to display the template library * 4. Saving scenes as templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a local asset source for templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { // Apply the selected template to the current scene await engine.scene.applyTemplateFromURL(asset.meta!.uri as string); // Set zoom to auto-fit after applying template await cesdk.actions.run('zoom.toPage', { autoFit: true }); return undefined; }); // Add a template to the source with metadata engine.asset.addAssetToSource('my-templates', { id: 'template-postcard', label: { en: 'Postcard' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg' } }); // Add more templates engine.asset.addAssetToSource('my-templates', { id: 'template-business-card', label: { en: 'Business Card' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_business_card_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_business_card_1.jpg' } }); engine.asset.addAssetToSource('my-templates', { id: 'template-social-media', label: { en: 'Social Media Post' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_post_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_instagram_post_1.jpg' } }); // Add translation for the library entry cesdk.i18n.setTranslations({ en: { 'libraries.my-templates-entry.label': 'My Templates' } }); // Add the template source to the asset library cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], previewLength: 3, previewBackgroundType: 'cover', gridBackgroundType: 'cover', gridColumns: 2, cardLabelPosition: () => 'below' }); // Add template library to the dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'my-templates-dock', label: 'My Templates', icon: '@imgly/Template', entries: ['my-templates-entry'] } ]); // Load the first template await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Set zoom to auto-fit await cesdk.actions.run('zoom.toPage', { autoFit: true }); // Open the template library panel by default cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-templates-entry'] } }); // Save as string format (lightweight, references remote assets) const templateString = await engine.scene.saveToString(); console.log('Template saved as string. Length:', templateString.length); // Save as archive format (self-contained with bundled assets) const templateBlob = await engine.scene.saveToArchive(); console.log('Template saved as archive. Size:', templateBlob.size, 'bytes'); // List all registered asset sources const sources = engine.asset.findAllSources(); console.log('Registered sources:', sources); // Notify UI when source contents change engine.asset.assetSourceContentsChanged('my-templates'); // Query templates from the source const queryResult = await engine.asset.findAssets('my-templates', { page: 0, perPage: 10 }); console.log('Templates in library:', queryResult.total); // Remove a template from the source engine.asset.removeAssetFromSource('my-templates', 'template-social-media'); console.log('Removed template-social-media from library'); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ 'ly.img.saveScene.navigationBar', 'ly.img.exportArchive.navigationBar' ] }); } } export default Example; ``` This guide covers how to save scenes as templates, create a template asset source, and add templates with metadata. ## Saving Templates Scenes can be exported in two formats for use as templates. ### String Format Use `engine.scene.saveToString()` to serialize the scene to a base64 string. This lightweight format references remote assets by URL and is ideal for templates where assets are hosted on a CDN. ```typescript highlight=highlight-save-string // Save as string format (lightweight, references remote assets) const templateString = await engine.scene.saveToString(); console.log('Template saved as string. Length:', templateString.length); ``` ### Archive Format For self-contained templates that bundle all assets, use `engine.scene.saveToArchive()`. This returns a Blob containing all assets bundled together, making templates portable without external dependencies. ```typescript highlight=highlight-save-archive // Save as archive format (self-contained with bundled assets) const templateBlob = await engine.scene.saveToArchive(); console.log('Template saved as archive. Size:', templateBlob.size, 'bytes'); ``` ## Creating a Template Asset Source Register a local asset source using `engine.asset.addLocalSource()` with an ID and `applyAsset` callback. ```typescript highlight=highlight-create-source // Create a local asset source for templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { // Apply the selected template to the current scene await engine.scene.applyTemplateFromURL(asset.meta!.uri as string); // Set zoom to auto-fit after applying template await cesdk.actions.run('zoom.toPage', { autoFit: true }); return undefined; }); ``` The `applyAsset` callback receives the selected asset and determines how to apply it. We use `engine.scene.applyTemplateFromURL()` to load the template from the asset's `meta.uri` property. The template is applied to the current scene, adjusting content to fit the existing page dimensions. ## Adding Templates to the Source Register templates using `engine.asset.addAssetToSource()` with an asset definition that includes metadata for display and loading. ```typescript highlight=highlight-add-templates // Add a template to the source with metadata engine.asset.addAssetToSource('my-templates', { id: 'template-postcard', label: { en: 'Postcard' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg' } }); ``` Each template asset requires: - `id` - Unique identifier for the template - `label` - Localized display name shown in the template library - `meta.uri` - URL to the `.scene` file that will be loaded when the template is selected - `meta.thumbUri` - URL to a preview image displayed in the template library grid ## Managing Templates After the initial setup, you can manage templates programmatically. ```typescript highlight=highlight-manage-templates // List all registered asset sources const sources = engine.asset.findAllSources(); console.log('Registered sources:', sources); // Notify UI when source contents change engine.asset.assetSourceContentsChanged('my-templates'); // Query templates from the source const queryResult = await engine.asset.findAssets('my-templates', { page: 0, perPage: 10 }); console.log('Templates in library:', queryResult.total); // Remove a template from the source engine.asset.removeAssetFromSource('my-templates', 'template-social-media'); console.log('Removed template-social-media from library'); ``` Use `engine.asset.findAllSources()` to list registered sources. When you add or remove templates from a source, call `engine.asset.assetSourceContentsChanged()` to refresh the UI. To remove a template, use `engine.asset.removeAssetFromSource()`. ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Templates not appearing in UI | Asset source not added to library entry | Ensure `sourceIds` includes the template source ID | | Template fails to load | Incorrect URI in asset meta | Verify the `uri` points to a valid `.scene` file | | Thumbnails not displaying | Missing or incorrect `thumbUri` | Check the thumbnail URL is accessible | | Apply callback not triggered | `applyAsset` not defined in `addLocalSource` | Provide the callback when creating the source | ## API Reference | Method | Description | | --- | --- | | `engine.asset.addLocalSource()` | Register a local asset source with an apply callback | | `engine.asset.addAssetToSource()` | Add an asset to a registered source | | `engine.asset.removeAssetFromSource()` | Remove an asset from a source by ID | | `engine.asset.assetSourceContentsChanged()` | Notify UI that source contents changed | | `engine.scene.saveToString()` | Serialize scene to base64 string format | | `engine.scene.saveToArchive()` | Save scene as self-contained archive blob | | `engine.scene.applyTemplateFromURL()` | Apply a template to the current scene | | `cesdk.ui.addAssetLibraryEntry()` | Add a library entry to the asset library | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit or Remove Templates" description: "Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/edit-or-remove-38a8be/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Edit or Remove Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/edit-or-remove-38a8be/) --- Modify existing templates and manage template lifecycle in your asset library using CE.SDK.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-edit-or-remove-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-edit-or-remove-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-edit-or-remove-browser/) Templates evolve as designs change. You might need to update branding, fix content errors, or remove outdated templates from your library. CE.SDK provides APIs for adding, editing, and removing templates from asset sources. ```typescript file=@cesdk_web_examples/guides-create-templates-edit-or-remove-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Edit or Remove Templates Guide * * Demonstrates template management workflows: * - Adding templates to local asset sources with thumbnails * - Editing template content and updating in asset sources * - Removing templates from asset sources * - Saving updated templates with new content */ // Helper function to generate SVG thumbnail with text label function generateThumbnail(label: string): string { const svg = ``; return `data:image/svg+xml,${encodeURIComponent(svg)}`; } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a local asset source for managing templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { const uri = asset.meta?.uri; if (!uri) return undefined; const base64Content = uri.split(',')[1]; if (!base64Content) return undefined; await engine.scene.loadFromString(base64Content); return engine.scene.get() ?? undefined; }); // Add the template source to the dock as an asset library entry cesdk.ui.addAssetLibraryEntry({ id: 'my-templates-entry', sourceIds: ['my-templates'], title: 'My Templates', icon: '@imgly/Template', gridColumns: 2, gridItemHeight: 'square' }); // Add a spacer to push "My Templates" to the bottom of the dock cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'my-templates', icon: '@imgly/Template', label: 'My Templates', entries: ['my-templates-entry'] } ]); // Create the template with text blocks const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Original Template'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Browse "My Templates" at the bottom of the dock' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 42); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); // Position text blocks centered on the page const titleWidth = engine.block.getFrameWidth(titleBlock); const titleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight / 2 - titleHeight - 20); const subtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX(subtitleBlock, (pageWidth - subtitleWidth) / 2); engine.block.setPositionY(subtitleBlock, pageHeight / 2 + 20); // Save template content and add to asset source const originalContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-original', label: { en: 'Original Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Original Template') } }); // eslint-disable-next-line no-console console.log('Original template added to asset source'); // Edit the template content and save as a new version engine.block.replaceText(titleBlock, 'Updated Template'); engine.block.replaceText( subtitleBlock, 'This template was edited and saved' ); const updatedContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${updatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Re-center after modification const newTitleWidth = engine.block.getFrameWidth(titleBlock); const newTitleHeight = engine.block.getFrameHeight(titleBlock); engine.block.setPositionX(titleBlock, (pageWidth - newTitleWidth) / 2); engine.block.setPositionY(titleBlock, pageHeight / 2 - newTitleHeight - 20); const newSubtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX( subtitleBlock, (pageWidth - newSubtitleWidth) / 2 ); // eslint-disable-next-line no-console console.log('Updated template added to asset source'); // Add a temporary template to demonstrate removal engine.asset.addAssetToSource('my-templates', { id: 'template-temporary', label: { en: 'Temporary Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Temporary Template') } }); // Remove the temporary template from the asset source engine.asset.removeAssetFromSource('my-templates', 'template-temporary'); // eslint-disable-next-line no-console console.log('Temporary template removed from asset source'); // Update an existing template by removing and re-adding with same ID engine.block.replaceText(subtitleBlock, 'Updated again with new content'); const reUpdatedContent = await engine.scene.saveToString(); engine.asset.removeAssetFromSource('my-templates', 'template-updated'); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${reUpdatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Notify that the asset source contents have changed engine.asset.assetSourceContentsChanged('my-templates'); // Re-center subtitle after final update const reUpdatedSubtitleWidth = engine.block.getFrameWidth(subtitleBlock); engine.block.setPositionX( subtitleBlock, (pageWidth - reUpdatedSubtitleWidth) / 2 ); // eslint-disable-next-line no-console console.log('Template updated in asset source'); // Apply the original template to show the starting point await engine.scene.loadFromString(originalContent); // eslint-disable-next-line no-console console.log( 'Original template applied - browse "My Templates" in the dock' ); } } export default Example; ``` This guide covers how to add templates to asset sources, edit template content, remove templates, and save updated versions. ## Adding Templates First, create a local asset source to store your templates: ```typescript highlight-create-source // Create a local asset source for managing templates engine.asset.addLocalSource('my-templates', undefined, async (asset) => { const uri = asset.meta?.uri; if (!uri) return undefined; const base64Content = uri.split(',')[1]; if (!base64Content) return undefined; await engine.scene.loadFromString(base64Content); return engine.scene.get() ?? undefined; }); ``` Next, create your template content using block APIs: ```typescript highlight-create-template // Create the template with text blocks const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Original Template'); engine.block.setFloat(titleBlock, 'text/fontSize', 64); engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); const subtitleBlock = engine.block.create('text'); engine.block.replaceText( subtitleBlock, 'Browse "My Templates" at the bottom of the dock' ); engine.block.setFloat(subtitleBlock, 'text/fontSize', 42); engine.block.setWidthMode(subtitleBlock, 'Auto'); engine.block.setHeightMode(subtitleBlock, 'Auto'); engine.block.appendChild(page, subtitleBlock); ``` Then save the template and add it to the asset source using `addAssetToSource()`. Each template needs a unique ID, a label, and metadata containing the template URI and thumbnail: ```typescript highlight-add-to-source // Save template content and add to asset source const originalContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-original', label: { en: 'Original Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Original Template') } }); ``` The `meta.uri` field contains the template content as a data URI. The `meta.thumbUri` provides a thumbnail image for display in the asset library. ## Editing Templates Modify template content using block APIs. You can update text, change images, adjust positions, and reconfigure any block properties. ```typescript highlight-modify-template // Edit the template content and save as a new version engine.block.replaceText(titleBlock, 'Updated Template'); engine.block.replaceText( subtitleBlock, 'This template was edited and saved' ); const updatedContent = await engine.scene.saveToString(); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${updatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); ``` After editing, save the modified template as a new asset or update an existing one. ## Removing Templates Remove templates from asset sources using `removeAssetFromSource()`. This permanently deletes the template entry from the source. ```typescript highlight-remove-template // Add a temporary template to demonstrate removal engine.asset.addAssetToSource('my-templates', { id: 'template-temporary', label: { en: 'Temporary Template' }, meta: { uri: `data:application/octet-stream;base64,${originalContent}`, thumbUri: generateThumbnail('Temporary Template') } }); // Remove the temporary template from the asset source engine.asset.removeAssetFromSource('my-templates', 'template-temporary'); ``` > **Warning:** Removal is permanent. The template is no longer accessible from the asset source after removal. If you need to restore templates, maintain backups or implement a soft-delete mechanism. ## Saving Updated Templates To update an existing template, first remove it using `removeAssetFromSource()`, then add the updated version with `addAssetToSource()` using the same asset ID. ```typescript highlight-update-in-source // Update an existing template by removing and re-adding with same ID engine.block.replaceText(subtitleBlock, 'Updated again with new content'); const reUpdatedContent = await engine.scene.saveToString(); engine.asset.removeAssetFromSource('my-templates', 'template-updated'); engine.asset.addAssetToSource('my-templates', { id: 'template-updated', label: { en: 'Updated Template' }, meta: { uri: `data:application/octet-stream;base64,${reUpdatedContent}`, thumbUri: generateThumbnail('Updated Template') } }); // Notify that the asset source contents have changed engine.asset.assetSourceContentsChanged('my-templates'); ``` After updating templates, call `assetSourceContentsChanged()` to notify the UI that the asset source contents have changed. ## Best Practices ### Versioning Strategies When managing template updates, consider these approaches: - **Replace in place**: Use the same asset ID to update templates without changing references. Existing designs using the template won't break. - **Version suffixes**: Create new entries with version identifiers (e.g., `template-v2`). This preserves old versions while introducing new ones. - **Archive old versions**: Move deprecated templates to a separate source before removal. This maintains a history without cluttering the main library. ### Batch Operations When adding, updating, or removing multiple templates, call `assetSourceContentsChanged()` once after all operations complete rather than after each individual change. This reduces UI refreshes and improves performance. ### Template IDs Use descriptive, unique IDs that reflect the template's purpose (e.g., `marketing-banner-2024`, `social-post-square`). Consistent naming conventions make templates easier to find and manage programmatically. ### Thumbnails Generate meaningful thumbnails that accurately represent template content. Good thumbnails improve discoverability in the asset library and help users quickly identify the right template. ### Memory Considerations Templates stored as base64 data URIs remain in memory. For production applications with many templates, consider storing template content externally and using URLs in the `meta.uri` field instead of inline data URIs. ## API Reference | Method | Description | | --- | --- | | `engine.asset.addLocalSource()` | Create a local asset source | | `engine.asset.addAssetToSource()` | Add template to asset source | | `engine.asset.removeAssetFromSource()` | Remove template from asset source | | `engine.asset.assetSourceContentsChanged()` | Notify UI of asset source changes | | `engine.scene.saveToString()` | Save scene as base64 string | | `engine.scene.loadFromString()` | Load scene from base64 string | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create From Scratch" description: "Build reusable design templates programmatically using CE.SDK's APIs. Create scenes, add text and graphic blocks, configure placeholders and variables, apply editing constraints, and save templates for reuse." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/from-scratch-663cda/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Create From Scratch](https://img.ly/docs/cesdk/sveltekit/create-templates/from-scratch-663cda/) --- Build reusable design templates entirely through code using CE.SDK's programmatic APIs for automation, batch generation, and custom template creation tools.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-from-scratch-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-from-scratch-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-from-scratch-browser/) CE.SDK provides a complete API for building design templates through code. Instead of starting from an existing template, you can create a blank scene, define page dimensions, add text and graphic blocks, configure placeholders for swappable media, add text variables for dynamic content, apply editing constraints to protect layout integrity, and save the template for reuse. This approach enables automation workflows, batch template generation, and integration with custom template creation tools. ```typescript file=@cesdk_web_examples/guides-create-templates-from-scratch-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Templates From Scratch Guide * * Demonstrates building a reusable promotional card template entirely in code: * - Creating a blank scene with print-ready dimensions (1200x1600) * - Adding text blocks with variable tokens and proper font styling * - Adding graphic blocks as image placeholders using addImage() * - Configuring placeholder behavior for swappable media * - Applying editing constraints (scopes) to protect layout integrity * - Saving the template in multiple formats */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Template layout constants for a promotional card const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 1000; const PADDING = 40; const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2; // Create a blank scene with custom dimensions engine.scene.create('Free', { page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } } }); // Set design unit to Pixel for precise coordinate mapping engine.scene.setDesignUnit('Pixel'); // Get the page that was automatically created const page = engine.block.findByType('page')[0]; // Set a gradient background for the template const backgroundFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(backgroundFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.6, a: 1.0 }, stop: 0 }, // Purple { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } // Blue ]); engine.block.setFill(page, backgroundFill); // Font URIs for consistent typography const FONT_BOLD = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf'; const FONT_REGULAR = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf'; // Create headline text block with {{title}} variable const headline = engine.block.create('text'); engine.block.replaceText(headline, '{{title}}'); // Set font with proper typeface for consistent rendering engine.block.setFont(headline, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(headline, 'text/fontSize', 28); engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position and size the headline engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Auto'); engine.block.setWidth(headline, CONTENT_WIDTH); engine.block.setPositionX(headline, PADDING); engine.block.setPositionY(headline, 50); engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headline); // Set default value for the title variable engine.variable.setString('title', 'Summer Sale'); // Create subheadline text block with {{subtitle}} variable const subheadline = engine.block.create('text'); engine.block.replaceText(subheadline, '{{subtitle}}'); engine.block.setFont(subheadline, FONT_REGULAR, { name: 'Roboto', fonts: [{ uri: FONT_REGULAR, subFamily: 'Regular', weight: 'normal' }] }); engine.block.setFloat(subheadline, 'text/fontSize', 14); engine.block.setTextColor(subheadline, { r: 0.9, g: 0.9, b: 0.95, a: 1.0 }); engine.block.setWidthMode(subheadline, 'Absolute'); engine.block.setHeightMode(subheadline, 'Auto'); engine.block.setWidth(subheadline, CONTENT_WIDTH); engine.block.setPositionX(subheadline, PADDING); engine.block.setPositionY(subheadline, 175); engine.block.setEnum(subheadline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, subheadline); engine.variable.setString('subtitle', 'Up to 50% off all items'); // Create image placeholder in the center of the card const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setWidth(imageBlock, CONTENT_WIDTH); engine.block.setHeight(imageBlock, 420); engine.block.setPositionX(imageBlock, PADDING); engine.block.setPositionY(imageBlock, 295); engine.block.appendChild(page, imageBlock); // Enable placeholder behavior on the image fill const fill = engine.block.getFill(imageBlock); if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } engine.block.setPlaceholderEnabled(imageBlock, true); // Enable visual controls for the placeholder engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true); engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true); // Create CTA (call-to-action) text block with {{cta}} variable const cta = engine.block.create('text'); engine.block.replaceText(cta, '{{cta}}'); engine.block.setFont(cta, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(cta, 'text/fontSize', 8.4); engine.block.setTextColor(cta, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setWidthMode(cta, 'Absolute'); engine.block.setHeightMode(cta, 'Auto'); engine.block.setWidth(cta, CONTENT_WIDTH); engine.block.setPositionX(cta, PADDING); engine.block.setPositionY(cta, 765); engine.block.setEnum(cta, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, cta); engine.variable.setString('cta', 'Learn More'); // Set global scope to 'Defer' for per-block control engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); // Lock all text block positions but allow text editing const textBlocks = [headline, subheadline, cta]; textBlocks.forEach((block) => { engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); }); // Lock image position but allow fill replacement engine.block.setScopeEnabled(imageBlock, 'layer/move', false); engine.block.setScopeEnabled(imageBlock, 'layer/resize', false); engine.block.setScopeEnabled(imageBlock, 'fill/change', true); // Register role toggle component for switching between Creator and Adopter cesdk.ui.registerComponent('role.toggle', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator-btn', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter-btn', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => engine.editor.setRole('Adopter') }); } }); }); // Register button component for saving template as string cesdk.ui.registerComponent('save.string', ({ builder }) => { builder.Button('save-string-btn', { label: 'Save String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateString = await engine.scene.saveToString(); console.log( 'Template saved as string:', templateString.substring(0, 100) + '...' ); // Download the string as a file const blob = new Blob([templateString], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'template.scene'; link.click(); URL.revokeObjectURL(url); } }); }); // Register button component for saving template as archive cesdk.ui.registerComponent('save.archive', ({ builder }) => { builder.Button('save-archive-btn', { label: 'Save Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateArchive = await engine.scene.saveToArchive(); console.log( 'Template saved as archive:', templateArchive.size, 'bytes' ); // Download the archive as a file const url = URL.createObjectURL(templateArchive); const link = document.createElement('a'); link.href = url; link.download = 'template.zip'; link.click(); URL.revokeObjectURL(url); } }); }); // Add role toggle and save buttons to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'role.toggle'); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'save.string'); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'save.archive'); // Enable auto-fit zoom to continuously fit the page with padding engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to create a blank scene, add text blocks with variables, add image placeholders, apply editing constraints, and save the template. ## Initialize CE.SDK We start by initializing CE.SDK and loading the asset sources. The asset source plugins (imported from `@cesdk/cesdk-js/plugins`) provide access to fonts, images, and other assets. ```typescript highlight=highlight-setup const engine = cesdk.engine; ``` ## Create a Blank Scene We create the foundation of our template with custom page dimensions. The `engine.scene.create()` method accepts page options to set width, height, and background color. ```typescript highlight=highlight-create-scene // Template layout constants for a promotional card const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 1000; const PADDING = 40; const CONTENT_WIDTH = CANVAS_WIDTH - PADDING * 2; // Create a blank scene with custom dimensions engine.scene.create('Free', { page: { size: { width: CANVAS_WIDTH, height: CANVAS_HEIGHT } } }); // Set design unit to Pixel for precise coordinate mapping engine.scene.setDesignUnit('Pixel'); ``` The scene creation method accepts a layout mode and optional page configuration. When options are provided, the scene automatically includes a page with the specified dimensions. ## Set Page Background We set a light background color to give the template a consistent base appearance. ```typescript highlight=highlight-add-background // Set a gradient background for the template const backgroundFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(backgroundFill, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.2, b: 0.6, a: 1.0 }, stop: 0 }, // Purple { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } // Blue ]); engine.block.setFill(page, backgroundFill); ``` We create a color fill using `engine.block.createFill('color')`, set the color via `engine.block.setColor()` with the `fill/color/value` property, then assign the fill to the page using `engine.block.setFill()`. ## Add Text Blocks Text blocks allow you to add styled text content. We create a headline that includes a variable token for dynamic content. ```typescript highlight=highlight-add-text // Create headline text block with {{title}} variable const headline = engine.block.create('text'); engine.block.replaceText(headline, '{{title}}'); // Set font with proper typeface for consistent rendering engine.block.setFont(headline, FONT_BOLD, { name: 'Roboto', fonts: [{ uri: FONT_BOLD, subFamily: 'Bold', weight: 'bold' }] }); engine.block.setFloat(headline, 'text/fontSize', 28); engine.block.setTextColor(headline, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position and size the headline engine.block.setWidthMode(headline, 'Absolute'); engine.block.setHeightMode(headline, 'Auto'); engine.block.setWidth(headline, CONTENT_WIDTH); engine.block.setPositionX(headline, PADDING); engine.block.setPositionY(headline, 50); engine.block.setEnum(headline, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headline); ``` We create a text block using `engine.block.create('text')`, set its content with `engine.block.replaceText()`, configure dimensions and position, and append it to the page using `engine.block.appendChild()`. ## Add Text Variables Text variables enable data-driven personalization. By using `{{variableName}}` tokens in text blocks, you can populate content programmatically. ```typescript highlight=highlight-add-variable // Set default value for the title variable engine.variable.setString('title', 'Summer Sale'); ``` The `engine.variable.setString()` method sets the default value for the variable. When the template is used, this value can be changed to personalize the content. ## Add Graphic Blocks Graphic blocks serve as containers for images. We create an image block that will become a placeholder for swappable media. ```typescript highlight=highlight-add-graphic // Create image placeholder in the center of the card const imageBlock = engine.block.create('graphic'); const imageShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, imageShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setWidth(imageBlock, CONTENT_WIDTH); engine.block.setHeight(imageBlock, 420); engine.block.setPositionX(imageBlock, PADDING); engine.block.setPositionY(imageBlock, 295); engine.block.appendChild(page, imageBlock); ``` We create a graphic block with `engine.block.create('graphic')`, assign a rectangle shape using `engine.block.createShape('rect')` and `engine.block.setShape()`, create an image fill with `engine.block.createFill('image')`, set the image URI via `engine.block.setString()`, and position it on the page. ## Configure Placeholders Placeholders turn design blocks into drop-zones where users can swap content while maintaining layout integrity. We enable placeholder behavior on the image fill and configure visual controls. ```typescript highlight=highlight-configure-placeholder // Enable placeholder behavior on the image fill const fill = engine.block.getFill(imageBlock); if (fill !== null && engine.block.supportsPlaceholderBehavior(fill)) { engine.block.setPlaceholderBehaviorEnabled(fill, true); } engine.block.setPlaceholderEnabled(imageBlock, true); // Enable visual controls for the placeholder engine.block.setPlaceholderControlsOverlayEnabled(imageBlock, true); engine.block.setPlaceholderControlsButtonEnabled(imageBlock, true); ``` Placeholder behavior is enabled on the fill (not the block) for graphic blocks. We also enable the overlay pattern and replace button for visual guidance. ## Apply Editing Constraints Editing constraints protect template elements by restricting what users can modify. We use scopes to lock position and size while allowing content changes. ```typescript highlight=highlight-apply-constraints // Set global scope to 'Defer' for per-block control engine.editor.setGlobalScope('layer/move', 'Defer'); engine.editor.setGlobalScope('layer/resize', 'Defer'); // Lock all text block positions but allow text editing const textBlocks = [headline, subheadline, cta]; textBlocks.forEach((block) => { engine.block.setScopeEnabled(block, 'layer/move', false); engine.block.setScopeEnabled(block, 'layer/resize', false); }); // Lock image position but allow fill replacement engine.block.setScopeEnabled(imageBlock, 'layer/move', false); engine.block.setScopeEnabled(imageBlock, 'layer/resize', false); engine.block.setScopeEnabled(imageBlock, 'fill/change', true); ``` Setting global scope to `'Defer'` enables per-block control. We then disable movement and resizing for both blocks while enabling fill changes for the image placeholder. ## Save the Template We persist the template in two formats: a lightweight string for CDN-hosted assets and a self-contained archive with embedded assets. ```typescript highlight=highlight-save-template // Register button component for saving template as string cesdk.ui.registerComponent('save.string', ({ builder }) => { builder.Button('save-string-btn', { label: 'Save String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateString = await engine.scene.saveToString(); console.log( 'Template saved as string:', templateString.substring(0, 100) + '...' ); // Download the string as a file const blob = new Blob([templateString], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'template.scene'; link.click(); URL.revokeObjectURL(url); } }); }); // Register button component for saving template as archive cesdk.ui.registerComponent('save.archive', ({ builder }) => { builder.Button('save-archive-btn', { label: 'Save Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { const templateArchive = await engine.scene.saveToArchive(); console.log( 'Template saved as archive:', templateArchive.size, 'bytes' ); // Download the archive as a file const url = URL.createObjectURL(templateArchive); const link = document.createElement('a'); link.href = url; link.download = 'template.zip'; link.click(); URL.revokeObjectURL(url); } }); }); // Add role toggle and save buttons to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'role.toggle'); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'save.string'); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, 'save.archive'); ``` The `engine.scene.saveToString()` method creates a compact string format suitable for storage when assets are hosted externally. The `engine.scene.saveToArchive()` method creates a ZIP bundle containing all assets, ideal for offline use or distribution. ## Troubleshooting - **Blocks not appearing**: Verify that `engine.block.appendChild()` attaches blocks to the page. Blocks must be part of the scene hierarchy to render. - **Variables not resolving**: Verify the variable name in the text matches exactly, including curly braces syntax `{{variableName}}`. - **Placeholder not interactive**: Ensure `engine.block.setPlaceholderEnabled()` is called on the block and the appropriate scope (`fill/change`) is enabled. - **Constraints not enforced**: Verify `engine.editor.setGlobalScope()` is set to `'Defer'` before setting per-block scopes. ## API Reference | Method | Description | | --- | --- | | `engine.scene.create()` | Create a new design scene with optional page size | | `engine.scene.setDesignUnit()` | Set the design unit (Pixel, Millimeter, Inch) | | `engine.scene.saveToString()` | Save scene to string format | | `engine.scene.saveToArchive()` | Save scene to ZIP archive | | `engine.block.create()` | Create a design block (page, text, graphic) | | `engine.block.appendChild()` | Append a child block to a parent | | `engine.block.findByType()` | Find blocks by their type | | `engine.block.createFill()` | Create a fill (color, image, etc.) | | `engine.block.setFill()` | Assign a fill to a block | | `engine.block.getFill()` | Get the fill of a block | | `engine.block.createShape()` | Create a shape (rect, ellipse, etc.) | | `engine.block.setShape()` | Assign a shape to a graphic block | | `engine.block.setString()` | Set a string property on a block | | `engine.block.setColor()` | Set a color property | | `engine.block.replaceText()` | Set text content | | `engine.block.setFont()` | Set font with typeface | | `engine.block.setPlaceholderBehaviorEnabled()` | Enable placeholder behavior on fill | | `engine.block.setPlaceholderEnabled()` | Enable placeholder interaction on block | | `engine.block.setPlaceholderControlsOverlayEnabled()` | Enable overlay visual control | | `engine.block.setPlaceholderControlsButtonEnabled()` | Enable button visual control | | `engine.variable.setString()` | Set a text variable value | | `engine.editor.setGlobalScope()` | Set global scope permission | | `engine.block.setScopeEnabled()` | Enable/disable scope on a block | ## Next Steps - [Placeholders](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/placeholders-d9ba8a/) - Configure placeholder behavior and visual controls in depth - [Text Variables](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) - Implement dynamic text personalization with variables - [Set Editing Constraints](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/set-editing-constraints-c892c0/) - Lock layout properties to protect design integrity - [Add to Template Library](https://img.ly/docs/cesdk/sveltekit/create-templates/add-to-template-library-8bfbc7/) - Register templates in the asset library for users to discover --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Templates" description: "Load and import design templates into CE.SDK from URLs, archives, and serialized strings." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/import-e50084/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Import Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/import-e50084/) --- Load design templates into CE.SDK from archive URLs, scene URLs, and serialized strings.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-browser/) Templates are pre-designed scenes that provide starting points for user projects. CE.SDK supports loading templates from archive URLs with bundled assets, remote scene URLs, or serialized strings stored in databases. ```typescript file=@cesdk_web_examples/guides-create-templates-import-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Import scene file as string for loadFromString demonstration import businessCardSceneString from './assets/business-card.scene?raw'; // Template sources const fashionAdArchiveUrl = 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'; const postcardSceneUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; /** * CE.SDK Plugin: Import Templates * * Demonstrates loading templates from different sources: * - Archive URLs (.zip files with bundled assets) * - Scene URLs (.scene files) * - Serialized strings (imported scene content) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (cesdk == null) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load template from a scene file URL await engine.scene.loadFromURL(postcardSceneUrl); // Zoom viewport to fit the loaded scene const scene = engine.scene.get(); if (scene != null) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } // Verify the loaded scene const loadedScene = engine.scene.get(); if (loadedScene != null) { const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Template loaded with ${pages.length} page(s)`); } // Configure navigation bar with template loading buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', key: 'load-archive', label: 'Import Archive', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from archive URL (bundled assets) await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } }, { id: 'ly.img.action.navigationBar', key: 'load-url', label: 'Import URL', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from scene URL await engine.scene.loadFromURL(postcardSceneUrl); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } }, { id: 'ly.img.action.navigationBar', key: 'load-string', label: 'Import String', icon: '@imgly/Download', variant: 'regular', onClick: async () => { // Load template from serialized string await engine.scene.loadFromString(businessCardSceneString); const s = engine.scene.get(); if (s != null) { await engine.scene.zoomToBlock(s, { padding: 40 }); } } } ]); } } export default Example; ``` This guide covers how to load templates from archives, URLs, and strings, and work with the loaded content. ## Load from Archive Load a template from an archive URL using `loadFromArchiveURL()`. Archives are `.zip` files that bundle the scene with all its assets, making them portable and self-contained. ```typescript highlight=highlight-load-from-archive // Load template from archive URL (bundled assets) await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl); ``` ## Load from URL Load a template from a remote `.scene` file URL using `loadFromURL()`. The scene file is a JSON-based format that references assets via URLs. ```typescript highlight=highlight-load-from-url // Load template from a scene file URL await engine.scene.loadFromURL(postcardSceneUrl); ``` ## Load from String For templates stored in databases or received from APIs, load from a serialized string using `loadFromString()`. This method works with content previously saved using `engine.scene.saveToString()`. ```typescript highlight=highlight-load-from-string // Load template from serialized string await engine.scene.loadFromString(businessCardSceneString); ``` ## Working with the Loaded Scene After loading a template, you can verify its contents and adjust the viewport. ### Verify the Scene Use `engine.scene.get()` to retrieve the scene block and `engine.scene.getPages()` to inspect its pages. ```typescript highlight=highlight-get-scene // Verify the loaded scene const loadedScene = engine.scene.get(); if (loadedScene != null) { const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Template loaded with ${pages.length} page(s)`); } ``` ### Zoom to Content Fit the loaded template in the viewport using `zoomToBlock()` with optional padding. ```typescript highlight=highlight-zoom-to-scene // Zoom viewport to fit the loaded scene const scene = engine.scene.get(); if (scene != null) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } ``` --- ## Related Pages - [Import Templates from Scene Files](https://img.ly/docs/cesdk/sveltekit/create-templates/import/from-scene-file-52a01e/) - Load and import templates from scene files in CE.SDK for web applications --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Templates from Scene Files" description: "Load and import templates from scene files in CE.SDK for web applications" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/import/from-scene-file-52a01e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Import Templates](https://img.ly/docs/cesdk/sveltekit/create-templates/import-e50084/) > [From Scene File](https://img.ly/docs/cesdk/sveltekit/create-templates/import/from-scene-file-52a01e/) --- CE.SDK lets you load complete design templates from scene files to start projects from pre-designed templates, implement template galleries, and build template management systems.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-from-scene-file-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-from-scene-file-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-from-scene-file-browser/) Scene files are portable design templates that preserve the entire design structure including blocks, assets, styles, and layout. ```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Import Templates from Scene Files * * This example demonstrates: * - Loading scenes from .scene file URLs * - Loading scenes from .archive (ZIP) URLs * - Applying templates while preserving page dimensions * - Understanding the difference between loading and applying templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // ===== Example: Load Scene from Archive URL ===== // This is the recommended approach for loading complete templates // with all their assets embedded in a ZIP file // Load a complete template from an archive (ZIP) file // This loads both the scene structure and all embedded assets await engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip' ); // Alternative: Load scene from URL (.scene file) // This loads only the scene structure - assets must be accessible via URLs // Uncomment to try: // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' // ); // Alternative: Apply template while preserving current page dimensions // This is useful when you want to load template content into an existing scene // with specific dimensions // Uncomment to try: // // First create a scene with specific dimensions // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); // Get the loaded scene const scene = engine.scene.get(); if (scene) { // eslint-disable-next-line no-console console.log('Scene loaded successfully:', scene); // Get information about the loaded scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Scene has ${pages.length} page(s)`); // Get design unit const designUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit:', designUnit); } // Zoom to fit the loaded content if (scene) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } } } export default Example; ``` This guide covers loading scenes from archives, loading from URLs, applying templates while preserving dimensions, and understanding scene file formats. ## Scene File Formats CE.SDK supports two scene file formats for importing templates: ### Scene Format (.scene) Scene files are JSON-based representations of design structures. They reference external assets via URLs, making them lightweight and suitable for database storage. However, the referenced assets must remain accessible at their URLs. **When to use:** - Templates stored in databases - Templates with hosted assets - Lightweight transmission ### Archive Format (.archive or .zip) Archive files are self-contained packages that bundle the scene structure with all referenced assets in a ZIP file. This makes them portable and suitable for offline use. **When to use:** - Template distribution - Offline-capable templates - Complete portability - **Recommended for most use cases** ## Load Scene from Archive The most common way to load templates is from archive URLs. This method loads both the scene structure and all embedded assets: ```typescript file=@cesdk_web_examples/guides-create-templates-import-from-scene-file-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Import Templates from Scene Files * * This example demonstrates: * - Loading scenes from .scene file URLs * - Loading scenes from .archive (ZIP) URLs * - Applying templates while preserving page dimensions * - Understanding the difference between loading and applying templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // ===== Example: Load Scene from Archive URL ===== // This is the recommended approach for loading complete templates // with all their assets embedded in a ZIP file // Load a complete template from an archive (ZIP) file // This loads both the scene structure and all embedded assets await engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip' ); // Alternative: Load scene from URL (.scene file) // This loads only the scene structure - assets must be accessible via URLs // Uncomment to try: // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' // ); // Alternative: Apply template while preserving current page dimensions // This is useful when you want to load template content into an existing scene // with specific dimensions // Uncomment to try: // // First create a scene with specific dimensions // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); // Get the loaded scene const scene = engine.scene.get(); if (scene) { // eslint-disable-next-line no-console console.log('Scene loaded successfully:', scene); // Get information about the loaded scene const pages = engine.scene.getPages(); // eslint-disable-next-line no-console console.log(`Scene has ${pages.length} page(s)`); // Get design unit const designUnit = engine.scene.getDesignUnit(); // eslint-disable-next-line no-console console.log('Design unit:', designUnit); } // Zoom to fit the loaded content if (scene) { await engine.scene.zoomToBlock(scene, { padding: 40 }); } } } export default Example; ``` ```typescript highlight-load-from-archive // Load a complete template from an archive (ZIP) file // This loads both the scene structure and all embedded assets await engine.scene.loadFromArchiveURL( 'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip' ); ``` When you load from an archive: - The ZIP file is fetched and extracted - All assets are registered with CE.SDK - The scene structure is loaded - Asset paths are automatically resolved ## Load Scene from URL You can also load scenes directly from .scene file URLs. This approach requires that all referenced assets remain accessible at their original URLs: ```typescript highlight-load-from-url // await engine.scene.loadFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' // ); ``` **Important:** With this method, if asset URLs become unavailable (404 errors, CORS issues, etc.), those assets won't load and your template may appear incomplete. ## Apply Template vs Load Scene CE.SDK provides two approaches for working with templates, each serving different purposes: ### Load Scene When you use `loadFromURL()` or `loadFromArchiveURL()`, CE.SDK: - Replaces the entire current scene - Adopts the template's page dimensions - Loads all content as-is This is appropriate when starting a new project from a template. ### Apply Template When you use `applyTemplateFromURL()` or `applyTemplateFromString()`, CE.SDK: - Keeps your current page dimensions - Adjusts template content to fit - Preserves your scene structure This is useful when you want to load template content into an existing scene with specific dimensions: ```typescript highlight-apply-template // // First create a scene with specific dimensions // await cesdk.actions.run('scene.create', { page: { width: 1920, height: 1080, unit: 'Pixel' } }); // const page = engine.block.findByType('page')[0]; // // // Now apply template - content will be adjusted to fit // await engine.scene.applyTemplateFromURL( // 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene' // ); ``` ## Error Handling When loading templates, several issues can occur: ### Network Errors Template URLs might be unreachable: ```typescript try { await engine.scene.loadFromArchiveURL(templateUrl); } catch (error) { console.error('Failed to load template:', error); // Show error message to user // Fall back to default template or empty scene } ``` ### Invalid Scene Format The file might not be a valid scene: ```typescript try { await engine.scene.loadFromURL(sceneUrl); } catch (error) { if (error.message.includes('parse')) { console.error('Invalid scene file format'); } } ``` ### Missing Assets For .scene files, referenced assets might be unavailable. The scene loads but assets appear missing. Consider using archives to avoid this issue. ## Performance Considerations ### Loading Time Archive size directly impacts loading time: - Small archives (\< 1MB): Nearly instant - Medium archives (1-5MB): 1-2 seconds - Large archives (> 5MB): Several seconds Show loading indicators for better user experience. ## CORS Considerations When loading templates from external URLs, ensure proper CORS headers are set on the server hosting the files. Archives must be accessible with appropriate CORS policies. ## API Reference | Method | Description | | ---------------------------------------- | --------------------------------------------------------- | | `engine.scene.loadFromArchiveURL()` | Loads a complete scene from an archive (ZIP) file | | `engine.scene.loadFromURL()` | Loads a scene from a .scene file URL | | `engine.scene.applyTemplateFromURL()` | Applies a template while preserving page dimensions | | `engine.scene.get()` | Returns the current scene block ID | | `engine.scene.getPages()` | Returns all page IDs in the scene | | `engine.scene.getDesignUnit()` | Returns the measurement unit | | `engine.scene.zoomToBlock()` | Zooms the viewport to fit a specific block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Lock the Template" description: "Restrict editing access to specific elements or properties in a template to enforce design rules." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Lock the Template](https://img.ly/docs/cesdk/sveltekit/create-templates/lock-131489/) --- Set up a two-surface integration where template creators have full editing access while template adopters can only modify designated areas.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-lock-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-lock-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-lock-browser/) Many integrations need two different editing experiences: one for designers who build templates, and one for end users who customize them. The Creator and Adopter roles make this possible—same CE.SDK, different permissions based on who's using it. For detailed scope configuration patterns, see [Lock Content](https://img.ly/docs/cesdk/sveltekit/rules/lock-content-9fa727/). In the live example, the headline text is pre-selected and the Placeholder panel is open, showing the scope settings that control what Adopters can edit. Toggle the role to Adopter and try selecting the logo to see the restrictions in action. ```typescript file=@cesdk_web_examples/guides-create-templates-lock-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Lock the Template * * This example demonstrates the two-surface pattern for template workflows: * - Creator role: Full editing access for designers building templates * - Adopter role: Restricted access for users customizing templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page and set dimensions const page = engine.block.findByType('page')[0]; // Create a brand template with a logo and headline const logoBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/imgly_logo.jpg', { size: { width: 120, height: 30 } } ); engine.block.appendChild(page, logoBlock); engine.block.setPositionX(logoBlock, 40); engine.block.setPositionY(logoBlock, 40); engine.block.setName(logoBlock, 'Logo'); const headlineBlock = engine.block.create('text'); engine.block.replaceText(headlineBlock, 'Edit this headline'); engine.block.setWidth(headlineBlock, 720); engine.block.setHeightMode(headlineBlock, 'Auto'); engine.block.setFloat(headlineBlock, 'text/fontSize', 48); engine.block.setEnum(headlineBlock, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, headlineBlock); engine.block.setPositionX(headlineBlock, 40); engine.block.setPositionY(headlineBlock, 200); engine.block.setName(headlineBlock, 'Headline'); // Configure which elements Adopters can edit // Enable selection and text editing on the headline engine.block.setScopeEnabled(headlineBlock, 'editor/select', true); engine.block.setScopeEnabled(headlineBlock, 'text/edit', true); // Leave all scopes disabled on the logo (default state) // This prevents Adopters from selecting or modifying the logo // The Creator role ignores all scope restrictions engine.editor.setRole('Creator'); // Add a role toggle to the navigation bar (engine calls are reactive) cesdk.ui.registerComponent( 'ly.img.roleToggle.navigationBar', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => { // Close the placeholder panel since Adopters can't configure scopes cesdk.ui.closePanel( '//ly.img.panel/inspector/placeholderSettings' ); engine.editor.setRole('Adopter'); } }); } }); } ); cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.roleToggle.navigationBar', 'ly.img.spacer' ]); await engine.scene.zoomToBlock(page, { padding: 40 }); // Select the headline and open the placeholder panel so users see the scope settings engine.block.select(headlineBlock); setTimeout(() => { cesdk.ui.openPanel('//ly.img.panel/inspector/placeholderSettings'); }, 300); } } export default Example; ``` This guide covers how to understand the two-surface pattern, configure roles for different user groups, and set up scope restrictions that control what Adopters can edit. ## Understanding the Two-Surface Pattern Template-based workflows typically involve two distinct user groups with different needs: | Surface | Users | Role | What they can do | |---------|-------|------|------------------| | Creator Surface | Designers, admins | `Creator` | Full editing—build templates, set locks | | Adopter Surface | End users, marketers | `Adopter` | Restricted editing—only modify unlocked areas | This separation protects design intent while enabling customization. The Creator role ignores all locks, giving full access. The Adopter role respects locks, restricting users to what's explicitly allowed. ## Setting Up the Creator Surface The Creator surface is where templates are built. We use `engine.editor.setRole('Creator')` to give designers unrestricted access. ```typescript highlight=highlight-creator-surface // The Creator role ignores all scope restrictions engine.editor.setRole('Creator'); ``` In Creator mode, all operations are permitted regardless of scope settings. This is where designers build the template layout, configure which elements should be editable, set scope restrictions using `engine.block.setScopeEnabled()`, and save the template for distribution. ## Setting Up the Adopter Surface The Adopter surface is where templates are used. Call `engine.editor.setRole('Adopter')` to enforce the restrictions configured by creators. In Adopter mode, users can only interact with blocks that have the appropriate scopes enabled. The Adopter role respects all lock configurations, ensuring brand consistency and design intent are maintained. ## When to Use This Pattern This two-surface approach works well for: - **Brand template systems**: Marketing teams customize approved templates - **Design approval workflows**: Creators build, reviewers can't accidentally modify - **Self-service customization**: End users personalize within guardrails - **White-label products**: Customers can only edit designated areas For simpler use cases where all users have the same permissions, you may not need separate surfaces. ## Configuring What Users Can Edit The scope system controls what Adopters can modify. In Creator mode, we enable specific scopes on blocks that should be editable. ```typescript highlight=highlight-configure-scopes // Configure which elements Adopters can edit // Enable selection and text editing on the headline engine.block.setScopeEnabled(headlineBlock, 'editor/select', true); engine.block.setScopeEnabled(headlineBlock, 'text/edit', true); // Leave all scopes disabled on the logo (default state) // This prevents Adopters from selecting or modifying the logo ``` When Adopters load this template, they can edit the headline text but nothing else. The `editor/select` scope must be enabled for users to interact with a block at all. For comprehensive scope configuration patterns, see [Lock Content](https://img.ly/docs/cesdk/sveltekit/rules/lock-content-9fa727/). ## Configuring Scopes in the Editor UI Designers can also configure scopes visually without writing code. In Creator mode, select any block and open the Placeholder panel in the inspector. This panel provides toggles for each scope: - **Allow selecting** (`editor/select`): Users can click to select the block - **Allow editing text** (`text/edit`): Users can modify text content - **Allow changing fill** (`fill/change`): Users can swap images or change colors - **Allow moving** (`layer/move`): Users can reposition the block - **Allow deleting** (`lifecycle/destroy`): Users can remove the block Changes made in the Placeholder panel are equivalent to calling `engine.block.setScopeEnabled()` programmatically. When the template is saved, these settings persist and apply when Adopters load the template. ## Adding a Role Toggle Add a segmented control to the navigation bar that switches between Creator and Adopter modes. Engine calls inside the builder are automatically reactive—the component re-renders when the role changes. ```typescript highlight=highlight-toggle-role // Add a role toggle to the navigation bar (engine calls are reactive) cesdk.ui.registerComponent( 'ly.img.roleToggle.navigationBar', ({ builder }) => { const role = engine.editor.getRole(); builder.ButtonGroup('role-toggle', { children: () => { builder.Button('creator', { label: 'Creator', isActive: role === 'Creator', onClick: () => engine.editor.setRole('Creator') }); builder.Button('adopter', { label: 'Adopter', isActive: role === 'Adopter', onClick: () => { // Close the placeholder panel since Adopters can't configure scopes cesdk.ui.closePanel( '//ly.img.panel/inspector/placeholderSettings' ); engine.editor.setRole('Adopter'); } }); } }); } ); cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.roleToggle.navigationBar', 'ly.img.spacer' ]); ``` ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Adopter can edit everything | Wrong role or scopes not configured | Verify role is `Adopter` and scopes are set in Creator mode | | Adopter can't edit anything | `editor/select` scope not enabled | Enable `editor/select` on blocks users should interact with | | Creator can't set locks | Wrong role | Switch to Creator role before configuring scopes | | Changes not persisting | Template not saved after scope changes | Save template after configuring scopes in Creator mode | ## API Reference | Method | Description | |--------|-------------| | `engine.editor.setRole(role)` | Set the editing role (`'Creator'`, `'Adopter'`, or `'Viewer'`) | | `engine.editor.getRole()` | Get the current editing role | | `engine.block.setScopeEnabled(block, scope, enabled)` | Enable or disable a scope on a block | | `engine.block.isScopeEnabled(block, scope)` | Check if a scope is enabled on a block | | `cesdk.ui.registerComponent(id, renderFn)` | Register a custom UI component | | `builder.ButtonGroup(id, { children })` | Create a segmented control | | `builder.Button(id, { label, isActive, onClick })` | Create a button | ### Common Scopes | Scope | Description | |-------|-------------| | `'editor/select'` | Allow selecting the block (required for any interaction) | | `'fill/change'` | Allow changing the block's fill (images, colors) | | `'text/edit'` | Allow editing text content | | `'text/character'` | Allow changing text formatting (font, size, color) | | `'layer/move'` | Allow moving the block | | `'layer/resize'` | Allow resizing the block | | `'layer/rotate'` | Allow rotating the block | | `'layer/crop'` | Allow cropping the block | | `'lifecycle/destroy'` | Allow deleting the block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-templates/overview-4ebe30/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Overview](https://img.ly/docs/cesdk/sveltekit/create-templates/overview-4ebe30/) --- These imported designs can then be adapted into editable, structured templates inside CE.SDK. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Videos" description: "Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) --- --- ## Related Pages - [Create Videos Overview](https://img.ly/docs/cesdk/sveltekit/create-video/overview-b06512/) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing. - [Video and Audio Timeline Web Editor](https://img.ly/docs/cesdk/sveltekit/create-video/timeline-editor-912252/) - Use the timeline editor to arrange and edit video clips, audio, and animations frame by frame. - [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) - Learn to play, pause, seek, and preview audio and video content in CE.SDK using playback controls and solo mode. - [Trim Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) - Learn how to trim video clips in CE.SDK to control which portion of media plays back. - [Split Video and Audio](https://img.ly/docs/cesdk/sveltekit/edit-video/split-464167/) - Learn how to split video and audio clips at specific time points in CE.SDK, creating two independent segments from a single clip. - [Join and Arrange Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/join-and-arrange-3bbc30/) - Combine multiple video clips into sequences and organize them on the timeline using tracks and time offsets in CE.SDK. - [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) - Documentation for Transform - [Add Captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/) - Documentation for adding captions to videos - [Update Caption Presets](https://img.ly/docs/cesdk/sveltekit/create-video/update-caption-presets-e9c385/) - Extend video captions with custom caption styles using simple content.json updates - [Add Watermark](https://img.ly/docs/cesdk/sveltekit/edit-video/add-watermark-762ce6/) - Add text and image watermarks to videos using CE.SDK for copyright protection, branding, and content attribution with timeline management and visibility controls. - [Redact Sensitive Content in Videos](https://img.ly/docs/cesdk/sveltekit/edit-video/redaction-cf6d03/) - Redact sensitive video content using blur, pixelization, or solid overlays. Essential for privacy protection when obscuring faces, license plates, or personal information. - [Video Editor SDK](https://img.ly/docs/cesdk/sveltekit/overview-7d12d5/) - Explore video editing features in CE.SDK including trimming, splitting, captions, and programmatic editing. - [Video Limitations](https://img.ly/docs/cesdk/sveltekit/create-video/limitations-6a740d/) - Understand resolution limits, duration constraints, codec support, and browser-specific restrictions when working with video in CE.SDK. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Audio Playback Speed" description: "Learn how to adjust audio playback speed in CE.SDK to create slow-motion, time-stretched, and fast-forward audio effects." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-speed-908d57/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) > [Adjust Speed](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-speed-908d57/) --- Control audio playback speed by adjusting the speed multiplier using CE.SDK's timeline UI and programmatic speed adjustment API.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-speed-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-speed-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-speed-browser/) Playback speed adjustment changes how fast or slow audio plays without changing its pitch (though pitch shifting may occur depending on the audio processing implementation). A speed multiplier of 1.0 represents normal speed, values below 1.0 slow down playback, and values above 1.0 speed it up. This technique is commonly used for podcast speed controls, time-compressed narration, slow-motion audio effects, and accessibility features. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-speed-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Audio Speed Guide * * Demonstrates audio playback speed adjustment in CE.SDK: * - Loading audio files * - Adjusting playback speed with setPlaybackSpeed * - Three speed presets: slow-motion (0.5x), normal (1.0x), and maximum (3.0x) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Use a sample audio file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a'; // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); // Slow Motion Audio (0.5x - half speed) const slowAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, slowAudioBlock); engine.block.setPositionX(slowAudioBlock, 100); engine.block.setPositionY(slowAudioBlock, 200); engine.block.setPlaybackSpeed(slowAudioBlock, 0.5); // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); // Maximum Speed Audio (3.0x - triple speed) const maxSpeedAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, maxSpeedAudioBlock); engine.block.setPositionX(maxSpeedAudioBlock, 100); engine.block.setPositionY(maxSpeedAudioBlock, 600); engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0); // Log duration changes for demonstration const slowDuration = engine.block.getDuration(slowAudioBlock); const normalDuration = engine.block.getDuration(normalAudioBlock); const maxDuration = engine.block.getDuration(maxSpeedAudioBlock); // eslint-disable-next-line no-console console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`); // Remove the original audio block (we only need the duplicates) engine.block.destroy(audioBlock); // Zoom to fit all audio blocks and labels engine.scene.zoomToBlock(page, 40, 40, 40, 40); } } export default Example; ``` This guide covers how to adjust audio playback speed programmatically using the Engine API, understand speed constraints, and manage how speed changes affect block duration. ## Understanding Speed Concepts CE.SDK supports playback speeds from **0.25x** (quarter speed) to **3.0x** (triple speed), with **1.0x** as the default normal speed. Values below 1.0 slow down playback, values above 1.0 speed it up. **Speed and Duration**: Adjusting speed automatically changes the block's duration following an inverse relationship: `perceived_duration = original_duration / speed_multiplier`. A 10-second clip at 2.0x speed plays in 5 seconds; at 0.5x speed it takes 20 seconds. This automatic adjustment maintains synchronization when coordinating audio with other elements. **Common use cases**: Podcast playback controls (1.5x-2.0x), accessibility features (0.75x for easier comprehension), time-compressed narration, dramatic slow-motion effects (0.25x-0.5x), transcription work, and music tempo adjustments. ## Setting Up Audio for Speed Adjustment ### Loading Audio Files We create an audio block and load an audio file by setting its `fileURI` property. ```typescript highlight-create-audio // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); ``` Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata, which is essential for accurate duration information and playback speed control. ## Adjusting Playback Speed ### Setting Normal Speed By default, audio plays at normal speed (1.0x). We can explicitly set this to ensure consistent baseline behavior. ```typescript highlight-set-normal-speed // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); ``` Setting speed to 1.0 ensures the audio plays at its original recorded rate. This is useful after experimenting with different speeds and wanting to return to normal, or when initializing audio blocks programmatically to ensure consistent starting states. ### Querying Current Speed We can check the current playback speed at any time using `getPlaybackSpeed`. ```typescript highlight-set-normal-speed // Normal Speed Audio (1.0x) const normalAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, normalAudioBlock); engine.block.setPositionX(normalAudioBlock, 100); engine.block.setPositionY(normalAudioBlock, 400); engine.block.setPlaybackSpeed(normalAudioBlock, 1.0); ``` This returns the current speed multiplier as a number. Use this to populate UI controls, validate that speed changes were applied, or make relative adjustments based on existing speeds. ## Common Speed Presets ### Slow Motion Audio (0.5x) Slowing audio to half speed creates a slow-motion effect that's useful for careful listening or transcription. ```typescript highlight-set-slow-motion // Slow Motion Audio (0.5x - half speed) const slowAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, slowAudioBlock); engine.block.setPositionX(slowAudioBlock, 100); engine.block.setPositionY(slowAudioBlock, 200); engine.block.setPlaybackSpeed(slowAudioBlock, 0.5); ``` At 0.5x speed, a 10-second audio clip will take 20 seconds to play. This slower pace makes it easier to catch details, transcribe speech accurately, or create dramatic slow-motion audio effects in creative projects. ### Maximum Speed (3.0x) The maximum supported speed is 3.0x, three times normal playback rate. ```typescript highlight-set-maximum-speed // Maximum Speed Audio (3.0x - triple speed) const maxSpeedAudioBlock = engine.block.duplicate(audioBlock); engine.block.appendChild(page, maxSpeedAudioBlock); engine.block.setPositionX(maxSpeedAudioBlock, 100); engine.block.setPositionY(maxSpeedAudioBlock, 600); engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0); ``` At maximum speed, audio plays very quickly—a 10-second clip finishes in just 3.33 seconds. This extreme speed is useful for rapidly skimming through content to find specific moments, though comprehension becomes challenging at this rate. ## Speed and Block Duration ### Understanding Duration Changes When we change playback speed, CE.SDK automatically adjusts the block's duration to reflect the new playback time. ```typescript highlight-speed-and-duration // Log duration changes for demonstration const slowDuration = engine.block.getDuration(slowAudioBlock); const normalDuration = engine.block.getDuration(normalAudioBlock); const maxDuration = engine.block.getDuration(maxSpeedAudioBlock); // eslint-disable-next-line no-console console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`); // eslint-disable-next-line no-console console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`); ``` The original duration represents how long the audio takes to play at normal speed. When we double the speed to 2.0x, the duration is automatically halved. The audio content is the same, but it plays through in half the time, so the block duration shrinks accordingly. This automatic adjustment keeps your composition synchronized. If you have multiple audio tracks or need to coordinate audio with video, the block durations will accurately reflect the new playback duration after speed changes. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Audio Volume" description: "Learn how to adjust audio volume in CE.SDK to control playback levels, mute audio, and balance multiple audio sources in video projects." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-volume-7ecc4a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) > [Adjust Volume](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-volume-7ecc4a/) --- Control audio playback volume using CE.SDK's timeline UI and the programmatic volume control API, from silent (0.0) to full volume (1.0).  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-volume-browser/) Volume control adjusts how loud or quiet audio plays during playback. CE.SDK uses a normalized 0.0-1.0 range where 0.0 is completely silent and 1.0 is full volume. This applies to both audio blocks and video fills with embedded audio. Volume settings are commonly used for balancing multiple audio sources, creating fade effects, and allowing users to adjust playback levels. ```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-volume-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Adjust Audio Volume Guide * * Demonstrates audio volume control in CE.SDK: * - Setting volume levels with setVolume * - Muting and unmuting with setMuted * - Querying volume and mute states * - Volume levels for multiple audio sources */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Use a sample audio file const audioUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a'; // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); // Set volume to 80% (0.8 on a 0.0-1.0 scale) const fullVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, fullVolumeAudio); engine.block.setTimeOffset(fullVolumeAudio, 0); engine.block.setVolume(fullVolumeAudio, 0.8); // Set volume to 30% for background music const lowVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, lowVolumeAudio); engine.block.setTimeOffset(lowVolumeAudio, 5); engine.block.setVolume(lowVolumeAudio, 0.3); // Mute an audio block (preserves volume setting) const mutedAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, mutedAudio); engine.block.setTimeOffset(mutedAudio, 10); engine.block.setVolume(mutedAudio, 1.0); engine.block.setMuted(mutedAudio, true); // Query current volume and mute states const currentVolume = engine.block.getVolume(fullVolumeAudio); const isMuted = engine.block.isMuted(mutedAudio); const isForceMuted = engine.block.isForceMuted(mutedAudio); // eslint-disable-next-line no-console console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`); // eslint-disable-next-line no-console console.log( `Low volume audio: ${( engine.block.getVolume(lowVolumeAudio) * 100 ).toFixed(0)}%` ); // eslint-disable-next-line no-console console.log( `Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}` ); // Remove the original audio block (we only need the duplicates) engine.block.destroy(audioBlock); // Zoom to fit all audio blocks engine.scene.zoomToBlock(page, 40, 40, 40, 40); } } export default Example; ``` This guide covers how to adjust audio volume programmatically using the Engine API, mute and unmute audio, and query volume and mute states. ## Understanding Volume Concepts CE.SDK supports volume levels from **0.0** (silent) to **1.0** (full volume), with **1.0** as the default for new audio blocks. Values in between represent proportional volume levels—0.5 is half volume, 0.25 is quarter volume. **Volume vs Muting**: Setting volume to 0.0 makes audio silent, but muting with `setMuted()` is preferred when you want to temporarily silence audio without losing the volume setting. Unmuting restores the previous volume level. **Common use cases**: Background music mixing (0.3-0.5 under voiceover), user volume controls, audio balancing for multi-track projects, fade effects (gradually adjusting volume over time), and accessibility features. ## Setting Up Audio for Volume Control ### Loading Audio Files We create an audio block and load an audio file by setting its `fileURI` property. ```typescript highlight-create-audio // Create an audio block and load the audio file const audioBlock = engine.block.create('audio'); engine.block.setString(audioBlock, 'audio/fileURI', audioUri); // Wait for audio resource to load await engine.block.forceLoadAVResource(audioBlock); ``` Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata before we manipulate it. ## Adjusting Volume ### Setting Volume We can set volume using `setVolume()` with a value between 0.0 and 1.0. ```typescript highlight-set-volume // Set volume to 80% (0.8 on a 0.0-1.0 scale) const fullVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, fullVolumeAudio); engine.block.setTimeOffset(fullVolumeAudio, 0); engine.block.setVolume(fullVolumeAudio, 0.8); ``` Setting volume to 0.8 (80%) is useful when you want prominent audio that isn't at maximum level, leaving headroom for other audio sources or preventing distortion. ### Setting Low Volume for Background Audio For background music that should be audible but not prominent, use lower volume levels. ```typescript highlight-set-low-volume // Set volume to 30% for background music const lowVolumeAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, lowVolumeAudio); engine.block.setTimeOffset(lowVolumeAudio, 5); engine.block.setVolume(lowVolumeAudio, 0.3); ``` At 0.3 (30%) volume, the audio is clearly audible but stays in the background. This is a common level for background music under voiceover or dialogue. ## Muting Audio ### Mute and Unmute Use `setMuted()` to mute audio without changing its volume setting. This is useful for toggle controls. ```typescript highlight-mute-audio // Mute an audio block (preserves volume setting) const mutedAudio = engine.block.duplicate(audioBlock); engine.block.appendChild(page, mutedAudio); engine.block.setTimeOffset(mutedAudio, 10); engine.block.setVolume(mutedAudio, 1.0); engine.block.setMuted(mutedAudio, true); ``` When you mute an audio block, the volume setting (1.0 in this case) is preserved. Unmuting later with `setMuted(block, false)` restores playback at the same volume level. ### Querying Volume and Mute States You can query the current volume and mute states at any time. ```typescript highlight-query-volume // Query current volume and mute states const currentVolume = engine.block.getVolume(fullVolumeAudio); const isMuted = engine.block.isMuted(mutedAudio); const isForceMuted = engine.block.isForceMuted(mutedAudio); // eslint-disable-next-line no-console console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`); // eslint-disable-next-line no-console console.log( `Low volume audio: ${( engine.block.getVolume(lowVolumeAudio) * 100 ).toFixed(0)}%` ); // eslint-disable-next-line no-console console.log( `Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}` ); ``` Use `getVolume()` to read the current volume level, `isMuted()` to check if the block is muted by the user, and `isForceMuted()` to check if the engine has automatically muted the block due to playback rules. ## Mixing Multiple Audio Sources ### Balancing Tracks When working with multiple audio sources, use different volume levels to create a balanced mix. A common approach is to keep voiceover or dialogue at higher levels (0.8-1.0) and background music at lower levels (0.3-0.5). ### Common Mixing Patterns **Voiceover prominent**: Set background music to 0.3 and voiceover to 1.0 for clear narration with musical accompaniment. **Balanced dialogue and music**: Set both to 0.6-0.7 when both elements are equally important. **Sound effects as accents**: Set sound effects to 0.5-0.8 depending on how prominent they should be in the mix. ## Building Volume Controls ### Volume Slider When building a volume slider UI, map the slider value directly to the 0.0-1.0 range. Display percentages (0-100%) for user-friendly labels. ```typescript // Example: Update volume from slider (0-100) const sliderValue = 75; // User drags slider to 75% const volume = sliderValue / 100; // Convert to 0.0-1.0 engine.block.setVolume(audioBlock, volume); ``` ### Mute Toggle Implement mute buttons using `setMuted()` and indicate the current state using `isMuted()`. Show a different icon when `isForceMuted()` returns true to indicate the engine has automatically muted the audio. ```typescript // Example: Toggle mute state const currentlyMuted = engine.block.isMuted(audioBlock); engine.block.setMuted(audioBlock, !currentlyMuted); // Check if engine force-muted (e.g., high playback speed) if (engine.block.isForceMuted(audioBlock)) { // Show "force muted" indicator } ``` ## Troubleshooting ### Volume Changes Not Audible Check if the block is muted with `isMuted()` or force muted with `isForceMuted()`. Also verify the audio resource has loaded successfully. ### Force Muted State Video fills at playback speeds above 3.0x are automatically force muted by the engine. Reduce the playback speed to restore audio output. ### Volume Not Persisting Ensure you're setting volume on the correct block ID. Volume settings are block-specific and don't propagate to duplicates or other instances. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Control Audio and Video" description: "Learn to play, pause, seek, and preview audio and video content in CE.SDK using playback controls and solo mode." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) --- Play, pause, seek, and preview audio and video content programmatically using CE.SDK's playback control APIs.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-control-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-control-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-control-browser/) CE.SDK provides playback control for audio and video through the Block API. Playback state, seeking, and solo preview are controlled programmatically. Resources must be loaded before accessing metadata like duration and dimensions. ```typescript file=@cesdk_web_examples/guides-create-video-control-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page and set to 16:9 landscape for video const page = engine.block.findByType('page')[0]!; // Create a track for video blocks const track = engine.block.create('track'); engine.block.appendChild(page, track); // Create a video block and add it to the track const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; const videoBlock = engine.block.create('graphic'); engine.block.setShape(videoBlock, engine.block.createShape('rect')); engine.block.setWidth(videoBlock, 1920); engine.block.setHeight(videoBlock, 1080); // Create and configure video fill const videoFill = engine.block.createFill('video'); engine.block.setString(videoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(videoBlock, videoFill); // Add to track and set duration engine.block.appendChild(track, videoBlock); engine.block.setDuration(videoBlock, 10); await engine.block.forceLoadAVResource(videoFill); const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); const totalDuration = engine.block.getAVResourceTotalDuration(videoFill); console.log(`Video dimensions: ${videoWidth}x${videoHeight}`); console.log(`Total duration: ${totalDuration}s`); if (engine.block.supportsPlaybackControl(page)) { console.log(`Is playing: ${engine.block.isPlaying(page)}`); engine.block.setPlaying(page, true); } if (engine.block.supportsPlaybackTime(page)) { engine.block.setPlaybackTime(page, 1.0); console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`); } console.log( `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime( videoBlock )}` ); engine.block.setSoloPlaybackEnabled(videoFill, true); console.log( `Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}` ); engine.block.setSoloPlaybackEnabled(videoFill, false); // Select the video block for inspection engine.block.select(videoBlock); } } export default Example; ``` This guide covers how to play and pause media, seek to specific positions, preview individual blocks with solo mode, check visibility at playback time, and access video resource metadata. ## Force Loading Resources Media resource metadata is unavailable until the resource is loaded. Call `forceLoadAVResource` on the video fill to ensure dimensions and duration are accessible. ```typescript highlight=highlight-force-load await engine.block.forceLoadAVResource(videoFill); ``` Without loading the resource first, accessing properties like duration or dimensions throws an error. ## Getting Video Metadata Once the resource is loaded, query the video dimensions and total duration. ```typescript highlight=highlight-get-metadata const videoWidth = engine.block.getVideoWidth(videoFill); const videoHeight = engine.block.getVideoHeight(videoFill); const totalDuration = engine.block.getAVResourceTotalDuration(videoFill); ``` The `getVideoWidth` and `getVideoHeight` methods return the original video dimensions in pixels. The `getAVResourceTotalDuration` method returns the full duration of the source media in seconds. ## Playing and Pausing Check if the block supports playback control using `supportsPlaybackControl`, then start or stop playback with `setPlaying`. ```typescript highlight=highlight-playback-control if (engine.block.supportsPlaybackControl(page)) { console.log(`Is playing: ${engine.block.isPlaying(page)}`); engine.block.setPlaying(page, true); } ``` The `isPlaying` method returns the current playback state. ## Seeking To jump to a specific playback position, use `setPlaybackTime`. First, check if the block supports playback time with `supportsPlaybackTime`. ```typescript highlight=highlight-seeking if (engine.block.supportsPlaybackTime(page)) { engine.block.setPlaybackTime(page, 1.0); console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`); } ``` Playback time is specified in seconds. The `getPlaybackTime` method returns the current position. ## Visibility at Current Time Check if a block is visible at the current playback position using `isVisibleAtCurrentPlaybackTime`. This is useful when blocks have different time offsets or durations. ```typescript highlight=highlight-visibility console.log( `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime( videoBlock )}` ); ``` ## Solo Playback Solo playback allows you to preview an individual block while the rest of the scene stays frozen. Enable it on a video fill or audio block with `setSoloPlaybackEnabled`. ```typescript highlight=highlight-solo-playback engine.block.setSoloPlaybackEnabled(videoFill, true); console.log( `Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}` ); engine.block.setSoloPlaybackEnabled(videoFill, false); ``` Enabling solo on one block automatically disables it on all others. This is useful for previewing a specific clip without affecting the overall scene playback. ## Troubleshooting ### Properties Unavailable Before Resource Load **Symptom**: Accessing duration, dimensions, or trim values throws an error. **Cause**: Media resource not yet loaded. **Solution**: Always `await engine.block.forceLoadAVResource()` before accessing these properties. ### Block Not Playing **Symptom**: Calling `setPlaying(true)` has no effect. **Cause**: Block doesn't support playback control or scene not in playback mode. **Solution**: Check `supportsPlaybackControl()` returns true; ensure scene playback is active. ### Solo Playback Not Working **Symptom**: Enabling solo doesn't isolate the block. **Cause**: Solo applied to wrong block type or block not visible. **Solution**: Apply solo to video fills or audio blocks, ensure block is at current playback time. ## Next Steps

• [Trim Video and Audio](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) - Control which portion of source media plays
• [Loop Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio/loop-937be7/) - Enable repeating playback for audio blocks
• [Adjust Volume](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-volume-7ecc4a/) - Control audio volume and muting
• [Adjust Speed](https://img.ly/docs/cesdk/sveltekit/create-video/audio/adjust-speed-908d57/) - Change playback speed for audio
• [Video Timeline Overview](https://img.ly/docs/cesdk/sveltekit/create-video/timeline-editor-912252/) - Timeline editing system

--- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Limitations" description: "Understand resolution limits, duration constraints, codec support, and browser-specific restrictions when working with video in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/limitations-6a740d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Limitations](https://img.ly/docs/cesdk/sveltekit/create-video/limitations-6a740d/) --- CE.SDK performs video processing client-side, providing privacy and responsiveness while introducing hardware-dependent constraints. This reference covers resolution limits, codec support, and platform-specific restrictions to help you plan video workflows within platform capabilities.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-limitations-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-limitations-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-limitations-browser/) Client-side video processing provides significant advantages for privacy and user experience, but it operates within the constraints of the user's device. Understanding these limitations helps you build applications that work reliably across different hardware configurations and browsers. ```typescript file=@cesdk_web_examples/guides-create-video-limitations-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Video Limitations Guide * * Demonstrates how to query video processing limitations in CE.SDK: * - Querying maximum export size * - Monitoring memory usage and availability * - Understanding resolution and duration constraints */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // Query the maximum export dimensions supported by this device const maxExportSize = engine.editor.getMaxExportSize(); console.log('Maximum export size:', maxExportSize, 'pixels'); // The maximum export size depends on the GPU texture size limit // Typical values: 4096, 8192, or 16384 pixels // Query current memory consumption const usedMemory = engine.editor.getUsedMemory(); const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2); console.log('Memory used:', usedMemoryMB, 'MB'); // Query available memory for video processing const availableMemory = engine.editor.getAvailableMemory(); const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2); console.log('Memory available:', availableMemoryMB, 'MB'); // Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space // Calculate memory utilization percentage const totalMemory = usedMemory + availableMemory; const memoryUtilization = ((usedMemory / totalMemory) * 100).toFixed(1); console.log('Memory utilization:', memoryUtilization, '%'); // Check if a specific export size is feasible const desiredWidth = 3840; // 4K UHD const desiredHeight = 2160; const canExport4K = desiredWidth <= maxExportSize && desiredHeight <= maxExportSize; console.log( 'Can export at 4K UHD (3840x2160):', canExport4K ? 'Yes' : 'No' ); // Add a sample video to demonstrate the editor with video content const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a video block that fills the page const videoBlock = await engine.block.addVideo( videoUri, pageWidth, pageHeight ); // Position the video at the center of the page engine.block.setPositionX(videoBlock, 0); engine.block.setPositionY(videoBlock, 0); // Select the video block engine.block.setSelected(videoBlock, true); // Re-check memory after loading video content const usedAfterLoad = engine.editor.getUsedMemory(); const availableAfterLoad = engine.editor.getAvailableMemory(); const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2); const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed( 2 ); console.log('After loading video:'); console.log(' Memory used:', usedAfterLoadMB, 'MB'); console.log(' Memory available:', availableAfterLoadMB, 'MB'); // Log summary of device capabilities console.log('--- Device Capabilities Summary ---'); console.log('Max export dimension:', maxExportSize, 'px'); console.log('4K UHD support:', canExport4K ? 'Supported' : 'Not supported'); console.log( 'Initial memory:', usedMemoryMB, 'MB used /', availableMemoryMB, 'MB available' ); console.log( 'Open the browser console to view detailed limitation information.' ); } } export default Example; ``` ## Resolution Limits Video resolution capabilities depend on hardware resources and WebAssembly memory constraints. CE.SDK supports up to 4K UHD for playback and export on capable hardware. Import resolution is bounded by WebAssembly's 32-bit address space and browser tab memory limits, which typically cap around 2GB. This means very high resolution video files may exceed available memory during processing. Playback and export at 4K depends on available GPU resources, and higher resolutions require proportionally more memory and processing power. Query the maximum export size before initiating exports to avoid failures: ```typescript highlight-query-max-export-size // Query the maximum export dimensions supported by this device const maxExportSize = engine.editor.getMaxExportSize(); console.log('Maximum export size:', maxExportSize, 'pixels'); // The maximum export size depends on the GPU texture size limit // Typical values: 4096, 8192, or 16384 pixels ``` The maximum export size varies by device GPU capabilities. Typical values range from 4096 to 16384 pixels depending on the graphics hardware. Before exporting at high resolutions, verify the target dimensions don't exceed this limit: ```typescript highlight-check-export-feasibility // Check if a specific export size is feasible const desiredWidth = 3840; // 4K UHD const desiredHeight = 2160; const canExport4K = desiredWidth <= maxExportSize && desiredHeight <= maxExportSize; console.log( 'Can export at 4K UHD (3840x2160):', canExport4K ? 'Yes' : 'No' ); ``` ## Duration Limits Video duration affects editing responsiveness and export time. CE.SDK optimizes for short-form content while supporting longer videos with performance trade-offs. Stories and reels up to 2 minutes are fully supported with smooth editing performance. Videos up to 10 minutes work well on modern hardware, with export times typically around 1 minute for this length. Longer videos are technically possible but may impact editing responsiveness on less capable devices. For long-form content, consider these approaches: - Split longer videos into shorter segments for editing - Use lower resolution previews during editing, then export at full quality - Test on target devices to establish acceptable duration limits for your use case ## Frame Rate Support Frame rate affects both playback smoothness and export performance. Hardware acceleration significantly impacts high frame rate capabilities. 30 FPS at 1080p is broadly supported across devices and provides smooth playback on most hardware. 60 FPS and high-resolution combinations benefit from hardware acceleration. When hardware acceleration is unavailable, high frame rate video may drop frames during preview playback, though exports will maintain the correct timing. Variable frame rate sources may have timing precision limitations. For best results with variable frame rate content, consider transcoding to constant frame rate before importing into CE.SDK. ## Supported Codecs CE.SDK supports widely-adopted video and audio codecs, with some platform-specific variations in availability. ### Video Codecs H.264/AVC in `.mp4` containers has universal support across all browsers and platforms. This is the most reliable codec choice for broad compatibility. H.265/HEVC in `.mp4` containers has platform-dependent support. Safari on macOS and iOS supports HEVC natively, while Chrome and Firefox support varies by operating system and codec availability. ### Audio Codecs MP3 works in `.mp3` files or within `.mp4` containers, with universal browser support. AAC in `.m4a`, `.mp4`, or `.mov` containers is widely supported, though some browsers may require system codecs for encoding during export. ## Browser and Platform Restrictions Browser capabilities depend on the host operating system, introducing platform-specific limitations that affect video processing. ### Windows Limitations H.265 transparency is not supported on Windows hosts. If your workflow requires alpha channel video with HEVC, consider processing on macOS or using H.264 which supports alpha on all platforms. ### Linux Limitations Chrome on Linux typically lacks encoder support for H.264 and AAC due to licensing restrictions in the Chrome Linux build. This means video imports and playback may work correctly, but exports may fail. If you're targeting Linux users, consider: - Recommending Firefox, which may have different codec support - Providing fallback export options - Using server-side export processing for Linux users Use the `video.decode.checkSupport` and `video.encode.checkSupport` actions to detect video capabilities programmatically and display appropriate user feedback. Alternatively, use `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` to check support silently without showing dialogs. See the [Actions API](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for implementation details. ### Chromium Limitations Chromium-based browsers (without proprietary codecs) don't include video codecs due to licensing. They may fall back to system libraries on some platforms, such as macOS, but support is not guaranteed. Video editing functionality may not work reliably in pure Chromium builds. ### Mobile Browser Limitations Video editing is not supported on mobile browsers on any platform due to technical limitations causing performance issues. For mobile video editing capabilities, use the native mobile SDKs for iOS and Android, which provide full video support. ## Hardware Requirements Device capabilities directly affect video processing performance. CE.SDK scales with available hardware resources. ### Recommended Hardware | Platform | Minimum Hardware | | ---------------- | --------------------------------------------------------------- | | Desktop | Notebook or desktop released in the last 7 years with at least 4GB memory | | Mobile (Apple) | iPhone 8, iPad (6th gen) or newer | | Mobile (Android) | Phones and tablets released in the last 4 years | ### GPU Considerations Hardware acceleration improves encoding and decoding performance significantly. High-resolution and high-frame-rate exports benefit most from GPU support. The maximum export size depends on the maximum texture size the device's GPU can allocate. Integrated graphics can handle most common video editing tasks. Discrete GPUs provide better performance for 4K content and complex compositions with multiple video layers. ## Memory Constraints Client-side video processing operates within browser memory limits. Use the memory APIs to monitor consumption and make informed decisions about resource loading. Query current memory usage to understand how much has been consumed: ```typescript highlight-query-memory-usage // Query current memory consumption const usedMemory = engine.editor.getUsedMemory(); const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2); console.log('Memory used:', usedMemoryMB, 'MB'); ``` Check how much memory remains available for additional resources: ```typescript highlight-query-available-memory // Query available memory for video processing const availableMemory = engine.editor.getAvailableMemory(); const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2); console.log('Memory available:', availableMemoryMB, 'MB'); // Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space ``` WebAssembly uses a 32-bit address space, limiting the maximum addressable memory. Browser tabs typically cap around 2GB of memory, though this varies by browser and system configuration. Multiple video tracks and effects increase memory usage proportionally. Query memory APIs before loading additional video files to avoid out-of-memory conditions: ```typescript highlight-monitor-memory-after-load // Re-check memory after loading video content const usedAfterLoad = engine.editor.getUsedMemory(); const availableAfterLoad = engine.editor.getAvailableMemory(); const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2); const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed( 2 ); console.log('After loading video:'); console.log(' Memory used:', usedAfterLoadMB, 'MB'); console.log(' Memory available:', availableAfterLoadMB, 'MB'); ``` ## Export Size Limitations Export dimensions are bounded by GPU texture size limits. Always query `getMaxExportSize()` before initiating exports to ensure the requested dimensions are supported. The maximum export size varies by device GPU capabilities. Common limits include: - **4096 pixels**: Older integrated graphics - **8192 pixels**: Most modern integrated and discrete GPUs - **16384 pixels**: High-end discrete GPUs Consider target platform requirements when planning export dimensions. Mobile devices and web playback rarely benefit from resolutions above 1080p or 4K, so exporting at extreme resolutions may not provide practical value. ## Troubleshooting Common issues developers encounter related to video limitations: | Issue | Cause | Solution | | ---------------------------------- | --------------------------------------- | --------------------------------------------------- | | Video export fails on Linux | Chrome lacks H.264/AAC encoder support | Use Firefox or implement server-side export | | Slow playback at high resolution | Hardware cannot keep up with decoding | Reduce preview resolution or use proxy editing | | Export fails with large video | Memory limits exceeded | Reduce resolution or split into shorter segments | | H.265 transparency not working | Windows platform limitation | Use H.264 or process on macOS | | Mobile browser video not working | Mobile browsers don't support video editing | Use native mobile SDK instead | | Export size rejected | Exceeds device GPU texture limits | Query `getMaxExportSize()` and reduce dimensions | ## API Reference | Method | Description | | ---------------------------------- | -------------------------------------------------------- | | `engine.editor.getMaxExportSize()` | Query the maximum export dimensions supported by the device | | `engine.editor.getAvailableMemory()` | Get available memory in bytes for video processing | | `engine.editor.getUsedMemory()` | Get current memory usage in bytes | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Videos Overview" description: "Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/overview-b06512/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Overview](https://img.ly/docs/cesdk/sveltekit/create-video/overview-b06512/) --- In addition to static designs, CE.SDK also allows you to create and edit videos. Working with videos introduces the concept of time into the scene. Each page in the scene has its own time axis within which its children can be placed. The `"playback/time"` property of each page controls the progress of time through the page. In order to add videos to your pages, you can add a block with a `"//ly.img.ubq/fill/video"` fill. As the playback time of the page progresses, the corresponding point in time of the video fill is rendered by the block. You can also customize the video fill's trim in order to control the portion of the video that should be looped while the block is visible. `//ly.img.ubq/audio` blocks can be added to the page in order to play an audio file during playback. The `playback/timeOffset` property controls after how many seconds the audio should begin to play, while the duration property defines how long the audio should play. The same APIs can be used for other design blocks as well, such as text or graphic blocks. Finally, the whole page can be exported as a video file using the `block.exportVideo` function. ## A Note on Browser Support Video editing heavily relies on modern features like web codecs. A detailed list of supported browser versions can be found in our [Supported Browsers](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/). Please also take note of [possible restrictions based on the host platform](https://img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a/) browsers are running on. ## Creating the Scene First, we create a scene by calling the `scene.create()` API. Then we create a page, add it to the scene and define its dimensions. This page will hold our composition. ```javascript const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.appendChild(scene, page); engine.block.setWidth(page, 1280); engine.block.setHeight(page, 720); ``` ## Setting Page Durations Next, we define the duration of the page using the `setDuration(block: number, duration: number): void` API to be 20 seconds long. This will be the total duration of our exported video in the end. ```javascript engine.block.setDuration(page, 20); ``` ## Adding Videos In this example, we want to show two videos, one after the other. For this, we first create two graphic blocks and assign two `'video'` fills to them. ```javascript const video1 = engine.block.create('graphic'); engine.block.setShape(video1, engine.block.createShape('rect')); const videoFill = engine.block.createFill('video'); engine.block.setString( videoFill, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v4/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4' ); engine.block.setFill(video1, videoFill); const video2 = engine.block.create('graphic'); engine.block.setShape(video2, engine.block.createShape('rect')); const videoFill2 = engine.block.createFill('video'); engine.block.setString( videoFill2, 'fill/video/fileURI', 'https://cdn.img.ly/assets/demo/v4/ly.img.video/videos/pexels-kampus-production-8154913.mp4' ); engine.block.setFill(video2, videoFill2); ``` ## Creating a Track While we could add the two blocks directly to the page and and manually set their sizes and time offsets, we can alternatively also use the `track` block to simplify this work. A `track` automatically adjusts the time offsets of its children to make sure that they play one after another without any gaps, based on each child's duration. Tracks themselves cannot be selected directly by clicking on the canvas, nor do they have any visual representation. We create a `track` block, add it to the page and add both videos in the order in which they should play as the track's children. Next, we use the `fillParent` API, which will resize all children of the track to the same dimensions as the page. The dimensions of a `track` are always derived from the dimensions of its children, so you should not call the `setWidth` or `setHeight` APIs on a track, but on its children instead if you can't use the `fillParent` API. ```javascript const track = engine.block.create('track'); engine.block.appendChild(page, track); engine.block.appendChild(track, video1); engine.block.appendChild(track, video2); engine.block.fillParent(track); ``` By default, each block has a duration of 5 seconds after it is created. If we want to show it on the page for a different amount of time, we can use the `setDuration` API. Note that we can just increase the duration of the first video block to 15 seconds without having to adjust anything about the second video. The `track` takes care of that for us automatically so that the second video starts playing after 15 seconds. ```javascript engine.block.setDuration(video1, 15); ``` If the video is longer than the duration of the graphic block that it's attached to, it will cut off once the duration of the graphic is reached. If it is too short, the video will automatically loop for as long as its graphic block is visible. We can also manually define the portion of our video that should loop within the graphic using the `setTrimOffset(block: number, offset: number): void` and `setTrimLength(block: number, length: number): void` APIs. We use the trim offset to cut away the first second of the video and the trim length to only play 10 seconds of the video. Since our graphic is 15 seconds long, the trimmed video will be played fully once and then start looping for the remaining 5 seconds. ```javascript /* Make sure that the video is loaded before calling the trim APIs. */ await engine.block.forceLoadAVResource(videoFill); engine.block.setTrimOffset(videoFill, 1); engine.block.setTrimLength(videoFill, 10); ``` We can control if a video will loop back to its beginning by calling `setLooping(block: number, looping: boolean): void`. Otherwise, the video will simply hold its last frame instead and audio will stop playing. Looping behavior is activated for all blocks by default. ```javascript engine.block.setLooping(videoFill, true); ``` ## Audio If the video of a video fill contains an audio track, that audio will play automatically by default when the video is playing. We can mute it by calling `setMuted(block: number, muted: boolean): void`. ```javascript engine.block.setMuted(videoFill, true); ``` We can also add audio-only files to play together with the contents of the page by adding an `'audio'` block to the page and assigning it the URL of the audio file. ```javascript const audio = engine.block.create('audio'); engine.block.appendChild(page, audio); engine.block.setString( audio, 'audio/fileURI', 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a' ); ``` We can adjust the volume level of any audio block or video fill by calling `setVolume(block: number, volume: number): void`. The volume is given as a fraction in the range of 0 to 1. ```javascript /* Set the volume level to 70%. */ engine.block.setVolume(audio, 0.7); ``` By default, our audio block will start playing at the very beginning of the page. We can change this by specifying how many seconds into the scene it should begin to play using the `setTimeOffset(block: number, offset: number): void` API. ```javascript /* Start the audio after two seconds of playback. */ engine.block.setTimeOffset(audio, 2); ``` By default, our audio block will have a duration of 5 seconds. We can change this by specifying its duration in seconds by using the `setDuration(block: number, duration: number): void` API. ```javascript /* Give the Audio block a duration of 7 seconds. */ engine.block.setDuration(audio, 7); ``` ## Exporting Video You can start exporting the entire page as a video file by calling `exportVideo()`. The encoding process will run in the background. You can get notified about the progress of the encoding process by the `progressCallback`. It will be called whenever another frame has been encoded. Since the encoding process runs in the background the engine will stay interactive. So, you can continue to use the engine to manipulate the scene. Please note that these changes won't be visible in the exported video file because the scene's state has been frozen at the start of the export. ```javascript /* Export page as mp4 video. */ const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download video blob. */ let anchor = document.createElement('a'); anchor.href = URL.createObjectURL(videoBlob); anchor.download = 'exported-video.mp4'; anchor.click(); ``` ## Exporting Audio You can export just the audio from your video scene by calling `exportAudio()`. This allows you to extract the audio track separately, whether from an entire page, a single audio block, a video block with audio, or a track containing multiple audio sources. The audio export process runs in a background worker, similar to video export, keeping the main engine responsive. You can monitor the progress through the `onProgress` callback. ```javascript /* Export page audio as an WAV audio. */ const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/wav', onProgress: (renderedFrames, encodedFrames, totalFrames) => { console.log( 'Rendered', renderedFrames, 'frames and encoded', encodedFrames, 'frames out of', totalFrames ); } }); /* Download audio blob. */ anchor = document.createElement('a'); anchor.href = URL.createObjectURL(audioBlob); anchor.download = 'exported-audio.wav'; anchor.click(); ``` --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video and Audio Timeline Web Editor" description: "Use the timeline editor to arrange and edit video clips, audio, and animations frame by frame." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/timeline-editor-912252/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Timeline Editor](https://img.ly/docs/cesdk/sveltekit/create-video/timeline-editor-912252/) --- The CreativeEditor SDK (CE.SDK) offers features for editing the video timeline, the horizontal layout where you arrange video, audio, and effects in the sequence they play. This tutorial will help you create advanced video editing tools for high-quality video exports. This tutorial focuses on the user interface components. For programmatic timeline manipulation, refer to the [Video Overview](https://img.ly/docs/cesdk/sveltekit/create-video/overview-b06512/) guide. ## When to Use Use the CE.SDK timeline features in web applications that incorporate the following tools: - Video montages - Marketing video editing - Social media content creation ## What You’ll Learn This tutorial will show you how to: - The video timeline works. - To create scenes for video editing. - To manage video layers (tracks). - To edit a clip’s duration and offset. - To manage video playback. - To generate and display video thumbnails. ## How the Timeline Works This tutorial refers to the timeline, which is the horizontal area below the video editing canvas. The video timeline displays: - All clips on parallel tracks - A playhead for navigation - Controls for playback and editing Use the visual timeline for editing actions like: - Arranging clips along a time axis to control when each element **appears**. - Trimming clips to change their duration. - Layer content visually. ### Activate CE.SDK Video Editing To work with the CE.SDK Editor for video editing, set up the scene as follows: ```ts import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource, } from '@cesdk/cesdk-js/plugins'; // Add default asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Add demo and upload sources await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.audio.*', 'ly.img.image.*', 'ly.img.templates.video.*', 'ly.img.video.*' ] }) ); await cesdk.actions.run('scene.create'); ``` This tells the CreativeEditor: - To load demo video assets to test the editor. - To create a scene, ready for editing. ### Open/Close the Timeline Editing area The default CreativeEditor settings display the timeline when launching the UI. Close it to increase canvas space when the scene doesn’t need timeline editing. To close it, click the **Timeline** toggle: To open it and access the visual timeline editing tools, click the same toggle: ### Timeline Structure The timeline’s structure in the CE.SDK is the following: 1. Scene (root block) 2. Pages (as video segments) 3. Tracks (as parallel layers) 4. Clips (as graphic blocks) ### Track Structure The track is a container that handles the content layer. The timeline organizes content into three track types: - Clip tracks (for video content) - Overlay track (for text and graphics over the video) - Audio tracks The order in which track appears determines its position in the scene: - Moving a track to the top brings it to the front of the scene. - Moving a track to the bottom of the timeline sends the content the back of the scene. ### Control the Content Position You can adjust the position of the content using the vertical playhead line, which indicates the current playhead time. The playhead moves along the timeline, displaying the time code. Change the playhead position (when the clip starts playing) by either: - Clicking on any area in the time ruler. - Dragging the playhead with your cursor. ### Scroll and Zoom on the Timeline Adjust the time scale to increase the level of details per frame: 1. Click anywhere in the timeline area. 2. Zoom into the timeline using: - Keyboard shortcuts - A mouse - A trackpad When zoomed in, the clip stretches visually—each pixel now represents fewer milliseconds—so you can fine-tune edits frame by frame. ## Control How the Clips Play ### Play/Pause the Scene The playback bar contains: - The **play/pause button** that plays the clip from the current playhead position. - A **loop toggle** that repeats the video when activated. - The **current timestamp** The scene plays while synchronizing: - All videos - Overlays - Audio ### Preview Frames Drag and drop (scrub) the playhead back and forth to preview frames without playing the clip in real time. This allows you to quickly find the exact moment you want to edit. The timestamp is the current playhead time in HH:MM:SS:FF format. ## Edit Video Clips The CreativeEditor’s timeline allows users to visually edit clips and scenes in the browser. This section lists all timeline editing features. ### Select Clips Before editing any clip, you need to select it to apply modifications to it. To **select a clip**, click it either: - From the page - From the timeline Selecting multiple clips at once is available either: - With cursor clicks on each clip while holding modifier keys. - By drawing a frame in the scene with the cursor. Selecting a clip reveals editing handles to: - Crop the clip. - Flip the clip. - Trim the clip. ### Edit Clip’s Duration In the timeline, selected clips show drag handles at their beginning and end. Use these handles based on your goals: - Trim the clip from the beginning: use the left handle (at the start of the clip). - Trim the clip from the end: use the right handle (at the end of the clip). This operation is called **“trimming” a clip**. As you move the clip, its position on the timeline automatically updates. Trimming shortens the clip, and the cut portions: - Don’t play anymore. - Disappear from the timeline. ### Split Clips The Split Control splits the selected clip into two separate clips at the playhead. Each resulting clip is then independently editable. **Splitting doesn’t remove any part of the original content.** ## Add Content to the Scene Once you’ve edited the clips, you can add more elements to the scene to customize it further, such as: - Additional clips - Audio tracks - Graphics and text ### Add Another Clip The web version of the CreativeEditor allows you to add more clips to the scene in two ways: - By clicking the "Add Clip" button: 1. Opens the video assets gallery. 2. Automatically adds any selected clips from the gallery to the timeline. - By dragging and dropping from your computer to either: 1. The page 2. The timeline Dragging the clip highlights the zone before dropping it. The choice of the zone makes no difference: the clip’s position is automatically set at the beginning of the timeline. You can then reposition and edit it as needed. ### Add Audio and Overlays Furthermore, there are two types of content that you can incorporate into the setting: - Overlays (text, images, stickers) - Audio **Add the new content** to the scene by either: - Clicking the kind of content to add from the **lateral menu**. - Using the **drag and drop** feature from your computer or another source. Each type of content appears automatically on its own track, at the start of the timeline. ## Arrange Clips Use the CreativeEditor UI’s timeline to edit: - The order in which clips appear. - Each clip starting point. - Using advanced settings. ### Reorder Clips Drag clips along the horizontal axis to move them earlier or later in the timeline. This makes a clip’s order relative to the other clip change. The CreativeEditor enhances visual clip arrangement in the timeline by: - Auto-adjusting positions to prevent overlapping clips on the same track. - Showing the clip’s predicted position using drop indicators. ### Edit the Clip’s Starting Point Each clip’s position along the horizontal axis indicates its start time in the composition. To change the start time of a clip, drag it either: - Left to make it start **earlier**. - Right to make it start **later**. Gaps between clips display as empty frames showing the background color when the scene plays. ### Change the Background color To change the background color, click the **Background** button on the left side of the play bar. This action opens a full color editing menu to customize: - Color settings (RGB, CMYK, Hex, Hue) - Transparency - Solid or gradients - Color picking from the scene This menu provides an option to **deactivate the background** as well. Deactivating the background makes the scene play on a transparent background. ## Configure the Timeline ### Activate/Deactivate the Timeline The CreativeEditor SDK ships a UI with the timeline editor activated. To change the settings and deactivate the timeline , use the `ly.img.video.timeline` feature flag: ```ts // Enable the timeline (default for video scenes) cesdk.feature.enable('ly.img.video.timeline'); ``` ```ts // Disable the timeline for a simplified interface cesdk.feature.disable('ly.img.video.timeline'); ``` Pass the option to selectively show or hide the timeline based on a condition: ```ts // Show timeline and conditionally enable split controls cesdk.feature.set('ly.img.video.timeline', true); cesdk.feature.set('ly.img.video.controls.split', ({ engine }) => { const selected = engine.block.findAllSelected(); return selected.length === 1; }); ``` ### Hide or Show Tracks Simplify the CreativeEditor interface by leveraging the track visibility settings. Hide or display tracks based on specific use cases. **Enable** video features with: ```ts cesdk.feature.enable('ly.img.video.clips'); ``` **Hide** video feature with: ```ts cesdk.feature.disable('ly.img.video.clips'); ``` This will hide **Display** overlays tracks with: ```ts cesdk.feature.enable('ly.img.video.overlays'); ``` **Hide** overlay tracks with: ```ts cesdk.feature.disable('ly.img.video.overlays'); ``` **Display** audio tracks with: ```ts cesdk.feature.enable('ly.img.video.audio'); ``` **Hide** audio tracks with: ```ts cesdk.feature.disable('ly.img.video.audio'); ``` **Display** all tracks with: ```ts cesdk.feature.enable([ 'ly.img.video.clips', 'ly.img.video.overlays', 'ly.img.video.audio' ]); ``` **Hide** all tracks with: ```ts cesdk.feature.disable([ 'ly.img.video.clips', 'ly.img.video.overlays', 'ly.img.video.audio' ]); ``` ### Configure the Play Bar Simplify the play bar by hiding or displaying controls in the UI: **Display** the play bar with: ```ts cesdk.feature.enable('ly.img.video.controls.playback'); ``` **Hide** the play bar with: ```ts cesdk.feature.disable('ly.img.video.controls.playback'); ``` **Display** the loop control with: ```ts cesdk.feature.enable('ly.img.video.controls.loop'); ``` **Hide** the loop control with: ```ts cesdk.feature.disable('ly.img.video.controls.loop'); ``` **Display** the zoom on the timeline with: ```ts cesdk.feature.enable('ly.img.video.controls.timelineZoom'); ``` **Hide** the zoom into the timeline with: ```ts cesdk.feature.disable('ly.img.video.controls.timelineZoom'); ``` ### Fine-tune Editing Actions Restrict or allow editing actions by hiding or displaying the editing controls: **Hide** the split button with: ```ts cesdk.feature.disable('ly.img.video.controls.split'); ``` **Hide** the **Add Clip** button with: ```ts cesdk.feature.disable('ly.img.video.addClip'); ``` **Hide** the background button with: ```ts cesdk.feature.disable('ly.img.video.controls.background'); ``` **Activate** all video features at once using global patterns with `/*`: ```ts // Enable all video features cesdk.feature.enable('ly.img.video.*'); ``` Or **deactivate** video features at once: ```ts // Disable all video control features cesdk.feature.disable('ly.img.video.*'); ``` ### Activate Features Dynamically You can activate or deactivate timeline features dynamically, instead of hard-coding their **on/off** state. The following example detects the scene state: - When a clip is selected, it activates the Split button. - When nothing is selected, it hides the Split button. ```ts // Disable split control when nothing is selected cesdk.feature.set('ly.img.video.controls.split', ({ engine }) => { const selected = engine.block.findAllSelected(); return selected.length === 1; }); ``` ### Feature Reference | Feature ID | Description | |------------|-------------| | `ly.img.video.timeline` | Show or hide the entire timeline panel | | `ly.img.video.clips` | Show or hide the video clips track | | `ly.img.video.overlays` | Show or hide the overlay track | | `ly.img.video.audio` | Show or hide the audio track | | `ly.img.video.addClip` | Enable or disable adding new clips | | `ly.img.video.controls` | Base feature for all video controls | | `ly.img.video.controls.toggle` | Show or hide timeline collapse/expand button | | `ly.img.video.controls.playback` | Show or hide play/pause and timestamp | | `ly.img.video.controls.loop` | Show or hide loop toggle | | `ly.img.video.controls.split` | Show or hide split clip control | | `ly.img.video.controls.background` | Show or hide background color controls | | `ly.img.video.controls.timelineZoom` | Show or hide zoom controls | ## Troubleshooting | Issue | Solution| | ----- | ------- | | Timeline not displaying | ・ Check that `ly.img.video.timeline` feature is enabled. | | Trim handles not displaying | ・ Click the clip first to reveal handles.
・ Check if the clip contains video/audio content. | | Play not starting | ・ Ensure the video has loaded.
・ Check the browser console for codec errors.
・ Check that the playhead falls within the page duration. | | Split not working | ・ Check that you’ve selected the clip to split.
・ Check that the playhead is within the selected clip’s duration
. Make sure you’ve enabled `ly.img.video.controls.split`. | ## Next Steps - [Trim Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) — Detailed trimming techniques, including frame-accurate editing. - [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) — Master volume, playback speed, and timing. - [Activate or Deactivate Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) - Full feature flag reference. - [Compress and Export the Video](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/compress-29105e/). --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Update Caption Presets" description: "Extend video captions with custom caption styles using simple content.json updates" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/create-video/update-caption-presets-e9c385/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Update Caption Presets](https://img.ly/docs/cesdk/sveltekit/create-video/update-caption-presets-e9c385/) --- Extend CE.SDK's video caption feature with custom caption presets by updating the content.json file. Caption presets let your users apply predefined styles to video captions with a single click.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-update-caption-presets-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-update-caption-presets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-update-caption-presets-browser/) Video captions have become an essential part of digital content, improving accessibility and engagement. With CE.SDK's caption presets feature, you can offer your users a selection of predefined caption styles that they can apply with a single click. This guide shows you how to create styled text blocks, serialize them as preset files, and structure the content.json to make them available in the caption presets panel. ```typescript file=@cesdk_web_examples/guides-create-video-update-caption-presets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Update Caption Presets Guide * * Demonstrates creating custom caption presets in CE.SDK: * - Creating a styled text block as a preset base * - Applying neon glow styling with colors and drop shadow * - Serializing the block for use as a preset file * - Understanding the content.json structure for caption presets */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // Create a text block to use as the preset base // Text blocks support all the styling properties needed for captions const textBlock = engine.block.create('text'); // Set sample caption text engine.block.setString(textBlock, 'text/text', 'NEON GLOW'); // Position and size the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 200); engine.block.setWidth(textBlock, 600); engine.block.setHeightMode(textBlock, 'Auto'); // Style the text with a bright neon cyan color // This will be the fill/solid/color property in the preset engine.block.setColor(textBlock, 'fill/solid/color', { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }); // Set font properties for the caption style engine.block.setFloat(textBlock, 'text/fontSize', 48); // Use a bold font for better visibility // Load and set a typeface const typefaceResult = await engine.asset.findAssets('ly.img.typeface', { query: 'Roboto', page: 0, perPage: 10 }); if (typefaceResult.assets.length > 0) { const typefaceAsset = typefaceResult.assets[0]; const typeface = typefaceAsset.payload?.typeface; if (typeface && typeface.fonts?.[0]?.uri) { engine.block.setFont(textBlock, typeface.fonts[0].uri, typeface); } } // Add a glowing drop shadow effect for the neon look // This creates the characteristic neon glow effect engine.block.setDropShadowEnabled(textBlock, true); // Set glow color (bright cyan to match text) engine.block.setColor(textBlock, 'dropShadow/color', { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }); // Configure shadow properties for a soft glow engine.block.setFloat(textBlock, 'dropShadow/blurRadius/x', 20); engine.block.setFloat(textBlock, 'dropShadow/blurRadius/y', 20); engine.block.setFloat(textBlock, 'dropShadow/offset/x', 0); engine.block.setFloat(textBlock, 'dropShadow/offset/y', 0); // Optionally add a semi-transparent dark background // This helps the caption stand out against video content engine.block.setBackgroundColorEnabled(textBlock, true); engine.block.setColor(textBlock, 'backgroundColor/color', { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }); // Add the styled text block to the page const pages = engine.block.findByType('page'); if (pages.length > 0) { engine.block.appendChild(pages[0], textBlock); } // Select the block and zoom to it so it's visible in the editor engine.block.select(textBlock); await engine.scene.zoomToBlock(textBlock, { padding: 40 }); // Serialize the styled text block to create a preset file // This serialized string can be saved as a .blocks or .preset file // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const serializedPreset = await engine.block.saveToString( [textBlock], ['buffer', 'http', 'https', 'bundle'] ); // eslint-disable-next-line no-console console.log('=== Serialized Preset ==='); // eslint-disable-next-line no-console console.log('Save this as a .preset file (e.g., neon-glow.preset):'); // eslint-disable-next-line no-console console.log(serializedPreset); // Example content.json entry for the custom preset // This shows the structure needed to add the preset to content.json const contentJsonEntry = { id: '//ly.img.caption.presets/neon-glow', label: { en: 'Neon Glow' }, meta: { uri: '{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset', thumbUri: '{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png', mimeType: 'application/ubq-blocks-string' }, payload: { properties: [ { type: 'Color', property: 'fill/solid/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 } }, { type: 'Color', property: 'dropShadow/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 } }, { type: 'Color', property: 'backgroundColor/color', value: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }, defaultValue: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 } } ] } }; // eslint-disable-next-line no-console console.log('\n=== content.json Entry ==='); // eslint-disable-next-line no-console console.log('Add this entry to your content.json assets array:'); // eslint-disable-next-line no-console console.log(JSON.stringify(contentJsonEntry, null, 2)); // Example of a complete content.json file structure const completeContentJson = { version: '3.0.0', id: 'ly.img.caption.presets', assets: [contentJsonEntry] }; // eslint-disable-next-line no-console console.log('\n=== Complete content.json Example ==='); // eslint-disable-next-line no-console console.log(JSON.stringify(completeContentJson, null, 2)); // eslint-disable-next-line no-console console.log('\n=== Caption Preset Guide ==='); // eslint-disable-next-line no-console console.log( 'The styled text block above demonstrates a "Neon Glow" caption preset.' ); // eslint-disable-next-line no-console console.log('To use this preset:'); // eslint-disable-next-line no-console console.log('1. Save the serialized preset string as a .preset file'); // eslint-disable-next-line no-console console.log('2. Create a thumbnail image showing the preset appearance'); // eslint-disable-next-line no-console console.log('3. Add the content.json entry to your assets folder'); // eslint-disable-next-line no-console console.log('4. Configure CE.SDK baseURL to point to your assets location'); } } export default Example; ``` This guide covers how to understand the caption presets folder structure, create custom caption styles from text blocks, serialize presets for hosting, define customizable properties, and configure CE.SDK to load your custom presets. ## Understanding the Caption Presets Structure ### Folder Organization CE.SDK's caption presets use a specific directory structure that the engine expects when loading presets. The base path is `assets/v5/ly.img.caption.presets/` and contains: ``` assets/v5/ly.img.caption.presets/ ├── content.json # Master index of all presets ├── presets/ # Folder containing preset files │ ├── my-custom-preset.preset # Serialized caption block with styling │ └── ... └── thumbnails/ # Folder containing preview images ├── my-custom-preset.png # Preview image for preset └── ... ``` The main `content.json` file acts as an index that lists all available presets with their metadata. When CE.SDK loads caption presets, it reads this file to discover available presets and their locations. ### content.json Format The content.json file follows a specific format with version, asset source ID, and an assets array: ```json { "version": "3.0.0", "id": "ly.img.caption.presets", "assets": [ { "id": "ly.img.caption.presets.my-preset", "label": { "en": "My Preset" }, "meta": { "uri": "{{base_url}}/ly.img.caption.presets/presets/my-preset.preset", "thumbUri": "{{base_url}}/ly.img.caption.presets/thumbnails/my-preset.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [] } } ] } ``` Each asset entry requires a unique ID with namespace, localized label, meta with URIs and mime type, and optional payload properties for customization. ## Creating Custom Caption Presets ### Designing a Caption Style We create a styled text block as the basis for our preset. Text blocks support all the styling properties needed for captions including colors, fonts, backgrounds, shadows, and effects. ```typescript highlight-create-text-block // Create a text block to use as the preset base // Text blocks support all the styling properties needed for captions const textBlock = engine.block.create('text'); // Set sample caption text engine.block.setString(textBlock, 'text/text', 'NEON GLOW'); // Position and size the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 200); engine.block.setWidth(textBlock, 600); engine.block.setHeightMode(textBlock, 'Auto'); ``` We position and size the text block, then set sample caption text. The text block serves as our canvas for applying the styling that will define the preset's appearance. ### Styling with Colors and Fonts We style the text with colors and configure font properties. The fill color becomes the `fill/solid/color` property in the preset: ```typescript highlight-style-text-color // Style the text with a bright neon cyan color // This will be the fill/solid/color property in the preset engine.block.setColor(textBlock, 'fill/solid/color', { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }); ``` We also configure font size and load a typeface. When users apply this preset, their captions will inherit these font settings: ```typescript highlight-style-font // Set font properties for the caption style engine.block.setFloat(textBlock, 'text/fontSize', 48); // Use a bold font for better visibility // Load and set a typeface const typefaceResult = await engine.asset.findAssets('ly.img.typeface', { query: 'Roboto', page: 0, perPage: 10 }); if (typefaceResult.assets.length > 0) { const typefaceAsset = typefaceResult.assets[0]; const typeface = typefaceAsset.payload?.typeface; if (typeface && typeface.fonts?.[0]?.uri) { engine.block.setFont(textBlock, typeface.fonts[0].uri, typeface); } } ``` ### Adding Visual Effects We add a glowing drop shadow effect for the neon look. Drop shadow creates the characteristic glow effect that makes caption presets visually distinctive: ```typescript highlight-style-drop-shadow // Add a glowing drop shadow effect for the neon look // This creates the characteristic neon glow effect engine.block.setDropShadowEnabled(textBlock, true); // Set glow color (bright cyan to match text) engine.block.setColor(textBlock, 'dropShadow/color', { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }); // Configure shadow properties for a soft glow engine.block.setFloat(textBlock, 'dropShadow/blurRadius/x', 20); engine.block.setFloat(textBlock, 'dropShadow/blurRadius/y', 20); engine.block.setFloat(textBlock, 'dropShadow/offset/x', 0); engine.block.setFloat(textBlock, 'dropShadow/offset/y', 0); ``` Optionally, we add a semi-transparent background to help the caption stand out against video content: ```typescript highlight-style-background // Optionally add a semi-transparent dark background // This helps the caption stand out against video content engine.block.setBackgroundColorEnabled(textBlock, true); engine.block.setColor(textBlock, 'backgroundColor/color', { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }); ``` ### Serializing the Preset We serialize the styled text block using `block.saveToString()`. This creates a serialized string that can be saved as a `.preset` or `.blocks` file: ```typescript highlight-serialize-preset // Serialize the styled text block to create a preset file // This serialized string can be saved as a .blocks or .preset file // Include 'bundle' scheme to allow serialization of blocks with bundled fonts const serializedPreset = await engine.block.saveToString( [textBlock], ['buffer', 'http', 'https', 'bundle'] ); // eslint-disable-next-line no-console console.log('=== Serialized Preset ==='); // eslint-disable-next-line no-console console.log('Save this as a .preset file (e.g., neon-glow.preset):'); // eslint-disable-next-line no-console console.log(serializedPreset); ``` The serialized string contains all block properties and styling. Save this output as a file (e.g., `neon-glow.preset`) and create a thumbnail image showing the preset appearance. ## Defining Customizable Properties ### Color Properties We define which properties users can customize without changing the entire preset. Color properties allow users to modify specific color aspects of a preset: ```typescript highlight-content-json-structure // Example content.json entry for the custom preset // This shows the structure needed to add the preset to content.json const contentJsonEntry = { id: '//ly.img.caption.presets/neon-glow', label: { en: 'Neon Glow' }, meta: { uri: '{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset', thumbUri: '{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png', mimeType: 'application/ubq-blocks-string' }, payload: { properties: [ { type: 'Color', property: 'fill/solid/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 1.0 } }, { type: 'Color', property: 'dropShadow/color', value: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 }, defaultValue: { r: 0.0, g: 1.0, b: 1.0, a: 0.8 } }, { type: 'Color', property: 'backgroundColor/color', value: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 }, defaultValue: { r: 0.0, g: 0.0, b: 0.1, a: 0.7 } } ] } }; // eslint-disable-next-line no-console console.log('\n=== content.json Entry ==='); // eslint-disable-next-line no-console console.log('Add this entry to your content.json assets array:'); // eslint-disable-next-line no-console console.log(JSON.stringify(contentJsonEntry, null, 2)); ``` Each property in the `payload.properties` array needs: - `type`: Must be `"Color"` for color properties - `property`: Property path (e.g., `"fill/solid/color"`, `"backgroundColor/color"`, `"dropShadow/color"`) - `value`: Current RGBA color object with `r`, `g`, `b`, `a` values (0-1 range) - `defaultValue`: Initial RGBA color object ### Supported Property Paths Available property paths for caption customization: - `fill/solid/color`: Text fill color - `backgroundColor/color`: Background color behind text - `dropShadow/color`: Drop shadow color - `stroke/color`: Stroke/outline color ## Updating the content.json File ### Adding a New Preset Entry Add a new object to the `assets` array with all required fields. The complete structure for a preset entry: ```json { "id": "ly.img.caption.presets.neon-glow", "label": { "en": "Neon Glow" }, "meta": { "uri": "{{base_url}}/ly.img.caption.presets/presets/neon-glow.preset", "thumbUri": "{{base_url}}/ly.img.caption.presets/thumbnails/neon-glow.png", "mimeType": "application/ubq-blocks-string" }, "payload": { "properties": [ { "type": "Color", "property": "fill/solid/color", "value": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 1.0 }, "defaultValue": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 1.0 } }, { "type": "Color", "property": "dropShadow/color", "value": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 0.8 }, "defaultValue": { "r": 0.0, "g": 1.0, "b": 1.0, "a": 0.8 } } ] } } ``` Ensure the `mimeType` is set to `"application/ubq-blocks-string"` and use the `{{base_url}}` placeholder for dynamic path resolution. ### Complete content.json Example The complete content.json file structure wraps preset entries in the assets array: ```typescript highlight-complete-content-json // Example of a complete content.json file structure const completeContentJson = { version: '3.0.0', id: 'ly.img.caption.presets', assets: [contentJsonEntry] }; // eslint-disable-next-line no-console console.log('\n=== Complete content.json Example ==='); // eslint-disable-next-line no-console console.log(JSON.stringify(completeContentJson, null, 2)); ``` ## Hosting and Serving Custom Presets ### Server Setup Prepare the folder structure and upload files to your server: 1. Create folder structure matching `assets/v5/ly.img.caption.presets/` 2. Upload `content.json` to the root folder 3. Upload `.preset` files to `presets/` subfolder 4. Upload thumbnail images to `thumbnails/` subfolder 5. Ensure files are accessible via HTTP/HTTPS 6. Configure CORS headers if serving cross-origin ### Verifying File Access Test that all files are accessible before configuring CE.SDK: - Access `content.json` directly in browser - Access preset files and thumbnails via their URLs - Check browser console for CORS errors ## Loading Custom Presets into CE.SDK ### Base URL Configuration To load your custom caption presets into CE.SDK, you need to tell the engine where to find your updated content.json file. Since CE.SDK already includes a caption presets asset source with the ID "ly.img.caption.presets", we'll update this existing source rather than creating a new one. Set the base URL to point to your asset hosting location. CE.SDK automatically looks for `ly.img.caption.presets/content.json` relative to the base URL: ```typescript const config = { baseURL: 'https://your-server.com/assets/' }; CreativeEditorSDK.create('#cesdk_container', config).then(async (cesdk) => { // Caption presets load automatically from baseURL + 'ly.img.caption.presets/content.json' }); ``` Your custom presets will seamlessly integrate with any built-in presets and automatically appear in the caption presets panel in the UI. No additional source registration is needed when replacing the default presets. ## Troubleshooting ### Preset Not Loading - Verify `content.json` is accessible at expected URL - Check browser console for 404 errors on preset files - Ensure `mimeType` is set to `"application/ubq-blocks-string"` - Verify `{{base_url}}` placeholder is used correctly ### Preset Styles Not Applying - Ensure preset was serialized from a text block (not other block types) - Verify the serialized block contains styling properties - Check that property paths in `payload.properties` are correct ### Thumbnail Not Displaying - Verify thumbnail file exists at the `thumbUri` path - Check image format is PNG - Ensure CORS headers allow image loading ### Custom Colors Not Working - Verify `properties` array structure in content.json - Check property `type` is `"Color"` - Ensure `value` and `defaultValue` have correct RGBA format (0-1 range) ## API Reference | Method | Category | Purpose | | -------------------------------------------- | -------- | ------------------------------------------- | | `engine.block.create('text')` | Block | Create text block for preset styling | | `engine.block.saveToString(blocks)` | Block | Serialize styled block to preset format | | `engine.block.setColor(id, property, color)` | Block | Set color property (fill, background, etc.) | | `engine.block.setBackgroundColorEnabled()` | Block | Enable background color | | `engine.block.setDropShadowEnabled()` | Block | Enable drop shadow | | `engine.block.setFloat(id, property, value)` | Block | Set numeric properties (font size, etc.) | | `engine.block.setString(id, property, val)` | Block | Set string properties (text, font URI) | | `engine.asset.findAssets(sourceId, query)` | Asset | Find assets like typefaces | | `CreativeEngine.init(config)` | Engine | Initialize engine with base URL config | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Image" description: "Use CE.SDK to crop, transform, annotate, or enhance images with editing tools and programmatic APIs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) --- --- ## Related Pages - [Image Editor SDK](https://img.ly/docs/cesdk/sveltekit/edit-image/overview-5249ea/) - The CreativeEditor SDK provides a robust and user-friendly solution for photo and image editing. - [Replace Colors](https://img.ly/docs/cesdk/sveltekit/edit-image/replace-colors-6ede17/) - Replace specific colors in images using CE.SDK's Recolor and Green Screen effects with programmatic control. - [Remove Background](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) - Remove image backgrounds to isolate subjects or prepare assets for compositing and reuse. - [Vectorize](https://img.ly/docs/cesdk/sveltekit/edit-image/vectorize-2b4c7f/) - Convert raster images into scalable vector graphics for flexible resizing and editing. - [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) - Crop, resize, rotate, scale, or flip images using CE.SDK's built-in transformation tools. - [Add Watermark](https://img.ly/docs/cesdk/sveltekit/edit-image/add-watermark-679de0/) - Add text and image watermarks to protect images, indicate ownership, or add branding using CE.SDK. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Watermark" description: "Add text and image watermarks to protect images, indicate ownership, or add branding using CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/add-watermark-679de0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Add Watermark](https://img.ly/docs/cesdk/sveltekit/edit-image/add-watermark-679de0/) --- Add text and image watermarks to designs programmatically using CE.SDK's block API.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-add-watermark-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-add-watermark-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-add-watermark-browser/) Watermarks protect intellectual property, indicate ownership, add branding, or mark content as drafts. CE.SDK supports two types of watermarks: **text watermarks** created from text blocks for copyright notices and brand names, and **image watermarks** created from graphic blocks with image fills for logos and symbols. ```typescript file=@cesdk_web_examples/guides-edit-image-add-watermark-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Watermark Guide * * Demonstrates adding text and image watermarks to designs: * - Creating text watermarks with custom styling * - Creating logo watermarks using graphic blocks * - Positioning watermarks side by side at the bottom * - Applying drop shadows for visibility * - Exporting watermarked designs */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a scene with custom page dimensions const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a gradient background for the page const gradientFill = engine.block.createFill('gradient/linear'); // Set a modern purple-to-cyan gradient engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.39, g: 0.4, b: 0.95, a: 1 }, stop: 0 }, // Indigo { color: { r: 0.02, g: 0.71, b: 0.83, a: 1 }, stop: 1 } // Cyan ]); // Set diagonal gradient direction (top-left to bottom-right) engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); // Apply gradient to page engine.block.setFill(page, gradientFill); // Create a centered title text const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Add Watermark'); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, titleText); // Style the title engine.block.setTextFontSize(titleText, 14); engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); // Center the title on the page const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, (pageHeight - titleHeight) / 2); // Create a text block for the watermark const textWatermark = engine.block.create('text'); // Set the watermark text content engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly'); // Left-align the text for the watermark engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Add the text block to the page engine.block.appendChild(page, textWatermark); // Set font size for the watermark engine.block.setTextFontSize(textWatermark, 4); // Set text color to white for contrast engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // Set opacity to make it semi-transparent engine.block.setOpacity(textWatermark, 0.8); // Set width mode to auto so text fits its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rect shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with a logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); // Apply the fill to the graphic block engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain the image within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Add to page engine.block.appendChild(page, logoWatermark); // Size the logo watermark const logoWidth = 80; const logoHeight = 50; engine.block.setWidth(logoWatermark, logoWidth); engine.block.setHeight(logoWatermark, logoHeight); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.8); // Position padding from edges const padding = 15; // Position text watermark at bottom-left engine.block.setPositionX(textWatermark, padding); engine.block.setPositionY(textWatermark, pageHeight - padding - 20); // Position logo watermark at top-right engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth); engine.block.setPositionY(logoWatermark, padding); // Add drop shadow to text watermark for better visibility engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowOffsetX(textWatermark, 1); engine.block.setDropShadowOffsetY(textWatermark, 1); engine.block.setDropShadowBlurRadiusX(textWatermark, 2); engine.block.setDropShadowBlurRadiusY(textWatermark, 2); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add drop shadow to logo watermark engine.block.setDropShadowEnabled(logoWatermark, true); engine.block.setDropShadowOffsetX(logoWatermark, 1); engine.block.setDropShadowOffsetY(logoWatermark, 1); engine.block.setDropShadowBlurRadiusX(logoWatermark, 2); engine.block.setDropShadowBlurRadiusY(logoWatermark, 2); engine.block.setDropShadowColor(logoWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add export button to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-watermarked', label: 'Export', icon: '@imgly/Download', onClick: async () => { // Export the watermarked design const blob = await engine.block.export(page, { mimeType: 'image/png' }); // Download the watermarked image await cesdk.utils.downloadFile(blob, 'image/png'); } } ] }); // Zoom to fit the page in view with padding and enable auto-fit await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to create text and logo watermarks, position them on a design, style them for visibility, and export the watermarked result. ## Setup and Prerequisites We start by initializing CE.SDK, loading asset sources, and creating a scene with a custom page size. The page provides the canvas where we'll add our watermarks. ```typescript highlight=highlight-setup const engine = cesdk.engine; // Create a scene with custom page dimensions const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); ``` We use `engine.scene.create('VerticalStack', {...})` to create a scene with custom page dimensions. The page dimensions are retrieved for positioning calculations later. ## Creating Text Watermarks Text watermarks display copyright notices, URLs, or brand names. We create a text block, set its content, and add it to the page. ```typescript highlight=highlight-create-text-watermark // Create a text block for the watermark const textWatermark = engine.block.create('text'); // Set the watermark text content engine.block.setString(textWatermark, 'text/text', '© 2024 img.ly'); // Left-align the text for the watermark engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Add the text block to the page engine.block.appendChild(page, textWatermark); ``` The `engine.block.create('text')` method creates a new text block. We set the text content using `engine.block.setString()` with the `'text/text'` property. ### Styling the Text We configure the font size, color, and opacity to make the watermark visible but unobtrusive. ```typescript highlight=highlight-style-text-watermark // Set font size for the watermark engine.block.setTextFontSize(textWatermark, 4); // Set text color to white for contrast engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // Set opacity to make it semi-transparent engine.block.setOpacity(textWatermark, 0.8); // Set width mode to auto so text fits its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); ``` Key styling options: - **Font size** - Use sizes between 14-18px for subtle watermarks - **Text color** - White or black depending on the image background - **Opacity** - Values between 0.5-0.7 provide a balanced, semi-transparent appearance - **Size mode** - Set to `'Auto'` so the block automatically fits its text content ### Positioning the Watermarks We calculate the watermark positions based on the page dimensions and place the logo and text side-by-side at the bottom center of the page. ```typescript highlight=highlight-position-text-watermark // Position padding from edges const padding = 15; // Position text watermark at bottom-left engine.block.setPositionX(textWatermark, padding); engine.block.setPositionY(textWatermark, pageHeight - padding - 20); // Position logo watermark at top-right engine.block.setPositionX(logoWatermark, pageWidth - padding - logoWidth); engine.block.setPositionY(logoWatermark, padding); ``` We retrieve the rendered frame dimensions using `engine.block.getFrameWidth()` and `engine.block.getFrameHeight()`, calculate the total width of both watermarks with spacing, then center them horizontally. The vertical position places them near the bottom with padding from the edge. ## Creating Logo Watermarks Logo watermarks use graphic blocks with image fills to display brand symbols or company logos. ```typescript highlight=highlight-create-logo-watermark // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rect shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with a logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); // Apply the fill to the graphic block engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain the image within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Add to page engine.block.appendChild(page, logoWatermark); ``` We create a graphic block, assign a rect shape, then create an image fill with the logo URI. The fill is applied to the graphic block before adding it to the page. ### Sizing the Logo We set fixed dimensions for the logo and apply opacity to match the text watermark. ```typescript highlight=highlight-size-logo-watermark // Size the logo watermark const logoWidth = 80; const logoHeight = 50; engine.block.setWidth(logoWatermark, logoWidth); engine.block.setHeight(logoWatermark, logoHeight); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.8); ``` A good rule is to size logos to 10-20% of the page width. This keeps them visible without dominating the design. ## Enhancing Visibility with Drop Shadows Drop shadows improve watermark readability against varied backgrounds by adding contrast. ```typescript highlight=highlight-add-drop-shadow // Add drop shadow to text watermark for better visibility engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowOffsetX(textWatermark, 1); engine.block.setDropShadowOffsetY(textWatermark, 1); engine.block.setDropShadowBlurRadiusX(textWatermark, 2); engine.block.setDropShadowBlurRadiusY(textWatermark, 2); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); // Add drop shadow to logo watermark engine.block.setDropShadowEnabled(logoWatermark, true); engine.block.setDropShadowOffsetX(logoWatermark, 1); engine.block.setDropShadowOffsetY(logoWatermark, 1); engine.block.setDropShadowBlurRadiusX(logoWatermark, 2); engine.block.setDropShadowBlurRadiusY(logoWatermark, 2); engine.block.setDropShadowColor(logoWatermark, { r: 0, g: 0, b: 0, a: 0.5 }); ``` Drop shadow parameters: - **Offset X/Y** - Distance from the block (2-4 pixels works well) - **Blur Radius X/Y** - Softness of the shadow (4-8 pixels for subtle effect) - **Color** - Black with 0.5 alpha provides soft contrast without being harsh ## Exporting Watermarked Images After adding watermarks, we add an export button to the navigation bar that downloads the watermarked image when clicked. ```typescript highlight=highlight-export-watermarked // Add export button to the navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-watermarked', label: 'Export', icon: '@imgly/Download', onClick: async () => { // Export the watermarked design const blob = await engine.block.export(page, { mimeType: 'image/png' }); // Download the watermarked image await cesdk.utils.downloadFile(blob, 'image/png'); } } ] }); ``` We use `cesdk.ui.insertOrderComponent()` to add a custom button to the editor's navigation bar. When clicked, `engine.block.export()` renders the page with all watermarks and returns a blob that `cesdk.utils.downloadFile()` downloads to the user's device. Supported formats include PNG, JPEG, and WebP. ## Troubleshooting **Watermark not visible** - Verify the block is within page bounds using position values - Check opacity is between 0.3-1.0 - Ensure `engine.block.appendChild()` was called to add the block to the page **Position appears incorrect** - Recalculate positions using current `pageWidth` and `pageHeight` - Account for watermark dimensions when calculating corner positions - Remember that coordinates start from the top-left corner **Text not legible** - Increase font size to at least 36px - Add a drop shadow for contrast against complex backgrounds - Increase opacity if the watermark is too faint **Logo quality issues** - Use a higher resolution source image for the logo - Avoid scaling the logo beyond its original dimensions ## API Reference | Method | Purpose | |--------|---------| | `engine.block.create(type)` | Create text or graphic blocks | | `engine.block.createShape(type)` | Create shapes for graphic blocks | | `engine.block.createFill(type)` | Create image fills for logos | | `engine.block.setString(id, property, value)` | Set text content or image URI | | `engine.block.setTextFontSize(id, size)` | Set text font size | | `engine.block.setTextColor(id, color)` | Set text color | | `engine.block.setOpacity(id, opacity)` | Set block transparency | | `engine.block.setPositionX(id, value)` | Set horizontal position | | `engine.block.setPositionY(id, value)` | Set vertical position | | `engine.block.setWidth(id, value)` | Set block width | | `engine.block.setHeight(id, value)` | Set block height | | `engine.block.getFrameWidth(id)` | Get rendered frame width | | `engine.block.getFrameHeight(id)` | Get rendered frame height | | `engine.block.setDropShadowEnabled(id, enabled)` | Enable drop shadow | | `engine.block.setDropShadowOffsetX(id, offset)` | Set shadow X offset | | `engine.block.setDropShadowOffsetY(id, offset)` | Set shadow Y offset | | `engine.block.setDropShadowBlurRadiusX(id, radius)` | Set shadow blur | | `engine.block.setDropShadowColor(id, color)` | Set shadow color | | `engine.block.export(id, options)` | Export block to blob | | `cesdk.ui.insertOrderComponent(options, component)` | Add custom button to navigation bar | | `cesdk.utils.downloadFile(blob, mimeType)` | Download blob as file | ## Next Steps - [Text Styling](https://img.ly/docs/cesdk/sveltekit/text/styling-269c48/) — Style text blocks with fonts, colors, and effects - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) — Export options and formats for watermarked images - [Crop Images](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/crop-f67a47/) — Transform images before watermarking --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Image Editor SDK" description: "The CreativeEditor SDK provides a robust and user-friendly solution for photo and image editing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/overview-5249ea/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Overview](https://img.ly/docs/cesdk/sveltekit/edit-image/overview-5249ea/) --- The CreativeEditor SDK (CE.SDK) offers powerful image editing capabilities designed for seamless integration into your application. You can give your users full control through an intuitive user interface or implement fully automated workflows via the SDK’s programmatic API. Image editing with CE.SDK is fully client-side, ensuring fast performance, data privacy, and offline compatibility. Whether you're building a photo editor, design tool, or automation workflow, CE.SDK provides everything you need—plus the flexibility to integrate AI tools for tasks like adding or removing objects, swapping backgrounds, or creating variants. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Remove Background" description: "Remove image backgrounds to isolate subjects or prepare assets for compositing and reuse." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Remove Background](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) --- Remove image backgrounds to isolate subjects for compositing, product photography, or creating transparent overlays.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-remove-bg-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-remove-bg-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-remove-bg-browser/) The `@imgly/plugin-background-removal-web` plugin adds AI-powered background removal directly to the CE.SDK editor. Processing runs locally in the browser using WebAssembly and WebGPU, ensuring privacy since images never leave the client. ```typescript file=@cesdk_web_examples/guides-edit-image-remove-bg-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; import packageJson from './package.json'; /** * CE.SDK Browser Guide: Remove Background with Plugin * * Demonstrates adding and configuring the background removal plugin * for the CE.SDK editor with various UI placement options. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); // Get page and set dimensions const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Add the background removal plugin with canvas menu button await cesdk.addPlugin( BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] } }) ); // Create a gradient background (deep teal to soft purple) const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { stop: 0, color: { r: 0.08, g: 0.22, b: 0.35, a: 1 } }, // Deep teal { stop: 1, color: { r: 0.35, g: 0.2, b: 0.45, a: 1 } } // Soft purple ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Create centered title text const titleBlock = engine.block.create('text'); engine.block.setString(titleBlock, 'text/text', 'Remove Background'); engine.block.setFloat(titleBlock, 'text/fontSize', 140); engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleBlock, pageWidth); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.appendChild(page, titleBlock); engine.block.setTextColor(titleBlock, { r: 1, g: 1, b: 1, a: 1 }); // Create image block with a portrait photo const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Cover'); const imageWidth = 202; const imageHeight = 230; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.appendChild(page, imageBlock); // Create img.ly logo at bottom center const logoBlock = engine.block.create('graphic'); const logoShape = engine.block.createShape('rect'); engine.block.setShape(logoBlock, logoShape); const logoFill = engine.block.createFill('image'); engine.block.setString( logoFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoBlock, logoFill); engine.block.setContentFillMode(logoBlock, 'Contain'); const logoWidth = 72; const logoHeight = 45; engine.block.setWidth(logoBlock, logoWidth); engine.block.setHeight(logoBlock, logoHeight); engine.block.setOpacity(logoBlock, 0.9); engine.block.appendChild(page, logoBlock); // Position elements const titleHeight = engine.block.getFrameHeight(titleBlock); const imageGap = 30; const padding = 20; // Calculate vertical layout - title and image centered const totalContentHeight = titleHeight + imageGap + imageHeight; const startY = (pageHeight - totalContentHeight) / 2; // Position title at top of content area engine.block.setPositionX(titleBlock, 0); engine.block.setPositionY(titleBlock, startY); // Position image centered below title engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2); engine.block.setPositionY(imageBlock, startY + titleHeight + imageGap); // Position logo at bottom center engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2); engine.block.setPositionY(logoBlock, pageHeight - logoHeight - padding); // Select the image to show the canvas menu with BG Removal button engine.block.select(imageBlock); // Zoom to fit await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers installing the plugin, configuring UI placement, and customizing the background removal process. ## Installing the Plugin Install the background removal plugin and its ONNX runtime peer dependency: ```bash npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0 ``` Import the plugin in your application: ```typescript highlight-import import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web'; ``` ## Initializing the Editor Set up the CE.SDK editor with asset sources before adding the plugin: ```typescript highlight-setup const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); ``` ## Adding the Plugin Add the plugin to the editor using `cesdk.addPlugin()`. The `ui.locations` option controls where the background removal button appears: ```typescript highlight-add-plugin // Add the background removal plugin with canvas menu button await cesdk.addPlugin( BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] } }) ); ``` When a user selects an image and clicks the button, the plugin handles the entire workflow: exporting the image, processing it through the AI model, and applying the result back to the scene.  > **Note:** The plugin requires a correctly configured upload setting. 'local' works for testing but production requires stable storage. See the [Upload Images](https://img.ly/docs/cesdk/sveltekit/import-media/from-local-source/user-upload-c6c7d9/) guide for details. ## UI Placement Options The plugin supports multiple UI locations: | Location | Description | | --- | --- | | `'canvasMenu'` | Context menu when selecting an image on canvas | | `'dock'` | Panel in the left dock sidebar | | `'inspectorBar'` | Top bar of the inspector panel | | `'navigationBar'` | Main navigation bar | | `'canvasBarTop'` | Top bar above the canvas | | `'canvasBarBottom'` | Bottom bar below the canvas | You can specify a single location or an array: ```typescript BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu', 'dock'] } }) ``` ## Provider Configuration Configure the underlying background removal library through the `provider` option: ```typescript BackgroundRemovalPlugin({ ui: { locations: ['canvasMenu'] }, provider: { type: '@imgly/background-removal', configuration: { model: 'medium', // 'small' | 'medium' | 'large' output: { format: 'image/png', quality: 0.9 } } } }) ``` | Option | Type | Description | | --- | --- | --- | | `model` | `'small'` | `'medium'` | `'large'` | Model size for quality/speed trade-off | | `output.format` | string | Output format: `'image/png'`, `'image/webp'` | | `output.quality` | number | Quality for lossy formats (0-1) | The `'medium'` model provides the best balance of quality and speed. Use `'small'` for faster processing or `'large'` for maximum edge quality. ## Custom Provider For advanced use cases, implement a custom background removal provider: ```typescript BackgroundRemovalPlugin({ provider: { type: 'custom', processImageFileURI: async (imageFileURI: string) => { // Call your own background removal service const response = await fetch('/api/remove-background', { method: 'POST', body: JSON.stringify({ imageUrl: imageFileURI }) }); const { processedUrl } = await response.json(); return processedUrl; }, processSourceSet: async (sourceSet) => { // Handle multi-resolution source sets // Process the highest resolution and resize for others return sourceSet; } } }) ``` ## Creating an Image Block Add an image to the scene for background removal: ```typescript highlight-create-image // Create image block with a portrait photo const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Cover'); const imageWidth = 202; const imageHeight = 230; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.appendChild(page, imageBlock); ``` Select the image block to display the canvas menu with the background removal button. ## Performance Considerations The first background removal operation downloads AI models (~40MB) which are then cached: - **Model caching**: First run fetches models; subsequent runs use the cache - **GPU acceleration**: WebGPU provides faster processing than WebGL fallback - **CORS headers**: For optimal performance, configure these headers on your server: ``` Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp ``` ## Troubleshooting | Issue | Solution | | --- | --- | | Model download slow | First run fetches models; subsequent runs use cache | | Poor edge quality | Use higher resolution input or 'medium'/'large' model | | Out of memory | Reduce image size before processing | | WebGL errors | Check browser WebGL support; try different device setting | | Plugin not showing | Verify plugin added and UI location configured | | Result not transparent | Ensure export uses PNG format (JPEG doesn't support transparency) | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Export options for images with transparency - [Vectorize Images](https://img.ly/docs/cesdk/sveltekit/edit-image/vectorize-2b4c7f/) - Convert images to vector graphics - [Replace Colors](https://img.ly/docs/cesdk/sveltekit/edit-image/replace-colors-6ede17/) - Replace specific colors in images --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Replace Colors" description: "Replace specific colors in images using CE.SDK's Recolor and Green Screen effects with programmatic control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/replace-colors-6ede17/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Replace Colors](https://img.ly/docs/cesdk/sveltekit/edit-image/replace-colors-6ede17/) --- Transform images by swapping specific colors using the Recolor effect or remove backgrounds with the Green Screen effect in CE.SDK.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-replace-colors-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-replace-colors-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-replace-colors-browser/) CE.SDK offers two color replacement effects. The **Recolor** effect swaps one color for another while preserving image details. The **Green Screen** effect removes background colors with transparency. Both effects provide precise control over color matching, edge smoothness, and intensity. ```typescript file=@cesdk_web_examples/guides-edit-image-replace-colors-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Replace Colors Guide * * Demonstrates color replacement using Recolor and Green Screen effects: * - Using the built-in effects UI * - Creating and applying Recolor effects * - Creating and applying Green Screen effects * - Configuring effect properties * - Managing multiple effects */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen // Calculate responsive grid layout for 6 examples const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Use sample images for demonstrations const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // Create a Recolor effect to swap red colors to blue const block1 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); // Red source color engine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0 }); // Blue target color engine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panel engine.block.setSelected(block1, true); // Configure color matching precision for Recolor effect const block2 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0 }); // Skin tone source engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0 }); // Green tint // Adjust color match tolerance (0-1, higher = more inclusive) engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3); // Adjust brightness match tolerance engine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2 ); // Adjust edge smoothness engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1); engine.block.appendEffect(block2, recolorEffect2); // Create a Green Screen effect to remove green backgrounds const block3 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen'); // Specify the color to remove (green) engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.appendEffect(block3, greenScreenEffect); // Fine-tune Green Screen removal parameters const block4 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen'); engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }); // Specific green shade // Adjust color match tolerance engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4 ); // Adjust edge smoothness for cleaner removal engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2 ); // Reduce color spill from green background engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5); engine.block.appendEffect(block4, greenScreenEffect2); // Demonstrate managing multiple effects on a block const block5 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block5); // Add multiple effects to the same block const recolor1 = engine.block.createEffect('recolor'); engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor'); engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); engine.block.appendEffect(block5, recolor2); // Get all effects on the block const effects = engine.block.getEffects(block5); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing it engine.block.setEffectEnabled(effects[0], false); // Check if effect is enabled const isEnabled = engine.block.isEffectEnabled(effects[0]); // eslint-disable-next-line no-console console.log('First effect enabled:', isEnabled); // false // Apply consistent color replacement across multiple blocks const block6 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block6); // Find all image blocks in the scene const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); // Apply a consistent recolor effect to each block allBlocks.forEach((blockId) => { // Skip if block already has effects if (engine.block.getEffects(blockId).length > 0) { return; } const batchRecolor = engine.block.createEffect('recolor'); engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', { r: 0.8, g: 0.7, b: 0.6, a: 1.0 }); engine.block.setColor(batchRecolor, 'effect/recolor/toColor', { r: 0.6, g: 0.7, b: 0.9, a: 1.0 }); engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25); engine.block.appendEffect(blockId, batchRecolor); }); // Position all blocks in a grid layout const blocks = [block1, block2, block3, block4, block5, block6]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to show all blocks engine.block.setSelected(block1, true); cesdk.engine.scene.zoomToBlock(page); } } export default Example; ``` This guide shows how to enable the built-in effects UI for interactive color replacement and apply effects programmatically using the block API. ## Using the Built-in Effects UI ### Enable Effects Panel We enable the effects feature using CE.SDK's Feature API. The effects panel appears in the inspector when users select a compatible graphic block. ```typescript highlight-enable-effects-panel // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects including recolor and green screen ``` Enabling `ly.img.effect` makes all effect options available in the inspector panel, including Recolor and Green Screen. ### User Workflow With effects enabled, users can replace colors through the inspector panel: 1. **Select an image block** - Click an image or graphic block on the canvas 2. **Open inspector** - The inspector shows available options for the selected element 3. **Find effects section** - Scroll to the effects section 4. **Choose Recolor or Green Screen** - Click the desired effect 5. **Select colors** - Use the color picker to specify source and target colors 6. **Adjust parameters** - Fine-tune color matching, smoothness, and intensity 7. **Toggle effects** - Enable or disable effects to compare results Users can experiment with color replacements and see results immediately. ## Programmatic Color Replacement ### Initialize CE.SDK To apply color replacement programmatically, we set up CE.SDK with the proper configuration. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); ``` This initializes CE.SDK with the effects panel enabled, providing both UI and API access. ### Creating and Applying Recolor Effects The Recolor effect swaps one color for another throughout an image. We create a Recolor effect using `engine.block.createEffect('recolor')` and specify the source and target colors. ```typescript highlight-create-recolor-effect // Create a Recolor effect to swap red colors to blue const block1 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block1); const recolorEffect = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); // Red source color engine.block.setColor(recolorEffect, 'effect/recolor/toColor', { r: 0.0, g: 0.5, b: 1.0, a: 1.0 }); // Blue target color engine.block.appendEffect(block1, recolorEffect); // Select this block to show the effects panel engine.block.setSelected(block1, true); ``` The Recolor effect identifies pixels matching the source color (fromColor) and replaces them with the target color (toColor). Color values use RGBA format with values from 0.0 to 1.0. > **Tip:** The example code uses the `engine.block.addImage()` convenience API. This simplifies image block creation compared to manually constructing graphic blocks with image fills. ### Configuring Color Matching We adjust the matching tolerance and smoothness parameters to control how precisely colors must match before replacement. ```typescript highlight-configure-recolor-matching // Configure color matching precision for Recolor effect const block2 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block2); const recolorEffect2 = engine.block.createEffect('recolor'); engine.block.setColor(recolorEffect2, 'effect/recolor/fromColor', { r: 0.8, g: 0.6, b: 0.4, a: 1.0 }); // Skin tone source engine.block.setColor(recolorEffect2, 'effect/recolor/toColor', { r: 0.3, g: 0.7, b: 0.3, a: 1.0 }); // Green tint // Adjust color match tolerance (0-1, higher = more inclusive) engine.block.setFloat(recolorEffect2, 'effect/recolor/colorMatch', 0.3); // Adjust brightness match tolerance engine.block.setFloat( recolorEffect2, 'effect/recolor/brightnessMatch', 0.2 ); // Adjust edge smoothness engine.block.setFloat(recolorEffect2, 'effect/recolor/smoothness', 0.1); engine.block.appendEffect(block2, recolorEffect2); ``` The Recolor effect provides these parameters: - **colorMatch** (0-1) - How closely colors must match the source. Lower values match exact colors, higher values match broader ranges - **brightnessMatch** (0-1) - Tolerance for brightness variations - **smoothness** (0-1) - Edge blending to reduce artifacts These parameters help handle images where colors vary due to lighting, shadows, or compression. ### Creating and Applying Green Screen Effects The Green Screen effect removes backgrounds by making specific colors transparent. ```typescript highlight-create-green-screen-effect // Create a Green Screen effect to remove green backgrounds const block3 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block3); const greenScreenEffect = engine.block.createEffect('green_screen'); // Specify the color to remove (green) engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.appendEffect(block3, greenScreenEffect); ``` The Green Screen effect identifies pixels matching the specified color (fromColor) and makes them transparent. This works best with solid-color backgrounds like green screens or blue screens. ### Fine-Tuning Green Screen Removal We adjust the color matching tolerance, edge smoothness, and spill suppression parameters. ```typescript highlight-configure-green-screen // Fine-tune Green Screen removal parameters const block4 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block4); const greenScreenEffect2 = engine.block.createEffect('green_screen'); engine.block.setColor(greenScreenEffect2, 'effect/green_screen/fromColor', { r: 0.2, g: 0.8, b: 0.3, a: 1.0 }); // Specific green shade // Adjust color match tolerance engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/colorMatch', 0.4 ); // Adjust edge smoothness for cleaner removal engine.block.setFloat( greenScreenEffect2, 'effect/green_screen/smoothness', 0.2 ); // Reduce color spill from green background engine.block.setFloat(greenScreenEffect2, 'effect/green_screen/spill', 0.5); engine.block.appendEffect(block4, greenScreenEffect2); ``` The Green Screen effect provides these parameters: - **colorMatch** (0-1) - Tolerance for color variations in the background - **smoothness** (0-1) - Edge feathering for natural transitions - **spill** (0-1) - Reduces color spill from the background onto foreground objects These parameters help create clean composites without harsh edges or color artifacts. ## Managing Multiple Effects We can apply multiple color replacement effects to the same block. CE.SDK maintains an effect stack for each block, applying effects in the order they were added. ```typescript highlight-manage-effects // Demonstrate managing multiple effects on a block const block5 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block5); // Add multiple effects to the same block const recolor1 = engine.block.createEffect('recolor'); engine.block.setColor(recolor1, 'effect/recolor/fromColor', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor1, 'effect/recolor/toColor', { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }); engine.block.appendEffect(block5, recolor1); const recolor2 = engine.block.createEffect('recolor'); engine.block.setColor(recolor2, 'effect/recolor/fromColor', { r: 0.0, g: 1.0, b: 0.0, a: 1.0 }); engine.block.setColor(recolor2, 'effect/recolor/toColor', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); engine.block.appendEffect(block5, recolor2); // Get all effects on the block const effects = engine.block.getEffects(block5); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 2 // Disable the first effect without removing it engine.block.setEffectEnabled(effects[0], false); // Check if effect is enabled const isEnabled = engine.block.isEffectEnabled(effects[0]); // eslint-disable-next-line no-console console.log('First effect enabled:', isEnabled); // false ``` Effect management capabilities: - **Get effects** - Retrieve all effects with `engine.block.getEffects()` - **Enable/disable** - Toggle effects with `engine.block.setEffectEnabled()` without removing them - **Check status** - Query effect state with `engine.block.isEffectEnabled()` - **Remove effects** - Delete effects by index with `engine.block.removeEffect()` Disabling effects is useful for before/after comparisons or performance optimization. ## Batch Processing Multiple Images We can loop through all image blocks in a scene and apply the same effect configuration to each. ```typescript highlight-batch-processing // Apply consistent color replacement across multiple blocks const block6 = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, block6); // Find all image blocks in the scene const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); // Apply a consistent recolor effect to each block allBlocks.forEach((blockId) => { // Skip if block already has effects if (engine.block.getEffects(blockId).length > 0) { return; } const batchRecolor = engine.block.createEffect('recolor'); engine.block.setColor(batchRecolor, 'effect/recolor/fromColor', { r: 0.8, g: 0.7, b: 0.6, a: 1.0 }); engine.block.setColor(batchRecolor, 'effect/recolor/toColor', { r: 0.6, g: 0.7, b: 0.9, a: 1.0 }); engine.block.setFloat(batchRecolor, 'effect/recolor/colorMatch', 0.25); engine.block.appendEffect(blockId, batchRecolor); }); ``` Batch processing use cases: - **Product variations** - Generate multiple color variants - **Brand consistency** - Apply consistent color corrections - **Automated workflows** - Process multiple images with the same adjustments The `engine.block.findByType()` method locates all graphic blocks in the scene. ## Troubleshooting Common issues and solutions when working with color replacement effects: **Effect not visible** - Verify the effect is enabled with `engine.block.isEffectEnabled()` - Check that the effect is attached to the correct block using `engine.block.getEffects()` - Ensure the block type supports effects with `engine.block.supportsEffects()` **Wrong colors being replaced** - Decrease `colorMatch` for more precise matching - Increase `colorMatch` to capture broader color ranges - Adjust `brightnessMatch` for Recolor effects with lighting variations **Harsh edges or artifacts** - Increase `smoothness` to blend edges more gradually - For Green Screen, adjust `spill` to reduce color contamination - Use higher resolution images for smoother results **Performance issues** - Limit active effects on a single block - Use `engine.block.setEffectEnabled(false)` to disable effects during editing - Process effects sequentially rather than simultaneously ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `engine.block.createEffect()` | Block | Create a new Recolor or Green Screen effect block | | `engine.block.appendEffect()` | Block | Attach an effect to an image block | | `engine.block.insertEffect()` | Block | Insert an effect at a specific position in the effect stack | | `engine.block.removeEffect()` | Block | Remove an effect from a block by index | | `engine.block.getEffects()` | Block | Get all effects attached to a block | | `engine.block.supportsEffects()` | Block | Check if a block can render effects | | `engine.block.setColor()` | Block | Set color properties on effect blocks | | `engine.block.getColor()` | Block | Get color properties from effect blocks | | `engine.block.setFloat()` | Block | Set numeric effect properties | | `engine.block.getFloat()` | Block | Get numeric effect properties | | `engine.block.setEffectEnabled()` | Block | Enable or disable an effect | | `engine.block.isEffectEnabled()` | Block | Check if an effect is enabled | | `engine.block.findByType()` | Block | Find all blocks of a specific type | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) — Explore other visual effects available in CE.SDK - [Export Designs](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) — Save your color-replaced images in various formats --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Transform" description: "Crop, resize, rotate, scale, or flip images using CE.SDK's built-in transformation tools." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) --- --- ## Related Pages - [Move Images](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/move-818dd9/) - Position images precisely on the canvas using absolute or percentage-based coordinates. - [Crop](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/crop-f67a47/) - Cut out specific areas of an image to focus on key content or change aspect ratio. - [Rotate Images](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/rotate-5f39c9/) - Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK. - [Resize](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/resize-407242/) - Change image dimensions by setting explicit width and height values using absolute units, percentage-based sizing, or auto-sizing modes. - [Scale Images](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/scale-ebe367/) - Scale image blocks uniformly to preserve aspect ratio or non-uniformly to stretch along a single axis. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Crop" description: "Cut out specific areas of an image to focus on key content or change aspect ratio." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform/crop-f67a47/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) > [Crop](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/crop-f67a47/) --- Crop images to focus on key subjects, remove unwanted elements, or prepare visuals for specific formats like social media or print using CE.SDK's crop system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-crop-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-crop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-crop-browser/) Image cropping in CreativeEditor SDK (CE.SDK) lets you select a region inside an image and discard everything outside that frame. Unlike resizing which changes overall dimensions uniformly, cropping removes unwanted areas while preserving original pixel quality in the selected region. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-crop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page from the scene const pages = engine.block.findByType('page'); const page = pages[0]; // Add an image using the convenience API const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 50); // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(imageBlock); console.log('Block supports crop:', supportsCrop); // Check if the block supports content fill modes const supportsFillMode = engine.block.supportsContentFillMode(imageBlock); console.log('Supports content fill mode:', supportsFillMode); // Get the current content fill mode const currentMode = engine.block.getContentFillMode(imageBlock); console.log('Current fill mode:', currentMode); // Set content fill mode - options are 'Crop', 'Cover', 'Contain' // 'Cover' automatically scales and positions to fill the entire frame engine.block.setContentFillMode(imageBlock, 'Cover'); // Create another image block to demonstrate crop scaling const scaleBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, scaleBlock); engine.block.setPositionX(scaleBlock, 400); engine.block.setPositionY(scaleBlock, 50); // Set content fill mode to 'Crop' for manual control engine.block.setContentFillMode(scaleBlock, 'Crop'); // Scale the content within the crop frame // Values > 1 zoom in, values < 1 zoom out engine.block.setCropScaleX(scaleBlock, 1.5); engine.block.setCropScaleY(scaleBlock, 1.5); // Or use uniform scaling from center engine.block.setCropScaleRatio(scaleBlock, 1.2); // Get the current scale values const scaleX = engine.block.getCropScaleX(scaleBlock); const scaleY = engine.block.getCropScaleY(scaleBlock); const scaleRatio = engine.block.getCropScaleRatio(scaleBlock); console.log('Crop scale:', { scaleX, scaleY, scaleRatio }); // Pan the content within the crop frame using translation // Values are in percentage of the crop frame dimensions engine.block.setCropTranslationX(scaleBlock, 0.1); // Move 10% right engine.block.setCropTranslationY(scaleBlock, -0.1); // Move 10% up // Get the current translation values const translationX = engine.block.getCropTranslationX(scaleBlock); const translationY = engine.block.getCropTranslationY(scaleBlock); console.log('Crop translation:', { translationX, translationY }); // Ensure content covers the entire frame without gaps // The minScaleRatio parameter sets the minimum scale allowed const adjustedRatio = engine.block.adjustCropToFillFrame(scaleBlock, 1.0); console.log('Adjusted scale ratio:', adjustedRatio); // Create an image block to demonstrate crop rotation const rotateBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, rotateBlock); engine.block.setPositionX(rotateBlock, 50); engine.block.setPositionY(rotateBlock, 300); engine.block.setContentFillMode(rotateBlock, 'Crop'); // Rotate the content within the crop frame (in radians) // Math.PI / 4 = 45 degrees engine.block.setCropRotation(rotateBlock, Math.PI / 12); // Get the current rotation const rotation = engine.block.getCropRotation(rotateBlock); console.log('Crop rotation (radians):', rotation); // Ensure content still fills the frame after rotation engine.block.adjustCropToFillFrame(rotateBlock, 1.0); // Create an image block to demonstrate flipping const flipBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, flipBlock); engine.block.setPositionX(flipBlock, 300); engine.block.setPositionY(flipBlock, 300); engine.block.setContentFillMode(flipBlock, 'Crop'); // Flip the content horizontally engine.block.flipCropHorizontal(flipBlock); // Create an image block to demonstrate aspect ratio locking const lockBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, lockBlock); engine.block.setPositionX(lockBlock, 550); engine.block.setPositionY(lockBlock, 300); engine.block.setContentFillMode(lockBlock, 'Crop'); // Lock the crop aspect ratio - when locked, crop handles maintain // the current aspect ratio during resize operations engine.block.setCropAspectRatioLocked(lockBlock, true); // Check if aspect ratio is locked const isLocked = engine.block.isCropAspectRatioLocked(lockBlock); console.log('Aspect ratio locked:', isLocked); // Reset crop to default state (sets content fill mode to 'Cover') engine.block.resetCrop(lockBlock); // Select the first image block to show it in the UI engine.block.select(imageBlock); // Zoom to page for better visibility cesdk.engine.scene.zoomToBlock(page, 0.5, 0.5, 0.9); } } export default Example; ``` This guide covers both interactive cropping using the built-in UI and programmatic cropping using the engine API for automation workflows. ## Using the Built-in Crop UI The CE.SDK default UI provides an interactive crop tool that allows users to visually adjust crop areas with real-time feedback. ### User Workflow With the default UI configuration, users can crop images through a visual workflow: 1. **Select an image** - Click on any image block in the canvas 2. **Enter crop mode** - Double-click the image or click the crop icon in the toolbar 3. **Adjust the crop area** - Drag corners or edges to resize the visible region 4. **Choose aspect ratio** - Select a preset ratio if available (e.g., 1:1, 4:3, 16:9) 5. **Apply the crop** - Click "Done" or press Enter to apply changes The cropped image appears in your project, but the underlying original image preserves its values, even when you rotate or resize the cropped image. ### Enable Crop Features in Custom UI For developers building custom UIs, you can enable crop functionality using editor settings: ```typescript // Enable double-click to enter crop mode cesdk.editor.setSettingBool('doubleClickToCropEnabled', true); // Show crop handles on the control gizmo cesdk.editor.setSettingBool('controlGizmo/showCropHandles', true); // Show crop scale handles cesdk.editor.setSettingBool('controlGizmo/showCropScaleHandles', true); ``` ### Define Preset Aspect Ratios You can define available aspect ratios to guide user choices: ```typescript const aspectRatios = [ 'Free', // Unconstrained '1:1', // Square '4:5', // Instagram Portrait '16:9', // Widescreen 'Custom:3:2' // Custom ratios ]; cesdk.editor.setSettingString('ui/crop/aspectRatios', aspectRatios.join(',')); ``` > **Tip:** You can hide the aspect ratio selector entirely by setting `ui/crop/allowAspectRatioSelection` to `false`. ## Programmatic Cropping For automation, batch processing, or dynamic applications, you can control cropping entirely through the engine API. ### Check Crop Support Before applying crop operations, verify the block supports cropping using `engine.block.supportsCrop()`. Graphic blocks with image fills support cropping: ```typescript highlight-check-crop-support // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(imageBlock); console.log('Block supports crop:', supportsCrop); ``` ### Content Fill Modes CE.SDK provides three content fill modes that control how images fit within their frame. Set the mode using `engine.block.setContentFillMode()`: ```typescript highlight-content-fill-mode // Check if the block supports content fill modes const supportsFillMode = engine.block.supportsContentFillMode(imageBlock); console.log('Supports content fill mode:', supportsFillMode); // Get the current content fill mode const currentMode = engine.block.getContentFillMode(imageBlock); console.log('Current fill mode:', currentMode); // Set content fill mode - options are 'Crop', 'Cover', 'Contain' // 'Cover' automatically scales and positions to fill the entire frame engine.block.setContentFillMode(imageBlock, 'Cover'); ``` The available modes are: - **Crop** - Manual control over the exact crop region using scale, translation, and rotation - **Cover** - Automatically scale and position content to fill the entire frame (no empty areas) - **Contain** - Automatically scale and position content to fit entirely within the frame (may show background) ### Scale Crop Scale the image content within its frame using crop scale APIs. Values greater than 1.0 zoom in, values less than 1.0 zoom out: ```typescript highlight-scale-crop // Create another image block to demonstrate crop scaling const scaleBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, scaleBlock); engine.block.setPositionX(scaleBlock, 400); engine.block.setPositionY(scaleBlock, 50); // Set content fill mode to 'Crop' for manual control engine.block.setContentFillMode(scaleBlock, 'Crop'); // Scale the content within the crop frame // Values > 1 zoom in, values < 1 zoom out engine.block.setCropScaleX(scaleBlock, 1.5); engine.block.setCropScaleY(scaleBlock, 1.5); // Or use uniform scaling from center engine.block.setCropScaleRatio(scaleBlock, 1.2); // Get the current scale values const scaleX = engine.block.getCropScaleX(scaleBlock); const scaleY = engine.block.getCropScaleY(scaleBlock); const scaleRatio = engine.block.getCropScaleRatio(scaleBlock); console.log('Crop scale:', { scaleX, scaleY, scaleRatio }); ``` Use `setCropScaleRatio()` for uniform scaling from the center, or `setCropScaleX()` and `setCropScaleY()` for non-uniform scaling. ### Translate Crop Pan the image content within the crop frame using translation. Values are percentages of the crop frame dimensions: ```typescript highlight-translate-crop // Pan the content within the crop frame using translation // Values are in percentage of the crop frame dimensions engine.block.setCropTranslationX(scaleBlock, 0.1); // Move 10% right engine.block.setCropTranslationY(scaleBlock, -0.1); // Move 10% up // Get the current translation values const translationX = engine.block.getCropTranslationX(scaleBlock); const translationY = engine.block.getCropTranslationY(scaleBlock); console.log('Crop translation:', { translationX, translationY }); ``` Positive X moves content right, positive Y moves content down. ### Fill Frame Adjust the crop to ensure content fills the frame without empty areas using `engine.block.adjustCropToFillFrame()`. The `minScaleRatio` parameter sets the minimum allowed scale: ```typescript highlight-fill-frame // Ensure content covers the entire frame without gaps // The minScaleRatio parameter sets the minimum scale allowed const adjustedRatio = engine.block.adjustCropToFillFrame(scaleBlock, 1.0); console.log('Adjusted scale ratio:', adjustedRatio); ``` This is useful after applying translations or rotations that might reveal empty areas. ### Rotate Crop Rotate the image content within its frame using `engine.block.setCropRotation()`. Rotation is specified in radians: ```typescript highlight-rotate-crop // Create an image block to demonstrate crop rotation const rotateBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, rotateBlock); engine.block.setPositionX(rotateBlock, 50); engine.block.setPositionY(rotateBlock, 300); engine.block.setContentFillMode(rotateBlock, 'Crop'); // Rotate the content within the crop frame (in radians) // Math.PI / 4 = 45 degrees engine.block.setCropRotation(rotateBlock, Math.PI / 12); // Get the current rotation const rotation = engine.block.getCropRotation(rotateBlock); console.log('Crop rotation (radians):', rotation); // Ensure content still fills the frame after rotation engine.block.adjustCropToFillFrame(rotateBlock, 1.0); ``` After rotation, call `adjustCropToFillFrame()` to ensure content still covers the frame. ### Flip Crop Flip the image content horizontally or vertically within its crop frame. This flips the content itself, not the block: ```typescript highlight-flip-crop // Create an image block to demonstrate flipping const flipBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, flipBlock); engine.block.setPositionX(flipBlock, 300); engine.block.setPositionY(flipBlock, 300); engine.block.setContentFillMode(flipBlock, 'Crop'); // Flip the content horizontally engine.block.flipCropHorizontal(flipBlock); ``` ### Lock Aspect Ratio Lock the crop aspect ratio during interactive editing using `engine.block.setCropAspectRatioLocked()`. When locked, crop handles maintain the current aspect ratio: ```typescript highlight-lock-aspect-ratio // Create an image block to demonstrate aspect ratio locking const lockBlock = await engine.block.addImage(imageUri, { size: { width: 200, height: 200 } }); engine.block.appendChild(page, lockBlock); engine.block.setPositionX(lockBlock, 550); engine.block.setPositionY(lockBlock, 300); engine.block.setContentFillMode(lockBlock, 'Crop'); // Lock the crop aspect ratio - when locked, crop handles maintain // the current aspect ratio during resize operations engine.block.setCropAspectRatioLocked(lockBlock, true); // Check if aspect ratio is locked const isLocked = engine.block.isCropAspectRatioLocked(lockBlock); console.log('Aspect ratio locked:', isLocked); ``` ### Reset Crop Reset all crop transformations to their default state using `engine.block.resetCrop()`: ```typescript highlight-reset-crop // Reset crop to default state (sets content fill mode to 'Cover') engine.block.resetCrop(lockBlock); ``` ## Coordinate System Crop transforms use normalized values: | Property | Value Type | Description | | --- | --- | --- | | Scale | Float (0.0+) | 1.0 is original size, 2.0 is double, 0.5 is half | | Translation | Float (-1.0 to 1.0) | Percentage of frame dimensions | | Rotation | Float (radians) | Math.PI = 180°, Math.PI/2 = 90° | All crop values are independent of canvas zoom level. ## Combining Crop with Other Transforms You can combine crop operations with other block transforms like position, rotation, and scale. Crop transforms affect the content within the block, while block transforms affect the block itself on the canvas: ```typescript // Crop the content (scales/pans the image within its frame) engine.block.setCropScaleRatio(imageBlock, 1.5); engine.block.setCropRotation(imageBlock, Math.PI / 12); // Transform the block itself (moves/rotates the entire block on canvas) engine.block.setRotation(imageBlock, Math.PI / 6); engine.block.setWidth(imageBlock, 400); ``` ## Troubleshooting | Issue | Cause / Fix | |-------|-------------| | Crop functions throw error | Verify block supports crop with `supportsCrop()` | | Black bars after scaling | Call `adjustCropToFillFrame()` or increase scale ratio | | Content not filling frame | Check content fill mode - use 'Cover' for automatic fill | | Unexpected crop behavior | Ensure content fill mode is set to 'Crop' for manual control | | Crop handles not visible in UI | Enable with `cesdk.editor.setSettingBool('controlGizmo/showCropHandles', true)` | ## API Reference | Method | Description | |--------|-------------| | `block.supportsCrop(id)` | Check if a block supports cropping | | `block.supportsContentFillMode(id)` | Check if block supports fill modes | | `block.setContentFillMode(id, mode)` | Set content fill mode (Crop, Cover, Contain) | | `block.getContentFillMode(id)` | Get current content fill mode | | `block.setCropScaleRatio(id, ratio)` | Set uniform crop scale from center | | `block.setCropScaleX(id, scaleX)` | Set horizontal crop scale | | `block.setCropScaleY(id, scaleY)` | Set vertical crop scale | | `block.setCropTranslationX(id, x)` | Set horizontal crop translation | | `block.setCropTranslationY(id, y)` | Set vertical crop translation | | `block.setCropRotation(id, rotation)` | Set crop rotation in radians | | `block.getCropScaleRatio(id)` | Get uniform crop scale ratio | | `block.getCropScaleX(id)` | Get horizontal crop scale | | `block.getCropScaleY(id)` | Get vertical crop scale | | `block.getCropTranslationX(id)` | Get horizontal crop translation | | `block.getCropTranslationY(id)` | Get vertical crop translation | | `block.getCropRotation(id)` | Get crop rotation in radians | | `block.adjustCropToFillFrame(id, minRatio)` | Adjust crop to fill frame | | `block.flipCropHorizontal(id)` | Flip content horizontally | | `block.flipCropVertical(id)` | Flip content vertically | | `block.setCropAspectRatioLocked(id, locked)` | Lock/unlock aspect ratio | | `block.isCropAspectRatioLocked(id)` | Check if aspect ratio is locked | | `block.resetCrop(id)` | Reset crop to default state | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Move Images" description: "Position images precisely on the canvas using absolute or percentage-based coordinates." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform/move-818dd9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) > [Move](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/move-818dd9/) --- Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-move-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-move-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-move-browser/) Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-move-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-move-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Movable Image - Can be freely repositioned by user const movableImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, movableImage); engine.block.setPositionX(movableImage, 0); engine.block.setPositionY(movableImage, 100); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Movable'); engine.block.setFloat(text1, 'text/fontSize', 32); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 360); engine.block.appendChild(page, text1); // Demo 2: Percentage Positioning - Responsive layout const percentImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, percentImage); // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentImage, 'Percent'); engine.block.setPositionYMode(percentImage, 'Percent'); // Position at 37.5% from left (300px), 30% from top (150px) engine.block.setPositionX(percentImage, 0.375); engine.block.setPositionY(percentImage, 0.3); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 32); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 360); engine.block.appendChild(page, text2); // Demo 3: Locked Image - Cannot be moved, rotated, or scaled const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 200, height: 200 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 550); engine.block.setPositionY(lockedImage, 150); // Lock the transform to prevent user interaction engine.block.setBool(lockedImage, 'transformLocked', true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 32); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 360); engine.block.appendChild(page, text3); // Get current position values const currentX = engine.block.getPositionX(movableImage); const currentY = engine.block.getPositionY(movableImage); console.log('Current position:', currentX, currentY); // Move relative to current position const offsetX = engine.block.getPositionX(movableImage); const offsetY = engine.block.getPositionY(movableImage); engine.block.setPositionX(movableImage, offsetX + 50); engine.block.setPositionY(movableImage, offsetY + 50); } } export default Example; ``` This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning. ## Position Coordinates Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes. ## Positioning Images Position images using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates: ```typescript highlight-movable-image engine.block.appendChild(page, movableImage); engine.block.setPositionX(movableImage, 0); engine.block.setPositionY(movableImage, 100); ``` ## Getting Current Position Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-position // Get current position values const currentX = engine.block.getPositionX(movableImage); const currentY = engine.block.getPositionY(movableImage); ``` ## Configuring Position Modes Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes. ## Percentage Positioning Position images using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0: ```typescript highlight-percentage-positioning // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentImage, 'Percent'); engine.block.setPositionYMode(percentImage, 'Percent'); ``` Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs. ## Relative Positioning Move images relative to their current position by getting the current coordinates and adding offset values: ```typescript highlight-relative-positioning // Move relative to current position const offsetX = engine.block.getPositionX(movableImage); const offsetY = engine.block.getPositionY(movableImage); engine.block.setPositionX(movableImage, offsetX + 50); engine.block.setPositionY(movableImage, offsetY + 50); ``` ## Locking Transforms Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true: ```typescript highlight-locked-image // Lock the transform to prevent user interaction engine.block.setBool(lockedImage, 'transformLocked', true); ``` ## Troubleshooting ### Image Not Moving Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the image block exists and values are within parent bounds. ### Unexpected Position Values Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning. ### Positioned Outside Visible Area Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors. ### Percentage Positioning Not Responsive Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change. ## API Reference | Method | Description | | ------------------------------------- | ------------------------------------------ | | `engine.block.addImage()` | Create and position image in one operation | | `engine.block.setPositionX()` | Set X coordinate value | | `engine.block.setPositionY()` | Set Y coordinate value | | `engine.block.getPositionX()` | Get current X coordinate value | | `engine.block.getPositionY()` | Get current Y coordinate value | | `engine.block.setPositionXMode()` | Set position mode for X coordinate | | `engine.block.setPositionYMode()` | Set position mode for Y coordinate | | `engine.block.getPositionXMode()` | Get position mode for X coordinate | | `engine.block.getPositionYMode()` | Get position mode for Y coordinate | | `engine.block.setBool()` | Set transform lock state | | `engine.block.getBool()` | Get transform lock state | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resize" description: "Change image dimensions by setting explicit width and height values using absolute units, percentage-based sizing, or auto-sizing modes." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform/resize-407242/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) > [Resize](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/resize-407242/) --- Change image dimensions using absolute pixel values, percentage-based sizing for responsive layouts, or auto-sizing based on content.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-resize-browser/) Image resizing changes actual dimensions rather than applying scale multipliers. Use `engine.block.setWidth()` and `engine.block.setHeight()` for individual dimensions, or `engine.block.setSize()` for both at once. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-resize-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-resize-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Absolute Sizing - Fixed dimensions const absoluteImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, absoluteImage); engine.block.setPositionX(absoluteImage, 20); engine.block.setPositionY(absoluteImage, 80); // Set explicit dimensions using setSize engine.block.setSize(absoluteImage, 180, 180, { sizeMode: 'Absolute' }); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Absolute'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 180); engine.block.setPositionX(text1, 20); engine.block.setPositionY(text1, 280); engine.block.appendChild(page, text1); // Demo 2: Percentage Sizing - Responsive layout const percentImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, percentImage); engine.block.setPositionX(percentImage, 220); engine.block.setPositionY(percentImage, 80); // Set size mode to percentage for responsive sizing engine.block.setWidthMode(percentImage, 'Percent'); engine.block.setHeightMode(percentImage, 'Percent'); // Values 0.0 to 1.0 represent percentage of parent engine.block.setWidth(percentImage, 0.225); engine.block.setHeight(percentImage, 0.36); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 180); engine.block.setPositionX(text2, 220); engine.block.setPositionY(text2, 280); engine.block.appendChild(page, text2); // Demo 3: Resized with maintainCrop const cropImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 180, height: 180 } } ); engine.block.appendChild(page, cropImage); engine.block.setPositionX(cropImage, 420); engine.block.setPositionY(cropImage, 80); // Resize while preserving crop settings engine.block.setWidth(cropImage, 180, true); engine.block.setHeight(cropImage, 180, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Maintain Crop'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 180); engine.block.setPositionX(text3, 420); engine.block.setPositionY(text3, 280); engine.block.appendChild(page, text3); // Get current dimensions const currentWidth = engine.block.getWidth(absoluteImage); const currentHeight = engine.block.getHeight(absoluteImage); const widthMode = engine.block.getWidthMode(absoluteImage); const heightMode = engine.block.getHeightMode(absoluteImage); console.log('Current dimensions:', currentWidth, 'x', currentHeight); console.log('Size modes:', widthMode, heightMode); // Get calculated frame dimensions after layout const frameWidth = engine.block.getFrameWidth(absoluteImage); const frameHeight = engine.block.getFrameHeight(absoluteImage); console.log('Frame dimensions:', frameWidth, 'x', frameHeight); // Title text at top const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Image Resize Examples'); engine.block.setFloat(titleText, 'text/fontSize', 36); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleText, 800); engine.block.setPositionX(titleText, 0); engine.block.setPositionY(titleText, 20); engine.block.appendChild(page, titleText); } } export default Example; ``` This guide covers resizing images with absolute or percentage sizing, configuring size modes, and maintaining crop settings during resize. ## Understanding Size Modes Size values are interpreted in three modes. 'Absolute' uses fixed design units, 'Percent' uses parent-relative values (0.0-1.0), and 'Auto' sizes based on content. Use `engine.block.getWidth()` for the configured value and `engine.block.getFrameWidth()` for actual rendered size after layout. ## Setting Absolute Dimensions Set explicit dimensions using `engine.block.setSize()` with absolute pixel values: ```typescript highlight-set-size // Set explicit dimensions using setSize engine.block.setSize(absoluteImage, 180, 180, { sizeMode: 'Absolute' }); ``` ## Percentage Sizing Use percentage mode for responsive sizing. Values range from 0.0 to 1.0 representing percentage of parent container: ```typescript highlight-percentage-mode // Set size mode to percentage for responsive sizing engine.block.setWidthMode(percentImage, 'Percent'); engine.block.setHeightMode(percentImage, 'Percent'); // Values 0.0 to 1.0 represent percentage of parent engine.block.setWidth(percentImage, 0.225); engine.block.setHeight(percentImage, 0.36); ``` Percentage sizing adapts automatically when the parent block dimensions change, maintaining relative sizes in responsive designs. ## Maintaining Crop During Resize Use the `maintainCrop` parameter to preserve existing crop settings when resizing: ```typescript highlight-maintain-crop // Resize while preserving crop settings engine.block.setWidth(cropImage, 180, true); engine.block.setHeight(cropImage, 180, true); ``` Setting `maintainCrop` to `true` automatically adjusts crop values to preserve the visible area. ## Getting Current Dimensions Read current configured dimensions and size modes: ```typescript highlight-get-dimensions // Get current dimensions const currentWidth = engine.block.getWidth(absoluteImage); const currentHeight = engine.block.getHeight(absoluteImage); const widthMode = engine.block.getWidthMode(absoluteImage); const heightMode = engine.block.getHeightMode(absoluteImage); ``` ## Getting Frame Dimensions Get calculated frame dimensions after layout: ```typescript highlight-frame-dimensions // Get calculated frame dimensions after layout const frameWidth = engine.block.getFrameWidth(absoluteImage); const frameHeight = engine.block.getFrameHeight(absoluteImage); ``` The difference between configured values and frame dimensions matters when using percentage or auto sizing modes. ## Troubleshooting ### Image Not Resizing Check if locked using `engine.block.getBool(block, 'constraints/size/locked')`. Verify size constraints aren't limiting changes. Ensure the block exists and confirm correct units for the size mode. ### Unexpected Size Values Check mode using `engine.block.getWidthMode()` and `engine.block.getHeightMode()`. Verify absolute (design units) vs percentage (0.0-1.0) values. For percentage mode, review parent block dimensions. ### Image Appears Stretched Calculate and set both dimensions proportionally. Use `maintainCrop: true` when resizing cropped images. Check `scene/aspectRatioLock` for scenes. ## API Reference | Method | Description | | ----------------------------------- | ---------------------------------------- | | `engine.block.addImage()` | Create and size image in one operation | | `engine.block.setSize()` | Set width and height with optional mode | | `engine.block.setWidth()` | Set width value | | `engine.block.setHeight()` | Set height value | | `engine.block.getWidth()` | Get current width value | | `engine.block.getHeight()` | Get current height value | | `engine.block.setWidthMode()` | Set width interpretation mode | | `engine.block.setHeightMode()` | Set height interpretation mode | | `engine.block.getWidthMode()` | Get width interpretation mode | | `engine.block.getHeightMode()` | Get height interpretation mode | | `engine.block.getFrameWidth()` | Get calculated frame width | | `engine.block.getFrameHeight()` | Get calculated frame height | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Rotate Images" description: "Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform/rotate-5f39c9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) > [Rotate](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/rotate-5f39c9/) --- Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK's rotation APIs.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-rotate-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-rotate-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-rotate-browser/) Rotation uses radians where `Math.PI / 2` equals 90°, `Math.PI` equals 180°, and negative values rotate clockwise. Values are relative to the block's center point. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-rotate-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-rotate-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Original image (no rotation) const originalImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, originalImage); engine.block.setPositionX(originalImage, 50); engine.block.setPositionY(originalImage, 50); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Original'); engine.block.setFloat(text1, 'text/fontSize', 24); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 150); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 210); engine.block.appendChild(page, text1); // Demo 2: Rotate 45 degrees const rotated45Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated45Image); engine.block.setPositionX(rotated45Image, 225); engine.block.setPositionY(rotated45Image, 50); // Rotate the block by 45 degrees (π/4 radians) engine.block.setRotation(rotated45Image, Math.PI / 4); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', '45°'); engine.block.setFloat(text2, 'text/fontSize', 24); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 150); engine.block.setPositionX(text2, 225); engine.block.setPositionY(text2, 210); engine.block.appendChild(page, text2); // Demo 3: Rotate 90 degrees const rotated90Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated90Image); engine.block.setPositionX(rotated90Image, 400); engine.block.setPositionY(rotated90Image, 50); // Rotate the block by 90 degrees (π/2 radians) engine.block.setRotation(rotated90Image, Math.PI / 2); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', '90°'); engine.block.setFloat(text3, 'text/fontSize', 24); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 150); engine.block.setPositionX(text3, 400); engine.block.setPositionY(text3, 210); engine.block.appendChild(page, text3); // Demo 4: Rotate 180 degrees const rotated180Image = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, rotated180Image); engine.block.setPositionX(rotated180Image, 575); engine.block.setPositionY(rotated180Image, 50); // Rotate the block by 180 degrees (π radians) engine.block.setRotation(rotated180Image, Math.PI); const text4 = engine.block.create('text'); engine.block.setString(text4, 'text/text', '180°'); engine.block.setFloat(text4, 'text/fontSize', 24); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text4, 150); engine.block.setPositionX(text4, 575); engine.block.setPositionY(text4, 210); engine.block.appendChild(page, text4); // Demo 5: Grouped rotation const groupedImage1 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 100, height: 100 } } ); engine.block.appendChild(page, groupedImage1); engine.block.setPositionX(groupedImage1, 150); engine.block.setPositionY(groupedImage1, 300); const groupedImage2 = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: { width: 100, height: 100 } } ); engine.block.appendChild(page, groupedImage2); engine.block.setPositionX(groupedImage2, 260); engine.block.setPositionY(groupedImage2, 300); // Group blocks and rotate them together const groupId = engine.block.group([groupedImage1, groupedImage2]); engine.block.setRotation(groupId, Math.PI / 8); const text5 = engine.block.create('text'); engine.block.setString(text5, 'text/text', 'Grouped'); engine.block.setFloat(text5, 'text/fontSize', 24); engine.block.setEnum(text5, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text5, 200); engine.block.setPositionX(text5, 150); engine.block.setPositionY(text5, 440); engine.block.appendChild(page, text5); // Demo 6: Locked rotation const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 500); engine.block.setPositionY(lockedImage, 300); engine.block.setRotation(lockedImage, Math.PI / 6); // Lock rotation for a single block engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false); const text6 = engine.block.create('text'); engine.block.setString(text6, 'text/text', 'Locked'); engine.block.setFloat(text6, 'text/fontSize', 24); engine.block.setEnum(text6, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text6, 150); engine.block.setPositionX(text6, 500); engine.block.setPositionY(text6, 460); engine.block.appendChild(page, text6); // Get current rotation value const currentRotation = engine.block.getRotation(rotated45Image); console.log('Current rotation (radians):', currentRotation); console.log( 'Current rotation (degrees):', (currentRotation * 180) / Math.PI ); // Helpers for degree/radian conversion const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const toDegrees = (radians: number) => (radians * 180) / Math.PI; // Example: rotate by 30 degrees using helper const targetRadians = toRadians(30); console.log('30 degrees in radians:', targetRadians); console.log('Converted back to degrees:', toDegrees(targetRadians)); } } export default Example; ``` This guide covers rotating images by specific angles, reading rotation values, converting between degrees and radians, rotating grouped elements together, and locking rotation on blocks. ## Initialize the Editor Set up the editor with default assets and create a design scene: ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); ``` ## Rotate an Image Rotate blocks using `engine.block.setRotation()` with angle values in radians. Use `Math.PI` for 180° or divide for smaller increments: ```typescript highlight=highlight-rotate-45 // Rotate the block by 45 degrees (π/4 radians) engine.block.setRotation(rotated45Image, Math.PI / 4); ``` ## Rotate by 90 Degrees Rotate a block by 90 degrees using `Math.PI / 2`: ```typescript highlight=highlight-rotate-90 // Rotate the block by 90 degrees (π/2 radians) engine.block.setRotation(rotated90Image, Math.PI / 2); ``` ## Rotate by 180 Degrees Flip a block upside down by rotating 180 degrees using `Math.PI`: ```typescript highlight=highlight-rotate-180 // Rotate the block by 180 degrees (π radians) engine.block.setRotation(rotated180Image, Math.PI); ``` ## Get Current Rotation Read the current rotation value using `engine.block.getRotation()`. The returned value is in radians: ```typescript highlight=highlight-get-rotation // Get current rotation value const currentRotation = engine.block.getRotation(rotated45Image); console.log('Current rotation (radians):', currentRotation); console.log( 'Current rotation (degrees):', (currentRotation * 180) / Math.PI ); ``` ## Convert Between Degrees and Radians Create helper functions to convert between degrees and radians for more intuitive angle values: ```typescript highlight=highlight-convert-radians // Helpers for degree/radian conversion const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const toDegrees = (radians: number) => (radians * 180) / Math.PI; // Example: rotate by 30 degrees using helper const targetRadians = toRadians(30); console.log('30 degrees in radians:', targetRadians); console.log('Converted back to degrees:', toDegrees(targetRadians)); ``` ## Rotate Groups Together Group multiple blocks and rotate them as a unit to maintain their relative positions: ```typescript highlight=highlight-rotate-group // Group blocks and rotate them together const groupId = engine.block.group([groupedImage1, groupedImage2]); engine.block.setRotation(groupId, Math.PI / 8); ``` ## Lock Rotation Disable rotation for a specific block using `engine.block.setScopeEnabled()` with the `layer/rotate` scope: ```typescript highlight=highlight-lock-rotation // Lock rotation for a single block engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false); ``` ## Troubleshooting ### Rotation Has No Effect Ensure the block exists and is appended to a page before calling `setRotation()`. Verify the block ID is valid using `engine.block.isValid()`. ### Unexpected Rotation Direction Positive values rotate counterclockwise, negative values rotate clockwise. Double-check your angle calculation if the rotation appears inverted. ### Block Appears Skewed After Rotation Rotation uses the block's center as the pivot point. If the block appears off-center, check that no unexpected scaling or positioning was applied. ### Locked Block Won't Rotate Check if the block's `layer/rotate` scope is disabled using `engine.block.isScopeEnabled()`. Re-enable with `engine.block.setScopeEnabled(block, 'layer/rotate', true)`. ## API Reference | Method | Description | | ---------------------------------- | ------------------------------------------ | | `engine.block.setRotation()` | Set rotation angle in radians | | `engine.block.getRotation()` | Get current rotation angle in radians | | `engine.block.group()` | Group blocks for collective transforms | | `engine.block.setScopeEnabled()` | Enable or disable specific block scopes | | `engine.block.isScopeEnabled()` | Check if a scope is enabled for a block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scale Images" description: "Scale image blocks uniformly to preserve aspect ratio or non-uniformly to stretch along a single axis." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/transform/scale-ebe367/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-image/transform-9d189b/) > [Scale](https://img.ly/docs/cesdk/sveltekit/edit-image/transform/scale-ebe367/) --- Scale images proportionally with `engine.block.scale()` using configurable anchor points, or stretch individual axes with direct width/height manipulation.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-scale-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-scale-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-scale-browser/) Scaling transforms a block proportionally using a factor, while resizing changes dimensions directly. Use scaling to maintain aspect ratio or apply consistent size changes across multiple elements. ```typescript file=@cesdk_web_examples/guides-edit-image-transform-scale-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class Example implements EditorPlugin { name = 'guides-edit-image-transform-scale-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Demo 1: Uniform Scaling - Scale from center anchor const scaledImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, scaledImage); engine.block.setPositionX(scaledImage, 50); engine.block.setPositionY(scaledImage, 100); // Scale uniformly to 150% from center anchor engine.block.scale(scaledImage, 1.5, 0.5, 0.5); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Uniform Scale'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 225); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 360); engine.block.appendChild(page, text1); // Demo 2: Non-Uniform Scaling - Stretch width only const stretchedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, stretchedImage); engine.block.setPositionX(stretchedImage, 300); engine.block.setPositionY(stretchedImage, 150); // Stretch width by 50% while keeping height engine.block.setWidthMode(stretchedImage, 'Absolute'); const currentWidth = engine.block.getWidth(stretchedImage); engine.block.setWidth(stretchedImage, currentWidth * 1.5, true); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Non-Uniform'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 225); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 360); engine.block.appendChild(page, text2); // Demo 3: Locked Image - Cannot be scaled const lockedImage = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_5.jpg', { size: { width: 150, height: 150 } } ); engine.block.appendChild(page, lockedImage); engine.block.setPositionX(lockedImage, 575); engine.block.setPositionY(lockedImage, 150); // Lock transforms to prevent scaling engine.block.setTransformLocked(lockedImage, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 150); engine.block.setPositionX(text3, 575); engine.block.setPositionY(text3, 360); engine.block.appendChild(page, text3); // Scale with different anchor points // Top-left anchor (0, 0) - default // Center anchor (0.5, 0.5) - scales from center // Bottom-right anchor (1, 1) - scales from bottom-right corner const anchorX = 0.5; const anchorY = 0.5; const scaleFactor = 1.2; engine.block.scale(scaledImage, scaleFactor, anchorX, anchorY); // Restrict scaling through scopes engine.block.setScopeEnabled(lockedImage, 'layer/resize', false); // Select the scaled image to show the result engine.block.select(scaledImage); } } export default Example; ``` This guide covers uniform scaling with anchor points, non-uniform axis stretching, and locking transforms to prevent scaling in templates. ## Uniform Scaling Apply a scale factor with `engine.block.scale()` where 1.0 keeps the original size, values greater than 1 enlarge, and values less than 1 shrink. The third and fourth parameters control the anchor point (0 to 1 range): ```typescript highlight-uniform-scale // Scale uniformly to 150% from center anchor engine.block.scale(scaledImage, 1.5, 0.5, 0.5); ``` ## Anchor Point Control Control the scaling origin with `anchorX` and `anchorY` parameters. Use (0, 0) for top-left, (0.5, 0.5) for center, or (1, 1) for bottom-right. Center anchor expands equally in all directions: ```typescript highlight-anchor-points // Scale with different anchor points // Top-left anchor (0, 0) - default // Center anchor (0.5, 0.5) - scales from center // Bottom-right anchor (1, 1) - scales from bottom-right corner const anchorX = 0.5; const anchorY = 0.5; const scaleFactor = 1.2; engine.block.scale(scaledImage, scaleFactor, anchorX, anchorY); ``` ## Non-Uniform Scaling Stretch a single axis by setting absolute mode and modifying width or height independently. This changes the aspect ratio: ```typescript highlight-non-uniform-scale // Stretch width by 50% while keeping height engine.block.setWidthMode(stretchedImage, 'Absolute'); const currentWidth = engine.block.getWidth(stretchedImage); engine.block.setWidth(stretchedImage, currentWidth * 1.5, true); ``` ## Locking Transforms Lock transforms to prevent scaling, rotation, and repositioning using `setTransformLocked`: ```typescript highlight-lock-scaling // Lock transforms to prevent scaling engine.block.setTransformLocked(lockedImage, true); ``` ## Scope Restrictions Disable specific capabilities using scopes. Use `'layer/resize'` to prevent resizing while allowing other operations: ```typescript highlight-scope-restriction // Restrict scaling through scopes engine.block.setScopeEnabled(lockedImage, 'layer/resize', false); ``` ## Troubleshooting ### Image Scales Unevenly Use the same anchor values for both X and Y (e.g., 0.5, 0.5 for center). Use `scale()` instead of separate width/height changes to maintain proportions. ### Scaling Doesn't Apply Verify the block is valid using `engine.block.isValid(blockId)`. Ensure the block is appended to the scene hierarchy with `engine.block.appendChild()`. ### Users Can Still Scale Locked Blocks Check that the `'layer/resize'` scope is disabled using `engine.block.isScopeEnabled()`. Transform locks prevent UI manipulation but not API calls. ### Export Shows Original Size Confirm scaling was applied before export. Use `engine.block.getWidth()` and `engine.block.getHeight()` to verify dimensions after scaling. ## API Reference | Method | Description | | ----------------------------------- | --------------------------------------------- | | `engine.block.scale()` | Scale block and children proportionally | | `engine.block.getWidth()` | Get current width | | `engine.block.setWidth()` | Set width with optional crop maintenance | | `engine.block.getHeight()` | Get current height | | `engine.block.setHeight()` | Set height with optional crop maintenance | | `engine.block.setWidthMode()` | Set width mode (Absolute, Percent, Auto) | | `engine.block.setHeightMode()` | Set height mode (Absolute, Percent, Auto) | | `engine.block.setTransformLocked()` | Lock all transformations | | `engine.block.isTransformLocked()` | Check if transforms are locked | | `engine.block.setScopeEnabled()` | Enable or disable a scope | | `engine.block.isScopeEnabled()` | Check if scope is enabled | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Vectorize" description: "Convert raster images into scalable vector graphics for flexible resizing and editing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-image/vectorize-2b4c7f/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Images](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) > [Vectorize](https://img.ly/docs/cesdk/sveltekit/edit-image/vectorize-2b4c7f/) --- Convert raster images into scalable vector graphics that resize without quality loss using CE.SDK's vectorizer plugin.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-vectorize-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-vectorize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-vectorize-browser/) Vectorization transforms pixel-based images into vector paths that can be scaled to any size without losing quality. The `@imgly/plugin-vectorizer-web` plugin provides one-click UI conversion directly in the canvas menu. Common use cases include converting logos for scalable branding, creating cutout outlines from photographs, and extracting editable paths from illustrations. ```typescript file=@cesdk_web_examples/guides-edit-image-vectorize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import VectorizerPlugin from '@imgly/plugin-vectorizer-web'; import packageJson from './package.json'; /** * CE.SDK Plugin: Vectorize Images Guide * * Demonstrates converting raster images to vector graphics: * - Using the vectorizer plugin for UI-based conversion * - Programmatically vectorizing with createCutoutFromBlocks() * - Configuring threshold parameters for quality control */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Add the vectorizer plugin with configuration options await cesdk.addPlugin( VectorizerPlugin({ // Display the vectorize button in the canvas menu ui: { locations: 'canvasMenu' }, // Set processing timeout to 30 seconds timeout: 30000, // Combine paths into a single shape when exceeding 500 paths groupingThreshold: 500 }) ); // Show only the vectorizer button in the canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, ['@imgly/plugin-vectorizer-web.canvasMenu']); // Create a design scene with a page const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); engine.block.appendChild(scene, page); // Create an image block to vectorize const imageBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageBlock, rectShape); // Load a sample image with clear contours for vectorization const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setContentFillMode(imageBlock, 'Contain'); // Center the image on the page const imageWidth = 400; const imageHeight = 300; engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.setPositionX(imageBlock, (800 - imageWidth) / 2); engine.block.setPositionY(imageBlock, (600 - imageHeight) / 2); engine.block.appendChild(page, imageBlock); // Select the image to reveal the vectorize button in the canvas menu engine.block.select(imageBlock); // Zoom to fit the page in view await engine.scene.zoomToBlock(page, { padding: 40 }); engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); } } export default Example; ``` This guide covers how to install and configure the vectorizer plugin, customize the canvas menu, and troubleshoot common vectorization issues. ## Using the Vectorizer Plugin The `@imgly/plugin-vectorizer-web` plugin adds a vectorize button to the canvas menu when you select an image block. Processing runs entirely in the browser using the [@imgly/vectorizer](https://www.npmjs.com/package/@imgly/vectorizer) library. ### Installation Install the plugin via npm or yarn: ```sh yarn add @imgly/plugin-vectorizer-web npm install @imgly/plugin-vectorizer-web ``` ### Adding the Plugin We register the plugin using `cesdk.addPlugin()` with the `ui.locations` option to display the vectorize button in the canvas menu. To show only the vectorizer button, we use `setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` to filter out other menu items. ```typescript highlight-add-plugin // Add the vectorizer plugin with configuration options await cesdk.addPlugin( VectorizerPlugin({ // Display the vectorize button in the canvas menu ui: { locations: 'canvasMenu' }, // Set processing timeout to 30 seconds timeout: 30000, // Combine paths into a single shape when exceeding 500 paths groupingThreshold: 500 }) ); // Show only the vectorizer button in the canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, ['@imgly/plugin-vectorizer-web.canvasMenu']); ``` ### Configuration Options You can customize the plugin behavior with two configuration options: - **timeout**: Processing time limit in milliseconds (default: 30000). Increase this for complex images that take longer to process. - **groupingThreshold**: Maximum path count before combining into a single shape (default: 500). Lower values combine paths earlier, reducing selectable elements. ## Programmatic Vectorization For automation workflows, you can create cutout blocks from source blocks using `engine.block.createCutoutFromBlocks()`. This method traces rasterized content or extracts existing vector paths. ### Threshold Parameters The `createCutoutFromBlocks()` method accepts three parameters that control vectorization quality: - **vectorizeDistanceThreshold** (default: 2): Maximum contour deviation during tracing. Lower values increase accuracy but produce more complex paths. - **simplifyDistanceThreshold** (default: 4): Maximum deviation for path smoothing. Set to 0 to disable smoothing entirely. - **useExistingShapeInformation** (default: true): When true, extracts existing vector paths from shapes and SVGs without re-tracing. ### Threshold Recommendations Start with the default values (2, 4) and adjust based on your source content: | Content Type | vectorizeDistanceThreshold | simplifyDistanceThreshold | |--------------|----------------------------|---------------------------| | Photographs | 4-8 | 6-10 | | Logos and icons | 1-2 | 2-4 | | Illustrations | 2-4 | 4-6 | Lower thresholds increase path complexity and processing time. For photographs with many details, higher thresholds reduce the number of paths while maintaining overall shape recognition. ## Troubleshooting Common issues and solutions: - **Processing timeout**: Increase the `timeout` option or use higher threshold values to reduce complexity. - **Jagged edges**: Increase `simplifyDistanceThreshold` to smooth the paths. - **Lost details**: Decrease both threshold values to capture finer contours. - **Vectorize button not appearing**: Verify `ui: { locations: 'canvasMenu' }` is set and that you've selected an image block. - **Memory issues with complex images**: Increase `groupingThreshold` to combine more paths into single shapes. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `cesdk.addPlugin(VectorizerPlugin(options))` | Plugin | Register the vectorizer plugin | | `cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, ids)` | UI | Control which items appear in the canvas menu | | `engine.block.createCutoutFromBlocks(ids, vectorizeDistanceThreshold?, simplifyDistanceThreshold?, useExistingShapeInformation?)` | Block | Create a cutout from block contours | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Captions" description: "Documentation for adding captions to videos" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Add Captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/) --- Add synchronized captions to video projects using CE.SDK's caption system, with support for importing subtitle files, styling with presets, and burning captions into video exports.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-captions-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-captions-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-add-captions-browser/) Captions in CE.SDK follow a hierarchy: **Page → CaptionTrack → Caption blocks**. Each caption has text, timing (time offset and duration), and styling properties. Captions appear and disappear based on their timing, synchronized with video playback. ```typescript file=@cesdk_web_examples/guides-create-video-add-captions-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Captions Guide * * Demonstrates adding synchronized captions to video projects: * - Importing captions from SRT/VTT files * - Creating and styling captions programmatically * - Applying caption presets * - Controlling caption timing and positioning * - Adding animations to captions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; engine.block.setDuration(page, 40); // Add a video clip as the base content const videoUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; const track = engine.block.create('track'); engine.block.appendChild(page, track); const videoClip = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 40, timeOffset: 0 } }); engine.block.appendChild(track, videoClip); engine.block.fillParent(track); // Import captions from SRT file // createCaptionsFromURI parses SRT/VTT and creates caption blocks with timing const captionSrtUrl = 'https://img.ly/static/examples/captions.srt'; const captionBlocks = await engine.block.createCaptionsFromURI( captionSrtUrl ); // eslint-disable-next-line no-console console.log(`Imported ${captionBlocks.length} captions from SRT file`); // Adjust caption timing to start at the beginning of the video // The SRT file may have different timing, so we reset to start at 0 let currentOffset = 0; for (const captionId of captionBlocks) { const duration = engine.block.getDuration(captionId); engine.block.setTimeOffset(captionId, currentOffset); currentOffset += duration; } // Create a caption track and add captions to it // Caption tracks organize captions in the timeline const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); // Add each caption block to the track for (const captionId of captionBlocks) { engine.block.appendChild(captionTrack, captionId); } // eslint-disable-next-line no-console console.log(`Caption track created with ${captionBlocks.length} captions`); // Apply a caption preset for consistent styling // Caption presets provide pre-configured styles (fonts, colors, backgrounds) const captionPresetsSourceId = 'ly.img.caption.presets'; const comicPresetId = '//ly.img.caption.presets/comic'; // Fetch the preset asset const comicPreset = await engine.asset.fetchAsset( captionPresetsSourceId, comicPresetId ); // Apply preset to the first caption (styling syncs across all captions) if (comicPreset && captionBlocks.length > 0) { await engine.asset.applyToBlock( captionPresetsSourceId, comicPreset, captionBlocks[0] ); // eslint-disable-next-line no-console console.log('Applied comic preset to captions'); } // Position captions at the bottom of the video frame // Caption position and size sync across all captions, so we only set it once if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Use percentage-based positioning for responsive layout engine.block.setPositionXMode(firstCaption, 'Percent'); engine.block.setPositionYMode(firstCaption, 'Percent'); engine.block.setWidthMode(firstCaption, 'Percent'); engine.block.setHeightMode(firstCaption, 'Percent'); // Position at bottom center with padding engine.block.setPositionX(firstCaption, 0.05); // 5% from left engine.block.setPositionY(firstCaption, 0.8); // 80% from top (near bottom) engine.block.setWidth(firstCaption, 0.9); // 90% width engine.block.setHeight(firstCaption, 0.15); // 15% height } // Modify a specific caption's text and timing if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Get current text const currentText = engine.block.getString(firstCaption, 'caption/text'); // eslint-disable-next-line no-console console.log('First caption text:', currentText); // Get timing info const offset = engine.block.getTimeOffset(firstCaption); const duration = engine.block.getDuration(firstCaption); // eslint-disable-next-line no-console console.log(`First caption: offset=${offset}s, duration=${duration}s`); } // Add fade-in animation to the first caption if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Create and apply entry animation const fadeIn = engine.block.createAnimation('fade'); engine.block.setDuration(fadeIn, 0.3); engine.block.setInAnimation(firstCaption, fadeIn); // eslint-disable-next-line no-console console.log('Added fade-in animation to first caption'); } // Select the first caption to show it in the inspector if (captionBlocks.length > 0) { engine.block.select(captionBlocks[0]); } // Seek to show the first caption at 1 second engine.block.setPlaybackTime(page, 1); // Open the caption inspector panel cesdk.ui.openPanel('//ly.img.panel/inspector/caption'); // eslint-disable-next-line no-console console.log( 'Add Captions guide initialized. Captions imported and styled.' ); } } export default Example; ``` This guide covers how to import captions from SRT/VTT files, style them using presets and custom properties, create captions programmatically, and export videos with burned-in captions. ## Understanding Caption Structure ### Caption Hierarchy CE.SDK organizes captions in a parent-child hierarchy. The page contains one or more caption tracks, and each caption track contains individual caption blocks. This structure allows for multiple caption tracks (for different languages or purposes) while keeping captions organized. When you import captions from a subtitle file, CE.SDK automatically creates the caption track and populates it with caption blocks. Each caption block stores its text content, start time, duration, and styling properties. ### Caption Timing Each caption has two timing properties: **time offset** (when the caption appears) and **duration** (how long it stays visible). These values are in seconds and synchronize with the video playback. A caption with a time offset of 2.0 and duration of 3.0 appears at the 2-second mark and disappears at the 5-second mark. ## Importing Captions from Subtitle Files ### Using createCaptionsFromURI The fastest way to add captions is importing from an SRT or VTT subtitle file. CE.SDK parses the file and creates caption blocks with timing already configured. ```typescript highlight-import-captions // Import captions from SRT file // createCaptionsFromURI parses SRT/VTT and creates caption blocks with timing const captionSrtUrl = 'https://img.ly/static/examples/captions.srt'; const captionBlocks = await engine.block.createCaptionsFromURI( captionSrtUrl ); // eslint-disable-next-line no-console console.log(`Imported ${captionBlocks.length} captions from SRT file`); // Adjust caption timing to start at the beginning of the video // The SRT file may have different timing, so we reset to start at 0 let currentOffset = 0; for (const captionId of captionBlocks) { const duration = engine.block.getDuration(captionId); engine.block.setTimeOffset(captionId, currentOffset); currentOffset += duration; } ``` The `createCaptionsFromURI` method downloads the subtitle file, parses the timing and text, and creates a caption track with all captions positioned correctly. It returns an array of caption block IDs for the imported captions. ### Creating the Caption Track After importing captions, create a caption track to organize them in the composition. The caption track manages caption positioning and display. ```typescript highlight-create-caption-track // Create a caption track and add captions to it // Caption tracks organize captions in the timeline const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); // Add each caption block to the track for (const captionId of captionBlocks) { engine.block.appendChild(captionTrack, captionId); } // eslint-disable-next-line no-console console.log(`Caption track created with ${captionBlocks.length} captions`); ``` Create a caption track with `engine.block.create('//ly.img.ubq/captionTrack')` and append it to the page. Then add each caption block to the track using `appendChild`. ## Using the Built-in Caption UI ### Caption Panel CE.SDK provides a caption panel in the inspector for visual caption management. When you select a caption, the panel shows timing controls, text editing, and styling options. Users can drag caption edges in the timeline to adjust timing or double-click to edit text. ### Importing via UI The caption panel includes an import button for uploading SRT or VTT files. The interface guides users through file selection and automatically extracts timing information. ### Styling with Presets Caption presets provide pre-configured styling combinations including font, color, background, and animations. Select a caption and choose from available presets to apply consistent styling. Presets are especially useful for maintaining brand consistency across videos. ### Editing Text and Timing Double-click a caption in the timeline or panel to edit its text. Drag the edges of caption blocks in the timeline to adjust start time and duration. The timeline provides visual feedback showing caption positions relative to video content. ## Creating Captions Programmatically ### Caption Track Setup For full control over captions, create them programmatically. First, create a caption track and append it to the page. ```typescript const captionTrack = engine.block.create('//ly.img.ubq/captionTrack'); engine.block.appendChild(page, captionTrack); ``` ### Creating Caption Blocks Create individual captions with text and timing. ```typescript const caption = engine.block.create('//ly.img.ubq/caption'); engine.block.appendChild(captionTrack, caption); // Set caption text engine.block.setString(caption, 'caption/text', 'Hello, world!'); // Set timing - appears at 2 seconds for 3 seconds engine.block.setTimeOffset(caption, 2); engine.block.setDuration(caption, 3); ``` Set the caption text using `setString` with the `caption/text` property. Position the caption in time using `setTimeOffset` (when it appears) and `setDuration` (how long it shows). ## Styling Captions ### Applying Presets The fastest way to style captions is using presets. Presets provide pre-configured styling including fonts, colors, backgrounds, and effects. ```typescript highlight-apply-preset // Apply a caption preset for consistent styling // Caption presets provide pre-configured styles (fonts, colors, backgrounds) const captionPresetsSourceId = 'ly.img.caption.presets'; const comicPresetId = '//ly.img.caption.presets/comic'; // Fetch the preset asset const comicPreset = await engine.asset.fetchAsset( captionPresetsSourceId, comicPresetId ); // Apply preset to the first caption (styling syncs across all captions) if (comicPreset && captionBlocks.length > 0) { await engine.asset.applyToBlock( captionPresetsSourceId, comicPreset, captionBlocks[0] ); // eslint-disable-next-line no-console console.log('Applied comic preset to captions'); } ``` Fetch a preset using `engine.asset.fetchAsset` and apply it with `engine.asset.applyToBlock`. Caption styling automatically syncs across all captions, so applying a preset to one caption styles them all. ### Positioning Captions Position captions at the bottom of the video frame using percentage-based positioning for responsive layout. ```typescript highlight-position-captions // Position captions at the bottom of the video frame // Caption position and size sync across all captions, so we only set it once if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Use percentage-based positioning for responsive layout engine.block.setPositionXMode(firstCaption, 'Percent'); engine.block.setPositionYMode(firstCaption, 'Percent'); engine.block.setWidthMode(firstCaption, 'Percent'); engine.block.setHeightMode(firstCaption, 'Percent'); // Position at bottom center with padding engine.block.setPositionX(firstCaption, 0.05); // 5% from left engine.block.setPositionY(firstCaption, 0.8); // 80% from top (near bottom) engine.block.setWidth(firstCaption, 0.9); // 90% width engine.block.setHeight(firstCaption, 0.15); // 15% height } ``` Use percentage mode (`setPositionXMode`, `setPositionYMode`) for positions that adapt to different video resolutions. Caption position and size sync across all captions automatically. ### Background Enable a background behind caption text for better readability over video content. Use `setBool` to enable `backgroundColor/enabled` and `setColor` to set `backgroundColor/color` with RGBA values. A semi-transparent black background (alpha 0.7) is common for video captions. ### Automatic Font Sizing CE.SDK can automatically adjust font size to fit caption text within bounds. Enable automatic sizing and set minimum and maximum size limits. ```typescript engine.block.setBool(captionId, 'caption/automaticFontSizeEnabled', true); engine.block.setFloat(captionId, 'caption/minAutomaticFontSize', 24); engine.block.setFloat(captionId, 'caption/maxAutomaticFontSize', 72); ``` This prevents text from overflowing while maintaining readability. ## Applying Presets Programmatically ### Finding Available Presets Query available caption presets from the asset library. ```typescript const presetsResult = await engine.asset.findAssets('ly.img.caption.presets', { page: 0, perPage: 100 }); const presets = presetsResult.assets; ``` The `findAssets` method returns preset metadata including IDs and preview thumbnails. ### Applying a Preset Apply a preset to a caption using `applyToBlock`. ```typescript const preset = presets[0]; await engine.asset.applyToBlock('ly.img.caption.presets', preset, captionId); ``` The preset applies all styling properties at once—font, colors, background, and any animations defined in the preset. ## Caption Animations ### Adding Entry Animations Make captions more engaging by adding entry animations. ```typescript highlight-add-animation // Add fade-in animation to the first caption if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Create and apply entry animation const fadeIn = engine.block.createAnimation('fade'); engine.block.setDuration(fadeIn, 0.3); engine.block.setInAnimation(firstCaption, fadeIn); // eslint-disable-next-line no-console console.log('Added fade-in animation to first caption'); } ``` Create an animation using `createAnimation` with types like 'fade', 'slide', or 'scale'. Set the animation duration and apply it with `setInAnimation`. ### Animation Types CE.SDK supports several animation types for captions: - **fade** - Opacity transition - **slide** - Position movement - **scale** - Size change - **blur** - Focus effect Set loop animations with `setLoopAnimation` for continuous effects, or exit animations with `setOutAnimation` for departure transitions. ## Reading Caption Properties ### Getting Text and Timing Retrieve caption properties to display in custom UI or for processing. ```typescript highlight-modify-caption // Modify a specific caption's text and timing if (captionBlocks.length > 0) { const firstCaption = captionBlocks[0]; // Get current text const currentText = engine.block.getString(firstCaption, 'caption/text'); // eslint-disable-next-line no-console console.log('First caption text:', currentText); // Get timing info const offset = engine.block.getTimeOffset(firstCaption); const duration = engine.block.getDuration(firstCaption); // eslint-disable-next-line no-console console.log(`First caption: offset=${offset}s, duration=${duration}s`); } ``` Use `getString` for text, `getTimeOffset` for start time, and `getDuration` for display length. These values are useful for building custom caption editors or synchronization tools. ## Exporting Videos with Captions ### Burned-In Captions When you export a video, captions are burned into the video as pixels. They become part of the video image and cannot be turned off by viewers. This ensures captions display correctly on any platform. ```typescript const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4' }); ``` The export process renders each frame with captions overlaid at the correct timing. Export time depends on video length and resolution. > **Note:** For accessibility, consider also providing separate subtitle files (SRT/VTT) alongside burned-in captions. This allows viewers to customize caption appearance in their video player. ## Troubleshooting | Issue | Cause | Solution | | --- | --- | --- | | Captions not visible | Not in caption track hierarchy | Check `getParent()`: page → captionTrack → caption | | Wrong timing | Time offset/duration incorrect | Verify `getTimeOffset()` and `getDuration()` | | Import fails | Unsupported format | Use valid SRT or VTT file | | Styling not applying | Property path wrong | Use `caption/` prefix for caption properties | ### Captions Not Appearing If captions don't show in the preview, verify the caption hierarchy. Each caption must be a child of a caption track, which must be a child of the page. Use `getParent()` to trace the hierarchy. Also check that the playhead position matches caption timing. Captions only appear during their time offset and duration window. ### Import Errors If `createCaptionsFromURI` fails, verify the URL is accessible and returns valid SRT or VTT content. Common issues include CORS restrictions and malformed subtitle files. Test the URL in a browser to confirm accessibility. ## API Reference | Method | Purpose | | --- | --- | | `engine.block.createCaptionsFromURI(uri)` | Import captions from SRT/VTT file | | `engine.block.create('//ly.img.ubq/captionTrack')` | Create caption track container | | `engine.block.create('//ly.img.ubq/caption')` | Create caption block | | `engine.block.setString(id, property, value)` | Set caption text | | `engine.block.setTimeOffset(id, offset)` | Set caption start time | | `engine.block.setDuration(id, duration)` | Set caption display duration | | `engine.block.setFloat(id, property, value)` | Set font size, spacing | | `engine.block.setEnum(id, property, value)` | Set alignment | | `engine.block.setBool(id, property, value)` | Enable background | | `engine.block.setColor(id, property, value)` | Set colors | | `engine.block.createAnimation(type)` | Create animation | | `engine.block.setInAnimation(id, animation)` | Set entry animation | | `engine.block.exportVideo(id, options)` | Export video with captions | | `engine.asset.findAssets(sourceId, params)` | Find presets | | `engine.asset.applyToBlock(sourceId, asset, block)` | Apply preset | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Watermark" description: "Add text and image watermarks to videos using CE.SDK for copyright protection, branding, and content attribution with timeline management and visibility controls." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/add-watermark-762ce6/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Add Watermark](https://img.ly/docs/cesdk/sveltekit/edit-video/add-watermark-762ce6/) --- Add text and image watermarks to video content for copyright protection, branding, and content attribution using CE.SDK's time-aware block system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-watermark-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-add-watermark-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-add-watermark-browser/) Video watermarks in CE.SDK are design blocks positioned over video content. **Text watermarks** display copyright notices, URLs, or branding text, while **image watermarks** show logos or graphics. Both watermark types need their time-based properties configured to remain visible throughout video playback. The key difference from static image watermarking is setting the watermark's `duration` to match the video duration. ```typescript file=@cesdk_web_examples/guides-create-video-add-watermark-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Add Watermark to Video Guide * * Demonstrates adding text and image watermarks to videos: * - Creating text watermarks with styling * - Creating image watermarks from logos * - Positioning watermarks on the canvas * - Setting watermark duration to match video * - Adding drop shadows for visibility * - Configuring opacity and blend modes */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Enable video editing features in CE.SDK cesdk.feature.enable('ly.img.video'); cesdk.feature.enable('ly.img.timeline'); cesdk.feature.enable('ly.img.playback'); // Create a video scene from a sample video const videoUrl = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; await cesdk.engine.scene.createFromVideo(videoUrl); const engine = cesdk.engine; const page = engine.scene.getCurrentPage()!; // Get page dimensions for watermark positioning const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Get the page duration (set automatically from the video) const videoDuration = engine.block.getDuration(page); // eslint-disable-next-line no-console console.log('Video duration from page:', videoDuration); // ===== TEXT WATERMARK ===== // Create a text watermark for copyright notice const textWatermark = engine.block.create('text'); // Use Auto sizing so the text block grows to fit its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Set the watermark text content using replaceText engine.block.replaceText(textWatermark, 'All rights reserved © 2025'); // Position in bottom-left corner with padding const textPadding = 20; engine.block.setPositionX(textWatermark, textPadding); engine.block.setPositionY(textWatermark, pageHeight - textPadding - 20); // Style the text watermark with a subtle font size engine.block.setFloat(textWatermark, 'text/fontSize', 4); engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // White text // Set text alignment to left engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Set watermark opacity for subtle appearance engine.block.setOpacity(textWatermark, 0.7); // Add drop shadow for visibility across different backgrounds engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.8 }); engine.block.setDropShadowOffsetX(textWatermark, 2); engine.block.setDropShadowOffsetY(textWatermark, 2); engine.block.setDropShadowBlurRadiusX(textWatermark, 4); engine.block.setDropShadowBlurRadiusY(textWatermark, 4); // Set the text watermark duration to match the video engine.block.setDuration(textWatermark, videoDuration); engine.block.setTimeOffset(textWatermark, 0); // Add the text watermark to the page engine.block.appendChild(page, textWatermark); // ===== IMAGE WATERMARK (LOGO) ===== // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rectangular shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with the logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain so the logo fits within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); // Size and position the logo in the top-right corner const logoSize = 80; const logoPadding = 20; engine.block.setWidth(logoWatermark, logoSize); engine.block.setHeight(logoWatermark, logoSize); engine.block.setPositionX(logoWatermark, pageWidth - logoSize - logoPadding); engine.block.setPositionY(logoWatermark, logoPadding); // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.6); // Set blend mode for better integration with video content engine.block.setBlendMode(logoWatermark, 'Normal'); // Set the logo watermark duration to match the video engine.block.setDuration(logoWatermark, videoDuration); engine.block.setTimeOffset(logoWatermark, 0); // Add the logo watermark to the page engine.block.appendChild(page, logoWatermark); // Select the page to show the timeline engine.block.setSelected(page, true); // Zoom to fit the page and enable auto-fit for responsive resizing await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40); // Start playback automatically try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video watermark guide initialized. Playback started with text and logo watermarks visible.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video watermark guide initialized. Click play button to start playback.' ); } } } export default Example; ``` This guide covers how to create text and image watermarks programmatically, position them on the canvas, style them for visibility, and configure their duration to span the entire video. ## Setting Up Video Editing Before adding watermarks, we configure CE.SDK for video editing. Timeline features are required for watermark duration control. ```typescript highlight-setup // Enable video editing features in CE.SDK cesdk.feature.enable('ly.img.video'); cesdk.feature.enable('ly.img.timeline'); cesdk.feature.enable('ly.img.playback'); ``` We enable three features: `ly.img.video` for video support, `ly.img.timeline` for the timeline UI panel, and `ly.img.playback` for the playback UI controls. ## Creating the Scene We create a scene from a video URL. This automatically sets up the page dimensions and time-based properties based on the video. ```typescript highlight-create-video-scene // Create a video scene from a sample video const videoUrl = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; await cesdk.engine.scene.createFromVideo(videoUrl); ``` The `createFromVideo` method loads the video, creates a scene, and sets the page dimensions to match the video's aspect ratio. The video becomes a fill block in the composition with its duration already set. ## Creating a Text Watermark Text watermarks display copyright notices, branding text, or URLs. We create a text block and position it on the canvas. ```typescript highlight-create-text-watermark // Create a text watermark for copyright notice const textWatermark = engine.block.create('text'); // Use Auto sizing so the text block grows to fit its content engine.block.setWidthMode(textWatermark, 'Auto'); engine.block.setHeightMode(textWatermark, 'Auto'); // Set the watermark text content using replaceText engine.block.replaceText(textWatermark, 'All rights reserved © 2025'); // Position in bottom-left corner with padding const textPadding = 20; engine.block.setPositionX(textWatermark, textPadding); engine.block.setPositionY(textWatermark, pageHeight - textPadding - 20); ``` We create a text block with `block.create('text')` and configure it with auto-sizing using `setWidthMode('Auto')` and `setHeightMode('Auto')`. This lets the text block grow to fit its content. We set the text content using `replaceText()` and position the watermark in the bottom-left corner with padding from the edges. ## Styling Text Watermarks Style the text for readability across different video backgrounds. ```typescript highlight-style-text-watermark // Style the text watermark with a subtle font size engine.block.setFloat(textWatermark, 'text/fontSize', 4); engine.block.setTextColor(textWatermark, { r: 1, g: 1, b: 1, a: 1 }); // White text // Set text alignment to left engine.block.setEnum(textWatermark, 'text/horizontalAlignment', 'Left'); // Set watermark opacity for subtle appearance engine.block.setOpacity(textWatermark, 0.7); ``` We set the font size using `setFloat()` with the `'text/fontSize'` property for a subtle watermark appearance. White text color ensures visibility, left alignment positions the text naturally, and 70% opacity creates a semi-transparent appearance that's visible but not distracting. ## Adding Drop Shadow for Visibility Drop shadows ensure text remains readable over both light and dark video backgrounds. ```typescript highlight-text-drop-shadow // Add drop shadow for visibility across different backgrounds engine.block.setDropShadowEnabled(textWatermark, true); engine.block.setDropShadowColor(textWatermark, { r: 0, g: 0, b: 0, a: 0.8 }); engine.block.setDropShadowOffsetX(textWatermark, 2); engine.block.setDropShadowOffsetY(textWatermark, 2); engine.block.setDropShadowBlurRadiusX(textWatermark, 4); engine.block.setDropShadowBlurRadiusY(textWatermark, 4); ``` We enable the drop shadow and configure its appearance. The black shadow color with 80% opacity provides contrast. Offset values (2px in each direction) separate the shadow from the text, while blur radius values (4px) create a soft shadow edge. ## Setting Text Watermark Duration The watermark must persist throughout video playback. We set its duration to match the video duration. ```typescript highlight-text-timeline // Set the text watermark duration to match the video engine.block.setDuration(textWatermark, videoDuration); engine.block.setTimeOffset(textWatermark, 0); // Add the text watermark to the page engine.block.appendChild(page, textWatermark); ``` `setDuration` controls how long the block appears in the composition. `setTimeOffset` of 0 ensures it starts at the beginning. We then append the watermark to the page, placing it above the video content. ## Creating an Image Watermark Image watermarks display logos or graphics. We create a graphic block with an image fill. ```typescript highlight-create-image-watermark // Create a graphic block for the logo watermark const logoWatermark = engine.block.create('graphic'); // Create a rectangular shape for the logo const rectShape = engine.block.createShape('rect'); engine.block.setShape(logoWatermark, rectShape); // Create an image fill with the logo const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/imgly_logo.jpg' ); engine.block.setFill(logoWatermark, imageFill); // Set content fill mode to contain so the logo fits within bounds engine.block.setContentFillMode(logoWatermark, 'Contain'); ``` We create a graphic block, assign it a rectangular shape, and fill it with an image. The `fill/image/imageFileURI` property specifies the logo URL. We set the content fill mode to 'Contain' so the logo fits within its bounds without cropping. This pattern—graphic block with shape and fill—is standard for displaying images in CE.SDK. ## Positioning Image Watermarks Position the logo in a corner that doesn't obstruct video content. ```typescript highlight-position-image-watermark // Size and position the logo in the top-right corner const logoSize = 80; const logoPadding = 20; engine.block.setWidth(logoWatermark, logoSize); engine.block.setHeight(logoWatermark, logoSize); engine.block.setPositionX(logoWatermark, pageWidth - logoSize - logoPadding); engine.block.setPositionY(logoWatermark, logoPadding); ``` We size the logo at 80x80 pixels—large enough to be recognizable but not dominating. Position values place it in the top-right corner with 20px padding from the edges. ## Configuring Opacity and Blend Mode Control how the watermark integrates with the video. ```typescript highlight-image-opacity-blend // Set opacity for the logo watermark engine.block.setOpacity(logoWatermark, 0.6); // Set blend mode for better integration with video content engine.block.setBlendMode(logoWatermark, 'Normal'); ``` We set 60% opacity for a subtle but visible watermark. The blend mode 'Normal' displays the logo as-is. Other modes like 'Multiply' or 'Screen' create different visual effects depending on the logo and video content. ## Setting Image Watermark Duration Like text watermarks, image watermarks need duration configuration. ```typescript highlight-image-timeline // Set the logo watermark duration to match the video engine.block.setDuration(logoWatermark, videoDuration); engine.block.setTimeOffset(logoWatermark, 0); // Add the logo watermark to the page engine.block.appendChild(page, logoWatermark); ``` We set the same duration and time offset as the text watermark so both appear throughout the video. The `appendChild` call adds the logo to the page above existing content. ## Watermark Positioning Strategies Choose watermark positions based on your use case: - **Bottom-right corner**: Most common for copyright notices. Less intrusive but clearly visible. - **Top-right corner**: Good for logos. Doesn't interfere with typical video framing. - **Bottom-left corner**: Alternative for text when bottom-right conflicts with video content. - **Center**: Strong protection but obstructs content. Use for draft or preview watermarks. Calculate positions dynamically based on page dimensions to handle different video aspect ratios. ## Best Practices ### Visibility - Use drop shadows on text watermarks for contrast against varying backgrounds - Set opacity between 50-70% for subtle but visible branding - Choose appropriate font sizes based on your use case (smaller for subtle branding, larger for prominent notices) - Test watermarks against different scenes in your video ### Time Management - Always match watermark duration to video duration - Set time offset to 0 for watermarks that should appear from the start - For time-based watermarks, calculate offsets based on video sections ### Performance - Use appropriately sized logo images (avoid oversized source files) - Limit the number of watermark blocks to minimize rendering overhead - Consider combining multiple watermarks into a single image if they're always used together ## API Reference | Method | Description | |--------|-------------| | `block.create('text')` | Create a text block for text watermarks | | `block.create('graphic')` | Create a graphic block for image watermarks | | `block.setWidthMode(id, mode)` | Set width sizing mode ('Auto', 'Absolute', 'Percent') | | `block.setHeightMode(id, mode)` | Set height sizing mode ('Auto', 'Absolute', 'Percent') | | `block.replaceText(id, text)` | Set text content for text blocks | | `block.setFloat(id, property, value)` | Set numeric properties like font size | | `block.createShape('rect')` | Create a rectangular shape for graphics | | `block.createFill('image')` | Create an image fill for logo watermarks | | `block.setString(id, property, value)` | Set string properties like image URI | | `block.setContentFillMode(id, mode)` | Set content fill mode ('Crop', 'Cover', 'Contain') | | `block.setDuration(id, duration)` | Set watermark duration | | `block.setTimeOffset(id, offset)` | Set watermark start time | | `block.setOpacity(id, opacity)` | Set watermark transparency (0.0-1.0) | | `block.setDropShadowEnabled(id, enabled)` | Enable/disable drop shadow | | `block.setDropShadowColor(id, color)` | Set shadow color | | `block.setDropShadowOffsetX/Y(id, offset)` | Set shadow position | | `block.setDropShadowBlurRadiusX/Y(id, radius)` | Set shadow blur | | `block.setBlendMode(id, mode)` | Set blend mode ('Normal', 'Multiply', etc.) | | `block.appendChild(parent, child)` | Add watermark to page | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Join and Arrange Video Clips" description: "Combine multiple video clips into sequences and organize them on the timeline using tracks and time offsets in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/join-and-arrange-3bbc30/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Join and Arrange](https://img.ly/docs/cesdk/sveltekit/edit-video/join-and-arrange-3bbc30/) --- Combine multiple video clips into sequences and organize them in the composition using CE.SDK's track system and programmatic APIs.  > **Reading time:** 12 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-join-and-arrange-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-join-and-arrange-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-join-and-arrange-browser/) Video compositions in CE.SDK use a hierarchy: **Scene → Page → Track → Clip**. Tracks organize clips for sequential playback—when you add clips to a track, they play one after another. You can control precise timing using time offsets and create layered compositions by adding multiple tracks to a page. In CE.SDK's block-based architecture, a **clip is a graphic block with a video fill**. This means video clips share the same APIs and capabilities as other blocks—you can position, rotate, scale, and apply effects to video just like images or shapes. The `addVideo()` helper creates this structure automatically and loads the video metadata. ```typescript file=@cesdk_web_examples/guides-create-video-join-and-arrange-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Join and Arrange Video Clips Guide * * Demonstrates combining multiple video clips into sequences: * - Creating video scenes and tracks * - Adding clips to tracks for sequential playback * - Reordering clips within a track * - Controlling clip timing with time offsets * - Creating multi-track compositions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page duration to accommodate all clips (15 seconds total) engine.block.setDuration(page, 15); // Sample video URL for the demonstration const videoUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; // Create video clips using the addVideo helper method // Each clip is sized to fill the canvas (1920x1080 is standard video resolution) const clipA = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 0 } }); const clipB = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 5 } }); const clipC = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 10 } }); // Create a track and add it to the page // Tracks organize clips for sequential playback on the timeline const track = engine.block.create('track'); engine.block.appendChild(page, track); // Add clips to the track engine.block.appendChild(track, clipA); engine.block.appendChild(track, clipB); engine.block.appendChild(track, clipC); // Resize all track children to fill the page dimensions engine.block.fillParent(track); // Query track children to verify order const trackClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Track clip count:', trackClips.length, 'clips'); // Set durations for each clip engine.block.setDuration(clipA, 5); engine.block.setDuration(clipB, 5); engine.block.setDuration(clipC, 5); // Set time offsets to position clips sequentially on the timeline engine.block.setTimeOffset(clipA, 0); engine.block.setTimeOffset(clipB, 5); engine.block.setTimeOffset(clipC, 10); // eslint-disable-next-line no-console console.log('Track offsets set: Clip A: 0s, Clip B: 5s, Clip C: 10s'); // Reorder clips: move Clip C to the beginning (index 0) // This demonstrates using insertChild for precise positioning engine.block.insertChild(track, clipC, 0); // After reordering, update time offsets to reflect the new sequence engine.block.setTimeOffset(clipC, 0); engine.block.setTimeOffset(clipA, 5); engine.block.setTimeOffset(clipB, 10); // eslint-disable-next-line no-console console.log('After reorder - updated offsets: C=0s, A=5s, B=10s'); // Get all clips in the track to verify arrangement const finalClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Final track arrangement:'); finalClips.forEach((clipId, index) => { const offset = engine.block.getTimeOffset(clipId); const duration = engine.block.getDuration(clipId); // eslint-disable-next-line no-console console.log( ` Clip ${index + 1}: offset=${offset}s, duration=${duration}s` ); }); // Create a second track for layered compositions // Track order determines z-index: last track renders on top const overlayTrack = engine.block.create('track'); engine.block.appendChild(page, overlayTrack); // Create an overlay clip for picture-in-picture effect (1/4 size) const overlayClip = await engine.block.addVideo( videoUrl, 1920 / 4, 1080 / 4, { timeline: { duration: 5, timeOffset: 2 } } ); engine.block.appendChild(overlayTrack, overlayClip); // Position overlay in bottom-right corner with padding engine.block.setPositionX(overlayClip, 1920 - 1920 / 4 - 40); engine.block.setPositionY(overlayClip, 1080 - 1080 / 4 - 40); // eslint-disable-next-line no-console console.log('Multi-track composition created with overlay starting at 2s'); // Select the first clip in the main track to show timeline controls engine.block.select(clipC); // Seek to 2.5s to show both main clip and overlay visible // (overlay starts at 2s, so 2.5s shows both elements) engine.block.setPlaybackTime(page, 2.5); // eslint-disable-next-line no-console console.log( 'Join and Arrange guide initialized. Use timeline to view clip arrangement.' ); } } export default Example; ``` This guide covers how to join clips using the built-in timeline UI, how to programmatically add and arrange clips in tracks, and how to create multi-track compositions. ## Joining Clips via UI CE.SDK's timeline UI provides visual tools for arranging video clips. ### Adding Clips to Timeline Drag clips from the asset panel directly onto the timeline. When you drop a clip on an existing track, it joins the sequence. Dropping on an empty area creates a new track for that clip. The timeline displays clip duration visually—longer clips take more horizontal space. You can see at a glance how clips relate to each other in time. ### Reordering Clips Drag clips within a track to reorder them. As you drag, CE.SDK shows where the clip will land. Release to confirm the new position. The timeline UI updates time offsets when you reorder clips via drag-and-drop, positioning clips sequentially without gaps. ### Creating Additional Tracks Add multiple tracks to create layered compositions. Tracks stack vertically in the timeline, and clips on upper tracks render on top of clips below. This enables picture-in-picture effects, overlays, and complex multi-layer edits. ## Programmatic Clip Joining ### Creating the Scene We create a scene and set up a page for the video composition. ```typescript highlight=highlight-create-video-scene await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set page duration to accommodate all clips (15 seconds total) engine.block.setDuration(page, 15); ``` The page duration determines how long the composition plays. Set it to accommodate all your clips—in this example, 15 seconds for three 5-second clips. ### Creating Video Clips We create video clips as graphic blocks with video fills. Each clip needs a video fill that references the source media. ```typescript highlight=highlight-create-clips // Create video clips using the addVideo helper method // Each clip is sized to fill the canvas (1920x1080 is standard video resolution) const clipA = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 0 } }); const clipB = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 5 } }); const clipC = await engine.block.addVideo(videoUrl, 1920, 1080, { timeline: { duration: 5, timeOffset: 10 } }); ``` The `addVideo` helper method creates a graphic block with an attached video fill and automatically loads the video resource metadata. We set width and height to control how the clip appears in the composition. The `timeline` options let us set duration and time offset in one call. ### Creating Tracks Tracks organize clips for sequential playback. We create a track and attach it to the page. ```typescript highlight=highlight-create-track // Create a track and add it to the page // Tracks organize clips for sequential playback on the timeline const track = engine.block.create('track'); engine.block.appendChild(page, track); ``` A track acts as a container for clips. When you add clips to a track, they play in the order they were added. ### Adding Clips to Track We add clips to the track using `appendChild`. Clips join the sequence in the order they're added. ```typescript highlight=highlight-add-clips-to-track // Add clips to the track engine.block.appendChild(track, clipA); engine.block.appendChild(track, clipB); engine.block.appendChild(track, clipC); // Resize all track children to fill the page dimensions engine.block.fillParent(track); // Query track children to verify order const trackClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Track clip count:', trackClips.length, 'clips'); ``` After adding clips, you can query the track's children to verify the order. `getChildren` returns an array of clip IDs in playback order. ### Setting Clip Durations Each clip needs a duration that determines how long it plays. ```typescript highlight=highlight-set-clip-durations // Set durations for each clip engine.block.setDuration(clipA, 5); engine.block.setDuration(clipB, 5); engine.block.setDuration(clipC, 5); ``` Duration is measured in seconds. A 5-second duration means the clip plays for 5 seconds. ## Arranging Clips ### Time Offsets Time offsets control when each clip starts playing. We set offsets to position clips at specific points in the composition. ```typescript highlight=highlight-time-offsets // Set time offsets to position clips sequentially on the timeline engine.block.setTimeOffset(clipA, 0); engine.block.setTimeOffset(clipB, 5); engine.block.setTimeOffset(clipC, 10); // eslint-disable-next-line no-console console.log('Track offsets set: Clip A: 0s, Clip B: 5s, Clip C: 10s'); ``` Clip A starts at 0 seconds, Clip B at 5 seconds, and Clip C at 10 seconds. Combined with 5-second durations, this creates a continuous 15-second sequence with no gaps. ### Reordering Clips Use `insertChild` to move clips to specific positions within a track. This moves an existing child to a new index. ```typescript highlight=highlight-reorder-clips // Reorder clips: move Clip C to the beginning (index 0) // This demonstrates using insertChild for precise positioning engine.block.insertChild(track, clipC, 0); // After reordering, update time offsets to reflect the new sequence engine.block.setTimeOffset(clipC, 0); engine.block.setTimeOffset(clipA, 5); engine.block.setTimeOffset(clipB, 10); // eslint-disable-next-line no-console console.log('After reorder - updated offsets: C=0s, A=5s, B=10s'); ``` When we insert Clip C at index 0, it becomes the first clip. The order changes from A-B-C to C-A-B. We update time offsets to match the new sequence. ### Querying Track Children Use `getChildren` to inspect the current clip order and verify arrangements. ```typescript highlight=highlight-get-track-children // Get all clips in the track to verify arrangement const finalClips = engine.block.getChildren(track); // eslint-disable-next-line no-console console.log('Final track arrangement:'); finalClips.forEach((clipId, index) => { const offset = engine.block.getTimeOffset(clipId); const duration = engine.block.getDuration(clipId); // eslint-disable-next-line no-console console.log( ` Clip ${index + 1}: offset=${offset}s, duration=${duration}s` ); }); ``` This loop outputs each clip's position, time offset, and duration—useful for debugging or building custom timeline UIs. ## Multi-Track Compositions ### Adding Multiple Tracks Create layered compositions by adding multiple tracks to a page. Track order determines rendering order—clips in later tracks appear on top. ```typescript highlight=highlight-multi-track // Create a second track for layered compositions // Track order determines z-index: last track renders on top const overlayTrack = engine.block.create('track'); engine.block.appendChild(page, overlayTrack); // Create an overlay clip for picture-in-picture effect (1/4 size) const overlayClip = await engine.block.addVideo( videoUrl, 1920 / 4, 1080 / 4, { timeline: { duration: 5, timeOffset: 2 } } ); engine.block.appendChild(overlayTrack, overlayClip); // Position overlay in bottom-right corner with padding engine.block.setPositionX(overlayClip, 1920 - 1920 / 4 - 40); engine.block.setPositionY(overlayClip, 1080 - 1080 / 4 - 40); // eslint-disable-next-line no-console console.log('Multi-track composition created with overlay starting at 2s'); ``` The overlay track contains a smaller clip positioned in the corner. It starts at 2 seconds and lasts 5 seconds, creating a picture-in-picture effect during that time range. ### Track Rendering Order CE.SDK renders tracks from first to last. The first track added appears at the bottom, and subsequent tracks layer on top. Use this to create: - **Background layers**: Full-screen videos or images on the first track - **Overlays**: Smaller clips positioned on upper tracks - **Titles**: Text or graphics that appear over video content ## Troubleshooting ### Clips Not Appearing If clips don't appear in the composition, verify they're attached to a track that's attached to the page. Use `getParent` and `getChildren` to inspect the hierarchy: ```typescript const parent = engine.block.getParent(clipId); const children = engine.block.getChildren(trackId); ``` ### Wrong Playback Order If clips play in unexpected order, check time offsets. Clips play based on their time offset values, not their order in the children array. Set explicit offsets when precise timing matters. ### Video Not Loading If video content doesn't appear when using `addVideo`, check that the video URL is accessible and the format is supported. The `addVideo` helper automatically loads video metadata. ## API Reference | Method | Description | Parameters | Returns | | --- | --- | --- | --- | | `block.addVideo(uri, width, height, options)` | Create video clip with automatic resource loading | `uri: string, width: number, height: number, options?: { timeline: { duration, timeOffset } }` | `Promise` | | `block.create('track')` | Create a new track | `type: 'track'` | `DesignBlockId` | | `block.appendChild(parent, child)` | Add child to parent | `parent: DesignBlockId, child: DesignBlockId` | `void` | | `block.insertChild(parent, child, index)` | Insert child at specific position | `parent: DesignBlockId, child: DesignBlockId, index: number` | `void` | | `block.getChildren(id)` | Get all children of a block | `id: DesignBlockId` | `DesignBlockId[]` | | `block.setTimeOffset(id, offset)` | Set when block starts playing | `id: DesignBlockId, offset: number` | `void` | | `block.getTimeOffset(id)` | Get block's time offset | `id: DesignBlockId` | `number` | | `block.setDuration(id, duration)` | Set block's duration | `id: DesignBlockId, duration: number` | `void` | | `block.getDuration(id)` | Get block's duration | `id: DesignBlockId` | `number` | ## Next Steps Now that you understand how to join and arrange clips, explore related video editing features: - [Trim Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) - Control which portion of media plays back - [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) - Master playback timing and audio mixing - [Video Timeline Overview](https://img.ly/docs/cesdk/sveltekit/create-video/timeline-editor-912252/) - Understand the complete timeline editing system --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Redact Sensitive Content in Videos" description: "Redact sensitive video content using blur, pixelization, or solid overlays. Essential for privacy protection when obscuring faces, license plates, or personal information." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/redaction-cf6d03/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Redaction](https://img.ly/docs/cesdk/sveltekit/edit-video/redaction-cf6d03/) --- Redact sensitive video content using blur, pixelization, or solid overlays for privacy protection.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-redaction-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-redaction-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-redaction-browser/) CE.SDK applies effects to blocks themselves, not as overlays affecting content beneath. This means redaction involves applying effects directly to the block for complete obscuration. Four techniques cover most privacy scenarios: full-block blur, radial blur, pixelization, and solid overlays. ```typescript file=@cesdk_web_examples/guides-create-video-redaction-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; // Video URLs for demonstrating different redaction scenarios const VIDEOS = { surfer: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', lifestyle1: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-7108793.mp4', lifestyle2: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-7108801.mp4', nature1: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-8713109.mp4', nature2: 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-taryn-elliott-8713114.mp4' }; // Labels for each redaction technique const LABELS = [ 'Radial Blur', 'Full-Block Blur', 'Pixelization', 'Solid Overlay', 'Time-Based' ]; // Duration for each video segment (in seconds) const SEGMENT_DURATION = 5.0; /** * CE.SDK Plugin: Video Redaction Guide * * Demonstrates video redaction techniques in CE.SDK: * - Full-block blur for complete video obscuration * - Radial blur for circular redaction patterns * - Pixelization for mosaic-style censoring * - Solid overlays for complete blocking * - Time-based redactions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } cesdk.feature.enable('ly.img.blur'); cesdk.feature.enable('ly.img.effect'); await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 1920, height: 1080, unit: 'Pixel' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Set 16:9 page dimensions (1920x1080) const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Load all videos simultaneously const videoUrls = [ VIDEOS.nature2, VIDEOS.surfer, VIDEOS.lifestyle1, VIDEOS.lifestyle2, VIDEOS.nature1 ]; const videos = await Promise.all( videoUrls.map((url) => engine.block.addVideo(url, pageWidth, pageHeight)) ); const [ radialVideo, fullBlurVideo, pixelVideo, // Base video for overlay segment (overlay is created separately) , timedVideo ] = videos; // Position all videos at origin (they'll play sequentially) videos.forEach((video, index) => { engine.block.setPositionX(video, 0); engine.block.setPositionY(video, 0); engine.block.setDuration(video, SEGMENT_DURATION); engine.block.setTimeOffset(video, index * SEGMENT_DURATION); engine.block.appendChild(page, video); }); // Full-Block Blur: Apply blur to entire video // Use this when the entire video content needs obscuring // Check if the block supports blur const supportsBlur = engine.block.supportsBlur(fullBlurVideo); // eslint-disable-next-line no-console console.log('Video supports blur:', supportsBlur); // Create and apply uniform blur to entire video const uniformBlur = engine.block.createBlur('uniform'); engine.block.setFloat(uniformBlur, 'blur/uniform/intensity', 0.7); engine.block.setBlur(fullBlurVideo, uniformBlur); engine.block.setBlurEnabled(fullBlurVideo, true); // Pixelization: Apply mosaic effect for clearly intentional censoring // Check if the block supports effects if (engine.block.supportsEffects(pixelVideo)) { // Create and apply pixelize effect const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.setInt( pixelizeEffect, 'effect/pixelize/horizontalPixelSize', 24 ); engine.block.setInt( pixelizeEffect, 'effect/pixelize/verticalPixelSize', 24 ); engine.block.appendEffect(pixelVideo, pixelizeEffect); engine.block.setEffectEnabled(pixelizeEffect, true); } // Solid Overlay: Create opaque shape for complete blocking // Best for highly sensitive information like documents or credentials // Create a solid rectangle overlay const overlay = engine.block.create('//ly.img.ubq/graphic'); const rectShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(overlay, rectShape); // Create solid black fill const solidFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(solidFill, 'fill/color/value', { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }); engine.block.setFill(overlay, solidFill); // Position and size the overlay engine.block.setWidth(overlay, pageWidth * 0.4); engine.block.setHeight(overlay, pageHeight * 0.3); engine.block.setPositionX(overlay, pageWidth * 0.55); engine.block.setPositionY(overlay, pageHeight * 0.65); engine.block.appendChild(page, overlay); engine.block.setTimeOffset(overlay, 3 * SEGMENT_DURATION); engine.block.setDuration(overlay, SEGMENT_DURATION); // Time-Based Redaction: Redaction appears only during specific time range // Apply blur to the video const timedBlur = engine.block.createBlur('uniform'); engine.block.setFloat(timedBlur, 'blur/uniform/intensity', 0.9); engine.block.setBlur(timedVideo, timedBlur); engine.block.setBlurEnabled(timedVideo, true); // The video is already timed to appear at a specific offset (set earlier) // You can adjust timeOffset and duration to control when redaction is visible engine.block.setTimeOffset(timedVideo, 4 * SEGMENT_DURATION); engine.block.setDuration(timedVideo, SEGMENT_DURATION); // Radial Blur: Use radial blur for face-like regions // Apply radial blur for circular redaction effect const radialBlur = engine.block.createBlur('radial'); engine.block.setFloat(radialBlur, 'blur/radial/blurRadius', 50); engine.block.setFloat(radialBlur, 'blur/radial/radius', 25); engine.block.setFloat(radialBlur, 'blur/radial/gradientRadius', 35); engine.block.setFloat(radialBlur, 'blur/radial/x', 0.5); engine.block.setFloat(radialBlur, 'blur/radial/y', 0.45); engine.block.setBlur(radialVideo, radialBlur); engine.block.setBlurEnabled(radialVideo, true); // Add text labels for each video segment (positioned top-right) const labelWidth = 400; const labelHeight = 60; const labelPadding = 20; const labelMargin = 30; videos.forEach((_, index) => { const label = LABELS[index]; // Add background first (so it's behind text) const labelBg = engine.block.create('//ly.img.ubq/graphic'); const labelBgShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(labelBg, labelBgShape); const labelBgFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(labelBgFill, 'fill/color/value', { r: 0.0, g: 0.0, b: 0.0, a: 0.8 }); engine.block.setFill(labelBg, labelBgFill); engine.block.setWidth(labelBg, labelWidth); engine.block.setHeight(labelBg, labelHeight + labelPadding); engine.block.setPositionX(labelBg, pageWidth - labelWidth - labelMargin); engine.block.setPositionY(labelBg, labelMargin); engine.block.setTimeOffset(labelBg, index * SEGMENT_DURATION); engine.block.setDuration(labelBg, SEGMENT_DURATION); engine.block.appendChild(page, labelBg); // Create text block for label const textBlock = engine.block.create('//ly.img.ubq/text'); engine.block.setString(textBlock, 'text/text', label); engine.block.setFloat(textBlock, 'text/fontSize', 48); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(textBlock, 'text/verticalAlignment', 'Center'); // Set white text color engine.block.setTextColor(textBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); // Position label at top right engine.block.setWidth(textBlock, labelWidth); engine.block.setHeight(textBlock, labelHeight); engine.block.setPositionX( textBlock, pageWidth - labelWidth - labelMargin ); engine.block.setPositionY(textBlock, labelMargin + labelPadding / 2); engine.block.setTimeOffset(textBlock, index * SEGMENT_DURATION); engine.block.setDuration(textBlock, SEGMENT_DURATION); engine.block.appendChild(page, textBlock); }); // Enable auto-fit to keep page in view cesdk.engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40); // Select first video to show timeline controls engine.block.select(fullBlurVideo); // eslint-disable-next-line no-console console.log( 'Video redaction guide initialized. Videos play sequentially - press play to see each redaction technique.' ); } } export default Example; ``` This guide covers how to use the built-in UI for blur and pixelization effects, and how to apply redaction programmatically using blur, pixelization, solid overlays, and time-based controls. ## Understanding Redaction in CE.SDK ### How Effects Work Effects in CE.SDK modify the block's appearance directly rather than creating transparent overlays that affect content beneath. When you blur a video block, the entire block becomes blurred—not just a region on top of the video. ### Choosing a Redaction Technique Select your technique based on privacy requirements and visual impact: - **Full-block blur**: Complete obscuration for backgrounds or placeholder content - **Radial blur**: Circular blur patterns ideal for face-like regions - **Pixelization**: Clearly intentional censoring that's faster to render than heavy blur - **Solid overlays**: Complete blocking for highly sensitive information like documents or credentials ## Using the Built-in UI ### Accessing Blur Controls When you select a video block, the inspector panel provides access to blur settings. Navigate to the blur section to find controls for different blur types including uniform, radial, linear, and mirrored. The uniform blur applies consistent intensity across the entire block. Adjust the intensity slider to control how strongly the content is obscured. Higher values create stronger privacy protection but may affect visual quality. ### Accessing Pixelization Controls The effects panel contains pixelization settings. Select your video block, open the effects section, and add a pixelize effect. Configure the horizontal and vertical pixel sizes to control the mosaic block dimensions. Larger pixel sizes create stronger obscuration but are more visually disruptive. Values between 15-30 pixels work well for standard redaction scenarios. ## Programmatic Redaction ### Full-Block Blur When the entire video needs obscuring, apply blur directly to the original block without duplication. This approach works well for background content or privacy placeholders. ```typescript highlight-full-block-blur // Check if the block supports blur const supportsBlur = engine.block.supportsBlur(fullBlurVideo); // eslint-disable-next-line no-console console.log('Video supports blur:', supportsBlur); // Create and apply uniform blur to entire video const uniformBlur = engine.block.createBlur('uniform'); engine.block.setFloat(uniformBlur, 'blur/uniform/intensity', 0.7); engine.block.setBlur(fullBlurVideo, uniformBlur); engine.block.setBlurEnabled(fullBlurVideo, true); ``` We first check that the block supports blur with `supportsBlur()`. Then we create a uniform blur, configure its intensity, attach it to the video block with `setBlur()`, and enable it with `setBlurEnabled()`. The intensity value ranges from 0.0 to 1.0, where higher values create stronger blur. ### Pixelization Pixelization creates a mosaic effect that's clearly intentional and renders faster than heavy blur. We use the effect system rather than the blur system for pixelization. ```typescript highlight-pixelization // Check if the block supports effects if (engine.block.supportsEffects(pixelVideo)) { // Create and apply pixelize effect const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.setInt( pixelizeEffect, 'effect/pixelize/horizontalPixelSize', 24 ); engine.block.setInt( pixelizeEffect, 'effect/pixelize/verticalPixelSize', 24 ); engine.block.appendEffect(pixelVideo, pixelizeEffect); engine.block.setEffectEnabled(pixelizeEffect, true); } ``` We check `supportsEffects()` before creating the pixelize effect. The horizontal and vertical pixel sizes control the mosaic block dimensions—larger values create stronger obscuration. ### Solid Overlays For complete blocking without any visual hint of the underlying content, create an opaque shape overlay. This approach doesn't require block duplication. ```typescript highlight-solid-overlay // Create a solid rectangle overlay const overlay = engine.block.create('//ly.img.ubq/graphic'); const rectShape = engine.block.createShape('//ly.img.ubq/shape/rect'); engine.block.setShape(overlay, rectShape); // Create solid black fill const solidFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(solidFill, 'fill/color/value', { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }); engine.block.setFill(overlay, solidFill); // Position and size the overlay engine.block.setWidth(overlay, pageWidth * 0.4); engine.block.setHeight(overlay, pageHeight * 0.3); engine.block.setPositionX(overlay, pageWidth * 0.55); engine.block.setPositionY(overlay, pageHeight * 0.65); engine.block.appendChild(page, overlay); ``` We create a graphic block with a rectangle shape and solid color fill. The overlay uses absolute page coordinates for positioning. Set the alpha to 1.0 for complete opacity. ### Time-Based Redaction Redactions can appear only during specific portions of the video. We use `setTimeOffset()` and `setDuration()` to control when the redaction is visible. ```typescript highlight-time-based-redaction // Apply blur to the video const timedBlur = engine.block.createBlur('uniform'); engine.block.setFloat(timedBlur, 'blur/uniform/intensity', 0.9); engine.block.setBlur(timedVideo, timedBlur); engine.block.setBlurEnabled(timedVideo, true); // The video is already timed to appear at a specific offset (set earlier) // You can adjust timeOffset and duration to control when redaction is visible engine.block.setTimeOffset(timedVideo, 4 * SEGMENT_DURATION); engine.block.setDuration(timedVideo, SEGMENT_DURATION); ``` The time offset specifies when the redaction appears (in seconds from the start), and the duration controls how long it remains visible. This is useful for redacting faces or information that only appears briefly. ### Radial Blur For face-like regions, radial blur creates a circular blur pattern that works well with rounded subjects. ```typescript highlight-radial-blur // Apply radial blur for circular redaction effect const radialBlur = engine.block.createBlur('radial'); engine.block.setFloat(radialBlur, 'blur/radial/blurRadius', 50); engine.block.setFloat(radialBlur, 'blur/radial/radius', 25); engine.block.setFloat(radialBlur, 'blur/radial/gradientRadius', 35); engine.block.setFloat(radialBlur, 'blur/radial/x', 0.5); engine.block.setFloat(radialBlur, 'blur/radial/y', 0.45); engine.block.setBlur(radialVideo, radialBlur); engine.block.setBlurEnabled(radialVideo, true); ``` Radial blur properties control the blur center (`x`, `y` from 0.0-1.0), the unblurred center area (`radius`), the blur transition zone (`gradientRadius`), and the blur strength (`blurRadius`). ## Performance Considerations Different redaction techniques have different performance impacts: - **Solid overlays**: Minimal impact, can create many without significant overhead - **Pixelization**: Faster than blur, larger pixel sizes have minimal impact - **Blur effects**: Higher intensity values increase rendering time For complex scenes with multiple redactions, consider using solid overlays where blur isn't necessary, or reduce blur intensity to maintain smooth playback. ## Troubleshooting ### Redaction Not Visible If your redaction doesn't appear, verify that: - The overlay is a child of the page with `appendChild()` - Blur is enabled with `setBlurEnabled()` after setting it with `setBlur()` - Effects are enabled with `setEffectEnabled()` after appending with `appendEffect()` ### Performance Issues Reduce blur intensity, use pixelization instead of heavy blur, or switch to solid overlays for some redactions. ## Best Practices - **Preview thoroughly**: Scrub the entire timeline to verify all sensitive content is covered - **Add safety margins**: Make redaction regions slightly larger than the sensitive area - **Test at export resolution**: Higher resolutions may need stronger blur settings - **Archive originals**: Exported redactions are permanent and cannot be reversed - **Document redactions**: For compliance requirements, maintain records of what was redacted ## API Reference | Method | Description | | ------ | ----------- | | `block.supportsBlur(id)` | Check if block supports blur effects | | `block.createBlur(type)` | Create blur instance (uniform, radial, linear, mirrored) | | `block.setBlur(id, blur)` | Apply blur to block | | `block.setBlurEnabled(id, enabled)` | Enable or disable blur | | `block.supportsEffects(id)` | Check if block supports effects | | `block.createEffect(type)` | Create effect instance (pixelize, etc.) | | `block.appendEffect(id, effect)` | Add effect to block | | `block.setEffectEnabled(effect, enabled)` | Enable or disable effect | | `block.setTimeOffset(id, offset)` | Set when block appears | | `block.setDuration(id, duration)` | Set block duration | | `block.create(type)` | Create block of specified type | | `block.createShape(type)` | Create shape for graphic blocks | | `block.setShape(id, shape)` | Apply shape to graphic block | | `block.createFill(type)` | Create fill (color, image, video, gradient) | | `block.setFill(id, fill)` | Apply fill to block | | `block.setFloat(id, property, value)` | Set float property value | | `block.setInt(id, property, value)` | Set integer property value | | `block.setColor(id, property, color)` | Set color property value | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Split Video and Audio" description: "Learn how to split video and audio clips at specific time points in CE.SDK, creating two independent segments from a single clip." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/split-464167/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Split](https://img.ly/docs/cesdk/sveltekit/edit-video/split-464167/) --- Split video and audio clips at specific time points using CE.SDK's timeline UI and programmatic split API to create independent segments.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-split-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-split-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-split-browser/) Clip splitting divides one block into two at a specified time. The original block ends at the split point; a new block starts there. Both blocks reference the same source media with independent timing. This differs from trimming, which adjusts a single block's playback range without creating new blocks. ```typescript file=@cesdk_web_examples/guides-create-video-split-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Split Video Guide * * Demonstrates splitting video clips in CE.SDK: * - Basic splitting at specific time points * - Configuring split options (attachToParent, selectNewBlock, createParentTrackIfNeeded) * - Splitting at playhead position * - Understanding split results (trim properties) * - Splitting multiple tracks at timeline position * - Split and delete workflow */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Get a video from demo asset sources const videoAssets = await engine.asset.findAssets('ly.img.video', { page: 0, perPage: 1 }); const videoUri = videoAssets.assets[0]?.payload?.sourceSet?.[0]?.uri ?? 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a video block to demonstrate basic splitting const basicSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill and load resource to access duration const basicFill = engine.block.getFill(basicSplitVideo); await engine.block.forceLoadAVResource(basicFill); // Set block duration for the timeline engine.block.setDuration(basicSplitVideo, 10.0); // Split the video block at 5 seconds // Returns the ID of the newly created block (second segment) const splitResultBlock = engine.block.split(basicSplitVideo, 5.0); // eslint-disable-next-line no-console console.log( `Basic split - Original block: ${basicSplitVideo}, New block: ${splitResultBlock}` ); // Create another video block to demonstrate split options const optionsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const optionsFill = engine.block.getFill(optionsSplitVideo); await engine.block.forceLoadAVResource(optionsFill); engine.block.setDuration(optionsSplitVideo, 10.0); // Split with custom options const optionsSplitResult = engine.block.split(optionsSplitVideo, 4.0, { attachToParent: true, // Attach new block to same parent (default: true) createParentTrackIfNeeded: false, // Don't create track if needed (default: false) selectNewBlock: false // Don't select the new block (default: true) }); // eslint-disable-next-line no-console console.log( `Split with options - New block: ${optionsSplitResult}, selectNewBlock: false` ); // Create a video block to demonstrate playhead-based splitting const playheadSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const playheadFill = engine.block.getFill(playheadSplitVideo); await engine.block.forceLoadAVResource(playheadFill); engine.block.setDuration(playheadSplitVideo, 10.0); // Get the clip's start time on the timeline const clipStartTime = engine.block.getTimeOffset(playheadSplitVideo); // Simulate a playhead position (in a real app, use engine.block.getPlaybackTime(page)) const simulatedPlayheadTime = clipStartTime + 3.0; // Calculate split time relative to the clip const splitTime = simulatedPlayheadTime - clipStartTime; // Perform the split at the calculated time const playheadSplitResult = engine.block.split( playheadSplitVideo, splitTime ); // eslint-disable-next-line no-console console.log( `Playhead split - Split at ${splitTime}s into clip, New block: ${playheadSplitResult}` ); // Create a video block to examine split results const resultsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const resultsFill = engine.block.getFill(resultsSplitVideo); await engine.block.forceLoadAVResource(resultsFill); engine.block.setDuration(resultsSplitVideo, 10.0); // Get trim values before split const originalTrimOffset = engine.block.getTrimOffset(resultsFill); const originalTrimLength = engine.block.getTrimLength(resultsFill); // Split at 6 seconds const resultsNewBlock = engine.block.split(resultsSplitVideo, 6.0); const newBlockFill = engine.block.getFill(resultsNewBlock); // Examine trim properties after split const originalAfterSplitOffset = engine.block.getTrimOffset(resultsFill); const originalAfterSplitLength = engine.block.getTrimLength(resultsFill); const newBlockTrimOffset = engine.block.getTrimOffset(newBlockFill); const newBlockTrimLength = engine.block.getTrimLength(newBlockFill); // eslint-disable-next-line no-console console.log('Split results:'); // eslint-disable-next-line no-console console.log( ` Original before: offset=${originalTrimOffset}, length=${originalTrimLength}` ); // eslint-disable-next-line no-console console.log( ` Original after: offset=${originalAfterSplitOffset}, length=${originalAfterSplitLength}` ); // eslint-disable-next-line no-console console.log( ` New block: offset=${newBlockTrimOffset}, length=${newBlockTrimLength}` ); // Create a video block to demonstrate split-and-delete workflow const deleteWorkflowVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const deleteFill = engine.block.getFill(deleteWorkflowVideo); await engine.block.forceLoadAVResource(deleteFill); engine.block.setDuration(deleteWorkflowVideo, 10.0); // Remove middle section: split at start of section to remove (2s) const middleBlock = engine.block.split(deleteWorkflowVideo, 2.0); // Split again at the end of the section to remove (at 3s into middle block = 5s total) const endBlock = engine.block.split(middleBlock, 3.0); // Delete the middle segment engine.block.destroy(middleBlock); // eslint-disable-next-line no-console console.log( `Split and delete - Removed middle 3s section, kept blocks: ${deleteWorkflowVideo}, ${endBlock}` ); // Create a video block to demonstrate split time validation const validateVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const validateFill = engine.block.getFill(validateVideo); await engine.block.forceLoadAVResource(validateFill); engine.block.setDuration(validateVideo, 8.0); // Get block duration to validate split time const blockDuration = engine.block.getDuration(validateVideo); const desiredSplitTime = 4.0; // Validate split time is within bounds (must be > 0 and < duration) if (desiredSplitTime > 0 && desiredSplitTime < blockDuration) { const validatedSplitResult = engine.block.split( validateVideo, desiredSplitTime ); // eslint-disable-next-line no-console console.log( `Validated split - Duration: ${blockDuration}s, Split at: ${desiredSplitTime}s, New block: ${validatedSplitResult}` ); } else { // eslint-disable-next-line no-console console.log('Split time out of range'); } // ===== Position all blocks in grid layout ===== // Note: Some original blocks were modified by splits, position remaining visible blocks const blocks = [ basicSplitVideo, splitResultBlock, optionsSplitVideo, optionsSplitResult, playheadSplitVideo, playheadSplitResult ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select first block so timeline controls are visible engine.block.setSelected(basicSplitVideo, true); // Set playback time to 8 seconds for hero image engine.block.setPlaybackTime(page, 8.0); // Start playback automatically when the example loads try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video split guide initialized. Playback started. Use timeline to see split results.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video split guide initialized. Click play button to start playback.' ); } } } export default Example; ``` This guide covers how to use the built-in timeline UI for visual splitting and how to split clips programmatically using the Engine API. ## Splitting Clips via the UI When you select a video or audio block in the timeline, CE.SDK provides split functionality through the toolbar. Position the playhead at the desired split point by clicking on the timeline ruler or dragging the playhead indicator. With the clip selected and playhead positioned, click the Split button in the timeline toolbar. CE.SDK divides the clip at the playhead position, creating two independent segments. Visual feedback shows the resulting segments as separate blocks on the timeline. The timeline enforces minimum duration constraints that prevent splitting too close to clip edges. If the playhead is positioned within this minimum boundary, the split operation will not be available. ## Programmatic Splitting For applications that need to split clips programmatically—whether for automation, batch processing, or dynamic editing—CE.SDK provides the `engine.block.split()` method. ### Basic Splitting at a Specific Time Split a block by providing the block ID and the split time in seconds. The time parameter is relative to the block's own time range, accounting for the block's time offset. ```typescript highlight-basic-split // Create a video block to demonstrate basic splitting const basicSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill and load resource to access duration const basicFill = engine.block.getFill(basicSplitVideo); await engine.block.forceLoadAVResource(basicFill); // Set block duration for the timeline engine.block.setDuration(basicSplitVideo, 10.0); // Split the video block at 5 seconds // Returns the ID of the newly created block (second segment) const splitResultBlock = engine.block.split(basicSplitVideo, 5.0); // eslint-disable-next-line no-console console.log( `Basic split - Original block: ${basicSplitVideo}, New block: ${splitResultBlock}` ); ``` The `split()` method returns the ID of the newly created block. The original block becomes the first segment (before the split point), and the returned block is the second segment (after the split point). ### Configuring Split Options The `SplitOptions` object controls split behavior with three optional properties: - **`attachToParent`** (default: `true`): Whether to attach the new block to the same parent as the original - **`createParentTrackIfNeeded`** (default: `false`): Creates a parent track if needed and adds both blocks to it - **`selectNewBlock`** (default: `true`): Whether to select the newly created block after splitting ```typescript highlight-split-options // Create another video block to demonstrate split options const optionsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const optionsFill = engine.block.getFill(optionsSplitVideo); await engine.block.forceLoadAVResource(optionsFill); engine.block.setDuration(optionsSplitVideo, 10.0); // Split with custom options const optionsSplitResult = engine.block.split(optionsSplitVideo, 4.0, { attachToParent: true, // Attach new block to same parent (default: true) createParentTrackIfNeeded: false, // Don't create track if needed (default: false) selectNewBlock: false // Don't select the new block (default: true) }); // eslint-disable-next-line no-console console.log( `Split with options - New block: ${optionsSplitResult}, selectNewBlock: false` ); ``` Use `selectNewBlock: false` when splitting multiple clips programmatically to avoid changing selection state between operations. ### Splitting at the Current Playhead Position To implement playhead-based splitting like the built-in UI, get the current playback time from the page and convert it to block-relative time. ```typescript highlight-split-at-playhead // Create a video block to demonstrate playhead-based splitting const playheadSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const playheadFill = engine.block.getFill(playheadSplitVideo); await engine.block.forceLoadAVResource(playheadFill); engine.block.setDuration(playheadSplitVideo, 10.0); // Get the clip's start time on the timeline const clipStartTime = engine.block.getTimeOffset(playheadSplitVideo); // Simulate a playhead position (in a real app, use engine.block.getPlaybackTime(page)) const simulatedPlayheadTime = clipStartTime + 3.0; // Calculate split time relative to the clip const splitTime = simulatedPlayheadTime - clipStartTime; // Perform the split at the calculated time const playheadSplitResult = engine.block.split( playheadSplitVideo, splitTime ); // eslint-disable-next-line no-console console.log( `Playhead split - Split at ${splitTime}s into clip, New block: ${playheadSplitResult}` ); ``` The playhead position from `getPlaybackTime(page)` is in absolute playback time. Subtract the clip's `getTimeOffset()` to convert to block-relative time before passing to `split()`. ## Understanding Split Results After a split operation, both the original and new blocks are configured with updated trim properties. ### Trim Properties After Split ```typescript highlight-split-results // Create a video block to examine split results const resultsSplitVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const resultsFill = engine.block.getFill(resultsSplitVideo); await engine.block.forceLoadAVResource(resultsFill); engine.block.setDuration(resultsSplitVideo, 10.0); // Get trim values before split const originalTrimOffset = engine.block.getTrimOffset(resultsFill); const originalTrimLength = engine.block.getTrimLength(resultsFill); // Split at 6 seconds const resultsNewBlock = engine.block.split(resultsSplitVideo, 6.0); const newBlockFill = engine.block.getFill(resultsNewBlock); // Examine trim properties after split const originalAfterSplitOffset = engine.block.getTrimOffset(resultsFill); const originalAfterSplitLength = engine.block.getTrimLength(resultsFill); const newBlockTrimOffset = engine.block.getTrimOffset(newBlockFill); const newBlockTrimLength = engine.block.getTrimLength(newBlockFill); // eslint-disable-next-line no-console console.log('Split results:'); // eslint-disable-next-line no-console console.log( ` Original before: offset=${originalTrimOffset}, length=${originalTrimLength}` ); // eslint-disable-next-line no-console console.log( ` Original after: offset=${originalAfterSplitOffset}, length=${originalAfterSplitLength}` ); // eslint-disable-next-line no-console console.log( ` New block: offset=${newBlockTrimOffset}, length=${newBlockTrimLength}` ); ``` The original block keeps its trim offset unchanged, but its trim length is reduced to the split point. The new block has its trim offset advanced by the split time and trim length set to cover the remaining duration. Both blocks reference the same source media—splitting is non-destructive. ### Timeline Positioning The original block keeps its `getTimeOffset()`. When `attachToParent` is true, the new block is positioned immediately after the original on the same parent. Both blocks stay on the same track unless `createParentTrackIfNeeded` creates a new track structure. ## Split and Delete Workflow Remove a middle section from a clip by splitting at both boundaries and deleting the middle segment. ```typescript highlight-split-and-delete // Create a video block to demonstrate split-and-delete workflow const deleteWorkflowVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const deleteFill = engine.block.getFill(deleteWorkflowVideo); await engine.block.forceLoadAVResource(deleteFill); engine.block.setDuration(deleteWorkflowVideo, 10.0); // Remove middle section: split at start of section to remove (2s) const middleBlock = engine.block.split(deleteWorkflowVideo, 2.0); // Split again at the end of the section to remove (at 3s into middle block = 5s total) const endBlock = engine.block.split(middleBlock, 3.0); // Delete the middle segment engine.block.destroy(middleBlock); // eslint-disable-next-line no-console console.log( `Split and delete - Removed middle 3s section, kept blocks: ${deleteWorkflowVideo}, ${endBlock}` ); ``` This workflow is useful for removing unwanted sections, such as cutting out pauses, mistakes, or irrelevant portions from a recording. ## Validating Split Time Always validate that the split time is within valid bounds before calling `split()`. The split time must be greater than 0 and less than the block's duration. ```typescript highlight-validate-split-time // Create a video block to demonstrate split time validation const validateVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const validateFill = engine.block.getFill(validateVideo); await engine.block.forceLoadAVResource(validateFill); engine.block.setDuration(validateVideo, 8.0); // Get block duration to validate split time const blockDuration = engine.block.getDuration(validateVideo); const desiredSplitTime = 4.0; // Validate split time is within bounds (must be > 0 and < duration) if (desiredSplitTime > 0 && desiredSplitTime < blockDuration) { const validatedSplitResult = engine.block.split( validateVideo, desiredSplitTime ); // eslint-disable-next-line no-console console.log( `Validated split - Duration: ${blockDuration}s, Split at: ${desiredSplitTime}s, New block: ${validatedSplitResult}` ); } else { // eslint-disable-next-line no-console console.log('Split time out of range'); } ``` Attempting to split at an invalid time (at the beginning, end, or outside the block's duration) will fail or produce unexpected results. ## Troubleshooting ### Split Returns Unexpected Block If the returned block ID doesn't behave as expected, remember that the original block becomes the first segment (before split point) and the returned block is the second segment (after split point). ### Split Time Out of Range If split fails or produces unexpected results, verify the split time is within bounds. Use `getDuration()` to check the valid range before splitting. ### Clip Not Splitting If `split()` has no visible effect, check that the block type supports splitting. Verify `supportsTrim()` returns true for the block's fill. For video and audio fills, ensure `forceLoadAVResource()` has been awaited before attempting to split. ## API Reference | Method | Description | Parameters | Returns | | ----------------------------- | ---------------------------------------------- | -------------------------------------------------- | ---------------- | | `split(id, atTime, options?)` | Split a block at the specified time | `id: DesignBlockId, atTime: number, options?: SplitOptions` | `DesignBlockId` | | `getTimeOffset(id)` | Get time offset relative to parent | `id: DesignBlockId` | `number` | | `getDuration(id)` | Get playback duration | `id: DesignBlockId` | `number` | | `getPlaybackTime(id)` | Get current playback time | `id: DesignBlockId` | `number` | | `getTrimOffset(id)` | Get trim offset of media content | `id: DesignBlockId` | `number` | | `getTrimLength(id)` | Get trim length of media content | `id: DesignBlockId` | `number` | | `supportsTrim(id)` | Check if block supports trim properties | `id: DesignBlockId` | `boolean` | | `forceLoadAVResource(id)` | Force load media resource metadata | `id: DesignBlockId` | `Promise` | | `destroy(id)` | Destroy a block | `id: DesignBlockId` | `void` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Transform" description: "Documentation for Transform" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) --- --- ## Related Pages - [Move Videos](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/move-aa9d89/) - Position videos on the canvas using absolute or percentage-based coordinates. - [Crop Videos](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/crop-8b1741/) - Cut out specific areas of a video to focus on key content or change aspect ratio. - [Rotate Videos](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/rotate-eaf662/) - Rotate video elements to adjust orientation and create dynamic compositions. - [Resize](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/resize-b1ce14/) - Resize videos in web apps using the CE.SDK - [Scale Videos in Web Apps](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/scale-f75c8a/) - Embed the CE.SDK scaling feature in your web app. - [Flip Videos](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/flip-a603b0/) - Flip videos horizontally or vertically to create mirror effects and symmetrical designs. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Crop Videos" description: "Cut out specific areas of a video to focus on key content or change aspect ratio." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/crop-8b1741/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Crop](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/crop-8b1741/) --- Crop videos to focus on specific areas, remove unwanted edges, or prepare clips for fixed formats like 9:16 stories using programmatic crop transforms.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-crop-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-crop-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-crop-browser/) Video cropping in CreativeEditor SDK (CE.SDK) lets you re-frame clips, remove unwanted edges, or adapt footage for platform-specific formats. Unlike resizing or scaling which affects the entire frame uniformly, cropping selects a specific region to display. ```typescript file=@cesdk_web_examples/guides-create-video-transform-crop-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 720, height: 1280, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page from the scene const pages = engine.block.findByType('page'); const page = pages[0]; // Add a video using the convenience API - this handles track creation automatically const videoUri = 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'; const videoBlock = await engine.block.addVideo(videoUri, 720, 1280); // Append the video block to the page (for video scenes, this adds to the track) engine.block.appendChild(page, videoBlock); // Set video duration on the timeline engine.block.setDuration(videoBlock, 10); // Get the fill to force load the video resource const videoFill = engine.block.getFill(videoBlock); await engine.block.forceLoadAVResource(videoFill); // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(videoBlock); console.log('Block supports crop:', supportsCrop); // Set content fill mode to 'Crop' for manual crop control // This enables the crop transform APIs to take effect engine.block.setContentFillMode(videoBlock, 'Crop'); // Scale the video content within its frame using uniform scale ratio // Values greater than 1.0 zoom in, values less than 1.0 zoom out engine.block.setCropScaleRatio(videoBlock, 1.1); // Pan the video content within the crop frame // Translation values are percentages of the crop frame dimensions // Positive X moves content right, positive Y moves content down engine.block.setCropTranslationX(videoBlock, 0.0); engine.block.setCropTranslationY(videoBlock, 0.0); // Rotate the video content within its frame // Rotation is specified in radians (Math.PI = 180 degrees) engine.block.setCropRotation(videoBlock, Math.PI / 90); // 2 degrees // Retrieve the current crop state const scaleRatio = engine.block.getCropScaleRatio(videoBlock); const translationX = engine.block.getCropTranslationX(videoBlock); const translationY = engine.block.getCropTranslationY(videoBlock); const rotation = engine.block.getCropRotation(videoBlock); console.log('Crop scale ratio:', scaleRatio); console.log('Crop translation X:', translationX); console.log('Crop translation Y:', translationY); console.log('Crop rotation (radians):', rotation); // Adjust crop to ensure content fills the frame without letterboxing // The minScaleRatio parameter sets the minimum allowed scale // This corrects any black bars caused by rotation or translation engine.block.adjustCropToFillFrame(videoBlock, 1.1); const finalScale = engine.block.getCropScaleRatio(videoBlock); console.log('Adjusted scale ratio:', finalScale); // Flip the video content within its crop frame // This flips the content, not the entire block engine.block.flipCropHorizontal(videoBlock); // Lock the crop aspect ratio during interactive editing // When locked, crop handles maintain the current aspect ratio engine.block.setCropAspectRatioLocked(videoBlock, true); const isLocked = engine.block.isCropAspectRatioLocked(videoBlock); console.log('Crop aspect ratio locked:', isLocked); // Reset crop to default state (removes all crop transformations) engine.block.resetCrop(videoBlock); // Re-apply a subtle zoom to demonstrate crop is working engine.block.setCropScaleRatio(videoBlock, 1.05); // Select the video block to show it in the UI engine.block.select(videoBlock); // Set playback time to show video content engine.block.setPlaybackTime(page, 2.0); // Zoom to the video block for better visibility of the crop effect cesdk.engine.scene.zoomToBlock(videoBlock, 0.5, 0.5, 0.8); } } export default Example; ``` This guide covers programmatic video cropping using scale, translation, and rotation transforms, checking crop support, adjusting crop to fill frames, flipping content, and locking aspect ratios. ## Check Crop Support Before applying crop operations, verify the block supports cropping using `engine.block.supportsCrop()`. Video blocks with fills support cropping: ```typescript highlight-check-crop-support // Verify the block supports cropping before applying crop operations const supportsCrop = engine.block.supportsCrop(videoBlock); console.log('Block supports crop:', supportsCrop); // Set content fill mode to 'Crop' for manual crop control // This enables the crop transform APIs to take effect engine.block.setContentFillMode(videoBlock, 'Crop'); ``` ## Scale Crop Scale the video content within its frame using `engine.block.setCropScaleRatio()`. Values greater than 1.0 zoom in, values less than 1.0 zoom out. This applies a uniform scale to both axes: ```typescript highlight-scale-crop // Scale the video content within its frame using uniform scale ratio // Values greater than 1.0 zoom in, values less than 1.0 zoom out engine.block.setCropScaleRatio(videoBlock, 1.1); ``` ## Translate Crop Pan the video content within the crop frame using `engine.block.setCropTranslationX()` and `engine.block.setCropTranslationY()`. Translation values are percentages of the crop frame dimensions. Positive X moves content right, positive Y moves content down: ```typescript highlight-translate-crop // Pan the video content within the crop frame // Translation values are percentages of the crop frame dimensions // Positive X moves content right, positive Y moves content down engine.block.setCropTranslationX(videoBlock, 0.0); engine.block.setCropTranslationY(videoBlock, 0.0); ``` ## Rotate Crop Rotate the video content within its frame using `engine.block.setCropRotation()`. Rotation is specified in radians where `Math.PI` equals 180 degrees: ```typescript highlight-rotate-crop // Rotate the video content within its frame // Rotation is specified in radians (Math.PI = 180 degrees) engine.block.setCropRotation(videoBlock, Math.PI / 90); // 2 degrees ``` ## Get Crop Values Retrieve the current crop state to read or restore crop settings using getter methods: ```typescript highlight-get-crop-values // Retrieve the current crop state const scaleRatio = engine.block.getCropScaleRatio(videoBlock); const translationX = engine.block.getCropTranslationX(videoBlock); const translationY = engine.block.getCropTranslationY(videoBlock); const rotation = engine.block.getCropRotation(videoBlock); console.log('Crop scale ratio:', scaleRatio); console.log('Crop translation X:', translationX); console.log('Crop translation Y:', translationY); console.log('Crop rotation (radians):', rotation); ``` ## Fill Frame Adjust the crop to ensure content fills the frame without letterboxing using `engine.block.adjustCropToFillFrame()`. The `minScaleRatio` parameter sets the minimum allowed scale: ```typescript highlight-fill-frame // Adjust crop to ensure content fills the frame without letterboxing // The minScaleRatio parameter sets the minimum allowed scale // This corrects any black bars caused by rotation or translation engine.block.adjustCropToFillFrame(videoBlock, 1.1); const finalScale = engine.block.getCropScaleRatio(videoBlock); console.log('Adjusted scale ratio:', finalScale); ``` This is useful after applying translations or rotations that might reveal empty areas. ## Flip Crop Flip the video content horizontally or vertically within its crop frame using `engine.block.flipCropHorizontal()` or `engine.block.flipCropVertical()`. This flips the content, not the block itself: ```typescript highlight-flip-crop // Flip the video content within its crop frame // This flips the content, not the entire block engine.block.flipCropHorizontal(videoBlock); ``` ## Lock Aspect Ratio Lock the crop aspect ratio during interactive editing using `engine.block.setCropAspectRatioLocked()`. When locked, crop handles maintain the current aspect ratio: ```typescript highlight-lock-aspect-ratio // Lock the crop aspect ratio during interactive editing // When locked, crop handles maintain the current aspect ratio engine.block.setCropAspectRatioLocked(videoBlock, true); const isLocked = engine.block.isCropAspectRatioLocked(videoBlock); console.log('Crop aspect ratio locked:', isLocked); ``` ## Reset Crop Reset all crop transformations to their default state using `engine.block.resetCrop()`: ```typescript highlight-reset-crop // Reset crop to default state (removes all crop transformations) engine.block.resetCrop(videoBlock); // Re-apply a subtle zoom to demonstrate crop is working engine.block.setCropScaleRatio(videoBlock, 1.05); ``` ## Coordinate System Crop transforms use normalized values: | Property | Value Type | Description | | --- | --- | --- | | Scale | Float (0.0+) | 1.0 is original size, 2.0 is double, 0.5 is half | | Translation | Float (-1.0 to 1.0) | Percentage of frame dimensions | | Rotation | Float (radians) | Math.PI = 180°, Math.PI/2 = 90° | All crop values are independent of canvas zoom level or timeline duration. ## Combining with Other Transforms You can combine crop operations with other block transforms like position, rotation, and scale. The crop transforms affect the content within the block, while block transforms affect the block itself on the canvas: ```typescript // Crop the content (scales/pans the video within its frame) engine.block.setCropScaleRatio(videoBlock, 1.5); engine.block.setCropRotation(videoBlock, Math.PI / 12); // Transform the block itself (moves/rotates the entire block on canvas) engine.block.setRotation(videoBlock, Math.PI / 6); engine.block.setWidth(videoBlock, 800); ``` ## Troubleshooting ### Crop Functions Not Working Check if the block supports cropping using `engine.block.supportsCrop()`. Ensure the block has a fill that supports cropping (video, image fills). ### Black Bars After Scaling Call `engine.block.adjustCropToFillFrame()` or increase the scale ratio so content fully covers the block frame. ### Unexpected Crop Behavior Verify you're operating on the correct block ID. Check that the video resource has loaded using `engine.block.forceLoadAVResource()` before applying crop transforms. ## API Reference | Method | Description | | --- | --- | | `engine.block.supportsCrop()` | Check if block supports cropping | | `engine.block.setCropScaleRatio()` | Set uniform scale ratio | | `engine.block.setCropScaleX()` | Set horizontal scale | | `engine.block.setCropScaleY()` | Set vertical scale | | `engine.block.setCropTranslationX()` | Set horizontal pan | | `engine.block.setCropTranslationY()` | Set vertical pan | | `engine.block.setCropRotation()` | Set rotation in radians | | `engine.block.getCropScaleRatio()` | Get current scale ratio | | `engine.block.getCropTranslationX()` | Get horizontal translation | | `engine.block.getCropTranslationY()` | Get vertical translation | | `engine.block.getCropRotation()` | Get rotation value | | `engine.block.adjustCropToFillFrame()` | Auto-adjust to fill frame | | `engine.block.flipCropHorizontal()` | Flip content horizontally | | `engine.block.flipCropVertical()` | Flip content vertically | | `engine.block.setCropAspectRatioLocked()` | Lock/unlock aspect ratio | | `engine.block.isCropAspectRatioLocked()` | Check if aspect ratio locked | | `engine.block.resetCrop()` | Reset all crop transforms | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Flip" description: "Flip videos horizontally or vertically to create mirror effects and symmetrical designs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/flip-a603b0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Flip](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/flip-a603b0/) --- Use **CE.SDK** to **mirror video clips** horizontally or vertically in your web app. Flip videos to create mirror effects and symmetrical designs using the same API calls to the image-flipping workflow. ## What You’ll Learn - Flip a video clip **horizontally or vertically**. - Use flipping in template or timeline **workflows**. - **Reset** or toggle a flip using JavaScript. ## When to Use Flipping is useful when you need to: - Create: - **Symmetrical** video layouts - Animated **collages** - Align **eyelines** when switching between front and rear cameras. - Keep **branded elements** facing inward on split-screen layouts. ## How to Flip Videos The CreativeEditor represents each video clip as a **graphic** block with: - Size - Transforms - Grouping - A fill set to a *video* asset Use the Engine BlockAPI boolean helpers, common to videos and images. ### Flip Horizontally or Vertically To flip a video: 1. Call the BlockAPI with `engine.block.SetFipHorizontal` or `engine.block.SetFipVertical`. 2. Specify the **block ID** to flip. 3. Set the boolean to `true`. ```ts engine.block.setFlipHorizontal(videoBlock, true); engine.block.setFlipVertical(videoBlock, true); ``` ### Query the Flip Status To know if a video has already been flipped: 1. Declare a variable for each direction. 2. Call `engine.block.getFlip`. 3. Specify the block ID. ```ts const flippedH = engine.block.getFlipHorizontal(videoBlock); const flippedV = engine.block.getFlipVertical(videoBlock); ``` The response is a boolean stating whether this specific block has already been flipped or not. > **Note:** Flipping only affects the **visual track**. Audio (either embedded or separate) isn’t reversed, so **lip-sync and sound design stay intact**. ### Flip Clips Together To simplify the process of rotating multiple blocks, instead of rotating each block individually, you can select and rotate a cluster of blocks simultaneously. 1. Declare a variable for the group of clips using `engine.block.group`. 2. Specify each clip to include in the group by its block ID. 3. Apply the flip to the group variable. For example, to flip three clips together: ```ts const groupId = await engine.block.group([clipId1, clipId2, clipId3]); engine.block.setFlipVertical(groupId, true); ``` When you flip the group: - The flip mirrors everything at once. - Each clip keeps the same **spacing and order** inside the group. ## Restore or Manage Flip States The CE.SDK provides ways to reset or toggle a flip. You can either: - **Reset:** when you want to restore a clip to its original orientation. - **Code a toggle:** when you need a quick way to switch the current flip state on and off. ### Reset a Flip To reset a clip to its default orientation: 1. Call `setFlip`. 2. Specify the clip’s block ID. 3. Set the boolean to `false`. For example, to reset a horizontal flip, use the following code: ```ts engine.block.setFlipHorizontal(videoBlock, false); ``` ### Switch Flip on or Off Calling the same flip twice: - **Doesn't** revert to the original orientation. - Issues two flips in the same direction. - Leaves the clip mirrored. To “toggle” the flip in your code: 1. Check if a specific clip is flipped. 2. Store the value in a variable (for example, `isFlipped`). 3. Set the opposite of that value in a new `setFlip`function. For example: ```ts const isFlipped = await engine.block.getFlipHorizontal(videoBlock); engine.block.setFlipHorizontal(videoBlock, !isFlipped); ``` In the preceding code, the two actions are possible depending on the value stored in `isFlipped`: - `true`: `!isFlipped` sets the horizontal flip to `false`. - `false`: `!isFlipped` sets the horizontal flip to `true`. You can add a toggle button to your custom UI to let users **quickly test flipping a video horizontally**. ## Lock or Constrain Flipping CE.SDK provides a way to prevent editors from flipping a video. This can be useful to: - Avoid accidentally mirroring text. - Protect UI mock-ups or frames that must stay in a fixed position. - Keep templates brand-locked. To deactivate flipping, use `setScopeEnabled` with: - The `"layer/flip"` key - The boolean set to `false` ```ts engine.block.setScopeEnabled(videoBlock, "layer/flip", false); ``` ## Troubleshooting | Issue | Solution | | --- | --- | | ❌ Clip appears flipped, but playback is blank | ✅ Make sure the video file has finished loading before applying the flip | | ❌ Flip seems ignored | ✅ Check whether the parent group is already flipped (flips are relative) | | ❌ Users can still flip in UI | ✅ Turn off the `"layer/flip"` scope or lock transforms in the template | ## API Reference Summary | BlockAPI `engine.block.<>` | Purpose | | --- | --- | | `setFlipHorizontal(blockId, boolean)` | Mirror a block left/right or restore the default orientation. | | `setFlipVertical(blockId, boolean)` | Mirror a block top/bottom or restore the default orientation. | | `getFlipHorizontal(blockId)` | Check whether the block is currently flipped horizontally. | | `getFlipVertical(blockId)` | Check whether the block is currently flipped vertically. | | `group(blockIds[])` | Group blocks so they can be flipped together. | | `setScopeEnabled(blockId, "layer/flip", boolean)` | Activate or deactivate flip controls to lock orientation. | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Move Videos" description: "Position videos on the canvas using absolute or percentage-based coordinates." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/move-aa9d89/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Move](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/move-aa9d89/) --- Position videos on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-move-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-move-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-move-browser/) Position videos on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts. ```typescript file=@cesdk_web_examples/guides-create-video-transform-move-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; class Example implements EditorPlugin { name = 'guides-create-video-transform-move-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Demo 1: Movable Video - Can be freely repositioned by user const movableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, movableVideo); engine.block.setPositionX(movableVideo, 0); engine.block.setPositionY(movableVideo, 100); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Movable'); engine.block.setFloat(text1, 'text/fontSize', 32); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 0); engine.block.setPositionY(text1, 310); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Add explanatory text below const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', 'Uses absolute positioning with pixel coordinates' ); engine.block.setFloat(explanation1, 'text/fontSize', 14); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, 200); engine.block.setPositionX(explanation1, 0); engine.block.setPositionY(explanation1, 345); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Percentage Positioning - Responsive layout const percentVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, percentVideo); // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentVideo, 'Percent'); engine.block.setPositionYMode(percentVideo, 'Percent'); // Position at 37.5% from left (300px), 30% from top (150px) engine.block.setPositionX(percentVideo, 0.375); engine.block.setPositionY(percentVideo, 0.3); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 32); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 310); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Add explanatory text below const explanation2 = engine.block.create('text'); engine.block.setString( explanation2, 'text/text', 'Uses percentage values (0.0-1.0) for responsive layouts' ); engine.block.setFloat(explanation2, 'text/fontSize', 14); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, 200); engine.block.setPositionX(explanation2, 300); engine.block.setPositionY(explanation2, 345); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Locked Video - Cannot be moved, rotated, or scaled const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, 550); engine.block.setPositionY(lockedVideo, 150); // Lock the transform to prevent user interaction engine.block.setBool(lockedVideo, 'transformLocked', true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 32); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 310); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Add explanatory text below const explanation3 = engine.block.create('text'); engine.block.setString( explanation3, 'text/text', 'Transform locked - cannot be repositioned' ); engine.block.setFloat(explanation3, 'text/fontSize', 14); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, 200); engine.block.setPositionX(explanation3, 550); engine.block.setPositionY(explanation3, 345); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Get current position values const currentX = engine.block.getPositionX(movableVideo); const currentY = engine.block.getPositionY(movableVideo); console.log('Current position:', currentX, currentY); // Move relative to current position const offsetX = engine.block.getPositionX(movableVideo); const offsetY = engine.block.getPositionY(movableVideo); engine.block.setPositionX(movableVideo, offsetX + 50); engine.block.setPositionY(movableVideo, offsetY + 50); // Adjust text positions after relative movement engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 310); engine.block.setPositionX(explanation1, 50); engine.block.setPositionY(explanation1, 345); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` This guide covers positioning videos with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning. ## Position Coordinates Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes. ## Positioning Videos Position videos using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates: ```typescript highlight-movable-video engine.block.appendChild(page, movableVideo); engine.block.setPositionX(movableVideo, 0); engine.block.setPositionY(movableVideo, 100); ``` ## Getting Current Position Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-position // Get current position values const currentX = engine.block.getPositionX(movableVideo); const currentY = engine.block.getPositionY(movableVideo); ``` ## Configuring Position Modes Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes. ## Percentage Positioning Position videos using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0: ```typescript highlight-percentage-positioning // Set position mode to percentage (0.0 to 1.0) engine.block.setPositionXMode(percentVideo, 'Percent'); engine.block.setPositionYMode(percentVideo, 'Percent'); ``` Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs. ## Relative Positioning Move videos relative to their current position by getting the current coordinates and adding offset values: ```typescript highlight-relative-positioning // Move relative to current position const offsetX = engine.block.getPositionX(movableVideo); const offsetY = engine.block.getPositionY(movableVideo); engine.block.setPositionX(movableVideo, offsetX + 50); engine.block.setPositionY(movableVideo, offsetY + 50); ``` ## Locking Transforms Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true: ```typescript highlight-locked-video // Lock the transform to prevent user interaction engine.block.setBool(lockedVideo, 'transformLocked', true); ``` ## Troubleshooting ### Video Not Moving Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the video block exists and values are within parent bounds. ### Unexpected Position Values Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning. ### Positioned Outside Visible Area Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors. ### Percentage Positioning Not Responsive Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change. ## API Reference | Method | Description | | ------------------------------------- | ------------------------------------------ | | `engine.block.addVideo()` | Create and position video in one operation | | `engine.block.setPositionX()` | Set X coordinate value | | `engine.block.setPositionY()` | Set Y coordinate value | | `engine.block.getPositionX()` | Get current X coordinate value | | `engine.block.getPositionY()` | Get current Y coordinate value | | `engine.block.setPositionXMode()` | Set position mode for X coordinate | | `engine.block.setPositionYMode()` | Set position mode for Y coordinate | | `engine.block.getPositionXMode()` | Get position mode for X coordinate | | `engine.block.getPositionYMode()` | Get position mode for Y coordinate | | `engine.block.setBool()` | Set transform lock state | | `engine.block.getBool()` | Get transform lock state | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Resize" description: "Resize videos in web apps using the CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/resize-b1ce14/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Resize](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/resize-b1ce14/) --- The **CreativeEditor SDK (CE.SDK)** provides a video resizing feature. This guide offers a complete overview of the resizing feature, from using it in the default UI to locking resizing to safeguard layouts.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-video-transform-resize-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-video-transform-resize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-video-transform-resize-browser/) ```typescript file=@cesdk_web_examples/guides-edit-video-transform-resize-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; class Example implements EditorPlugin { name = 'guides-edit-video-transform-resize-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Layout constants for centered positioning // Page: 800x500, 3 columns of 200px each with 50px spacing // Total width: 700px, centered start X: 50px // Column centers: 150, 400, 650 const videoWidth = 150; const videoHeight = 100; const columnWidth = 200; const startY = 165; // Vertically centered const labelY = startY + videoHeight + 10; const explanationY = labelY + 35; // Column 1 center: 150 const col1X = 50; const col1VideoX = col1X + (columnWidth - videoWidth) / 2; // 75 // Column 2 center: 400 (percentage video is 200px = 25% of 800) const col2X = 300; const col2VideoX = col2X; // 200px wide video centered at 400 // Column 3 center: 650 const col3X = 550; const col3VideoX = col3X + (columnWidth - videoWidth) / 2; // 575 // Demo 1: Resizable Video - Can be freely resized by user const resizableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, resizableVideo); engine.block.setPositionX(resizableVideo, col1VideoX); engine.block.setPositionY(resizableVideo, startY); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Resizable'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, columnWidth); engine.block.setPositionX(text1, col1X); engine.block.setPositionY(text1, labelY); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Add explanatory text below const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', 'Absolute pixel dimensions' ); engine.block.setFloat(explanation1, 'text/fontSize', 12); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, columnWidth); engine.block.setPositionX(explanation1, col1X); engine.block.setPositionY(explanation1, explanationY); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Percentage Sizing - Responsive layout const percentVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, percentVideo); // Set size mode to percentage (0.0 to 1.0) engine.block.setWidthMode(percentVideo, 'Percent'); engine.block.setHeightMode(percentVideo, 'Percent'); // Set to 25% width, 20% height of parent engine.block.setWidth(percentVideo, 0.25); engine.block.setHeight(percentVideo, 0.2); engine.block.setPositionX(percentVideo, col2VideoX); engine.block.setPositionY(percentVideo, startY); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Percentage'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, columnWidth); engine.block.setPositionX(text2, col2X); engine.block.setPositionY(text2, labelY); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Add explanatory text below const explanation2 = engine.block.create('text'); engine.block.setString(explanation2, 'text/text', '25% width, 20% height'); engine.block.setFloat(explanation2, 'text/fontSize', 12); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, columnWidth); engine.block.setPositionX(explanation2, col2X); engine.block.setPositionY(explanation2, explanationY); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Resize-Locked Video - Cannot be resized const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, col3VideoX); engine.block.setPositionY(lockedVideo, startY); // Lock the transform to prevent resizing engine.block.setTransformLocked(lockedVideo, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, columnWidth); engine.block.setPositionX(text3, col3X); engine.block.setPositionY(text3, labelY); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Add explanatory text below const explanation3 = engine.block.create('text'); engine.block.setString(explanation3, 'text/text', 'Transform locked'); engine.block.setFloat(explanation3, 'text/fontSize', 12); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, columnWidth); engine.block.setPositionX(explanation3, col3X); engine.block.setPositionY(explanation3, explanationY); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Get current dimensions const currentWidth = engine.block.getWidth(resizableVideo); const currentHeight = engine.block.getHeight(resizableVideo); console.log('Current dimensions:', currentWidth, 'x', currentHeight); // Check size mode const widthMode = engine.block.getWidthMode(percentVideo); const heightMode = engine.block.getHeightMode(percentVideo); console.log('Size modes:', widthMode, heightMode); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` ## What You'll Learn - Resize a single video block with the **default UI**. - Resize clips using **JavaScript** and the **CE.SDK API**. - Resize **groups** of video blocks uniformly. - **Lock** or restrict a user's ability to resize. ### When to Use Resize videos to: - Fit **template areas**. - Insert videos into reusable **layouts**. - Keep aspect ratios **consistent** for: - Social media posts (like reels) - Ads - Create **automation workflows** in JavaScript. - Combine with trimming or cropping. ## Resize a Video Block with the UI When using the default CE.SDK UI: 1. Select the video. 2. The resize handles appear. 3. Drag one of the handles to resize the video until you set the desired size. The editor provides two kinds of handles: - **Corner scale handles:** keep the video's aspect ratio. - **Edge handles:** stretch only the width or the height independently. Any embedded audio remains synchronous, because resizing affects only the block's frame, not the time-based properties. ### Hide the Resize Handles in the UI To prevent manual resizing in the UI, **hide the resize edge handles** using the **EditorAPI**: 1. Call the `setSetting` function. 2. Include the `"controlGizmo/showResizeHandles"` key. 3. Set the value to `false`. ```ts // Hide resize handles if you want to prevent manual resizing engine.editor.setSetting("controlGizmo/showResizeHandles", false); ``` > **Note:** This setting still **displays the corner handles** and helps avoid editing operations that change the size independently in the UI. ## Resize a Video Block with JavaScript When developing a custom UI use the CreativeEngine BlockAPI to edit a video's size. Two methods exist: choose the one that best suits your project. ### Set Absolute Sizing Set the video's absolute size with `setWidth` and `setHeight`. First, create the video block with `addVideo`, then set explicit pixel dimensions: ```typescript highlight-resizable-video const resizableVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', videoWidth, videoHeight ); engine.block.appendChild(page, resizableVideo); engine.block.setPositionX(resizableVideo, col1VideoX); engine.block.setPositionY(resizableVideo, startY); ``` ### Set Relative Sizing Set the video's size relative to its parent (for example, to the page): 1. Set the size mode with `setWidthMode` and `setHeightMode`. 2. Define the mode as `'Percent'`. 3. Set the size in normalized values, with `1` being full-width. ```typescript highlight-percentage-sizing // Set size mode to percentage (0.0 to 1.0) engine.block.setWidthMode(percentVideo, 'Percent'); engine.block.setHeightMode(percentVideo, 'Percent'); // Set to 25% width, 20% height of parent engine.block.setWidth(percentVideo, 0.25); engine.block.setHeight(percentVideo, 0.2); ``` The preceding code: - Sets the clip to 25% width of its parent. - Makes the clip 20% as tall. - Stays responsive to the parent's size changes. This method allows for the clip to follow the parent's size changes while maintaining proportional dimensions. ### Get Current Dimensions Read current size values using `getWidth` and `getHeight`. Values are returned in the current size mode (absolute pixels or percentage 0.0-1.0): ```typescript highlight-get-dimensions // Get current dimensions const currentWidth = engine.block.getWidth(resizableVideo); const currentHeight = engine.block.getHeight(resizableVideo); ``` ### Check Size Mode Query the current size mode using `getWidthMode` and `getHeightMode`: ```typescript highlight-get-size-mode // Check size mode const widthMode = engine.block.getWidthMode(percentVideo); const heightMode = engine.block.getHeightMode(percentVideo); ``` ### Maintain Aspect Ratio If the block's *fill* is a video (`FillType.video`), the engine preserves the footage's native aspect ratio. To force a different ratio, you must: 1. Calculate the ratio 2. Adjust one side, or add constraints (see **Locking** below). ## Resize Videos Together To resize several videos at once, instead of resizing each video individually: 1. Group the videos with `engine.block.group`. 2. Set the size for the entire group. ```ts // Group multiple video clips const group = engine.block.group([clipA, clipB, clipC]); // Resize the entire group - height scales proportionally engine.block.setWidth(group, 400); ``` To ensure consistent layout, groups of videos: - Always scale uniformly on both axes. - Show only *scale* and *rotate* gizmos in the UI, never individual resize handles. ## Lock or Constrain Resizing Use the BlockAPI to define if your app allows resizing for a specific block: 1. Tell the engine that each block has its own resize policy with `setGlobalScope`. 2. Call `setScopeEnabled`. 3. Include the video block ID. 4. Set the boolean's value for `locked`: - `true` enables resizing. - `false` deactivates resizing. ```ts // Disable only resize for this specific block engine.editor.setGlobalScope('layer/resize', 'Defer'); engine.block.setScopeEnabled(videoBlock, 'layer/resize', false); // The block can still be moved and rotated, but not resized via UI ``` Resize actions remain available through code, but not via the UI. Lock all transforms entirely to prevent resizing, repositioning, and rotation: ```typescript highlight-locked-video // Lock the transform to prevent resizing engine.block.setTransformLocked(lockedVideo, true); ``` The preceding code deactivates all transform actions, resize included: - Manual actions from the UI - Automated actions through code. Create templates with finer-grained scope keys to allow rotation or movement while forbidding size changes. ## Notes on Resizing with CE.SDK | Topic | What you want to do | What happens | | --- | --- | --- | | **Block duration** | Resize the block's on-canvas frame. | No need to retime; duration and trims stay untouched. | | **Content fill** | Switch the block to `.contain` or `.cover`. | Update it with `setContentFillMode` (see *common crop APIs*). | | **Performance** | Work on large canvases such as 4K. | Plan around GPU limits and the Video Editor 4K constraints. | ## Next Steps Now that you understand how to resize with the CE.SDK, take time to dive into other related features: - [Create a template](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) to enforce design rules. - [Use other transforms](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) available with the CreativeEditor. - [Add captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/) to videos. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Rotate Videos" description: "Rotate video elements to adjust orientation and create dynamic compositions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/rotate-eaf662/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Rotate](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/rotate-eaf662/) --- Rotate video elements to any angle using radians or degrees, with precise programmatic control and UI rotation handles.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-rotate-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-rotate-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-rotate-browser/) Rotation in CE.SDK occurs around the block's center point. All rotation values use radians, where `Math.PI` equals 180 degrees. Positive values rotate counterclockwise, negative values rotate clockwise. ```typescript file=@cesdk_web_examples/guides-create-video-transform-rotate-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; class Example implements EditorPlugin { name = 'guides-create-video-transform-rotate-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Demo 1: Rotated Video - Rotated 45 degrees const rotatedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, rotatedVideo); engine.block.setPositionX(rotatedVideo, 50); engine.block.setPositionY(rotatedVideo, 100); // Rotate the video 45 degrees (in radians) const toRadians = (degrees: number) => (degrees * Math.PI) / 180; engine.block.setRotation(rotatedVideo, toRadians(45)); // Add label for rotated video const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', '45° Rotation'); engine.block.setFloat(text1, 'text/fontSize', 28); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 200); engine.block.setPositionX(text1, 50); engine.block.setPositionY(text1, 320); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); // Get current rotation value const currentRotation = engine.block.getRotation(rotatedVideo); const toDegrees = (radians: number) => (radians * 180) / Math.PI; console.log('Current rotation:', toDegrees(currentRotation), 'degrees'); // Demo 2: 90 Degree Rotation const rotatedVideo90 = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, rotatedVideo90); engine.block.setPositionX(rotatedVideo90, 300); engine.block.setPositionY(rotatedVideo90, 100); // Rotate 90 degrees using Math.PI / 2 engine.block.setRotation(rotatedVideo90, Math.PI / 2); // Add label for 90 degree rotation const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', '90° Rotation'); engine.block.setFloat(text2, 'text/fontSize', 28); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 200); engine.block.setPositionX(text2, 300); engine.block.setPositionY(text2, 320); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); // Demo 3: Locked Rotation - Rotation is disabled for this block const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 200, 150 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, 550); engine.block.setPositionY(lockedVideo, 150); // Disable rotation for this specific block engine.block.setScopeEnabled(lockedVideo, 'layer/rotate', false); // Add label for locked video const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Rotation Locked'); engine.block.setFloat(text3, 'text/fontSize', 28); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 200); engine.block.setPositionX(text3, 550); engine.block.setPositionY(text3, 320); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); // Check if rotation is enabled for a block const canRotate = engine.block.isScopeEnabled(lockedVideo, 'layer/rotate'); console.log('Rotation enabled:', canRotate); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` This guide covers rotating videos programmatically, converting between degrees and radians, grouping blocks for collective rotation, and locking rotation permissions. ## Rotating Videos Rotate videos using `engine.block.setRotation()` with the angle in radians. Convert from degrees using the formula `radians = degrees * Math.PI / 180`: ```typescript highlight-rotate-video // Rotate the video 45 degrees (in radians) const toRadians = (degrees: number) => (degrees * Math.PI) / 180; engine.block.setRotation(rotatedVideo, toRadians(45)); ``` ## Getting Current Rotation Read the current rotation value using `engine.block.getRotation()`. The value is returned in radians. Convert to degrees with `degrees = radians * 180 / Math.PI`: ```typescript highlight-get-rotation // Get current rotation value const currentRotation = engine.block.getRotation(rotatedVideo); const toDegrees = (radians: number) => (radians * 180) / Math.PI; console.log('Current rotation:', toDegrees(currentRotation), 'degrees'); ``` ## Common Rotation Angles For 90-degree rotations, use `Math.PI / 2`. For 180 degrees, use `Math.PI`. For 270 degrees, use `3 * Math.PI / 2`: ```typescript highlight-rotate-90 // Rotate 90 degrees using Math.PI / 2 engine.block.setRotation(rotatedVideo90, Math.PI / 2); ``` ## Locking Rotation Disable rotation for specific blocks using `engine.block.setScopeEnabled()` with the `'layer/rotate'` scope set to false: ```typescript highlight-lock-rotation // Disable rotation for this specific block engine.block.setScopeEnabled(lockedVideo, 'layer/rotate', false); ``` ## Checking Rotation Permissions Check if rotation is enabled for a block using `engine.block.isScopeEnabled()`: ```typescript highlight-check-scope // Check if rotation is enabled for a block const canRotate = engine.block.isScopeEnabled(lockedVideo, 'layer/rotate'); console.log('Rotation enabled:', canRotate); ``` ## Troubleshooting ### Rotation Has No Effect Verify the block exists in the scene and is not a page block. Check if rotation is locked using `engine.block.isScopeEnabled(block, 'layer/rotate')`. ### Rotation Handle Missing Check if rotation handles are hidden globally via `controlGizmo/showRotateHandles` setting. Verify the `'layer/rotate'` scope is enabled for the block. ### Unexpected Rotation Direction Remember that positive values rotate counterclockwise in CE.SDK. To rotate clockwise, use negative radian values. ## API Reference | Method | Description | | ---------------------------------- | ---------------------------------------- | | `engine.block.setRotation()` | Set block rotation in radians | | `engine.block.getRotation()` | Get current rotation in radians | | `engine.block.setScopeEnabled()` | Enable/disable `'layer/rotate'` scope | | `engine.block.isScopeEnabled()` | Check if rotation is allowed | | `engine.block.setTransformLocked()`| Lock all transforms including rotation | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Scale Videos in Web Apps" description: "Embed the CE.SDK scaling feature in your web app." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/transform/scale-f75c8a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Transform](https://img.ly/docs/cesdk/sveltekit/edit-video/transform-369f28/) > [Scale](https://img.ly/docs/cesdk/sveltekit/edit-video/transform/scale-f75c8a/) --- The CreativeEditor provides a scaling feature to edit videos in your web app, to render an intended composition. Explore the different scaling options within CE.SDK, and learn how to embed it both from the UI and the API.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-scale-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-transform-scale-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-transform-scale-browser/) ## What You'll Learn - Scale videos through **JavaScript**. - Scale **proportionally** or non-uniformly. - **Group** elements to scale them together. - Apply or lock scaling **constraints** in templates. ## When to Use Use scaling to: - **Emphasize** or de-emphasize a clip in a composition. - **Fit** footage to a free-form layout without cropping. - Drive zoom gestures or **responsive** designs. ## How Scaling Works Scaling uses the `scale(block, scale, anchorX, anchorY)` function, with the following **parameters**: | Parameter | Description | Values | | ------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- | | `block` | Handle (ID) of the block to scale. | `number` | | `scale` | Scale factor to apply. | **1.0** keeps the original size. **>1.0** enlarges the block. **\< 1.0** shrinks it. | | `anchorX` `anchorY` | Origin point of scale along the width and height | **Top/Left** = 0, **Center** = 0.5, **Bottom/Right** = 1. **Defaults** = `0` | For example: - A value of `1.0` sets the original block's size. - A value of `2.0` makes the block twice as large. ```typescript file=@cesdk_web_examples/guides-create-video-transform-scale-browser/browser.ts reference-only import CreativeEditorSDK, { type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; class Example implements EditorPlugin { name = 'guides-create-video-transform-scale-browser'; version = CreativeEditorSDK.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Enable fill and set page fill color to #6686FF engine.block.setFillEnabled(page, true); engine.block.setColor(engine.block.getFill(page), 'fill/color/value', { r: 102 / 255, g: 134 / 255, b: 255 / 255, a: 1 }); // Centered 2x2 grid layout for 800x500 canvas // Videos: 120x90, scaled to 180x135 // Grid positions are where videos APPEAR after scaling // Left column visual X=200, Right column visual X=420 // Top row visual Y=50, Bottom row visual Y=265 const leftColumnX = 200; const rightColumnX = 420; const topRowY = 50; const bottomRowY = 265; const titleOffsetY = 145; // 135 (video height) + 10 (gap) const subtitleOffsetY = 172; // title + 27 // For center-scaled video, compensate for position shift // Center scaling shifts top-left by (-30, -22.5) for 1.5x scale on 120x90 const centerScaleOffsetX = 30; const centerScaleOffsetY = 22.5; // Demo 1: Uniform scaling from top-left (default anchor) const uniformVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, uniformVideo); engine.block.setPositionX(uniformVideo, leftColumnX); engine.block.setPositionY(uniformVideo, topRowY); // Scale the video to 150% from the default top-left anchor engine.block.scale(uniformVideo, 1.5); const text1 = engine.block.create('text'); engine.block.setString(text1, 'text/text', 'Uniform Scale'); engine.block.setFloat(text1, 'text/fontSize', 24); engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text1, 180); engine.block.setPositionX(text1, leftColumnX); engine.block.setPositionY(text1, topRowY + titleOffsetY); engine.block.setFillEnabled(text1, true); engine.block.setColor(engine.block.getFill(text1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text1); const explanation1 = engine.block.create('text'); engine.block.setString( explanation1, 'text/text', '150% from top-left anchor' ); engine.block.setFloat(explanation1, 'text/fontSize', 12); engine.block.setEnum(explanation1, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation1, 180); engine.block.setPositionX(explanation1, leftColumnX); engine.block.setPositionY(explanation1, topRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation1, true); engine.block.setColor( engine.block.getFill(explanation1), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation1); // Demo 2: Scaling from center anchor const centerVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, centerVideo); // Position compensates for center scaling shift so final position aligns with grid engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX); engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY); // Scale from center anchor (0.5, 0.5) engine.block.scale(centerVideo, 1.5, 0.5, 0.5); const text2 = engine.block.create('text'); engine.block.setString(text2, 'text/text', 'Center Scale'); engine.block.setFloat(text2, 'text/fontSize', 24); engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text2, 180); engine.block.setPositionX(text2, rightColumnX); engine.block.setPositionY(text2, topRowY + titleOffsetY); engine.block.setFillEnabled(text2, true); engine.block.setColor(engine.block.getFill(text2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text2); const explanation2 = engine.block.create('text'); engine.block.setString( explanation2, 'text/text', '150% from center anchor' ); engine.block.setFloat(explanation2, 'text/fontSize', 12); engine.block.setEnum(explanation2, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation2, 180); engine.block.setPositionX(explanation2, rightColumnX); engine.block.setPositionY(explanation2, topRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation2, true); engine.block.setColor( engine.block.getFill(explanation2), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation2); // Demo 3: Non-uniform scaling (width only) const stretchVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, stretchVideo); engine.block.setPositionX(stretchVideo, leftColumnX); engine.block.setPositionY(stretchVideo, bottomRowY); // Stretch only the width by 1.5x engine.block.setWidthMode(stretchVideo, 'Absolute'); const currentWidth = engine.block.getWidth(stretchVideo); engine.block.setWidth(stretchVideo, currentWidth * 1.5, true); const text3 = engine.block.create('text'); engine.block.setString(text3, 'text/text', 'Width Stretch'); engine.block.setFloat(text3, 'text/fontSize', 24); engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text3, 180); engine.block.setPositionX(text3, leftColumnX); engine.block.setPositionY(text3, bottomRowY + titleOffsetY); engine.block.setFillEnabled(text3, true); engine.block.setColor(engine.block.getFill(text3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text3); const explanation3 = engine.block.create('text'); engine.block.setString( explanation3, 'text/text', '150% width, height unchanged' ); engine.block.setFloat(explanation3, 'text/fontSize', 12); engine.block.setEnum(explanation3, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation3, 180); engine.block.setPositionX(explanation3, leftColumnX); engine.block.setPositionY(explanation3, bottomRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation3, true); engine.block.setColor( engine.block.getFill(explanation3), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation3); // Demo 4: Locked scaling const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, rightColumnX); engine.block.setPositionY(lockedVideo, bottomRowY); // Lock all transforms to prevent scaling engine.block.setTransformLocked(lockedVideo, true); const text4 = engine.block.create('text'); engine.block.setString(text4, 'text/text', 'Scale Locked'); engine.block.setFloat(text4, 'text/fontSize', 24); engine.block.setEnum(text4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(text4, 180); engine.block.setPositionX(text4, rightColumnX); engine.block.setPositionY(text4, bottomRowY + titleOffsetY); engine.block.setFillEnabled(text4, true); engine.block.setColor(engine.block.getFill(text4), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 }); engine.block.appendChild(page, text4); const explanation4 = engine.block.create('text'); engine.block.setString( explanation4, 'text/text', 'Transform locked - cannot scale' ); engine.block.setFloat(explanation4, 'text/fontSize', 12); engine.block.setEnum(explanation4, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(explanation4, 180); engine.block.setPositionX(explanation4, rightColumnX); engine.block.setPositionY(explanation4, bottomRowY + subtitleOffsetY); engine.block.setFillEnabled(explanation4, true); engine.block.setColor( engine.block.getFill(explanation4), 'fill/color/value', { r: 1, g: 1, b: 1, a: 1 } ); engine.block.appendChild(page, explanation4); // Set playhead position to 2 seconds engine.block.setPlaybackTime(page, 2); } } export default Example; ``` ## Scale a Video Uniformly To change the clip size without distorting its proportions, use uniform scaling. Uniform scaling multiplies both width and height by the **same factor** to keep the frame's aspect ratio intact. Scaling a video uniformly allows you to: - Enlarge or shrink footage without altering the content. - Maintain per-pixel sharpness. - Align with layout constraints. CE.SDK lets you use the same high-level API on all graphic blocks, videos included. To scale any block, use `engine.block.scale()`: ```typescript highlight-uniform-scale const uniformVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, uniformVideo); engine.block.setPositionX(uniformVideo, leftColumnX); engine.block.setPositionY(uniformVideo, topRowY); // Scale the video to 150% from the default top-left anchor engine.block.scale(uniformVideo, 1.5); ``` The preceding code: - Scales the video to 150% of its original size. - Doesn't change the origin anchor point. As a result, the video expands down and to the right. ### Anchor Point The anchor point is the point around which a layer scales. All changes happen around the anchor's point position. By default, any block's anchor point is **the top left**. To **change the anchor point**, the scale function has two optional parameters: - `anchorX` to move the anchor point along the width. - `anchorY` to move the anchor point along the height. Both can have values between 0.0 and 1.0. For example, to scale from the center: ```typescript highlight-center-scale const centerVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, centerVideo); // Position compensates for center scaling shift so final position aligns with grid engine.block.setPositionX(centerVideo, rightColumnX + centerScaleOffsetX); engine.block.setPositionY(centerVideo, topRowY + centerScaleOffsetY); // Scale from center anchor (0.5, 0.5) engine.block.scale(centerVideo, 1.5, 0.5, 0.5); ``` This function: 1. Scales the video to **150%** of its original size. 2. Sets the origin anchor point at the center with `0.5, 0.5`. This way, the video expands from the center equally in all directions. ## Scale Videos Non-Uniformly You might need to stretch a video only horizontally or vertically. To stretch or compress only one axis, thus distorting a video, use the **width** or **height** functions. ```typescript highlight-nonuniform-scale const stretchVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, stretchVideo); engine.block.setPositionX(stretchVideo, leftColumnX); engine.block.setPositionY(stretchVideo, bottomRowY); // Stretch only the width by 1.5x engine.block.setWidthMode(stretchVideo, 'Absolute'); const currentWidth = engine.block.getWidth(stretchVideo); engine.block.setWidth(stretchVideo, currentWidth * 1.5, true); ``` The preceding code: 1. Sets the width mode to `'Absolute'` to edit the video using a fixed pixel value instead of a relative layout mode. 2. Reads the current width. 3. Multiplies it by 1.5 to compute a new width that's 150% of the original. 4. Writes the new width back to the block with `maintainCrop` set to `true`. Use this to: - Create panoramic crops. - Compensate for aspect ratios during automation. ### Respect the Existing Crop The crop defines which part of the clip stays visible. Stretching the block without preserving its crop might: - Reveal unwanted areas. - Cut off the focal point. The `maintainCrop` parameter (third argument to `setWidth`) keeps the visible region intact and avoids distortion. Consider using `maintainCrop` if a **template** already uses cropping to frame a subject or hide a watermark. ## Scale Clips Together Grouping blocks is a useful way of scaling them proportionally. Use `engine.block.group()` to combine blocks into a group, then scale the group as a single unit: ```typescript const groupId = engine.block.group([videoBlockId, textBlockId]); engine.block.scale(groupId, 1.5, 0.5, 0.5); ``` The preceding code scales the entire group to 150% from the center anchor. > **Warning:** You can't group `page` with other blocks. Group elements on the **top** of the page, **not** with the page itself. ## Lock Scaling in Templates To preserve a template's layout, consider locking the scaling option. This is useful for: - Brand assets - Campaign creatives - Collaboration workflows - Fixed dimensions swapping editors ```typescript highlight-locked-scale const lockedVideo = await engine.block.addVideo( 'https://img.ly/static/ubq_video_samples/bbb.mp4', 120, 90 ); engine.block.appendChild(page, lockedVideo); engine.block.setPositionX(lockedVideo, rightColumnX); engine.block.setPositionY(lockedVideo, bottomRowY); // Lock all transforms to prevent scaling engine.block.setTransformLocked(lockedVideo, true); ``` ### Disable Resize Scope Disable the `layer/resize` scope when working with templates to **prevent users from scaling** blocks: ```typescript engine.block.setScopeEnabled(blockId, 'layer/resize', false); ``` ### Lock All Transformations To **lock** all transformations (move, resize, rotate), use `setTransformLocked`: ```typescript engine.block.setTransformLocked(blockId, true); ``` To check if scaling is currently allowed: ```typescript const canResize = engine.block.isScopeEnabled(blockId, 'layer/resize'); console.log('layer/resize scope enabled?', canResize); ``` ## Troubleshooting ### Video Not Scaling Check if transforms are locked using `engine.block.isTransformLocked(block)`. Ensure the block exists and is a valid design block. ### Unexpected Position After Scale Verify the anchor point coordinates. Default anchor (0, 0) causes expansion to the right and down. Use (0.5, 0.5) for center-based scaling. ### Crop Region Shifting When using `setWidth` or `setHeight`, pass `true` as the third parameter to maintain the crop region. ## Recap | Usage | How To | | ------------------ | ---------------------------------------------------------------------------------------------- | | Uniform scaling | `engine.block.scale(blockId, scaleFactor)` + optional anchor | | Stretching an axis | Set width mode to `'Absolute'`, then use `setWidth()` or `setHeight()` | | Group scaling | 1. Group with `engine.block.group([blockId_1, blockId_2])` 2. Scale the group | | Constraints | Adjust scopes or lock transforms to protect templates | ## API Reference | API | Usage | | ---------------------------- | ------------------------------------------------------------------ | | `block.scale` | Performs uniform or anchored scaling on blocks and groups. | | `block.setWidthMode` | Enables absolute sizing before changing a single axis. | | `block.getWidth` | Reads the current width before non-uniform scaling. | | `block.setWidth` | Writes the adjusted width after single-axis scaling. | | `block.setHeightMode` | Enables absolute sizing for height changes. | | `block.getHeight` | Reads the current height before non-uniform scaling. | | `block.setHeight` | Writes the adjusted height after single-axis scaling. | | `block.group` | Group blocks so they scale together. | | `block.setScopeEnabled` | Toggles the `layer/resize` scope to lock scaling in templates. | | `block.setTransformLocked` | Locks all transform scopes when templates must stay fixed. | | `block.isScopeEnabled` | Checks whether scaling is currently permitted on a block. | | `block.isTransformLocked` | Checks whether all transforms are locked on a block. | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Trim Video Clips" description: "Learn how to trim video clips in CE.SDK to control which portion of media plays back." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) > [Trim](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) --- Control video playback timing by trimming clips to specific start points and durations using CE.SDK's timeline UI and programmatic trim API.  > **Reading time:** 12 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-trim-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-trim-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-trim-browser/) Understanding the difference between **fill-level trimming** and **block-level timing** is essential. Fill-level trimming (`setTrimOffset`, `setTrimLength`) controls which portion of the source media plays, while block-level timing (`setTimeOffset`, `setDuration`) controls when and how long the block appears in the composition. These two systems work together to give you complete control over video playback. ```typescript file=@cesdk_web_examples/guides-create-video-trim-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Trim Video Guide * * Demonstrates trimming video clips in CE.SDK: * - Loading video resources with forceLoadAVResource * - Basic video trimming with setTrimOffset/setTrimLength * - Getting current trim values * - Coordinating trim with block duration * - Trimming with looping enabled * - Checking trim support * - Frame-accurate trimming * - Batch trimming multiple videos */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; const scene = engine.scene.get(); const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : scene; // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 8); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample video URL from demo assets const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a sample video block to demonstrate trim support checking const sampleVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill - trim operations are applied to the fill, not the block const videoFill = engine.block.getFill(sampleVideo); // Check if the fill supports trim operations const supportsTrim = engine.block.supportsTrim(videoFill); // eslint-disable-next-line no-console console.log('Video fill supports trim:', supportsTrim); // true for video fills // Select this block so timeline controls are visible engine.block.setSelected(sampleVideo, true); // Pattern: Always load video resource before accessing trim properties // This ensures metadata (duration, frame rate, etc.) is available await engine.block.forceLoadAVResource(videoFill); // Now we can safely access video metadata const totalDuration = engine.block.getDouble( videoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Total video duration:', totalDuration, 'seconds'); // Pattern #1: Demonstrate Individual Before Combined // Create a separate video block for basic trim demonstration const basicTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the fill to apply trim operations const basicTrimFill = engine.block.getFill(basicTrimVideo); // Load resource before trimming await engine.block.forceLoadAVResource(basicTrimFill); // Trim video to start at 2 seconds and play for 5 seconds engine.block.setTrimOffset(basicTrimFill, 2.0); engine.block.setTrimLength(basicTrimFill, 5.0); // Get current trim values to verify or modify const currentOffset = engine.block.getTrimOffset(basicTrimFill); const currentLength = engine.block.getTrimLength(basicTrimFill); // eslint-disable-next-line no-console console.log( `Basic trim - Offset: ${currentOffset}s, Length: ${currentLength}s` ); // Pattern #5: Progressive Complexity - coordinating trim with block duration // Create a video block demonstrating trim + duration coordination const durationTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const durationTrimFill = engine.block.getFill(durationTrimVideo); await engine.block.forceLoadAVResource(durationTrimFill); // Set trim: play portion from 3s to 8s (5 seconds of content) engine.block.setTrimOffset(durationTrimFill, 3.0); engine.block.setTrimLength(durationTrimFill, 5.0); // Set block duration: how long this block appears in the timeline // When duration equals trim length, the entire trimmed portion plays once engine.block.setDuration(durationTrimVideo, 5.0); // eslint-disable-next-line no-console console.log( 'Trim+Duration - Block will play trimmed 5s exactly once in timeline' ); // Create a video block with trim + looping const loopingTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const loopingTrimFill = engine.block.getFill(loopingTrimVideo); await engine.block.forceLoadAVResource(loopingTrimFill); // Trim to a short 3-second segment engine.block.setTrimOffset(loopingTrimFill, 1.0); engine.block.setTrimLength(loopingTrimFill, 3.0); // Enable looping so the 3-second segment repeats engine.block.setLooping(loopingTrimFill, true); // Verify looping is enabled const isLooping = engine.block.isLooping(loopingTrimFill); // eslint-disable-next-line no-console console.log('Looping enabled:', isLooping); // Set duration longer than trim length - the trim will loop to fill it engine.block.setDuration(loopingTrimVideo, 9.0); // eslint-disable-next-line no-console console.log( 'Looping trim - 3s segment will loop 3 times to fill 9s duration' ); // Pattern #6: Descriptive naming - frame-accurate trim demonstration // Create a video block for frame-accurate trimming const frameAccurateTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const frameFill = engine.block.getFill(frameAccurateTrimVideo); await engine.block.forceLoadAVResource(frameFill); // Note: Frame rate is not directly accessible via the API // For this example, we'll assume a common frame rate of 30fps const frameRate = 30; // Calculate trim offset based on specific frame number // Example: Start at frame 60 for a 30fps video = 2.0 seconds const startFrame = 60; const trimOffsetSeconds = startFrame / frameRate; // Trim for exactly 150 frames = 5.0 seconds at 30fps const trimFrames = 150; const trimLengthSeconds = trimFrames / frameRate; engine.block.setTrimOffset(frameFill, trimOffsetSeconds); engine.block.setTrimLength(frameFill, trimLengthSeconds); // eslint-disable-next-line no-console console.log( `Frame-accurate trim - Frame rate: ${frameRate}fps (assumed), Start frame: ${startFrame}, Duration: ${trimFrames} frames` ); // Pattern: Batch processing multiple video clips // Create multiple video blocks to demonstrate batch trimming const batchVideoUris = [ 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ]; const batchVideos = []; for (let i = 0; i < batchVideoUris.length; i++) { const batchVideo = await engine.block.addVideo( batchVideoUris[i], blockWidth, blockHeight ); batchVideos.push(batchVideo); // Get the fill for trim operations const batchFill = engine.block.getFill(batchVideo); // Load resource before trimming await engine.block.forceLoadAVResource(batchFill); // Apply consistent trim: first 4 seconds of each video engine.block.setTrimOffset(batchFill, 0.0); engine.block.setTrimLength(batchFill, 4.0); // Set consistent duration engine.block.setDuration(batchVideo, 4.0); } // eslint-disable-next-line no-console console.log('Batch trim - Applied consistent 4s trim to 3 video blocks'); // ===== Position all blocks in grid layout ===== const blocks = [ sampleVideo, // Position 0 basicTrimVideo, // Position 1 durationTrimVideo, // Position 2 loopingTrimVideo, // Position 3 frameAccurateTrimVideo, // Position 4 ...batchVideos // Positions 5-7 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Start playback automatically when the example loads try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video trim guide initialized. Playback started automatically. Use timeline controls to adjust trim handles.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video trim guide initialized. Click play button to start playback.' ); } } } export default Example; ``` This guide covers how to use the built-in timeline UI for visual trimming and how to trim videos programmatically using the Engine API. ## Understanding Trim Concepts ### Fill-Level Trimming When we trim a video, we're adjusting properties of the video's fill, not the block itself. The fill represents the media source—the actual video file. Fill-level trimming determines which portion of that source media will play. `setTrimOffset` specifies where playback starts within the source media. A trim offset of `2.0` skips the first two seconds of the video file. `setTrimLength` defines how much of the source media plays from the trim offset point. A trim length of 5.0 will play 5 seconds of the source. Combined with a trim offset of 2.0, the video plays from 2 seconds to 7 seconds of the original file. This trimming is completely non-destructive—the source video file remains unchanged. You can adjust trim values at any time to show different portions of the same media. > **Note:** Audio blocks use the same trim API (`setTrimOffset`, `setTrimLength`) as video > blocks. The concepts are identical, though this guide focuses on video. ### Block-Level Timing Block-level timing is separate from trimming and controls when and how long a block exists in the composition. `setTimeOffset` determines when the block becomes active in the composition (useful for track-based layouts). `setDuration` controls how long the block appears in the composition. The *trim* controls what plays from the source media, while the *duration* controls how long that playback appears in the composition. If the duration exceeds the trim length and if looping is disabled, the trimmed portion will play once and then hold the last frame for the remaining duration. ### Common Use Cases Trimming enables many video editing workflows: - **Remove unwanted segments** - Cut intro or outro portions to keep videos concise - **Extract key moments** - Isolate specific segments from longer source media - **Sync audio to video** - Trim audio and video independently for perfect alignment - **Create loops** - Trim to a specific length and enable loop mode for seamless repeating content - **Uniform compositions** - Batch trim multiple clips to consistent lengths ## Trimming Video via UI ### Accessing Trim Controls When you select a video block in the timeline, CE.SDK reveals trim handles at the edges of the clip. These visual controls appear as draggable handles on the left and right sides of the video block in the timeline panel. The trimmed portion of your video is visually distinguished from the untrimmed regions on either side that represent portions of the source media that won't play due to trim settings. This visual feedback makes it immediately clear which part of your video will be included in the final composition. ### Using Trim Handles We adjust trimming by dragging the handles. The left handle controls the trim offset—dragging it right increases the offset, skipping more of the beginning. Dragging left decreases the offset, including more from the start of the video. The right handle adjusts the trim length by changing where the video stops playing. Dragging left shortens the trim length, ending playback earlier. Dragging right extends it, playing more of the source media. For frame-accurate control, many CE.SDK interfaces provide numeric input fields where you can type exact time values in seconds. This precision is essential when you need to trim to specific frames or match exact durations. The icon on the trim handle turns into an outward-pointing arrow. ### Preview During Trimming Scrubbing the playhead through your trimmed content shows exactly what will play. This immediate feedback loop makes it easy to find the perfect trim points visually. If your video extends beyond the page duration, out-of-bounds content is indicated with a blue overlay in the timeline and won't be visible in the final output. ### Constraints and Limitations CE.SDK enforces a minimum trim duration to prevent creating zero-length or extremely short clips that could cause playback issues. If you try to drag handles closer than this minimum, the handle will resist further movement. When clips extend beyond page duration boundaries, grey visual indicators show which portions fall outside. While the video block may be longer than the page, only content within the page duration will appear in exports or final compositions. ## Programmatic Video Trimming ### Loading Video Resources Before accessing trim properties or setting trim values, we must load the video resource metadata using `forceLoadAVResource`. This critical step ensures CE.SDK has downloaded information about the video's duration, frame rate, and other properties needed for accurate trimming. ```typescript highlight-load-video-resource // Pattern: Always load video resource before accessing trim properties // This ensures metadata (duration, frame rate, etc.) is available await engine.block.forceLoadAVResource(videoFill); // Now we can safely access video metadata const totalDuration = engine.block.getDouble( videoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Total video duration:', totalDuration, 'seconds'); ``` Skipping this step is a common source of errors. Without loading the resource first, trim operations may fail silently or produce unexpected results. Always await `forceLoadAVResource` before calling any trim methods. Once loaded, we can access metadata like `totalDuration` and `frameRate` from the video fill. This information helps us calculate valid trim ranges and ensures we don't try to trim beyond the available media. ### Checking Trim Support Before applying trim operations, we verify that a block supports trimming. While video blocks typically support trimming, other block types like pages and scenes do not. ```typescript highlight-check-trim-support // Create a sample video block to demonstrate trim support checking const sampleVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the video fill - trim operations are applied to the fill, not the block const videoFill = engine.block.getFill(sampleVideo); // Check if the fill supports trim operations const supportsTrim = engine.block.supportsTrim(videoFill); // eslint-disable-next-line no-console console.log('Video fill supports trim:', supportsTrim); // true for video fills // Select this block so timeline controls are visible engine.block.setSelected(sampleVideo, true); ``` Checking support prevents runtime errors and allows you to build robust interfaces that only show trim controls for compatible blocks. Graphic blocks with video fills also support trimming, not just top-level video blocks. ### Trimming Video Once we've confirmed trim support and loaded the resource, we can apply trimming. Here we create a video block and trim it to start 2 seconds into the source media and play for 5 seconds. ```typescript highlight-basic-video-trim // Pattern #1: Demonstrate Individual Before Combined // Create a separate video block for basic trim demonstration const basicTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); // Get the fill to apply trim operations const basicTrimFill = engine.block.getFill(basicTrimVideo); // Load resource before trimming await engine.block.forceLoadAVResource(basicTrimFill); // Trim video to start at 2 seconds and play for 5 seconds engine.block.setTrimOffset(basicTrimFill, 2.0); engine.block.setTrimLength(basicTrimFill, 5.0); ``` The trim offset of 2.0 skips the first 2 seconds of the video. The trim length of 5.0 means exactly 5 seconds of video will play, starting from that offset point. So this video plays from the 2-second mark to the 7-second mark of the original file. ### Getting Current Trim Values We can retrieve the current trim settings to verify values, build UI controls, or make relative adjustments based on existing settings. ```typescript highlight-get-trim-values // Get current trim values to verify or modify const currentOffset = engine.block.getTrimOffset(basicTrimFill); const currentLength = engine.block.getTrimLength(basicTrimFill); // eslint-disable-next-line no-console console.log( `Basic trim - Offset: ${currentOffset}s, Length: ${currentLength}s` ); ``` These getter methods return the current trim offset and length in seconds. Use them to populate UI inputs, calculate remaining media duration, or create undo/redo functionality in your application. ## Additional Trimming Techniques ### Trimming with Block Duration Take a look at this example to understand how trim length and block duration interact: ```typescript highlight-trim-with-duration // Pattern #5: Progressive Complexity - coordinating trim with block duration // Create a video block demonstrating trim + duration coordination const durationTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const durationTrimFill = engine.block.getFill(durationTrimVideo); await engine.block.forceLoadAVResource(durationTrimFill); // Set trim: play portion from 3s to 8s (5 seconds of content) engine.block.setTrimOffset(durationTrimFill, 3.0); engine.block.setTrimLength(durationTrimFill, 5.0); // Set block duration: how long this block appears in the timeline // When duration equals trim length, the entire trimmed portion plays once engine.block.setDuration(durationTrimVideo, 5.0); // eslint-disable-next-line no-console console.log( 'Trim+Duration - Block will play trimmed 5s exactly once in timeline' ); ``` In this example, we trim the video to a 5-second segment (from 3s to 8s of the source) and set the block duration to exactly 5 seconds. This means the entire trimmed portion plays once, then stops. The block duration matches the trim length, so there's no looping or holding on the last frame. If the block duration is less than the trim length, only part of the trimmed segment will play. If duration exceeds trim length without looping enabled, the video plays the trimmed portion once and holds on the last frame for the remaining time. ### Trimming with Looping Looping allows a trimmed video segment to repeat seamlessly. We enable looping and set a block duration longer than the trim length to create repeating playback. ```typescript highlight-trim-with-looping // Create a video block with trim + looping const loopingTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const loopingTrimFill = engine.block.getFill(loopingTrimVideo); await engine.block.forceLoadAVResource(loopingTrimFill); // Trim to a short 3-second segment engine.block.setTrimOffset(loopingTrimFill, 1.0); engine.block.setTrimLength(loopingTrimFill, 3.0); // Enable looping so the 3-second segment repeats engine.block.setLooping(loopingTrimFill, true); // Verify looping is enabled const isLooping = engine.block.isLooping(loopingTrimFill); // eslint-disable-next-line no-console console.log('Looping enabled:', isLooping); // Set duration longer than trim length - the trim will loop to fill it engine.block.setDuration(loopingTrimVideo, 9.0); // eslint-disable-next-line no-console console.log( 'Looping trim - 3s segment will loop 3 times to fill 9s duration' ); ``` Here we trim to a 3-second segment and enable looping. The block duration of 9 seconds means this 3-second segment will loop 3 times to fill the entire duration. This technique is perfect for creating background loops, repeated motion graphics, or extending short clips. When looping is enabled, CE.SDK automatically restarts playback from the trim offset when it reaches the end of the trim length. ### Frame-Accurate Trimming For precise editing, we often need to trim to specific frame boundaries rather than arbitrary time values. Using the video's frame rate metadata, we can calculate exact frame-based trim points. ```typescript highlight-frame-accurate-trim // Pattern #6: Descriptive naming - frame-accurate trim demonstration // Create a video block for frame-accurate trimming const frameAccurateTrimVideo = await engine.block.addVideo( videoUri, blockWidth, blockHeight ); const frameFill = engine.block.getFill(frameAccurateTrimVideo); await engine.block.forceLoadAVResource(frameFill); // Note: Frame rate is not directly accessible via the API // For this example, we'll assume a common frame rate of 30fps const frameRate = 30; // Calculate trim offset based on specific frame number // Example: Start at frame 60 for a 30fps video = 2.0 seconds const startFrame = 60; const trimOffsetSeconds = startFrame / frameRate; // Trim for exactly 150 frames = 5.0 seconds at 30fps const trimFrames = 150; const trimLengthSeconds = trimFrames / frameRate; engine.block.setTrimOffset(frameFill, trimOffsetSeconds); engine.block.setTrimLength(frameFill, trimLengthSeconds); // eslint-disable-next-line no-console console.log( `Frame-accurate trim - Frame rate: ${frameRate}fps (assumed), Start frame: ${startFrame}, Duration: ${trimFrames} frames` ); ``` We first retrieve the frame rate from the video fill metadata. Then we convert frame numbers to time offsets by dividing by the frame rate. Starting at frame 60 with a 30fps video gives us exactly 2.0 seconds. Trimming for 150 frames provides exactly 5.0 seconds of playback. This technique ensures frame-accurate edits, which is essential for professional video editing workflows. Remember that codec compression may affect true frame accuracy—for critical applications, test with your target codecs to verify precision. ### Batch Processing Multiple Videos When working with multiple video clips that need consistent trimming, we can iterate through collections and apply the same trim settings programmatically. ```typescript highlight-batch-trim-videos // Pattern: Batch processing multiple video clips // Create multiple video blocks to demonstrate batch trimming const batchVideoUris = [ 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4', 'https://img.ly/static/ubq_video_samples/bbb.mp4' ]; const batchVideos = []; for (let i = 0; i < batchVideoUris.length; i++) { const batchVideo = await engine.block.addVideo( batchVideoUris[i], blockWidth, blockHeight ); batchVideos.push(batchVideo); // Get the fill for trim operations const batchFill = engine.block.getFill(batchVideo); // Load resource before trimming await engine.block.forceLoadAVResource(batchFill); // Apply consistent trim: first 4 seconds of each video engine.block.setTrimOffset(batchFill, 0.0); engine.block.setTrimLength(batchFill, 4.0); // Set consistent duration engine.block.setDuration(batchVideo, 4.0); } // eslint-disable-next-line no-console console.log('Batch trim - Applied consistent 4s trim to 3 video blocks'); ``` We create multiple video blocks and apply identical trim settings to each one. This ensures consistency across clips—perfect for creating video montages, multi-angle compositions, or any scenario where uniform clip lengths are required. When batch processing, always load each video's resources before trimming. Don't assume all videos have the same duration—check total duration to ensure your trim values don't exceed available media. ## Trim vs Duration Interaction ### How setDuration Affects Playback The relationship between trim length and block duration determines playback behavior. When block duration equals trim length, the video plays the trimmed portion exactly once. When duration is less than trim length, playback stops before the trimmed portion finishes. When duration exceeds trim length with looping disabled, the video plays once and holds on the last frame. With looping enabled, exceeding trim length causes the trimmed segment to repeat until the block duration is filled. This creates seamless loops as long as the content loops visually. ### Best Practices For predictable behavior, always consider both trim and duration together. Set trim values first to define the source media segment you want. Then set duration to control playback length. If you want the entire trimmed segment to play once, match duration to trim length. For looping content, enable looping before setting a longer duration. When building UIs, update both values together when users adjust trim handles. This prevents confusion about why a video isn't playing the full trimmed length (duration too short) or why it's holding on the last frame (duration too long without looping). ## Performance Considerations CE.SDK's video system is optimized for real-time editing, but understanding these performance factors helps you build responsive applications: - **Resource loading**: Use `forceLoadAVResource` judiciously. Loading resources has overhead, so batch loads when possible rather than loading repeatedly. - **Trim adjustments**: Changing trim values is lightweight—CE.SDK updates the playback range without reprocessing the video. You can adjust trim interactively without performance concerns. - **Mobile devices**: Video decoding is more expensive on mobile. Limit the number of simultaneous video blocks and consider lower resolution sources for editing (high resolution for export). - **Long videos**: Very long source videos (30+ minutes) may have slower seeking to trim offsets. Consider pre-cutting extremely long videos into shorter segments. Test your trim operations on target devices early in development to ensure acceptable performance for your users. ## Troubleshooting ### Trim Not Applied If setting trim values has no visible effect, the most common cause is forgetting to await `forceLoadAVResource`. The resource must be loaded before trim values take effect. Always load resources first. Another possibility is confusing time offset with trim offset. `setTimeOffset` controls when the block appears in the composition, while `setTrimOffset` controls where in the source media playback starts. Make sure you're using the correct method. ### Incorrect Trim Calculation If trim values seem offset or produce unexpected results, verify you're calculating based on the source media duration, not the block duration. Use `getTotalDuration` from the fill metadata to understand the available media length. Also check that you're not exceeding the total available duration. Trim offset plus trim length should never exceed total duration. CE.SDK may clamp values automatically, but it's better to validate before setting. ### Playback Beyond Trim Length If video plays past the intended trim length, check that block duration doesn't exceed trim length. When duration is longer and looping is disabled, the video will hold on the last frame for the excess duration. Ensure looping is set correctly for your use case. If you want playback to stop at the trim length, set duration equal to trim length or enable looping. ### Audio/Video Desync When trimming both audio and video independently, desynchronization can occur if offset and duration values aren't coordinated carefully. Calculate both trim offsets to maintain the original relationship between audio and video timing. Consider the original sync point between audio and video in the source media. If they were perfectly synced at 0 seconds originally, maintaining the same offset difference preserves that sync. ### Frame-Accurate Trim Issues If frame-accurate trimming doesn't land on exact frames, remember that floating-point precision can cause tiny discrepancies. Round your calculated values to a reasonable precision (e.g., 3 decimal places). Also understand codec limitations. Variable frame rate videos don't have perfectly uniform frame timing, so true frame accuracy may not be possible. Use constant frame rate sources for critical frame-accurate applications. ## Best Practices ### Workflow Recommendations 1. Always `await forceLoadAVResource()` before accessing trim properties 2. Check `supportsTrim()` before applying trim operations 3. Coordinate trim length with block duration for predictable behavior 4. Use TypeScript for type safety with CE.SDK API 5. Preview trimmed content before final export 6. Validate trim values don't exceed total media duration ### Code Organization - Separate media loading from trim logic - Create helper functions for common trim patterns (e.g., `trimToFrames`, `trimToPercentage`) - Handle errors gracefully with try-catch blocks around `forceLoadAVResource` - Document complex trim calculations with comments explaining frame math ### Performance Optimization - Avoid redundant `forceLoadAVResource` calls—load once, trim multiple times - Use appropriate preview quality settings during editing to maintain responsiveness - Test on target devices early to identify performance bottlenecks ## API Reference | Method | Description | Parameters | Returns | | -------------------------------- | ---------------------------------- | ------------------------------------- | --------------- | | `getFill(id)` | Get the fill block for a block | `id: DesignBlockId` | `DesignBlockId` | | `forceLoadAVResource(id)` | Force load media resource metadata | `id: DesignBlockId` | `Promise` | | `supportsTrim(id)` | Check if block supports trimming | `id: DesignBlockId` | `boolean` | | `setTrimOffset(id, offset)` | Set start point of media playback | `id: DesignBlockId, offset: number` | `void` | | `getTrimOffset(id)` | Get current trim offset | `id: DesignBlockId` | `number` | | `setTrimLength(id, length)` | Set duration of trimmed media | `id: DesignBlockId, length: number` | `void` | | `getTrimLength(id)` | Get current trim length | `id: DesignBlockId` | `number` | | `getAVResourceTotalDuration(id)` | Get total duration of source media | `id: DesignBlockId` | `number` | | `setLooping(id, enabled)` | Enable/disable media looping | `id: DesignBlockId, enabled: boolean` | `void` | | `isLooping(id)` | Check if media looping is enabled | `id: DesignBlockId` | `boolean` | | `setDuration(id, duration)` | Set block playback duration | `id: DesignBlockId, duration: number` | `void` | | `getDuration(id)` | Get block duration | `id: DesignBlockId` | `number` | | `setTimeOffset(id, offset)` | Set when block becomes active | `id: DesignBlockId, offset: number` | `void` | | `getTimeOffset(id)` | Get block time offset | `id: DesignBlockId` | `number` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Engine Interface" description: "Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Engine](https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/) --- Access CE.SDK's cross-platform C++ engine programmatically for client-side automation, background processing, and custom workflows in the browser. CE.SDK is built on a layered architecture where a cross-platform C++ core engine powers all creative operations. The Editor UI and your programmatic code access identical capabilities through the same underlying engine. ## Web SDK Packages CE.SDK offers three npm packages: **@cesdk/cesdk-js**: Full package with Editor UI and Engine. Initialize with `CreativeEditorSDK.create()` and access the Engine via `cesdk.engine`. Use this when users edit designs visually while your code handles background tasks. ```javascript import CreativeEditorSDK from '@cesdk/cesdk-js'; const cesdk = await CreativeEditorSDK.create('#container', { // license: 'YOUR_CESDK_LICENSE_KEY', }); const engine = cesdk.engine; ``` **@cesdk/engine**: Engine-only package without UI. Smaller bundle size. Initialize with `CreativeEngine.init()`. Use for browser automation, custom UIs, or hidden Engine instances. **@cesdk/node**: Node.js package for server-side processing. Same API, compiled for Node.js runtime. ## Engine API Namespaces The Engine organizes its functionality into six namespaces: - **engine.block**: Create, modify, and export design elements (shapes, text, images, videos) - **engine.scene**: Load, save, and manage scenes and pages - **engine.asset**: Register and query asset sources (images, templates, fonts) - **engine.editor**: Configure editor settings, manage edit modes, handle undo/redo - **engine.variable**: Define and update template variables for data merge - **engine.event**: Subscribe to engine events (selection changes, state updates) ## Combining UI and Engine Access The Editor UI calls Engine APIs internally. When you use `cesdk.engine`, you're accessing the same APIs. Most applications combine both: users interact with the visual editor while your code automates background tasks. Common patterns: - **Template loading**: Load scenes when users select templates - **Validation**: Check for empty placeholders before export - **Auto-save**: Serialize scenes with `engine.scene.saveToString()` - **Thumbnails**: Generate previews with `engine.block.export()` ## Hidden Engine Instances Run a second, invisible Engine alongside your main UI for background processing: ```javascript import CreativeEngine from '@cesdk/engine'; // Main editor with UI const cesdk = await CreativeEditorSDK.create('#container', config); // Hidden engine for background work const backgroundEngine = await CreativeEngine.init({ // license: 'YOUR_CESDK_LICENSE_KEY', }); async function generateThumbnail(sceneData) { await backgroundEngine.scene.loadFromString(sceneData); const page = backgroundEngine.scene.getPages()[0]; return await backgroundEngine.block.export(page, 'image/jpeg', { targetWidth: 200, targetHeight: 200, }); } ``` ## Memory Management Each Engine instance consumes memory. Dispose instances when done: ```javascript backgroundEngine.dispose(); ``` For resource-intensive tasks like high-resolution exports, consider server-side processing with `@cesdk/node`. ## Troubleshooting **Engine not initialized**: Ensure `CreativeEditorSDK.create()` or `CreativeEngine.init()` completes before accessing `engine`. **Hidden instance blocking UI**: Heavy operations can impact browser performance. Move resource-intensive tasks to server-side. **Memory issues**: Dispose unused instances with `engine.dispose()`. ## Next Steps - [Node.js SDK](https://img.ly/docs/cesdk/sveltekit/what-is-cesdk-2e7acd/) for server-side processing - [Automation Overview](https://img.ly/docs/cesdk/sveltekit/automation/overview-34d971/) for workflow examples --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Thumbnail" description: "Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries, file browsers, and design management interfaces." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/create-thumbnail-749be1/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Create Thumbnail](https://img.ly/docs/cesdk/sveltekit/export-save-publish/create-thumbnail-749be1/) --- Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries and design management.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-create-thumbnail-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-create-thumbnail-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-create-thumbnail-browser/) Thumbnails provide visual previews of designs without loading the full editor. Use `engine.block.export()` with `targetWidth` and `targetHeight` options to scale content while maintaining aspect ratio. Supported formats include PNG, JPEG, and WebP. ```typescript file=@cesdk_web_examples/guides-export-save-publish-create-thumbnail-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Setup thumbnail export functionality await this.setupThumbnailActions(cesdk, page); } private async setupThumbnailActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add thumbnail export buttons to navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-small', label: 'Small Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 150, targetHeight: 150, jpegQuality: 0.8 }); await cesdk.utils.downloadFile(blob, 'image/jpeg'); console.log( `✓ Small thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-medium', label: 'Medium Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 400, targetHeight: 300, jpegQuality: 0.85 }); await cesdk.utils.downloadFile(blob, 'image/jpeg'); console.log( `✓ Medium thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-png', label: 'PNG Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 400, targetHeight: 300, pngCompressionLevel: 6 }); await cesdk.utils.downloadFile(blob, 'image/png'); console.log(`✓ PNG thumbnail: ${(blob.size / 1024).toFixed(1)} KB`); } }, { id: 'ly.img.action.navigationBar', key: 'export-thumbnail-webp', label: 'WebP Thumbnail', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', targetWidth: 400, targetHeight: 300, webpQuality: 0.8 }); await cesdk.utils.downloadFile(blob, 'image/webp'); console.log( `✓ WebP thumbnail: ${(blob.size / 1024).toFixed(1)} KB` ); } } ] }); } } export default Example; ``` This guide covers exporting thumbnails at specific dimensions, choosing formats, optimizing quality and file size, and generating multiple thumbnail sizes. ## Export a Thumbnail Call `engine.block.export()` with target dimensions to create a scaled thumbnail. Both `targetWidth` and `targetHeight` must be set together for scaling to work. ```typescript highlight=highlight-thumbnail-small const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 150, targetHeight: 150, jpegQuality: 0.8 }); ``` The block renders large enough to fill the target size while maintaining aspect ratio. If aspect ratios differ, the output extends beyond the target on one axis. ## Choose Thumbnail Format Select the format via the `mimeType` option based on your needs: - **`'image/jpeg'`** — Smaller files, good for photos, no transparency - **`'image/png'`** — Lossless quality, supports transparency - **`'image/webp'`** — Best compression, modern browsers only ### JPEG Thumbnails JPEG works well for photographic content. Control file size with `jpegQuality` (0-1, default 0.9). Values between 0.75-0.85 balance quality and size for thumbnails. ```typescript highlight=highlight-thumbnail-medium const blob = await engine.block.export(page, { mimeType: 'image/jpeg', targetWidth: 400, targetHeight: 300, jpegQuality: 0.85 }); ``` ### PNG Thumbnails PNG provides lossless quality with transparency support. Control encoding speed vs. file size with `pngCompressionLevel` (0-9, default 5). ```typescript highlight=highlight-thumbnail-png const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 400, targetHeight: 300, pngCompressionLevel: 6 }); ``` ### WebP Thumbnails WebP offers the best compression for modern browsers. Control quality with `webpQuality` (0-1, default 1.0 for lossless). ```typescript highlight=highlight-thumbnail-webp const blob = await engine.block.export(page, { mimeType: 'image/webp', targetWidth: 400, targetHeight: 300, webpQuality: 0.8 }); ``` ## Common Thumbnail Sizes Standard sizes for different use cases: | Size | Dimensions | Use Case | | ---- | ---------- | -------- | | Small | 150×150 | Grid galleries, file browsers | | Medium | 400×300 | Preview panels, cards | | Large | 800×600 | Full previews, detail views | ## Optimize Thumbnail Quality Balance quality with file size using format-specific options: | Format | Option | Range | Default | Notes | | ------ | ------ | ----- | ------- | ----- | | JPEG | `jpegQuality` | 0-1 | 0.9 | Lower = smaller files, visible artifacts | | PNG | `pngCompressionLevel` | 0-9 | 5 | Higher = smaller files, slower encoding | | WebP | `webpQuality` | 0-1 | 1.0 | 1.0 = lossless, lower = lossy compression | For thumbnails, JPEG quality of 0.8 or WebP quality of 0.75-0.85 typically provides good results with small file sizes. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as image with format and dimension options | | `engine.scene.getCurrentPage()` | Get the current page block ID | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export" description: "Explore export options, supported formats, and configuration features for sharing or rendering output." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) --- --- ## Related Pages - [Options](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Explore export options, supported formats, and configuration features for sharing or rendering output. - [Export for Social Media](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-social-media-0e8a92/) - Export vertical videos with the correct dimensions, formats, and quality settings for Instagram Reels, TikTok, and YouTube Shorts. - [To MP4](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-mp4-c998a8/) - Export video compositions as MP4 files with configurable encoding options, progress tracking, and resolution control. - [For Audio Processing](https://img.ly/docs/cesdk/sveltekit/guides/export-save-publish/export/audio-68de25/) - Learn how to export audio in WAV or MP4 format from any block type in CE.SDK. - [To PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) - Export your designs as PDF documents with options for print compatibility, underlayer generation, and output control. - [To JPEG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-jpeg-6f88e9/) - Export CE.SDK designs to JPEG format with configurable quality settings for photographs, web images, and social media content. - [To PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/) - Export your designs as PNG images with transparency support and configurable compression for web graphics, UI elements, and content requiring crisp edges. - [To WebP](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-webp-aef6f4/) - Export your CE.SDK designs to WebP format for optimized web delivery with lossy and lossless compression options. - [Export to Raw Data](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-raw-data-abd7da/) - Export designs to uncompressed RGBA pixel data for custom image processing, GPU uploads, and advanced graphics workflows. - [Compress](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/compress-29105e/) - Reduce file sizes when exporting images by configuring compression and quality settings for PNG, JPEG, and WebP formats. - [Export with a Color Mask](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/with-color-mask-4f868f/) - Learn how to export design blocks with color masking in CE.SDK to remove specific colors and generate alpha masks for print workflows and compositing. - [Pre-Export Validation](https://img.ly/docs/cesdk/sveltekit/export-save-publish/pre-export-validation-3a2cba/) - Documentation for Pre-Export Validation - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) - Documentation for Partial Export - [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) - Configure and understand CE.SDK's image and video size limits for both input and export to optimize performance and memory usage. - [Create Thumbnail](https://img.ly/docs/cesdk/sveltekit/export-save-publish/create-thumbnail-749be1/) - Generate thumbnail preview images from CE.SDK scenes by exporting with target dimensions for galleries, file browsers, and design management interfaces. - [Export for Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/) - Export designs from CE.SDK as print-ready PDFs with professional output options including high compatibility mode, underlayers for special media, and scene DPI configuration. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Compress" description: "Reduce file sizes when exporting images by configuring compression and quality settings for PNG, JPEG, and WebP formats." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/compress-29105e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Compress](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/compress-29105e/) --- Compression reduces file sizes during export while maintaining visual quality. With CE.SDK you can fine-tune compression settings for both images and videos, allowing your app to manage performance, quality, and storage efficiency.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-compress-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-compress-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-compress-browser/) Image compression reduces file sizes while maintaining acceptable visual quality. CE.SDK supports format-specific compression controls: lossless compression for PNG, lossy quality settings for JPEG, and both modes for WebP. The example includes a navigation bar dropdown menu with export options for comparing different formats and compression levels. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-compress-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Compress Guide * * Demonstrates compression during export: * - PNG lossless compression levels * - JPEG lossy quality settings * - WebP quality settings * - Target dimension scaling * - Video compression with bitrate control * - Navigation bar dropdown with export options */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Load a video template scene for demonstration await cesdk.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.video.template/templates/milli-surf-school.scene' ); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; if (page == null) throw new Error('No page found'); // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // PNG uses lossless compression - level 0-9 // Higher levels = smaller files, slower encoding // Quality is identical at all levels const exportPngLevel9 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); downloadBlob(blob, 'export-png-level9.png'); cesdk.ui.showNotification({ message: `PNG Level 9: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportPngLevel5 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 }); downloadBlob(blob, 'export-png-level5.png'); cesdk.ui.showNotification({ message: `PNG Level 5: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // JPEG uses lossy compression - quality 0-1 // Lower values = smaller files, more artifacts const exportJpeg90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); downloadBlob(blob, 'export-jpeg-90.jpg'); cesdk.ui.showNotification({ message: `JPEG 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportJpeg60 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.6 }); downloadBlob(blob, 'export-jpeg-60.jpg'); cesdk.ui.showNotification({ message: `JPEG 60%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // WebP supports both lossless (1.0) and lossy (<1.0) modes // Typically 20-30% smaller than JPEG at equivalent quality const exportWebp90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.9 }); downloadBlob(blob, 'export-webp-90.webp'); cesdk.ui.showNotification({ message: `WebP 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; const exportWebp60 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.6 }); downloadBlob(blob, 'export-webp-60.webp'); cesdk.ui.showNotification({ message: `WebP 60%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // Combine compression with dimension scaling // Useful for creating thumbnails or social media previews const exportScaled = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 6, targetWidth: 1200, targetHeight: 630 }); downloadBlob(blob, 'export-scaled-1200x630.png'); cesdk.ui.showNotification({ message: `Scaled 1200×630: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; // Video export with web-optimized bitrate (720p, 2 Mbps) const exportVideoWeb = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 2_000_000, audioBitrate: 128_000, framerate: 30, targetWidth: 1280, targetHeight: 720 }); downloadBlob(blob, 'export-web-720p.mp4'); cesdk.ui.showNotification({ message: `Video 720p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Video export with HD bitrate (1080p, 8 Mbps) const exportVideoHD = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 8_000_000, audioBitrate: 192_000, framerate: 30, targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'export-hd-1080p.mp4'); cesdk.ui.showNotification({ message: `Video 1080p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Configure navigation bar with export dropdown cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.back.navigationBar', 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', // Actions dropdown with all export options { id: 'ly.img.actions.navigationBar', children: [ // PNG exports { id: 'ly.img.action.navigationBar', key: 'export-png-9', label: 'PNG (Level 9 - Smallest)', icon: '@imgly/Save', onClick: exportPngLevel9 }, { id: 'ly.img.action.navigationBar', key: 'export-png-5', label: 'PNG (Level 5 - Balanced)', icon: '@imgly/Save', onClick: exportPngLevel5 }, // JPEG exports { id: 'ly.img.action.navigationBar', key: 'export-jpeg-90', label: 'JPEG (90% Quality)', icon: '@imgly/Save', onClick: exportJpeg90 }, { id: 'ly.img.action.navigationBar', key: 'export-jpeg-60', label: 'JPEG (60% Quality)', icon: '@imgly/Save', onClick: exportJpeg60 }, // WebP exports { id: 'ly.img.action.navigationBar', key: 'export-webp-90', label: 'WebP (90% Quality)', icon: '@imgly/Save', onClick: exportWebp90 }, { id: 'ly.img.action.navigationBar', key: 'export-webp-60', label: 'WebP (60% Quality)', icon: '@imgly/Save', onClick: exportWebp60 }, // Scaled export { id: 'ly.img.action.navigationBar', key: 'export-scaled', label: 'Scaled (1200×630)', icon: '@imgly/Save', onClick: exportScaled }, // Video exports { id: 'ly.img.action.navigationBar', key: 'export-video-web', label: 'Video 720p (2 Mbps)', icon: '@imgly/Video', onClick: exportVideoWeb }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Video 1080p (8 Mbps)', icon: '@imgly/Video', onClick: exportVideoHD } ] } ]); // eslint-disable-next-line no-console console.log('Compression guide initialized. Use the dropdown menu to export in different formats.'); } } export default Example; ``` This guide covers exporting with compression settings, configuring quality levels, controlling output dimensions, and video compression options. ## Compression Options by Format To compress assets, use `engine.block.export` with format-specific options. Each format supports different parameters for balancing speed, file size, and quality. | Format | Parameter | Type | Effect | Default | | ------ | --------- | ---- | ------ | ------- | | PNG | `pngCompressionLevel` | 0–9 | Higher = smaller, slower (lossless) | 5 | | JPEG | `jpegQuality` | 0.0–1.0 | Lower = smaller, lower quality | 0.9 | | WebP | `webpQuality` | 0.0–1.0 | 1.0 = lossless, below 1.0 = lossy | 1.0 | | MP4 | `videoBitrate`, `audioBitrate` | bits/sec | Higher = larger, higher quality | 0 (auto) | ## Export with Compression Call `engine.block.export()` with format-specific compression options. Each format uses different parameters to control file size and quality. ### PNG Compression PNG uses lossless compression controlled by `pngCompressionLevel` (0-9). Higher values produce smaller files but take longer to encode. Quality remains identical at all levels. ```typescript highlight=highlight-png-compression // PNG uses lossless compression - level 0-9 // Higher levels = smaller files, slower encoding // Quality is identical at all levels const exportPngLevel9 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); downloadBlob(blob, 'export-png-level9.png'); cesdk.ui.showNotification({ message: `PNG Level 9: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Use level 5-6 for balanced results, or level 9 when file size is critical and encoding time is acceptable. ### JPEG Quality JPEG uses lossy compression controlled by `jpegQuality` (0-1). Lower values produce smaller files with more visible artifacts. ```typescript highlight=highlight-jpeg-quality // JPEG uses lossy compression - quality 0-1 // Lower values = smaller files, more artifacts const exportJpeg90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); downloadBlob(blob, 'export-jpeg-90.jpg'); cesdk.ui.showNotification({ message: `JPEG 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Quality 0.8 provides a good balance for web delivery. Use 0.9+ for archival or print workflows. ### WebP Quality WebP supports both lossless and lossy modes via `webpQuality` (0-1). At 1.0, WebP uses lossless encoding. Values below 1.0 enable lossy compression. ```typescript highlight=highlight-webp-quality // WebP supports both lossless (1.0) and lossy (<1.0) modes // Typically 20-30% smaller than JPEG at equivalent quality const exportWebp90 = async () => { const blob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 0.9 }); downloadBlob(blob, 'export-webp-90.webp'); cesdk.ui.showNotification({ message: `WebP 90%: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` WebP typically produces 20-30% smaller files than JPEG at equivalent quality, with optional transparency support. ## Target Dimensions Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size // Combine compression with dimension scaling // Useful for creating thumbnails or social media previews const exportScaled = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 6, targetWidth: 1200, targetHeight: 630 }); downloadBlob(blob, 'export-scaled-1200x630.png'); cesdk.ui.showNotification({ message: `Scaled 1200×630: ${(blob.size / 1024).toFixed(0)} KB`, type: 'success' }); }; ``` Combining dimension scaling with compression produces smaller files suitable for specific platforms like social media thumbnails. ## Navigation Bar Export Menu The example demonstrates configuring the CE.SDK navigation bar with a dropdown menu containing all export options. This approach integrates naturally with the editor UI. ```typescript highlight=highlight-navigation-bar // Configure navigation bar with export dropdown cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.back.navigationBar', 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', 'ly.img.zoom.navigationBar', // Actions dropdown with all export options { id: 'ly.img.actions.navigationBar', children: [ // PNG exports { id: 'ly.img.action.navigationBar', key: 'export-png-9', label: 'PNG (Level 9 - Smallest)', icon: '@imgly/Save', onClick: exportPngLevel9 }, { id: 'ly.img.action.navigationBar', key: 'export-png-5', label: 'PNG (Level 5 - Balanced)', icon: '@imgly/Save', onClick: exportPngLevel5 }, // JPEG exports { id: 'ly.img.action.navigationBar', key: 'export-jpeg-90', label: 'JPEG (90% Quality)', icon: '@imgly/Save', onClick: exportJpeg90 }, { id: 'ly.img.action.navigationBar', key: 'export-jpeg-60', label: 'JPEG (60% Quality)', icon: '@imgly/Save', onClick: exportJpeg60 }, // WebP exports { id: 'ly.img.action.navigationBar', key: 'export-webp-90', label: 'WebP (90% Quality)', icon: '@imgly/Save', onClick: exportWebp90 }, { id: 'ly.img.action.navigationBar', key: 'export-webp-60', label: 'WebP (60% Quality)', icon: '@imgly/Save', onClick: exportWebp60 }, // Scaled export { id: 'ly.img.action.navigationBar', key: 'export-scaled', label: 'Scaled (1200×630)', icon: '@imgly/Save', onClick: exportScaled }, // Video exports { id: 'ly.img.action.navigationBar', key: 'export-video-web', label: 'Video 720p (2 Mbps)', icon: '@imgly/Video', onClick: exportVideoWeb }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Video 1080p (8 Mbps)', icon: '@imgly/Video', onClick: exportVideoHD } ] } ]); ``` Each menu item triggers an export with specific compression options and displays the resulting file size via a notification. ## Compress Videos To compress video, use the `VideoExportOptions` structure in the export workflow. You can specify: - **Bitrate**: Mbps for video, kbps for audio - **Frame rate**: fps (frames per second) - **H.264 profile**: Compatibility and feature level - **Target resolution**: Output dimensions in pixels The example includes video export options in the dropdown menu. CE.SDK automatically displays a progress modal during video encoding. ```typescript highlight=highlight-video-export // Video export with web-optimized bitrate (720p, 2 Mbps) const exportVideoWeb = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 2_000_000, audioBitrate: 128_000, framerate: 30, targetWidth: 1280, targetHeight: 720 }); downloadBlob(blob, 'export-web-720p.mp4'); cesdk.ui.showNotification({ message: `Video 720p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; // Video export with HD bitrate (1080p, 8 Mbps) const exportVideoHD = async () => { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', videoBitrate: 8_000_000, audioBitrate: 192_000, framerate: 30, targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'export-hd-1080p.mp4'); cesdk.ui.showNotification({ message: `Video 1080p: ${(blob.size / (1024 * 1024)).toFixed(1)} MB`, type: 'success' }); }; ``` ### Choose Bitrate Values Adjust bitrate according to your use case: - **Web/social media clips**: 1–2 Mbps - **Downloadable HD video**: 8–12 Mbps - **Automatic optimization**: Set `videoBitrate` to `0` to let CE.SDK choose based on resolution and frame rate ### H.264 Profile Selection The H.264 profile and level determine encoder compatibility and features: - **Baseline**: Mobile-friendly playback - **Main**: Standard HD - **High**: Highest quality (desktop/professional workflows) ## Performance and Trade-Offs Higher compression produces smaller files but has trade-offs: - **Slower export speeds** with higher compression levels - **JPEG and WebP** are faster but can introduce visible artifacts (blurring, color banding) - **Video exports** are resource-consuming and depend on device CPU/GPU performance ### Check Export Limits The EditorAPI provides options to check available export limits before encoding: ```typescript const maxSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); console.log("Max export size:", maxSize, "Memory:", availableMemory); ``` ## Real-World Compression Comparison (1080×1080) | Format | Setting | Avg. File Size | Encode Time | PSNR | Notes | | ------ | ------- | -------------- | ----------- | ---- | ----- | | **PNG** | Level 0 | ~1,450 KB | ~44 ms | ∞ (lossless) | Fastest, largest | | **PNG** | Level 5 | ~1,260 KB | ~61 ms | ∞ | Balanced speed and size | | **PNG** | Level 9 | ~1,080 KB | ~88 ms | ∞ | Smallest, slowest | | **JPEG** | Quality 95 | ~640 KB | ~24 ms | 43 dB | Near-lossless | | **JPEG** | Quality 80 | ~420 KB | ~20 ms | 39 dB | Good default for photos | | **JPEG** | Quality 60 | ~290 KB | ~17 ms | 35 dB | Some artifacts visible | | **WebP** | Quality 95 | ~510 KB | ~27 ms | 44 dB | Smaller than JPEG | | **WebP** | Quality 80 | ~350 KB | ~23 ms | 39 dB | Good web balance | | **WebP** | Lossless | ~830 KB | ~33 ms | ∞ | Smaller than PNG, keeps alpha | *PSNR > 40 dB ≈ visually lossless; 30–35 dB shows mild artifacts.* **Key Takeaways**: - **WebP** achieves 70–85% smaller files than PNG with high quality around 0.8 - **JPEG** performs well for photographs; use 0.8–0.9 for web/print, 0.6 for compact exports - **PNG** is essential for transparency; higher levels reduce size modestly at the cost of speed ## Practical Presets | Use Case | Format | Settings | Notes | | -------- | ------ | -------- | ----- | | **Web/Social Sharing** | JPEG/WebP | `jpegQuality: 0.8` | Balanced quality and size | | **Transparent Assets** | PNG/WebP | `pngCompressionLevel: 6` | Maintains transparency | | **Print/Archival** | PNG | `pngCompressionLevel: 9` | Best fidelity, large files | | **Video for Web** | MP4 | `videoBitrate: 2_000_000` | Smooth playback, small file | | **Video HD Download** | MP4 | `videoBitrate: 8_000_000` | Full HD quality | > **Note:** Consider showing users an **estimated file size** before export. It helps them make informed choices about quality vs. performance. ## Troubleshooting | Issue | Solution | | ----- | -------- | | File size not reduced | Use the correct option name (`jpegQuality`, `webpQuality`) | | JPEG quality too low | Raise quality to 0.9 or switch to PNG/WebP lossless | | Slow export | Lower the compression level—PNG level 5–6 is a good target | | Video not compressing | Set `videoBitrate` to a reasonable non-zero value | ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block with compression and format options | | `engine.block.exportVideo(blockId, options)` | Export a video with compression settings | | `engine.editor.getMaxExportSize()` | Get maximum export dimensions | | `engine.editor.getAvailableMemory()` | Get available memory for export | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export to PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/) - Full PNG export options and transparency handling - [Export to JPEG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-jpeg-6f88e9/) - JPEG-specific options for photographs - [Export to WebP](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-webp-aef6f4/) - WebP format with lossless and lossy modes - [Batch Processing](https://img.ly/docs/cesdk/sveltekit/automation/batch-processing-ab2d18/) - Apply compression consistently in automated exports --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Options" description: "Explore export options, supported formats, and configuration features for sharing or rendering output." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) --- Export your designs to multiple formats including PNG, JPEG, WebP, PDF, and MP4. CE.SDK handles all export processing entirely on the client side, giving you fine-grained control over format-specific options like compression, quality, and target dimensions.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-overview-browser/) Whether you're building a design tool, photo editor, or content automation workflow, understanding export options helps you deliver the right output for each use case. This guide covers supported formats, their options, and how to export programmatically or via the UI. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-overview-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export Overview Guide * * This example demonstrates: * - Exporting designs to different formats (PNG, JPEG, WebP, PDF) * - Configuring export options (compression, quality, target size) * - Exporting with color masks for print workflows * - Downloading exported files to user device */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene from a remote URL await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the page const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // Export to PNG with compression const exportToPng = async () => { const pngBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 // 0-9, higher = smaller file, slower }); downloadBlob(pngBlob, 'design.png'); cesdk.ui.showNotification({ message: `PNG exported (${(pngBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to JPEG with quality setting const exportToJpeg = async () => { const jpegBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 // 0-1, higher = better quality, larger file }); downloadBlob(jpegBlob, 'design.jpg'); cesdk.ui.showNotification({ message: `JPEG exported (${(jpegBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to WebP with lossless quality const exportToWebp = async () => { const webpBlob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 1.0 // 1.0 = lossless, smaller files than PNG }); downloadBlob(webpBlob, 'design.webp'); cesdk.ui.showNotification({ message: `WebP exported (${(webpBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export to PDF const exportToPdf = async () => { const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true // Rasterize for broader viewer support }); downloadBlob(pdfBlob, 'design.pdf'); cesdk.ui.showNotification({ message: `PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with target size const exportWithTargetSize = async () => { const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); downloadBlob(blob, 'design-hd.png'); cesdk.ui.showNotification({ message: `HD export complete (${(blob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with color mask - removes specified RGB color and creates alpha mask const exportWithColorMask = async () => { // Export with color mask - RGB values are in 0.0-1.0 range // Pure magenta (1.0, 0.0, 1.0) is commonly used for registration marks const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( page, 1.0, // maskColorR - red component 0.0, // maskColorG - green component 1.0, // maskColorB - blue component (RGB: pure magenta) { mimeType: 'image/png' } ); downloadBlob(maskedImage, 'design-masked.png'); downloadBlob(alphaMask, 'design-alpha-mask.png'); cesdk.ui.showNotification({ message: `Color mask export: image (${(maskedImage.size / 1024).toFixed(1)} KB) + mask (${(alphaMask.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Configure navigation bar with export buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportToPng, key: 'export-png', label: 'PNG', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToJpeg, key: 'export-jpeg', label: 'JPEG', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToWebp, key: 'export-webp', label: 'WebP', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportToPdf, key: 'export-pdf', label: 'PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithTargetSize, key: 'export-hd', label: 'HD', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithColorMask, key: 'export-mask', label: 'Mask', icon: '@imgly/Save', variant: 'plain', color: 'accent' } ]); cesdk.ui.showNotification({ message: 'Use the export buttons to export in different formats', type: 'info', duration: 'infinite' }); } } export default Example; ``` This guide covers how to export designs in different formats, configure format-specific options, check device limits, and download exports to the user's device. ## Supported Export Formats CE.SDK supports exporting scenes, pages, groups, or individual blocks in these formats: | Format | MIME Type | Transparency | Best For | | ------ | --------- | ------------ | -------- | | PNG | `image/png` | Yes | Web graphics, UI elements, logos | | JPEG | `image/jpeg` | No | Photographs, web images | | WebP | `image/webp` | Yes (lossless) | Web delivery, smaller files | | PDF | `application/pdf` | Partial | Print, documents | | MP4 | `video/mp4` | No | Video content | | Binary | `application/octet-stream` | Yes | Raw data processing | Each format serves different purposes. PNG preserves transparency and works well for graphics with sharp edges or text. JPEG compresses photographs efficiently but drops transparency. WebP provides excellent compression with optional lossless mode. PDF preserves vector information for print workflows. MP4 exports animated content as video. ## Export Images ### Export to PNG PNG export uses lossless compression with a configurable compression level. Higher compression produces smaller files but takes longer to encode. Quality is not affected. ```typescript highlight-export-png const pngBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 5 // 0-9, higher = smaller file, slower }); ``` The `pngCompressionLevel` ranges from 0 (no compression, fastest) to 9 (maximum compression, slowest). The default is 5, which balances file size and encoding speed. ### Export to JPEG JPEG export uses lossy compression controlled by the quality setting. Lower quality produces smaller files but introduces visible artifacts. ```typescript highlight-export-jpeg const jpegBlob = await engine.block.export(page, { mimeType: 'image/jpeg', jpegQuality: 0.9 // 0-1, higher = better quality, larger file }); ``` The `jpegQuality` ranges from 0 to 1. Values above 0.9 provide excellent quality for most use cases. The default is 0.9. > **Caution:** JPEG drops transparency from exports. Transparent areas render with a solid background, which may produce unexpected results for designs relying on alpha channels. ### Export to WebP WebP provides better compression than PNG or JPEG for web delivery. A quality of 1.0 enables lossless mode. ```typescript highlight-export-webp const webpBlob = await engine.block.export(page, { mimeType: 'image/webp', webpQuality: 1.0 // 1.0 = lossless, smaller files than PNG }); ``` The `webpQuality` ranges from 0 to 1. At 1.0, WebP uses lossless compression that typically produces smaller files than equivalent PNG exports. ### Image Export Options | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | - | Output format: `'image/png'`, `'image/jpeg'`, or `'image/webp'` | | `pngCompressionLevel` | `number` | `5` | PNG compression level (0-9). Higher = smaller file, slower encoding | | `jpegQuality` | `number` | `0.9` | JPEG quality (0-1). Higher = better quality, larger file | | `webpQuality` | `number` | `0.8` | WebP quality (0-1). Set to 1.0 for lossless compression | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export PDF PDF export preserves vector information and supports print workflows. The high compatibility option rasterizes content for broader viewer support. ```typescript highlight-export-pdf const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true // Rasterize for broader viewer support }); ``` When `exportPdfWithHighCompatibility` is `true` (the default), images and effects are rasterized according to the scene's DPI setting. Set it to `false` for faster exports, though gradients with transparency may not render correctly in Safari or macOS Preview. The underlayer options are useful for print workflows where you need a solid base layer (often white ink) beneath the design elements. The `underlayerSpotColorName` should match a spot color defined in your print workflow. ### PDF Export Options | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | - | Must be `'application/pdf'` | | `exportPdfWithHighCompatibility` | `boolean` | `true` | Rasterize images and effects (like gradients) according to the scene's DPI setting for broader viewer support | | `exportPdfWithUnderlayer` | `boolean` | `false` | Add an underlayer behind existing elements matching the shape of page content | | `underlayerSpotColorName` | `string` | `''` | Spot color name for the underlayer fill (used with print workflows) | | `underlayerOffset` | `number` | `0` | Size adjustment for the underlayer shape in design units | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export with Color Mask Color mask export removes pixels matching a specific RGB color and generates two output files: the masked image with transparency applied, and an alpha mask showing which pixels were removed. ```typescript highlight-export-color-mask // Export with color mask - RGB values are in 0.0-1.0 range // Pure magenta (1.0, 0.0, 1.0) is commonly used for registration marks const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( page, 1.0, // maskColorR - red component 0.0, // maskColorG - green component 1.0, // maskColorB - blue component (RGB: pure magenta) { mimeType: 'image/png' } ); ``` The `exportWithColorMask()` method accepts the block to export, three RGB color components (0.0-1.0 range), and optional export options. RGB values use floating-point notation where 1.0 equals 255 in standard color notation. Common mask colors for print workflows: - Pure red: `(1.0, 0.0, 0.0)` — Registration marks - Pure magenta: `(1.0, 0.0, 1.0)` — Distinctive marker color - Pure cyan: `(0.0, 1.0, 1.0)` — Alternative marker color The method returns a Promise resolving to an array of two Blobs: the masked image (with matched pixels made transparent) and the alpha mask (black pixels for removed areas, white for retained areas). > **Note:** Color matching is exact. Only pixels with RGB values precisely matching the specified color are removed. Anti-aliased edges or color variations will not be affected. ### Color Mask Export Options The `exportWithColorMask()` method accepts the same options as image export: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `string` | `'image/png'` | Output format: `'image/png'`, `'image/jpeg'`, or `'image/webp'` | | `pngCompressionLevel` | `number` | `5` | PNG compression level (0-9) | | `jpegQuality` | `number` | `0.9` | JPEG quality (0-1) | | `webpQuality` | `number` | `0.8` | WebP quality (0-1) | | `targetWidth` | `number` | - | Target output width in pixels | | `targetHeight` | `number` | - | Target output height in pixels | ## Export Video Video export uses the H.264 codec and outputs MP4 or QuickTime files. Unlike image exports, video exports accept a progress callback to track encoding status. ```typescript const page = engine.scene.getCurrentPage(); const videoBlob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (rendered, encoded, total) => { console.log(`Progress: ${Math.round((encoded / total) * 100)}%`); } }); ``` ### Video Export Options Configure video encoding with these options: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `'video/mp4'` | `'video/quicktime'` | `'video/mp4'` | Output video format | | `h264Profile` | `number` | `77` (Main) | H.264 profile: 66=Baseline, 77=Main, 100=High | | `h264Level` | `number` | `52` | Encoding level (multiply desired level by 10, e.g., 52 = level 5.2) | | `videoBitrate` | `number` | `0` (auto) | Video bitrate in bits/second. Maximum determined by profile and level | | `audioBitrate` | `number` | `0` (auto) | Audio bitrate in bits/second. Default auto-selects 128kbps for stereo AAC | | `framerate` | `number` | `30` | Target framerate in Hz | | `targetWidth` | `number` | - | Output width in pixels | | `targetHeight` | `number` | - | Output height in pixels | | `timeOffset` | `number` | `0` | Start time offset in seconds | | `duration` | `number` | scene duration | Video duration in seconds | | `allowTextOverhang` | `boolean` | `false` | Include text bounding boxes that account for glyph overhangs | | `abortSignal` | `AbortSignal` | - | Signal to cancel export | The `h264Profile` determines encoder quality and compatibility: - **Baseline (66)**: Broadest device compatibility, lowest quality - **Main (77)**: Good balance of quality and compatibility (default) - **High (100)**: Best quality, may not play on older devices > **Caution:** H.264 does not support transparency. Transparent areas render with a black background. ## Export Audio Export audio tracks from pages or audio blocks. Supported formats are WAV (uncompressed) and MP4 (AAC encoded). ```typescript const page = engine.scene.getCurrentPage(); const audioBlob = await engine.block.exportAudio(page, { mimeType: 'audio/mp4', // or 'audio/wav' onProgress: (rendered, encoded, total) => { console.log(`Progress: ${Math.round((encoded / total) * 100)}%`); } }); ``` ### Audio Export Options Configure audio export with these options: | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | `mimeType` | `'audio/wav'` | `'audio/mp4'` | `'audio/wav'` | Output audio format | | `sampleRate` | `number` | `48000` | Sample rate in Hz | | `numberOfChannels` | `number` | `2` | Number of audio channels (1=mono, 2=stereo) | | `timeOffset` | `number` | `0` | Start time offset in seconds | | `duration` | `number` | block duration | Audio duration in seconds | | `skipEncoding` | `boolean` | `false` | Return raw audio data without encoding | | `abortSignal` | `AbortSignal` | - | Signal to cancel export | Use `audio/wav` for lossless quality when file size is not a concern. Use `audio/mp4` (AAC) for compressed output suitable for web delivery. > **Note:** Audio export extracts and processes audio from all audio-capable blocks within the target block, including video fills with audio tracks and standalone audio blocks. ## Target Size Control You can export at specific dimensions regardless of the block's actual size. The `targetWidth` and `targetHeight` options render the block large enough to fill the target size while maintaining aspect ratio. ```typescript highlight-export-target-size const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); ``` If the target aspect ratio differs from the block's aspect ratio, the output fills the target dimensions completely. The output may extend beyond the target size on one axis to preserve correct proportions. ## Device Export Limits Before exporting large designs, check the device's export capabilities. Memory constraints or GPU limitations may prevent exports that exceed certain dimensions. ```typescript const maxExportSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); console.log(`Max dimension: ${maxExportSize}px`); console.log(`Available memory: ${availableMemory / 1024 / 1024} MB`); ``` `getMaxExportSize()` returns the maximum width or height in pixels. Both dimensions must stay below this limit. `getAvailableMemory()` returns available memory in bytes, helping you assess whether large exports are feasible. > **Note:** The max export size is an upper bound. Exports may still fail due to memory constraints even when within size limits. For high-resolution exports, consider checking available memory first. ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with progress dialogs and error handling. Use `cesdk.utils.export()` to export and `cesdk.utils.downloadFile()` to download the result. Export an image: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'image/png' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` Export a PDF: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'application/pdf' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` Export a video: ```typescript const { blobs, options } = await cesdk.utils.export({ mimeType: 'video/mp4' }); await cesdk.utils.downloadFile(blobs[0], options.mimeType); ``` ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export()` | Export a block with format and quality options | | `engine.block.exportWithColorMask()` | Export a block with specific RGB color removed, returning masked image and alpha mask | | `engine.block.exportVideo()` | Export a page as video with encoding options | | `engine.block.exportAudio()` | Export audio from a page or audio block | | `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels | | `engine.editor.getAvailableMemory()` | Get available memory in bytes | | `cesdk.utils.export()` | Export with progress dialog and error handling | | `cesdk.utils.downloadFile()` | Download a blob or string to the user's device | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Partial Export" description: "Documentation for Partial Export" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) --- Export individual design elements, grouped blocks, or specific pages from your scene instead of exporting everything at once using CE.SDK's flexible export API.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-partial-export-browser/) Understanding how to export specific parts of your scene gives you fine-grained control over output generation. Instead of exporting an entire scene, you can export individual images, text blocks, shapes, grouped elements, or specific pages. This is essential for creating asset libraries, implementing "export selection" features, or generating multiple outputs from a single design. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-partial-export-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Partial Export Guide * * This example demonstrates: * - Exporting individual design blocks * - Exporting grouped elements * - Exporting with different formats and options * - Understanding block hierarchy in exports */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Sample image URI for demonstrations const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create design elements for demonstration // Create first image block const imageBlock1 = await engine.block.addImage(imageUri, { size: { width: blockWidth, height: blockHeight } }); engine.block.appendChild(page, imageBlock1); // Create second image block with different styling const imageBlock2 = await engine.block.addImage(imageUri, { size: { width: blockWidth, height: blockHeight }, cornerRadius: 20 }); engine.block.appendChild(page, imageBlock2); // Create a shape block const shapeBlock = engine.block.create('//ly.img.ubq/graphic'); const shape = engine.block.createShape('star'); engine.block.setShape(shapeBlock, shape); engine.block.setWidth(shapeBlock, blockWidth); engine.block.setHeight(shapeBlock, blockHeight); // Add a color fill to the shape const shapeFill = engine.block.createFill('color'); engine.block.setFill(shapeBlock, shapeFill); engine.block.setColor(shapeFill, 'fill/color/value', { r: 1.0, g: 0.7, b: 0.0, a: 1.0 }); engine.block.appendChild(page, shapeBlock); // Create two shapes for grouping demonstration const groupShape1 = engine.block.create('//ly.img.ubq/graphic'); const rect = engine.block.createShape('rect'); engine.block.setShape(groupShape1, rect); engine.block.setWidth(groupShape1, blockWidth * 0.4); engine.block.setHeight(groupShape1, blockHeight * 0.4); const groupFill1 = engine.block.createFill('color'); engine.block.setFill(groupShape1, groupFill1); engine.block.setColor(groupFill1, 'fill/color/value', { r: 0.3, g: 0.6, b: 0.9, a: 1.0 }); engine.block.appendChild(page, groupShape1); const groupShape2 = engine.block.create('//ly.img.ubq/graphic'); const ellipse = engine.block.createShape('ellipse'); engine.block.setShape(groupShape2, ellipse); engine.block.setWidth(groupShape2, blockWidth * 0.4); engine.block.setHeight(groupShape2, blockHeight * 0.4); const groupFill2 = engine.block.createFill('color'); engine.block.setFill(groupShape2, groupFill2); engine.block.setColor(groupFill2, 'fill/color/value', { r: 0.9, g: 0.3, b: 0.5, a: 1.0 }); engine.block.appendChild(page, groupShape2); // Group the two shapes together const group = engine.block.group([groupShape1, groupShape2]); // Position all blocks in grid layout for visualization const allBlocks = [ imageBlock1, imageBlock2, shapeBlock, group, groupShape1 // Note: groupShape1 is inside group, positioning group will position children ]; allBlocks.forEach((block, index) => { if (index < 6) { // Only position first 6 blocks (group contains 2) const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); } }); // Position grouped shapes relative to group const groupPos = getPosition(4); engine.block.setPositionX(group, groupPos.x); engine.block.setPositionY(group, groupPos.y); engine.block.setPositionX(groupShape1, 10); engine.block.setPositionY(groupShape1, 10); engine.block.setPositionX(groupShape2, 60); engine.block.setPositionY(groupShape2, 60); // Helper function: Download blob and show notification const downloadWithNotification = async ( blob: Blob, filename: string, mimeType: string, exportType: string ) => { await cesdk.utils.downloadFile(blob, mimeType as any); // Show notification after successful download cesdk.ui.showNotification({ message: `Export "${exportType}" completed`, type: 'info', duration: 'infinite' }); }; // Override exportDesign action to export selected block or page cesdk.actions.register('exportDesign', async () => { // eslint-disable-next-line no-console console.log('🚀 Export action triggered'); const selectedBlocks = engine.block.findAllSelected(); // eslint-disable-next-line no-console console.log(`📦 Selected blocks: ${selectedBlocks.length}`); let blockToExport: number; if (selectedBlocks.length > 0) { // Export first selected block (or group them if multiple) blockToExport = selectedBlocks.length === 1 ? selectedBlocks[0] : engine.block.group(selectedBlocks); // eslint-disable-next-line no-console console.log( `✅ Exporting selected block(s): ${ selectedBlocks.length === 1 ? 'single block' : 'grouped blocks' }` ); } else { // No selection - export current page const pages = engine.block.findByType('page'); blockToExport = pages[0]; // eslint-disable-next-line no-console console.log('📄 No selection - exporting current page'); } // eslint-disable-next-line no-console console.log(`📸 Exporting block ID: ${blockToExport}`); // Export the block with high compression const blob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9 // Maximum compression for smaller file size }); // eslint-disable-next-line no-console console.log( `✨ Export complete - size: ${(blob.size / 1024).toFixed(2)} KB` ); // Download the blob await downloadWithNotification(blob, 'export.png', 'image/png', 'Design'); // eslint-disable-next-line no-console console.log('💾 Download complete'); }); // Helper function: Export individual block const exportIndividualBlock = async () => { // eslint-disable-next-line no-console console.log('🚀 Starting individual block export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Block', message: 'Processing export...', progress: 'indeterminate' }); // Find a specific block to export const blockToExport = imageBlock1; // Export the block as PNG with high compression and target size const individualBlob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Individual block exported - size: ${( individualBlob.size / 1024 ).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported block await downloadWithNotification( individualBlob, 'block-export.png', 'image/png', 'Block' ); }; // Helper function: Create and export a group const exportGroupExample = async () => { // eslint-disable-next-line no-console console.log('🚀 Starting group export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Group', message: 'Processing export...', progress: 'indeterminate' }); // Group the blocks together (shapes already created above) const exportGroup = engine.block.group([groupShape1, groupShape2]); // Export the group (includes all children) with high compression and target size const groupBlob = await engine.block.export(exportGroup, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Group exported - size: ${(groupBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported group await downloadWithNotification( groupBlob, 'group-export.png', 'image/png', 'Group' ); }; // Helper function: Export current page const exportCurrentPage = async () => { // Check export limits before exporting const maxExportSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); // eslint-disable-next-line no-console console.log('🚀 Starting page export...'); // eslint-disable-next-line no-console console.log( `📊 Export limits - Max size: ${maxExportSize}px, Available memory: ${availableMemory} bytes` ); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Page', message: 'Processing export...', progress: 'indeterminate' }); // Export the entire page with high compression and target size const pageBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Page exported - size: ${(pageBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); // Download the exported page await downloadWithNotification( pageBlob, 'page-export.png', 'image/png', 'Page' ); }; // Configure navigation bar layout cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: async () => await exportCurrentPage(), key: 'export-page', label: 'Export Page', icon: '@imgly/Save', variant: 'plain', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: async () => await exportGroupExample(), key: 'export-group', label: 'Export Group', icon: '@imgly/Group', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: async () => await exportIndividualBlock(), key: 'export-block', label: 'Export Block', icon: '@imgly/Image', variant: 'plain', color: 'accent' } ]); // Show notification to guide users cesdk.ui.showNotification({ message: 'Use the export buttons on the right to try different export options (Export Page, Export Group, Export Block)', type: 'info', duration: 'infinite' }); // eslint-disable-next-line no-console console.log('Partial export examples initialized successfully'); } } export default Example; ``` This guide covers how to export individual blocks, grouped elements, and pages programmatically using the Block API. ## Understanding Block Hierarchy and Export ### How Block Hierarchy Affects Exports CE.SDK organizes content in a tree structure: Scene → Pages → Groups → Individual Blocks. When you export a block, the export automatically includes all child elements in the hierarchy. Exporting a page exports every element on that page. Exporting a group exports all blocks within that group. Exporting an individual block (like an image or text) exports only that specific element. This hierarchical behavior is powerful because you can control export scope by choosing which level of the hierarchy to target. Want just one image? Export the image block. Want a complete layout section? Export the parent group. ### Export Behavior The export API applies several transformations to ensure consistent output. If the exported block itself is rotated, it will be exported without that rotation—the content appears upright in the output file. Any margin set on the block is included in the export bounds. Outside strokes are included for most block types, though pages handle strokes differently. > **Note:** Only blocks that belong to the scene hierarchy can be exported. Orphaned blocks > (created but not added to the page) cannot be exported until they're attached > to the scene tree. ## Exporting Individual Blocks ### Finding Blocks to Export Before exporting, we need to identify which block to export. We can find blocks by type using `findByType`, by name if you've assigned custom names, or by ID if you already have a reference. Once we have a block reference, exporting is straightforward. Pass the block ID to `engine.block.export()` along with export options like format and quality settings. ### Basic Block Export Here we export a single image block as PNG with compression settings. The export returns a Blob containing the image data. ```typescript highlight-export-individual-block // eslint-disable-next-line no-console console.log('🚀 Starting individual block export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Block', message: 'Processing export...', progress: 'indeterminate' }); // Find a specific block to export const blockToExport = imageBlock1; // Export the block as PNG with high compression and target size const individualBlob = await engine.block.export(blockToExport, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Individual block exported - size: ${( individualBlob.size / 1024 ).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); ``` The `mimeType` determines the output format. CE.SDK supports PNG, JPEG, WEBP, and PDF for static exports. Each format has specific options—PNG uses `pngCompressionLevel`, JPEG uses `jpegQuality`, and WEBP uses `webpQuality`. Different formats serve different purposes. PNG is ideal for graphics requiring transparency, such as UI elements, logos, or illustrations with alpha channels. JPEG works well for photographs where file size matters and transparency isn't needed. WEBP provides better compression than PNG or JPEG for web delivery. PDF preserves vector information and is suited for print workflows. JPEG exports drop transparency and replace it with a solid background, which may produce unexpected results if your design relies on transparency. Always consider whether your content needs an alpha channel when choosing export formats. ## Exporting Grouped Elements ### Creating and Exporting Groups Groups let you export multiple elements together as a single output. This is useful for composite graphics like logos with multiple components, complex illustrations made from many shapes, or layout sections that should be exported as a unit. ```typescript highlight-create-and-export-group // eslint-disable-next-line no-console console.log('🚀 Starting group export...'); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Group', message: 'Processing export...', progress: 'indeterminate' }); // Group the blocks together (shapes already created above) const exportGroup = engine.block.group([groupShape1, groupShape2]); // Export the group (includes all children) with high compression and target size const groupBlob = await engine.block.export(exportGroup, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Group exported - size: ${(groupBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); ``` When you export a group, CE.SDK renders all children together into a single image. The group's bounding box determines the export dimensions, and relative positioning between children is preserved exactly as designed. ### Exporting Selected Elements A common workflow is allowing users to select elements and export their selection. Use `findAllSelected()` to get selected blocks, group them temporarily, and export the group. ```typescript // Get currently selected blocks const selectedBlocks = engine.block.findAllSelected(); if (selectedBlocks.length === 0) { console.log('No blocks selected'); } else if (selectedBlocks.length === 1) { // Export single block directly const blob = await engine.block.export(selectedBlocks[0], { mimeType: 'image/png' }); } else { // Group and export multiple selected blocks const group = engine.block.group(selectedBlocks); const blob = await engine.block.export(group, { mimeType: 'image/png' }); } ``` This pattern enables "Export Selection" functionality in design tools, letting users export precisely what they've chosen without exporting the entire canvas. ## Exporting Pages When working with multi-page documents, you often want to export pages individually rather than as a complete scene. Exporting the page block directly gives you output for that specific page. ```typescript highlight-export-current-page // Check export limits before exporting const maxExportSize = engine.editor.getMaxExportSize(); const availableMemory = engine.editor.getAvailableMemory(); // eslint-disable-next-line no-console console.log('🚀 Starting page export...'); // eslint-disable-next-line no-console console.log( `📊 Export limits - Max size: ${maxExportSize}px, Available memory: ${availableMemory} bytes` ); // Show loading dialog before export const exportDialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Page', message: 'Processing export...', progress: 'indeterminate' }); // Export the entire page with high compression and target size const pageBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9, // Maximum compression for smaller file size targetWidth: 800, // Limit export resolution for faster exports targetHeight: 600 }); // eslint-disable-next-line no-console console.log( `✅ Page exported - size: ${(pageBlob.size / 1024).toFixed(2)} KB` ); // Close the export dialog exportDialog.close(); ``` Page exports include everything on the page—the background, all content blocks, and any page-level effects. The page dimensions determine the output size unless you specify `targetWidth` and `targetHeight` to override the dimensions. ## Export Options and Configuration ### Target Size Control Sometimes you need exports at specific dimensions regardless of the block's actual size. The `targetWidth` and `targetHeight` options render the block large enough to fill the target size while maintaining aspect ratio. If you specify a target size that doesn't match the block's aspect ratio, CE.SDK ensures the block fills the target dimensions completely. The output may extend beyond the target size on one axis to preserve the correct proportions—no stretching or distortion occurs. ### Quality and Compression Each export format offers quality controls that balance output size against visual fidelity. For PNG, `pngCompressionLevel` ranges from 0 (no compression, fastest) to 9 (maximum compression, slowest). Higher compression takes longer but produces smaller files without affecting image quality—PNG is lossless. JPEG `jpegQuality` ranges from 0 (lowest quality) to 1 (highest quality). Lower values create smaller files but introduce visible artifacts. Values above 0.9 provide excellent quality for most use cases. WEBP `webpQuality` also ranges from 0 to 1. A value of 1.0 triggers a special lossless mode that often produces smaller files than equivalent PNG exports. ### Export Size Limits Before exporting large blocks or requesting high target dimensions, check the platform's export capabilities. `getMaxExportSize()` returns the maximum width or height in pixels that can be exported. Both the width and height of your export must be below or equal to this limit. However, memory constraints may prevent exports that technically fit within size limits—use `getAvailableMemory()` to assess available memory before attempting large exports. ## Export Limitations and Considerations ### Format-Specific Constraints JPEG drops transparency from the final image, replacing transparent pixels with a solid background (usually white or black depending on implementation). This can cause unexpected results when exporting designs that rely on alpha channels. Always use PNG or WEBP if transparency is required. PDF export behavior depends on the `exportPdfWithHighCompatibility` option. When set to `true`, images and effects are rasterized according to the scene's DPI setting for broader viewer compatibility. When `false`, PDFs export faster by embedding images directly, but gradients with transparency may not render correctly in Safari or macOS Preview. See the [PDF export guide](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) for detailed performance guidance. ### Performance Considerations Exporting is a synchronous operation that blocks the main thread while rendering. For large exports or multiple sequential exports, provide user feedback like progress indicators to prevent the interface from appearing frozen. Batch exports can be optimized by processing blocks in parallel where possible, though be mindful of memory constraints. Exporting dozens of high-resolution images simultaneously may exhaust available memory. Consider batching in smaller groups with delays between batches. ### Hierarchy Requirements Only blocks attached to the scene hierarchy can be exported. If you create a block but don't append it to a page, export will fail. Always ensure blocks are children of the page (or nested within groups that are children of the page) before attempting export. ## API Reference | Method | Description | | --- | --- | | `engine.block.export()` | Export a block with specified format and quality options | | `engine.block.findByType()` | Find blocks by type identifier | | `engine.block.group()` | Group multiple blocks into a single logical unit | | `engine.scene.getPages()` | Get all pages in the current scene | | `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels | | `engine.editor.getAvailableMemory()` | Get available engine memory in bytes | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Size Limits" description: "Configure and understand CE.SDK's image and video size limits for both input and export to optimize performance and memory usage." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) --- Configure size limits to balance quality and performance in CE.SDK applications.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-size-limits-browser/) CE.SDK processes images and videos client-side, which means size limits depend on the user's GPU capabilities and available memory. Understanding and configuring these limits helps you build applications that deliver high-quality results while maintaining smooth performance across different devices. ```typescript file=@cesdk_web_examples/guides-export-save-publish-size-limits-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Add export image action to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] } ); const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // ===== Section 1: Reading Current maxImageSize ===== // Get the current maxImageSize setting const currentMaxSize = engine.editor.getSetting('maxImageSize'); console.log('Current maxImageSize:', currentMaxSize); // Default is 4096 pixels // ===== Section 2: Setting Different maxImageSize Values ===== // Configure maxImageSize for different use cases // This must be set BEFORE loading images to ensure they're downscaled // Low memory devices (mobile, tablets) - use 2048 for safety engine.editor.setSetting('maxImageSize', 2048); // High quality (professional workflows, desktop) // engine.editor.setSetting('maxImageSize', 8192); console.log( 'Updated maxImageSize:', engine.editor.getSetting('maxImageSize') ); // ===== Section 3: Observing Settings Changes ===== // Subscribe to settings changes to update UI when maxImageSize changes engine.editor.onSettingsChanged(() => { const newMaxSize = engine.editor.getSetting('maxImageSize'); console.log('maxImageSize changed to:', newMaxSize); // In a real app, update UI here to reflect the new setting }); // The subscription returns an unsubscribe function if you need to clean up later // const unsubscribe = engine.editor.onSettingsChanged(() => { ... }); // unsubscribe(); // Call when no longer needed // ===== Section 4: GPU Capability Detection (Web) ===== // Query GPU max texture size to understand export limits const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU Max Texture Size:', maxTextureSize); console.log( 'Safe export dimensions: up to', maxTextureSize, '×', maxTextureSize ); // Most modern GPUs support 4096×4096 to 16384×16384 // Safe baseline is 4096×4096 for universal compatibility } // ===== Section 5: Pre-Export Size Validation ===== // Calculate actual export dimensions including all content // Get bounding box of all content to check actual export size const allBlocks = engine.block.findByType('//ly.img.ubq/graphic'); let maxRight = 0; let maxBottom = 0; allBlocks.forEach((blockId) => { const x = engine.block.getPositionX(blockId); const y = engine.block.getPositionY(blockId); const width = engine.block.getWidth(blockId); const height = engine.block.getHeight(blockId); maxRight = Math.max(maxRight, x + width); maxBottom = Math.max(maxBottom, y + height); }); const exportWidth = Math.max(engine.block.getWidth(page), maxRight); const exportHeight = Math.max(engine.block.getHeight(page), maxBottom); console.log('Export dimensions:', exportWidth, '×', exportHeight); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); // Use conservative limit (50% of max) for actual VRAM availability const safeTextureSize = Math.floor(maxTextureSize * 0.5); if (exportWidth > safeTextureSize || exportHeight > safeTextureSize) { cesdk.ui.showNotification({ type: 'warning', message: `Export dimensions (${Math.round(exportWidth)}×${Math.round( exportHeight )}) exceed safe GPU limit (${safeTextureSize}×${safeTextureSize})` }); } else { cesdk.ui.showNotification({ type: 'success', message: 'Export dimensions are within safe limits' }); } } // ===== Section 6: Handling Export Errors ===== // Demonstrate proper error handling for size-related export failures try { // Example export operation (not actually exporting in this demo) // const blob = await engine.block.export(page, 'image/png'); // If export fails, catch and handle the error console.log('Export would proceed here with proper error handling'); } catch (error) { console.error('Export failed:', error); // Check if error is size-related if ( error instanceof Error && (error.message.includes('texture') || error.message.includes('size') || error.message.includes('memory')) ) { console.error('Size-related export error detected'); console.error('Suggested remediation:'); console.error('1. Reduce output dimensions'); console.error('2. Decrease maxImageSize setting'); console.error('3. Use export compression options'); } } // Add an image to the page for demonstration // Note: NOT specifying size here - let maxImageSize control the texture loading const imageBlock = await engine.block.addImage(imageUri); engine.block.appendChild(page, imageBlock); // Fit image to page dimensions engine.block.setWidth(imageBlock, 800); engine.block.setHeight(imageBlock, 600); // Position image to fill the page (already matches page dimensions) engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); // Zoom to fit the content engine.scene.zoomToBlock(page, { padding: 40 }); // Display information in console console.log('=== Size Limits Configuration Summary ==='); console.log( 'Current maxImageSize:', engine.editor.getSetting('maxImageSize') ); console.log( 'Page dimensions:', engine.block.getWidth(page), '×', engine.block.getHeight(page) ); console.log( 'Image dimensions:', engine.block.getWidth(imageBlock), '×', engine.block.getHeight(imageBlock) ); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU max texture size:', maxTextureSize); } } } export default Example; ``` This guide covers how to configure the `maxImageSize` setting, query GPU capabilities, validate export dimensions, and handle size-related errors gracefully. ## Understanding Size Limits CE.SDK manages size limits at two stages: **input** (when loading images) and **output** (when exporting). The `maxImageSize` setting controls input resolution, automatically downscaling images that exceed the configured limit (default: 4096×4096px). This reduces memory usage and improves performance across devices. Export resolution has no artificial limits—the theoretical maximum is 16,384×16,384 pixels, constrained only by GPU texture size, available VRAM, and platform capabilities (WebGL/WebGPU on web, Metal/OpenGL on native). ## Resolution & Duration Limits ## Configuring maxImageSize You can read and modify the `maxImageSize` setting using the Settings API to match your application's requirements and target hardware capabilities. ### Reading the Current Setting To check what `maxImageSize` value is currently configured: ```typescript highlight-get-max-image-size // Get the current maxImageSize setting const currentMaxSize = engine.editor.getSetting('maxImageSize'); console.log('Current maxImageSize:', currentMaxSize); // Default is 4096 pixels ``` This returns the maximum size in pixels as an integer value (e.g., `4096` for the default 4096×4096 limit). You might display this value in your UI to inform users about the current quality settings, or use it to make runtime decisions about asset loading strategies. ### Setting a New Value Configure `maxImageSize` to minimize memory usage on constrained devices: ```typescript highlight-set-max-image-size // Configure maxImageSize for different use cases // This must be set BEFORE loading images to ensure they're downscaled // Low memory devices (mobile, tablets) - use 2048 for safety engine.editor.setSetting('maxImageSize', 2048); // High quality (professional workflows, desktop) // engine.editor.setSetting('maxImageSize', 8192); console.log( 'Updated maxImageSize:', engine.editor.getSetting('maxImageSize') ); ``` The setting takes effect immediately for newly loaded images. Images already loaded on the canvas retain their current resolution until reloaded. ### Observing Settings Changes Subscribe to setting changes to update your UI when `maxImageSize` is modified: ```typescript highlight-observe-settings-changes // Subscribe to settings changes to update UI when maxImageSize changes engine.editor.onSettingsChanged(() => { const newMaxSize = engine.editor.getSetting('maxImageSize'); console.log('maxImageSize changed to:', newMaxSize); // In a real app, update UI here to reflect the new setting }); // The subscription returns an unsubscribe function if you need to clean up later // const unsubscribe = engine.editor.onSettingsChanged(() => { ... }); // unsubscribe(); // Call when no longer needed ``` This callback fires whenever any setting changes through the Settings API. You can use it to update quality indicators in your interface, recalculate memory estimates, or trigger asset reloading with the new size limit. ## GPU Capability Detection Modern browsers expose GPU capabilities through WebGL, allowing you to determine safe export dimensions for the user's hardware. ```typescript highlight-query-gpu-capabilities // Query GPU max texture size to understand export limits const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl2') || canvas.getContext('webgl'); if (gl) { const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); console.log('GPU Max Texture Size:', maxTextureSize); console.log( 'Safe export dimensions: up to', maxTextureSize, '×', maxTextureSize ); // Most modern GPUs support 4096×4096 to 16384×16384 // Safe baseline is 4096×4096 for universal compatibility } ``` The `MAX_TEXTURE_SIZE` parameter returns the maximum width or height (in pixels) for a texture on the current GPU. Most modern GPUs support 4096×4096 to 16384×16384, while older or integrated GPUs may be limited to smaller dimensions. You can use this information to: - Set conservative `maxImageSize` defaults based on detected capabilities - Show warnings when users attempt exports that may exceed hardware limits - Provide quality presets that match the device's capabilities - Calculate safe export dimensions automatically ## Troubleshooting Common issues and solutions when working with size limits: | Issue | Cause | Solution | | ------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------- | | Images appear blurry/low quality | `maxImageSize` too low | Increase `maxImageSize` if GPU supports it (query `MAX_TEXTURE_SIZE` first) | | Out of memory errors during editing | `maxImageSize` too high | Decrease `maxImageSize` to reduce memory footprint | | Export fails with no error message | Output exceeds GPU texture limit | Reduce export dimensions or query `MAX_TEXTURE_SIZE` to set safe maximums | | Video export fails | Resolution/duration too high | Export at 1080p instead of 4K, or reduce video duration to under 2 minutes | | Inconsistent results across devices | Different GPU capabilities | Set conservative `maxImageSize` (4096) or detect capabilities programmatically | | Images load slowly | High `maxImageSize` on slow hardware | Lower `maxImageSize` to reduce processing time, especially on mobile devices | | Export succeeds but file is too large | No compression applied | Use JPEG format with quality settings, or apply PNG compression options | ## API Reference Core methods for managing size limits and export operations: | Method | Description | | ------------------------------- | --------------------------------------- | | `engine.editor.getSetting()` | Retrieves the current value of a setting | | `engine.editor.setSetting()` | Updates a setting value | | `engine.editor.onSettingsChanged()` | Subscribes to setting change events | | `engine.block.export()` | Exports a block as an image or video | | `engine.block.getWidth()` | Gets the width of a block in pixels | | `engine.block.getHeight()` | Gets the height of a block in pixels | ## Next Steps Explore related guides to build complete export workflows: - [Settings Guide](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) - Complete Settings API reference and configuration options - [File Format Support](https://img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a/) - Supported image and video formats with capabilities - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Fundamentals of exporting images and videos from CE.SDK - [Export to PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) - PDF export guide with multi-page support and print optimization --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To JPEG" description: "Export CE.SDK designs to JPEG format with configurable quality settings for photographs, web images, and social media content." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-jpeg-6f88e9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To JPEG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-jpeg-6f88e9/) --- Export CE.SDK designs to JPEG format—ideal for photographs, social media, and web content where file size matters more than transparency.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-jpeg-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-jpeg-browser/) JPEG uses lossy compression optimized for photographs and smooth color gradients. Unlike PNG, JPEG does not support transparency—transparent areas render with a solid background. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-jpeg-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) throw new Error('CE.SDK instance is required'); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage()!; // Zoom to fit page in view await engine.scene.zoomToBlock(page); cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', onClick: async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/jpeg', jpegQuality: 0.9 }); }, key: 'export-action', label: 'Export', icon: '@imgly/Download', }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `Standard (${(exported.size / 1024).toFixed(0)} KB)`, type: 'success' }); }, key: 'export-standard', label: 'Standard', icon: '@imgly/Save' }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 1.0 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `High Quality (${(exported.size / 1024).toFixed(0)} KB)`, type: 'success' }); }, key: 'export-high', label: 'High Quality', icon: '@imgly/Save' }, { id: 'ly.img.action.navigationBar', onClick: async () => { const currentPage = engine.scene.getCurrentPage()!; const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); cesdk.ui.showNotification({ message: `1920×1080 (${(exported.size / 1024).toFixed(0)} KB)`, type: 'success' }); }, key: 'export-hd', label: '1920×1080', icon: '@imgly/Save' } ] }); cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const jpeg = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(jpeg, 'image/jpeg'); }); } } export default Example; ``` This guide covers exporting to JPEG, configuring quality and dimensions, and integrating CE.SDK's built-in export action. ## Export to JPEG Export a design block to JPEG by calling `engine.block.export()` with `mimeType: 'image/jpeg'`. Use `cesdk.utils.downloadFile()` to trigger a browser download. ```typescript highlight=highlight-export-jpeg const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` The `jpegQuality` parameter accepts values from greater than 0 to 1. Higher values produce better quality at larger file sizes. The default is 0.9. ## Export Options JPEG export supports these configuration options: | Option | Type | Default | Description | |--------|------|---------|-------------| | `mimeType` | `string` | `'image/png'` | Set to `'image/jpeg'` for JPEG | | `jpegQuality` | `number` | `0.9` | Quality from >0 to 1 | | `targetWidth` | `number` | — | Output width in pixels | | `targetHeight` | `number` | — | Output height in pixels | ### Quality Control Set `jpegQuality` to 1.0 for maximum quality with minimal compression artifacts. This is useful for archival or print preparation. ```typescript highlight=highlight-export-quality const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 1.0 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` For web delivery, values around 0.8 balance quality and file size effectively. ### Target Dimensions Specify `targetWidth` and `targetHeight` to export at exact dimensions. The output fills the target size while maintaining aspect ratio. ```typescript highlight=highlight-export-size const exported = await engine.block.export(currentPage, { mimeType: 'image/jpeg', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(exported, 'image/jpeg'); ``` ## Built-in Export Action CE.SDK includes a built-in export button you can add to the navigation bar. This provides a familiar export experience without additional code. ```typescript highlight=highlight-builtin-action { id: 'ly.img.action.navigationBar', onClick: async () => { await cesdk.actions.run('exportDesign', { mimeType: 'image/jpeg', jpegQuality: 0.9 }); }, key: 'export-action', label: 'Export', icon: '@imgly/Download', }, ``` The button triggers the `exportDesign` action when clicked. You can customize what happens by registering your own handler. ### Customize Export Behavior Override the `exportDesign` action to control the export format, quality, and download behavior. ```typescript highlight=highlight-custom-action cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage()!; const jpeg = await engine.block.export(currentPage, { mimeType: 'image/jpeg', jpegQuality: 0.9 }); await cesdk.utils.downloadFile(jpeg, 'image/jpeg'); }); ``` When you register `exportDesign`, the built-in export button uses your custom handler instead of the default. ## When to Use JPEG JPEG works well for: - Photographs and images with gradual color transitions - Social media posts and web content - Scenarios where file size matters more than perfect quality > **Note:** For graphics with sharp edges, text, or transparency, use PNG instead. For modern web delivery with better compression, consider WebP. ## Troubleshooting **Output looks blurry** — Increase `jpegQuality` toward 1.0, or use PNG for graphics with hard edges. **File size too large** — Decrease `jpegQuality` to 0.7–0.8, or reduce dimensions with `targetWidth` and `targetHeight`. **Unexpected background** — JPEG does not support transparency. Use PNG or WebP for transparent content. ## API Reference | Method | Description | |--------|-------------| | `engine.block.export(block, options)` | Export a block to the specified format | | `cesdk.utils.downloadFile(blob, mimeType)` | Trigger browser download | | `cesdk.actions.register(name, handler)` | Register or override an action | | `cesdk.ui.insertOrderComponent()` | Add components to navigation bar | | `engine.scene.zoomToBlock(block)` | Zoom camera to fit a block | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) — Compare all available export formats - [Export to PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) — Export for print and document workflows - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) — Export specific regions or elements - [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) — Handle large exports and memory constraints --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To MP4" description: "Export video compositions as MP4 files with configurable encoding options, progress tracking, and resolution control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-mp4-c998a8/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To MP4](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-mp4-c998a8/) --- Export your video compositions as MP4 files with H.264 encoding, progress tracking, and configurable quality settings.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-mp4-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-mp4-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-mp4-browser/) MP4 is the most widely supported video format, using H.264 encoding for efficient compression. CE.SDK handles frame rendering, encoding, and audio muxing entirely client-side, giving you control over quality and file size. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-mp4-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; cesdk.feature.enable('ly.img.video'); await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.video.template/templates/milli-surf-school.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await cesdk.actions.run('zoom.toPage', { autoFit: true }); // Setup export functionality await this.setupExportActions(cesdk, page); } private async setupExportActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add export buttons to navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-builtin', label: 'Export Video', icon: '@imgly/Save', onClick: () => { cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); } }, { id: 'ly.img.action.navigationBar', key: 'export-video', label: 'Export MP4', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-progress', label: 'Export (dialog)', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.showSuccess({ message: 'Export complete!' }); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-hd', label: 'Export HD', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting HD Video', message: 'Encoding 1080p...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { targetWidth: 1920, targetHeight: 1080, framerate: 30, onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } }, { id: 'ly.img.action.navigationBar', key: 'export-video-quality', label: 'Export HQ', icon: '@imgly/Save', onClick: async () => { const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting HQ Video', message: 'Encoding high quality...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { h264Profile: 100, videoBitrate: 8_000_000, onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.close(); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } } } ] }); } } export default Example; ``` This guide covers exporting videos to MP4, tracking progress, configuring resolution and quality, and using built-in export actions. ## Export to MP4 Call `engine.block.exportVideo()` with a page block to export it as an MP4 video. The method returns a Blob containing the encoded video data. ```typescript highlight=highlight-export-video const blob = await engine.block.exportVideo(page, { mimeType: 'video/mp4', ``` Pass the page ID from `engine.scene.getCurrentPage()` to export the current video scene. ## Export Options Video export supports configuration options for progress tracking, resolution, framerate, and encoding quality. ### Progress Dialog Use `cesdk.utils.showLoadingDialog()` to display a progress dialog during export. The `onProgress` callback updates the dialog with rendering progress. ```typescript highlight=highlight-progress-dialog const dialog = cesdk.utils.showLoadingDialog({ title: 'Exporting Video', message: 'Encoding MP4...', progress: 0 }); try { const blob = await engine.block.exportVideo(page, { onProgress: (_, encoded, total) => { dialog.updateProgress({ value: encoded, max: total }); } }); dialog.showSuccess({ message: 'Export complete!' }); await cesdk.utils.downloadFile(blob, 'video/mp4'); } catch (error) { dialog.showError({ message: 'Export failed' }); throw error; } ``` The dialog provides `updateProgress()` to show a progress bar, `showSuccess()` for completion feedback, and `showError()` for failures. The `onProgress` callback receives rendered frames, encoded frames, and total frames. ### Resolution and Framerate Use `targetWidth`, `targetHeight`, and `framerate` to control output dimensions and smoothness. ```typescript highlight=highlight-resolution const blob = await engine.block.exportVideo(page, { targetWidth: 1920, targetHeight: 1080, framerate: 30, ``` If only one dimension is specified, the other is calculated to maintain aspect ratio. Default framerate is 30 fps. ### H.264 Profile and Quality The `h264Profile` option controls encoding quality and device compatibility: - **66 (Baseline)**: Maximum compatibility, lower compression - **77 (Main)**: Balanced quality and compatibility (default) - **100 (High)**: Best compression, modern devices only Set `videoBitrate` in bits per second to control file size. ```typescript highlight=highlight-quality const blob = await engine.block.exportVideo(page, { h264Profile: 100, videoBitrate: 8_000_000, ``` ### All MP4 Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format: `'video/mp4'` or `'video/quicktime'`. Defaults to `'video/mp4'`. | | `onProgress` | Callback receiving `(renderedFrames, encodedFrames, totalFrames)` for progress tracking. | | `targetWidth` | Target output width in pixels. | | `targetHeight` | Target output height in pixels. | | `framerate` | Target framerate in Hz. Defaults to `30`. | | `h264Profile` | H.264 profile: 66 (Baseline), 77 (Main), 100 (High). Defaults to `77`. | | `h264Level` | H.264 level multiplied by 10 (e.g., 52 = level 5.2). Defaults to `52`. | | `videoBitrate` | Video bitrate in bits/second. `0` enables automatic selection. | | `audioBitrate` | Audio bitrate in bits/second. `0` enables automatic selection. | | `timeOffset` | Start time in seconds for partial export. Defaults to `0`. | | `duration` | Export duration in seconds. Defaults to scene duration. | | `abortSignal` | Signal to cancel the export operation. | ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`: ```typescript highlight=highlight-builtin-action cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); ``` The built-in action exports the current page as MP4 and prompts the user to download the result. It displays a progress dialog during encoding. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.exportVideo(blockId, options)` | Export a page block as MP4 video with encoding options | | `cesdk.actions.run('exportDesign', options)` | Run the built-in export action with progress dialog | | `cesdk.utils.showLoadingDialog(options)` | Show a loading dialog with progress tracking | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large videos - [Export Audio](https://img.ly/docs/cesdk/sveltekit/guides/export-save-publish/export/audio-68de25/) - Export audio tracks separately - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or timeline segments --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PDF" description: "Export your designs as PDF documents with options for print compatibility, underlayer generation, and output control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) --- Export your designs as PDF documents with high compatibility mode and underlayer support for special media printing.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-pdf-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-pdf-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-pdf-browser/) PDF provides a universal document format for sharing and printing designs. CE.SDK exports PDF files that preserve vector graphics, support multi-page documents, and include options for print compatibility. You can configure high compatibility mode to ensure consistent rendering across different PDF viewers, and generate underlayers for special media printing like fabric, glass, or DTF transfers. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-pdf-browser/browser.ts reference-only import { MimeType, type EditorPlugin, type EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export to PDF Guide * * This example demonstrates: * - Exporting designs as PDF documents * - Configuring high compatibility mode for consistent rendering * - Generating underlayers for special media printing * - Controlling output dimensions * - Using the built-in export action */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene and zoom to fit await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Register a custom export action with PDF-specific options cesdk.actions.register('exportDesign', async () => { // Export the scene block to include all pages in the PDF const scene = engine.scene.get()!; // Merge PDF-specific defaults with provided options const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(blob, 'application/pdf'); }); // Configure navigation bar with export buttons using insertOrderComponent cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-pdf', label: 'PDF', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Export scene as PDF (includes all pages) const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-high-compat', label: 'High Compat', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-underlayer', label: 'Underlayer', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-a4', label: 'A4 @ 300 DPI', icon: '@imgly/Download', onClick: async () => { // Export scene to include all pages in the PDF const scene = engine.scene.get()!; // Export with specific dimensions for print output const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); } }, { id: 'ly.img.action.navigationBar', key: 'export-action', label: 'Export', icon: '@imgly/Download', onClick: () => { // Run built-in export with PDF format cesdk.actions.run('exportDesign', { mimeType: 'application/pdf' }); } } ] }); } } export default Example; ``` This guide covers exporting designs to PDF format, configuring high compatibility mode, generating underlayers with spot colors, and controlling output dimensions. ## Export to PDF Call `engine.block.export()` with `mimeType: 'application/pdf'` to export any block as a PDF document. The method returns a Blob containing the PDF data. ```typescript highlight=highlight-export-pdf // Export scene as PDF (includes all pages) const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); ``` Pass the scene ID from `engine.scene.get()` to export all pages as a multi-page PDF. You can also pass a single page ID from `engine.scene.getCurrentPage()` if you only need to export one page. ## Configure High Compatibility Mode Enable `exportPdfWithHighCompatibility` to rasterize complex elements like gradients with transparency at the scene's DPI. This ensures consistent rendering across all PDF viewers. ```typescript highlight=highlight-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at scene DPI const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` Use high compatibility mode when: - Designs contain gradients with transparency - Effects or blend modes render inconsistently across viewers - Maximum compatibility matters more than vector precision High compatibility mode increases file size because complex elements are converted to raster images rather than remaining as vectors. ## Generate Underlayers for Special Media Underlayers provide a base ink layer (typically white) for printing on transparent or non-white substrates like fabric, glass, or acrylic. The underlayer sits behind your design elements and provides opacity on transparent materials. ### Define the Underlayer Spot Color Before exporting, define a spot color that represents the underlayer ink. The RGB values provide a preview representation in PDF viewers. ```typescript highlight=highlight-spot-color // Define the underlayer spot color before export // RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` The spot color name (e.g., `'RDG_WHITE'`) must match your print provider's requirements. Common names include `RDG_WHITE` for Roland DG printers and `White` for other systems. ### Export with Underlayer Options Configure the underlayer spot color name and optional offset. The `underlayerOffset` adjusts the underlayer size in design units—negative values shrink it inward to prevent visible edges from print misalignment (trapping). ```typescript highlight=highlight-underlayer // Export with underlayer for special media printing const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks underlayer to prevent visible edges underlayerOffset: -2.0 }); ``` The underlayer is generated automatically from the contours of all design elements on the page. Elements with transparency will have proportionally reduced underlayer opacity. ## Export at Target Dimensions Use `targetWidth` and `targetHeight` to control the exported PDF dimensions in pixels. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size // Export with specific dimensions for print output const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf', targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); ``` For print output, calculate the target dimensions based on your desired DPI: - A4 at 300 DPI: 2480 × 3508 pixels - Letter at 300 DPI: 2550 × 3300 pixels ## Built-in Export Action Run the `exportDesign` action to execute the default export flow programmatically. ```typescript highlight=highlight-trigger-export // Run built-in export with PDF format cesdk.actions.run('exportDesign', { mimeType: 'application/pdf' }); ``` This executes the registered export action, which handles the complete export process including format selection and file download. ## Customize Export Action Register a custom `exportDesign` action to apply PDF-specific options automatically. This lets you set defaults like high compatibility mode that apply whenever the export action runs. ```typescript highlight=highlight-customize-action // Register a custom export action with PDF-specific options cesdk.actions.register('exportDesign', async () => { // Export the scene block to include all pages in the PDF const scene = engine.scene.get()!; // Merge PDF-specific defaults with provided options const blob = await engine.block.export(scene, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); await cesdk.utils.downloadFile(blob, 'application/pdf'); }); ``` The custom action merges your PDF defaults with any options passed when the action runs. This approach centralizes export configuration and ensures consistent behavior across your application. ## Download Export Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(pdfBlob, 'application/pdf'); ``` Pass the blob and MIME type to prompt the user to save the file locally. ## PDF Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format. Must be `'application/pdf'`. | | `exportPdfWithHighCompatibility` | Rasterize complex elements at scene DPI for consistent rendering. Defaults to `true`. | | `exportPdfWithUnderlayer` | Generate an underlayer from design contours. Defaults to `false`. | | `underlayerSpotColorName` | Spot color name for the underlayer ink. Required when `exportPdfWithUnderlayer` is true. | | `underlayerOffset` | Size adjustment in design units. Negative values shrink the underlayer inward. | | `targetWidth` | Target output width in pixels. Must be used with `targetHeight`. | | `targetHeight` | Target output height in pixels. Must be used with `targetWidth`. | | `abortSignal` | Signal to cancel the export operation. | ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as PDF with format and compatibility options | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define a spot color for underlayer ink | | `engine.scene.get()` | Get the scene for multi-page PDF export | | `engine.scene.getCurrentPage()` | Get the current page for single-page export | | `cesdk.actions.run()` | Runs a built-in action like `exportDesign` | | `cesdk.actions.register()` | Registers a custom action to override default behavior | | `cesdk.utils.downloadFile()` | Triggers browser download dialog for a blob | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export for Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/) - Print workflows with DPI and color management - [Spot Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/) - Define and use spot colors in designs - [Export Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large designs --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To PNG" description: "Export your designs as PNG images with transparency support and configurable compression for web graphics, UI elements, and content requiring crisp edges." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To PNG](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-png-f87eaf/) --- Export your designs as PNG images with full transparency support and configurable compression.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-png-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-png-browser/) PNG (Portable Network Graphics) provides lossless compression with full alpha channel support. It's ideal for web graphics, UI elements, and content requiring crisp edges or transparency. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-png-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Setup export functionality await this.setupExportActions(cesdk, page); } private async setupExportActions( cesdk: CreativeEditorSDK, page: number ): Promise { const engine = cesdk.engine; // Add export button to navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG', icon: '@imgly/Save', onClick: async () => { const blob = await engine.block.export(page, { mimeType: 'image/png' }); await cesdk.utils.downloadFile(blob, 'image/png'); } }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (default)', icon: '@imgly/Save', onClick: () => cesdk.actions.run('exportDesign') }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (compressed)', icon: '@imgly/Save', onClick: async () => { // Export with compression const compressedBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); await cesdk.utils.downloadFile(compressedBlob, 'image/png'); } }, { id: 'ly.img.action.navigationBar', key: 'export-design', label: 'Export PNG (hd)', icon: '@imgly/Save', onClick: async () => { const hdBlob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); await cesdk.utils.downloadFile(hdBlob, 'image/png'); } } ] }); } } export default Example; ``` This guide covers exporting designs to PNG, configuring compression, controlling output dimensions, and using built-in export actions. ## Export to PNG Call `engine.block.export()` with `mimeType: 'image/png'` to export any block as a PNG image. The method returns a Blob containing the image data. ```typescript highlight=highlight-export-png const blob = await engine.block.export(page, { mimeType: 'image/png' }); ``` Pass the page ID from `engine.scene.getCurrentPage()` or any block ID to export specific elements. ## Export Options PNG export supports several configuration options for compression, dimensions, and text rendering. ### Compression Level The `pngCompressionLevel` option (0-9) controls file size vs. encoding speed. Higher values produce smaller files but take longer to encode. PNG compression is lossless, so quality remains unchanged. ```typescript highlight=highlight-compression const compressedBlob = await engine.block.export(page, { mimeType: 'image/png', pngCompressionLevel: 9 }); ``` - **0**: No compression, fastest encoding - **5**: Balanced (default) - **9**: Maximum compression, slowest encoding ### Target Dimensions Use `targetWidth` and `targetHeight` together to export at specific dimensions. The block renders large enough to fill the target size while maintaining aspect ratio. ```typescript highlight=highlight-target-size const hdBlob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); ``` If the target aspect ratio differs from the block's aspect ratio, the output extends beyond the target on one axis to preserve proportions. ### All PNG Export Options | Option | Description | | ------ | ----------- | | `mimeType` | Output format. Defaults to `'image/png'`. | | `pngCompressionLevel` | Compression level (0-9). Higher values produce smaller files but take longer to encode. Quality is unaffected. Defaults to `5`. | | `targetWidth` | Target output width in pixels. Must be used with `targetHeight`. | | `targetHeight` | Target output height in pixels. Must be used with `targetWidth`. | | `allowTextOverhang` | When `true`, text blocks with glyphs extending beyond their frame export with full glyph bounds visible. Defaults to `false`. | | `abortSignal` | Signal to cancel the export operation. | ## Built-in Export Action CE.SDK provides a built-in `exportDesign` action that handles export with a progress dialog and automatic download. Trigger it with `cesdk.actions.run()`: ```typescript highlight=highlight-builtin-action onClick: () => cesdk.actions.run('exportDesign') ``` The built-in action exports the current page as PNG and prompts the user to download the result. Add an export button to the navigation bar to let users trigger this action from the UI. ## API Reference | Method | Description | | ------ | ----------- | | `engine.block.export(blockId, options)` | Export a block as PNG with format and quality options | | `cesdk.actions.run('exportDesign')` | Run the built-in export action with progress dialog | | `cesdk.utils.downloadFile(blob, mimeType)` | Download a blob to the user's device | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Compare all supported export formats - [Export Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) - Check device limits before exporting large designs - [Export with Color Mask](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/with-color-mask-4f868f/) - Remove specific colors and generate alpha masks - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or regions --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export to Raw Data" description: "Export designs to uncompressed RGBA pixel data for custom image processing, GPU uploads, and advanced graphics workflows." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-raw-data-abd7da/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To Raw Data](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-raw-data-abd7da/) --- Exporting designs to raw pixel data gives you direct access to uncompressed RGBA bytes, enabling custom image processing, GPU texture uploads, and integration with advanced graphics pipelines. Unlike compressed formats like PNG or JPEG, raw data export provides the pixel buffer without encoding overhead, making it ideal for performance-critical applications and scenarios where you need to manipulate individual pixels programmatically.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-raw-data-browser/) ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-raw-data-browser/src/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from '../package.json'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from '../design-editor/plugin'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Load asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: ['ly.img.image.*'] }) ); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Set explicit page dimensions const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create a single image block to demonstrate raw data export const imageBlock = await engine.block.addImage(imageUri, { size: { width: 800, height: 600 } }); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); // Add export button to navigation bar cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] }); // Override the built-in exportDesign action cesdk.actions.register('exportDesign', async () => { // Export to raw pixel data const width = Math.floor(engine.block.getWidth(imageBlock)); const height = Math.floor(engine.block.getHeight(imageBlock)); const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height }); // Convert blob to raw pixel array const arrayBuffer = await blob.arrayBuffer(); const pixelData = new Uint8Array(arrayBuffer); // Apply grayscale processing const processedData = this.toGrayscale(pixelData, width, height); // Download processed image await this.downloadProcessedImage(processedData, width, height); }); } /** * Convert image to grayscale by averaging RGB channels */ private toGrayscale( pixelData: Uint8Array, _width: number, _height: number ): Uint8Array { const result = new Uint8Array(pixelData); for (let i = 0; i < result.length; i += 4) { const avg = Math.round((result[i] + result[i + 1] + result[i + 2]) / 3); result[i] = avg; // R result[i + 1] = avg; // G result[i + 2] = avg; // B // Keep alpha unchanged: result[i + 3] } return result; } /** * Convert processed pixel data to PNG and trigger download */ private async downloadProcessedImage( pixelData: Uint8Array, width: number, height: number ): Promise { // Create canvas and render pixel data const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Failed to get canvas context'); } // Create ImageData from pixel array const imageData = new ImageData( new Uint8ClampedArray(pixelData), width, height ); ctx.putImageData(imageData, 0, 0); // Convert canvas to blob const blob = await new Promise((resolve, reject) => { canvas.toBlob( blob => { if (blob) { resolve(blob); } else { reject(new Error('Failed to convert canvas to blob')); } }, 'image/png', 1.0 ); }); // Trigger download const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'processed-image.png'; link.click(); // Clean up URL.revokeObjectURL(url); } } export default Example; ``` ## When to Use Raw Data Export Raw pixel data export provides direct access to uncompressed RGBA bytes from CE.SDK, giving you complete control over individual pixels for custom processing workflows. Use raw data export when you need pixel-level access to exported designs for custom algorithms or integrations. For standard image delivery, use PNG or JPEG exports instead, as they provide compression and are ready to use without additional processing. ## Understanding Raw Data Format When you export with `mimeType: 'application/octet-stream'`, CE.SDK returns a Blob containing uncompressed RGBA pixel data. The format is straightforward: - **4 bytes per pixel** representing Red, Green, Blue, and Alpha channels - **Values from 0-255** for each channel (8-bit unsigned integers) - **Row-major order** with pixels arranged left-to-right, top-to-bottom - **Total size** equals width × height × 4 bytes ## How to Export Raw Data To export a block as raw pixel data, use the `engine.block.export()` method with `mimeType: 'application/octet-stream'`: ```typescript highlight-basic-export const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height }); ``` This returns a Blob containing uncompressed RGBA pixel data that you can process with custom algorithms. ## Download Exported Data The example overrides the built-in `exportDesign` action to implement a custom workflow that exports to raw data, processes the pixels, and downloads the result: ```typescript highlight-export-action-body // Export to raw pixel data const width = Math.floor(engine.block.getWidth(imageBlock)); const height = Math.floor(engine.block.getHeight(imageBlock)); const blob = await engine.block.export(imageBlock, { mimeType: 'application/octet-stream', targetWidth: width, targetHeight: height }); // Convert blob to raw pixel array const arrayBuffer = await blob.arrayBuffer(); const pixelData = new Uint8Array(arrayBuffer); // Apply grayscale processing const processedData = this.toGrayscale(pixelData, width, height); // Download processed image await this.downloadProcessedImage(processedData, width, height); ``` This complete workflow demonstrates exporting to raw pixel data, applying grayscale processing, and downloading the processed image as PNG. ## Performance Considerations Raw data export involves trade-offs between flexibility and efficiency: **Memory Usage**: Raw RGBA data requires 4 bytes per pixel. A 1920×1080 CE.SDK export uses approximately 8.3 MB uncompressed, compared to 1-3 MB for PNG. Reduce memory usage with the `targetWidth` and `targetHeight` export options: ```typescript const blob = await engine.block.export(blockId, { mimeType: 'application/octet-stream', targetWidth: 960, targetHeight: 540 }); ``` **Processing Speed**: Operating directly on pixel data from CE.SDK exports is fast because there's no encoding/decoding overhead. However, processing millions of pixels can be time-consuming for complex algorithms. Consider using Web Workers for heavy processing to avoid blocking the main thread. **When to Use Raw vs. Compressed for CE.SDK Exports**: - Use raw data when you need custom post-processing before final delivery - Use PNG or JPEG for direct downloads from CE.SDK - Use raw data for intermediate processing steps in multi-stage pipelines - Use compressed formats for final output or network transfer ## API Reference | Method | Description | | -------------------------------------- | --------------------------------------------------------- | | `engine.block.export()` | Exports a block with `mimeType: 'application/octet-stream'` for raw RGBA data | | `engine.block.getWidth()` | Returns the width of a block in pixels | | `engine.block.getHeight()` | Returns the height of a block in pixels | | `Blob.arrayBuffer()` | Converts the blob to an ArrayBuffer for raw data access | | `ImageData()` | Creates an ImageData object from a Uint8ClampedArray | | `CanvasRenderingContext2D.putImageData()` | Paints pixel data onto a canvas | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To WebP" description: "Export your CE.SDK designs to WebP format for optimized web delivery with lossy and lossless compression options." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-webp-aef6f4/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [To WebP](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-webp-aef6f4/) --- Export designs to WebP format for optimized web delivery with smaller file sizes than PNG or JPEG.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-to-webp-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-webp-browser/) WebP delivers smaller file sizes than PNG and JPEG while preserving image quality and transparency support. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-webp-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export to WebP Guide * * Demonstrates exporting designs to WebP format with: * - Built-in export action triggered programmatically * - Three export buttons showcasing different quality presets * - Lossy, lossless, and social media export options */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load template and zoom to fit await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (!page) throw new Error('No page found'); await engine.scene.zoomToBlock(page, { padding: 40 }); // Three export buttons with different WebP settings cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'webp-lossy', label: 'Lossy', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; // Export with lossy compression const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.8 }); // Download using CE.SDK utils await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'webp-lossless', label: 'Lossless', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 1.0 }); await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'webp-social', label: 'Social', icon: '@imgly/Download', onClick: async () => { const p = engine.scene.getCurrentPage()!; // Export with target dimensions for social media const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.9, targetWidth: 1200, targetHeight: 630 }); await cesdk.utils.downloadFile(blob, 'image/webp'); } }, { id: 'ly.img.action.navigationBar', key: 'export-action', label: 'Export', icon: '@imgly/Download', onClick: () => { // Run built-in export with WebP format cesdk.actions.run('exportDesign', { mimeType: 'image/webp' }); } } ] }); } } export default Example; ``` This guide covers exporting to WebP, configuring quality settings, and triggering downloads. ## Export to WebP Call `engine.block.export()` with `mimeType: 'image/webp'` and a `webpQuality` value between 0 and 1. ```typescript highlight=highlight-export-webp // Export with lossy compression const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.8 }); ``` The `webpQuality` parameter controls compression. A value of 0.8 provides a good balance between file size and visual quality for most use cases. ## Export Options WebP export supports these options: | Option | Type | Description | |--------|------|-------------| | `mimeType` | `'image/webp'` | Required. Specifies WebP format | | `webpQuality` | `number` | Quality from 0 to 1. Default 1.0 (lossless) | | `targetWidth` | `number` | Optional resize width | | `targetHeight` | `number` | Optional resize height | Combine `targetWidth` and `targetHeight` to resize the output, useful for social media or thumbnail generation. ```typescript highlight=highlight-export-options // Export with target dimensions for social media const blob = await engine.block.export(p, { mimeType: 'image/webp', webpQuality: 0.9, targetWidth: 1200, targetHeight: 630 }); ``` Set `webpQuality` to 1.0 for lossless compression when pixel-perfect output is required. ## Built-in Export Action Run the `exportDesign` action to execute the default export flow programmatically. ```typescript highlight=highlight-trigger-export // Run built-in export with WebP format cesdk.actions.run('exportDesign', { mimeType: 'image/webp' }); ``` This executes the registered export action, which handles the complete export process including format selection and file download. ## Download Export Use `cesdk.utils.downloadFile()` to trigger the browser's download dialog for the exported blob. ```typescript highlight=highlight-download // Download using CE.SDK utils await cesdk.utils.downloadFile(blob, 'image/webp'); ``` Pass the blob and MIME type to prompt the user to save the file locally. > **Note:** WebP is supported in all modern browsers. For older browsers, consider PNG or JPEG as fallback formats. ## API Reference | API | Description | |-----|-------------| | `engine.block.export()` | Exports a block to an image blob with format and quality options | | `cesdk.actions.run()` | Runs a built-in action like `exportDesign` | | `cesdk.utils.downloadFile()` | Triggers browser download dialog for a blob | ## Next Steps [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Learn about all supported export formats and their options. [Export to PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) - Generate print-ready PDF documents from your designs. [Size Limits](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/size-limits-6f0695/) - Understand export size constraints and optimization strategies. [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) - Export specific blocks or regions instead of the full design. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export with a Color Mask" description: "Learn how to export design blocks with color masking in CE.SDK to remove specific colors and generate alpha masks for print workflows and compositing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/with-color-mask-4f868f/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [With a Color Mask](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/with-color-mask-4f868f/) --- Remove specific colors from exported images and generate alpha masks using CE.SDK's color mask export API for print workflows, transparency creation, and compositing pipelines.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-with-color-mask-browser/) When exporting, CE.SDK can remove specific RGB colors by replacing matching pixels with transparency. The export generates two files: the masked image with transparent areas and an alpha mask showing removed pixels. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-with-color-mask-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create a single image with registration marks const imageBlock = await engine.block.addImage(imageUri, { size: { width: pageWidth * 0.8, height: pageHeight * 0.8 } }); engine.block.appendChild(page, imageBlock); // Center the image on the page const imageWidth = engine.block.getWidth(imageBlock); const imageHeight = engine.block.getHeight(imageBlock); engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2); engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2); // Add registration marks at the corners (pure red for demonstration) const markSize = 30; const imageX = engine.block.getPositionX(imageBlock); const imageY = engine.block.getPositionY(imageBlock); const markPositions = [ { x: imageX - markSize - 10, y: imageY - markSize - 10 }, // Top-left { x: imageX + imageWidth + 10, y: imageY - markSize - 10 }, // Top-right { x: imageX - markSize - 10, y: imageY + imageHeight + 10 }, // Bottom-left { x: imageX + imageWidth + 10, y: imageY + imageHeight + 10 } // Bottom-right ]; markPositions.forEach((pos) => { const mark = engine.block.create('//ly.img.ubq/graphic'); engine.block.setShape( mark, engine.block.createShape('//ly.img.ubq/shape/rect') ); const redFill = engine.block.createFill('//ly.img.ubq/fill/color'); engine.block.setColor(redFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); engine.block.setFill(mark, redFill); engine.block.setWidth(mark, markSize); engine.block.setHeight(mark, markSize); engine.block.setPositionX(mark, pos.x); engine.block.setPositionY(mark, pos.y); engine.block.appendChild(page, mark); }); // Override the default image export action to use color mask export cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; // Export with color mask - removes pure red pixels (registration marks) const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' } ); // Download masked image using CE.SDK utils await cesdk.utils.downloadFile(maskedImage, 'image/png'); // Download alpha mask await cesdk.utils.downloadFile(alphaMask, 'image/png'); console.log('Color mask export completed:', { maskedSize: maskedImage.size, maskSize: alphaMask.size }); }); // Add export button to navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] } ); // Log completion console.log('Export with Color Mask example loaded successfully'); console.log( 'Click the export button in the navigation bar to export with color mask' ); } } export default Example; ``` Color mask exports work through exact RGB color matching—pixels that precisely match your specified color values (0.0-1.0 range) are removed. This is useful for print workflows (removing registration marks), transparency creation (removing background colors), or generating alpha masks for compositing tools. ## Exporting with Color Masks We export blocks with color masking using the `exportWithColorMask` method. This method removes specific RGB colors from the rendered output and generates both a masked image and an alpha mask. ```typescript highlight-export-with-color-mask // Export with color mask - removes pure red pixels (registration marks) const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' } ); ``` The method accepts the block to export, three RGB color components (0.0-1.0 range), and optional export options like MIME type. This example uses pure red `(1.0, 0.0, 0.0)` to identify and remove registration marks from the design. The export operation returns a Promise that resolves to an array containing two Blobs. The first Blob is the masked image with transparency applied where the specified color was found. The second Blob is the alpha mask—a black and white image showing which pixels were removed (black) and which remained (white). We then download both files using `cesdk.utils.downloadFile()`, which triggers browser downloads with appropriate file naming. ### Specifying RGB Color Values RGB color components in CE.SDK use floating-point values from 0.0 to 1.0, not the 0-255 integer values common in design tools: - Pure red: `(1.0, 0.0, 0.0)` - Common for registration marks - Pure magenta: `(1.0, 0.0, 1.0)` - Distinctive marker color - Pure cyan: `(0.0, 1.0, 1.0)` - Alternative marker color - Pure yellow: `(1.0, 1.0, 0.0)` - Useful for exclusion zones When converting from standard 0-255 RGB values, divide each component by 255. For example, RGB(255, 128, 0) becomes `(1.0, 0.502, 0.0)`. ## How to Export with Color Masks We override the default export action to apply color masking when users click the export button. This integrates color mask functionality into your editor's workflow without requiring additional UI. ```typescript highlight-register-export-action // Override the default image export action to use color mask export cesdk.actions.register('exportDesign', async () => { const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; // Export with color mask - removes pure red pixels (registration marks) const [maskedImage, alphaMask] = await engine.block.exportWithColorMask( currentPage, 1.0, // Red component 0.0, // Green component 0.0, // Blue component (RGB: pure red) { mimeType: 'image/png' } ); // Download masked image using CE.SDK utils await cesdk.utils.downloadFile(maskedImage, 'image/png'); // Download alpha mask await cesdk.utils.downloadFile(alphaMask, 'image/png'); console.log('Color mask export completed:', { maskedSize: maskedImage.size, maskSize: alphaMask.size }); }); ``` The custom action registers as `'exportDesign'`, replacing the default export behavior. When triggered, it exports the current page with pure red `(1.0, 0.0, 0.0)` as the mask color, then downloads both the masked image and alpha mask files using `cesdk.utils.downloadFile()`. ## API Reference | Method | Description | | ----------------------------------------------- | --------------------------------------------------------- | | `cesdk.actions.register()` | Registers a custom action that can be triggered by UI elements | | `cesdk.ui.insertOrderComponent()` | Adds UI components to the editor's navigation bar | | `cesdk.utils.downloadFile()` | Triggers a browser download for a file blob | | `engine.scene.getCurrentPage()` | Gets the currently active page in the scene | | `engine.block.exportWithColorMask()` | Exports a block with specific RGB color removed, generating masked image and alpha mask | | `engine.block.addImage()` | Adds an image block to the scene | | `engine.block.create()` | Creates a new block of the specified type | | `engine.block.setShape()` | Sets the shape for a graphic block | | `engine.block.createShape()` | Creates a shape definition for graphic blocks | | `engine.block.createFill()` | Creates a fill definition for blocks | | `engine.block.setColor()` | Sets the color value for a fill | | `engine.block.setFill()` | Applies a fill to a block | | `engine.block.appendChild()` | Adds a block as a child of another block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export for Printing" description: "Export designs from CE.SDK as print-ready PDFs with professional output options including high compatibility mode, underlayers for special media, and scene DPI configuration." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [For Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/) --- Export print-ready PDFs from CE.SDK with options for high compatibility mode, underlayers for special media like fabric or glass, and configurable output resolution.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-for-printing-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-for-printing-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-for-printing-browser/) CE.SDK exports designs as PDFs, but professional print workflows require specific configurations beyond standard export. This guide covers PDF export options for print, including high compatibility mode for complex designs, underlayers for printing on special media, and output resolution settings. ```typescript file=@cesdk_web_examples/guides-export-save-publish-for-printing-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export for Printing Guide * * This example demonstrates: * - Exporting designs as print-ready PDFs * - Configuring high compatibility mode for complex designs * - Generating underlayers for special media (DTF, fabric, glass) * - Setting scene DPI for print resolution */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Load a template scene - this will be our print design await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the scene and page const scene = engine.scene.get(); if (!scene) { throw new Error('No scene found'); } const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Set print resolution (DPI) on the scene // 300 DPI is standard for high-quality print output engine.block.setFloat(scene, 'scene/dpi', 300); // Helper function to download blob const downloadBlob = (blob: Blob, filename: string) => { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); }; // Export PDF with high compatibility mode const exportWithHighCompatibility = async () => { // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at the scene's DPI const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); downloadBlob(pdfBlob, 'print-high-compatibility.pdf'); cesdk.ui.showNotification({ message: `PDF exported with high compatibility (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export PDF without high compatibility (faster, smaller files) const exportStandardPdf = async () => { // Disable high compatibility for faster exports when targeting modern PDF viewers // Complex elements remain as vectors but may render differently across viewers const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false }); downloadBlob(pdfBlob, 'print-standard.pdf'); cesdk.ui.showNotification({ message: `Standard PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Define underlayer spot color and export with underlayer const exportWithUnderlayer = async () => { // Define the underlayer spot color before export // This creates a named spot color that will be used for the underlayer ink // The RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); // Export with underlayer enabled for DTF or special media printing // The underlayer generates a shape behind design elements filled with the spot color const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks the underlayer inward to prevent visible edges underlayerOffset: -2.0 }); downloadBlob(pdfBlob, 'print-with-underlayer.pdf'); cesdk.ui.showNotification({ message: `PDF exported with underlayer (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Export with custom target size const exportWithTargetSize = async () => { // Export with specific dimensions for print output // targetWidth and targetHeight control the exported PDF dimensions in pixels const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); downloadBlob(pdfBlob, 'print-a4-300dpi.pdf'); cesdk.ui.showNotification({ message: `A4 PDF exported (${(pdfBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Configure navigation bar with export buttons cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportWithHighCompatibility, key: 'export-high-compat', label: 'High Compat PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportStandardPdf, key: 'export-standard', label: 'Standard PDF', icon: '@imgly/Save', variant: 'plain' }, { id: 'ly.img.action.navigationBar', onClick: exportWithUnderlayer, key: 'export-underlayer', label: 'With Underlayer', icon: '@imgly/Save', variant: 'plain', color: 'accent' }, { id: 'ly.img.action.navigationBar', onClick: exportWithTargetSize, key: 'export-a4', label: 'A4 @ 300 DPI', icon: '@imgly/Save', variant: 'plain' } ]); cesdk.ui.showNotification({ message: 'Use the export buttons to export print-ready PDFs with different options', type: 'info', duration: 'infinite' }); } } export default Example; ``` ## Default PDF Color Behavior CE.SDK exports PDFs in RGB color space. CMYK or spot colors defined in your design convert to RGB during standard export. For CMYK output with ICC profiles, use the **Print Ready PDF plugin**. The base `engine.block.export()` method provides print compatibility options, but full CMYK workflow requires the plugin. ## Setting Up for Print Export Before exporting, configure your scene with appropriate print settings. Set the scene's DPI to control print resolution—300 DPI is standard for high-quality print output. ```typescript highlight-setup // Load a template scene - this will be our print design await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); // Get the scene and page const scene = engine.scene.get(); if (!scene) { throw new Error('No scene found'); } const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Set print resolution (DPI) on the scene // 300 DPI is standard for high-quality print output engine.block.setFloat(scene, 'scene/dpi', 300); ``` ## PDF Export Options for Print Export a page as PDF using `engine.block.export()` with `mimeType: 'application/pdf'`. ### High Compatibility Mode The `exportPdfWithHighCompatibility` option rasterizes complex elements like gradients with transparency at the scene's DPI. Enable this when: - Designs use gradients with transparency - Effects or blend modes render inconsistently across PDF viewers - Maximum compatibility across print RIPs matters more than vector precision ```typescript highlight-export-high-compatibility // Enable high compatibility mode for consistent rendering across PDF viewers // This rasterizes complex elements like gradients with transparency at the scene's DPI const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true }); ``` Disabling high compatibility produces faster exports with smaller file sizes but may cause rendering inconsistencies in some PDF viewers. ### Standard PDF Export When targeting modern PDF viewers where file size and export speed matter more than universal compatibility: ```typescript highlight-export-standard-pdf // Disable high compatibility for faster exports when targeting modern PDF viewers // Complex elements remain as vectors but may render differently across viewers const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: false }); ``` ## Underlayers for Special Media Underlayers provide a base ink layer (typically white) for printing on: - Transparent or non-white substrates - DTF (Direct-to-Film) transfers - Fabric, glass, or dark materials ### Define the Underlayer Spot Color Before exporting with an underlayer, define the spot color that represents the underlayer ink. Use `engine.editor.setSpotColorRGB()` to create a named spot color with RGB preview values. ```typescript highlight-define-spot-color // Define the underlayer spot color before export // This creates a named spot color that will be used for the underlayer ink // The RGB values (0.8, 0.8, 0.8) provide a preview representation engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8); ``` ### Export with Underlayer Enable `exportPdfWithUnderlayer` and specify the `underlayerSpotColorName` to generate an underlayer from design contours. The underlayer offset controls the size adjustment—negative values shrink the underlayer inward to prevent visible edges from print misalignment. ```typescript highlight-export-with-underlayer // Export with underlayer enabled for DTF or special media printing // The underlayer generates a shape behind design elements filled with the spot color const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, exportPdfWithUnderlayer: true, underlayerSpotColorName: 'RDG_WHITE', // Negative offset shrinks the underlayer inward to prevent visible edges underlayerOffset: -2.0 }); ``` ### Underlayer Offset The `underlayerOffset` option adjusts the underlayer size in design units. Negative values shrink the underlayer inward, which prevents visible white edges when the print layers don't align perfectly. Start with values like `-1.0` to `-3.0` and adjust based on your print equipment's alignment accuracy. ## Export with Target Size Control the exported PDF dimensions using `targetWidth` and `targetHeight`. These values are in pixels and work together with the scene's DPI setting to determine physical print size. ```typescript highlight-export-target-size // Export with specific dimensions for print output // targetWidth and targetHeight control the exported PDF dimensions in pixels const pdfBlob = await engine.block.export(page, { mimeType: 'application/pdf', exportPdfWithHighCompatibility: true, targetWidth: 2480, // A4 at 300 DPI (210mm) targetHeight: 3508 // A4 at 300 DPI (297mm) }); ``` ## CMYK PDFs with ICC Profiles For CMYK color space and ICC profile embedding, use the **Print Ready PDF plugin**. This plugin post-processes exports to convert RGB to CMYK with embedded ICC profiles. See the [Print Ready PDF Plugin](https://img.ly/docs/cesdk/sveltekit/plugins/print-ready-pdf-iroalu/) for setup and usage. ## Troubleshooting ### PDF Not Opening Correctly in Print Software Enable `exportPdfWithHighCompatibility: true` to rasterize complex elements that may not render correctly in prepress software. ### Underlayer Not Visible in PDF Viewer Standard PDF viewers may not display spot colors. Use professional print software like Adobe Acrobat Pro or prepress tools to verify the underlayer separation. ### Colors Look Different After Printing Standard export uses RGB. Use the Print Ready PDF plugin with appropriate ICC profiles for accurate CMYK reproduction. ### White Edges on Special Media Increase the negative `underlayerOffset` value to shrink the underlayer further from design edges. Try values like `-2.0` or `-3.0` depending on your equipment's alignment tolerance. ## API Reference | Method/Option | Purpose | |---------------|---------| | `engine.block.export(block, options)` | Export block to PDF | | `mimeType: 'application/pdf'` | Specify PDF output format | | `targetWidth` | Target width for exported PDF in pixels | | `targetHeight` | Target height for exported PDF in pixels | | `exportPdfWithHighCompatibility` | Rasterize bitmap images and gradients at scene DPI (default: `true`) | | `exportPdfWithUnderlayer` | Generate underlayer from contours (default: `false`) | | `underlayerSpotColorName` | Spot color name for underlayer ink | | `underlayerOffset` | Size adjustment in design units (negative shrinks) | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Define spot color for underlayer | | `engine.block.setFloat(scene, 'scene/dpi', value)` | Set scene DPI for print resolution | ## Next Steps - [Print Ready PDF Plugin](https://img.ly/docs/cesdk/sveltekit/plugins/print-ready-pdf-iroalu/) - CMYK PDFs with ICC profiles - [CMYK Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/cmyk-8a1334/) - Configure CMYK colors - [Spot Colors](https://img.ly/docs/cesdk/sveltekit/colors/for-print/spot-c3a150/) - Define and use spot colors - [Export to PDF](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/to-pdf-95e04b/) - General PDF export options --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Export for Social Media" description: "Export vertical videos with the correct dimensions, formats, and quality settings for Instagram Reels, TikTok, and YouTube Shorts." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-social-media-0e8a92/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [For Social Media](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-social-media-0e8a92/) --- Export vertical video designs for social media platforms with the correct dimensions, formats, and quality settings. Configure video exports with appropriate resolution, framerate, and bitrate optimized for Instagram Reels, TikTok, and YouTube Shorts.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-for-social-media-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-for-social-media-browser/) Short-form vertical video has become the dominant format for social media. Instagram Reels, TikTok, and YouTube Shorts all use the 9:16 aspect ratio at 1080×1920 pixels. This guide demonstrates how to create and export vertical video content with the correct settings for these platforms. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-for-social-media-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Export for Social Media Guide * * This example demonstrates: * - Creating a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts * - Exporting videos with resolution, framerate, and bitrate settings * - Tracking video export progress */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Add a video clip that fills the vertical frame const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const videoBlock = await engine.block.addVideo( 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', pageWidth, pageHeight ); engine.block.fillParent(videoBlock); // Export video for Instagram Reels / TikTok / YouTube Shorts (9:16) const exportVideo = async () => { cesdk.ui.showNotification({ message: 'Exporting video...', type: 'info' }); const currentPage = engine.scene.getCurrentPage(); if (!currentPage) return; const videoBlob = await engine.block.exportVideo(currentPage, { mimeType: 'video/mp4', targetWidth: 1080, targetHeight: 1920, framerate: 30, videoBitrate: 8_000_000, // 8 Mbps onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } }); await cesdk.utils.downloadFile(videoBlob, 'video/mp4'); cesdk.ui.showNotification({ message: `Video exported: ${(videoBlob.size / 1024 / 1024).toFixed( 1 )} MB (1080×1920)`, type: 'success' }); }; // Configure navigation bar with export button cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [ 'ly.img.undoRedo.navigationBar', 'ly.img.spacer', { id: 'ly.img.action.navigationBar', onClick: exportVideo, key: 'export-video', label: 'Export Video', icon: '@imgly/Video', variant: 'plain', color: 'accent' } ]); } } export default Example; ``` This guide covers creating a vertical video scene, exporting with resolution, framerate, and bitrate settings, and tracking export progress. ## Creating a Scene Create a scene with the correct dimensions for vertical video. Use `cesdk.actions.run('scene.create')` with explicit pixel dimensions to ensure your content matches platform requirements. ```typescript highlight-setup // Create a vertical video scene (9:16) for Instagram Reels, TikTok, YouTube Shorts await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); const page = engine.scene.getCurrentPage(); if (!page) { throw new Error('No page found'); } // Add a video clip that fills the vertical frame const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const videoBlock = await engine.block.addVideo( 'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4', pageWidth, pageHeight ); engine.block.fillParent(videoBlock); ``` The scene uses 1080×1920 pixels (9:16 aspect ratio), which is the standard resolution for Instagram Reels, TikTok, and YouTube Shorts. The video block fills the entire page dimensions. ## Exporting Videos Export video content using `engine.block.exportVideo()`. Configure resolution, framerate, and bitrate for optimal quality and file size. ```typescript highlight-export-video const videoBlob = await engine.block.exportVideo(currentPage, { mimeType: 'video/mp4', targetWidth: 1080, targetHeight: 1920, framerate: 30, videoBitrate: 8_000_000, // 8 Mbps onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } }); ``` Key video export settings: - **mimeType**: `video/mp4` for broad platform compatibility - **targetWidth/targetHeight**: Output resolution (1080×1920 for vertical) - **framerate**: 30 frames per second (standard for social media) - **videoBitrate**: 8 Mbps provides good quality while keeping file sizes reasonable Higher bitrates produce better quality but larger files. For short-form vertical video, 8 Mbps (8,000,000 bits per second) balances quality and upload speed. ## Tracking Export Progress Video exports can take time, especially for longer content. Use the `onProgress` callback to provide users with feedback during export. ```typescript highlight-progress onProgress: (renderedFrames, encodedFrames, totalFrames) => { const percent = Math.round((encodedFrames / totalFrames) * 100); console.log( `Export progress: ${percent}% (${encodedFrames}/${totalFrames} frames)` ); } ``` The callback receives three parameters: - **renderedFrames**: Number of frames rendered so far - **encodedFrames**: Number of frames encoded to the output file - **totalFrames**: Total frames to be exported The encoding stage typically trails rendering slightly. Calculate progress percentage from `encodedFrames / totalFrames` for an accurate completion indicator. ## Downloading Exported Files After export, use `cesdk.utils.downloadFile()` to trigger a browser download: ```typescript const videoBlob = await engine.block.exportVideo(page, { /* options */ }); await cesdk.utils.downloadFile(videoBlob, 'video/mp4'); ``` This utility handles the download process automatically, including memory cleanup. For server uploads, pass the Blob directly to your upload function or FormData. ## API Reference | Method | Purpose | |--------|---------| | `cesdk.actions.run('scene.create')` | Create a scene with specified dimensions | | `engine.block.exportVideo()` | Export block as video (MP4) | | `engine.scene.getCurrentPage()` | Get the active page for export | | `cesdk.utils.downloadFile()` | Trigger browser download for exported files | ### Export Options (Videos) | Option | Type | Description | |--------|------|-------------| | `mimeType` | `string` | Output format: `video/mp4` | | `targetWidth` | `number` | Output width in pixels | | `targetHeight` | `number` | Output height in pixels | | `framerate` | `number` | Frames per second | | `videoBitrate` | `number` | Video bitrate in bits per second | | `onProgress` | `function` | Progress callback with frame counts | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Complete export options including H.264 profiles and advanced settings --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Pre-Export Validation" description: "Documentation for Pre-Export Validation" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/pre-export-validation-3a2cba/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [Pre-Export Validation](https://img.ly/docs/cesdk/sveltekit/export-save-publish/pre-export-validation-3a2cba/) --- Validate your design before export by detecting elements outside the page, protruding content, obscured text, and other issues that could affect the final output quality.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-pre-export-validation-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-pre-export-validation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-pre-export-validation-browser/) Pre-export validation catches layout and quality issues before export, preventing problems like cropped content, hidden text, and elements missing from the final output. Production-quality designs require elements to be properly positioned within the page boundaries. ```typescript file=@cesdk_web_examples/guides-export-save-publish-export-pre-export-validation-browser/browser.ts reference-only import type { CreativeEngine, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import type CreativeEditorSDK from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; type ValidationSeverity = 'error' | 'warning'; interface ValidationIssue { type: | 'outside_page' | 'protruding' | 'text_obscured' | 'unfilled_placeholder'; severity: ValidationSeverity; blockId: number; blockName: string; message: string; } interface ValidationResult { errors: ValidationIssue[]; warnings: ValidationIssue[]; } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Set role to adopter so placeholders can be replaced engine.editor.setRole('Adopter'); const page = engine.block.findByType('page')[0]; await this.createDemoScene(engine, page); this.overrideExportAction(cesdk, engine); } private async createDemoScene( engine: CreativeEngine, page: number ): Promise { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const centerY = pageHeight / 2; // Row 1: Main validation examples (horizontally aligned) const row1Y = centerY - 120; const elementWidth = 150; const elementHeight = 100; const spacing = 20; // Calculate positions for 4 elements in a row const totalRowWidth = elementWidth * 4 + spacing * 3; const startX = (pageWidth - totalRowWidth) / 2; // Create an image that's outside the page (will trigger error) // Positioned to the left of the page - completely outside const outsideImage = engine.block.create('graphic'); engine.block.setName(outsideImage, 'Outside Image'); engine.block.setShape(outsideImage, engine.block.createShape('rect')); const outsideFill = engine.block.createFill('image'); engine.block.setString( outsideFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(outsideImage, outsideFill); engine.block.setWidth(outsideImage, elementWidth); engine.block.setHeight(outsideImage, elementHeight); engine.block.setPositionX(outsideImage, -elementWidth - 10); // Left of the page engine.block.setPositionY(outsideImage, row1Y); engine.block.appendChild(page, outsideImage); // Create a properly placed image for reference (first in row) const validImage = engine.block.create('graphic'); engine.block.setName(validImage, 'Valid Image'); engine.block.setShape(validImage, engine.block.createShape('rect')); const validFill = engine.block.createFill('image'); engine.block.setString( validFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_3.jpg' ); engine.block.setFill(validImage, validFill); engine.block.setWidth(validImage, elementWidth); engine.block.setHeight(validImage, elementHeight); engine.block.setPositionX(validImage, startX); engine.block.setPositionY(validImage, row1Y); engine.block.appendChild(page, validImage); // Create unfilled placeholder (second in row - triggers error) const placeholder = engine.block.create('graphic'); engine.block.setName(placeholder, 'Unfilled Placeholder'); engine.block.setShape(placeholder, engine.block.createShape('rect')); const placeholderFill = engine.block.createFill('image'); engine.block.setFill(placeholder, placeholderFill); engine.block.setWidth(placeholder, elementWidth); engine.block.setHeight(placeholder, elementHeight); engine.block.setPositionX(placeholder, startX + elementWidth + spacing); engine.block.setPositionY(placeholder, row1Y); engine.block.appendChild(page, placeholder); engine.block.setScopeEnabled(placeholder, 'fill/change', true); engine.block.setPlaceholderBehaviorEnabled(placeholderFill, true); engine.block.setPlaceholderEnabled(placeholder, true); engine.block.setPlaceholderControlsOverlayEnabled(placeholder, true); engine.block.setPlaceholderControlsButtonEnabled(placeholder, true); // Create text that will be partially obscured (third in row) const obscuredText = engine.block.create('text'); engine.block.setName(obscuredText, 'Obscured Text'); engine.block.setPositionX( obscuredText, startX + (elementWidth + spacing) * 2 ); engine.block.setPositionY(obscuredText, row1Y); engine.block.setWidth(obscuredText, elementWidth); engine.block.setHeight(obscuredText, elementHeight); engine.block.replaceText(obscuredText, 'Hidden'); engine.block.setFloat(obscuredText, 'text/fontSize', 48); engine.block.appendChild(page, obscuredText); // Create a shape that overlaps the text (added after text = on top) const overlappingShape = engine.block.create('graphic'); engine.block.setName(overlappingShape, 'Overlapping Shape'); engine.block.setShape(overlappingShape, engine.block.createShape('rect')); const shapeFill = engine.block.createFill('color'); engine.block.setColor(shapeFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 0.8 }); engine.block.setFill(overlappingShape, shapeFill); engine.block.setWidth(overlappingShape, elementWidth); engine.block.setHeight(overlappingShape, elementHeight); engine.block.setPositionX( overlappingShape, startX + (elementWidth + spacing) * 2 ); engine.block.setPositionY(overlappingShape, row1Y); engine.block.appendChild(page, overlappingShape); // Create an image that protrudes from the page (fourth in row - will trigger warning) // Extends past right page boundary const protrudingImage = engine.block.create('graphic'); engine.block.setName(protrudingImage, 'Protruding Image'); engine.block.setShape(protrudingImage, engine.block.createShape('rect')); const protrudingFill = engine.block.createFill('image'); engine.block.setString( protrudingFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); engine.block.setFill(protrudingImage, protrudingFill); engine.block.setWidth(protrudingImage, elementWidth); engine.block.setHeight(protrudingImage, elementHeight); engine.block.setPositionX(protrudingImage, pageWidth - elementWidth / 2); // Extends 75px past right engine.block.setPositionY(protrudingImage, row1Y); engine.block.appendChild(page, protrudingImage); // Add explanatory text below the row const explanationText = engine.block.create('text'); engine.block.setPositionX(explanationText, 50); engine.block.setPositionY(explanationText, row1Y + elementHeight + 40); engine.block.setWidth(explanationText, pageWidth - 100); engine.block.setHeightMode(explanationText, 'Auto'); engine.block.replaceText( explanationText, 'Click Export to run validation. Move elements to fix issues.' ); engine.block.setFloat(explanationText, 'text/fontSize', 48); engine.block.setEnum(explanationText, 'text/horizontalAlignment', 'Center'); engine.block.appendChild(page, explanationText); } private getBoundingBox( engine: CreativeEngine, blockId: number ): [number, number, number, number] { const x = engine.block.getGlobalBoundingBoxX(blockId); const y = engine.block.getGlobalBoundingBoxY(blockId); const width = engine.block.getGlobalBoundingBoxWidth(blockId); const height = engine.block.getGlobalBoundingBoxHeight(blockId); return [x, y, x + width, y + height]; } private calculateOverlap( box1: [number, number, number, number], box2: [number, number, number, number] ): number { const [ax1, ay1, ax2, ay2] = box1; const [bx1, by1, bx2, by2] = box2; const overlapWidth = Math.max(0, Math.min(ax2, bx2) - Math.max(ax1, bx1)); const overlapHeight = Math.max(0, Math.min(ay2, by2) - Math.max(ay1, by1)); const overlapArea = overlapWidth * overlapHeight; const box1Area = (ax2 - ax1) * (ay2 - ay1); if (box1Area === 0) return 0; return overlapArea / box1Area; } private getBlockName(engine: CreativeEngine, blockId: number): string { const name = engine.block.getName(blockId); if (name) return name; const kind = engine.block.getKind(blockId); return kind.charAt(0).toUpperCase() + kind.slice(1); } private getRelevantBlocks(engine: CreativeEngine): number[] { return [ ...engine.block.findByType('text'), ...engine.block.findByType('graphic') ]; } private findOutsideBlocks( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const pageBounds = this.getBoundingBox(engine, page); for (const blockId of this.getRelevantBlocks(engine)) { if (!engine.block.isValid(blockId)) continue; const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); if (overlap === 0) { // Element is completely outside the page issues.push({ type: 'outside_page', severity: 'error', blockId, blockName: this.getBlockName(engine, blockId), message: 'Element is completely outside the visible page area' }); } } return issues; } private findProtrudingBlocks( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const pageBounds = this.getBoundingBox(engine, page); for (const blockId of this.getRelevantBlocks(engine)) { if (!engine.block.isValid(blockId)) continue; // Compare element bounds against page bounds const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); // Protruding: partially inside (overlap > 0) but not fully inside (overlap < 1) if (overlap > 0 && overlap < 0.99) { issues.push({ type: 'protruding', severity: 'warning', blockId, blockName: this.getBlockName(engine, blockId), message: 'Element extends beyond page boundaries' }); } } return issues; } private findObscuredText( engine: CreativeEngine, page: number ): ValidationIssue[] { const issues: ValidationIssue[] = []; const children = engine.block.getChildren(page); const textBlocks = engine.block.findByType('text'); for (const textId of textBlocks) { if (!engine.block.isValid(textId)) continue; const textIndex = children.indexOf(textId); if (textIndex === -1) continue; // Elements later in children array are rendered on top const blocksAbove = children.slice(textIndex + 1); for (const aboveId of blocksAbove) { // Skip text blocks - they don't typically obscure other text if (engine.block.getType(aboveId) === '//ly.img.ubq/text') continue; const overlap = this.calculateOverlap( this.getBoundingBox(engine, textId), this.getBoundingBox(engine, aboveId) ); if (overlap > 0) { // Text is obscured by element above it issues.push({ type: 'text_obscured', severity: 'warning', blockId: textId, blockName: this.getBlockName(engine, textId), message: 'Text may be partially hidden by overlapping elements' }); break; } } } return issues; } private findUnfilledPlaceholders(engine: CreativeEngine): ValidationIssue[] { const issues: ValidationIssue[] = []; const placeholders = engine.block.findAllPlaceholders(); for (const blockId of placeholders) { if (!engine.block.isValid(blockId)) continue; if (!this.isPlaceholderFilled(engine, blockId)) { issues.push({ type: 'unfilled_placeholder', severity: 'error', blockId, blockName: this.getBlockName(engine, blockId), message: 'Placeholder has not been filled with content' }); } } return issues; } private isPlaceholderFilled( engine: CreativeEngine, blockId: number ): boolean { const fillId = engine.block.getFill(blockId); if (!fillId || !engine.block.isValid(fillId)) return false; const fillType = engine.block.getType(fillId); // Check image fill - empty URI means unfilled placeholder if (fillType === '//ly.img.ubq/fill/image') { const imageUri = engine.block.getString(fillId, 'fill/image/imageFileURI'); return imageUri !== '' && imageUri !== undefined; } // Other fill types are considered filled return true; } private validateDesign(engine: CreativeEngine): ValidationResult { const page = engine.block.findByType('page')[0]; const outsideIssues = this.findOutsideBlocks(engine, page); const protrudingIssues = this.findProtrudingBlocks(engine, page); const obscuredIssues = this.findObscuredText(engine, page); const placeholderIssues = this.findUnfilledPlaceholders(engine); const allIssues = [ ...outsideIssues, ...protrudingIssues, ...obscuredIssues, ...placeholderIssues ]; return { errors: allIssues.filter((i) => i.severity === 'error'), warnings: allIssues.filter((i) => i.severity === 'warning') }; } private overrideExportAction( cesdk: CreativeEditorSDK, engine: CreativeEngine ): void { cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: ['ly.img.exportImage.navigationBar'] }); const exportDesign = cesdk.actions.get('exportDesign'); cesdk.actions.register('exportDesign', async () => { const result = this.validateDesign(engine); const hasErrors = result.errors.length > 0; const hasWarnings = result.warnings.length > 0; // Log all issues to console for debugging if (hasErrors || hasWarnings) { console.log('Validation Results:', result); } // Block export for errors if (hasErrors) { cesdk.ui.showNotification({ message: `${result.errors.length} error(s) found - export blocked`, type: 'error', duration: 'long' }); // Select first problematic block const firstError = result.errors[0]; if (engine.block.isValid(firstError.blockId)) { engine.block.select(firstError.blockId); } return; } // Show warning but allow export if (hasWarnings) { cesdk.ui.showNotification({ message: `${result.warnings.length} warning(s) found - proceeding with export`, type: 'warning', duration: 'medium' }); } // Proceed with export exportDesign(); }); } } export default Example; ``` This guide demonstrates how to detect elements outside the page, find protruding content, identify obscured text, and integrate validation into the export workflow. ## Getting Element Bounds To detect spatial issues, we need to get the bounding box of elements in global coordinates. The `getGlobalBoundingBox*` methods return positions that account for all transformations: ```typescript highlight-get-bounding-box const x = engine.block.getGlobalBoundingBoxX(blockId); const y = engine.block.getGlobalBoundingBoxY(blockId); const width = engine.block.getGlobalBoundingBoxWidth(blockId); const height = engine.block.getGlobalBoundingBoxHeight(blockId); return [x, y, x + width, y + height]; ``` This returns coordinates as `[x1, y1, x2, y2]` representing the top-left and bottom-right corners of the element. The overlap between element and page bounds is calculated as the intersection area divided by the element's total area. An overlap of 0 means completely outside, while 1 (100%) means fully inside. ## Detecting Elements Outside the Page Elements completely outside the page won't appear in the exported output. We find these by checking for blocks with zero overlap with the page bounds: ```typescript highlight-find-outside-blocks const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); if (overlap === 0) { // Element is completely outside the page ``` These issues are categorized as errors because the content is completely missing from the export. ## Detecting Protruding Elements Elements that extend beyond the page boundaries will be partially cropped in the export. For each block, compare its bounds against the page bounds and calculate the overlap ratio: ```typescript highlight-find-protruding-blocks // Compare element bounds against page bounds const blockBounds = this.getBoundingBox(engine, blockId); const overlap = this.calculateOverlap(blockBounds, pageBounds); // Protruding: partially inside (overlap > 0) but not fully inside (overlap < 1) if (overlap > 0 && overlap < 0.99) { ``` An overlap between 0% and 100% indicates the element is partially inside the page. These issues are warnings because the content is partially visible but may not appear as intended. ## Finding Obscured Text Text hidden behind other elements may be unreadable in the final export. First, get the stacking order and all text blocks: ```typescript highlight-find-obscured-text const children = engine.block.getChildren(page); const textBlocks = engine.block.findByType('text'); ``` The `getChildren()` method returns blocks in stacking order - elements later in the array are rendered on top. For each text block, check if any non-text element above it overlaps with its bounds: ```typescript highlight-check-text-obscured // Elements later in children array are rendered on top const blocksAbove = children.slice(textIndex + 1); for (const aboveId of blocksAbove) { // Skip text blocks - they don't typically obscure other text if (engine.block.getType(aboveId) === '//ly.img.ubq/text') continue; const overlap = this.calculateOverlap( this.getBoundingBox(engine, textId), this.getBoundingBox(engine, aboveId) ); if (overlap > 0) { // Text is obscured by element above it ``` We skip text-on-text comparisons since transparent text backgrounds don't typically obscure other text. When overlap is detected, we flag the text as potentially obscured. ## Checking Placeholder Content Placeholders mark areas where users must add content before export. First, find all placeholder blocks in the design: ```typescript highlight-find-placeholders const placeholders = engine.block.findAllPlaceholders(); ``` Then inspect each placeholder's fill to determine if content has been added. Get the fill block and check its type to determine the validation logic: ```typescript highlight-check-placeholder-filled const fillId = engine.block.getFill(blockId); if (!fillId || !engine.block.isValid(fillId)) return false; const fillType = engine.block.getType(fillId); // Check image fill - empty URI means unfilled placeholder if (fillType === '//ly.img.ubq/fill/image') { const imageUri = engine.block.getString(fillId, 'fill/image/imageFileURI'); return imageUri !== '' && imageUri !== undefined; } ``` For image placeholders, check if the `fill/image/imageFileURI` property has a value. An empty or undefined URI indicates the placeholder hasn't been filled. Unfilled placeholders are treated as errors that block export, ensuring users complete all required content before exporting. ## Overriding the Export Action Intercept the navigation bar export action using `cesdk.actions.get()` and `cesdk.actions.register()`. The action ID `'exportDesign'` controls the export button in the CE.SDK interface: ```typescript highlight-override-export-action cesdk.actions.register('exportDesign', async () => { const result = this.validateDesign(engine); const hasErrors = result.errors.length > 0; const hasWarnings = result.warnings.length > 0; // Log all issues to console for debugging if (hasErrors || hasWarnings) { console.log('Validation Results:', result); } // Block export for errors if (hasErrors) { cesdk.ui.showNotification({ message: `${result.errors.length} error(s) found - export blocked`, type: 'error', duration: 'long' }); // Select first problematic block const firstError = result.errors[0]; if (engine.block.isValid(firstError.blockId)) { engine.block.select(firstError.blockId); } return; } // Show warning but allow export if (hasWarnings) { cesdk.ui.showNotification({ message: `${result.warnings.length} warning(s) found - proceeding with export`, type: 'warning', duration: 'medium' }); } // Proceed with export exportDesign(); }); ``` This override runs validation before export, shows notifications for errors or warnings, and selects the first problematic block to help users locate issues. Export proceeds only when validation passes. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.getGlobalBoundingBoxX(id)` | Get element's global X position | | `engine.block.getGlobalBoundingBoxY(id)` | Get element's global Y position | | `engine.block.getGlobalBoundingBoxWidth(id)` | Get element's global width | | `engine.block.getGlobalBoundingBoxHeight(id)` | Get element's global height | | `engine.block.findByType(type)` | Find all blocks of a specific type | | `engine.block.getChildren(id)` | Get child blocks in stacking order | | `engine.block.getType(id)` | Get the block's type string | | `engine.block.getName(id)` | Get the block's display name | | `engine.block.isValid(id)` | Check if block exists | | `engine.block.select(id)` | Select a block in the editor | | `engine.block.findAllPlaceholders()` | Find all placeholder blocks | | `engine.block.getFill(id)` | Get the fill block | | `engine.block.getString(id, property)` | Get a string property value | | `cesdk.actions.get(actionId)` | Get an action function (browser) | | `cesdk.actions.register(actionId, fn)` | Register an action (browser) | | `cesdk.ui.showNotification(options)` | Display notification (browser) | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Save" description: "Save design progress locally or to a backend service to allow for later editing or publishing." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/save-c8b124/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Save](https://img.ly/docs/cesdk/sveltekit/export-save-publish/save-c8b124/) --- Save and serialize designs in CE.SDK for later retrieval, sharing, or storage using string or archive formats.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-save-browser/) CE.SDK provides two formats for persisting designs. Choose the format based on your storage and portability requirements. ```typescript file=@cesdk_web_examples/guides-export-save-publish-save-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Save Designs Guide * * Demonstrates how to save and serialize designs in CE.SDK: * - Saving scenes to string format for database storage * - Saving scenes to archive format with embedded assets * - Using built-in save actions and customization */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (cesdk == null) { throw new Error('CE.SDK instance is required'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); const page = engine.scene.getCurrentPage(); if (page == null) { throw new Error('No page found in scene'); } engine.scene.zoomToBlock(page, { padding: 40 }); cesdk.actions.register('saveScene', async () => { const sceneString = await engine.scene.saveToString(); // Send to your backend API console.log('Custom save:', sceneString.length, 'bytes'); }); // Button: Save Scene & Download const handleSaveScene = async () => { const sceneString = await engine.scene.saveToString(); const sceneBlob = new Blob([sceneString], { type: 'application/octet-stream' }); await cesdk.utils.downloadFile(sceneBlob, 'application/octet-stream'); cesdk.ui.showNotification({ message: `Scene downloaded (${(sceneString.length / 1024).toFixed(1)} KB)`, type: 'success' }); }; // Button: Save to Archive & Download const handleSaveToArchive = async () => { const archiveBlob = await engine.scene.saveToArchive(); await cesdk.utils.downloadFile(archiveBlob, 'application/zip'); cesdk.ui.showNotification({ message: `Archive downloaded (${(archiveBlob.size / 1024).toFixed(1)} KB)`, type: 'success' }); }; const handleLoadScene = async () => { await cesdk.actions.run('importScene', { format: 'scene' }); }; const handleLoadArchive = async () => { await cesdk.actions.run('importScene', { format: 'archive' }); const loadedPage = engine.scene.getCurrentPage(); if (loadedPage != null) { engine.scene.zoomToBlock(loadedPage, { padding: 40 }); } }; cesdk.ui.insertOrderComponent({ in: 'ly.img.navigation.bar', position: 'end' }, { id: 'ly.img.actions.navigationBar', children: [ { id: 'ly.img.action.navigationBar', key: 'save-scene', label: 'Save Scene', icon: '@imgly/Save', onClick: handleSaveScene }, { id: 'ly.img.action.navigationBar', key: 'save-archive', label: 'Save Archive', icon: '@imgly/Download', onClick: handleSaveToArchive }, { id: 'ly.img.action.navigationBar', key: 'load-scene', label: 'Load Scene', icon: '@imgly/Upload', onClick: handleLoadScene }, { id: 'ly.img.action.navigationBar', key: 'load-archive', label: 'Load Archive', icon: '@imgly/Upload', onClick: handleLoadArchive } ] }); } } export default Example; ``` ## Save Format Comparison | Format | Method | Assets | Best For | | ------ | ------ | ------ | -------- | | String | `saveToString()` | Referenced by URL | Database storage, cloud sync | | Archive | `saveToArchive()` | Embedded in ZIP | Offline use, file sharing | **String format** produces a lightweight Base64-encoded string where assets remain as URL references. Use this when asset URLs will remain accessible. **Archive format** creates a self-contained ZIP with all assets embedded. Use this for portable designs that work offline. ## Save to String Serialize the current scene to a Base64-encoded string suitable for database storage. ```typescript highlight=highlight-save-to-string const sceneString = await engine.scene.saveToString(); ``` The string contains the complete scene structure but references assets by their original URLs. ## Save to Archive Create a self-contained ZIP file with the scene and all embedded assets. ```typescript highlight=highlight-save-to-archive const archiveBlob = await engine.scene.saveToArchive(); ``` The archive includes all pages, elements, and asset data in a single portable file. ## Compression Options CE.SDK supports optional compression for saved scenes to reduce file size. Compression is particularly useful for large scenes or when storage space is limited. ```typescript // Save with Zstd compression (recommended) const compressed = await cesdk.engine.scene.saveToString({ compression: { format: 'Zstd', level: 'Default' } }); ``` **Compression Formats:** - `'None'` - No compression (default) - `'Zstd'` - Zstandard compression (recommended for best performance) **Compression Levels:** - `'Fastest'` - Fastest compression, larger output - `'Default'` - Balanced speed and size (recommended) - `'Best'` - Best compression, slower **Performance:** Compression adds minimal overhead (\<50ms) while reducing scene size by approximately 64%. The Default level provides the best balance of speed and compression ratio. ## Download to User Device Use `cesdk.utils.downloadFile()` to trigger a browser download with the correct MIME type. For scene strings, convert to a Blob first: ```typescript highlight=highlight-download-scene const sceneBlob = new Blob([sceneString], { type: 'application/octet-stream' }); await cesdk.utils.downloadFile(sceneBlob, 'application/octet-stream'); ``` For archive blobs, pass directly to the download utility: ```typescript highlight=highlight-download-archive await cesdk.utils.downloadFile(archiveBlob, 'application/zip'); ``` This utility handles creating and revoking object URLs automatically. ## Load Scene from File Use the built-in `importScene` action to open a file picker for `.scene` files. This restores a previously saved design from its serialized string format. ```typescript highlight=highlight-load-scene const handleLoadScene = async () => { await cesdk.actions.run('importScene', { format: 'scene' }); }; ``` Scene files are lightweight but require the original asset URLs to remain accessible. ## Load Archive from File Load a self-contained `.zip` archive that includes all embedded assets. ```typescript highlight=highlight-load-archive const handleLoadArchive = async () => { await cesdk.actions.run('importScene', { format: 'archive' }); ``` Archives are portable and work offline since all assets are bundled within the file. ## Built-in Save Action CE.SDK includes a built-in `saveScene` action that integrates with the navigation bar. ### Running an Action Trigger the default save behavior programmatically using `actions.run()`: ```typescript await cesdk.actions.run('saveScene'); ``` This executes the registered handler for `saveScene`, which by default downloads the scene file. ### Customizing an Action Override the default behavior by registering a custom handler: ```typescript highlight=highlight-register-custom-action cesdk.actions.register('saveScene', async () => { const sceneString = await engine.scene.saveToString(); // Send to your backend API console.log('Custom save:', sceneString.length, 'bytes'); }); ``` The registered handler runs when the built-in save button is clicked or when the action is triggered via `actions.run()`. ## API Reference | Method | Description | | ------ | ----------- | | `engine.scene.saveToString()` | Serialize scene to Base64 string | | `engine.scene.saveToArchive()` | Save scene with assets as ZIP blob | | `engine.scene.loadFromString()` | Load scene from serialized string | | `engine.scene.loadFromURL()` | Load scene from remote URL | | `engine.scene.loadFromArchiveURL()` | Load scene from URL (file://, http://, https://, or object URL) | | `cesdk.utils.downloadFile()` | Download blob or string to user device | | `cesdk.actions.run()` | Execute a registered action with parameters | | `cesdk.actions.register()` | Register or override an action handler | ## Next Steps - [Export Overview](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/overview-9ed3a8/) - Export designs to image, PDF, and video formats - [Load Scene](https://img.ly/docs/cesdk/sveltekit/open-the-editor/load-scene-478833/) - Load scenes from remote URLs and archives - [Store Custom Metadata](https://img.ly/docs/cesdk/sveltekit/export-save-publish/store-custom-metadata-337248/) - Attach metadata like tags or version info to designs - [Partial Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export/partial-export-89aaf6/) - Export individual blocks or selections --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Store Custom Metadata" description: "Attach, retrieve, and manage custom key-value metadata on design blocks in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/export-save-publish/store-custom-metadata-337248/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Store Custom Metadata](https://img.ly/docs/cesdk/sveltekit/export-save-publish/store-custom-metadata-337248/) --- Attach custom key-value metadata to design blocks in CE.SDK for tracking asset origins, storing application state, or linking to external systems.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-store-custom-metadata-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-store-custom-metadata-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-store-custom-metadata-browser/) Metadata lets you attach arbitrary string key-value pairs to any design block. This data is invisible to end users but persists with the scene through save/load operations. Common use cases include tracking asset origins, storing application-specific state, and linking blocks to external databases or content management systems. ```typescript file=@cesdk_web_examples/guides-export-save-publish-store-custom-metadata-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Store Custom Metadata Guide * * Demonstrates how to attach, retrieve, and manage custom metadata on design blocks: * - Setting metadata key-value pairs * - Getting metadata values by key * - Checking if metadata exists * - Listing all metadata keys * - Removing metadata * - Storing structured data as JSON */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to attach metadata to const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 400, height: 300 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); // Set metadata key-value pairs on the block engine.block.setMetadata(imageBlock, 'externalId', 'asset-12345'); engine.block.setMetadata(imageBlock, 'source', 'user-upload'); engine.block.setMetadata(imageBlock, 'uploadedBy', 'user@example.com'); console.log('Set metadata: externalId, source, uploadedBy'); // Retrieve a metadata value by key if (engine.block.hasMetadata(imageBlock, 'externalId')) { const externalId = engine.block.getMetadata(imageBlock, 'externalId'); console.log('External ID:', externalId); } // List all metadata keys on the block const allKeys = engine.block.findAllMetadata(imageBlock); console.log('All metadata keys:', allKeys); // Log all key-value pairs for (const key of allKeys) { const value = engine.block.getMetadata(imageBlock, key); console.log(` ${key}: ${value}`); } // Store structured data as JSON const generationInfo = { source: 'ai-generated', model: 'stable-diffusion', timestamp: Date.now() }; engine.block.setMetadata( imageBlock, 'generationInfo', JSON.stringify(generationInfo) ); // Retrieve and parse structured data const retrievedJson = engine.block.getMetadata( imageBlock, 'generationInfo' ); const parsedInfo = JSON.parse(retrievedJson); console.log('Parsed generation info:', parsedInfo); // Remove a metadata key engine.block.removeMetadata(imageBlock, 'uploadedBy'); console.log('Removed metadata key: uploadedBy'); // Verify the key was removed const hasUploadedBy = engine.block.hasMetadata(imageBlock, 'uploadedBy'); console.log('Has uploadedBy after removal:', hasUploadedBy); // List remaining keys const remainingKeys = engine.block.findAllMetadata(imageBlock); console.log('Remaining metadata keys:', remainingKeys); // Select the image block to show it in focus engine.block.select(imageBlock); console.log( 'Metadata guide initialized. Check the console for metadata operations.' ); } } export default Example; ``` This guide covers how to set, retrieve, list, and remove metadata on blocks, as well as how to store structured data as JSON strings. ## Initialize CE.SDK We start by initializing CE.SDK with a basic configuration. The metadata APIs are available on the `engine.block` namespace. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to attach metadata to const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 400, height: 300 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 200); engine.block.setPositionY(imageBlock, 150); ``` ## Set Metadata Use `engine.block.setMetadata()` to attach a key-value pair to a block. Both the key and value must be strings. If the key already exists, the value is overwritten. ```typescript highlight-set-metadata // Set metadata key-value pairs on the block engine.block.setMetadata(imageBlock, 'externalId', 'asset-12345'); engine.block.setMetadata(imageBlock, 'source', 'user-upload'); engine.block.setMetadata(imageBlock, 'uploadedBy', 'user@example.com'); console.log('Set metadata: externalId, source, uploadedBy'); ``` You can attach multiple metadata entries to a single block. Each entry is independent and can be accessed, modified, or removed separately. ## Get Metadata Use `engine.block.getMetadata()` to retrieve a value by its key. This method throws an error if the key doesn't exist, so always check with `hasMetadata()` first for conditional access. ```typescript highlight-get-metadata // Retrieve a metadata value by key if (engine.block.hasMetadata(imageBlock, 'externalId')) { const externalId = engine.block.getMetadata(imageBlock, 'externalId'); console.log('External ID:', externalId); } ``` The `hasMetadata()` method returns `true` if the block has metadata for the specified key, and `false` otherwise. This pattern prevents runtime errors when accessing metadata that may not be set. ## List All Metadata Keys Use `engine.block.findAllMetadata()` to get an array of all metadata keys stored on a block. ```typescript highlight-find-all-metadata // List all metadata keys on the block const allKeys = engine.block.findAllMetadata(imageBlock); console.log('All metadata keys:', allKeys); // Log all key-value pairs for (const key of allKeys) { const value = engine.block.getMetadata(imageBlock, key); console.log(` ${key}: ${value}`); } ``` This is useful for iterating through all metadata on a block or debugging what metadata is attached. ## Store Structured Data Since metadata values must be strings, you can store structured data by serializing it to JSON. Parse the JSON when retrieving the data. ```typescript highlight-store-structured-data // Store structured data as JSON const generationInfo = { source: 'ai-generated', model: 'stable-diffusion', timestamp: Date.now() }; engine.block.setMetadata( imageBlock, 'generationInfo', JSON.stringify(generationInfo) ); // Retrieve and parse structured data const retrievedJson = engine.block.getMetadata( imageBlock, 'generationInfo' ); const parsedInfo = JSON.parse(retrievedJson); console.log('Parsed generation info:', parsedInfo); ``` This pattern lets you store complex objects like configuration settings, generation parameters, or any structured information that can be serialized to JSON. ## Remove Metadata Use `engine.block.removeMetadata()` to delete a key-value pair from a block. This method does not throw an error if the key doesn't exist. ```typescript highlight-remove-metadata // Remove a metadata key engine.block.removeMetadata(imageBlock, 'uploadedBy'); console.log('Removed metadata key: uploadedBy'); ``` After removal, you can verify the key was deleted by checking with `hasMetadata()`. ```typescript highlight-verify-removal // Verify the key was removed const hasUploadedBy = engine.block.hasMetadata(imageBlock, 'uploadedBy'); console.log('Has uploadedBy after removal:', hasUploadedBy); // List remaining keys const remainingKeys = engine.block.findAllMetadata(imageBlock); console.log('Remaining metadata keys:', remainingKeys); ``` ## Metadata Persistence Metadata is automatically preserved when saving scenes with `engine.scene.saveToString()` or `engine.scene.saveToArchive()`. When loading a saved scene, all metadata is restored to the blocks. > **Note:** Metadata is only preserved when saving the scene data. Exporting to image or > video formats (PNG, JPEG, MP4) does not include metadata since these are final > output formats. ## Troubleshooting ### getMetadata Throws Error If `getMetadata()` throws an error, the key doesn't exist on the block. Always use `hasMetadata()` to check before retrieving: ```typescript if (engine.block.hasMetadata(block, 'myKey')) { const value = engine.block.getMetadata(block, 'myKey'); } ``` ### Metadata Lost After Load Ensure you're saving with `saveToString()` or `saveToArchive()`, not exporting to image/video formats. Only scene saves preserve metadata. ### Large Metadata Values Metadata is designed for small strings. Very large values may impact performance during save/load operations. For large data, consider storing a reference (like a URL or ID) rather than the data itself. ## API Reference | Method | Description | | --------------------------------------------- | ----------------------------------------- | | `engine.block.setMetadata(block, key, value)` | Set a metadata key-value pair on a block | | `engine.block.getMetadata(block, key)` | Get the value for a metadata key | | `engine.block.hasMetadata(block, key)` | Check if a metadata key exists | | `engine.block.findAllMetadata(block)` | List all metadata keys on a block | | `engine.block.removeMetadata(block, key)` | Remove a metadata key-value pair | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "File Format Support" description: "See which image, video, audio, font, and template formats CE.SDK supports for import and export." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Compatibility & Security](https://img.ly/docs/cesdk/sveltekit/compatibility-fef719/) > [File Format Support](https://img.ly/docs/cesdk/sveltekit/file-format-support-3c4b2a/) --- ## Importing Media ### SVG Limitations ## Exporting Media ## Importing Templates ## Font Formats ## Video & Audio Codecs CE.SDK supports the most widely adopted video and audio codecs to ensure compatibility across platforms: ## Size Limits ### Image Resolution Limits ### Video Resolution & Duration Limits --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Fills" description: "Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/fills-402ddc/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) --- --- ## Related Pages - [Fills](https://img.ly/docs/cesdk/sveltekit/fills/overview-3895ee/) - Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements. - [Color Fills](https://img.ly/docs/cesdk/sveltekit/fills/color-7129cd/) - Learn how to apply solid color fills to design elements using RGB, CMYK, and Spot Colors in CE.SDK - [Gradient Fills](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/gradients-0ff079/) - Learn how to create and apply linear, radial, and conical gradient fills to design elements in CE.SDK - [Image Fills](https://img.ly/docs/cesdk/sveltekit/fills/image-e9cb5c/) - Apply photos, textures, and patterns to design elements using image fills in CE.SDK for web browsers. - [Video Fills](https://img.ly/docs/cesdk/sveltekit/fills/video-ec7f9f/) - Learn how to apply video content as fills to design elements in CE.SDK. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Color Fills" description: "Learn how to apply solid color fills to design elements using RGB, CMYK, and Spot Colors in CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/fills/color-7129cd/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) > [Solid Color](https://img.ly/docs/cesdk/sveltekit/fills/color-7129cd/) --- Apply uniform solid colors to shapes, text, and design blocks using CE.SDK's comprehensive color fill system with support for multiple color spaces.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-color-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-color-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-color-browser/) Color fills are one of the fundamental fill types in CE.SDK, allowing you to paint design blocks with solid, uniform colors. Unlike gradient fills that transition between colors or image fills that display photo content, color fills apply a single color across the entire block. The color fill system supports multiple color spaces including RGB for screen display, CMYK for print workflows, and Spot Colors for brand consistency. ```typescript file=@cesdk_web_examples/guides-fills-color-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Color Fills Guide * * This example demonstrates: * - Creating and applying color fills * - Working with RGB, CMYK, and Spot Colors * - Managing fill properties * - Enabling/disabling fills * - Sharing fills between blocks */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.96, g: 0.96, b: 0.96, a: 1.0 }); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 12); const { blockWidth, blockHeight, getPosition } = layout; // Helper function to create a shape with a fill const createShapeWithFill = ( shapeType: 'rect' | 'ellipse' | 'polygon' | 'star' = 'rect' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const shape = engine.block.createShape(shapeType); engine.block.setShape(block, shape); // Set size engine.block.setWidth(block, blockWidth); engine.block.setHeight(block, blockHeight); // Append to page engine.block.appendChild(page, block); // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } // Create a color fill const colorFill = engine.block.createFill('color'); // Apply the fill to the block engine.block.setFill(block, colorFill); return { block, fill: colorFill }; }; // Example 1: RGB Color Fill (Red) const { block: rgbBlock, fill: rgbFill } = createShapeWithFill(); engine.block.setColor(rgbFill, 'fill/color/value', { r: 1.0, // Red (0.0 to 1.0) g: 0.0, // Green b: 0.0, // Blue a: 1.0 // Alpha (opacity) }); // Example 2: RGB Color Fill (Green with transparency) const { block: transparentBlock, fill: transparentFill } = createShapeWithFill(); engine.block.setColor(transparentFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.2, a: 0.5 // 50% opacity }); // Example 3: RGB Color Fill (Blue) const { block: blueBlock, fill: blueFill } = createShapeWithFill(); engine.block.setColor(blueFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); // Get the current fill from a block const currentFill = engine.block.getFill(blueBlock); const fillType = engine.block.getType(currentFill); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color' // Get the current color value const currentColor = engine.block.getColor(blueFill, 'fill/color/value'); // eslint-disable-next-line no-console console.log('Current color:', currentColor); // Example 4: CMYK Color Fill (Magenta) const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, // Cyan (0.0 to 1.0) m: 1.0, // Magenta y: 0.0, // Yellow k: 0.0, // Key/Black tint: 1.0 // Tint value (0.0 to 1.0) }); // Example 5: Print-Ready CMYK Color const { block: printBlock, fill: printFill } = createShapeWithFill('ellipse'); engine.block.setColor(printFill, 'fill/color/value', { c: 0.0, m: 0.85, y: 1.0, k: 0.0, tint: 1.0 }); // Example 6: Spot Color (Brand Color) // First define the spot color globally engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1); engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9); // Then apply to fill const { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'BrandRed', tint: 1.0, externalReference: '' // Optional reference system }); // Example 7: Brand Color Application // Apply brand color to multiple elements const { block: headerBlock, fill: headerFill } = createShapeWithFill('star'); const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' }; engine.block.setColor(headerFill, 'fill/color/value', brandColor); // Example 8: Second element with same brand color const { block: buttonBlock, fill: buttonFill } = createShapeWithFill('star'); engine.block.setColor(buttonFill, 'fill/color/value', brandColor); // Example 9: Toggle fill visibility const { block: toggleBlock, fill: toggleFill } = createShapeWithFill('star'); engine.block.setColor(toggleFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); // Check fill state const isEnabled = engine.block.isFillEnabled(toggleBlock); // eslint-disable-next-line no-console console.log('Fill enabled:', isEnabled); // true // Example 10: Shared Fill const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, blockWidth); engine.block.setHeight(block1, blockHeight / 2); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, blockWidth); engine.block.setHeight(block2, blockHeight / 2); engine.block.appendChild(page, block2); // Create one fill const sharedFill = engine.block.createFill('color'); engine.block.setColor(sharedFill, 'fill/color/value', { r: 0.5, g: 0.0, b: 0.5, a: 1.0 }); // Apply to both blocks engine.block.setFill(block1, sharedFill); engine.block.setFill(block2, sharedFill); // Example 11: Yellow Star const { block: replaceBlock, fill: replaceFill } = createShapeWithFill('star'); engine.block.setColor(replaceFill, 'fill/color/value', { r: 0.9, g: 0.9, b: 0.1, a: 1.0 }); // Example 12: Color Space Conversion (for demonstration) const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }; // Convert to CMYK const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK'); // eslint-disable-next-line no-console console.log('Converted CMYK color:', cmykColor); // ===== Position all blocks in grid layout ===== const blocks = [ rgbBlock, // Position 0 transparentBlock, // Position 1 blueBlock, // Position 2 cmykBlock, // Position 3 printBlock, // Position 4 spotBlock, // Position 5 headerBlock, // Position 6 buttonBlock, // Position 7 toggleBlock, // Position 8 block1, // Position 9 block2, // Position 10 replaceBlock // Position 11 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide demonstrates how to create, apply, and modify color fills programmatically, work with different color spaces, and manage fill properties for various design elements. ## Understanding Color Fills ### What is a Color Fill? A color fill is a fill object identified by the type `'//ly.img.ubq/fill/color'` (or its shorthand `'color'`) that paints a design block with a single, uniform color. Color fills are part of the broader fill system in CE.SDK and contain a `fill/color/value` property that defines the actual color using various color space formats. Color fills differ from other fill types available in CE.SDK: - **Color fills**: Solid, uniform color across the entire block - **Gradient fills**: Color transitions (linear, radial, conical) - **Image fills**: Photo or raster content - **Video fills**: Animated video content ### Supported Color Spaces CE.SDK's color fill system supports multiple color spaces to accommodate different design and production workflows: - **RGB/sRGB**: Red, Green, Blue with alpha channel (standard for screen display) - **CMYK**: Cyan, Magenta, Yellow, Key (black) with tint (for print production) - **Spot Colors**: Named colors with RGB/CMYK approximations (for brand consistency) Each color space serves specific use cases—use RGB for digital designs, CMYK for print-ready content, and Spot Colors to maintain brand standards across projects. ## Checking Color Fill Support ### Verifying Block Compatibility Before applying color fills to a block, verify that the block type supports fills. Not all block types can have fills—for example, scene and page blocks typically don't support fills. ```typescript highlight-check-fill-support // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } ``` Graphic blocks, shapes, and text blocks typically support fills. Always check `supportsFill()` before accessing fill APIs to avoid runtime errors and ensure smooth operation. ## Creating Color Fills ### Creating a New Color Fill Create a new color fill instance using the `createFill()` method with the type `'color'` or the full type name `'//ly.img.ubq/fill/color'`. ```typescript highlight-create-fill // Create a color fill const colorFill = engine.block.createFill('color'); ``` The `createFill()` method returns a numeric fill ID. The fill exists independently until you attach it to a block using `setFill()`. If you create a fill but don't attach it to a block, you must destroy it manually to prevent memory leaks. ### Default Color Fill Properties New color fills have default properties—typically white or transparent. You can discover all available properties using `findAllProperties()`: ```typescript const properties = engine.block.findAllProperties(colorFillId); console.log(properties); // ["fill/color/value", "type"] ``` ## Applying Color Fills ### Setting a Fill on a Block Once you've created a color fill, attach it to a block using `setFill()`: ```typescript highlight-apply-fill // Apply the fill to the block engine.block.setFill(block, colorFill); ``` This example creates a graphic block with a rectangle shape and applies the color fill to it. The block will now render with the fill's color. ### Getting the Current Fill Retrieve the current fill attached to a block using `getFill()` and inspect its type: ```typescript highlight-get-fill // Get the current fill from a block const currentFill = engine.block.getFill(blueBlock); const fillType = engine.block.getType(currentFill); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color' ``` ## Modifying Color Fill Properties ### Setting RGB Colors Set the fill color using RGB values with the `setColor()` method. RGB values are normalized floats from 0.0 to 1.0, and the alpha channel controls opacity. ```typescript highlight-set-rgb const { block: rgbBlock, fill: rgbFill } = createShapeWithFill(); engine.block.setColor(rgbFill, 'fill/color/value', { r: 1.0, // Red (0.0 to 1.0) g: 0.0, // Green b: 0.0, // Blue a: 1.0 // Alpha (opacity) }); ``` The alpha channel (a) controls opacity: 1.0 is fully opaque, 0.0 is fully transparent. This allows you to create semi-transparent overlays and layered color effects. ### Setting CMYK Colors For print workflows, use CMYK color space with the `setColor()` method. CMYK values are also normalized from 0.0 to 1.0, and include a tint value for partial color application. ```typescript highlight-set-cmyk const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse'); engine.block.setColor(cmykFill, 'fill/color/value', { c: 0.0, // Cyan (0.0 to 1.0) m: 1.0, // Magenta y: 0.0, // Yellow k: 0.0, // Key/Black tint: 1.0 // Tint value (0.0 to 1.0) }); ``` The tint value allows partial application of the color, useful for creating lighter variations without changing the base CMYK values. ### Setting Spot Colors Spot colors are named colors that must be defined before use. They're ideal for maintaining brand consistency and can have both RGB and CMYK approximations for different output scenarios. ```typescript highlight-set-spot // First define the spot color globally engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1); engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9); // Then apply to fill const { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse'); engine.block.setColor(spotFill, 'fill/color/value', { name: 'BrandRed', tint: 1.0, externalReference: '' // Optional reference system }); ``` First, define the spot color globally using `setSpotColorRGB()` or `setSpotColorCMYK()`, then apply it to your fill using the color name. The tint value controls intensity from 0.0 to 1.0. ### Getting Current Color Value Retrieve the current color value from a fill using `getColor()`: ```typescript highlight-get-color // Get the current color value const currentColor = engine.block.getColor(blueFill, 'fill/color/value'); // eslint-disable-next-line no-console console.log('Current color:', currentColor); ``` ## Enabling and Disabling Color Fills ### Toggle Fill Visibility You can temporarily disable a fill without removing it from the block. This preserves all fill properties while making the block transparent: ```typescript highlight-toggle-fill const { block: toggleBlock, fill: toggleFill } = createShapeWithFill('star'); engine.block.setColor(toggleFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0 }); // Check fill state const isEnabled = engine.block.isFillEnabled(toggleBlock); // eslint-disable-next-line no-console console.log('Fill enabled:', isEnabled); // true ``` Disabling fills is useful for creating stroke-only designs or for temporarily hiding fills during interactive editing sessions. The fill properties remain intact and can be re-enabled at any time. ## Additional Techniques ### Sharing Color Fills You can share a single fill instance between multiple blocks. Changes to the shared fill affect all blocks using it: ```typescript highlight-share-fill const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, blockWidth); engine.block.setHeight(block1, blockHeight / 2); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, blockWidth); engine.block.setHeight(block2, blockHeight / 2); engine.block.appendChild(page, block2); // Create one fill const sharedFill = engine.block.createFill('color'); engine.block.setColor(sharedFill, 'fill/color/value', { r: 0.5, g: 0.0, b: 0.5, a: 1.0 }); // Apply to both blocks engine.block.setFill(block1, sharedFill); engine.block.setFill(block2, sharedFill); ``` With shared fills, modifying the fill's color updates all blocks simultaneously. The fill is only destroyed when the last block referencing it is destroyed. ### Color Space Conversion Convert colors between different color spaces using `convertColorToColorSpace()`: ```typescript highlight-convert-color const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }; // Convert to CMYK const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK'); // eslint-disable-next-line no-console console.log('Converted CMYK color:', cmykColor); ``` This is useful when you need to ensure color consistency across different output mediums (screen vs. print). ## Common Use Cases ### Brand Color Application Define and apply brand colors as spot colors to maintain consistency across all design elements: ```typescript highlight-brand-colors // Apply brand color to multiple elements const { block: headerBlock, fill: headerFill } = createShapeWithFill('star'); const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' }; engine.block.setColor(headerFill, 'fill/color/value', brandColor); ``` Using spot colors ensures brand consistency and makes it easy to update all instances of a brand color by modifying the spot color definition. ### Transparency Effects Create semi-transparent overlays and visual effects by adjusting the alpha channel: ```typescript highlight-transparency const { block: transparentBlock, fill: transparentFill } = createShapeWithFill(); engine.block.setColor(transparentFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.2, a: 0.5 // 50% opacity }); ``` ### Print-Ready Colors Use CMYK color space for designs destined for print production: ```typescript highlight-print-colors const { block: printBlock, fill: printFill } = createShapeWithFill('ellipse'); engine.block.setColor(printFill, 'fill/color/value', { c: 0.0, m: 0.85, y: 1.0, k: 0.0, tint: 1.0 }); ``` ## Troubleshooting ### Fill Not Visible If your fill doesn't appear: - Check if fill is enabled: `engine.block.isFillEnabled(block)` - Verify alpha channel is not 0: Check the `a` property in RGBA colors - Ensure block has valid dimensions (width and height > 0) - Confirm block is in the scene hierarchy ### Color Looks Different Than Expected If colors don't match expectations: - Verify you're using the correct color space (RGB vs CMYK) - Check if spot color is properly defined before use - Review tint values (should be 0.0-1.0) - Consider color space conversion for your output medium ### Memory Leaks To prevent memory leaks: - Always destroy replaced fills: `engine.block.destroy(oldFill)` - Don't create fills without attaching them to blocks - Clean up shared fills when they're no longer needed ### Cannot Apply Color to Block If you can't apply a color fill: - Verify block supports fills: `engine.block.supportsFill(block)` - Check if block has a shape: Some blocks require shapes before fills work - Ensure fill object is valid and not already destroyed ## API Reference | Method | Description | | ---------------------------------------- | ----------------------------------------- | | `createFill('color')` | Create a new color fill object | | `setFill(block, fill)` | Assign fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setColor(fill, property, color)` | Set color value (RGB, CMYK, or Spot) | | `getColor(fill, property)` | Get current color value | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | | `findAllProperties(fill)` | List all properties of the fill | | `convertColorToColorSpace(color, space)` | Convert between color spaces | | `setSpotColorRGB(name, r, g, b)` | Define spot color with RGB approximation | | `setSpotColorCMYK(name, c, m, y, k)` | Define spot color with CMYK approximation | ## Next Steps Now that you understand color fills, explore other fill types and color management features: - Learn about Gradient Fills for color transitions - Explore Image Fills for photo content - Understand Fill Overview for the comprehensive fill system - Review Apply Colors for color management across properties - Study Blocks Concept for understanding the block system --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Image Fills" description: "Apply photos, textures, and patterns to design elements using image fills in CE.SDK for web browsers." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/fills/image-e9cb5c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) > [Image](https://img.ly/docs/cesdk/sveltekit/fills/image-e9cb5c/) --- Fill shapes, text, and design blocks with photos and images from URLs, uploads, or asset libraries using CE.SDK's versatile image fill system.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-image-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-image-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-image-browser/) Image fills paint design blocks with raster or vector image content, supporting various formats including PNG, JPEG, WebP, and SVG. You can load images from remote URLs, local files, data URIs, and asset libraries, with built-in support for responsive images through source sets and multiple content fill modes for flexible positioning. ```typescript file=@cesdk_web_examples/guides-fills-image-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine: cesdk.engine }); console.log('Fill feature enabled:', isFillEnabled); await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 7); const { blockWidth, blockHeight, getPosition } = layout; const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // ===== Section 1: Check Fill Support ===== // Check if a block supports fills before accessing fill APIs const testBlock = engine.block.create('graphic'); const canHaveFill = engine.block.supportsFill(testBlock); console.log('Block supports fills:', canHaveFill); engine.block.destroy(testBlock); // ===== Section 2: Create and Apply Image Fill ===== // Create a new image fill using the convenience API const coverImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, coverImageBlock); // Or create manually for more control const manualBlock = engine.block.create('graphic'); engine.block.setShape(manualBlock, engine.block.createShape('rect')); engine.block.setWidth(manualBlock, blockWidth); engine.block.setHeight(manualBlock, blockHeight); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); engine.block.setFill(manualBlock, imageFill); engine.block.appendChild(page, manualBlock); // Get the current fill from a block const currentFill = engine.block.getFill(coverImageBlock); const fillType = engine.block.getType(currentFill); console.log('Fill type:', fillType); // '//ly.img.ubq/fill/image' // ===== Section 3: Content Fill Modes ===== // Cover mode: Fill entire block, may crop image const coverBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: blockSize } ); engine.block.appendChild(page, coverBlock); engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Contain mode: Fit entire image, may leave empty space const containBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: blockSize } ); engine.block.appendChild(page, containBlock); engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); // Get current fill mode const currentMode = engine.block.getEnum(containBlock, 'contentFill/mode'); console.log('Current fill mode:', currentMode); // ===== Section 4: Source Sets (Responsive Images) ===== // Use source sets for responsive images const responsiveBlock = engine.block.create('graphic'); engine.block.setShape(responsiveBlock, engine.block.createShape('rect')); engine.block.setWidth(responsiveBlock, blockWidth); engine.block.setHeight(responsiveBlock, blockHeight); const responsiveFill = engine.block.createFill('image'); engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 2048, height: 1366 } ]); engine.block.setFill(responsiveBlock, responsiveFill); engine.block.appendChild(page, responsiveBlock); // Get current source set const sourceSet = engine.block.getSourceSet( responsiveFill, 'fill/image/sourceSet' ); console.log('Source set entries:', sourceSet.length); // ===== Section 5: Data URI / Base64 Images ===== // Use data URI for embedded images (small SVG example) const svgContent = ``; const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`; const dataUriBlock = engine.block.create('graphic'); engine.block.setShape(dataUriBlock, engine.block.createShape('rect')); engine.block.setWidth(dataUriBlock, blockWidth); engine.block.setHeight(dataUriBlock, blockHeight); const dataUriFill = engine.block.createFill('image'); engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri); engine.block.setFill(dataUriBlock, dataUriFill); engine.block.appendChild(page, dataUriBlock); // ===== Section 6: Opacity ===== // Control opacity for transparency effects const opacityBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: blockSize } ); engine.block.appendChild(page, opacityBlock); engine.block.setFloat(opacityBlock, 'opacity', 0.6); // ===== Position all blocks in grid layout ===== const blocks = [ coverImageBlock, // Position 0 manualBlock, // Position 1 coverBlock, // Position 2 containBlock, // Position 3 responsiveBlock, // Position 4 dataUriBlock, // Position 5 opacityBlock // Position 6 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Zoom to show all content await engine.scene.zoomToBlock(page); } } export default Example; ``` This guide covers how to create and apply image fills programmatically, configure content fill modes, work with responsive images, and load images from different sources. ## Understanding Image Fills Image fills are one of the fundamental fill types in CE.SDK, identified by the type `'//ly.img.ubq/fill/image'` or simply `'image'`. Unlike color fills that provide solid colors or gradient fills that create color transitions, image fills paint blocks with photographic or graphic content from image files. CE.SDK supports common image formats including PNG, JPEG, JPG, GIF, WebP, SVG, and BMP, with transparency support in formats like PNG, WebP, and SVG. The image fill system handles content scaling, positioning, and optimization automatically while giving you full programmatic control when needed. ## Checking Image Fill Support Before working with fills, we should verify that a block supports fill operations. Not all blocks in CE.SDK can have fills—for example, scenes and pages typically don't support fills, while graphic blocks, shapes, and text blocks do. ```typescript highlight-check-fill-support // Check if a block supports fills before accessing fill APIs const testBlock = engine.block.create('graphic'); const canHaveFill = engine.block.supportsFill(testBlock); console.log('Block supports fills:', canHaveFill); engine.block.destroy(testBlock); ``` The `supportsFill()` method returns `true` if the block can have a fill assigned to it. Always check this before attempting to access fill APIs to avoid errors. ## Creating Image Fills CE.SDK provides two approaches for creating image fills: a convenience API for quick block creation, and manual creation for more control over the fill configuration. ### Using the Convenience API The fastest way to create a block with an image fill is using the `addImage()` method, which creates a graphic block, configures the image fill, and adds it to the scene in one operation: ```typescript highlight-create-image-fill // Create a new image fill using the convenience API const coverImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, coverImageBlock); ``` This convenience method handles all the underlying setup automatically, including creating the graphic block, shape, fill, and positioning. ### Manual Image Fill Creation For more control over the fill configuration or to apply fills to existing blocks, you can create fills manually: ```typescript highlight-manual-fill-creation // Or create manually for more control const manualBlock = engine.block.create('graphic'); engine.block.setShape(manualBlock, engine.block.createShape('rect')); engine.block.setWidth(manualBlock, blockWidth); engine.block.setHeight(manualBlock, blockHeight); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); engine.block.setFill(manualBlock, imageFill); engine.block.appendChild(page, manualBlock); ``` When creating fills manually, the fill exists independently until you attach it to a block using `setFill()`. If you create a fill but don't attach it to a block, you must destroy it manually to avoid memory leaks. ### Getting the Current Fill You can retrieve the fill from any block and inspect its type to verify it's an image fill: ```typescript highlight-get-current-fill // Get the current fill from a block const currentFill = engine.block.getFill(coverImageBlock); const fillType = engine.block.getType(currentFill); console.log('Fill type:', fillType); // '//ly.img.ubq/fill/image' ``` The `getFill()` method returns the fill's block ID, which you can then use to query the fill's type and properties. ## Configuring Content Fill Modes Content fill modes control how images scale and position within their containing blocks. CE.SDK provides two primary modes: Cover and Contain, each optimized for different use cases. ### Cover Mode Cover mode ensures the image fills the entire block while maintaining its aspect ratio. Parts of the image may be cropped if the aspect ratios don't match, but there will never be empty space in the block: ```typescript highlight-fill-mode-cover // Cover mode: Fill entire block, may crop image const coverBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_3.jpg', { size: blockSize } ); engine.block.appendChild(page, coverBlock); engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); ``` Cover mode is ideal for backgrounds, hero images, and photo frames where you want the block completely filled with image content. The image is scaled to cover the entire area, and any overflow is cropped. ### Contain Mode Contain mode fits the entire image within the block while maintaining its aspect ratio. This may leave empty space if the aspect ratios don't match, but the entire image will always be visible: ```typescript highlight-fill-mode-contain // Contain mode: Fit entire image, may leave empty space const containBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: blockSize } ); engine.block.appendChild(page, containBlock); engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); ``` Contain mode is best for logos, product images, and situations where preserving the complete image visibility is more important than filling the entire block. ### Getting the Current Fill Mode You can query the current fill mode to understand how the image is being displayed: ```typescript highlight-get-fill-mode // Get current fill mode const currentMode = engine.block.getEnum(containBlock, 'contentFill/mode'); console.log('Current fill mode:', currentMode); ``` This returns either `'Cover'` or `'Contain'` depending on the current configuration. ## Working with Source Sets Source sets enable responsive images by providing multiple resolutions of the same image. The engine automatically selects the most appropriate size based on the current display context, optimizing both performance and visual quality. ### Setting Up a Source Set A source set is an array of image sources, each with a URI and dimensions: ```typescript highlight-source-set // Use source sets for responsive images const responsiveBlock = engine.block.create('graphic'); engine.block.setShape(responsiveBlock, engine.block.createShape('rect')); engine.block.setWidth(responsiveBlock, blockWidth); engine.block.setHeight(responsiveBlock, blockHeight); const responsiveFill = engine.block.createFill('image'); engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [ { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 512, height: 341 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1024, height: 683 }, { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 2048, height: 1366 } ]); engine.block.setFill(responsiveBlock, responsiveFill); engine.block.appendChild(page, responsiveBlock); ``` Each entry in the source set specifies a URI and the image's width and height in pixels. The engine calculates the current drawing size and selects the source with the closest size that exceeds the required dimensions. > **Note:** Source sets are particularly valuable for optimizing bandwidth usage during > preview while ensuring high-resolution output during export. The engine > automatically uses the highest resolution available when exporting. ### Retrieving Source Sets You can get the current source set from a fill to inspect or modify it: ```typescript highlight-get-source-set // Get current source set const sourceSet = engine.block.getSourceSet( responsiveFill, 'fill/image/sourceSet' ); console.log('Source set entries:', sourceSet.length); ``` ## Loading Images from Different Sources CE.SDK's image fills support multiple image source types, giving you flexibility in how you provide image content to your designs. ### Data URIs and Base64 You can embed image data directly using data URIs, which is particularly useful for small images, icons, or dynamically generated graphics: ```typescript highlight-data-uri // Use data URI for embedded images (small SVG example) const svgContent = ``; const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`; const dataUriBlock = engine.block.create('graphic'); engine.block.setShape(dataUriBlock, engine.block.createShape('rect')); engine.block.setWidth(dataUriBlock, blockWidth); engine.block.setHeight(dataUriBlock, blockHeight); const dataUriFill = engine.block.createFill('image'); engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri); engine.block.setFill(dataUriBlock, dataUriFill); engine.block.appendChild(page, dataUriBlock); ``` Data URIs embed the entire image within the URI string itself, eliminating the need for network requests. However, this increases the scene file size, so it's best reserved for smaller images or cases where you need guaranteed availability without network dependencies. ## Additional Techniques ### Controlling Opacity You can control the overall opacity of blocks with image fills, affecting the entire block including its fill: ```typescript highlight-opacity // Control opacity for transparency effects const opacityBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_6.jpg', { size: blockSize } ); engine.block.appendChild(page, opacityBlock); engine.block.setFloat(opacityBlock, 'opacity', 0.6); ``` The opacity value ranges from 0 (fully transparent) to 1 (fully opaque). This affects the entire block, including the image fill. For transparency within the image itself, use image formats that support alpha channels like PNG, WebP, or SVG. > **Note:** Opacity is a block property, not a fill property. It affects the entire block > including any strokes, effects, or other visual properties applied to the > block. ## API Reference ### Core Methods | Method | Description | | --------------------------------------- | -------------------------------------------------- | | `createFill('image')` | Create a new image fill object | | `setFill(block, fill)` | Assign an image fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setString(fill, property, value)` | Set the image URI | | `getString(fill, property)` | Get the current image URI | | `setSourceSet(fill, property, sources)` | Set responsive image sources | | `getSourceSet(fill, property)` | Get current source set | | `setEnum(block, property, value)` | Set content fill mode | | `getEnum(block, property)` | Get current fill mode | | `supportsFill(block)` | Check if block supports fills | | `addImage(url, options)` | Convenience method to create image block with fill | ### Image Fill Properties | Property | Type | Description | | ------------------------- | ----------- | ------------------------------------------------- | | `fill/image/imageFileURI` | String | Single image URI (URL, data URI, or file path) | | `fill/image/sourceSet` | SourceSet\[] | Array of responsive image sources with dimensions | ### Content Fill Properties | Property | Type | Values | Description | | ------------------ | ---- | ------------------ | ------------------------------------- | | `contentFill/mode` | Enum | 'Cover', 'Contain' | How the image scales within its block | ### SourceSet Interface ```typescript interface SourceSetEntry { uri: string; // Image URI width: number; // Image width in pixels height: number; // Image height in pixels } ``` --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Fills" description: "Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/fills/overview-3895ee/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) > [Overview](https://img.ly/docs/cesdk/sveltekit/fills/overview-3895ee/) --- Some [design blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) in CE.SDK allow you to modify or replace their fill. The fill is an object that defines the contents within the shape of a block. CreativeEditor SDK supports many different types of fills, such as images, solid colors, gradients and videos. Similarly to blocks, each fill has a numeric id which can be used to query and [modify its properties](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/). We currently support the following fill types: - `'//ly.img.ubq/fill/color'` - `'//ly.img.ubq/fill/gradient/linear'` - `'//ly.img.ubq/fill/gradient/radial'` - `'//ly.img.ubq/fill/gradient/conical'` - `'//ly.img.ubq/fill/image'` - `'//ly.img.ubq/fill/video'` - `'//ly.img.ubq/fill/pixelStream'` Note: short types are also accepted, e.g. 'color' instead of '//ly.img.ubq/fill/color'. ## Accessing Fills Not all types of design blocks support fills, so you should always first call the `supportsFill(id: number): boolean` API before accessing any of the following APIs. ```javascript engine.block.supportsFill(scene); // Returns false engine.block.supportsFill(block); // Returns true ``` In order to receive the fill id of a design block, call the `getFill(id: number): number` API. You can now pass this id into other APIs in order to query more information about the fill, e.g. its type via the `getType(id: number): ObjectType` API. ```javascript const colorFill = engine.block.getFill(block); const defaultRectFillType = engine.block.getType(colorFill); ``` ## Fill Properties Just like design blocks, fills with different types have different properties that you can query and modify via the API. Use `findAllProperties(id: number): string[]` in order to get a list of all properties of a given fill. For the solid color fill in this example, the call would return `["fill/color/value", "type"]`. Please refer to the [design blocks](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/) for a complete list of all available properties for each type of fill. ```javascript const allFillProperties = engine.block.findAllProperties(colorFill); ``` Once we know the property keys of a fill, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use `setColor(id: number, property: string, value: Color): void` in order to change the color of the fill to red. Once we do this, our graphic block with rect shape will be filled with solid red. ```javascript engine.block.setColor(colorFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0 }); ``` ## Disabling Fills You can disable and enable a fill using the `setFillEnabled(id: number, enabled: boolean): void` API, for example in cases where the design block should only have a stroke but no fill. Notice that you have to pass the id of the design block and not of the fill to the API. ```javascript engine.block.setFillEnabled(block, false); engine.block.setFillEnabled(block, !engine.block.isFillEnabled(block)); ``` ## Changing Fill Types All design blocks that support fills allow you to also exchange their current fill for any other type of fill. In order to do this, you need to first create a new fill object using `createFill(type: FillType): number`. ```javascript const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); ``` In order to assign a fill to a design block, simply call `setFill(id: number, fill: number): void`. Make sure to delete the previous fill of the design block first if you don't need it any more, otherwise we will have leaked it into the scene and won't be able to access it any more, because we don't know its id. Notice that we don't use the `appendChild` API here, which only works with design blocks and not fills. When a fill is attached to one design block, it will be automatically destroyed when the block itself gets destroyed. ```javascript engine.block.destroy(engine.block.getFill(block)); engine.block.setFill(block, imageFill); /* The following line would also destroy imageFill */ // engine.block.destroy(circle); ``` ## Duplicating Fills If we duplicate a design block with a fill that is only attached to this block, the fill will automatically be duplicated as well. In order to modify the properties of the duplicate fill, we have to query its id from the duplicate block. ```javascript const duplicateBlock = engine.block.duplicate(block); engine.block.setPositionX(duplicateBlock, 450); const autoDuplicateFill = engine.block.getFill(duplicateBlock); engine.block.setString( autoDuplicateFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); // const manualDuplicateFill = engine.block.duplicate(autoDuplicateFill); // /* We could now assign this fill to another block. */ // engine.block.destroy(manualDuplicateFill); ``` ## Sharing Fills It is also possible to share a single fill instance between multiple design blocks. In that case, changing the properties of the fill will apply to all of the blocks that it's attached to at once. Destroying a block with a shared fill will not destroy the fill until there are no other design blocks left that still use that fill. ```javascript const sharedFillBlock = engine.block.create('graphic'); engine.block.setShape(sharedFillBlock, engine.block.createShape('rect')); engine.block.setPositionX(sharedFillBlock, 350); engine.block.setPositionY(sharedFillBlock, 400); engine.block.setWidth(sharedFillBlock, 100); engine.block.setHeight(sharedFillBlock, 100); engine.block.appendChild(page, sharedFillBlock); engine.block.setFill(sharedFillBlock, engine.block.getFill(block)); ``` --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Fills" description: "Learn how to apply video content as fills to design elements in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/fills/video-ec7f9f/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) > [Video](https://img.ly/docs/cesdk/sveltekit/fills/video-ec7f9f/) --- Apply motion content to design elements by filling shapes, backgrounds, and text with videos using CE.SDK's video fill system.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-video-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-video-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-video-browser/) Understanding the distinction between **video fills** and **video blocks** is essential. Video fills are fill objects that can be applied to any block supporting fills—shapes, text, backgrounds—to paint them with video content. Video blocks, created with `addVideo()`, are dedicated time-based blocks with full editing capabilities like trimming and duration control. Video fills focus on applying video as a visual treatment, while video blocks provide complete video editing functionality. ```typescript file=@cesdk_web_examples/guides-fills-video-browser/browser.ts reference-only import type { CreativeEngine, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Video Fills Guide * * Demonstrates video fills in CE.SDK: * - Creating video fills * - Setting video sources (single URI and source sets) * - Applying video fills to blocks * - Content fill modes (Cover, Contain) * - Loading video resources * - Getting video thumbnails * - Different use cases (backgrounds, shapes, text) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine as CreativeEngine; const pages = engine.block.findByType('page'); const page = pages.length > 0 ? pages[0] : engine.scene.get(); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 8); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample video URL from demo assets const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4'; // Create a sample block to demonstrate fill support checking const sampleBlock = engine.block.create('graphic'); engine.block.setShape(sampleBlock, engine.block.createShape('rect')); // Check if the block supports fills const supportsFills = engine.block.supportsFill(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports fills:', supportsFills); // true for graphic blocks // Pattern #1: Demonstrate Individual Before Combined // Create a basic video fill demonstration const basicBlock = engine.block.create('graphic'); engine.block.setShape(basicBlock, engine.block.createShape('rect')); engine.block.setWidth(basicBlock, blockWidth); engine.block.setHeight(basicBlock, blockHeight); engine.block.appendChild(page, basicBlock); // Create a video fill const basicVideoFill = engine.block.createFill('video'); // or using full type name: engine.block.createFill('//ly.img.ubq/fill/video'); // Set the video source URI engine.block.setString(basicVideoFill, 'fill/video/fileURI', videoUri); // Apply the fill to the block engine.block.setFill(basicBlock, basicVideoFill); // Get and verify the current fill const fillId = engine.block.getFill(basicBlock); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/video' // Pattern #2: Content fill mode - Cover // Cover mode fills entire block, may crop video to fit const coverBlock = engine.block.create('graphic'); engine.block.setShape(coverBlock, engine.block.createShape('rect')); engine.block.setWidth(coverBlock, blockWidth); engine.block.setHeight(coverBlock, blockHeight); engine.block.appendChild(page, coverBlock); const coverVideoFill = engine.block.createFill('video'); engine.block.setString(coverVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(coverBlock, coverVideoFill); // Set content fill mode to Cover engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Get current fill mode const coverMode = engine.block.getEnum(coverBlock, 'contentFill/mode'); // eslint-disable-next-line no-console console.log('Cover block fill mode:', coverMode); // 'Cover' // Content fill mode - Contain // Contain mode fits entire video, may leave empty space const containBlock = engine.block.create('graphic'); engine.block.setShape(containBlock, engine.block.createShape('rect')); engine.block.setWidth(containBlock, blockWidth); engine.block.setHeight(containBlock, blockHeight); engine.block.appendChild(page, containBlock); const containVideoFill = engine.block.createFill('video'); engine.block.setString(containVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(containBlock, containVideoFill); // Set content fill mode to Contain engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); // Force load video resource to access metadata const resourceBlock = engine.block.create('graphic'); engine.block.setShape(resourceBlock, engine.block.createShape('rect')); engine.block.setWidth(resourceBlock, blockWidth); engine.block.setHeight(resourceBlock, blockHeight); engine.block.appendChild(page, resourceBlock); const resourceVideoFill = engine.block.createFill('video'); engine.block.setString(resourceVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(resourceBlock, resourceVideoFill); // Force load the video resource before accessing metadata await engine.block.forceLoadAVResource(resourceVideoFill); // Now we can access video metadata const totalDuration = engine.block.getDouble( resourceVideoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Video total duration:', totalDuration, 'seconds'); // Use case: Video as shape fill - Ellipse const ellipseBlock = engine.block.create('graphic'); const ellipseShape = engine.block.createShape('//ly.img.ubq/shape/ellipse'); engine.block.setShape(ellipseBlock, ellipseShape); engine.block.setWidth(ellipseBlock, blockWidth); engine.block.setHeight(ellipseBlock, blockHeight); engine.block.appendChild(page, ellipseBlock); const ellipseVideoFill = engine.block.createFill('video'); engine.block.setString(ellipseVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(ellipseBlock, ellipseVideoFill); // Advanced: Video fill with opacity const opacityBlock = engine.block.create('graphic'); engine.block.setShape(opacityBlock, engine.block.createShape('rect')); engine.block.setWidth(opacityBlock, blockWidth); engine.block.setHeight(opacityBlock, blockHeight); engine.block.appendChild(page, opacityBlock); const opacityVideoFill = engine.block.createFill('video'); engine.block.setString(opacityVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(opacityBlock, opacityVideoFill); // Set block opacity to 70% engine.block.setFloat(opacityBlock, 'opacity', 0.7); // Advanced: Share one video fill between multiple blocks const sharedFill = engine.block.createFill('video'); engine.block.setString(sharedFill, 'fill/video/fileURI', videoUri); // First block using shared fill const sharedBlock1 = engine.block.create('graphic'); engine.block.setShape(sharedBlock1, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock1, blockWidth); engine.block.setHeight(sharedBlock1, blockHeight); engine.block.appendChild(page, sharedBlock1); engine.block.setFill(sharedBlock1, sharedFill); // Second block using the same shared fill const sharedBlock2 = engine.block.create('graphic'); engine.block.setShape(sharedBlock2, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock2, blockWidth * 0.8); // Slightly smaller engine.block.setHeight(sharedBlock2, blockHeight * 0.8); engine.block.appendChild(page, sharedBlock2); engine.block.setFill(sharedBlock2, sharedFill); // eslint-disable-next-line no-console console.log( 'Shared fill - Two blocks using the same video fill instance for memory efficiency' ); // ===== Position all blocks in grid layout ===== const blocks = [ basicBlock, // Position 0 coverBlock, // Position 1 containBlock, // Position 2 resourceBlock, // Position 3 ellipseBlock, // Position 4 opacityBlock, // Position 5 sharedBlock1, // Position 6 sharedBlock2 // Position 7 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select the first block so users can see the fill in action engine.block.setSelected(basicBlock, true); // Set playback time to 2 seconds to show video content engine.block.setPlaybackTime(page, 2); // Start playback automatically try { engine.block.setPlaying(page, true); // eslint-disable-next-line no-console console.log( 'Video fills guide initialized. Playback started. Demonstrating various video fill techniques across the grid.' ); } catch (error) { // eslint-disable-next-line no-console console.log( 'Video fills guide initialized. Click play to start video playback (browser autoplay restriction).' ); } } } export default Example; ``` This guide covers how to create video fills, apply them to blocks, configure fill modes, and work with video resources programmatically. ## Understanding Video Fills ### What is a Video Fill? A video fill is a fill object that paints a design block with video content. Like color and image fills, video fills are part of CE.SDK's broader fill system. Video fills are identified by the type `'//ly.img.ubq/fill/video'` or the short form `'video'`. They contain properties for the video source, positioning, scaling, and playback behavior. ### Video Fill vs Video Blocks **Video fills** are fill objects created with `createFill('video')` and applied to blocks with `setFill()`. You can use them to fill shapes with video content, create video backgrounds, or add video textures to text. **Video blocks** are created with the convenience method `addVideo()` and come pre-configured with time-based properties including trim support, duration, and playback time. Use video blocks when you need features like trimming, duration adjustment, and precise playback control. For this guide, we focus on video fills—applying video content as a fill to design elements. For video editing workflows, see the [Trim Video guide](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/). ## Checking Video Fill Support Before applying video fills, verify that blocks support fills. ```typescript highlight-check-fill-support // Create a sample block to demonstrate fill support checking const sampleBlock = engine.block.create('graphic'); engine.block.setShape(sampleBlock, engine.block.createShape('rect')); // Check if the block supports fills const supportsFills = engine.block.supportsFill(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports fills:', supportsFills); // true for graphic blocks ``` Graphic blocks, shapes, and text blocks typically support fills. Pages and scenes don't. Always check `supportsFill()` before attempting to apply video fills to prevent errors. ## Creating Video Fills ### Creating Video Fills Creating a video fill involves three steps: create the fill object, set the video source, and apply it to a block. ```typescript highlight-create-video-fill // Pattern #1: Demonstrate Individual Before Combined // Create a basic video fill demonstration const basicBlock = engine.block.create('graphic'); engine.block.setShape(basicBlock, engine.block.createShape('rect')); engine.block.setWidth(basicBlock, blockWidth); engine.block.setHeight(basicBlock, blockHeight); engine.block.appendChild(page, basicBlock); // Create a video fill const basicVideoFill = engine.block.createFill('video'); // or using full type name: engine.block.createFill('//ly.img.ubq/fill/video'); // Set the video source URI engine.block.setString(basicVideoFill, 'fill/video/fileURI', videoUri); // Apply the fill to the block engine.block.setFill(basicBlock, basicVideoFill); ``` The video fill exists independently until you attach it to a block. This allows you to configure the fill completely before applying it. Once applied, the fill paints the block with the video content. ### Getting Current Fill Information We can retrieve the current fill from a block and inspect its type to verify it's a video fill. ```typescript highlight-get-current-fill // Get and verify the current fill const fillId = engine.block.getFill(basicBlock); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/video' ``` This is useful when building UIs that need to adapt based on the current fill type or when implementing undo/redo functionality that tracks fill changes. ## Content Fill Modes Content fill modes control how video scales and positions within blocks. The two primary modes are Cover and Contain, each suited to different use cases. ### Cover Mode Cover mode fills the entire block with video while maintaining the video's aspect ratio. If the aspect ratios don't match, CE.SDK crops portions of the video to ensure no empty space appears in the block. ```typescript highlight-fill-mode-cover // Pattern #2: Content fill mode - Cover // Cover mode fills entire block, may crop video to fit const coverBlock = engine.block.create('graphic'); engine.block.setShape(coverBlock, engine.block.createShape('rect')); engine.block.setWidth(coverBlock, blockWidth); engine.block.setHeight(coverBlock, blockHeight); engine.block.appendChild(page, coverBlock); const coverVideoFill = engine.block.createFill('video'); engine.block.setString(coverVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(coverBlock, coverVideoFill); // Set content fill mode to Cover engine.block.setEnum(coverBlock, 'contentFill/mode', 'Cover'); // Get current fill mode const coverMode = engine.block.getEnum(coverBlock, 'contentFill/mode'); // eslint-disable-next-line no-console console.log('Cover block fill mode:', coverMode); // 'Cover' ``` Use Cover mode for background videos, full-frame video content, and situations where visual consistency matters more than showing the entire video. It guarantees no empty space but may crop content. ### Contain Mode Contain mode fits the entire video within the block while maintaining aspect ratio. If aspect ratios don't match, CE.SDK adds empty space to preserve the full video visibility. ```typescript highlight-fill-mode-contain // Content fill mode - Contain // Contain mode fits entire video, may leave empty space const containBlock = engine.block.create('graphic'); engine.block.setShape(containBlock, engine.block.createShape('rect')); engine.block.setWidth(containBlock, blockWidth); engine.block.setHeight(containBlock, blockHeight); engine.block.appendChild(page, containBlock); const containVideoFill = engine.block.createFill('video'); engine.block.setString(containVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(containBlock, containVideoFill); // Set content fill mode to Contain engine.block.setEnum(containBlock, 'contentFill/mode', 'Contain'); ``` Use Contain mode when the entire video must remain visible—presentations, product demos, or content where cropping would lose important information. Empty space is acceptable to preserve complete visibility. ## Loading Video Resources Before accessing video metadata like duration or dimensions, you must force load the video resource. This ensures CE.SDK has downloaded the necessary information. ```typescript highlight-force-load-resource // Force load video resource to access metadata const resourceBlock = engine.block.create('graphic'); engine.block.setShape(resourceBlock, engine.block.createShape('rect')); engine.block.setWidth(resourceBlock, blockWidth); engine.block.setHeight(resourceBlock, blockHeight); engine.block.appendChild(page, resourceBlock); const resourceVideoFill = engine.block.createFill('video'); engine.block.setString(resourceVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(resourceBlock, resourceVideoFill); // Force load the video resource before accessing metadata await engine.block.forceLoadAVResource(resourceVideoFill); // Now we can access video metadata const totalDuration = engine.block.getDouble( resourceVideoFill, 'fill/video/totalDuration' ); // eslint-disable-next-line no-console console.log('Video total duration:', totalDuration, 'seconds'); ``` Skipping this step causes errors when trying to access metadata. Videos load asynchronously, so `forceLoadAVResource` ensures the metadata is available before you query it. Once loaded, you can access properties like `fill/video/totalDuration` to get the video length in seconds. This information helps you build UI previews or validate user input. ## Common Use Cases ### Video as Shape Fill Video fills aren't limited to rectangles. You can fill any shape with video content. ```typescript highlight-video-shape-fill // Use case: Video as shape fill - Ellipse const ellipseBlock = engine.block.create('graphic'); const ellipseShape = engine.block.createShape('//ly.img.ubq/shape/ellipse'); engine.block.setShape(ellipseBlock, ellipseShape); engine.block.setWidth(ellipseBlock, blockWidth); engine.block.setHeight(ellipseBlock, blockHeight); engine.block.appendChild(page, ellipseBlock); const ellipseVideoFill = engine.block.createFill('video'); engine.block.setString(ellipseVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(ellipseBlock, ellipseVideoFill); ``` Ellipse shapes, polygons, stars, and custom paths all support video fills. The video content fills the shape boundary, masking the video. ### Video with Opacity Control the transparency of video-filled blocks to create overlay effects or blend video content with backgrounds. ```typescript highlight-opacity // Advanced: Video fill with opacity const opacityBlock = engine.block.create('graphic'); engine.block.setShape(opacityBlock, engine.block.createShape('rect')); engine.block.setWidth(opacityBlock, blockWidth); engine.block.setHeight(opacityBlock, blockHeight); engine.block.appendChild(page, opacityBlock); const opacityVideoFill = engine.block.createFill('video'); engine.block.setString(opacityVideoFill, 'fill/video/fileURI', videoUri); engine.block.setFill(opacityBlock, opacityVideoFill); // Set block opacity to 70% engine.block.setFloat(opacityBlock, 'opacity', 0.7); ``` Opacity affects the entire block, including its video fill. This technique creates semi-transparent video overlays, watermarks, or layered compositions where video content blends with other elements. ## Additional Techniques ### Sharing Video Fills Memory efficiency improves when multiple blocks share a single video fill instance. Changes to the shared fill affect all blocks using it. ```typescript highlight-shared-fill // Advanced: Share one video fill between multiple blocks const sharedFill = engine.block.createFill('video'); engine.block.setString(sharedFill, 'fill/video/fileURI', videoUri); // First block using shared fill const sharedBlock1 = engine.block.create('graphic'); engine.block.setShape(sharedBlock1, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock1, blockWidth); engine.block.setHeight(sharedBlock1, blockHeight); engine.block.appendChild(page, sharedBlock1); engine.block.setFill(sharedBlock1, sharedFill); // Second block using the same shared fill const sharedBlock2 = engine.block.create('graphic'); engine.block.setShape(sharedBlock2, engine.block.createShape('rect')); engine.block.setWidth(sharedBlock2, blockWidth * 0.8); // Slightly smaller engine.block.setHeight(sharedBlock2, blockHeight * 0.8); engine.block.appendChild(page, sharedBlock2); engine.block.setFill(sharedBlock2, sharedFill); // eslint-disable-next-line no-console console.log( 'Shared fill - Two blocks using the same video fill instance for memory efficiency' ); ``` This pattern reduces memory usage when the same video appears multiple times in a composition. It's particularly useful for repeated elements like watermarks or background patterns. Shared fills play back synchronized—all blocks display the same frame at the same time during playback. This ensures visual consistency across multiple elements. ## Troubleshooting ### Video Not Visible If your video fill doesn't appear, check several common causes. Verify the fill is enabled with `isFillEnabled(block)`. Ensure the video URL is accessible—CORS restrictions on web platforms can block video loading. Confirm the block has valid dimensions (width and height greater than zero) and exists in the scene hierarchy. Check that the video format is supported on your platform. MP4 with H.264 encoding works reliably across platforms, while other codecs may have limited support. ### Cannot Create Video Fill If creating a video fill throws an error, verify the block supports fills using `engine.block.supportsFill(block)` and that the block is part of a valid scene hierarchy. ### Video Not Loading When videos fail to load, verify network connectivity for remote URLs. Check CORS headers—web browsers enforce cross-origin restrictions that can block video access. Validate the URI format uses `https://` for remote videos or appropriate schemes for local files. Test with a known working video URL to isolate whether the issue is with your specific video or a broader configuration problem. Check the browser console for detailed error messages. ### Memory Leaks Always destroy replaced fills to prevent memory leaks. When changing a block's fill, retrieve the old fill with `getFill()`, assign the new fill with `setFill()`, then destroy the old fill with `destroy()`. Don't create fills without attaching them to blocks—unattached fills remain in memory indefinitely. Clean up shared fills when no blocks reference them anymore. ### Performance Issues Video playback is resource-intensive. Use appropriately sized videos—avoid massive files that strain decoding hardware. Consider lower resolutions for editing with high-resolution sources reserved for export. Limit the number of simultaneously playing videos, especially on mobile devices. Too many concurrent video decodes overwhelm device capabilities. Compress videos before use to reduce file sizes and improve loading times. ## API Reference | Method | Description | | ----------------------------------------- | -------------------------------- | | `createFill('video')` | Create a new video fill object | | `setFill(block, fill)` | Assign fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setString(fill, property, value)` | Set video URI property | | `getString(fill, property)` | Get current video URI | | `setSourceSet(fill, property, sources)` | Set responsive video sources | | `getSourceSet(fill, property)` | Get current source set | | `setEnum(block, property, value)` | Set content fill mode | | `getEnum(block, property)` | Get current fill mode | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | | `forceLoadAVResource(fill)` | Force load video metadata | | `getVideoFillThumbnail(fill, height)` | Get single thumbnail frame | | `adjustCropToFillFrame(block, fillIndex)` | Adjust crop to fill frame | ### Video Fill Properties | Property | Type | Description | | -------------------------- | ----------- | ------------------------------------------- | | `fill/video/fileURI` | String | Single video URI (URL, data URI, file path) | | `fill/video/sourceSet` | SourceSet\[] | Array of responsive video sources | | `fill/video/totalDuration` | Double | Total duration of video in seconds | ### Content Fill Properties | Property | Type | Values | Description | | ------------------ | ---- | ------------------ | ----------------------------- | | `contentFill/mode` | Enum | 'Cover', 'Contain' | How video scales within block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Filters and Effects" description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) --- --- ## Related Pages - [Filters & Effects Library](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/overview-299b15/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying. - [Supported Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/support-a666dd/) - View the full list of visual effects and filters available in CE.SDK, including both built-in and custom options. - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Apply filters and effects to design elements to enhance images and create visual transformations. - [Create Custom Filters](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-filters-c796ba/) - Extend CE.SDK with custom LUT filter asset sources for brand-specific color grading and filter collections. - [Chroma Key (Green Screen)](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/chroma-key-green-screen-1e3e99/) - Apply the green screen effect to images and videos, replacing specific colors with transparency for compositing workflows. - [Blur Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) - Apply blur effects to design elements to create depth, focus attention, or soften backgrounds. - [Create a Custom LUT Filter](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-lut-filter-6e3f49/) - Create and apply custom LUT filters to achieve consistent, brand-aligned visual styles. - [Distortion Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/distortion-5b5a66/) - Apply distortion effects to warp, shift, and transform design elements for dynamic artistic visuals in CE.SDK. - [Duotone](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/duotone-831fc5/) - Apply duotone effects to images, mapping tones to two colors for stylized visuals, vintage aesthetics, or brand-specific treatments. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Apply Filters and Effects" description: "Apply filters and effects to design elements to enhance images and create visual transformations." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Apply Filter or Effect](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) --- Apply professional color grading, blur effects, and artistic treatments to design elements using CE.SDK's visual effects system.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-apply-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-apply-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-apply-browser/) While CE.SDK uses a unified effect API for both filters and effects, they serve different purposes. **Filters** typically apply color transformations like LUT filters and duotone, while **effects** apply visual modifications such as blur, pixelize, vignette, and image adjustments. You can combine multiple effects on a single element, creating complex visual treatments by stacking them in a customizable order. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-apply-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout, hexToRgba } from './utils'; /** * CE.SDK Plugin: Filters and Effects Guide * * Demonstrates applying various filters and effects to image blocks: * - Checking effect support * - Applying basic effects (blur) * - Configuring effect parameters (adjustments) * - Applying LUT filters * - Combining multiple effects * - Managing effect stacks */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects and filters in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects cesdk.feature.enable('ly.img.filter'); // Enable all filters cesdk.feature.enable('ly.img.blur'); // Enable blur effect cesdk.feature.enable('ly.img.adjustment'); // Enable adjustments // Calculate responsive grid layout based on page dimensions const layout = calculateGridLayout(pageWidth, pageHeight, 9); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample image URL (this will load from demo assets) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Query available LUT and Duotone filters from asset sources // These filters are provided by the demo asset sources loaded above const lutResults = await engine.asset.findAssets('ly.img.filter', { page: 0, perPage: 10 }); const duotoneResults = await engine.asset.findAssets('ly.img.filter', { page: 0, perPage: 10 }); const lutAssets = lutResults.assets; const duotoneAssets = duotoneResults.assets; // Pattern #2: Use Convenience APIs - addImage() simplifies block creation // Create a sample block to demonstrate effect support checking const blockSize = { width: blockWidth, height: blockHeight }; const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects const supportsEffects = engine.block.supportsEffects(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports effects:', supportsEffects); // true for graphics // Page blocks don't support effects const pageSupportsEffects = engine.block.supportsEffects(page); // eslint-disable-next-line no-console console.log('Page supports effects:', pageSupportsEffects); // false // Select this block so effects panel is visible engine.block.setSelected(sampleBlock, true); // Pattern #1: Demonstrate Individual Before Combined // Create a separate image block for blur demonstration const blurImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, blurImageBlock); // Create and apply a blur effect const blurEffect = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(blurImageBlock, blurEffect); // Adjust blur intensity engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5); // Create a separate image block for adjustments demonstration const adjustmentsImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, adjustmentsImageBlock); // Create adjustments effect for brightness and contrast const adjustmentsEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect); // Find all available properties for this effect const adjustmentProperties = engine.block.findAllProperties(adjustmentsEffect); // eslint-disable-next-line no-console console.log('Available adjustment properties:', adjustmentProperties); // Set brightness, contrast, and saturation engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.15 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.1 ); // Demonstrate LUT filters by applying the first 2 from asset library // These filters are fetched from the demo asset sources (Grid positions 3-4) const lutImageBlocks = []; for (let i = 0; i < Math.min(2, lutAssets.length); i++) { const lutAsset = lutAssets[i]; const lutImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, lutImageBlock); lutImageBlocks.push(lutImageBlock); // Create LUT filter effect using the full effect type URI const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Use asset metadata for LUT configuration // The asset provides the LUT file URI and grid dimensions engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', lutAsset.meta?.uri as string ); engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(lutAsset.meta?.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(lutAsset.meta?.verticalTileCount as string, 10) ); engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); engine.block.appendEffect(lutImageBlock, lutEffect); } // Demonstrate Duotone filters by applying the first 2 from asset library // Duotone filters create artistic two-color treatments (Grid positions 5-6) const duotoneImageBlocks = []; for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) { const duotoneAsset = duotoneAssets[i]; const duotoneImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, duotoneImageBlock); duotoneImageBlocks.push(duotoneImageBlock); // Create Duotone filter effect using the full effect type URI const duotoneEffect = engine.block.createEffect( '//ly.img.ubq/effect/duotone_filter' ); // Convert hex colors from asset metadata to RGBA (0-1 range) const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', darkColor ); const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', lightColor ); engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); engine.block.appendEffect(duotoneImageBlock, duotoneEffect); } // Pattern #5: Progressive Complexity - now combining multiple effects // Create a separate image block to demonstrate combining multiple effects (Grid position 7) const combinedImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, combinedImageBlock); // Apply effects in order - the stack will contain: // 1. adjustments (brightness/contrast) - applied first // 2. blur - applied second // 3. duotone (color tinting) - applied third // 4. pixelize - applied last const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(combinedImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.15 ); const combinedBlur = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(combinedImageBlock, combinedBlur); engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3); const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.appendEffect(combinedImageBlock, combinedDuotone); engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', { r: 0.1, g: 0.2, b: 0.4, a: 1.0 }); engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', { r: 0.9, g: 0.8, b: 0.6, a: 1.0 }); engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6); const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(combinedImageBlock, pixelizeEffect); engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8); engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8); // Get all effects applied to the combined block const effects = engine.block.getEffects(combinedImageBlock); // eslint-disable-next-line no-console console.log('Applied effects:', effects); // Access properties of specific effects effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); const isEnabled = engine.block.isEffectEnabled(effect); // eslint-disable-next-line no-console console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`); }); // Check if effect is enabled const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur); // eslint-disable-next-line no-console console.log('Blur effect is enabled:', isBlurEnabled); // Create a temporary block to demonstrate effect removal const tempBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tempBlock); const tempEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12); // Remove the effect const tempEffects = engine.block.getEffects(tempBlock); const effectIndex = tempEffects.indexOf(tempEffect); if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex); } // Destroy the removed effect to free memory engine.block.destroy(tempEffect); // ===== Position all blocks in grid layout ===== const blocks = [ sampleBlock, // Position 0 blurImageBlock, // Position 1 adjustmentsImageBlock, // Position 2 ...lutImageBlocks, // Positions 3-4 ...duotoneImageBlocks, // Positions 5-6 combinedImageBlock, // Position 7 tempBlock // Position 8 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Apply same effects to multiple blocks const allGraphics = engine.block.findByType('graphic'); allGraphics.forEach((graphic) => { if (engine.block.supportsEffects(graphic)) { // Only apply to blocks that don't already have effects const existingEffects = engine.block.getEffects(graphic); if (existingEffects.length === 0) { const effect = engine.block.createEffect('adjustments'); engine.block.appendEffect(graphic, effect); engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1); } } }); // eslint-disable-next-line no-console console.log( 'Effects guide initialized. Select any image to see effects panel.' ); } } export default Example; ``` This guide covers how to enable the built-in effects panel for interactive editing and how to apply and manage effects programmatically using the block API. ## Using the Built-in Effects UI ### Enable Effects Features To give users access to effects in the inspector panel, we enable the effects features using CE.SDK's Feature API. Effects and filters appear in the **inspector bar** and **advanced inspector** when a user selects a supported element. ```typescript highlight-enable-effects-features // Enable effects and filters in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Enable all effects cesdk.feature.enable('ly.img.filter'); // Enable all filters cesdk.feature.enable('ly.img.blur'); // Enable blur effect cesdk.feature.enable('ly.img.adjustment'); // Enable adjustments ``` The Feature API controls which capabilities are available to users. By enabling `ly.img.effect` and `ly.img.filter`, the inspector panel displays effect and filter options when users select compatible blocks. You can also enable specific effects individually like `ly.img.blur` or `ly.img.adjustment` for more granular control. Effects are enabled by default for graphic blocks with image or video fills. The Feature API shown above allows you to control which specific effects appear in the inspector panel UI. ### User Workflow With effects features enabled, users can enhance their designs through a visual workflow in the inspector panel: 1. **Select an element** - Click on any image or supported graphic block in the canvas 2. **Access inspector** - The inspector panel shows available options for the selected element 3. **Find effects section** - Scroll to the effects and filters sections within the inspector 4. **Browse and apply** - Click through available effects to apply them 5. **Adjust parameters** - Use sliders and controls to fine-tune intensity and other effect properties 6. **Manage effects** - Toggle effects on/off, switch between effects, or reset effect parameters > **Note:** Effects are applied immediately when selected. CE.SDK does not currently > support live preview mode when browsing effects before application. Effect > reordering is not supported—use toggle on/off, switch, or reset operations to > manage applied effects. This interactive approach is perfect for creative exploration and allows users to see results immediately without any coding knowledge. ## Programmatic Effect Application ### Initialize CE.SDK For applications that need to apply effects programmatically—whether for automation, batch processing, or dynamic user experiences—we start by setting up CE.SDK with the proper configuration. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); ``` This initializes the full CE.SDK interface with the effects panel enabled, giving you both UI and API access to the effects system. ### Check Effect Support Before applying effects to a block, we check whether it supports them. Not all block types can have effects applied—for example, page blocks and scene blocks do not support effects. ```typescript highlight-check-effect-support // Pattern #2: Use Convenience APIs - addImage() simplifies block creation // Create a sample block to demonstrate effect support checking const blockSize = { width: blockWidth, height: blockHeight }; const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects const supportsEffects = engine.block.supportsEffects(sampleBlock); // eslint-disable-next-line no-console console.log('Block supports effects:', supportsEffects); // true for graphics // Page blocks don't support effects const pageSupportsEffects = engine.block.supportsEffects(page); // eslint-disable-next-line no-console console.log('Page supports effects:', pageSupportsEffects); // false // Select this block so effects panel is visible engine.block.setSelected(sampleBlock, true); ``` Effect support is available for: - **Graphic blocks** with image fills - **Graphic blocks** with video fills (with performance considerations) - **Shape blocks** with fills - **Text blocks** (with limited effect types) - **Page blocks** (particularly when they have fills applied, such as background fills) Always verify support before creating and applying effects to avoid errors and ensure a smooth user experience. ### Apply Basic Effects Once we've confirmed a block supports effects, we can create and apply effects using the effect API. Here we create a separate image block using the convenience `addImage()` API and apply a blur effect to it. > **Tip:** The example code uses the `engine.block.addImage()` convenience API throughout > this guide. This built-in helper simplifies image block creation compared to > manually constructing graphic blocks with image fills, and provides additional > configuration options like positioning, sizing, corner radius, shadows, and > time-based properties. ```typescript highlight-apply-basic-effects // Pattern #1: Demonstrate Individual Before Combined // Create a separate image block for blur demonstration const blurImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, blurImageBlock); // Create and apply a blur effect const blurEffect = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(blurImageBlock, blurEffect); // Adjust blur intensity engine.block.setFloat(blurEffect, 'effect/extrude_blur/amount', 0.5); ``` CE.SDK provides several built-in effect types: - `extrude_blur` - Gaussian blur with configurable intensity - `adjustments` - Brightness, contrast, saturation, exposure - `pixelize` - Pixelation effect - `vignette` - Darkened corners - `half_tone` - Halftone pattern - `lut_filter` - Color grading with LUT files - `duotone` - Two-color tinting > **Note:** `extrude_blur` is the only blur available as an effect. CE.SDK also provides > additional blur types in a separate blur category. Each effect type has its own set of configurable properties that control its visual appearance. ### Configure Effect Parameters After creating an effect, we can customize its appearance by setting properties. Each effect exposes different parameters depending on its type and capabilities. ```typescript highlight-configure-effect-parameters // Create a separate image block for adjustments demonstration const adjustmentsImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, adjustmentsImageBlock); // Create adjustments effect for brightness and contrast const adjustmentsEffect = engine.block.createEffect('adjustments'); engine.block.appendEffect(adjustmentsImageBlock, adjustmentsEffect); // Find all available properties for this effect const adjustmentProperties = engine.block.findAllProperties(adjustmentsEffect); // eslint-disable-next-line no-console console.log('Available adjustment properties:', adjustmentProperties); // Set brightness, contrast, and saturation engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/contrast', 0.15 ); engine.block.setFloat( adjustmentsEffect, 'effect/adjustments/saturation', 0.1 ); ``` CE.SDK provides typed setter methods for different parameter types: - **`setFloat()`** - For intensity, amount, and radius values (typically 0.0 to 1.0) - **`setInt()`** - For discrete values like pixel sizes - **`setString()`** - For file URIs (LUT files, image references) - **`setBool()`** - For enabling or disabling specific features Using the correct setter method ensures type safety and proper value validation. ### Apply LUT Filters LUT (Look-Up Table) filters apply professional color grading by transforming colors through a predefined mapping. These are particularly useful for creating consistent brand aesthetics or applying cinematic color treatments. The example demonstrates querying LUT filters from the asset library using `engine.asset.findAssets('ly.img.filter')`, then applying them using metadata from the asset results. This approach matches how CE.SDK's built-in filter panel works. ```typescript highlight-apply-lut-filter // Demonstrate LUT filters by applying the first 2 from asset library // These filters are fetched from the demo asset sources (Grid positions 3-4) const lutImageBlocks = []; for (let i = 0; i < Math.min(2, lutAssets.length); i++) { const lutAsset = lutAssets[i]; const lutImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, lutImageBlock); lutImageBlocks.push(lutImageBlock); // Create LUT filter effect using the full effect type URI const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Use asset metadata for LUT configuration // The asset provides the LUT file URI and grid dimensions engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', lutAsset.meta?.uri as string ); engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(lutAsset.meta?.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(lutAsset.meta?.verticalTileCount as string, 10) ); engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); engine.block.appendEffect(lutImageBlock, lutEffect); } ``` LUT filters are ideal for: - Creating consistent brand aesthetics across all designs - Applying cinematic or film-style color grading - Matching reference images or maintaining color continuity - Building curated filter collections for users **Asset metadata structure**: Each LUT asset provides `uri` (the LUT file URL), `horizontalTileCount`, and `verticalTileCount` describing the grid layout of color transformation cubes. ### Apply Duotone Filters Duotone filters create artistic two-color effects by mapping image tones to two colors (dark and light). This effect is popular for creating stylized visuals, vintage aesthetics, or brand-specific color treatments. The example queries duotone filters from the asset library, then applies them using color metadata. The `hexToRgba` utility converts hex color values from asset metadata to RGBA format required by the `setColorRGBA` API. ```typescript highlight-apply-duotone-filter // Demonstrate Duotone filters by applying the first 2 from asset library // Duotone filters create artistic two-color treatments (Grid positions 5-6) const duotoneImageBlocks = []; for (let i = 0; i < Math.min(2, duotoneAssets.length); i++) { const duotoneAsset = duotoneAssets[i]; const duotoneImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, duotoneImageBlock); duotoneImageBlocks.push(duotoneImageBlock); // Create Duotone filter effect using the full effect type URI const duotoneEffect = engine.block.createEffect( '//ly.img.ubq/effect/duotone_filter' ); // Convert hex colors from asset metadata to RGBA (0-1 range) const darkColor = hexToRgba(duotoneAsset.meta?.darkColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', darkColor ); const lightColor = hexToRgba(duotoneAsset.meta?.lightColor as string); engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', lightColor ); engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); engine.block.appendEffect(duotoneImageBlock, duotoneEffect); } ``` Duotone filters work by: - Mapping darker image tones to the **dark color** - Mapping lighter image tones to the **light color** - Blending between the two colors based on pixel brightness - Adjusting intensity to control the effect strength (0.0 to 1.0) **Asset metadata structure**: Each duotone asset provides `darkColor` and `lightColor` as hex strings (e.g., `"#1a2b3c"`) which must be converted to RGBA values for the effect API. ### Combine Multiple Effects One of the most powerful features of CE.SDK's effect system is the ability to stack multiple effects on a single block. Each effect is applied sequentially, allowing you to build complex visual treatments. > **Note:** The example code demonstrates each effect type individually on separate image > blocks before showing them combined. This educational approach helps you > understand what each effect does before seeing them work together. In your > production code, you can apply multiple effects directly to the same block > without this separation. ```typescript highlight-combine-multiple-effects // Pattern #5: Progressive Complexity - now combining multiple effects // Create a separate image block to demonstrate combining multiple effects (Grid position 7) const combinedImageBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, combinedImageBlock); // Apply effects in order - the stack will contain: // 1. adjustments (brightness/contrast) - applied first // 2. blur - applied second // 3. duotone (color tinting) - applied third // 4. pixelize - applied last const combinedAdjustments = engine.block.createEffect('adjustments'); engine.block.appendEffect(combinedImageBlock, combinedAdjustments); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/brightness', 0.2 ); engine.block.setFloat( combinedAdjustments, 'effect/adjustments/contrast', 0.15 ); const combinedBlur = engine.block.createEffect('extrude_blur'); engine.block.appendEffect(combinedImageBlock, combinedBlur); engine.block.setFloat(combinedBlur, 'effect/extrude_blur/amount', 0.3); const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.appendEffect(combinedImageBlock, combinedDuotone); engine.block.setColor(combinedDuotone, 'duotone_filter/darkColor', { r: 0.1, g: 0.2, b: 0.4, a: 1.0 }); engine.block.setColor(combinedDuotone, 'duotone_filter/lightColor', { r: 0.9, g: 0.8, b: 0.6, a: 1.0 }); engine.block.setFloat(combinedDuotone, 'duotone_filter/intensity', 0.6); const pixelizeEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(combinedImageBlock, pixelizeEffect); engine.block.setInt(pixelizeEffect, 'pixelize/horizontalPixelSize', 8); engine.block.setInt(pixelizeEffect, 'pixelize/verticalPixelSize', 8); ``` **Effect ordering matters**: Effects are applied from the bottom of the stack to the top. In this example: 1. First, we adjust brightness and contrast 2. Then, we apply blur 3. Then, we apply color grading with a LUT filter 4. Finally, we add stylization with pixelization Experiment with different orderings to achieve the desired visual result—changing the order can significantly impact the final appearance. ## Managing Applied Effects ### List and Access Effects We can retrieve all effects applied to a block and inspect their properties. This is useful for building effect management interfaces or debugging effect configurations. ```typescript highlight-list-effects // Get all effects applied to the combined block const effects = engine.block.getEffects(combinedImageBlock); // eslint-disable-next-line no-console console.log('Applied effects:', effects); // Access properties of specific effects effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); const isEnabled = engine.block.isEffectEnabled(effect); // eslint-disable-next-line no-console console.log(`Effect ${index}: ${effectType}, enabled: ${isEnabled}`); }); ``` This allows you to iterate through all applied effects, read their properties, and make modifications as needed. ### Enable/Disable Effects CE.SDK allows you to temporarily toggle effects on and off without removing them from the block. This is particularly useful for before/after comparisons or when you need to optimize rendering performance during interactive editing sessions. ```typescript highlight-enable-disable-effects // Check if effect is enabled const isBlurEnabled = engine.block.isEffectEnabled(combinedBlur); // eslint-disable-next-line no-console console.log('Blur effect is enabled:', isBlurEnabled); ``` When you disable an effect, it remains attached to the block but won't be rendered until you enable it again. This preserves all effect parameters while giving you full control over when the effect is applied. You can use this feature to create interactive preview modes, implement undo-like functionality, or conditionally apply effects based on user preferences or device capabilities. ### Remove Effects When you no longer need an effect, you can remove it from the effect stack and free its resources. Always destroy effects that are no longer in use to prevent memory leaks. ```typescript highlight-remove-effects // Create a temporary block to demonstrate effect removal const tempBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tempBlock); const tempEffect = engine.block.createEffect('pixelize'); engine.block.appendEffect(tempBlock, tempEffect); engine.block.setInt(tempEffect, 'pixelize/horizontalPixelSize', 12); // Remove the effect const tempEffects = engine.block.getEffects(tempBlock); const effectIndex = tempEffects.indexOf(tempEffect); if (effectIndex !== -1) { engine.block.removeEffect(tempBlock, effectIndex); } // Destroy the removed effect to free memory engine.block.destroy(tempEffect); ``` The `removeEffect()` method takes an index position, so you can remove effects selectively from any position in the stack. After removal, destroy the effect instance to ensure proper cleanup. ## Additional Techniques ### Batch Processing For applications that need to apply the same effects to multiple elements, we can iterate through a collection of blocks and apply effects efficiently. ```typescript highlight-batch-processing // Apply same effects to multiple blocks const allGraphics = engine.block.findByType('graphic'); allGraphics.forEach((graphic) => { if (engine.block.supportsEffects(graphic)) { // Only apply to blocks that don't already have effects const existingEffects = engine.block.getEffects(graphic); if (existingEffects.length === 0) { const effect = engine.block.createEffect('adjustments'); engine.block.appendEffect(graphic, effect); engine.block.setFloat(effect, 'effect/adjustments/brightness', 0.1); } } }); ``` When batch processing, check effect support before creating effects to avoid unnecessary work. You can also reuse effect instances when applying the same configuration to multiple blocks, though be careful to destroy them properly when done. ### Dynamic Effects with Animations You can combine effects with CE.SDK's built-in animation system to create dynamic visual treatments that change over time. > **Caution:** Effect parameters are static properties and cannot be animated using > JavaScript timers like `setInterval` or `requestAnimationFrame`. For animated > content, use CE.SDK's built-in animation blocks (`createAnimation()`, > `setInAnimation()`, etc.) or refer to the animation guides. For dynamic visual effects in video projects, explore CE.SDK's animation system which provides professionally designed transitions and effects that integrate seamlessly with the rendering pipeline. ### Custom Effect Combinations Creating reusable effect presets allows you to maintain consistent styling across your application and speed up common effect applications. Here's a pattern for building reusable effect configurations: ```typescript // Create a reusable preset function async function applyVintagePreset(engine: CreativeEngine, imageBlock: number) { // Apply LUT filter const lutEffect = engine.block.createEffect('lut_filter'); engine.block.setString( lutEffect, 'lut_filter/lutFileURI', 'https://img.ly/static/ubq_luts/vintage.png', ); engine.block.appendEffect(imageBlock, lutEffect); // Add vignette const vignetteEffect = engine.block.createEffect('vignette'); engine.block.setFloat(vignetteEffect, 'vignette/intensity', 0.5); engine.block.appendEffect(imageBlock, vignetteEffect); return { lutEffect, vignetteEffect }; } // Use the preset const effects = await applyVintagePreset(engine, myImageBlock); ``` Preset strategies include: - **Brand filters** - Maintain a consistent look across campaigns - **Style templates** - Provide quick application of complex multi-effect treatments - **User favorites** - Allow users to save and recall their preferred settings ## Performance Considerations CE.SDK's effect system is optimized for real-time performance, but understanding these considerations helps you build responsive applications: - **GPU acceleration**: Effects leverage GPU rendering for smooth performance on modern devices - **Mobile optimization**: Limit effects to 2-3 per element on mobile devices to maintain responsiveness - **Effect complexity**: Blur and LUT filters are computationally expensive compared to simple adjustments - **Video effects**: Apply effects sparingly to video blocks to maintain smooth playback - **Real-time editing**: Temporarily disable effects during intensive editing operations for better interactivity Test your effect combinations on target devices early in development to ensure acceptable performance. ## Troubleshooting ### Effect Not Visible If an effect doesn't appear after applying it, check these common issues: - Verify the block type supports effects using `supportsEffects()` - Check that the effect is enabled with `isEffectEnabled()` - Ensure effect parameters are in valid ranges (e.g., intensity values between 0.0 and 1.0) - Confirm the effect is in the effect stack with `getEffects()` ### Performance Degradation If you experience slow rendering or laggy interactions: - Reduce the number of effects per element (aim for 2-3 maximum on mobile) - Lower blur radius values or use smaller LUT files - Temporarily disable effects during editing with `setEffectEnabled()` - Test on target devices early to identify performance bottlenecks ### Effects Not Persisting Effects should save automatically with the scene, but verify: - You're not destroying effects prematurely before saving - Save/load operations complete successfully - Effect URIs (LUT files, images) remain accessible after loading ### Incompatible Block Types If you can't apply an effect: - Remember that graphic blocks (with image or video fills), shape blocks, and text blocks support effects - Page blocks themselves don't support effects directly, but page fills (such as background fills) do support effects - Scene blocks cannot have effects applied - Check the block type with `block.getType()` and use `block.supportsEffects()` before attempting to apply effects ## API Reference | Method | Description | | ------------------------------------------ | ------------------------------------------ | | `block.supportsEffects(block)` | Check if a block supports effects | | `block.createEffect(type)` | Create a new effect instance | | `block.appendEffect(block, effect)` | Add effect to the end of the effect stack | | `block.insertEffect(block, effect, index)` | Insert effect at a specific position | | `block.removeEffect(block, index)` | Remove effect at the specified index | | `block.getEffects(block)` | Get all effects applied to a block | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.isEffectEnabled(effect)` | Check if an effect is currently enabled | | `block.findAllProperties(effect)` | Get all available properties for an effect | | `block.setFloat(effect, property, value)` | Set a floating-point property value | | `block.setInt(effect, property, value)` | Set an integer property value | | `block.setString(effect, property, value)` | Set a string property value | | `block.setBool(effect, property, value)` | Set a boolean property value | | `block.destroy(effect)` | Destroy an unused effect instance | ## About the Example Code The example code accompanying this guide follows educational design patterns to help you learn effectively: - **Individual demonstrations**: Each effect type is demonstrated on its own image block before showing combinations, making it easier to understand what each effect does - **Convenience API usage**: The code uses `engine.block.addImage()` instead of manual block construction—this is the recommended approach for simplicity and maintainability - **Spatial layout**: Image blocks are positioned in a grid layout (x/y coordinates) so you can visually see the results of each effect when running the example - **Progressive complexity**: The example starts with simple single effects and gradually builds to complex multi-effect combinations In your production code, you can apply multiple effects directly to the same block without creating separate demonstration blocks. The example structure is optimized for learning, not production usage. ## Next Steps Now that you understand how to apply and manage filters and effects, explore specific effect types and advanced techniques: - **LUT Filters** - Create custom color grading filters for cinematic looks - **Blur Effects** - Apply depth of field and motion blur techniques - **Duotone Effects** - Create striking two-color artistic treatments - **Adjustments** - Fine-tune brightness, contrast, and saturation - **Effect Combinations** - Build sophisticated multi-effect visual treatments --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Blur Effects" description: "Apply blur effects to design elements to create depth, focus attention, or soften backgrounds." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Apply Blur](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) --- Apply blur effects to design elements using CE.SDK's dedicated blur system for creating depth, focus, and atmospheric effects.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-blur-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-blur-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-blur-browser/) Unlike general effects that stack on elements, blur is a dedicated feature with its own API methods. Each block supports exactly one blur at a time, though the same blur instance can be shared across multiple blocks. CE.SDK provides four blur types: **uniform** for consistent softening, **linear** and **mirrored** for gradient-based effects along axes, and **radial** for circular focal points. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-blur-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; class BlurPlugin implements EditorPlugin { name = 'BlurPlugin'; version = '1.0.0'; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const page = engine.block.findByType('page')[0]; // Get page dimensions to position content correctly const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); if (!engine.block.supportsBlur(page)) { console.log('Block does not support blur'); return; } // Create an image block const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('rect')); const imageFill = engine.block.createFill('image'); engine.block.setFill(imageBlock, imageFill); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); // Position image to fill the page engine.block.setWidth(imageBlock, pageWidth); engine.block.setHeight(imageBlock, pageHeight); engine.block.setPositionX(imageBlock, 0); engine.block.setPositionY(imageBlock, 0); engine.block.appendChild(page, imageBlock); const blur = engine.block.createBlur('//ly.img.ubq/blur/radial'); engine.block.setFloat(blur, 'blur/radial/blurRadius', 40); engine.block.setFloat(blur, 'blur/radial/radius', 100); engine.block.setFloat(blur, 'blur/radial/gradientRadius', 80); engine.block.setFloat(blur, 'blur/radial/x', 0.5); engine.block.setFloat(blur, 'blur/radial/y', 0.5); engine.block.setBlur(imageBlock, blur); engine.block.setBlurEnabled(imageBlock, true); const appliedBlur = engine.block.getBlur(imageBlock); const isEnabled = engine.block.isBlurEnabled(imageBlock); const blurType = engine.block.getType(appliedBlur); console.log('Blur type:', blurType, 'Enabled:', isEnabled); engine.block.setBlurEnabled(imageBlock, false); const nowEnabled = engine.block.isBlurEnabled(imageBlock); console.log('Blur now enabled:', nowEnabled); engine.block.setBlurEnabled(imageBlock, true); } } export default BlurPlugin; ``` This guide covers how to apply blur effects programmatically using the block API. ## Programmatic Blur Application ### Check Blur Support Before applying blur to a block, verify it supports blur effects. Graphic blocks with shapes and pages support blur. ```typescript highlight-check-blur-support if (!engine.block.supportsBlur(page)) { console.log('Block does not support blur'); return; } ``` Always check support before creating and applying blur to avoid errors. ### Create and Apply Blur Create a blur instance using `createBlur()` with a blur type, then attach it to a block using `setBlur()`. Enable the blur with `setBlurEnabled()`. ```typescript highlight-create-blur const blur = engine.block.createBlur('//ly.img.ubq/blur/radial'); ``` CE.SDK provides four blur types: - **`//ly.img.ubq/blur/uniform`** - Even softening across the entire element - **`//ly.img.ubq/blur/linear`** - Gradient blur along a line defined by two control points - **`//ly.img.ubq/blur/mirrored`** - Band of focus with blur on both sides (tilt-shift style) - **`//ly.img.ubq/blur/radial`** - Circular blur pattern from a center point > **Note:** Omitting the prefix is also accepted, e.g., `'radial'` instead of > `'//ly.img.ubq/blur/radial'`. ### Configure Blur Parameters Each blur type has specific parameters to control its appearance. Configure them using `setFloat()`. ```typescript highlight-configure-blur engine.block.setFloat(blur, 'blur/radial/blurRadius', 40); engine.block.setFloat(blur, 'blur/radial/radius', 100); engine.block.setFloat(blur, 'blur/radial/gradientRadius', 80); engine.block.setFloat(blur, 'blur/radial/x', 0.5); engine.block.setFloat(blur, 'blur/radial/y', 0.5); ``` **Radial blur parameters:** - `blur/radial/blurRadius` - Blur intensity (default: 30) - `blur/radial/radius` - Size of the non-blurred center area (default: 75) - `blur/radial/gradientRadius` - Size of the blur transition zone (default: 50) - `blur/radial/x` - Center point x-value, 0.0 to 1.0 (default: 0.5) - `blur/radial/y` - Center point y-value, 0.0 to 1.0 (default: 0.5) **Uniform blur parameters:** - `blur/uniform/intensity` - Blur strength, 0.0 to 1.0 (default: 0.5) **Linear blur parameters:** - `blur/linear/blurRadius` - Blur intensity (default: 30) - `blur/linear/x1`, `blur/linear/y1` - Control point 1 (default: 0, 0.5) - `blur/linear/x2`, `blur/linear/y2` - Control point 2 (default: 1, 0.5) **Mirrored blur parameters:** - `blur/mirrored/blurRadius` - Blur intensity (default: 30) - `blur/mirrored/gradientSize` - Hardness of gradient transition (default: 50) - `blur/mirrored/size` - Size of the blurred area (default: 75) - `blur/mirrored/x1`, `blur/mirrored/y1` - Control point 1 (default: 0, 0.5) - `blur/mirrored/x2`, `blur/mirrored/y2` - Control point 2 (default: 1, 0.5) ### Apply Blur to Block After configuring the blur, apply it to the target block and enable it. ```typescript highlight-apply-blur engine.block.setBlur(imageBlock, blur); engine.block.setBlurEnabled(imageBlock, true); ``` The blur takes effect immediately once enabled. You can modify parameters at any time and changes apply in real-time. ## Managing Blur ### Access Existing Blur Retrieve the blur applied to a block using `getBlur()`. You can then read or modify its properties. ```typescript highlight-read-blur const appliedBlur = engine.block.getBlur(imageBlock); const isEnabled = engine.block.isBlurEnabled(imageBlock); const blurType = engine.block.getType(appliedBlur); console.log('Blur type:', blurType, 'Enabled:', isEnabled); ``` ### Enable/Disable Blur Toggle blur on and off without removing it using `setBlurEnabled()`. This preserves all blur parameters for quick before/after comparisons. ```typescript highlight-toggle-blur engine.block.setBlurEnabled(imageBlock, false); const nowEnabled = engine.block.isBlurEnabled(imageBlock); console.log('Blur now enabled:', nowEnabled); engine.block.setBlurEnabled(imageBlock, true); ``` When disabled, the blur remains attached to the block but doesn't render until re-enabled. ### Share Blur Across Blocks A single blur instance can be applied to multiple blocks. Create the blur once, then assign it to each block with `setBlur()`. ```typescript const sharedBlur = engine.block.createBlur('//ly.img.ubq/blur/uniform'); engine.block.setFloat(sharedBlur, 'blur/uniform/intensity', 0.4); engine.block.setBlur(block1, sharedBlur); engine.block.setBlur(block2, sharedBlur); engine.block.setBlurEnabled(block1, true); engine.block.setBlurEnabled(block2, true); ``` Changes to the shared blur affect all blocks using it. ### Replace Blur To change the blur type on a block, create a new blur and assign it with `setBlur()`. The previous blur association is automatically removed. ```typescript const newBlur = engine.block.createBlur('//ly.img.ubq/blur/linear'); engine.block.setBlur(block, newBlur); engine.block.setBlurEnabled(block, true); ``` If the old blur isn't used elsewhere, destroy it with `engine.block.destroy(oldBlur)`. ## Troubleshooting ### Blur Not Visible If blur doesn't appear after applying: - Check the block supports blur with `supportsBlur()` - Verify blur is enabled with `isBlurEnabled()` - Ensure the blur instance is valid ### Blur Appears on Wrong Area For radial, linear, and mirrored blurs: - Verify control point coordinates are within 0.0 to 1.0 range - Check that x/y values match your intended focus area ### Blur Too Subtle or Too Strong - Increase or decrease `blurRadius` or `intensity` values - For radial blur, adjust `gradientRadius` to control the transition softness ## API Reference | Method | Description | | --------------------------------------- | ---------------------------- | | `block.createBlur(type)` | Create new blur instance | | `block.supportsBlur(block)` | Check if block supports blur | | `block.setBlur(block, blur)` | Apply blur to block | | `block.getBlur(block)` | Get blur from block | | `block.setBlurEnabled(block, enabled)` | Enable or disable blur | | `block.isBlurEnabled(block)` | Check if blur is enabled | | `block.setFloat(blur, property, value)` | Set blur float property | | `block.getFloat(blur, property)` | Get blur float property | | `block.getType(blur)` | Get blur type identifier | | `block.destroy(blur)` | Destroy unused blur instance | ## Linear Type A blur effect applied along a linear gradient. This section describes the properties available for the **Linear Type** (`//ly.img.ubq/blur/linear`) block type. | Property | Type | Default | Description | | ------------------------ | ------- | ------- | ------------------------ | | `blur/linear/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/linear/x1` | `Float` | `0` | Control point 1 x-value. | | `blur/linear/x2` | `Float` | `1` | Control point 2 x-value. | | `blur/linear/y1` | `Float` | `0.5` | Control point 1 y-value. | | `blur/linear/y2` | `Float` | `0.5` | Control point 2 y-value. | ## Mirrored Type A blur effect applied in a mirrored linear fashion. This section describes the properties available for the **Mirrored Type** (`//ly.img.ubq/blur/mirrored`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------ | | `blur/mirrored/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/mirrored/gradientSize` | `Float` | `50` | Hardness of gradients. | | `blur/mirrored/size` | `Float` | `75` | Size of blurred area. | | `blur/mirrored/x1` | `Float` | `0` | Control point 1 x-value. | | `blur/mirrored/x2` | `Float` | `1` | Control point 2 x-value. | | `blur/mirrored/y1` | `Float` | `0.5` | Control point 1 y-value. | | `blur/mirrored/y2` | `Float` | `0.5` | Control point 2 y-value. | ## Radial Type A blur effect applied radially from a center point. This section describes the properties available for the **Radial Type** (`//ly.img.ubq/blur/radial`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------- | | `blur/radial/blurRadius` | `Float` | `30` | Blur intensity. | | `blur/radial/gradientRadius` | `Float` | `50` | Size of blurred area. | | `blur/radial/radius` | `Float` | `75` | Size of non-blurred area. | | `blur/radial/x` | `Float` | `0.5` | Center point x-value. | | `blur/radial/y` | `Float` | `0.5` | Center point y-value. | ## Uniform Type A blur effect with uniform intensity. This section describes the properties available for the **Uniform Type** (`//ly.img.ubq/blur/uniform`) block type. | Property | Type | Default | Description | | ------------------------ | ------- | ------- | ------------------- | | `blur/uniform/intensity` | `Float` | `0.5` | The blur intensity. | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Chroma Key (Green Screen)" description: "Apply the green screen effect to images and videos, replacing specific colors with transparency for compositing workflows." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/chroma-key-green-screen-1e3e99/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Apply Chroma Key (Green Screen)](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/chroma-key-green-screen-1e3e99/) --- Replace specific colors with transparency using CE.SDK's green screen effect for video compositing and virtual background applications.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-chroma-key-green-screen-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-chroma-key-green-screen-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-chroma-key-green-screen-browser/) The green screen effect (chroma key) replaces a specified color with transparency, enabling compositing workflows where foreground subjects appear over different backgrounds. While green is the most common key color due to its contrast with skin tones, the effect works with any solid color—blue screens, white backgrounds, or custom colors. CE.SDK processes chroma keying in real-time using GPU-accelerated shaders. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-chroma-key-green-screen-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Chroma Key (Green Screen) Guide * * Demonstrates the green screen effect for color keying: * - Applying the green screen effect to an image * - Configuring the target color to key out * - Adjusting colorMatch, smoothness, and spill parameters * - Compositing with background layers * - Managing and toggling effects */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create an image block to apply the green screen effect const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: { width: 600, height: 450 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 100); engine.block.setPositionY(imageBlock, 75); // Create the green screen effect const greenScreenEffect = engine.block.createEffect('green_screen'); // Apply the effect to the image block engine.block.appendEffect(imageBlock, greenScreenEffect); // Set the target color to key out // Use off-white to remove the bright sky background // For traditional green screen footage, use { r: 0.0, g: 1.0, b: 0.0, a: 1.0 } engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); // Adjust color matching tolerance // Higher values (closer to 1.0) key out more color variations // Lower values create more precise keying engine.block.setFloat( greenScreenEffect, 'effect/green_screen/colorMatch', 0.26 ); // Control edge smoothness for natural transitions // Higher values create softer edges that blend with backgrounds engine.block.setFloat( greenScreenEffect, 'effect/green_screen/smoothness', 1.0 ); // Remove color spill from reflective surfaces // Reduces color tint on edges near the keyed background engine.block.setFloat(greenScreenEffect, 'effect/green_screen/spill', 1.0); // Create a background layer for compositing const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); // Create a solid color fill for the background const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(backgroundBlock, backgroundFill); // Size and position the background to cover the page engine.block.setWidth(backgroundBlock, 800); engine.block.setHeight(backgroundBlock, 600); engine.block.setPositionX(backgroundBlock, 0); engine.block.setPositionY(backgroundBlock, 0); // Add to page and send to back engine.block.appendChild(page, backgroundBlock); engine.block.sendToBack(backgroundBlock); // Bring the keyed image to front engine.block.bringToFront(imageBlock); // Check if the effect is currently enabled const isEnabled = engine.block.isEffectEnabled(greenScreenEffect); console.log('Green screen effect enabled:', isEnabled); // Toggle the effect on or off engine.block.setEffectEnabled(greenScreenEffect, !isEnabled); console.log( 'Effect toggled:', engine.block.isEffectEnabled(greenScreenEffect) ); // Re-enable for demonstration engine.block.setEffectEnabled(greenScreenEffect, true); // Check if the block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Get all effects applied to the block const effects = engine.block.getEffects(imageBlock); console.log('Number of effects:', effects.length); // Remove the effect from the block (by index) engine.block.removeEffect(imageBlock, 0); console.log('Effect removed from block'); // Destroy the effect instance to free resources engine.block.destroy(greenScreenEffect); console.log('Effect destroyed'); // Re-apply the effect for final display const finalEffect = engine.block.createEffect('green_screen'); engine.block.appendEffect(imageBlock, finalEffect); engine.block.setColor(finalEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); engine.block.setFloat(finalEffect, 'effect/green_screen/colorMatch', 0.26); engine.block.setFloat(finalEffect, 'effect/green_screen/smoothness', 1.0); engine.block.setFloat(finalEffect, 'effect/green_screen/spill', 1.0); // Select the image block so the inspector panel shows it engine.block.setSelected(imageBlock, true); console.log( 'Chroma key guide initialized. Select the image to see effect parameters.' ); } } export default Example; ``` This guide covers how to apply the green screen effect programmatically, configure color selection and keying parameters, composite with background layers, and manage effects on blocks. ## Apply the Green Screen Effect We start by creating an image block and applying the green screen effect to it. The effect immediately processes the target color, making matching pixels transparent. ```typescript highlight-create-effect // Create an image block to apply the green screen effect const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_4.jpg', { size: { width: 600, height: 450 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 100); engine.block.setPositionY(imageBlock, 75); // Create the green screen effect const greenScreenEffect = engine.block.createEffect('green_screen'); // Apply the effect to the image block engine.block.appendEffect(imageBlock, greenScreenEffect); ``` The `createEffect('green_screen')` method creates a new green screen effect instance. We then attach it to the image block using `appendEffect()`, which adds the effect to the block's effect stack. ## Configure Color Selection The green screen effect targets a specific color to key out. We set this color using `setColor()` with the `effect/green_screen/fromColor` property. ```typescript highlight-configure-color // Set the target color to key out // Use off-white to remove the bright sky background // For traditional green screen footage, use { r: 0.0, g: 1.0, b: 0.0, a: 1.0 } engine.block.setColor(greenScreenEffect, 'effect/green_screen/fromColor', { r: 0.98, g: 0.98, b: 0.98, a: 1.0 }); ``` The example uses off-white (`r: 0.98, g: 0.98, b: 0.98`) to key out a bright sky background. For traditional green screen footage, use pure green (`r: 0.0, g: 1.0, b: 0.0`). For blue screen footage, set the color to pure blue. Match the exact color you want to remove for best results. ## Adjust Color Matching Tolerance The `colorMatch` parameter controls how closely pixels must match the target color to be keyed out. We adjust this using `setFloat()`. ```typescript highlight-adjust-color-match // Adjust color matching tolerance // Higher values (closer to 1.0) key out more color variations // Lower values create more precise keying engine.block.setFloat( greenScreenEffect, 'effect/green_screen/colorMatch', 0.26 ); ``` Higher values (closer to 1.0) key out a wider range of similar colors, which is useful for footage with uneven lighting or color variations in the background. Lower values create more precise keying for well-lit footage with uniform backgrounds. ## Control Edge Smoothness The `smoothness` parameter controls the transition between opaque and transparent areas. This affects how sharp or soft the edges appear around keyed subjects. ```typescript highlight-adjust-smoothness // Control edge smoothness for natural transitions // Higher values create softer edges that blend with backgrounds engine.block.setFloat( greenScreenEffect, 'effect/green_screen/smoothness', 1.0 ); ``` Higher smoothness values create softer edges that blend naturally with new backgrounds, reducing harsh outlines. Lower values produce sharper edges, which may be preferable for high-contrast composites or when preserving fine detail. ## Remove Color Spill Color spill occurs when the key color reflects onto the foreground subject, creating a green or blue tint on edges. The `spill` parameter reduces this color cast. ```typescript highlight-adjust-spill // Remove color spill from reflective surfaces // Reduces color tint on edges near the keyed background engine.block.setFloat(greenScreenEffect, 'effect/green_screen/spill', 1.0); ``` Increase the spill value when you notice the key color appearing on subject edges or reflective surfaces. This is common with shiny hair, glasses, or metallic objects near the screen. ## Composite with Background Layers After keying, we can layer the transparent content over backgrounds using block ordering. We create a background block and use `sendToBack()` to place it behind the keyed image. ```typescript highlight-composite-background // Create a background layer for compositing const backgroundBlock = engine.block.create('graphic'); const backgroundShape = engine.block.createShape('rect'); engine.block.setShape(backgroundBlock, backgroundShape); // Create a solid color fill for the background const backgroundFill = engine.block.createFill('color'); engine.block.setColor(backgroundFill, 'fill/color/value', { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); engine.block.setFill(backgroundBlock, backgroundFill); // Size and position the background to cover the page engine.block.setWidth(backgroundBlock, 800); engine.block.setHeight(backgroundBlock, 600); engine.block.setPositionX(backgroundBlock, 0); engine.block.setPositionY(backgroundBlock, 0); // Add to page and send to back engine.block.appendChild(page, backgroundBlock); engine.block.sendToBack(backgroundBlock); // Bring the keyed image to front engine.block.bringToFront(imageBlock); ``` The background appears through the transparent areas where the key color was removed. You can use image or video fills instead of solid colors for more dynamic backgrounds. ## Toggle the Effect We can check whether an effect is enabled using `isEffectEnabled()`. ```typescript highlight-check-enabled // Check if the effect is currently enabled const isEnabled = engine.block.isEffectEnabled(greenScreenEffect); ``` To toggle the effect on or off, use `setEffectEnabled()`. This preserves the effect configuration while temporarily removing its visual impact. ```typescript highlight-set-enabled // Toggle the effect on or off engine.block.setEffectEnabled(greenScreenEffect, !isEnabled); ``` Toggling effects is useful for before/after comparisons or conditional processing without removing and recreating the effect. ## Manage the Effect Beyond toggling, you can query, remove, and clean up effects. Use `supportsEffects()` to check if a block can have effects, `getEffects()` to list all applied effects, `removeEffect()` to detach an effect from a block, and `destroy()` to free the effect's resources. ```typescript highlight-manage-effects // Check if the block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); console.log('Block supports effects:', supportsEffects); // Get all effects applied to the block const effects = engine.block.getEffects(imageBlock); console.log('Number of effects:', effects.length); // Remove the effect from the block (by index) engine.block.removeEffect(imageBlock, 0); console.log('Effect removed from block'); // Destroy the effect instance to free resources engine.block.destroy(greenScreenEffect); console.log('Effect destroyed'); ``` When removing effects, use the index from `getEffects()` to specify which effect to remove. After removing an effect from a block, call `destroy()` on the effect instance to release its resources. This is important for memory management in long-running applications. ## Troubleshooting ### Keying Results Appear Rough or Incomplete - Increase `colorMatch` value to capture more color variations - Ensure source footage has even lighting on the screen - Check that the target color accurately matches the screen color ### Edges Have Color Fringing - Increase `spill` value to remove color cast - Adjust `smoothness` to soften hard edges - Consider using a higher `colorMatch` for gradual color transitions ### Transparent Areas Appear in Wrong Places - Decrease `colorMatch` to be more selective about which colors are keyed - Verify the `fromColor` matches only the intended background color - Check that foreground subjects don't contain colors similar to the key color ## API Reference | Method | Description | | ------------------------------------------------------------------- | -------------------------------------- | | `block.createEffect('green_screen')` | Create a green screen effect instance | | `block.appendEffect(block, effect)` | Add effect to a block's effect stack | | `block.setColor(effect, 'effect/green_screen/fromColor', color)` | Set the color to key out | | `block.setFloat(effect, 'effect/green_screen/colorMatch', value)` | Set color matching tolerance (0.0-1.0) | | `block.setFloat(effect, 'effect/green_screen/smoothness', value)` | Set edge smoothness (0.0-1.0) | | `block.setFloat(effect, 'effect/green_screen/spill', value)` | Set spill removal intensity (0.0-1.0) | | `block.isEffectEnabled(effect)` | Check if an effect is enabled | | `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `block.supportsEffects(block)` | Check if a block supports effects | | `block.getEffects(block)` | Get all effects applied to a block | | `block.removeEffect(block, index)` | Remove effect at specified index | | `block.destroy(effect)` | Destroy an effect instance | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Learn the fundamentals of the effect system - [Blur](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) - Add blur effects for depth of field - [Duotone](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/duotone-831fc5/) - Create two-color artistic treatments --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Custom Filters" description: "Extend CE.SDK with custom LUT filter asset sources for brand-specific color grading and filter collections." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-filters-c796ba/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Create Custom Filters](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-filters-c796ba/) --- Extend CE.SDK with your own LUT filters by creating and registering custom filter asset sources for brand-specific color grading.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-add-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-add-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-add-browser/) CE.SDK provides built-in LUT filters, but many applications need brand-specific color grading or custom filter collections. Custom filter asset sources let you register your own LUT filters that appear alongside or replace the defaults. Once registered, custom filters integrate seamlessly with the built-in UI and can be applied programmatically. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-add-browser/browser.ts reference-only import type { AssetQueryData, AssetResult, AssetSource, AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; /** * CE.SDK Plugin: Create Custom Filters Guide * * Demonstrates creating and registering custom LUT filter asset sources: * - Creating a filter source with addSource() * - Defining filter assets with LUT metadata * - Loading filters from JSON configuration * - Querying custom filters * - Applying filters from custom sources */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable filters in the inspector panel using the Feature API cesdk.feature.enable('ly.img.filter'); // Add a custom filter to the built-in LUT filter source // The ID must follow the format //ly.img.cesdk.filters.lut/{name} // for the UI to display the label correctly engine.asset.addAssetToSource('ly.img.filter', { id: '//ly.img.cesdk.filters.lut/mycustomfilter', label: { en: 'MY CUSTOM FILTER' }, tags: { en: ['custom', 'brand'] }, meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }); // Add translation for the custom filter label cesdk.i18n.setTranslations({ en: { 'property.lutFilter.mycustomfilter': 'MY CUSTOM FILTER' } }); // Create a custom filter asset source for organizing multiple filters const customFilterSource: AssetSource = { id: 'my-custom-filters', async findAssets( queryData: AssetQueryData ): Promise { // Define custom LUT filter assets const filters: AssetResult[] = [ { id: 'vintage-warm', label: 'Vintage Warm', tags: ['vintage', 'warm', 'retro'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'cool-cinema', label: 'Cool Cinema', tags: ['cinema', 'cool', 'film'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'bw-classic', label: 'B&W Classic', tags: ['black and white', 'classic', 'monochrome'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ]; // Filter by query if provided let filteredAssets = filters; if (queryData.query) { const searchTerm = queryData.query.toLowerCase(); filteredAssets = filters.filter( (asset) => asset.label?.toLowerCase().includes(searchTerm) || asset.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)) ); } // Filter by groups if provided if (queryData.groups && queryData.groups.length > 0) { filteredAssets = filteredAssets.filter((asset) => asset.tags?.some((tag) => queryData.groups?.includes(tag)) ); } // Handle pagination const page = queryData.page ?? 0; const perPage = queryData.perPage ?? 10; const startIndex = page * perPage; const paginatedAssets = filteredAssets.slice( startIndex, startIndex + perPage ); return { assets: paginatedAssets, total: filteredAssets.length, currentPage: page, nextPage: startIndex + perPage < filteredAssets.length ? page + 1 : undefined }; }, // Return available filter categories async getGroups(): Promise { return ['vintage', 'cinema', 'black and white']; } }; // Register the custom filter source for programmatic access engine.asset.addSource(customFilterSource); // Load filters from a JSON configuration string const filterConfigJSON = JSON.stringify({ version: '2.0.0', id: 'my-json-filters', assets: [ { id: 'sunset-glow', label: { en: 'Sunset Glow' }, tags: { en: ['warm', 'sunset', 'golden'] }, groups: ['Warm Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'ocean-breeze', label: { en: 'Ocean Breeze' }, tags: { en: ['cool', 'blue', 'ocean'] }, groups: ['Cool Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ] }); // Create asset source from JSON string const jsonSourceId = await engine.asset.addLocalAssetSourceFromJSONString( filterConfigJSON ); // eslint-disable-next-line no-console console.log('Created JSON-based filter source:', jsonSourceId); // Query filters from our custom source for programmatic use const customFilterResults = await engine.asset.findAssets( 'my-custom-filters', { page: 0, perPage: 10 } ); // Create an image block to demonstrate applying a custom filter const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { x: 50, y: 150, size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock); // Get a filter from our custom source const filterAsset = customFilterResults.assets[0]; if (filterAsset && filterAsset.meta) { // Create and configure the LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Set LUT file URI from asset metadata engine.block.setString( lutEffect, 'effect/lut_filter/lutFileURI', filterAsset.meta.uri as string ); // Configure LUT grid dimensions engine.block.setInt( lutEffect, 'effect/lut_filter/horizontalTileCount', parseInt(filterAsset.meta.horizontalTileCount as string, 10) ); engine.block.setInt( lutEffect, 'effect/lut_filter/verticalTileCount', parseInt(filterAsset.meta.verticalTileCount as string, 10) ); // Set filter intensity (0.0 to 1.0) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.85); // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); } // Create a second image without a filter for comparison const imageBlock2 = await engine.block.addImage(imageUri, { x: 450, y: 150, size: { width: 300, height: 200 } }); engine.block.appendChild(page, imageBlock2); // Select the filtered image to show the filter in the inspector engine.block.select(imageBlock); // eslint-disable-next-line no-console console.log( 'Custom filters guide initialized. Select an image to see filters in the inspector panel.' ); } } export default Example; ``` This guide covers how to create filter asset sources, define filter metadata, load filters from JSON configuration, and apply custom filters to design elements. ## Filter Asset Metadata LUT filters need these properties in the `meta` object: - **`uri`** - URL to the LUT image file (PNG format) - **`thumbUri`** - URL to the thumbnail preview image - **`horizontalTileCount`** - Number of horizontal tiles in the LUT grid (typically 5 or 8) - **`verticalTileCount`** - Number of vertical tiles in the LUT grid (typically 5 or 8) - **`blockType`** - Must be `//ly.img.ubq/effect/lut_filter` for LUT filters ## Adding a Custom Filter We register a custom filter source using `engine.asset.addSource()` with a `findAssets` callback. This callback returns filter assets matching the query parameters. After registering the source, we use `cesdk.ui.updateAssetLibraryEntry()` to add our custom source to the filter inspector panel. ```typescript highlight-create-custom-source // Add a custom filter to the built-in LUT filter source // The ID must follow the format //ly.img.cesdk.filters.lut/{name} // for the UI to display the label correctly engine.asset.addAssetToSource('ly.img.filter', { id: '//ly.img.cesdk.filters.lut/mycustomfilter', label: { en: 'MY CUSTOM FILTER' }, tags: { en: ['custom', 'brand'] }, meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }); // Add translation for the custom filter label cesdk.i18n.setTranslations({ en: { 'property.lutFilter.mycustomfilter': 'MY CUSTOM FILTER' } }); // Create a custom filter asset source for organizing multiple filters const customFilterSource: AssetSource = { id: 'my-custom-filters', async findAssets( queryData: AssetQueryData ): Promise { // Define custom LUT filter assets const filters: AssetResult[] = [ { id: 'vintage-warm', label: 'Vintage Warm', tags: ['vintage', 'warm', 'retro'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'cool-cinema', label: 'Cool Cinema', tags: ['cinema', 'cool', 'film'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'bw-classic', label: 'B&W Classic', tags: ['black and white', 'classic', 'monochrome'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ]; // Filter by query if provided let filteredAssets = filters; if (queryData.query) { const searchTerm = queryData.query.toLowerCase(); filteredAssets = filters.filter( (asset) => asset.label?.toLowerCase().includes(searchTerm) || asset.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)) ); } // Filter by groups if provided if (queryData.groups && queryData.groups.length > 0) { filteredAssets = filteredAssets.filter((asset) => asset.tags?.some((tag) => queryData.groups?.includes(tag)) ); } // Handle pagination const page = queryData.page ?? 0; const perPage = queryData.perPage ?? 10; const startIndex = page * perPage; const paginatedAssets = filteredAssets.slice( startIndex, startIndex + perPage ); return { assets: paginatedAssets, total: filteredAssets.length, currentPage: page, nextPage: startIndex + perPage < filteredAssets.length ? page + 1 : undefined }; }, // Return available filter categories async getGroups(): Promise { return ['vintage', 'cinema', 'black and white']; } }; // Register the custom filter source for programmatic access engine.asset.addSource(customFilterSource); ``` The `findAssets` callback receives query parameters including pagination (`page`, `perPage`), search terms (`query`), and category filters (`groups`). We filter and paginate the results accordingly. The `updateAssetLibraryEntry()` call connects our custom source to the `ly.img.filter` panel, making our filters appear alongside the built-in LUT filters when a user selects an image. ### Filter Asset Structure Each filter asset returned by `findAssets` needs: - **`id`** - Unique identifier for the filter - **`label`** - Display name shown in the UI - **`tags`** - Keywords for search filtering - **`meta`** - Object containing LUT configuration (uri, thumbUri, tile counts, blockType) The optional `getGroups()` method returns available filter categories for the UI. ## Loading Filters from JSON Configuration For larger filter collections, we load definitions from JSON using `engine.asset.addLocalAssetSourceFromJSONString()`. This approach simplifies management of filter libraries. ```typescript highlight-load-from-json-string // Load filters from a JSON configuration string const filterConfigJSON = JSON.stringify({ version: '2.0.0', id: 'my-json-filters', assets: [ { id: 'sunset-glow', label: { en: 'Sunset Glow' }, tags: { en: ['warm', 'sunset', 'golden'] }, groups: ['Warm Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } }, { id: 'ocean-breeze', label: { en: 'Ocean Breeze' }, tags: { en: ['cool', 'blue', 'ocean'] }, groups: ['Cool Tones'], meta: { uri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', thumbUri: 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png', horizontalTileCount: '5', verticalTileCount: '5', blockType: '//ly.img.ubq/effect/lut_filter' } } ] }); // Create asset source from JSON string const jsonSourceId = await engine.asset.addLocalAssetSourceFromJSONString( filterConfigJSON ); // eslint-disable-next-line no-console console.log('Created JSON-based filter source:', jsonSourceId); ``` ### JSON Structure for Filter Assets The JSON format includes: - **`version`** - Schema version (use "2.0.0") - **`id`** - Unique source identifier - **`assets`** - Array of filter definitions Each asset in the array contains: - **`id`** - Unique filter identifier - **`label`** - Localized label object (e.g., `{ "en": "Filter Name" }`) - **`tags`** - Localized tags for search - **`groups`** - Category assignments for UI organization - **`meta`** - LUT configuration properties For filters hosted on a CDN, use `engine.asset.addLocalAssetSourceFromJSONURI()` instead, which resolves relative URLs against the JSON file's parent directory. ## Troubleshooting ### Filters Not Appearing in UI - Verify the asset source is registered before loading the scene - Check that filter metadata includes all required fields (`uri`, `thumbUri`, tile counts) - Ensure the `blockType` is set to `//ly.img.ubq/effect/lut_filter` - Confirm thumbnails are accessible URLs ### LUT Not Rendering Correctly - Verify tile count values match the actual LUT image grid dimensions - Check that the LUT image URL is CORS-enabled for cross-origin requests - Confirm the LUT image uses PNG format ### Filter Thumbnails Missing - Verify `thumbUri` points to an accessible image - Check that thumbnail URLs don't have CORS restrictions - Ensure thumbnail dimensions are appropriate for UI display (typically 100-200px) ## API Reference | Method | Description | | --- | --- | | `engine.asset.addSource(source)` | Register a custom asset source with findAssets callback | | `engine.asset.addLocalAssetSourceFromJSONString(json, basePath)` | Create asset source from inline JSON configuration | | `engine.asset.addLocalAssetSourceFromJSONURI(uri)` | Load asset source from remote JSON file | | `engine.asset.findAssets(sourceId, query)` | Query assets from a registered source | | `engine.asset.findAllSources()` | Get all registered asset source IDs | | `engine.asset.removeSource(id)` | Remove a registered asset source | | `cesdk.ui.updateAssetLibraryEntry(entryId, config)` | Add custom sources to filter inspector panel | | `engine.block.createEffect(type)` | Create effect instance (use `//ly.img.ubq/effect/lut_filter` for LUT filters) | | `engine.block.setString(effect, property, value)` | Set string property (LUT file URI) | | `engine.block.setInt(effect, property, value)` | Set integer property (tile counts) | | `engine.block.setFloat(effect, property, value)` | Set float property (intensity) | | `engine.block.appendEffect(block, effect)` | Add effect to block's effect stack | ## Next Steps Now that you understand how to create and register custom filter sources, explore related topics: - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Learn to apply filters to design elements and manage effect stacks - [Create a Custom LUT Filter](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-lut-filter-6e3f49/) - Understand LUT image format and create your own color grading filters - [Blur Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) - Add blur effects to images and videos --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create a Custom LUT Filter" description: "Create and apply custom LUT filters to achieve consistent, brand-aligned visual styles." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-lut-filter-6e3f49/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Apply Custom LUT Filter](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-lut-filter-6e3f49/) --- Apply custom LUT (Look-Up Table) filters to achieve brand-consistent color grading directly through CE.SDK's effect API.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-create-custom-lut-filter-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-create-custom-lut-filter-browser/) LUT filters remap colors through a predefined transformation table, enabling cinematic color grading and consistent brand aesthetics. This guide shows how to apply your own LUT files directly to design elements using the effect API. For organizing collections of filters through asset sources, see [Create Custom Filters](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-filters-c796ba/). ```typescript file=@cesdk_web_examples/guides-filters-and-effects-create-custom-lut-filter-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Create Custom LUT Filter Guide * * Demonstrates applying custom LUT filters directly using the effect API: * - Creating a lut_filter effect * - Configuring the LUT file URI and tile dimensions * - Setting filter intensity * - Toggling the effect on and off */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Create a gradient background for the page const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.15, g: 0.1, b: 0.25, a: 1 }, stop: 0 }, { color: { r: 0.3, g: 0.15, b: 0.4, a: 1 }, stop: 0.5 }, { color: { r: 0.2, g: 0.1, b: 0.35, a: 1 }, stop: 1 } ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Create a centered title text const titleText = engine.block.create('text'); engine.block.setString(titleText, 'text/text', 'Custom LUT Filter'); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setTextFontSize(titleText, 96); engine.block.setTextColor(titleText, { r: 1, g: 1, b: 1, a: 1 }); engine.block.setWidthMode(titleText, 'Auto'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.appendChild(page, titleText); // Create a subtext below the title const subText = engine.block.create('text'); engine.block.setString(subText, 'text/text', 'img.ly'); engine.block.setEnum(subText, 'text/horizontalAlignment', 'Center'); engine.block.setTextFontSize(subText, 64); engine.block.setTextColor(subText, { r: 0.8, g: 0.8, b: 0.8, a: 1 }); engine.block.setWidthMode(subText, 'Auto'); engine.block.setHeightMode(subText, 'Auto'); engine.block.appendChild(page, subText); // Get text dimensions for centering calculations const titleWidth = engine.block.getFrameWidth(titleText); const titleHeight = engine.block.getFrameHeight(titleText); const subTextWidth = engine.block.getFrameWidth(subText); const subTextHeight = engine.block.getFrameHeight(subText); // Image dimensions (smaller) const imageWidth = 200; const imageHeight = 150; // Calculate total content height and vertical centering const textGap = 8; const imagePadding = 60; const totalContentHeight = titleHeight + textGap + subTextHeight + imagePadding + imageHeight; const startY = (pageHeight - totalContentHeight) / 2; // Position title centered engine.block.setPositionX(titleText, (pageWidth - titleWidth) / 2); engine.block.setPositionY(titleText, startY); // Position subtext below title engine.block.setPositionX(subText, (pageWidth - subTextWidth) / 2); engine.block.setPositionY(subText, startY + titleHeight + textGap); // Add an image block to apply the LUT filter const imageY = startY + titleHeight + textGap + subTextHeight + imagePadding; const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { x: (pageWidth - imageWidth) / 2, y: imageY, size: { width: imageWidth, height: imageHeight } }); engine.block.appendChild(page, imageBlock); // Create a LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); // Configure the LUT file URI - this is a tiled PNG containing the color lookup table const lutUrl = 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png'; engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl); // Set the tile grid dimensions - must match the LUT image structure engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5); engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5); // Set filter intensity (0.0 = no effect, 1.0 = full effect) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.8); // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); // Register a custom button component to toggle the LUT filter cesdk.ui.registerComponent('lut.toggle', ({ builder }) => { const isEnabled = engine.block.isEffectEnabled(lutEffect); builder.Button('toggle-lut', { label: 'LUT Filter', icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff', isActive: isEnabled, onClick: () => { engine.block.setEffectEnabled(lutEffect, !isEnabled); } }); }); // Add the toggle button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'lut.toggle' ); // Retrieve all effects on the block const effects = engine.block.getEffects(imageBlock); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 1 // Check if block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); // eslint-disable-next-line no-console console.log('Supports effects:', supportsEffects); // true // Select the image to show it in the editor engine.block.select(imageBlock); // eslint-disable-next-line no-console console.log('Custom LUT filter applied successfully.'); } } export default Example; ``` ## Understanding LUT Image Format CE.SDK uses a tiled PNG format where a 3D color cube is laid out as a 2D grid. Each tile represents a slice of the color cube along the blue axis. The LUT image requires two configuration values: - **`horizontalTileCount`** - Number of tiles across the image width - **`verticalTileCount`** - Number of tiles down the image height CE.SDK supports these tile configurations: - 5×5 tiles with 128px cube size - 8×8 tiles with 512px cube size Standard `.cube` files must be converted to this tiled PNG format using image processing tools. ## Creating LUT PNG Images ### Obtaining LUT Files LUT files are available from multiple sources: - **Color grading software** - Adobe Photoshop, DaVinci Resolve, and Affinity Photo can export 3D LUT files in `.cube` format - **Online LUT libraries** - Many free and commercial LUT packs are available for download - **LUT generators** - Tools that create custom color transformations from reference images ### Converting .cube to Tiled PNG CE.SDK requires LUTs in a specific tiled PNG format where each tile represents a slice of the 3D color cube along the blue axis. To convert a standard `.cube` file: 1. **Parse the .cube file** - Read the 3D color lookup table data 2. **Arrange slices as tiles** - Each blue channel value becomes a separate tile containing the red-green color plane 3. **Export as PNG** - Save the grid as a PNG image CE.SDK's built-in LUTs follow a naming convention: `imgly_lut_{name}_{h}_{v}_{cubeSize}.png` where `h` and `v` are tile counts and `cubeSize` indicates the LUT precision. ### Using Python for Conversion You can write a Python script using PIL/Pillow and NumPy to convert `.cube` files: ```python # Pseudocode for .cube to tiled PNG conversion # 1. Parse the .cube file to extract the 3D LUT data # 2. Reshape data into (blue_slices, height, width, 3) array # 3. Arrange slices in a grid matching tile configuration # 4. Save as PNG with Image.fromarray() ``` ### Using CE.SDK's Built-in LUTs The simplest approach is to use CE.SDK's existing LUT assets as a starting point. The built-in filters use pre-generated tiled PNGs that you can reference for format verification. Check the filter extension at `ly.img.cesdk.filters.lut` for examples of properly formatted LUT images. ## Hosting LUT Files LUT images must be served from an accessible URL. For production deployments, use HTTPS and enable CORS headers for cross-origin requests in browser environments. ## Creating the LUT Effect Create a `lut_filter` effect instance using the effect API: ```typescript highlight-create-effect // Create a LUT filter effect const lutEffect = engine.block.createEffect( '//ly.img.ubq/effect/lut_filter' ); ``` This creates an effect that can be configured and applied to image blocks. ## Configuring LUT Properties Set the LUT file URL and tile dimensions to match your LUT image: ```typescript highlight-configure-lut // Configure the LUT file URI - this is a tiled PNG containing the color lookup table const lutUrl = 'https://cdn.img.ly/assets/v4/ly.img.filter.lut/LUTs/imgly_lut_ad1920_5_5_128.png'; engine.block.setString(lutEffect, 'effect/lut_filter/lutFileURI', lutUrl); // Set the tile grid dimensions - must match the LUT image structure engine.block.setInt(lutEffect, 'effect/lut_filter/horizontalTileCount', 5); engine.block.setInt(lutEffect, 'effect/lut_filter/verticalTileCount', 5); ``` The tile counts must match the actual LUT image grid structure. Using incorrect values produces distorted colors. ## Setting Filter Intensity Control the strength of the color transformation with intensity: ```typescript highlight-set-intensity // Set filter intensity (0.0 = no effect, 1.0 = full effect) engine.block.setFloat(lutEffect, 'effect/lut_filter/intensity', 0.8); ``` Values range from 0.0 (no effect) to 1.0 (full effect). Use intermediate values for subtle color grading. ## Applying the Effect Attach the configured effect to an image block: ```typescript highlight-apply-effect // Apply the effect to the image block engine.block.appendEffect(imageBlock, lutEffect); ``` The effect renders immediately after being applied. ## Toggling the Effect Add a toggle button to the navigation bar for enabling and disabling the filter: ```typescript highlight-toggle-effect // Register a custom button component to toggle the LUT filter cesdk.ui.registerComponent('lut.toggle', ({ builder }) => { const isEnabled = engine.block.isEffectEnabled(lutEffect); builder.Button('toggle-lut', { label: 'LUT Filter', icon: isEnabled ? '@imgly/ToggleIconOn' : '@imgly/ToggleIconOff', isActive: isEnabled, onClick: () => { engine.block.setEffectEnabled(lutEffect, !isEnabled); } }); }); // Add the toggle button to the navigation bar cesdk.ui.insertOrderComponent( { in: 'ly.img.navigation.bar', position: 'end' }, 'lut.toggle' ); ``` The `registerComponent` function creates a custom UI component that tracks the effect's enabled state. The `insertOrderComponent` method adds it to the navigation bar. Clicking the button toggles the effect while preserving all settings. ## Managing Effects Retrieve and inspect effects applied to a block: ```typescript highlight-manage-effects // Retrieve all effects on the block const effects = engine.block.getEffects(imageBlock); // eslint-disable-next-line no-console console.log('Number of effects:', effects.length); // 1 // Check if block supports effects const supportsEffects = engine.block.supportsEffects(imageBlock); // eslint-disable-next-line no-console console.log('Supports effects:', supportsEffects); // true ``` Use `getEffects()` to access all effects on a block and `supportsEffects()` to verify compatibility before applying. ## Troubleshooting ### LUT Not Rendering - Verify the LUT image URL is accessible and CORS-enabled - Confirm the image uses PNG format - Check that tile count values match the actual image grid ### Colors Look Wrong - Verify tile counts match the LUT image structure - Ensure the LUT was generated with sRGB color space ## API Reference | Method | Description | | --- | --- | | `engine.block.createEffect('//ly.img.ubq/effect/lut_filter')` | Create a LUT filter effect instance | | `engine.block.setString(effect, 'effect/lut_filter/lutFileURI', uri)` | Set the LUT image URL | | `engine.block.setInt(effect, 'effect/lut_filter/horizontalTileCount', count)` | Set horizontal tile count | | `engine.block.setInt(effect, 'effect/lut_filter/verticalTileCount', count)` | Set vertical tile count | | `engine.block.setFloat(effect, 'effect/lut_filter/intensity', value)` | Set filter intensity (0.0-1.0) | | `engine.block.appendEffect(block, effect)` | Apply effect to a block | | `engine.block.getEffects(block)` | Get all effects on a block | | `engine.block.setEffectEnabled(effect, enabled)` | Enable or disable an effect | | `engine.block.isEffectEnabled(effect)` | Check if effect is enabled | | `engine.block.removeEffect(block, index)` | Remove effect at index | | `engine.block.destroy(effect)` | Destroy an effect instance | | `engine.block.supportsEffects(block)` | Check if block supports effects | | `cesdk.ui.registerComponent(id, renderFn)` | Register a custom UI component | | `cesdk.ui.insertOrderComponent(options, component)` | Add a component to the navigation bar | ## Next Steps - [Create Custom Filters](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/create-custom-filters-c796ba/) - Register custom LUT filters as asset sources - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Learn more about the effects system - [Duotone Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/duotone-831fc5/) - Create two-color artistic treatments --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Distortion Effects" description: "Apply distortion effects to warp, shift, and transform design elements for dynamic artistic visuals in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/distortion-5b5a66/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Distortion](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/distortion-5b5a66/) --- Apply distortion effects to warp, shift, and transform images and videos for dynamic artistic visuals.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-distortion-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-distortion-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-distortion-browser/) Distortion effects differ from color filters in that they modify the geometry and spatial arrangement of pixels rather than their color values. CE.SDK provides several distortion effect types: liquid warping, mirror reflections, color channel shifting, radial pixelation, and TV glitch. Each effect offers configurable parameters to control the intensity and style of the distortion. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-distortion-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Distortion Effects Guide * * Demonstrates applying various distortion effects to image blocks: * - Checking effect support * - Applying liquid distortion * - Applying mirror effect * - Applying shifter (chromatic aberration) * - Applying radial pixel effect * - Applying TV glitch effect * - Combining multiple distortion effects * - Managing effects (enable/disable/remove) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); // Calculate responsive grid layout based on page dimensions const layout = calculateGridLayout(pageWidth, pageHeight, 6); const { blockWidth, blockHeight, getPosition } = layout; // Use a sample image URL const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const blockSize = { width: blockWidth, height: blockHeight }; // Create a sample block to demonstrate effect support checking const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects before applying them const supportsEffects = engine.block.supportsEffects(sampleBlock); console.log('Block supports effects:', supportsEffects); // Create an image block for liquid distortion demonstration const liquidBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, liquidBlock); // Create and apply liquid effect - creates flowing, organic warping const liquidEffect = engine.block.createEffect('liquid'); engine.block.setFloat(liquidEffect, 'effect/liquid/amount', 0.5); engine.block.setFloat(liquidEffect, 'effect/liquid/scale', 1.0); engine.block.setFloat(liquidEffect, 'effect/liquid/time', 0.0); engine.block.appendEffect(liquidBlock, liquidEffect); // Create an image block for mirror effect demonstration const mirrorBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, mirrorBlock); // Create and apply mirror effect - reflects image along a side const mirrorEffect = engine.block.createEffect('mirror'); // Side values: 0 = Left, 1 = Right, 2 = Top, 3 = Bottom engine.block.setInt(mirrorEffect, 'effect/mirror/side', 0); engine.block.appendEffect(mirrorBlock, mirrorEffect); // Create an image block for shifter effect demonstration const shifterBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, shifterBlock); // Create and apply shifter effect - displaces color channels const shifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(shifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(shifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, shifterEffect); // Create an image block for radial pixel effect demonstration const radialPixelBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, radialPixelBlock); // Create and apply radial pixel effect - pixelates in circular pattern const radialPixelEffect = engine.block.createEffect('radial_pixel'); engine.block.setFloat(radialPixelEffect, 'effect/radial_pixel/radius', 0.5); engine.block.setFloat( radialPixelEffect, 'effect/radial_pixel/segments', 0.5 ); engine.block.appendEffect(radialPixelBlock, radialPixelEffect); // Create an image block for TV glitch effect demonstration const tvGlitchBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tvGlitchBlock); // Create and apply TV glitch effect - simulates analog TV interference const tvGlitchEffect = engine.block.createEffect('tv_glitch'); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion', 0.4); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion2', 0.2); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/speed', 0.5); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/rollSpeed', 0.1); engine.block.appendEffect(tvGlitchBlock, tvGlitchEffect); // Get all effects applied to a block const effects = engine.block.getEffects(tvGlitchBlock); console.log('Applied effects:', effects); // Get the type of each effect effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); // Check if an effect is enabled const isEnabled = engine.block.isEffectEnabled(liquidEffect); console.log('Liquid effect enabled:', isEnabled); // Disable an effect without removing it engine.block.setEffectEnabled(liquidEffect, false); console.log( 'Liquid effect now disabled:', !engine.block.isEffectEnabled(liquidEffect) ); // Re-enable the effect engine.block.setEffectEnabled(liquidEffect, true); // To remove an effect, get its index and use removeEffect const shifterEffects = engine.block.getEffects(shifterBlock); const effectIndex = shifterEffects.indexOf(shifterEffect); if (effectIndex !== -1) { // Remove effect at the specified index engine.block.removeEffect(shifterBlock, effectIndex); // Destroy the removed effect to free memory engine.block.destroy(shifterEffect); } // Re-add the effect for display purposes const newShifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(newShifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(newShifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, newShifterEffect); // Find all available properties for an effect const tvGlitchProperties = engine.block.findAllProperties(tvGlitchEffect); console.log('TV glitch properties:', tvGlitchProperties); // Position all blocks in grid layout const blocks = [ sampleBlock, liquidBlock, mirrorBlock, shifterBlock, radialPixelBlock, tvGlitchBlock ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Select the liquid effect block (second block) and open the effects panel engine.block.select(liquidBlock); cesdk.ui.openPanel('//ly.img.panel/inspector/effects'); console.log('Distortion effects guide initialized.'); } } export default Example; ``` This guide covers how to enable distortion effects in the built-in UI and how to apply and configure them programmatically using the block API. ## Using the Built-in Distortion UI To enable distortion effects in the inspector panel, use the Feature API: ```typescript highlight-enable-effects // Enable effects in the inspector panel using the Feature API cesdk.feature.enable('ly.img.effect'); ``` Once enabled, users can access distortion effects from the inspector when selecting an image or video block. The effects panel displays available distortions with real-time preview as parameters are adjusted. ## Check Effect Support Before applying distortion effects, verify the block supports them. Graphic blocks with image or video fills support effects, while scene blocks do not. ```typescript highlight-check-support // Create a sample block to demonstrate effect support checking const sampleBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, sampleBlock); // Check if a block supports effects before applying them const supportsEffects = engine.block.supportsEffects(sampleBlock); console.log('Block supports effects:', supportsEffects); ``` ## Apply Liquid Effect The liquid effect creates organic, flowing distortions that warp the image as if viewed through water. We can configure the intensity and scale of the warping. ```typescript highlight-liquid-effect // Create an image block for liquid distortion demonstration const liquidBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, liquidBlock); // Create and apply liquid effect - creates flowing, organic warping const liquidEffect = engine.block.createEffect('liquid'); engine.block.setFloat(liquidEffect, 'effect/liquid/amount', 0.5); engine.block.setFloat(liquidEffect, 'effect/liquid/scale', 1.0); engine.block.setFloat(liquidEffect, 'effect/liquid/time', 0.0); engine.block.appendEffect(liquidBlock, liquidEffect); ``` The liquid effect parameters: - **amount** (0.0 to 1.0) - Controls the intensity of the warping - **scale** - Adjusts the size of the liquid pattern - **time** - Animation time offset for animated liquid distortions ## Apply Mirror Effect The mirror effect reflects the image along a configurable side, creating symmetrical compositions. ```typescript highlight-mirror-effect // Create an image block for mirror effect demonstration const mirrorBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, mirrorBlock); // Create and apply mirror effect - reflects image along a side const mirrorEffect = engine.block.createEffect('mirror'); // Side values: 0 = Left, 1 = Right, 2 = Top, 3 = Bottom engine.block.setInt(mirrorEffect, 'effect/mirror/side', 0); engine.block.appendEffect(mirrorBlock, mirrorEffect); ``` The `side` parameter uses integer values: `0` (Left), `1` (Right), `2` (Top), or `3` (Bottom) to specify the reflection axis. ## Apply Shifter Effect The shifter effect displaces color channels at an angle, creating chromatic aberration commonly seen in glitch art and retro visuals. ```typescript highlight-shifter-effect // Create an image block for shifter effect demonstration const shifterBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, shifterBlock); // Create and apply shifter effect - displaces color channels const shifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(shifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(shifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, shifterEffect); ``` The shifter effect parameters: - **amount** (0.0 to 1.0) - Controls the displacement distance - **angle** - Sets the direction of the shift in radians ## Apply Radial Pixel Effect The radial pixel effect pixelates the image in a circular pattern emanating from the center, useful for focus effects or stylized treatments. ```typescript highlight-radial-pixel-effect // Create an image block for radial pixel effect demonstration const radialPixelBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, radialPixelBlock); // Create and apply radial pixel effect - pixelates in circular pattern const radialPixelEffect = engine.block.createEffect('radial_pixel'); engine.block.setFloat(radialPixelEffect, 'effect/radial_pixel/radius', 0.5); engine.block.setFloat( radialPixelEffect, 'effect/radial_pixel/segments', 0.5 ); engine.block.appendEffect(radialPixelBlock, radialPixelEffect); ``` The radial pixel effect parameters: - **radius** (0.0 to 1.0) - Controls the size of the pixelation effect - **segments** (0.0 to 1.0) - Controls the angular segmentation intensity ## Apply TV Glitch Effect The TV glitch effect simulates analog television interference with horizontal distortion and rolling effects, popular for retro and digital aesthetics. ```typescript highlight-tv-glitch-effect // Create an image block for TV glitch effect demonstration const tvGlitchBlock = await engine.block.addImage(imageUri, { size: blockSize }); engine.block.appendChild(page, tvGlitchBlock); // Create and apply TV glitch effect - simulates analog TV interference const tvGlitchEffect = engine.block.createEffect('tv_glitch'); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion', 0.4); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/distortion2', 0.2); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/speed', 0.5); engine.block.setFloat(tvGlitchEffect, 'effect/tv_glitch/rollSpeed', 0.1); engine.block.appendEffect(tvGlitchBlock, tvGlitchEffect); ``` The TV glitch effect parameters: - **distortion** - Primary horizontal distortion intensity - **distortion2** - Secondary distortion layer - **speed** - Animation speed for the glitch effect - **rollSpeed** - Vertical roll speed simulating signal sync issues ## List Applied Effects Retrieve all effects applied to a block to inspect or iterate over them. ```typescript highlight-get-effects // Get all effects applied to a block const effects = engine.block.getEffects(tvGlitchBlock); console.log('Applied effects:', effects); // Get the type of each effect effects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); ``` This returns an array of effect IDs in the order they were applied. ## Enable and Disable Effects Toggle effects on and off without removing them from the block. This preserves all effect parameters while controlling visibility. ```typescript highlight-toggle-effect // Check if an effect is enabled const isEnabled = engine.block.isEffectEnabled(liquidEffect); console.log('Liquid effect enabled:', isEnabled); // Disable an effect without removing it engine.block.setEffectEnabled(liquidEffect, false); console.log( 'Liquid effect now disabled:', !engine.block.isEffectEnabled(liquidEffect) ); // Re-enable the effect engine.block.setEffectEnabled(liquidEffect, true); ``` Disabled effects remain attached to the block but won't be rendered until re-enabled. This is useful for before/after comparisons or performance optimization. ## Remove Effects Remove effects from a block when they're no longer needed. Always destroy removed effects to free memory. ```typescript highlight-remove-effect // To remove an effect, get its index and use removeEffect const shifterEffects = engine.block.getEffects(shifterBlock); const effectIndex = shifterEffects.indexOf(shifterEffect); if (effectIndex !== -1) { // Remove effect at the specified index engine.block.removeEffect(shifterBlock, effectIndex); // Destroy the removed effect to free memory engine.block.destroy(shifterEffect); } // Re-add the effect for display purposes const newShifterEffect = engine.block.createEffect('shifter'); engine.block.setFloat(newShifterEffect, 'effect/shifter/amount', 0.3); engine.block.setFloat(newShifterEffect, 'effect/shifter/angle', 0.785); engine.block.appendEffect(shifterBlock, newShifterEffect); ``` ## Discover Effect Properties Use `findAllProperties()` to discover all available properties for any effect type. ```typescript highlight-effect-properties // Find all available properties for an effect const tvGlitchProperties = engine.block.findAllProperties(tvGlitchEffect); console.log('TV glitch properties:', tvGlitchProperties); ``` This returns an array of property paths that can be used with `setFloat()`, `setInt()`, or `setEnum()`. ## API Reference | Method | Description | |--------|-------------| | `engine.block.supportsEffects(id)` | Check if a block supports effects | | `engine.block.createEffect(type)` | Create a new effect instance | | `engine.block.appendEffect(id, effectId)` | Add an effect to a block | | `engine.block.getEffects(id)` | Get all effects applied to a block | | `engine.block.setEffectEnabled(effectId, enabled)` | Enable or disable an effect | | `engine.block.isEffectEnabled(effectId)` | Check if an effect is enabled | | `engine.block.removeEffect(id, index)` | Remove an effect at a specific index | | `engine.block.findAllProperties(id)` | Discover all properties of an effect | | `engine.block.setFloat(id, property, value)` | Set a float property value | | `engine.block.setInt(id, property, value)` | Set an integer property value | | `engine.block.destroy(id)` | Destroy a block to free memory | | `engine.block.getType(id)` | Get the type of a block | ## Available Distortion Effects | Effect Type | Description | Key Properties | |-------------|-------------|----------------| | `liquid` | Flowing, organic warping | `amount`, `scale`, `time` | | `mirror` | Reflection along a side | `side` (0=Left, 1=Right, 2=Top, 3=Bottom) | | `shifter` | Chromatic aberration | `amount`, `angle` | | `radial_pixel` | Circular pixelation | `radius`, `segments` | | `tv_glitch` | Analog TV interference | `distortion`, `distortion2`, `speed`, `rollSpeed` | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Learn the foundational effect APIs - [Blur Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/blur-71d642/) - Apply blur techniques for depth and focus effects --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Duotone" description: "Apply duotone effects to images, mapping tones to two colors for stylized visuals, vintage aesthetics, or brand-specific treatments." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/duotone-831fc5/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Duotone](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/duotone-831fc5/) --- Apply duotone effects to images, mapping tones to two colors for stylized visuals and brand-specific treatments.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-duotone-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-duotone-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-duotone-browser/) Duotone is a color effect that maps image brightness to two colors: a dark color for shadows and a light color for highlights. The result is a striking two-tone image where all original colors are replaced by gradations between your chosen pair. This technique creates bold, cohesive visuals that are particularly effective for brand consistency, vintage aesthetics, and artistic treatments. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-duotone-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { hexToRgba } from './utils'; /** * CE.SDK Plugin: Duotone Guide * * Demonstrates applying duotone effects to image blocks: * - Querying duotone presets from the asset library * - Applying duotone with preset colors * - Creating custom duotone color combinations * - Managing and removing effects */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable duotone filters in the inspector panel cesdk.feature.enable('ly.img.filter'); // Use a sample image URL const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; // Create image block for preset demonstration const presetImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, presetImageBlock); engine.block.setPositionX(presetImageBlock, 25); engine.block.setPositionY(presetImageBlock, 25); // Verify a block supports effects before applying them const canApplyEffects = engine.block.supportsEffects(presetImageBlock); if (!canApplyEffects) { console.warn('Block does not support effects'); return; } // Query duotone presets from the asset library const duotoneResults = await engine.asset.findAssets( 'ly.img.filter', { page: 0, perPage: 10 } ); const duotonePresets = duotoneResults.assets; // Apply a preset to the first image if (duotonePresets.length > 0) { const preset = duotonePresets[0]; // Create a new duotone effect block const duotoneEffect = engine.block.createEffect('duotone_filter'); // Configure effect with preset colors (convert hex to RGBA) if (preset.meta?.darkColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', hexToRgba(preset.meta.darkColor as string) ); } if (preset.meta?.lightColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', hexToRgba(preset.meta.lightColor as string) ); } engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.9 ); // Attach the configured effect to the image block engine.block.appendEffect(presetImageBlock, duotoneEffect); } // Create image block for custom duotone demonstration const customImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, customImageBlock); engine.block.setPositionX(customImageBlock, 425); engine.block.setPositionY(customImageBlock, 25); // Create duotone with custom brand colors const customDuotone = engine.block.createEffect('duotone_filter'); // Dark color: deep navy blue (shadows) engine.block.setColor(customDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); // Light color: warm cream (highlights) engine.block.setColor(customDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 }); // Control effect strength (0.0 = original, 1.0 = full duotone) engine.block.setFloat( customDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, customDuotone); // Create image block for combined effects demonstration const combinedImageBlock = await engine.block.addImage(imageUri, { size: { width: 350, height: 250 } }); engine.block.appendChild(page, combinedImageBlock); engine.block.setPositionX(combinedImageBlock, 225); engine.block.setPositionY(combinedImageBlock, 325); // Combine duotone with other effects // First, add adjustments for brightness and contrast const adjustments = engine.block.createEffect('adjustments'); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.1); engine.block.setFloat(adjustments, 'effect/adjustments/contrast', 0.15); engine.block.appendEffect(combinedImageBlock, adjustments); // Then add duotone on top const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/darkColor', { r: 0.2, g: 0.1, b: 0.3, a: 1.0 } // Deep purple ); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/lightColor', { r: 1.0, g: 0.85, b: 0.7, a: 1.0 } // Warm peach ); engine.block.setFloat( combinedDuotone, 'effect/duotone_filter/intensity', 0.75 ); engine.block.appendEffect(combinedImageBlock, combinedDuotone); // Get all effects currently applied to a block const appliedEffects = engine.block.getEffects(presetImageBlock); console.log(`Block has ${appliedEffects.length} effect(s) applied`); // Disable an effect without removing it if (appliedEffects.length > 0) { engine.block.setEffectEnabled(appliedEffects[0], false); // Check if an effect is currently enabled const isEnabled = engine.block.isEffectEnabled(appliedEffects[0]); console.log(`Effect enabled: ${isEnabled}`); // Re-enable the effect engine.block.setEffectEnabled(appliedEffects[0], true); } // Remove an effect at a specific index from a block const effectsOnCustom = engine.block.getEffects(customImageBlock); if (effectsOnCustom.length > 0) { engine.block.removeEffect(customImageBlock, 0); } // Destroy removed effect blocks to free memory if (effectsOnCustom.length > 0) { engine.block.destroy(effectsOnCustom[0]); } // Re-apply custom duotone after demonstration const newCustomDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor(newCustomDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); engine.block.setColor( newCustomDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 } ); engine.block.setFloat( newCustomDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, newCustomDuotone); // Select the first image block to show the effects panel engine.block.select(presetImageBlock); console.log( 'Duotone guide initialized. Select any image to see the filters panel.' ); } } export default Example; ``` ## Understanding Duotone Unlike filters that simply tint or shift colors, duotone completely remaps the tonal range of an image. The effect analyzes each pixel's luminosity and assigns a color based on where it falls between pure black and pure white: - **Dark tones** (shadows, blacks) adopt the dark color - **Light tones** (highlights, whites) adopt the light color - **Midtones** blend between the two colors This creates images with a consistent color palette regardless of the original colors, making duotone ideal for: - **Brand consistency** - Apply your brand's color palette across diverse imagery - **Visual cohesion** - Unify photos from different sources in a design - **Vintage aesthetics** - Recreate classic print techniques like cyanotype or sepia - **Bold statements** - Create eye-catching visuals for social media or marketing The intensity property lets you blend between the original image and the full duotone effect, giving you creative control over how strongly the effect is applied. ## Using the Built-in Duotone UI CE.SDK provides a filters panel where users can browse and apply duotone presets interactively. To enable this, use the Feature API: ```typescript highlight=highlight-enable-filters // Enable duotone filters in the inspector panel cesdk.feature.enable('ly.img.filter'); ``` With filters enabled, users can: 1. Select any image block in the canvas 2. Open the inspector panel 3. Navigate to the Filters section 4. Browse available duotone presets and apply with a single click 5. Adjust the intensity slider to control effect strength ## Check Effect Support Before applying effects programmatically, verify the block supports them. Only graphic blocks with image or video fills can have effects applied: ```typescript highlight=highlight-check-support // Verify a block supports effects before applying them const canApplyEffects = engine.block.supportsEffects(presetImageBlock); if (!canApplyEffects) { console.warn('Block does not support effects'); return; } ``` Attempting to apply effects to unsupported blocks (like text or shapes without fills) will result in an error. ## Applying Duotone Presets CE.SDK includes a library of professionally designed duotone presets. Each preset defines a dark/light color pair optimized for visual appeal. ### Query Built-in Presets Use the Asset API to retrieve available duotone presets from the asset library: ```typescript highlight=highlight-query-presets // Query duotone presets from the asset library const duotoneResults = await engine.asset.findAssets( 'ly.img.filter', { page: 0, perPage: 10 } ); const duotonePresets = duotoneResults.assets; ``` Preset metadata contains `darkColor` and `lightColor` as hex strings. Convert these to RGBA format (values 0-1) before passing to the effect API. ### Create Effect Block Create a new duotone effect block that can be configured and attached to an image: ```typescript highlight=highlight-create-effect // Create a new duotone effect block const duotoneEffect = engine.block.createEffect('duotone_filter'); ``` ### Configure Preset Colors Apply the preset's color values to the effect using `setColor()` for colors and `setFloat()` for intensity: ```typescript highlight=highlight-apply-preset // Configure effect with preset colors (convert hex to RGBA) if (preset.meta?.darkColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/darkColor', hexToRgba(preset.meta.darkColor as string) ); } if (preset.meta?.lightColor) { engine.block.setColor( duotoneEffect, 'effect/duotone_filter/lightColor', hexToRgba(preset.meta.lightColor as string) ); } engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.9 ); ``` ### Append Effect to Block Attach the fully configured effect to an image block: ```typescript highlight=highlight-append-effect // Attach the configured effect to the image block engine.block.appendEffect(presetImageBlock, duotoneEffect); ``` ## Creating Custom Colors For brand-specific treatments or unique creative effects, define your own color combinations using `engine.block.setColor()`: ```typescript highlight=highlight-custom-colors // Create duotone with custom brand colors const customDuotone = engine.block.createEffect('duotone_filter'); // Dark color: deep navy blue (shadows) engine.block.setColor(customDuotone, 'effect/duotone_filter/darkColor', { r: 0.1, g: 0.15, b: 0.3, a: 1.0 }); // Light color: warm cream (highlights) engine.block.setColor(customDuotone, 'effect/duotone_filter/lightColor', { r: 0.95, g: 0.9, b: 0.8, a: 1.0 }); // Control effect strength (0.0 = original, 1.0 = full duotone) engine.block.setFloat( customDuotone, 'effect/duotone_filter/intensity', 0.85 ); engine.block.appendEffect(customImageBlock, customDuotone); ``` ### Choosing Effective Color Pairs The relationship between your dark and light colors determines the final aesthetic: | Color Relationship | Visual Effect | Example Use Case | | --- | --- | --- | | **High contrast** | Bold, graphic look | Social media, posters | | **Low contrast** | Subtle, sophisticated | Editorial, luxury brands | | **Warm to cool** | Dynamic temperature shift | Lifestyle, fashion | | **Monochromatic** | Tinted photography style | Vintage, noir aesthetic | **Classic combinations to try:** - **Cyanotype**: Deep blue (`#1a365d`) to light cyan (`#e0f7fa`) - **Sepia**: Dark brown (`#3e2723`) to cream (`#fff8e1`) - **Neon**: Deep purple (`#1a1a2e`) to hot pink (`#ff1493`) - **Corporate**: Navy (`#0d47a1`) to silver (`#eceff1`) > **Tip:** Start with colors from your brand palette. Use your primary brand color as the light color for highlights, paired with a darker complementary shade for shadows. ## Combining with Other Effects Duotone can be stacked with other effects like brightness adjustments, contrast, or blur. Effects are applied in stack order, so the sequence affects the final result: ```typescript highlight=highlight-combine-effects // Combine duotone with other effects // First, add adjustments for brightness and contrast const adjustments = engine.block.createEffect('adjustments'); engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.1); engine.block.setFloat(adjustments, 'effect/adjustments/contrast', 0.15); engine.block.appendEffect(combinedImageBlock, adjustments); // Then add duotone on top const combinedDuotone = engine.block.createEffect('duotone_filter'); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/darkColor', { r: 0.2, g: 0.1, b: 0.3, a: 1.0 } // Deep purple ); engine.block.setColor( combinedDuotone, 'effect/duotone_filter/lightColor', { r: 1.0, g: 0.85, b: 0.7, a: 1.0 } // Warm peach ); engine.block.setFloat( combinedDuotone, 'effect/duotone_filter/intensity', 0.75 ); engine.block.appendEffect(combinedImageBlock, combinedDuotone); ``` **Effect order matters**: In this example, brightness and contrast are applied first, then duotone maps the adjusted tones. Reversing the order would apply duotone first, then adjust the duotone colors' brightness—producing a different result. Common combinations: - **Adjustments → Duotone**: Optimize image contrast before applying duotone for better tonal separation - **Duotone → Vignette**: Add depth with darkened edges after the color treatment - **Blur → Duotone**: Create dreamy, soft-focus duotone backgrounds ## Managing Duotone Effects Once effects are applied to a block, you can list, toggle, and remove them programmatically. ### List Applied Effects Retrieve all effect block IDs currently attached to a block: ```typescript highlight=highlight-list-effects // Get all effects currently applied to a block const appliedEffects = engine.block.getEffects(presetImageBlock); ``` ### Toggle Effect Visibility Disable an effect temporarily without removing it from the block: ```typescript highlight=highlight-toggle-effects // Disable an effect without removing it if (appliedEffects.length > 0) { engine.block.setEffectEnabled(appliedEffects[0], false); // Check if an effect is currently enabled const isEnabled = engine.block.isEffectEnabled(appliedEffects[0]); console.log(`Effect enabled: ${isEnabled}`); // Re-enable the effect engine.block.setEffectEnabled(appliedEffects[0], true); } ``` ### Remove Effects Detach an effect from a block by specifying its index in the effect stack: ```typescript highlight=highlight-remove-effect // Remove an effect at a specific index from a block const effectsOnCustom = engine.block.getEffects(customImageBlock); if (effectsOnCustom.length > 0) { engine.block.removeEffect(customImageBlock, 0); } ``` ### Clean Up Resources After removing an effect, destroy it to free memory: ```typescript highlight=highlight-cleanup-effect // Destroy removed effect blocks to free memory if (effectsOnCustom.length > 0) { engine.block.destroy(effectsOnCustom[0]); } ``` > **Caution:** When removing effects, always destroy the effect block afterward to prevent memory leaks. Effects are independent blocks that persist until explicitly destroyed. ### Duotone Properties | Property | Type | Range | Description | | --- | --- | --- | --- | | `effect/duotone_filter/darkColor` | Color | RGBA (0-1) | Color applied to shadows and dark tones | | `effect/duotone_filter/lightColor` | Color | RGBA (0-1) | Color applied to highlights and light tones | | `effect/duotone_filter/intensity` | Float | 0.0 - 1.0 | Effect strength (0 = original, 1 = full duotone) | **Intensity guidelines:** - `0.5 - 0.7`: Subtle tint, original image still recognizable - `0.8 - 0.9`: Strong duotone effect, ideal for most use cases - `1.0`: Full duotone, no original colors remain ## Best Practices ### Performance Considerations - **Batch effect creation**: When applying the same duotone to multiple images, create the effect once and clone it rather than creating new effects for each block - **Limit effect stacking**: Each additional effect increases render time; keep stacks minimal for real-time editing - **Clean up unused effects**: Always destroy effect blocks when they're no longer needed to free GPU resources - **Disable rather than remove**: For temporary changes, use `setEffectEnabled(false)` instead of removing and re-creating effects ### Common Issues **Duotone not visible**: Verify the block supports effects with `engine.block.supportsEffects(block)`. Only graphic blocks with image or video fills support effects. **Colors look wrong**: Ensure RGBA values are in the 0-1 range, not 0-255. For example, use `{ r: 0.5, g: 0.5, b: 0.5, a: 1.0 }` instead of `{ r: 128, g: 128, b: 128, a: 255 }`. **Effect too subtle or overwhelming**: Adjust the intensity property. Start at 0.85 and tune based on your image content and color choices. **Muddy midtones**: If midtones look flat, increase contrast between your dark and light colors, or add an adjustments effect before duotone to improve tonal separation. ## API Reference ### Effect Methods | Method | Description | | --- | --- | | `engine.asset.findAssets(sourceId, query)` | Queries assets from an asset source | | `engine.block.supportsEffects(block)` | Returns `true` if the block can have effects applied | | `engine.block.createEffect(type)` | Creates a new effect block of the specified type | | `engine.block.setColor(block, property, color)` | Sets a color property on a block | | `engine.block.setFloat(block, property, value)` | Sets a float property on a block | | `engine.block.appendEffect(block, effect)` | Appends an effect to a block's effect stack | | `engine.block.getEffects(block)` | Returns array of effect block IDs applied to a block | | `engine.block.setEffectEnabled(effect, enabled)` | Enables or disables an effect | | `engine.block.isEffectEnabled(effect)` | Returns `true` if the effect is enabled | | `engine.block.removeEffect(block, index)` | Removes an effect at the given index from a block | | `engine.block.destroy(block)` | Destroys a block and frees resources | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Gradient Fills" description: "Learn how to create and apply linear, radial, and conical gradient fills to design elements in CE.SDK" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/gradients-0ff079/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) > [Gradient](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/gradients-0ff079/) --- Create smooth color transitions in shapes, text, and design blocks using CE.SDK's gradient fill system with support for linear, radial, and conical gradients.  > **Reading time:** 20 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-gradient-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-gradient-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-gradient-browser/) Gradient fills are one of the fundamental fill types in CE.SDK, allowing you to paint design blocks with smooth color transitions. Unlike solid color fills that apply a uniform color or image fills that display photo content, gradient fills create dynamic visual effects with depth and visual interest. The gradient fill system supports three types: linear gradients that transition along a straight line, radial gradients that emanate from a center point, and conical gradients that rotate around a center point like a color wheel. ```typescript file=@cesdk_web_examples/guides-fills-gradient-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { calculateGridLayout } from './utils'; /** * CE.SDK Plugin: Gradient Fills Guide * * This example demonstrates: * - Creating linear, radial, and conical gradient fills * - Configuring gradient color stops * - Positioning gradients * - Using different color spaces in gradients * - Advanced gradient techniques */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const engine = cesdk.engine; const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine }); console.log('Fill feature enabled:', isFillEnabled); // Create a design scene using CE.SDK cesdk method await cesdk.actions.run('scene.create', { page: { width: 1200, height: 900, unit: 'Pixel' } }); // Get the page const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background to light gray const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Calculate responsive grid layout based on page dimensions const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, 15); const { blockWidth, blockHeight, getPosition } = layout; // Helper function to create a shape with a fill const createShapeWithFill = ( fillType: 'gradient/linear' | 'gradient/radial' | 'gradient/conical' ): { block: number; fill: number } => { const block = engine.block.create('graphic'); const shape = engine.block.createShape('rect'); engine.block.setShape(block, shape); // Set size engine.block.setWidth(block, blockWidth); engine.block.setHeight(block, blockHeight); // Append to page engine.block.appendChild(page, block); // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } // Create gradient fill const gradientFill = engine.block.createFill(fillType); // Apply the fill to the block engine.block.setFill(block, gradientFill); return { block, fill: gradientFill }; }; // ============================================================================= // Example 1: Linear Gradient (Vertical) // ============================================================================= const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearVertical, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 } ]); // Set vertical gradient (top to bottom) engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(linearVertical, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 2: Linear Gradient (Horizontal) // ============================================================================= const { block: linearHorizontalBlock, fill: linearHorizontal } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( linearHorizontal, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.4, a: 1.0 }, stop: 0 }, { color: { r: 0.2, g: 0.8, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Set horizontal gradient (left to right) engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/endPointX', 1 ); engine.block.setFloat( linearHorizontal, 'fill/gradient/linear/endPointY', 0.5 ); // ============================================================================= // Example 3: Linear Gradient (Diagonal) // ============================================================================= const { block: linearDiagonalBlock, fill: linearDiagonal } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearDiagonal, 'fill/gradient/colors', [ { color: { r: 0.5, g: 0.2, b: 0.8, a: 1.0 }, stop: 0 }, { color: { r: 0.9, g: 0.6, b: 0.2, a: 1.0 }, stop: 1 } ]); // Set diagonal gradient (top-left to bottom-right) engine.block.setFloat( linearDiagonal, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( linearDiagonal, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(linearDiagonal, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearDiagonal, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 4: Multi-Stop Linear Gradient (Aurora Effect) // ============================================================================= const { block: auroraGradientBlock, fill: auroraGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(auroraGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/endPointY', 0.5 ); // ============================================================================= // Example 5: Radial Gradient (Centered) // ============================================================================= const { block: radialCenteredBlock, fill: radialCentered } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops(radialCentered, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ]); // Set center point (middle of block) engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialCentered, 'fill/gradient/radial/radius', 0.8); // ============================================================================= // Example 6: Radial Gradient (Top-Left Highlight) // ============================================================================= const { block: radialHighlightBlock, fill: radialHighlight } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops( radialHighlight, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ] ); // Set top-left highlight engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointX', 0 ); engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointY', 0 ); engine.block.setFloat(radialHighlight, 'fill/gradient/radial/radius', 1.0); // ============================================================================= // Example 7: Radial Gradient (Vignette Effect) // ============================================================================= const { block: radialVignetteBlock, fill: radialVignette } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops(radialVignette, 'fill/gradient/colors', [ { color: { r: 0.9, g: 0.9, b: 0.9, a: 1.0 }, stop: 0 }, { color: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 }, stop: 1 } ]); // Centered vignette engine.block.setFloat( radialVignette, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialVignette, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialVignette, 'fill/gradient/radial/radius', 0.6); // ============================================================================= // Example 8: Conical Gradient (Color Wheel) // ============================================================================= const { block: conicalColorWheelBlock, fill: conicalColorWheel } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops( conicalColorWheel, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 0 }, { color: { r: 1.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.25 }, { color: { r: 0.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.5 }, { color: { r: 0.0, g: 0.0, b: 1.0, a: 1 }, stop: 0.75 }, { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 1 } ] ); // Set center point (middle of block) engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointY', 0.5 ); // ============================================================================= // Example 9: Conical Gradient (Loading Spinner) // ============================================================================= const { block: conicalSpinnerBlock, fill: conicalSpinner } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops(conicalSpinner, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 0 }, stop: 0.75 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 1 } ]); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointY', 0.5 ); // ============================================================================= // Example 10: Gradient with CMYK Colors // ============================================================================= const { block: cmykGradientBlock, fill: cmykGradient } = createShapeWithFill('gradient/linear'); // CMYK color stops for print engine.block.setGradientColorStops(cmykGradient, 'fill/gradient/colors', [ { color: { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 1.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat( cmykGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointY', 0.5); // ============================================================================= // Example 11: Gradient with Spot Colors // ============================================================================= // First define spot colors engine.editor.setSpotColorRGB('BrandPrimary', 0.2, 0.4, 0.8); engine.editor.setSpotColorRGB('BrandSecondary', 1.0, 0.6, 0.0); const { block: spotGradientBlock, fill: spotGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(spotGradient, 'fill/gradient/colors', [ { color: { name: 'BrandPrimary', tint: 1.0, externalReference: '' }, stop: 0 }, { color: { name: 'BrandSecondary', tint: 1.0, externalReference: '' }, stop: 1 } ]); engine.block.setFloat(spotGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(spotGradient, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(spotGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(spotGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 12: Transparency Overlay Gradient // ============================================================================= const { block: overlayGradientBlock, fill: overlayGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( overlayGradient, 'fill/gradient/colors', [ { color: { r: 0.0, g: 0.0, b: 0.0, a: 0 }, stop: 0 }, { color: { r: 0.0, g: 0.0, b: 0.0, a: 0.7 }, stop: 1 } ] ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(overlayGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 13: Duotone Gradient // ============================================================================= const { block: duotoneGradientBlock, fill: duotoneGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( duotoneGradient, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.9, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.9, b: 0.8, a: 1 }, stop: 1 } ] ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointY', 1); // ============================================================================= // Example 14: Shared Gradient Fill // ============================================================================= const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, blockWidth); engine.block.setHeight(block1, blockHeight / 2 - 5); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, blockWidth); engine.block.setHeight(block2, blockHeight / 2 - 5); engine.block.appendChild(page, block2); // Create one gradient fill const sharedGradient = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(sharedGradient, 'fill/gradient/colors', [ { color: { r: 1, g: 0, b: 0, a: 1 }, stop: 0 }, { color: { r: 0, g: 0, b: 1, a: 1 }, stop: 1 } ]); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(sharedGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/endPointY', 0.5 ); // Apply to both blocks engine.block.setFill(block1, sharedGradient); engine.block.setFill(block2, sharedGradient); // Change gradient after a delay to show it affects both setTimeout(() => { engine.block.setGradientColorStops( sharedGradient, 'fill/gradient/colors', [ { color: { r: 0, g: 1, b: 0, a: 1 }, stop: 0 }, { color: { r: 1, g: 1, b: 0, a: 1 }, stop: 1 } ] ); }, 2000); // ============================================================================= // Example 15: Get Gradient Properties // ============================================================================= const { block: inspectGradientBlock, fill: inspectGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( inspectGradient, 'fill/gradient/colors', [ { color: { r: 0.6, g: 0.3, b: 0.7, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.7, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Get current fill from block const fillId = engine.block.getFill(block1); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/gradient/linear' // Get gradient color stops const colorStops = engine.block.getGradientColorStops( inspectGradient, 'fill/gradient/colors' ); // eslint-disable-next-line no-console console.log('Color stops:', colorStops); // Get linear gradient position const startX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointX' ); const startY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointY' ); const endX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointX' ); const endY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointY' ); // eslint-disable-next-line no-console console.log('Linear gradient position:', { startX, startY, endX, endY }); // ===== Position all blocks in grid layout ===== const blocks = [ linearVerticalBlock, // Position 0 linearHorizontalBlock, // Position 1 linearDiagonalBlock, // Position 2 auroraGradientBlock, // Position 3 radialCenteredBlock, // Position 4 radialHighlightBlock, // Position 5 radialVignetteBlock, // Position 6 conicalColorWheelBlock, // Position 7 conicalSpinnerBlock, // Position 8 cmykGradientBlock, // Position 9 spotGradientBlock, // Position 10 overlayGradientBlock, // Position 11 duotoneGradientBlock, // Position 12 block1, // Position 13 (top half) inspectGradientBlock // Position 14 ]; blocks.forEach((block, index) => { const pos = getPosition(index); engine.block.setPositionX(block, pos.x); engine.block.setPositionY(block, pos.y); }); // Position block2 below block1 in the same grid cell const block1Pos = getPosition(13); engine.block.setPositionX(block2, block1Pos.x); engine.block.setPositionY(block2, block1Pos.y + blockHeight / 2 + 5); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: { left: 40, top: 40, right: 40, bottom: 40 } }); } } export default Example; ``` This guide demonstrates how to create, apply, and configure gradient fills programmatically, work with color stops, position gradients, and create modern visual effects like aurora gradients and button highlights. ## Understanding Gradient Fills ### What is a Gradient Fill? A gradient fill is a fill object that paints a design block with smooth color transitions. Gradient fills are part of the broader fill system in CE.SDK and come in three types, each identified by a unique type string: - **Linear**: `'//ly.img.ubq/fill/gradient/linear'` or `'gradient/linear'` - **Radial**: `'//ly.img.ubq/fill/gradient/radial'` or `'gradient/radial'` - **Conical**: `'//ly.img.ubq/fill/gradient/conical'` or `'gradient/conical'` Each gradient type contains color stops that define colors at specific positions and positioning properties that control the gradient's direction and coverage. ### Gradient Types Comparison #### Linear Gradients Linear gradients transition colors along a straight line defined by start and end points. They're the most common gradient type and create clean, modern looks. Common use cases include hero sections, call-to-action buttons, headers, and banners. ```typescript highlight-linear-gradient const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(linearVertical, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 } ]); ``` #### Radial Gradients Radial gradients emanate from a central point outward, creating circular or elliptical color transitions. They add depth and create focal points or spotlight effects. Common use cases include button highlights, card shadows, vignettes, and circular badges. ```typescript highlight-radial-gradient engine.block.setGradientColorStops(radialCentered, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ]); ``` #### Conical Gradients Conical gradients transition colors around a center point like a color wheel, starting at the top (12 o'clock) and rotating clockwise. Colors are specified by position rather than angle. Common use cases include pie charts, loading spinners, circular progress indicators, and color picker wheels. ```typescript highlight-conical-gradient engine.block.setGradientColorStops( conicalColorWheel, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 0 }, { color: { r: 1.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.25 }, { color: { r: 0.0, g: 1.0, b: 0.0, a: 1 }, stop: 0.5 }, { color: { r: 0.0, g: 0.0, b: 1.0, a: 1 }, stop: 0.75 }, { color: { r: 1.0, g: 0.0, b: 0.0, a: 1 }, stop: 1 } ] ); ``` ### Gradient vs Other Fill Types Understanding how gradients differ from other fill types helps you choose the right fill for your design: - **Gradient fills**: Smooth color transitions (linear, radial, conical) - **Color fills**: Solid, uniform color - **Image fills**: Photo or raster content - **Video fills**: Animated video content ### Color Stops Explained Color stops define the colors at specific positions in the gradient. Each stop consists of: - `color`: An RGB, CMYK, or Spot color value - `stop`: Position value between 0.0 and 1.0 (0% to 100%) A gradient requires a minimum of two color stops. You can add multiple stops to create complex color transitions. Color stops can use any color space supported by CE.SDK, including RGB for screen display, CMYK for print, and Spot Colors for brand consistency. ```typescript highlight-color-stops engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); ``` ## Using the Built-in Gradient UI CE.SDK provides built-in UI controls for working with gradients through the **inspector bar** and **advanced inspector**. Users can switch between solid color and gradient fills, select gradient type (linear, radial, conical), add and remove color stops visually, adjust individual stop colors, and drag gradient control points for positioning. **Note**: Currently, only **linear gradients** are fully supported in the built-in UI. Radial and conical gradients are available programmatically. ### Enabling Fill Features Gradient controls are part of the fill feature system. You can check if the fill feature is enabled and control it programmatically: ```typescript highlight-enable-fill-feature // Fill features are enabled by default in CE.SDK // You can check and control fill feature availability: const engine = cesdk.engine; const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', { engine }); console.log('Fill feature enabled:', isFillEnabled); ``` ## Checking Gradient Fill Support ### Verifying Block Compatibility Before applying gradient fills, verify that the block type supports fills. Not all blocks support fills—for example, scenes and pages typically don't. ```typescript highlight-check-fill-support // Check if block supports fills const canHaveFill = engine.block.supportsFill(block); if (!canHaveFill) { throw new Error('Block does not support fills'); } ``` Always check `supportsFill()` before accessing fill APIs. Graphic blocks, shapes, and text typically support fills. ## Creating Gradient Fills ### Creating a New Linear Gradient Create a new linear gradient fill using the `createFill()` method with the type `'gradient/linear'`: ```typescript highlight-create-linear const { block: linearVerticalBlock, fill: linearVertical } = createShapeWithFill('gradient/linear'); ``` ### Creating a Radial Gradient Create a radial gradient using the type `'gradient/radial'`: ```typescript highlight-create-radial const { block: radialCenteredBlock, fill: radialCentered } = createShapeWithFill('gradient/radial'); ``` ### Creating a Conical Gradient Create a conical gradient using the type `'gradient/conical'`: ```typescript highlight-create-conical const { block: conicalColorWheelBlock, fill: conicalColorWheel } = createShapeWithFill('gradient/conical'); ``` The `createFill()` method returns a numeric fill ID. The fill exists independently until you attach it to a block. If you create a fill but don't attach it to a block, you must destroy it manually to prevent memory leaks. ## Applying Gradient Fills ### Setting a Gradient Fill on a Block Once you've created a gradient fill, attach it to a block using `setFill()`: ```typescript highlight-apply-gradient // Create gradient fill const gradientFill = engine.block.createFill(fillType); // Apply the fill to the block engine.block.setFill(block, gradientFill); ``` ### Getting the Current Fill Retrieve the current fill attached to a block and inspect its type: ```typescript highlight-get-fill const { block: inspectGradientBlock, fill: inspectGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( inspectGradient, 'fill/gradient/colors', [ { color: { r: 0.6, g: 0.3, b: 0.7, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.7, b: 0.6, a: 1.0 }, stop: 1 } ] ); // Get current fill from block const fillId = engine.block.getFill(block1); const fillType = engine.block.getType(fillId); // eslint-disable-next-line no-console console.log('Fill type:', fillType); // '//ly.img.ubq/fill/gradient/linear' ``` ## Configuring Gradient Color Stops ### Setting Color Stops Set color stops using the `setGradientColorStops()` method with an array of color and position pairs: ```typescript highlight-set-color-stops engine.block.setGradientColorStops(linearVertical, 'fill/gradient/colors', [ { color: { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }, stop: 0 }, { color: { r: 0.3, g: 0.4, b: 0.7, a: 1.0 }, stop: 1 } ]); ``` RGB values are normalized floats from 0.0 to 1.0. Stop positions are normalized where 0.0 represents the start and 1.0 represents the end. The alpha channel controls opacity per color stop. ### Getting Color Stops Retrieve the current color stops from a gradient fill: ```typescript highlight-get-color-stops // Get gradient color stops const colorStops = engine.block.getGradientColorStops( inspectGradient, 'fill/gradient/colors' ); // eslint-disable-next-line no-console console.log('Color stops:', colorStops); ``` ### Using Different Color Spaces Gradient color stops support multiple color spaces: ```typescript highlight-color-spaces const { block: cmykGradientBlock, fill: cmykGradient } = createShapeWithFill('gradient/linear'); // CMYK color stops for print engine.block.setGradientColorStops(cmykGradient, 'fill/gradient/colors', [ { color: { c: 0.0, m: 1.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 0 }, { color: { c: 1.0, m: 0.0, y: 1.0, k: 0.0, tint: 1.0 }, stop: 1 } ]); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat( cmykGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(cmykGradient, 'fill/gradient/linear/endPointY', 0.5); ``` ## Positioning Linear Gradients ### Setting Start and End Points Linear gradients are positioned using start and end points with normalized coordinates (0.0 to 1.0) relative to block dimensions: ```typescript highlight-linear-position // Set vertical gradient (top to bottom) engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( linearVertical, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(linearVertical, 'fill/gradient/linear/endPointY', 1); ``` Coordinates are normalized where (0, 0) represents the top-left corner and (1, 1) represents the bottom-right corner. ### Common Linear Gradient Directions **Horizontal (Left to Right):** ```typescript engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointY', 0.5); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointY', 0.5); ``` **Diagonal (Top-Left to Bottom-Right):** ```typescript engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(linearGradient, 'fill/gradient/linear/endPointY', 1); ``` ### Getting Current Position Retrieve the current position values: ```typescript highlight-get-linear-position // Get linear gradient position const startX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointX' ); const startY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/startPointY' ); const endX = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointX' ); const endY = engine.block.getFloat( inspectGradient, 'fill/gradient/linear/endPointY' ); // eslint-disable-next-line no-console console.log('Linear gradient position:', { startX, startY, endX, endY }); ``` ## Positioning Radial Gradients ### Setting Center Point and Radius Radial gradients are positioned using a center point and radius: ```typescript highlight-radial-position // Set center point (middle of block) engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointX', 0.5 ); engine.block.setFloat( radialCentered, 'fill/gradient/radial/centerPointY', 0.5 ); engine.block.setFloat(radialCentered, 'fill/gradient/radial/radius', 0.8); ``` The `centerPointX/Y` properties use normalized coordinates (0.0 to 1.0) relative to block dimensions. The `radius` property is relative to the smaller side of the block frame, where 1.0 equals full coverage. Default values are centerX = 0.0, centerY = 0.0, and radius = 1.0. ### Common Radial Patterns **Centered Circle:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 0.5); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 0.5); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 0.7); ``` **Top-Left Highlight:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 0); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 0); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 1.0); ``` **Bottom-Right Vignette:** ```typescript engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointX', 1); engine.block.setFloat(radialGradient, 'fill/gradient/radial/centerPointY', 1); engine.block.setFloat(radialGradient, 'fill/gradient/radial/radius', 1.5); ``` ## Positioning Conical Gradients ### Setting Center Point Conical gradients are positioned using a center point. The rotation starts at the top (12 o'clock) and proceeds clockwise: ```typescript highlight-conical-position // Set center point (middle of block) engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalColorWheel, 'fill/gradient/conical/centerPointY', 0.5 ); ``` The `centerPointX/Y` properties use normalized coordinates (0.0 to 1.0) relative to block dimensions. There is no separate rotation or angle property—the gradient always starts at the top. Default values are centerX = 0.0 and centerY = 0.0. ## Additional Techniques ### Sharing Gradient Fills You can share a single gradient fill between multiple blocks. Changes to the shared gradient affect all blocks using it: ```typescript highlight-share-gradient const block1 = engine.block.create('graphic'); const shape1 = engine.block.createShape('rect'); engine.block.setShape(block1, shape1); engine.block.setWidth(block1, blockWidth); engine.block.setHeight(block1, blockHeight / 2 - 5); engine.block.appendChild(page, block1); const block2 = engine.block.create('graphic'); const shape2 = engine.block.createShape('rect'); engine.block.setShape(block2, shape2); engine.block.setWidth(block2, blockWidth); engine.block.setHeight(block2, blockHeight / 2 - 5); engine.block.appendChild(page, block2); // Create one gradient fill const sharedGradient = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(sharedGradient, 'fill/gradient/colors', [ { color: { r: 1, g: 0, b: 0, a: 1 }, stop: 0 }, { color: { r: 0, g: 0, b: 1, a: 1 }, stop: 1 } ]); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(sharedGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( sharedGradient, 'fill/gradient/linear/endPointY', 0.5 ); // Apply to both blocks engine.block.setFill(block1, sharedGradient); engine.block.setFill(block2, sharedGradient); // Change gradient after a delay to show it affects both setTimeout(() => { engine.block.setGradientColorStops( sharedGradient, 'fill/gradient/colors', [ { color: { r: 0, g: 1, b: 0, a: 1 }, stop: 0 }, { color: { r: 1, g: 1, b: 0, a: 1 }, stop: 1 } ] ); }, 2000); ``` ### Duplicating Gradient Fills When you duplicate a block, its gradient fill is automatically duplicated, creating an independent copy. Each duplicate has its own fill instance that can be modified independently without affecting the original. ## Common Use Cases ### Modern Hero Background (Aurora Effect) Create dreamy multi-color gradient backgrounds for hero sections: ```typescript highlight-aurora-gradient const { block: auroraGradientBlock, fill: auroraGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops(auroraGradient, 'fill/gradient/colors', [ { color: { r: 0.4, g: 0.1, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.8, g: 0.2, b: 0.6, a: 1 }, stop: 0.3 }, { color: { r: 1.0, g: 0.5, b: 0.3, a: 1 }, stop: 0.6 }, { color: { r: 1.0, g: 0.8, b: 0.2, a: 1 }, stop: 1 } ]); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/startPointY', 0.5 ); engine.block.setFloat(auroraGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat( auroraGradient, 'fill/gradient/linear/endPointY', 0.5 ); ``` ### Button Highlight Effect Use radial gradients to add depth and highlight effects to buttons: ```typescript highlight-button-gradient const { block: radialHighlightBlock, fill: radialHighlight } = createShapeWithFill('gradient/radial'); engine.block.setGradientColorStops( radialHighlight, 'fill/gradient/colors', [ { color: { r: 1.0, g: 1.0, b: 1.0, a: 0.3 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, stop: 1 } ] ); // Set top-left highlight engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointX', 0 ); engine.block.setFloat( radialHighlight, 'fill/gradient/radial/centerPointY', 0 ); engine.block.setFloat(radialHighlight, 'fill/gradient/radial/radius', 1.0); ``` ### Loading Spinner (Conical) Create circular progress indicators and loading animations with conical gradients: ```typescript highlight-spinner-gradient const { block: conicalSpinnerBlock, fill: conicalSpinner } = createShapeWithFill('gradient/conical'); engine.block.setGradientColorStops(conicalSpinner, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 0 }, stop: 0.75 }, { color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }, stop: 1 } ]); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointX', 0.5 ); engine.block.setFloat( conicalSpinner, 'fill/gradient/conical/centerPointY', 0.5 ); ``` ### Transparency Overlay Create smooth transparency effects with alpha channel transitions: ```typescript highlight-overlay-gradient const { block: overlayGradientBlock, fill: overlayGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( overlayGradient, 'fill/gradient/colors', [ { color: { r: 0.0, g: 0.0, b: 0.0, a: 0 }, stop: 0 }, { color: { r: 0.0, g: 0.0, b: 0.0, a: 0.7 }, stop: 1 } ] ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointX', 0.5 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat( overlayGradient, 'fill/gradient/linear/endPointX', 0.5 ); engine.block.setFloat(overlayGradient, 'fill/gradient/linear/endPointY', 1); ``` ### Duotone Effect Create modern two-color gradient overlays: ```typescript highlight-duotone-gradient const { block: duotoneGradientBlock, fill: duotoneGradient } = createShapeWithFill('gradient/linear'); engine.block.setGradientColorStops( duotoneGradient, 'fill/gradient/colors', [ { color: { r: 0.8, g: 0.2, b: 0.9, a: 1 }, stop: 0 }, { color: { r: 0.2, g: 0.9, b: 0.8, a: 1 }, stop: 1 } ] ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointX', 0 ); engine.block.setFloat( duotoneGradient, 'fill/gradient/linear/startPointY', 0 ); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(duotoneGradient, 'fill/gradient/linear/endPointY', 1); ``` ## Troubleshooting ### Gradient Not Visible If your gradient doesn't appear: - Check if fill is enabled: `engine.block.isFillEnabled(block)` - Verify color stops have visible colors (check alpha channels) - Ensure block has valid dimensions (width and height > 0) - Confirm block is in the scene hierarchy - Check if color stops are properly ordered by stop position ### Gradient Looks Different Than Expected If the gradient doesn't look right: - Verify color stop positions are between 0.0 and 1.0 - Check gradient direction and positioning properties - Ensure correct gradient type is used (linear vs radial vs conical) - Review color space (RGB vs CMYK) for output medium - Confirm alpha values for transparency effects ### Gradient Direction Wrong If the gradient direction is incorrect: - For linear gradients, check `startPointX/Y` and `endPointX/Y` values - Remember coordinates are normalized (0.0 to 1.0), not pixels - Verify the block's coordinate system and transformations - Test with simple horizontal or vertical gradients first ### Memory Leaks To prevent memory leaks: - Always destroy replaced gradients: `engine.block.destroy(oldFill)` - Don't create gradient fills without attaching them to blocks - Clean up shared gradients when no longer needed ### Cannot Apply Gradient to Block If you can't apply a gradient fill: - Verify block supports fills: `engine.block.supportsFill(block)` - Check if block has a shape: Some blocks require shapes - Ensure gradient fill object is valid and not already destroyed ### Color Stops Not Updating If color stops don't update: - Verify you're calling `setGradientColorStops()` not `setColor()` - Ensure property name is exactly `'fill/gradient/colors'` - Check that color stop array is properly formatted - Confirm fill ID is correct and still valid ## API Reference ### Core Methods | Method | Description | | ---------------------------------------------- | --------------------------------------- | | `createFill('gradient/linear')` | Create a new linear gradient fill | | `createFill('gradient/radial')` | Create a new radial gradient fill | | `createFill('gradient/conical')` | Create a new conical gradient fill | | `setFill(block, fill)` | Assign gradient fill to a block | | `getFill(block)` | Get the fill ID from a block | | `setGradientColorStops(fill, property, stops)` | Set gradient color stops array | | `getGradientColorStops(fill, property)` | Get current gradient color stops | | `setFloat(fill, property, value)` | Set gradient position/radius properties | | `getFloat(fill, property)` | Get gradient position/radius values | | `setFillEnabled(block, enabled)` | Enable or disable fill rendering | | `isFillEnabled(block)` | Check if fill is enabled | | `supportsFill(block)` | Check if block supports fills | ### Linear Gradient Properties | Property | Type | Default | Description | | ---------------------------------- | ------------------- | ------- | ------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/linear/startPointX` | Float (0.0-1.0) | 0.5 | Horizontal start position | | `fill/gradient/linear/startPointY` | Float (0.0-1.0) | 0.0 | Vertical start position | | `fill/gradient/linear/endPointX` | Float (0.0-1.0) | 0.5 | Horizontal end position | | `fill/gradient/linear/endPointY` | Float (0.0-1.0) | 1.0 | Vertical end position | ### Radial Gradient Properties | Property | Type | Default | Description | | ----------------------------------- | ------------------- | ------- | ------------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/radial/centerPointX` | Float (0.0-1.0) | 0.0 | Horizontal center position | | `fill/gradient/radial/centerPointY` | Float (0.0-1.0) | 0.0 | Vertical center position | | `fill/gradient/radial/radius` | Float | 1.0 | Radius relative to smaller side | ### Conical Gradient Properties | Property | Type | Default | Description | | ------------------------------------ | ------------------- | ------- | -------------------------- | | `fill/gradient/colors` | GradientColorStop\[] | - | Array of color stops | | `fill/gradient/conical/centerPointX` | Float (0.0-1.0) | 0.0 | Horizontal center position | | `fill/gradient/conical/centerPointY` | Float (0.0-1.0) | 0.0 | Vertical center position | **Note**: Conical gradients rotate clockwise starting from the top (12 o'clock). There is no rotation or angle property. ### GradientColorStop Interface ```typescript interface GradientColorStop { color: Color; // RGB, CMYK, or Spot color stop: number; // Position (0.0 to 1.0) } // Color formats supported: type Color = | { r: number; g: number; b: number; a: number } // RGB | { c: number; m: number; y: number; k: number; tint: number } // CMYK | { name: string; tint: number; externalReference: string }; // Spot ``` ## Next Steps Now that you understand gradient fills, explore other fill types and color management features: - Learn about Color Fills for solid colors - Explore Image Fills for photo content - Understand Fill Overview for the comprehensive fill system - Review Apply Colors for color management across properties - Study Blocks Concept for understanding the block system --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Filters & Effects Library" description: "Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/overview-299b15/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Overview](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/overview-299b15/) --- In CreativeEditor SDK (CE.SDK), *filters* and *effects* refer to visual modifications that enhance or transform the appearance of design elements. Filters typically adjust an element’s overall color or tone, while effects add specific visual treatments like blur, sharpness, or distortion. You can apply both filters and effects through the user interface or programmatically using the CE.SDK API. They allow you to refine the look of images, videos, and graphic elements in your designs with precision and flexibility. [Launch Web Demo](https://img.ly/showcases/cesdk) [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported Filters and Effects" description: "View the full list of visual effects and filters available in CE.SDK, including both built-in and custom options." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/filters-and-effects/support-a666dd/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) > [Supported Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/support-a666dd/) --- Discover all available filters and effects in CE.SDK and learn how to check if a block supports them.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-support-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-filters-and-effects-support-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-filters-and-effects-support-browser/) CE.SDK provides 22 built-in effect types for visual transformations including color adjustments, blur effects, artistic filters, and distortion effects. This reference guide shows how to check effect support and add effects programmatically, followed by detailed property tables for each effect type. ```typescript file=@cesdk_web_examples/guides-filters-and-effects-support-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Supported Filters and Effects Reference * * Demonstrates how to check effect support and add effects to blocks: * - Checking if a block supports effects * - Creating and appending effects * - Configuring effect properties */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Enable effects and filters in the inspector panel cesdk.feature.enable('ly.img.effect'); cesdk.feature.enable('ly.img.filter'); // Create a beautiful gradient background const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.02, g: 0.02, b: 0.08, a: 1.0 }, stop: 0 }, // Near black { color: { r: 0.04, g: 0.06, b: 0.18, a: 1.0 }, stop: 0.4 }, // Dark navy { color: { r: 0.08, g: 0.12, b: 0.28, a: 1.0 }, stop: 0.7 }, // Deep blue { color: { r: 0.1, g: 0.15, b: 0.35, a: 1.0 }, stop: 1 } // Dark blue ]); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1); engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1); engine.block.setFill(page, gradientFill); // Define font for text const fontUri = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf'; const typeface = { name: 'Roboto', fonts: [ { uri: fontUri, subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; // Create title text: "Supported Filters and Effects" at 80pt (centered) const titleText = engine.block.create('text'); engine.block.appendChild(page, titleText); engine.block.replaceText(titleText, 'Supported Filters and Effects'); engine.block.setFont(titleText, fontUri, typeface); engine.block.setTextFontSize(titleText, 80); engine.block.setTextColor(titleText, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }); engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(titleText, 780); engine.block.setWidthMode(titleText, 'Absolute'); engine.block.setHeightMode(titleText, 'Auto'); engine.block.setPositionX(titleText, 10); engine.block.setPositionY(titleText, 160); // Create subtext: "img.ly" at 64pt (closer to title) const subtitleText = engine.block.create('text'); engine.block.appendChild(page, subtitleText); engine.block.replaceText(subtitleText, 'img.ly'); engine.block.setFont(subtitleText, fontUri, typeface); engine.block.setTextFontSize(subtitleText, 64); engine.block.setTextColor(subtitleText, { r: 0.75, g: 0.82, b: 1.0, a: 0.85 }); engine.block.setEnum(subtitleText, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(subtitleText, 780); engine.block.setWidthMode(subtitleText, 'Absolute'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.setPositionX(subtitleText, 10); engine.block.setPositionY(subtitleText, 210); // Check if a block supports effects before applying them // Not all block types support effects - verify first to avoid errors // Add an image to demonstrate effects (centered below text) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 210 } }); engine.block.appendChild(page, imageBlock); // Center the image below the subtext engine.block.setPositionX(imageBlock, (800 - 300) / 2); // 250 engine.block.setPositionY(imageBlock, 310); // Image blocks support effects const imageSupportsEffects = engine.block.supportsEffects(imageBlock); console.log('Image supports effects:', imageSupportsEffects); // true // Create an effect using the effect type identifier // CE.SDK provides 22 built-in effect types (see property tables below) const duotoneEffect = engine.block.createEffect('duotone_filter'); // Append the effect to the image's effect stack engine.block.appendEffect(imageBlock, duotoneEffect); // Configure effect properties using the property path format: // effect/{effect-type}/{property-name} // Set duotone colors to match the dark blue gradient background engine.block.setColor(duotoneEffect, 'effect/duotone_filter/darkColor', { r: 0.02, g: 0.04, b: 0.12, a: 1.0 }); // Near black blue engine.block.setColor(duotoneEffect, 'effect/duotone_filter/lightColor', { r: 0.5, g: 0.7, b: 1.0, a: 1.0 }); // Light blue engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); // Retrieve all effects applied to a block const appliedEffects = engine.block.getEffects(imageBlock); console.log('Number of applied effects:', appliedEffects.length); // Log each effect's type appliedEffects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); // Select the image to show effects in inspector engine.block.select(imageBlock); console.log( 'Support guide initialized. Select the image to see effects in the inspector.' ); } } export default Example; ``` This guide covers checking effect support on blocks, adding effects programmatically, and the complete list of available effect types with their properties. For detailed tutorials on configuring and combining multiple effects, see the [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) guide. ## Check Effect Support Before applying effects to a block, verify whether it supports them using `supportsEffects()`. Not all block types can have effects applied. ```typescript highlight-check-effect-support // Check if a block supports effects before applying them // Not all block types support effects - verify first to avoid errors // Add an image to demonstrate effects (centered below text) const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg'; const imageBlock = await engine.block.addImage(imageUri, { size: { width: 300, height: 210 } }); engine.block.appendChild(page, imageBlock); // Center the image below the subtext engine.block.setPositionX(imageBlock, (800 - 300) / 2); // 250 engine.block.setPositionY(imageBlock, 310); // Image blocks support effects const imageSupportsEffects = engine.block.supportsEffects(imageBlock); console.log('Image supports effects:', imageSupportsEffects); // true ``` Effect support is available for: - **Graphic blocks** with image or video fills - **Shape blocks** with fills - **Text blocks** (with limited effect types) - **Page blocks** (particularly when they have background fills) ## Add an Effect Create an effect using `createEffect()` with the effect type identifier, then attach it to a block with `appendEffect()`. ```typescript highlight-add-effect // Create an effect using the effect type identifier // CE.SDK provides 22 built-in effect types (see property tables below) const duotoneEffect = engine.block.createEffect('duotone_filter'); // Append the effect to the image's effect stack engine.block.appendEffect(imageBlock, duotoneEffect); ``` ## Configure Effect Properties Configure effect parameters using setter methods. Property paths follow the format `effect/{effect-type}/{property-name}`. ```typescript highlight-configure-effect // Configure effect properties using the property path format: // effect/{effect-type}/{property-name} // Set duotone colors to match the dark blue gradient background engine.block.setColor(duotoneEffect, 'effect/duotone_filter/darkColor', { r: 0.02, g: 0.04, b: 0.12, a: 1.0 }); // Near black blue engine.block.setColor(duotoneEffect, 'effect/duotone_filter/lightColor', { r: 0.5, g: 0.7, b: 1.0, a: 1.0 }); // Light blue engine.block.setFloat( duotoneEffect, 'effect/duotone_filter/intensity', 0.8 ); ``` CE.SDK provides typed setter methods for different parameter types: - **`setFloat()`** - For intensity, amount, and decimal values - **`setInt()`** - For discrete values like pixel sizes - **`setString()`** - For file URIs (LUT files) - **`setBool()`** - For enabling or disabling features - **`setColor()`** - For color values (RGBA format) ## Retrieve Applied Effects Use `getEffects()` to retrieve all effects applied to a block. ```typescript highlight-get-effects // Retrieve all effects applied to a block const appliedEffects = engine.block.getEffects(imageBlock); console.log('Number of applied effects:', appliedEffects.length); // Log each effect's type appliedEffects.forEach((effect, index) => { const effectType = engine.block.getType(effect); console.log(`Effect ${index}: ${effectType}`); }); ``` ## Effects The following tables document all available effect types and their configurable properties. ## Adjustments Type An effect block for basic image adjustments. This section describes the properties available for the **Adjustments Type** (`//ly.img.ubq/effect/adjustments`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | ------- | ------------------------------------ | | `effect/adjustments/blacks` | `Float` | `0` | Adjustment of only the blacks. | | `effect/adjustments/brightness` | `Float` | `0` | Adjustment of the brightness. | | `effect/adjustments/clarity` | `Float` | `0` | Adjustment of the detail. | | `effect/adjustments/contrast` | `Float` | `0` | Adjustment of the contrast. | | `effect/adjustments/exposure` | `Float` | `0` | Adjustment of the exposure. | | `effect/adjustments/gamma` | `Float` | `0` | Gamma correction, non-linear. | | `effect/adjustments/highlights` | `Float` | `0` | Adjustment of only the highlights. | | `effect/adjustments/saturation` | `Float` | `0` | Adjustment of the saturation. | | `effect/adjustments/shadows` | `Float` | `0` | Adjustment of only the shadows. | | `effect/adjustments/sharpness` | `Float` | `0` | Adjustment of the sharpness. | | `effect/adjustments/temperature` | `Float` | `0` | Adjustment of the color temperature. | | `effect/adjustments/whites` | `Float` | `0` | Adjustment of only the whites. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Cross Cut Type An effect that distorts the image with horizontal slices. This section describes the properties available for the **Cross Cut Type** (`//ly.img.ubq/effect/cross_cut`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/cross_cut/offset` | `Float` | `0.07` | Horizontal offset per slice. | | `effect/cross_cut/slices` | `Float` | `5` | Number of horizontal slices. | | `effect/cross_cut/speedV` | `Float` | `0.5` | Vertical slice position. | | `effect/cross_cut/time` | `Float` | `1` | Randomness input. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Dot Pattern Type An effect that displays the image using a dot matrix. This section describes the properties available for the **Dot Pattern Type** (`//ly.img.ubq/effect/dot_pattern`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/dot_pattern/blur` | `Float` | `0.3` | Global blur. | | `effect/dot_pattern/dots` | `Float` | `30` | Number of dots. | | `effect/dot_pattern/size` | `Float` | `0.5` | Size of an individual dot. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Duotone Filter Type An effect that applies a two-tone color mapping. This section describes the properties available for the **Duotone Filter Type** (`//ly.img.ubq/effect/duotone_filter`) block type. | Property | Type | Default | Description | | ---------------------------------- | ------- | --------------------------- | --------------------------------------------------------------------------------- | | `effect/duotone_filter/darkColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The darker of the two colors. Negative filter intensities emphasize this color. | | `effect/duotone_filter/intensity` | `Float` | `0` | The mixing weight of the two colors in the range \[-1, 1]. | | `effect/duotone_filter/lightColor` | `Color` | `{"r":0,"g":0,"b":0,"a":0}` | The brighter of the two colors. Positive filter intensities emphasize this color. | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Extrude Blur Type An effect that applies a radial extrude blur. This section describes the properties available for the **Extrude Blur Type** (`//ly.img.ubq/effect/extrude_blur`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/extrude_blur/amount` | `Float` | `0.2` | Blur intensity. | ## Glow Type An effect that applies an artificial glow. This section describes the properties available for the **Glow Type** (`//ly.img.ubq/effect/glow`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/glow/amount` | `Float` | `0.5` | Glow brightness. | | `effect/glow/darkness` | `Float` | `0.3` | Glow darkness. | | `effect/glow/size` | `Float` | `4` | Intensity of the glow. | ## Green Screen Type An effect that replaces a specific color with transparency. This section describes the properties available for the **Green Screen Type** (`//ly.img.ubq/effect/green_screen`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/green_screen/colorMatch` | `Float` | `0.4` | Threshold between the source color and the from color. | | `effect/green_screen/fromColor` | `Color` | `{"r":0,"g":1,"b":0,"a":1}` | The color to be replaced. | | `effect/green_screen/smoothness` | `Float` | `0.08` | Controls the rate at which the color transition increases when the similarity threshold is exceeded. | | `effect/green_screen/spill` | `Float` | `0` | Controls the desaturation of the source color to reduce color spill. | ## Half Tone Type An effect that overlays a halftone pattern. This section describes the properties available for the **Half Tone Type** (`//ly.img.ubq/effect/half_tone`) block type. | Property | Type | Default | Description | | ------------------------ | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/half_tone/angle` | `Float` | `0` | Angle of pattern. | | `effect/half_tone/scale` | `Float` | `0.5` | Scale of pattern. | ## Linocut Type An effect that overlays a linocut pattern. This section describes the properties available for the **Linocut Type** (`//ly.img.ubq/effect/linocut`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/linocut/scale` | `Float` | `0.5` | Scale of pattern. | ## Liquid Type An effect that applies a liquefy distortion. This section describes the properties available for the **Liquid Type** (`//ly.img.ubq/effect/liquid`) block type. | Property | Type | Default | Description | | ---------------------- | ------- | ------- | ------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/liquid/amount` | `Float` | `0.06` | Severity of the applied effect. | | `effect/liquid/scale` | `Float` | `0.62` | Global scale. | | `effect/liquid/time` | `Float` | `0.5` | Continuous randomness input. | ## Lut Filter Type An effect that applies a color lookup table (LUT). This section describes the properties available for the **Lut Filter Type** (`//ly.img.ubq/effect/lut_filter`) block type. | Property | Type | Default | Description | | --------------------------------------- | -------- | ------- | ---------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/lut_filter/horizontalTileCount` | `Int` | `5` | The horizontal number of tiles contained in the LUT image. | | `effect/lut_filter/intensity` | `Float` | `1` | A value in the range of \[0, 1]. Defaults to 1.0. | | `effect/lut_filter/lutFileURI` | `String` | `""` | The URI to a LUT PNG file. | | `effect/lut_filter/verticalTileCount` | `Int` | `5` | The vertical number of tiles contained in the LUT image. | ## Mirror Type An effect that mirrors the image along a central axis. This section describes the properties available for the **Mirror Type** (`//ly.img.ubq/effect/mirror`) block type. | Property | Type | Default | Description | | -------------------- | ------ | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/mirror/side` | `Int` | `1` | Axis to mirror along. | ## Outliner Type An effect that highlights the outlines in an image. This section describes the properties available for the **Outliner Type** (`//ly.img.ubq/effect/outliner`) block type. | Property | Type | Default | Description | | ----------------------------- | ------- | ------- | -------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/outliner/amount` | `Float` | `0.5` | Intensity of edge highlighting. | | `effect/outliner/passthrough` | `Float` | `0.5` | Visibility of input image in non-edge areas. | ## Pixelize Type An effect that pixelizes the image. This section describes the properties available for the **Pixelize Type** (`//ly.img.ubq/effect/pixelize`) block type. | Property | Type | Default | Description | | ------------------------------------- | ------ | ------- | ----------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/pixelize/horizontalPixelSize` | `Int` | `20` | The number of pixels on the x-axis. | | `effect/pixelize/verticalPixelSize` | `Int` | `20` | The number of pixels on the y-axis. | ## Posterize Type An effect that reduces the number of colors in the image. This section describes the properties available for the **Posterize Type** (`//ly.img.ubq/effect/posterize`) block type. | Property | Type | Default | Description | | ------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/posterize/levels` | `Float` | `3` | Number of color levels. | ## Radial Pixel Type An effect that reduces the image into radial pixel rows. This section describes the properties available for the **Radial Pixel Type** (`//ly.img.ubq/effect/radial_pixel`) block type. | Property | Type | Default | Description | | ------------------------------ | ------- | ------- | ------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/radial_pixel/radius` | `Float` | `0.1` | Radius of an individual row of pixels, relative to the image. | | `effect/radial_pixel/segments` | `Float` | `0.01` | Proportional size of a pixel in each row. | ## Recolor Type An effect that replaces one color with another. This section describes the properties available for the **Recolor Type** (`//ly.img.ubq/effect/recolor`) block type. | Property | Type | Default | Description | | -------------------------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/recolor/brightnessMatch` | `Float` | `1` | Affects the weight of brightness when calculating color similarity. | | `effect/recolor/colorMatch` | `Float` | `0.4` | Threshold between the source color and the from color. | | `effect/recolor/fromColor` | `Color` | `{"r":1,"g":1,"b":1,"a":1}` | The color to be replaced. | | `effect/recolor/smoothness` | `Float` | `0.08` | Controls the rate at which the color transition increases when the similarity threshold is exceeded. | | `effect/recolor/toColor` | `Color` | `{"r":0,"g":0,"b":1,"a":1}` | The color to replace with. | ## Sharpie Type Cartoon-like effect. This section describes the properties available for the **Sharpie Type** (`//ly.img.ubq/effect/sharpie`) block type. | Property | Type | Default | Description | | ---------------- | ------ | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | ## Shifter Type An effect that shifts individual color channels. This section describes the properties available for the **Shifter Type** (`//ly.img.ubq/effect/shifter`) block type. | Property | Type | Default | Description | | ----------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/shifter/amount` | `Float` | `0.05` | Intensity of the shift. | | `effect/shifter/angle` | `Float` | `0.3` | Shift direction. | ## Tilt Shift Type An effect that applies a tilt-shift blur. This section describes the properties available for the **Tilt Shift Type** (`//ly.img.ubq/effect/tilt_shift`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/tilt_shift/amount` | `Float` | `0.016` | Blur intensity. | | `effect/tilt_shift/position` | `Float` | `0.4` | Horizontal position in image. | ## Tv Glitch Type An effect that mimics TV banding and distortion. This section describes the properties available for the **Tv Glitch Type** (`//ly.img.ubq/effect/tv_glitch`) block type. | Property | Type | Default | Description | | ------------------------------ | ------- | ------- | ---------------------------------- | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/tv_glitch/distortion` | `Float` | `3` | Rough horizontal distortion. | | `effect/tv_glitch/distortion2` | `Float` | `1` | Fine horizontal distortion. | | `effect/tv_glitch/rollSpeed` | `Float` | `1` | Vertical offset. | | `effect/tv_glitch/speed` | `Float` | `2` | Number of changes per time change. | ## Vignette Type An effect that adds a vignette (darkened corners). This section describes the properties available for the **Vignette Type** (`//ly.img.ubq/effect/vignette`) block type. | Property | Type | Default | Description | | -------------------------- | ------- | ------- | ------------------------------ | | `effect/enabled` | `Bool` | `true` | Whether the effect is enabled. | | `effect/vignette/darkness` | `Float` | `1` | Brightness of vignette. | | `effect/vignette/offset` | `Float` | `1` | Radial offset. | ## Next Steps - [Apply Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects/apply-2764e4/) - Learn how to configure, combine, and manage multiple effects --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Agent Skills" description: "Install CE.SDK documentation and code generation skills for AI coding assistants." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/get-started/agent-skills-f7g8h9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) > [Agent Skills](https://img.ly/docs/cesdk/sveltekit/get-started/agent-skills-f7g8h9/) --- The CE.SDK Agent Skills plugin gives AI coding assistants bundled documentation, guided code generation, and autonomous project scaffolding for building applications with CreativeEditor SDK across 10 Web frameworks. ## What Are Agent Skills? [Agent Skills](https://agentskills.io) are portable knowledge packs that plug into AI coding assistants. By installing the CE.SDK skills, you get: - **Offline documentation**: All guides, API references, and best practices bundled locally — no external API calls - **Guided code generation**: Build and explain skills that walk through CE.SDK implementation step by step - **Autonomous scaffolding**: A builder agent that creates complete CE.SDK projects from scratch ## Available Skills | Skill | Description | |-------|-------------| | `docs-react` | Look up CE.SDK React reference guides and documentation | | `docs-vue` | Look up CE.SDK Vue.js reference guides and documentation | | `docs-svelte` | Look up CE.SDK Svelte reference guides and documentation | | `docs-sveltekit` | Look up CE.SDK SvelteKit reference guides and documentation | | `docs-angular` | Look up CE.SDK Angular reference guides and documentation | | `docs-nextjs` | Look up CE.SDK Next.js reference guides and documentation | | `docs-nuxtjs` | Look up CE.SDK Nuxt.js reference guides and documentation | | `docs-electron` | Look up CE.SDK Electron reference guides and documentation | | `docs-js` | Look up CE.SDK Vanilla JavaScript reference guides and documentation | | `docs-node` | Look up CE.SDK Node.js reference guides and documentation | | `build` | Implement features, write code, and set up CE.SDK Web projects | | `explain` | Explain how CE.SDK Web features work — concepts, architecture, workflows | The plugin also includes a **builder** agent that autonomously scaffolds complete CE.SDK web applications — detecting your framework, applying starter kit templates, and implementing features end-to-end. ## Setup Instructions ### Claude Code Plugin Add the marketplace and install the plugin: ```bash # Add the marketplace (one-time setup) claude plugin marketplace add imgly/agent-skills # Install the plugin claude plugin install cesdk@imgly ``` ### Vercel Skills CLI Install using the [Vercel Skills CLI](https://github.com/vercel-labs/skills): ```bash # Install all skills for Claude Code npx skills add imgly/agent-skills -a claude-code # Install a specific skill only npx skills add imgly/agent-skills --skill docs-react -a claude-code # List available skills first npx skills add imgly/agent-skills --list ``` ### Manual Copy For any skills-compatible agent, copy skill folders directly from the [GitHub repository](https://github.com/imgly/agent-skills): ```bash # Clone the repo git clone https://github.com/imgly/agent-skills.git # Copy a specific skill into your Claude Code project cp -r agent-skills/plugins/cesdk/skills/docs-react .claude/skills/cesdk-docs-react # Or copy the builder agent cp agent-skills/plugins/cesdk/agents/builder.md .claude/agents/cesdk-builder.md ``` ## Usage Once installed, invoke skills with slash commands in your AI coding assistant: ### Look up documentation ``` /cesdk:docs-react configuration /cesdk:docs-vue getting started /cesdk:docs-nextjs server-side rendering ``` ### Build a feature ``` /cesdk:build add text overlays to images /cesdk:build create a photo editor with filters ``` ### Explain a concept ``` /cesdk:explain how the block hierarchy works /cesdk:explain export pipeline and output formats ``` ## How It Works Each documentation skill bundles the complete CE.SDK guides and API references for its framework in a compressed index. Skills read directly from these local files — no external services or MCP servers are required. The build skill includes starter kit templates for common use cases like design editors, video editors, and photo editors. It detects your project's framework and generates code accordingly. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "MCP Server" description: "Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/get-started/mcp-server-fde71c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) > [MCP Server](https://img.ly/docs/cesdk/sveltekit/get-started/mcp-server-fde71c/) --- The CE.SDK MCP server provides a standardized interface that allows any compatible AI assistant to search and access our documentation. This enables AI tools like Claude, Cursor, and VS Code Copilot to provide more accurate, context-aware help when working with CE.SDK. ## What is MCP? The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard that enables AI assistants to securely connect to external data sources. By connecting your AI tools to our MCP server, you get: - **Accurate answers**: AI assistants can search and retrieve the latest CE.SDK documentation - **Context-aware help**: Get platform-specific guidance for your development environment - **Up-to-date information**: Always access current documentation without relying on training data ## Available Tools The MCP server exposes two tools: | Tool | Description | |------|-------------| | `search` | Search documentation by query string | | `fetch` | Retrieve the full content of a document by ID | ## Server Endpoint | URL | Transport | |-----|-----------| | `https://mcp.img.ly/mcp` | Streamable HTTP | No authentication is required. ## Setup Instructions ### Claude Code Add the MCP server with a single command: ```bash claude mcp add --transport http imgly_docs https://mcp.img.ly/mcp ``` ### Claude Desktop 1. Open Claude Desktop and go to **Settings** (click your profile icon) 2. Navigate to **Connectors** in the sidebar 3. Click **Add custom connector** 4. Enter the URL: `https://mcp.img.ly/mcp` 5. Click **Add** to connect ### Cursor Add the following to your Cursor MCP configuration. You can use either: - **Project-specific**: `.cursor/mcp.json` in your project root - **Global**: `~/.cursor/mcp.json` ```json { "mcpServers": { "imgly_docs": { "url": "https://mcp.img.ly/mcp" } } } ``` ### VS Code Add to your workspace configuration at `.vscode/mcp.json`: ```json { "servers": { "imgly_docs": { "type": "http", "url": "https://mcp.img.ly/mcp" } } } ``` ### Windsurf Add the following to your Windsurf MCP configuration at `~/.codeium/windsurf/mcp_config.json`: ```json { "mcpServers": { "imgly_docs": { "serverUrl": "https://mcp.img.ly/mcp" } } } ``` ### Other Clients For other MCP-compatible clients, use the endpoint `https://mcp.img.ly/mcp` with HTTP transport. Refer to your client's documentation for the specific configuration format. ## Usage Once configured, your AI assistant will automatically have access to CE.SDK documentation. You can ask questions like: - "How do I add a text block in CE.SDK?" - "Show me how to export a design as PNG" - "What are the available blend modes?" The AI will search our documentation and provide answers based on the latest CE.SDK guides and API references. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Get Started" description: "Start integrating CE.SDK into your application—from understanding the SDK to running your first editor." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) --- Everything you need to integrate CE.SDK into your application. Learn what the SDK offers, get up and running with starter kits, explore AI-powered workflows, and understand our licensing model. ## Next Steps - [What is CE.SDK?](props.paths['2e7acd']) - [Quickstart](props.paths['r1q2w3e']) - [Vibecoding](props.paths['c3014f']) - [Licensing](props.paths['8aa063']) --- ## Related Pages - [What is Creative Editor SDK](https://img.ly/docs/cesdk/sveltekit/what-is-cesdk-2e7acd/) - Learn what CE.SDK is, how it works, and what you can build with its UI, headless API, and real-time design engine. - [Quickstart](https://img.ly/docs/cesdk/sveltekit/get-started/sveltekit/quickstart-k4q5w6/) - Get started with CE.SDK by choosing a starter kit - [MCP Server](https://img.ly/docs/cesdk/sveltekit/get-started/mcp-server-fde71c/) - Connect AI assistants to CE.SDK documentation using the Model Context Protocol (MCP) server. - [Agent Skills](https://img.ly/docs/cesdk/sveltekit/get-started/agent-skills-f7g8h9/) - Install CE.SDK documentation and code generation skills for AI coding assistants. - [LLMs.txt](https://img.ly/docs/cesdk/sveltekit/llms-txt-eb9cc5/) - Our documentation is available in LLMs.txt format - [Licensing](https://img.ly/docs/cesdk/sveltekit/licensing-8aa063/) - Understand CE.SDK’s flexible licensing, trial options, and how keys work across dev, staging, and production. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Quickstart" description: "Get started with CE.SDK by choosing a starter kit" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/get-started/sveltekit/quickstart-k4q5w6/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Get Started](https://img.ly/docs/cesdk/sveltekit/get-started/overview-e18f40/) > [Quickstart SvelteKit](https://img.ly/docs/cesdk/sveltekit/get-started/sveltekit/quickstart-k4q5w6/) --- Get started with CE.SDK. Choose a starter kit below to see it in action, then follow the integration guide. ## Starter Kits Try the live demos below to see each editor in action, then get started with the one that fits your use case. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Grid & Rulers" description: "Configure grid overlay, snap-to-grid, and canvas rulers for precise alignment in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/grid-and-rulers-gr1d5r/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). --- Enable and configure grid overlays, snap-to-grid behavior, and canvas rulers so users can position and align elements with precision in your CE.SDK editor. > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-grid-and-rulers-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-grid-and-rulers-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-grid-and-rulers-browser/) CE.SDK provides a configurable grid overlay and canvas rulers to help users align design elements. The grid renders evenly spaced lines across the page, and snap-to-grid constrains element movement to grid intersections. Rulers display along the top and left edges of the canvas showing measurement units. ```typescript file=@cesdk_web_examples/guides-grid-and-rulers-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { AdvancedEditorConfig } from './advanced-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Grid & Rulers Guide * * Demonstrates how to configure grid overlay, snap-to-grid, * and canvas rulers for precise element alignment. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new AdvancedEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; // Show the grid overlay on the canvas engine.editor.setSettingBool('grid/enabled', true); // Enable snapping so elements align to grid lines engine.editor.setSettingBool('grid/snapEnabled', true); // Set horizontal and vertical grid spacing in design units engine.editor.setSettingFloat('grid/spacingX', 20); engine.editor.setSettingFloat('grid/spacingY', 20); // Set a custom grid color with transparency engine.editor.setSettingColor('grid/color', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); // Rulers are controlled through the editor's UI store. // The AdvancedEditorConfig plugin enables the 'ly.img.rulers' // feature flag, which makes rulers available in the UI. // Rulers are visible by default when the feature flag is enabled. // Add a sample block so the grid and rulers are visible in context const page = engine.block.findByType('page')[0]; const block = engine.block.create('graphic'); engine.block.setShape(block, engine.block.createShape('rect')); engine.block.setFill(block, engine.block.createFill('color')); engine.block.setWidth(block, 200); engine.block.setHeight(block, 150); engine.block.setPositionX(block, 100); engine.block.setPositionY(block, 100); engine.block.appendChild(page, block); console.log('Grid & Rulers guide initialized.'); } } export default Example; ``` ## Enable the Grid Toggle the grid overlay using the `grid/enabled` setting. When enabled, the engine draws a grid of lines across each page based on the configured spacing and color. ```typescript highlight=highlight-enable-grid // Show the grid overlay on the canvas engine.editor.setSettingBool('grid/enabled', true); ``` The grid is a visual aid rendered at the engine level. It does not affect the scene content or export output. ## Enable Snap-to-Grid Snap-to-grid constrains element movement so blocks align to grid lines. Enable it with the `grid/snapEnabled` setting. ```typescript highlight=highlight-snap-to-grid // Enable snapping so elements align to grid lines engine.editor.setSettingBool('grid/snapEnabled', true); ``` When snap-to-grid is active, dragging or resizing a block snaps its edges to the nearest grid line. This works independently of the grid overlay visibility, so you can snap to an invisible grid if needed. ## Configure Grid Spacing Set the horizontal and vertical distance between grid lines using `grid/spacingX` and `grid/spacingY`. Values are in design units (the unit configured for the scene). ```typescript highlight=highlight-grid-spacing // Set horizontal and vertical grid spacing in design units engine.editor.setSettingFloat('grid/spacingX', 20); engine.editor.setSettingFloat('grid/spacingY', 20); ``` Smaller spacing values produce a finer grid. The default spacing is 32 design units in both directions. ## Configure Grid Color Change the grid line color using `grid/color`. The color supports an alpha channel, so you can make the grid more or less prominent. ```typescript highlight=highlight-grid-color // Set a custom grid color with transparency engine.editor.setSettingColor('grid/color', { r: 0.2, g: 0.4, b: 0.8, a: 0.3 }); ``` ## Enable Rulers Rulers are managed through the `ly.img.rulers` feature flag and the editor's UI store. The Advanced Editor and Video Editor plugins enable rulers by default. ```typescript highlight=highlight-enable-rulers // Rulers are controlled through the editor's UI store. // The AdvancedEditorConfig plugin enables the 'ly.img.rulers' // feature flag, which makes rulers available in the UI. // Rulers are visible by default when the feature flag is enabled. ``` Rulers display along the top and left edges of the canvas. They show tick marks and labels in the scene's design unit, and they update as the user pans and zooms. ## Editor Plugin Defaults Different editor plugins configure grid and rulers with different defaults: | Plugin | Grid Visible | Snap-to-Grid | Rulers | |--------|-------------|--------------|--------| | Advanced Editor | Yes | Yes | Yes | | Video Editor | Yes | Yes | Yes | | Design Editor | No | No | No | | Photo Editor | No | No | No | To add grid and ruler support to an editor that doesn't enable them by default, set the settings and feature flag manually as shown in the examples above. ## API Reference | API | Type | Default | Description | |-----|------|---------|-------------| | `grid/enabled` | Bool | `false` | Show or hide the grid overlay | | `grid/snapEnabled` | Bool | `false` | Enable snapping to grid lines | | `grid/spacingX` | Float | `32` | Horizontal spacing between grid lines (design units) | | `grid/spacingY` | Float | `32` | Vertical spacing between grid lines (design units) | | `grid/color` | Color | `{ r: 0, g: 0, b: 0, a: 0.12 }` | Grid line color with alpha | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Guides" description: "Documentation for Guides" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) --- --- ## Related Pages - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) - Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements. - [Actions API](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) - Learn how to use the Actions API to register and customize action handlers in CE.SDK - [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) - Explore all configurable editor settings and learn how to read, update, and observe them via the Settings API. - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) - Configure CE.SDK to load engine and content assets from your own servers instead of the IMG.LY CDN for production deployments. - [Engine Interface](https://img.ly/docs/cesdk/sveltekit/engine-interface-6fb7cf/) - Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows - [Automate Workflows](https://img.ly/docs/cesdk/sveltekit/automation-715209/) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale. - [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) - Integrate external AI services into CE.SDK to enhance creative workflows and power advanced features. - [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) - Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface. - [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) - Learn how to load and create scenes, set the zoom level, and configure file proxies or URI resolvers. - [Insert Media Into Scenes](https://img.ly/docs/cesdk/sveltekit/insert-media-a217f5/) - Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code. - [Import Media](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK. - [Export](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) - Explore export options, supported formats, and configuration features for sharing or rendering output. - [Save](https://img.ly/docs/cesdk/sveltekit/export-save-publish/save-c8b124/) - Save design progress locally or to a backend service to allow for later editing or publishing. - [Store Custom Metadata](https://img.ly/docs/cesdk/sveltekit/export-save-publish/store-custom-metadata-337248/) - Attach, retrieve, and manage custom key-value metadata on design blocks in CE.SDK. - [Edit Image](https://img.ly/docs/cesdk/sveltekit/edit-image-c64912/) - Use CE.SDK to crop, transform, annotate, or enhance images with editing tools and programmatic APIs. - [Create Videos](https://img.ly/docs/cesdk/sveltekit/create-video-c41a08/) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing. - [Audio](https://img.ly/docs/cesdk/sveltekit/create-audio/audio-2f700b/) - Create audio in videos - [Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools. - [Create and Edit Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) - Draw custom vector shapes, combine them with boolean operations, and insert QR codes into your designs. - [Create and Edit Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-3d4e5f/) - Create and customize stickers using image fills for icons, logos, emoji, and multi-color graphics. - [Create Compositions](https://img.ly/docs/cesdk/sveltekit/create-composition-db709c/) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions. - [Create Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK. - [Colors](https://img.ly/docs/cesdk/sveltekit/colors-a9b79c/) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats. - [Fills](https://img.ly/docs/cesdk/sveltekit/fills-402ddc/) - Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements. - [Outlines](https://img.ly/docs/cesdk/sveltekit/outlines-b7820c/) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal. - [Filters and Effects](https://img.ly/docs/cesdk/sveltekit/filters-and-effects-6f88ac/) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying. - [Animation](https://img.ly/docs/cesdk/sveltekit/animation-ce900c/) - Add motion to designs with support for keyframes, timeline editing, and programmatic animation control. - [Rules](https://img.ly/docs/cesdk/sveltekit/rules-1427c0/) - Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs. - [Conversion](https://img.ly/docs/cesdk/sveltekit/conversion-c3fbb3/) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools. - [Improve Performance](https://img.ly/docs/cesdk/sveltekit/performance-3c12eb/) - Optimize CE.SDK browser integration with code splitting, source sets for large assets, export workers, and lifecycle best practices. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "For Audio Processing" description: "Learn how to export audio in WAV or MP4 format from any block type in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/guides/export-save-publish/export/audio-68de25/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Export Media Assets](https://img.ly/docs/cesdk/sveltekit/export-save-publish/export-82f968/) > [For Audio Processing](https://img.ly/docs/cesdk/sveltekit/guides/export-save-publish/export/audio-68de25/) --- Export audio from pages, video blocks, audio blocks, and tracks to WAV or MP4 format for external processing, transcription, or analysis.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-audio-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-audio-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-audio-browser/) The `exportAudio` API allows you to extract audio from any block that contains audio content. This is particularly useful when integrating with external audio processing services like speech-to-text transcription, audio enhancement, or music analysis platforms. Audio can be exported from multiple block types: - **Page blocks** - Export the complete mixed audio composition - **Video blocks** - Extract audio tracks from videos - **Audio blocks** - Export standalone audio content - **Track blocks** - Export audio from specific tracks ## Export Audio Export audio from any block using the `exportAudio` API: ```javascript const page = cesdk.engine.scene.getCurrentPage(); const audioBlob = await cesdk.engine.block.exportAudio(page, { mimeType: 'audio/wav', sampleRate: 48000, numberOfChannels: 2 }); ``` ### Export Options Configure your audio export with these options: - **`mimeType`** - `'audio/wav'` (uncompressed) or `'audio/mp4'` (compressed AAC) - **`sampleRate`** - Audio quality in Hz (default: 48000) - **`numberOfChannels`** - 1 for mono or 2 for stereo - **`timeOffset`** - Start time in seconds (default: 0) - **`duration`** - Length to export in seconds (0 = entire duration) - **`onProgress`** - Callback function receiving `(rendered, encoded, total)` for progress tracking ## Find Audio Sources To find blocks with audio in your scene: ```javascript // Find audio blocks const audioBlocks = cesdk.engine.block.findByType('audio'); // Find video blocks with audio const videoFills = cesdk.engine.block.findByType('//ly.img.ubq/fill/video'); const videosWithAudio = videoFills.filter(block => { try { return cesdk.engine.block.getAudioInfoFromVideo(block).length > 0; } catch { return false; } }); ``` ## Working with Multi-Track Video Audio Videos can contain multiple audio tracks (e.g., different languages). CE.SDK provides APIs to inspect and extract specific tracks. ### Check audio track count ```javascript const videoFillId = cesdk.engine.block.findByType('//ly.img.ubq/fill/video')[0]; const trackCount = cesdk.engine.block.getAudioTrackCountFromVideo(videoFillId); console.log(`Video has ${trackCount} audio track(s)`); ``` ### Get track information ```javascript const audioTracks = cesdk.engine.block.getAudioInfoFromVideo(videoFillId); audioTracks.forEach((track, index) => { console.log(`Track ${index}:`, { channels: track.channels, // 1=mono, 2=stereo sampleRate: track.sampleRate, // Sample rate in Hz language: track.language, // e.g., "en", "es" label: track.label // Track description }); }); ``` ### Extract a specific track ```javascript // Create audio block from track 0 (first track) const audioBlockId = cesdk.engine.block.createAudioFromVideo(videoFillId, 0); // Export just this track's audio const trackAudioBlob = await cesdk.engine.block.exportAudio(audioBlockId, { mimeType: 'audio/wav' }); ``` ### Extract all tracks ```javascript // Create audio blocks for all tracks const audioBlockIds = cesdk.engine.block.createAudiosFromVideo(videoFillId); // Export each track for (let i = 0; i < audioBlockIds.length; i++) { const trackBlob = await cesdk.engine.block.exportAudio(audioBlockIds[i]); console.log(`Track ${i}: ${trackBlob.size} bytes`); } ``` ## Complete Workflow: Audio to Captions A common workflow is to export audio, send it to a transcription service, and use the returned captions in your scene. ### Step 1: Export Audio ```javascript const page = cesdk.engine.scene.getCurrentPage(); const audioBlob = await cesdk.engine.block.exportAudio(page, { mimeType: 'audio/wav', sampleRate: 48000, numberOfChannels: 2 }); ``` ### Step 2: Send to Transcription Service Send the audio to a service that returns SubRip (SRT) format captions: ```javascript async function transcribeAudio(audioBlob) { const formData = new FormData(); formData.append('audio', audioBlob, 'audio.wav'); formData.append('format', 'srt'); const response = await fetch('https://api.transcription-service.com/transcribe', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY' }, body: formData }); // Returns SRT format text return await response.text(); } const srtContent = await transcribeAudio(audioBlob); ``` ### Step 3: Import Captions from SRT Use the built-in API to create caption blocks from the SRT response: ```javascript // Create a file from the SRT text const srtFile = new File([srtContent], 'captions.srt', { type: 'application/x-subrip' }); // Create object URL and import captions const uri = URL.createObjectURL(srtFile); const captions = await cesdk.engine.block.createCaptionsFromURI(uri); URL.revokeObjectURL(uri); // Add captions to page const page = cesdk.engine.scene.getCurrentPage(); const captionTrack = cesdk.engine.block.create('//ly.img.ubq/captionTrack'); captions.forEach(caption => { cesdk.engine.block.appendChild(captionTrack, caption); }); cesdk.engine.block.appendChild(page, captionTrack); // Center the first caption as a reference point cesdk.engine.block.alignHorizontally([captions[0]], 'Center'); cesdk.engine.block.alignVertically([captions[0]], 'Center'); ``` ### Other Processing Services Audio export also supports these workflows: - **Audio enhancement** - Noise removal, normalization - **Music analysis** - Tempo, key, beat detection - **Language detection** - Identify spoken language - **Speaker diarization** - Identify who spoke when ## Next Steps Now that you understand audio export, explore related audio and video features: - [Add Captions](https://img.ly/docs/cesdk/sveltekit/edit-video/add-captions-f67565/) - Learn how to create and sync caption blocks with audio content - [Control Audio and Video](https://img.ly/docs/cesdk/sveltekit/create-video/control-daba54/) - Master time offset, duration, and playback controls for audio blocks - [Trim Video Clips](https://img.ly/docs/cesdk/sveltekit/edit-video/trim-4f688b/) - Apply the same trim concepts to isolate audio segments --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Import Media" description: "Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/import-media/overview-84bb23/) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK. - [Asset Concepts](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/) - This guide explains the foundational architecture of the CE.SDK asset system, including what asset sources are, how they organize content, and how they connect to the user interface. - [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) - Manage how users browse, preview, and insert media assets into their designs with a customizable asset library. - [Import From Local Source](https://img.ly/docs/cesdk/sveltekit/import-media/from-local-source-39b2a9/) - Enable users to upload files from their device for use as design assets in the editor. - [Import From Remote Source](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source-b65faf/) - Connect CE.SDK to external sources like servers or third-party platforms to import assets remotely. - [Capture From Camera](https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera-92f388/) - Capture photos or videos directly from a connected camera for immediate use in your design. - [Edit or Remove Assets](https://img.ly/docs/cesdk/sveltekit/import-media/edit-or-remove-assets-ce072c/) - Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources in CE.SDK. - [Source Sets](https://img.ly/docs/cesdk/sveltekit/import-media/source-sets-5679c8/) - Provide multiple versions of images and videos at different resolutions for optimal performance and quality across editing and export workflows. - [Using Default Assets](https://img.ly/docs/cesdk/sveltekit/import-media/default-assets-d2763d/) - Load shapes, stickers, images, and other built-in assets from IMG.LY's CDN to populate your CE.SDK editor using the Asset API. - [Retrieve MIME Type](https://img.ly/docs/cesdk/sveltekit/import-media/retrieve-mimetype-ed13bf/) - Detect the MIME type of resources loaded in the engine to determine file formats for processing, export, or display. - [Asset Content JSON Schema](https://img.ly/docs/cesdk/sveltekit/import-media/content-json-schema-a7b3d2/) - Understand the JSON schema structure for defining asset source content including version, metadata, and payload properties for images, videos, fonts, and templates. - [Supported File Formats for Import](https://img.ly/docs/cesdk/sveltekit/import-media/file-format-support-8cdc84/) - Review the supported image, video, audio, and template formats for importing assets into CE.SDK on the web. - [Size Limits](https://img.ly/docs/cesdk/sveltekit/import-media/size-limits-c32275/) - Learn about file size restrictions and how to optimize large assets for use in CE.SDK. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Library" description: "Manage how users browse, preview, and insert media assets into their designs with a customizable asset library." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) --- --- ## Related Pages - [Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) - Explore the core functionality of the asset library and how users browse, search, and insert media. - [Customize](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) - Adapt the asset library UI and behavior to suit your application’s structure and user needs. - [Thumbnails](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/) - Configure thumbnail images for assets in CE.SDK's asset library with proper sizing, preview URIs for audio, and customized UI display. - [Refresh Assets](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/refresh-assets-382060/) - Trigger asset reloads to ensure the library reflects newly uploaded or updated items. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Basics" description: "Explore the core functionality of the asset library and how users browse, search, and insert media." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) > [Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) --- CE.SDK treats all insertable content as assets—images, videos, audio, stickers, shapes, templates, and text presets flow through a unified asset system.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-basics-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-basics-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-basics-browser/) The asset library connects the engine to the user interface through three layers: ``` ┌─────────────────────────────────────────────────────────────┐ │ User Interface │ │ ┌─────────────┐ references ┌──────────────────────┐ │ │ │ Dock Entry │ ───────────────▶ │ Asset Library Entry │ │ │ │ (Button) │ │ (Display Config) │ │ │ └─────────────┘ └──────────┬───────────┘ │ │ │ queries │ ├──────────────────────────────────────────────│──────────────┤ │ Engine ▼ │ │ ┌──────────────────────┐ │ │ │ Asset Source │ │ │ │ (Data Provider) │ │ │ └──────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` The following example demonstrates all three layers working together: ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-basics-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Asset Library Basics Guide * * Demonstrates the asset library architecture: * - Creating a custom asset source (engine layer) * - Creating an asset library entry (UI configuration layer) * - Connecting the entry to the dock (UI interaction layer) */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Layer 1: Asset Source - provides assets to the UI cesdk.engine.asset.addSource({ id: 'my-custom-images', findAssets: async () => ({ assets: [ { id: 'sample-1', meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1920, height: 1280 } }, { id: 'sample-2', meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', width: 1920, height: 1280 } }, { id: 'sample-3', meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', width: 1920, height: 1280 } } ], total: 3, currentPage: 1, nextPage: undefined }), applyAsset: async (assetResult) => cesdk.engine.asset.defaultApplyAsset(assetResult) }); // Layer 2: Asset Library Entry - connects sources to display settings cesdk.ui.addAssetLibraryEntry({ id: 'my-images-entry', sourceIds: ['my-custom-images'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square' }); // Layer 3: Dock - adds button to access the entry cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-images-entry', label: 'libraries.my-images-entry.label', entries: ['my-images-entry'] }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); cesdk.i18n.setTranslations({ en: { 'libraries.my-images-entry.label': 'My Images' } }); // Query registered entries const allEntries = cesdk.ui.findAllAssetLibraryEntries(); console.log('Registered entries:', allEntries); const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry'); console.log('My entry:', myEntry); // Open the panel to show the custom assets immediately cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-images-entry'] } }); } } export default Example; ``` This guide covers: - Registering asset sources with the engine - Creating asset library entries to configure display settings - Adding entries to the dock for user access ## Layer 1: Asset Source Asset sources provide data through `findAssets` and handle insertion through `applyAsset`. Register them with `engine.asset.addSource()`. ```typescript highlight=highlight-asset-source // Layer 1: Asset Source - provides assets to the UI cesdk.engine.asset.addSource({ id: 'my-custom-images', findAssets: async () => ({ assets: [ { id: 'sample-1', meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', width: 1920, height: 1280 } }, { id: 'sample-2', meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', width: 1920, height: 1280 } }, { id: 'sample-3', meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', width: 1920, height: 1280 } } ], total: 3, currentPage: 1, nextPage: undefined }), applyAsset: async (assetResult) => cesdk.engine.asset.defaultApplyAsset(assetResult) }); ``` For details on asset source configuration, see the [Asset Sources concept](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/). ## Layer 2: Asset Library Entry Entries connect asset sources to display settings. Create them with `cesdk.ui.addAssetLibraryEntry()`. ```typescript highlight=highlight-asset-entry // Layer 2: Asset Library Entry - connects sources to display settings cesdk.ui.addAssetLibraryEntry({ id: 'my-images-entry', sourceIds: ['my-custom-images'], previewLength: 3, gridColumns: 3, gridItemHeight: 'square' }); ``` For display properties like `gridColumns` and `previewLength`, see the [Thumbnails](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/) guide. ## Layer 3: Dock Add entries to the dock with `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` using the `ly.img.assetLibrary.dock` component type. ```typescript highlight=highlight-dock-entry // Layer 3: Dock - adds button to access the entry cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-images-entry', label: 'libraries.my-images-entry.label', entries: ['my-images-entry'] }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); cesdk.i18n.setTranslations({ en: { 'libraries.my-images-entry.label': 'My Images' } }); ``` ## Managing Entries Query and inspect registered entries: ```typescript highlight=highlight-list-entries // Query registered entries const allEntries = cesdk.ui.findAllAssetLibraryEntries(); console.log('Registered entries:', allEntries); const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry'); console.log('My entry:', myEntry); ``` ## API Reference | Method | Description | |--------|-------------| | `findAllAssetLibraryEntries()` | List all registered entry IDs | | `getAssetLibraryEntry(id)` | Get entry configuration | | `addAssetLibraryEntry(entry)` | Register a new entry | | `removeAssetLibraryEntry(id)` | Remove an entry | ## Next Steps - [Customize](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Icons, i18n, replace libraries - [Thumbnails](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/) — Thumbnail URIs, display settings - [Refresh Assets](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/refresh-assets-382060/) — Trigger asset reloads - [Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/) — Creating asset sources --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Customize" description: "Adapt the asset library UI and behavior to suit your application’s structure and user needs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) > [Customize](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) --- Adapt the asset library to match your application's structure and user needs.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-customize-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-customize-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-customize-browser/) The asset library displays assets from registered asset sources. While sources define the data, asset library entries control how that data is presented in the UI. CE.SDK provides default entries for common asset types (images, videos, stickers, etc.), but you can create custom entries or modify existing ones to match your application's needs. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-customize-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; // ===== Section 1: Localizing Entry Labels ===== // Provide translations for custom entries before creating them // Labels appear at different navigation levels: // - Entry label: shown in dock and as panel header (sources overview) // - Source label: shown as section header and when navigating into a source // - Group label: shown when a source contains grouped assets cesdk.i18n.setTranslations({ en: { // Entry-level labels (sources overview) 'libraries.my-custom-assets.label': 'My Assets (Entry Level)', 'libraries.my-replace-assets.label': 'Replace Options', // Source-level labels within entry (overrides default source labels) 'libraries.my-custom-assets.ly.img.image.label': 'Images (Source Level)', 'libraries.my-custom-assets.ly.img.sticker.label': 'Stickers (Source Level)', // Group-level labels within sticker source (all 8 sticker categories) // Format: libraries....label 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.doodle/category/doodle.label': 'Doodle (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoji/category/emoji.label': 'Emoji (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoticons/category/emoticons.label': 'Emoticons (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.hand/category/hand.label': 'Hands (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.sketches/category/sketches.label': 'Sketches (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.3Dstickers/category/3Dstickers.label': '3D Grain (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.craft/category/craft.label': 'Craft (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.marker/category/marker.label': 'Markers (Group Level)' } }); // ===== Section 2: Creating Custom Entries with Theme-Aware Icons ===== // Create a custom asset library entry with theme-aware icons // Use existing demo sources (ly.img.image, ly.img.sticker) to populate the entry cesdk.ui.addAssetLibraryEntry({ id: 'my-custom-assets', sourceIds: ['ly.img.image', 'ly.img.sticker'], // Preview settings control the overview showing all sources previewLength: 4, previewBackgroundType: 'contain', // Grid settings control the detailed view when navigating into a source // Using 2 columns creates a distinct layout from the preview row gridColumns: 2, gridItemHeight: 'square', gridBackgroundType: 'cover', // Theme-aware icon function receives theme and iconSize parameters icon: ({ theme, iconSize }) => { if (theme === 'dark') { return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-dark.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-light.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } }); // ===== Section 3: Creating Entry for Replace Operations ===== // Create a separate entry for replace operations cesdk.ui.addAssetLibraryEntry({ id: 'my-replace-assets', sourceIds: ['ly.img.image'], previewLength: 3, gridColumns: 2, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain' }); // ===== Section 4: Modifying Default Entries ===== // Update the default images entry with different grid columns cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 4 }); // ===== Section 5: Extending Source IDs ===== // Use a callback pattern with currentIds to extend sourceIds cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'ly.img.upload'] }); // ===== Section 6: Configuring Replace Entries ===== // Configure which entries appear for replace operations based on block type cesdk.ui.setReplaceAssetLibraryEntries( ({ selectedBlocks, defaultEntryIds }) => { // Only show replace options when exactly one block is selected if (selectedBlocks.length !== 1) { return []; } const { fillType } = selectedBlocks[0]; // Show custom replace entry for image fills if (fillType === '//ly.img.ubq/fill/image') { return [...defaultEntryIds, 'my-replace-assets']; } // Return empty array to hide replace button for other fill types return []; } ); // ===== Section 7: Adding Entries to the Dock ===== // Add custom entry to the top of the dock with a separator cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-custom-assets', // Dock icons use a static URL string icon: 'https://img.ly/static/cesdk/guides/icon-normal-light.svg', label: 'libraries.my-custom-assets.label', entries: ['my-custom-assets'] }, { id: 'ly.img.separator' }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Create a design scene to display the editor await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Add explanatory text to the canvas const page = engine.scene.getCurrentPage(); if (page) { // Get page dimensions to constrain text within boundaries const pageWidth = engine.block.getWidth(page); const margin = 20; const textWidth = pageWidth - margin * 2; // Title text const titleBlock = engine.block.create('text'); engine.block.replaceText(titleBlock, 'Customize Asset Library'); engine.block.setFloat(titleBlock, 'text/fontSize', 28); engine.block.setWidth(titleBlock, textWidth); engine.block.setHeightMode(titleBlock, 'Auto'); engine.block.setPositionX(titleBlock, margin); engine.block.setPositionY(titleBlock, margin); engine.block.appendChild(page, titleBlock); // Instructions text const instructionsBlock = engine.block.create('text'); engine.block.replaceText( instructionsBlock, '← Click "My Assets (Entry Level)" in the dock.\n\n' + 'Labels show navigation hierarchy:\n' + 'Entry → Source → Group Level' ); engine.block.setFloat(instructionsBlock, 'text/fontSize', 13); engine.block.setWidth(instructionsBlock, textWidth); engine.block.setHeightMode(instructionsBlock, 'Auto'); engine.block.setPositionX(instructionsBlock, margin); engine.block.setPositionY(instructionsBlock, 55); engine.block.appendChild(page, instructionsBlock); } // Open the asset library panel to show the custom entry cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['my-custom-assets'] } }); } } export default Example; ``` This guide covers creating custom entries with themed icons, modifying default entries, configuring context-aware replacement behavior, and adding custom entries to the dock. ## Creating Custom Entries We create custom asset library entries using `cesdk.ui.addAssetLibraryEntry()`. Each entry needs a unique `id`, an array of `sourceIds` referencing registered asset sources, and display configuration options. In this example, we reference the built-in demo sources (`ly.img.image` and `ly.img.sticker`) to populate our custom entry. You can reference any registered source, including custom sources you create. ### Theme-Aware Icons We can provide different icons for light and dark themes using a function for the `icon` property. The function receives `theme` ('light' | 'dark') and `iconSize` ('normal' | 'large') parameters: ```typescript highlight=highlight-custom-entry-themed-icon // Create a custom asset library entry with theme-aware icons // Use existing demo sources (ly.img.image, ly.img.sticker) to populate the entry cesdk.ui.addAssetLibraryEntry({ id: 'my-custom-assets', sourceIds: ['ly.img.image', 'ly.img.sticker'], // Preview settings control the overview showing all sources previewLength: 4, previewBackgroundType: 'contain', // Grid settings control the detailed view when navigating into a source // Using 2 columns creates a distinct layout from the preview row gridColumns: 2, gridItemHeight: 'square', gridBackgroundType: 'cover', // Theme-aware icon function receives theme and iconSize parameters icon: ({ theme, iconSize }) => { if (theme === 'dark') { return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-dark.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-dark.svg'; } return iconSize === 'large' ? 'https://img.ly/static/cesdk/guides/icon-large-light.svg' : 'https://img.ly/static/cesdk/guides/icon-normal-light.svg'; } }); ``` The icon function is called each time the theme changes, ensuring the correct icon is displayed automatically. > **Note:** #### Preview vs Grid ViewWhen an entry has multiple sources, users first see a **preview** showing assets in a horizontal row. The `previewLength` and `previewBackgroundType` settings control this overview. When users click a source header to navigate into it, they see the full **grid view** with all assets arranged according to `gridColumns`, `gridItemHeight`, and `gridBackgroundType`. For example, a preview row transitioning to a 2-column grid creates a distinct visual change. ### Entry for Replace Operations We can create separate entries specifically for replace operations. These entries appear when users click "Replace" on a selected block: ```typescript highlight=highlight-replace-entry // Create a separate entry for replace operations cesdk.ui.addAssetLibraryEntry({ id: 'my-replace-assets', sourceIds: ['ly.img.image'], previewLength: 3, gridColumns: 2, gridItemHeight: 'square', previewBackgroundType: 'contain', gridBackgroundType: 'contain' }); ``` ## Modifying Default Entries We update existing entries using `cesdk.ui.updateAssetLibraryEntry()`. The second parameter can be a partial entry object: ```typescript highlight=highlight-modify-default-entry // Update the default images entry with different grid columns cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 4 }); ``` ### Extending Source IDs To extend `sourceIds` while preserving existing sources, we use a callback pattern with `currentIds`: ```typescript highlight=highlight-extend-source-ids // Use a callback pattern with currentIds to extend sourceIds cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'ly.img.upload'] }); ``` The callback receives `currentIds` containing the entry's existing source IDs, allowing us to append additional sources (like `ly.img.upload` for user uploads) without replacing the defaults. ## Configuring Replace Entries We control which asset library entries appear when users click "Replace" on a selected block using `cesdk.ui.setReplaceAssetLibraryEntries()`. The callback receives context with `selectedBlocks` (array of block info including `id`, `blockType`, and `fillType`) and `defaultEntryIds`. ```typescript highlight=highlight-configure-replace-entries // Configure which entries appear for replace operations based on block type cesdk.ui.setReplaceAssetLibraryEntries( ({ selectedBlocks, defaultEntryIds }) => { // Only show replace options when exactly one block is selected if (selectedBlocks.length !== 1) { return []; } const { fillType } = selectedBlocks[0]; // Show custom replace entry for image fills if (fillType === '//ly.img.ubq/fill/image') { return [...defaultEntryIds, 'my-replace-assets']; } // Return empty array to hide replace button for other fill types return []; } ); ``` Return an empty array to hide the replace button for specific block types. This gives you complete control over which assets can replace which blocks. ## Adding Entries to the Dock We add custom entries to the dock using `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)`. Use `cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })` to get the current order and append your entry: ```typescript highlight=highlight-add-to-dock // Add custom entry to the top of the dock with a separator cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'my-custom-assets', // Dock icons use a static URL string icon: 'https://img.ly/static/cesdk/guides/icon-normal-light.svg', label: 'libraries.my-custom-assets.label', entries: ['my-custom-assets'] }, { id: 'ly.img.separator' }, ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); ``` Each dock item uses `id: 'ly.img.assetLibrary.dock'` with a unique `key`, `entries` array, and optional `icon` and `label` properties. The `label` property references a translation key. ## Localizing Entry Labels We provide translations for custom entries using `cesdk.i18n.setTranslations()`. Labels appear at three navigation levels: - `libraries..label` — Entry label shown in the dock and panel header (entry level) - `libraries...label` — Source label within an entry (source level) - `libraries....label` — Group label within a source (group level) ```typescript highlight=highlight-i18n-translations // Provide translations for custom entries before creating them // Labels appear at different navigation levels: // - Entry label: shown in dock and as panel header (sources overview) // - Source label: shown as section header and when navigating into a source // - Group label: shown when a source contains grouped assets cesdk.i18n.setTranslations({ en: { // Entry-level labels (sources overview) 'libraries.my-custom-assets.label': 'My Assets (Entry Level)', 'libraries.my-replace-assets.label': 'Replace Options', // Source-level labels within entry (overrides default source labels) 'libraries.my-custom-assets.ly.img.image.label': 'Images (Source Level)', 'libraries.my-custom-assets.ly.img.sticker.label': 'Stickers (Source Level)', // Group-level labels within sticker source (all 8 sticker categories) // Format: libraries....label 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.doodle/category/doodle.label': 'Doodle (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoji/category/emoji.label': 'Emoji (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.emoticons/category/emoticons.label': 'Emoticons (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.hand/category/hand.label': 'Hands (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.sketches/category/sketches.label': 'Sketches (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.3Dstickers/category/3Dstickers.label': '3D Grain (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.craft/category/craft.label': 'Craft (Group Level)', 'libraries.my-custom-assets.ly.img.sticker.//ly.img.cesdk.stickers.marker/category/marker.label': 'Markers (Group Level)' } }); ``` Set translations before adding entries to ensure labels are available when the UI renders. The entry label appears when viewing sources, source labels appear as section headers, and group labels appear when navigating into sources that contain grouped assets (like sticker categories). ## Troubleshooting **Entry not appearing in dock**: Ensure you've added the entry to the dock order using `setComponentOrder()`. Creating an entry with `addAssetLibraryEntry()` only registers it—it won't appear until added to the dock. **Replace button not showing**: Verify your `setReplaceAssetLibraryEntries()` callback returns entry IDs (not an empty array) for the selected block type. Check the `blockType` and `fillType` values in the context. **Icon not changing with theme**: Ensure your `icon` function returns different URLs for different `theme` values. The function is called each time the theme changes. **Missing labels**: Check that translation keys match the pattern `libraries..label`. Use `cesdk.i18n.setTranslations()` before adding entries to ensure labels are available. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `cesdk.ui.addAssetLibraryEntry()` | UI | Register a new asset library entry | | `cesdk.ui.updateAssetLibraryEntry()` | UI | Modify an existing entry's properties | | `cesdk.ui.removeAssetLibraryEntry()` | UI | Remove an asset library entry | | `cesdk.ui.getAssetLibraryEntry()` | UI | Retrieve an entry's configuration | | `cesdk.ui.findAllAssetLibraryEntries()` | UI | List all registered entry IDs | | `cesdk.ui.setReplaceAssetLibraryEntries()` | UI | Configure context-aware replace entries | | `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` | UI | Set the dock component order | | `cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })` | UI | Get the current dock component order | | `cesdk.i18n.setTranslations()` | i18n | Add translation strings | ## Next Steps - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Full reference for entry properties - [Thumbnails](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/) — Configure thumbnail display and grid layout - [Refresh Assets](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/refresh-assets-382060/) — Update the library when external changes occur - [Your Server](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/your-server-b91910/) — Create custom asset sources from your own backend --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Refresh Assets" description: "Trigger asset reloads to ensure the library reflects newly uploaded or updated items." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/refresh-assets-382060/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) > [Refresh Assets](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/refresh-assets-382060/) --- Learn how to refresh asset sources when external changes occur outside CE.SDK.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-refresh-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-refresh-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-refresh-assets-browser/) CE.SDK automatically refreshes the asset library for built-in operations like uploads and deletions. However, when assets are modified outside of CE.SDK—through a custom CMS, cloud storage, or third-party upload widget—the asset panel won't reflect these changes automatically. Use `engine.asset.assetSourceContentsChanged()` to notify the engine and trigger a refresh. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-refresh-assets-browser/browser.ts reference-only import type { AssetsQueryResult, EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import packageJson from './package.json'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; // Simulated external data store (represents Cloudinary, S3, or external CMS) const externalAssets = [ { id: 'cloud-1', url: 'https://img.ly/static/ubq_samples/sample_1.jpg', name: 'Mountain Landscape' }, { id: 'cloud-2', url: 'https://img.ly/static/ubq_samples/sample_2.jpg', name: 'Ocean Sunset' } ]; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // ===== Section 1: Register a Custom Asset Source ===== // Register a custom asset source that fetches from an external system // This source will need manual refresh when external changes occur engine.asset.addSource({ id: 'cloudinary-images', async findAssets(queryData): Promise { // Fetch current assets from external data store const filteredAssets = externalAssets.filter( (asset) => !queryData.query || asset.name.toLowerCase().includes(queryData.query.toLowerCase()) ); return { assets: filteredAssets.map((asset) => ({ id: asset.id, label: asset.name, meta: { uri: asset.url, thumbUri: asset.url, blockType: '//ly.img.ubq/graphic' } })), total: filteredAssets.length, currentPage: queryData.page, nextPage: undefined }; } }); // Add the custom source to the asset library cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['cloudinary-images'], gridColumns: 2, gridItemHeight: 'square', previewLength: 4 }); // ===== Section 2: Simulate External Upload ===== // Simulate an external upload widget (e.g., Cloudinary upload widget) // In a real application, this would be triggered by the widget's success callback const simulateExternalUpload = () => { // Add a new asset to the external store const newAsset = { id: `cloud-${Date.now()}`, url: 'https://img.ly/static/ubq_samples/sample_3.jpg', name: `Uploaded Image ${externalAssets.length + 1}` }; externalAssets.push(newAsset); // Notify CE.SDK that the source contents have changed engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External upload complete, asset library refreshed'); }; // ===== Section 3: Simulate External Modification ===== // Simulate backend modifications (e.g., CMS updates, API changes) const simulateExternalModification = () => { // Modify assets in the external store if (externalAssets.length > 0) { externalAssets[0] = { ...externalAssets[0], name: `Modified: ${externalAssets[0].name}` }; } // Refresh the asset library to reflect changes engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External modification complete, asset library refreshed'); }; // ===== Section 4: Simulate External Deletion ===== // Simulate asset deletion from external system const simulateExternalDeletion = () => { // Remove the last asset from the external store if (externalAssets.length > 2) { const removed = externalAssets.pop(); console.log(`Removed asset: ${removed?.name}`); // Refresh the asset library to reflect the deletion engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External deletion complete, asset library refreshed'); } }; // Expose functions for demo purposes (window as any).simulateExternalUpload = simulateExternalUpload; (window as any).simulateExternalModification = simulateExternalModification; (window as any).simulateExternalDeletion = simulateExternalDeletion; // Automatically trigger an upload to demonstrate the refresh setTimeout(() => { simulateExternalUpload(); }, 2000); // Open the asset library to show the custom source cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image'] } }); } } export default Example; ``` This guide covers when manual refresh is needed, how to trigger refreshes programmatically, and integration patterns for external upload widgets. ## When to Use Asset Refresh CE.SDK handles asset refresh automatically for built-in operations. Manual refresh is required when external systems modify asset source content. **Automatic refresh** (no action needed): - Uploads using built-in sources like `ly.img.upload.*` - Deletions through default upload handlers - Modifications made through CE.SDK's asset APIs **Manual refresh required**: - External uploads via third-party widgets (Cloudinary, Dropzone) - Backend modifications through CMS or API updates - Sync with external storage (S3, Azure Blob) - Real-time collaboration when another user adds assets ## Registering a Custom Asset Source Before refreshing assets, you need a custom asset source that fetches from your external system. The `findAssets` method queries your external data store each time the panel needs to display assets. ```typescript highlight-custom-source // Register a custom asset source that fetches from an external system // This source will need manual refresh when external changes occur engine.asset.addSource({ id: 'cloudinary-images', async findAssets(queryData): Promise { // Fetch current assets from external data store const filteredAssets = externalAssets.filter( (asset) => !queryData.query || asset.name.toLowerCase().includes(queryData.query.toLowerCase()) ); return { assets: filteredAssets.map((asset) => ({ id: asset.id, label: asset.name, meta: { uri: asset.url, thumbUri: asset.url, blockType: '//ly.img.ubq/graphic' } })), total: filteredAssets.length, currentPage: queryData.page, nextPage: undefined }; } }); ``` This custom source fetches assets from an external data store (simulating Cloudinary, S3, or a CMS). When the external store changes, the asset panel won't update until you call `assetSourceContentsChanged()`. ## Refreshing After External Uploads When users upload files through a third-party widget, call `assetSourceContentsChanged()` in the success callback. This notifies CE.SDK that the source contents have changed and triggers a re-fetch. ```typescript highlight-external-upload // Simulate an external upload widget (e.g., Cloudinary upload widget) // In a real application, this would be triggered by the widget's success callback const simulateExternalUpload = () => { // Add a new asset to the external store const newAsset = { id: `cloud-${Date.now()}`, url: 'https://img.ly/static/ubq_samples/sample_3.jpg', name: `Uploaded Image ${externalAssets.length + 1}` }; externalAssets.push(newAsset); // Notify CE.SDK that the source contents have changed engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External upload complete, asset library refreshed'); }; ``` The key is calling `assetSourceContentsChanged('cloudinary-images')` after the external upload completes. This tells CE.SDK to call `findAssets()` again, which fetches the updated asset list from your external store. ## Refreshing After External Modifications When your backend modifies asset metadata—renaming files, updating tags, or changing thumbnails—call `assetSourceContentsChanged()` to sync the asset panel. ```typescript highlight-external-modification // Simulate backend modifications (e.g., CMS updates, API changes) const simulateExternalModification = () => { // Modify assets in the external store if (externalAssets.length > 0) { externalAssets[0] = { ...externalAssets[0], name: `Modified: ${externalAssets[0].name}` }; } // Refresh the asset library to reflect changes engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External modification complete, asset library refreshed'); }; ``` Any modification to assets in your external store requires a refresh. Without calling `assetSourceContentsChanged()`, the asset panel displays stale data until the user navigates away and returns. ## Refreshing After External Deletions When assets are deleted from your external system, call `assetSourceContentsChanged()` to remove them from the asset panel. ```typescript highlight-external-deletion // Simulate asset deletion from external system const simulateExternalDeletion = () => { // Remove the last asset from the external store if (externalAssets.length > 2) { const removed = externalAssets.pop(); console.log(`Removed asset: ${removed?.name}`); // Refresh the asset library to reflect the deletion engine.asset.assetSourceContentsChanged('cloudinary-images'); console.log('External deletion complete, asset library refreshed'); } }; ``` The refresh ensures deleted assets no longer appear in the panel. If you skip this step, users may try to use assets that no longer exist. ## Integration Patterns ### Third-Party Upload Widget Integrate with upload widgets like Cloudinary by calling `assetSourceContentsChanged()` in the success callback: ```typescript const widget = cloudinary.createUploadWidget( { cloudName: 'my-cloud' }, (error, result) => { if (result.event === 'success') { engine.asset.assetSourceContentsChanged('cloudinary-images'); } } ); ``` ### WebSocket Updates For real-time sync with backend changes: ```typescript socket.on('assets:changed', (sourceId) => { engine.asset.assetSourceContentsChanged(sourceId); }); ``` ### Polling for Changes If your backend doesn't support real-time notifications: ```typescript setInterval(() => { engine.asset.assetSourceContentsChanged('my-source'); }, 30000); // Refresh every 30 seconds ``` ## Troubleshooting **Assets not updating**: Verify the source ID passed to `assetSourceContentsChanged()` matches the ID used when registering the source with `addSource()`. Source IDs are case-sensitive. **Refresh not triggering**: Ensure you call `assetSourceContentsChanged()` after the external operation completes. If called before the upload finishes, `findAssets()` may return stale data. **Stale assets displayed**: Check that your `findAssets` implementation fetches fresh data on each call. Avoid caching responses unless you invalidate the cache when calling `assetSourceContentsChanged()`. **Asset panel not visible**: The refresh only affects visible panels. If the asset panel is closed, the refresh queues until the user reopens it. ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `engine.asset.assetSourceContentsChanged(sourceID)` | Asset API | Notify engine that asset source contents changed | | `engine.asset.addSource(source)` | Asset API | Register custom asset source | | `engine.asset.findAssets(sourceID, query)` | Asset API | Query assets from a source | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Thumbnails" description: "Configure thumbnail images for assets in CE.SDK's asset library with proper sizing, preview URIs for audio, and customized UI display." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-library-65d6c4/) > [Thumbnails](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/thumbnails-c23949/) --- Learn how to configure thumbnail images for assets in CE.SDK's asset library.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-thumbnails-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-asset-library-thumbnails-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-thumbnails-browser/) Thumbnails provide visual previews of assets in the asset library, improving the user experience when browsing images, videos, audio files, and other media. We recommend using **512px width for thumbUri** to ensure quality across platforms. ```typescript file=@cesdk_web_examples/guides-import-media-asset-library-thumbnails-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); const engine = cesdk.engine; // ===== Section 1: Basic Thumbnails ===== // Add a local asset source with basic thumbnails engine.asset.addLocalSource('custom-images'); // Add an image with 512px width thumbnail (recommended size) engine.asset.addAssetToSource('custom-images', { id: 'sample-1', label: { en: 'Landscape Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', // 512px recommended blockType: '//ly.img.ubq/graphic' } }); // Additional images for the asset library (not shown in highlight) engine.asset.addAssetToSource('custom-images', { id: 'sample-2', label: { en: 'Portrait Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('custom-images', { id: 'sample-3', label: { en: 'Nature Scene' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 2: Preview URIs for Audio ===== // Add audio assets with preview URIs for playback in the asset library engine.asset.addLocalSource('custom-audio'); // Audio with full URIs and preview clips engine.asset.addAssetToSource('custom-audio', { id: 'dance-harder', label: { en: 'Dance Harder' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a', // Preview clip - set as block property on canvas mimeType: 'audio/x-m4a', // Required for audio preview to work blockType: '//ly.img.ubq/audio', duration: '212.531995' } }); engine.asset.addAssetToSource('custom-audio', { id: 'far-from-home', label: { en: 'Far From Home' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '98.716009' } }); engine.asset.addAssetToSource('custom-audio', { id: 'elsewhere', label: { en: 'Elsewhere' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/elsewhere.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '121.2' } }); // ===== Section 3: Custom Asset Source with Thumbnail Mapping ===== // Create a custom asset source that maps external API responses to CE.SDK format // This example mimics how Unsplash thumbnails would be mapped engine.asset.addSource({ id: 'custom-api-source', async findAssets(queryData) { // Simulate external API response (e.g., from Unsplash) const mockApiResponse = { results: [ { id: 'photo-1', urls: { full: 'https://img.ly/static/ubq_samples/sample_4.jpg', // High-res small: 'https://img.ly/static/ubq_samples/sample_4.jpg' // 512px thumbnail }, alt_description: 'Mountain landscape' }, { id: 'photo-2', urls: { full: 'https://img.ly/static/ubq_samples/sample_5.jpg', small: 'https://img.ly/static/ubq_samples/sample_5.jpg' }, alt_description: 'Ocean waves' }, { id: 'photo-3', urls: { full: 'https://img.ly/static/ubq_samples/sample_6.jpg', small: 'https://img.ly/static/ubq_samples/sample_6.jpg' }, alt_description: 'Forest path' } ], total: 3 }; // Map external API format to CE.SDK AssetResult format return { assets: mockApiResponse.results.map((photo) => ({ id: photo.id, label: photo.alt_description, meta: { uri: photo.urls.full, // High-res image for canvas thumbUri: photo.urls.small, // Thumbnail for asset library (512px recommended) blockType: '//ly.img.ubq/graphic' } })), total: mockApiResponse.total, currentPage: queryData.page, nextPage: mockApiResponse.total > (queryData.page + 1) * queryData.perPage ? queryData.page + 1 : undefined }; } }); // ===== Section 4: Display Customization - Background Types ===== // Configure how thumbnails scale in the asset library cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['custom-images', 'custom-api-source'], gridBackgroundType: 'cover', // Crop to fill card previewBackgroundType: 'contain' // Fit entire image in preview }); // Audio thumbnails with contain to show full waveform // Note: Audio assets automatically show a play button overlay for previewing cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ['custom-audio'], gridBackgroundType: 'contain', // Show full waveform previewBackgroundType: 'contain', cardBorder: true // Add border to make cards more visible }); // ===== Section 5: Display Customization - Grid Layout ===== // Configure grid columns and item height cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 3, // 3 columns in grid view gridItemHeight: 'square' // Square aspect ratio for all cards }); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { gridColumns: 2, // 2 columns for audio gridItemHeight: 'auto' // Auto height based on content }); // ===== Section 6: Display Customization - Card Background Preferences ===== // Configure fallback order for card backgrounds // Try vector path first, then thumbnail image cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { cardBackgroundPreferences: [ { path: 'meta.vectorPath', type: 'svgVectorPath' }, // Try SVG first { path: 'meta.thumbUri', type: 'image' } // Fallback to thumbnail ] }); // For images, prioritize thumbnail cesdk.ui.updateAssetLibraryEntry('ly.img.image', { cardBackgroundPreferences: [ { path: 'meta.thumbUri', type: 'image' } // Use thumbnail as primary background ] }); // Open the asset library to the audio and image panels to demonstrate thumbnails // Audio assets are previewable - hover over them to see a play button // Click the play button to hear the previewUri audio clip cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.audio', 'ly.img.image'] } }); } } export default Example; ``` This guide covers configuring basic thumbnails, preview URIs for audio playback, custom thumbnail mapping for external APIs, and UI customization options. ## Understanding thumbUri vs previewUri Three URI properties control how assets are displayed and used in CE.SDK: | Property | Purpose | Used For | Media Type | Set On Block | |----------|---------|----------|------------|--------------| | `thumbUri` | Visual thumbnail (UI-only) | Asset library grid display | **Image only** | No | | `previewUri` | Preview content | Audio playback in library & set as block property on canvas | **Any media type** | Yes | | `uri` | Full asset | Final content on canvas | Any | Yes | **Key distinctions**: - **`thumbUri`** is UI-only and must be an image. It displays in the asset library but is never set on the block itself. - **`previewUri`** is set as a property on the block when the asset is applied to the canvas. It can be any media type (audio, video, etc.) and serves both for library preview playback and as the block's preview content. **For images and video**: Only `thumbUri` and `uri` are needed. The `thumbUri` provides the visual preview in the asset library. **For audio**: Use all three properties. The `thumbUri` shows a waveform visualization in the asset library (image only, UI-only). The `previewUri` is **set as block property** when asset is applied; it plays a short preview clip when users click play in the asset library and serves as the block's preview content on canvas. The `uri` loads the full audio file for final export. The `previewUri` is a performance optimization for large audio files. Without it, the engine loads the full `uri` for preview playback, which can be slow for multi-minute files. ## Thumbnail Configuration ### Basic Thumbnails Add thumbnails using the `thumbUri` property in asset metadata. We can register assets using `engine.asset.addSource()` for custom sources or `engine.asset.addAssetToSource()` for local sources. ```typescript highlight-basic-thumbnails // Add a local asset source with basic thumbnails engine.asset.addLocalSource('custom-images'); // Add an image with 512px width thumbnail (recommended size) engine.asset.addAssetToSource('custom-images', { id: 'sample-1', label: { en: 'Landscape Photo' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', // 512px recommended blockType: '//ly.img.ubq/graphic' } }); ``` The `thumbUri` should point to a 512px width image for optimal quality across platforms. The engine displays this thumbnail in the asset library grid and preview panels. ### Preview URIs for Audio For audio assets, use `previewUri` to provide lightweight preview clips. The engine uses `previewUri` in two scenarios: 1. **Asset library playback** — The play button in audio asset cards loads `previewUri` instead of the full file 2. **Canvas insertion** — When adding an audio asset to the canvas, `previewUri` is **set as a block property** and serves as the block's content for preview playback Without `previewUri`, the engine falls back to `uri`, which can cause slow loading for large audio files. Use shorter preview clips (30 seconds recommended) to improve performance. ```typescript highlight-audio-preview-uri // Add audio assets with preview URIs for playback in the asset library engine.asset.addLocalSource('custom-audio'); // Audio with full URIs and preview clips engine.asset.addAssetToSource('custom-audio', { id: 'dance-harder', label: { en: 'Dance Harder' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a', // Full audio file thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/dance_harder.jpg', // Waveform visualization (image, UI-only) previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a', // Preview clip - set as block property on canvas mimeType: 'audio/x-m4a', // Required for audio preview to work blockType: '//ly.img.ubq/audio', duration: '212.531995' } }); engine.asset.addAssetToSource('custom-audio', { id: 'far-from-home', label: { en: 'Far From Home' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/audio-wave.png', previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '98.716009' } }); engine.asset.addAssetToSource('custom-audio', { id: 'elsewhere', label: { en: 'Elsewhere' }, meta: { uri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/elsewhere.m4a', thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/thumbnails/elsewhere.jpg', previewUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/elsewhere.m4a', mimeType: 'audio/x-m4a', blockType: '//ly.img.ubq/audio', duration: '121.2' } }); ``` The `thumbUri` displays a waveform visualization in the asset library, while `previewUri` provides the audio content for playback preview. ### Custom Asset Source Thumbnails We can map external API responses to CE.SDK format with thumbnails in the `findAssets` method. This example shows how to transform API responses (like Unsplash) that use different thumbnail field names into CE.SDK's `meta.thumbUri` format. ```typescript highlight-custom-source-thumbnails // Create a custom asset source that maps external API responses to CE.SDK format // This example mimics how Unsplash thumbnails would be mapped engine.asset.addSource({ id: 'custom-api-source', async findAssets(queryData) { // Simulate external API response (e.g., from Unsplash) const mockApiResponse = { results: [ { id: 'photo-1', urls: { full: 'https://img.ly/static/ubq_samples/sample_4.jpg', // High-res small: 'https://img.ly/static/ubq_samples/sample_4.jpg' // 512px thumbnail }, alt_description: 'Mountain landscape' }, { id: 'photo-2', urls: { full: 'https://img.ly/static/ubq_samples/sample_5.jpg', small: 'https://img.ly/static/ubq_samples/sample_5.jpg' }, alt_description: 'Ocean waves' }, { id: 'photo-3', urls: { full: 'https://img.ly/static/ubq_samples/sample_6.jpg', small: 'https://img.ly/static/ubq_samples/sample_6.jpg' }, alt_description: 'Forest path' } ], total: 3 }; // Map external API format to CE.SDK AssetResult format return { assets: mockApiResponse.results.map((photo) => ({ id: photo.id, label: photo.alt_description, meta: { uri: photo.urls.full, // High-res image for canvas thumbUri: photo.urls.small, // Thumbnail for asset library (512px recommended) blockType: '//ly.img.ubq/graphic' } })), total: mockApiResponse.total, currentPage: queryData.page, nextPage: mockApiResponse.total > (queryData.page + 1) * queryData.perPage ? queryData.page + 1 : undefined }; } }); ``` The custom source maps `photo.urls.full` to `meta.uri` for the high-resolution canvas image and `photo.urls.small` to `meta.thumbUri` for the 512px asset library thumbnail. ## Display Customization ### Background Types We can configure how thumbnails scale in the asset library using `gridBackgroundType` and `previewBackgroundType`: - **cover** — Crops the thumbnail to fill the entire card - **contain** — Fits the entire thumbnail within the card, may leave empty space ```typescript highlight-background-types // Configure how thumbnails scale in the asset library cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['custom-images', 'custom-api-source'], gridBackgroundType: 'cover', // Crop to fill card previewBackgroundType: 'contain' // Fit entire image in preview }); // Audio thumbnails with contain to show full waveform // Note: Audio assets automatically show a play button overlay for previewing cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ['custom-audio'], gridBackgroundType: 'contain', // Show full waveform previewBackgroundType: 'contain', cardBorder: true // Add border to make cards more visible }); ``` Use `cover` for thumbnails that should fill cards completely (cropping if needed). Use `contain` to show the complete thumbnail without cropping, which is useful for waveforms or icons. ### Grid Layout Configure the number of columns and item aspect ratio in the asset library grid: ```typescript highlight-grid-layout // Configure grid columns and item height cesdk.ui.updateAssetLibraryEntry('ly.img.image', { gridColumns: 3, // 3 columns in grid view gridItemHeight: 'square' // Square aspect ratio for all cards }); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { gridColumns: 2, // 2 columns for audio gridItemHeight: 'auto' // Auto height based on content }); ``` The `gridColumns` property controls how many thumbnails appear per row. The `gridItemHeight` can be `square` for uniform sizing or `auto` for dynamic height based on content. ### Card Background Preferences Configure the fallback order for card backgrounds when thumbnails are missing. The engine checks preferences in array order and uses the first available value. ```typescript highlight-card-background-preferences // Configure fallback order for card backgrounds // Try vector path first, then thumbnail image cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { cardBackgroundPreferences: [ { path: 'meta.vectorPath', type: 'svgVectorPath' }, // Try SVG first { path: 'meta.thumbUri', type: 'image' } // Fallback to thumbnail ] }); // For images, prioritize thumbnail cesdk.ui.updateAssetLibraryEntry('ly.img.image', { cardBackgroundPreferences: [ { path: 'meta.thumbUri', type: 'image' } // Use thumbnail as primary background ] }); ``` The `path` property uses dot notation to access asset properties (e.g., `meta.thumbUri` accesses `asset.meta.thumbUri`). The `type` determines rendering: - **svgVectorPath** — Renders SVG vector paths with theme-adaptive colors - **image** — Displays images using CSS background We can also provide a function that returns custom backgrounds per asset, allowing dynamic behavior based on asset properties. ## Best Practices - **Size**: Use 512px width for `thumbUri` to ensure quality across platforms - **Format**: Use JPEG for photos and PNG for graphics with transparency - **When to use previewUri**: - Audio: Provide shorter preview clip (30 seconds instead of 3 minutes). **Important**: Audio assets require `mimeType` (e.g., `'audio/x-m4a'`) for preview buttons to appear in the asset library - Video: Not supported (use `thumbUri` + `uri`, no `previewUri`) - Images: Not needed (`thumbUri` is sufficient) - **Media type constraints**: `thumbUri` must be an image, while `previewUri` can be any media type (currently used for audio, future support for video previews planned) - **Block property**: Unlike `thumbUri` (UI-only), `previewUri` is set as a property on the block itself when the asset is applied to canvas - **Performance**: Optimize thumbnail file sizes and use CDN with proper cache headers - **Caching**: Implement long cache TTLs for static thumbnails - **Memory**: Enable the `clampThumbnailTextureSizes` setting for large asset libraries - **Fallbacks**: Configure `cardBackgroundPreferences` for missing thumbnail handling ## Troubleshooting **Thumbnails not displaying**: Check CORS configuration, URL validity, and browser network tab for 404 or CORS errors. Ensure thumbnail URLs are accessible from the browser. **Slow loading**: Optimize file sizes (512px max width recommended), use a CDN, and enable compression. For audio, ensure `previewUri` points to short preview clips instead of full files. **Distorted appearance**: Choose the correct `backgroundType` setting. Use `cover` when thumbnails should fill cards (allowing crop) or `contain` when the entire thumbnail must be visible. **Missing fallback**: Configure `cardBackgroundPreferences` to define fallback order. For example, try `meta.vectorPath` first, then fall back to `meta.thumbUri` for graceful degradation. **Audio preview not working**: Ensure audio assets include the `mimeType` property (e.g., `'audio/x-m4a'` or `'audio/mpeg'`). The asset library requires this property to display the play button overlay on audio thumbnails. Also verify `previewUri` or `uri` points to a valid audio file. ## API Reference | Method/Property | Category | Purpose | |-----------------|----------|---------| | `meta.thumbUri` | Asset Metadata | Thumbnail for grid display (512px recommended) | | `meta.previewUri` | Asset Metadata | Preview for audio playback and canvas insertion | | `meta.mimeType` | Asset Metadata | MIME type for audio assets (required for preview buttons) | | `engine.asset.addSource()` | Asset API | Register custom source with thumbnails | | `engine.asset.addAssetToSource()` | Asset API | Add asset with thumbnail to source | | `cesdk.ui.updateAssetLibraryEntry()` | UI API | Configure thumbnail display | | `gridBackgroundType` | Entry Config | Thumbnail scaling in grid (cover/contain) | | `previewBackgroundType` | Entry Config | Thumbnail scaling in preview | | `cardBackgroundPreferences` | Entry Config | Background rendering priority and fallbacks | | `gridColumns` | Entry Config | Grid columns affecting thumbnail size | | `gridItemHeight` | Entry Config | Grid item aspect ratio (auto/square) | ## Next Steps - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — UI customization options - [Asset Concepts](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/) — Asset sources and metadata - [Unsplash Integration](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) — Thumbnail mapping example - [Source Sets](https://img.ly/docs/cesdk/sveltekit/import-media/source-sets-5679c8/) — Responsive asset rendering (not thumbnails) --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Capture From Camera" description: "Capture photos or videos directly from a connected camera for immediate use in your design." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera-92f388/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera-92f388/) --- --- ## Related Pages - [Record Video](https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera/record-video-47819b/) - Display live camera feeds inside CE.SDK using PixelStreamFill for real-time preview with effects. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Record Video" description: "Display live camera feeds inside CE.SDK using PixelStreamFill for real-time preview with effects." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera/record-video-47819b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Capture From Camera](https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera-92f388/) > [Record Video](https://img.ly/docs/cesdk/sveltekit/import-media/capture-from-camera/record-video-47819b/) --- Display live camera feeds in CE.SDK scenes using `PixelStreamFill` and apply real-time effects to the video. This guide covers creating a scene with a pixel stream fill, controlling feed orientation, accessing the camera, and updating the fill with video frames. ## Create a Scene with Camera Fill To display a camera feed, create a scene and set up a page with `PixelStreamFill`. The pixel stream fill accepts live pixel data that you provide frame by frame: ```js engine.scene.create(); const stack = engine.block.findByType('stack')[0]; const page = engine.block.create('page'); engine.block.appendChild(stack, page); const pixelStreamFill = engine.block.createFill('pixelStream'); engine.block.setFill(page, pixelStreamFill); engine.block.appendEffect(page, engine.block.createEffect('half_tone')); ``` We create a scene, add a page to the stack, and assign a `PixelStreamFill` to receive camera data. The `PixelStreamFill` acts as a container that displays whatever pixel data you send to it. You can apply any CE.SDK effect to process the camera feed in real-time. ## Control Feed Orientation The `fill/pixelStream/orientation` property controls how the camera feed is displayed. Use `UpMirrored` to horizontally flip the image, which is common for front-facing cameras to create a natural mirror-like selfie view: ```js // Horizontal mirroring engine.block.setEnum( pixelStreamFill, 'fill/pixelStream/orientation', 'UpMirrored' ); ``` Available orientation values: | Value | Effect | |-------|--------| | `Up` | No rotation (default) | | `Down` | 180° rotation | | `Left` | 90° counter-clockwise | | `Right` | 90° clockwise | | `UpMirrored` | Horizontal flip | | `DownMirrored` | 180° + horizontal flip | | `LeftMirrored` | 90° CCW + horizontal flip | | `RightMirrored` | 90° CW + horizontal flip | These orientations let you rotate or flip the feed without expensive CPU transformations. ## Access Camera with Browser APIs Request camera access using the browser's `navigator.mediaDevices.getUserMedia()` API. Create an HTML video element to receive the MediaStream, then update the page dimensions to match the video: ```js navigator.mediaDevices.getUserMedia({ video: true }).then( (stream) => { const video = document.createElement('video'); video.autoplay = true; video.srcObject = stream; video.addEventListener('loadedmetadata', () => { engine.block.setWidth(page, video.videoWidth); engine.block.setHeight(page, video.videoHeight); engine.scene.zoomToBlock(page, 40, 40, 40, 40); // Continue with frame updates... }); }, (err) => { console.error(err); } ); ``` The `facingMode` option in `getUserMedia()` lets you request the front-facing camera (`'user'`) or rear camera (`'environment'`) on mobile devices. ## Update Fill with Video Frames Use `requestVideoFrameCallback()` to efficiently sync frame updates with the video's frame rate. Call `engine.block.setNativePixelBuffer()` in each callback to send the current video frame to CE.SDK: ```js const onVideoFrame = () => { engine.block.setNativePixelBuffer(pixelStreamFill, video); video.requestVideoFrameCallback(onVideoFrame); }; video.requestVideoFrameCallback(onVideoFrame); ``` The `setNativePixelBuffer()` method accepts either an `HTMLVideoElement` or `HTMLCanvasElement`, providing flexibility for different video processing workflows. Using `requestVideoFrameCallback` instead of `requestAnimationFrame` ensures frame updates are synchronized with the video's actual frame rate. ## Troubleshooting ### Camera Not Appearing Verify camera permissions are granted in the browser. Check that the video element has `autoplay` set to `true`. Ensure the `loadedmetadata` event fires before accessing video dimensions. ### Mirrored or Rotated Incorrectly Check the `fill/pixelStream/orientation` enum value. Front-facing cameras typically need `UpMirrored`. Mobile devices may require rotation adjustments based on device orientation. ### Effects Not Rendering Confirm effects are appended using `engine.block.appendEffect()`. Verify the effect block was created successfully with `engine.block.createEffect()`. ### Performance Issues Ensure `requestVideoFrameCallback` is used instead of `requestAnimationFrame` for better frame synchronization. Check that only one callback loop is running. Consider reducing effect complexity for smoother preview. ## API Reference | Method | Description | | --- | --- | | `engine.scene.create()` | Create a scene for camera preview | | `engine.block.create('page')` | Create a page block to hold the camera fill | | `engine.block.createFill('pixelStream')` | Create a fill that accepts live pixel data | | `engine.block.setFill()` | Assign the pixel stream fill to a block | | `engine.block.setNativePixelBuffer()` | Send video frame data to the fill | | `engine.block.setEnum()` | Set the orientation property for mirroring or rotation | | `engine.block.createEffect()` | Create an effect for real-time processing | | `engine.block.appendEffect()` | Apply an effect to the page | | `engine.block.setWidth()` | Set block width to match video dimensions | | `engine.block.setHeight()` | Set block height to match video dimensions | | `engine.scene.zoomToBlock()` | Fit the camera view in the viewport | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Concepts" description: "This guide explains the foundational architecture of the CE.SDK asset system, including what asset sources are, how they organize content, and how they connect to the user interface." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Concepts](https://img.ly/docs/cesdk/sveltekit/import-media/concepts-5e6197/) --- Understand the foundational architecture of CE.SDK's asset system and how asset sources organize content across platforms. Asset sources are CE.SDK's content delivery architecture. Instead of hardcoding asset knowledge into the editor, CE.SDK uses a modular system where any content can be provided through a standardized interface. This decouples what assets are available from how they're discovered and applied. ``` PLATFORM-SPECIFIC UI (Web) ┌─────────────────────────────────────────────────────────────────────────┐ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Dock Button │───▶│ Asset Panel │───▶│ Assets Grid │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ Configured via: Asset Library Entries, Dock config, Panel navigation │ └─────────────────────────────────────────────────────────────────────────┘ │ ▼ CROSS-PLATFORM ENGINE (engine.asset API) ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ findAssets() addSource() addLocalSource() apply() │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Custom │ │ Local │ │ JSON-Based │ │ │ │ Sources │ │ Sources │ │ Sources │ │ │ ├──────────────┤ ├──────────────┤ ├──────────────┤ │ │ │ Your API │ │ User Uploads │ │ Built-in │ │ │ │ Database │ │ Collections │ │ Asset Packs │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ Identical across Web, iOS, Android │ └─────────────────────────────────────────────────────────────────────────┘ ``` This guide covers the foundational concepts of asset sources. For implementation details, see the linked guides at the end. ## Asset Source Fundamentals An asset source provides content to the editor through a common interface. Every source has a unique identifier (e.g., `ly.img.image`, `ly.img.sticker`) and implements methods for discovering and applying assets. Sources support: - **Query-based discovery** with pagination and filtering - **Optional grouping** (e.g., sticker groups: "emoji", "doodle", "hand") - **Metadata** including credits, licenses, and format information Sources are content-agnostic—images, fonts, templates, and custom content all use the same pattern. ## Content Organized as Asset Sources Asset sources handle virtually all reusable creative content: | Category | Examples | | ---------- | ---------------------------------------- | | Media | Images, videos, audio clips | | Graphics | Stickers, shapes, vectors, icons | | Typography | Fonts, typefaces, text presets | | Colors | Color palettes, spot colors | | Effects | Blur types, filters, LUT effects | | Templates | Design templates, page presets | | Custom | User uploads, remote APIs, your own data | Built-in sources include `ly.img.image`, `ly.img.sticker`, `ly.img.template`, `ly.img.typeface`, `ly.img.filter`, `ly.img.blur`, `ly.img.effect`, and more. ## Types of Asset Sources There are three ways to provide assets to CE.SDK: ### Custom Sources Implement the source interface to connect any backend—database, API, or custom system. Custom sources provide full control over discovery and application logic. Use custom sources when you need to: - Connect to your existing content management system - Implement custom search or filtering logic - Control how assets are applied to the scene ### Local Sources Managed by the engine with dynamic add/remove operations. Local sources are suitable for user uploads or custom collections that change during the editing session. The engine handles storage and retrieval. ### JSON-Based Sources Pre-defined asset collections loaded from JSON files. All built-in asset packs use this approach. JSON sources are ideal for static content that doesn't change frequently. ## Asset Sources and the User Interface Asset sources are backend providers—they don't know about UI. The connection between sources and what users see happens through platform-specific UI configuration. On Web, asset sources connect to the UI through: - **Asset Library Entries** — Group one or more sources for display, configure grid layout and preview - **Dock Buttons** — Sidebar icons that open asset panels - **Panel Navigation** — Entry → Source → Groups → Assets grid This separation means you can: - Show multiple sources in one UI panel - Show the same source in different UI locations - Change UI presentation without changing the source ## Cross-Platform Architecture Asset sources use the `engine.asset` API consistently across all platforms (Web, iOS, Android). All platforms support: - Custom source registration - JSON-based asset loading - Local asset management - Group-based organization - Event subscriptions (source added, removed, updated) Code patterns transfer directly between platforms with only syntax changes. ## Asset Structure Each asset contains: - **ID** — Unique identifier within the source - **Meta** — URI, thumbnail, MIME type, dimensions, block type hints - **Label** — Localized display name - **Tags** — Searchable keywords (localized) - **Groups** — Category membership - **Context** — Source reference for tracking origin The engine uses metadata hints (`blockType`, `fillType`, `shapeType`) to determine what block type to create when applying an asset. ## Discovery and Application Assets are discovered through queries supporting pagination, text search, tag/group filtering, and sorting. When applied, assets either create new blocks or modify existing ones. Sources can customize application behavior or use the engine's default implementation. ## Source Lifecycle Events The engine emits events when sources change: added, removed, or contents updated. Subscribe to these events to keep UI synchronized with available content. ## Troubleshooting Common conceptual misunderstandings: - **Confusing sources with UI** — Asset sources are backend providers; they don't render UI. The UI (dock buttons, panels, grids) is configured separately and connects to sources. - **Expecting sources to filter themselves** — Sources return all matching assets; UI configuration determines what's displayed to users. - **Mixing source types** — Custom sources (your code), local sources (engine-managed), and JSON sources (static files) serve different purposes. Choose based on whether you need dynamic backend connections, runtime asset management, or static asset packs. ## API Reference | Method | Category | Purpose | | ------------------------------------- | ----------------- | ----------------------------------------------------------------- | | `engine.asset.addSource()` | Source Management | Register a custom asset source with discovery and apply callbacks | | `engine.asset.addLocalSource()` | Source Management | Create an engine-managed source for dynamic asset add/remove | | `engine.asset.findAssets()` | Discovery | Query assets with pagination, search, filtering, and sorting | | `engine.asset.apply()` | Application | Apply an asset to the active scene, creating a configured block | | `engine.asset.onAssetSourceAdded()` | Events | Subscribe to source registration events | | `engine.asset.onAssetSourceRemoved()` | Events | Subscribe to source removal events | | `engine.asset.onAssetSourceUpdated()` | Events | Subscribe to source content change events | ## Next Steps - [Your Server](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/your-server-b91910/) — Connect your own backend as an asset source - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Configure the asset library UI on web - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Customize asset library appearance --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Asset Content JSON Schema" description: "Understand the JSON schema structure for defining asset source content including version, metadata, and payload properties for images, videos, fonts, and templates." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/content-json-schema-a7b3d2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Asset Content JSON Schema](https://img.ly/docs/cesdk/sveltekit/import-media/content-json-schema-a7b3d2/) --- Reference documentation for the JSON schema structure used to define asset source content in CE.SDK. Asset content JSON files define the structure and metadata for assets that CE.SDK loads into asset sources. This schema supports images, videos, audio, fonts, templates, colors, shapes, and effects. ## Manifest Structure Every `content.json` file requires three top-level fields: ```json { "version": "2.0.0", "id": "my.custom.source", "assets": [] } ``` | Field | Type | Required | Description | |-------|------|----------|-------------| | `version` | `string` | Yes | Schema version | | `id` | `string` | Yes | Unique identifier for the asset source | | `assets` | `AssetDefinition[]` | Yes | Array of asset definitions | ## Asset Definition Each asset in the `assets` array follows this structure: | Property | Type | Required | Description | |----------|------|----------|-------------| | `id` | `string` | Yes | Unique identifier within the source | | `label` | `Record` | No | Localized display names for UI and tooltips | | `tags` | `Record` | No | Localized keywords for search and filtering | | `groups` | `string[]` | No | Categories for grouping assets in the UI | | `meta` | `AssetMetaData` | No | Content-specific metadata | | `payload` | `AssetPayload` | No | Structured data for specialized assets | ### Localization Labels and tags use locale codes as keys (e.g., `"en"`, `"de"`, `"fr"`). CE.SDK selects the appropriate translation based on the user's locale. ```json { "id": "mountain-photo", "label": { "en": "Mountain Landscape", "de": "Berglandschaft" }, "tags": { "en": ["nature", "mountain"], "de": ["natur", "berg"] }, "groups": ["landscapes", "nature"] } ``` ## Asset Metadata The `meta` object contains content-specific information for loading and applying assets. ### Content Properties Define URIs and file information for loading the asset content. The `uri` property points to the main asset file, while `thumbUri` and `previewUri` provide optimized versions for UI display. ```json { "meta": { "uri": "{{base_url}}/images/photo.jpg", "thumbUri": "{{base_url}}/thumbnails/photo-thumb.jpg", "previewUri": "{{base_url}}/previews/photo-preview.jpg", "filename": "photo.jpg", "mimeType": "image/jpeg" } } ``` | Property | Type | Description | |----------|------|-------------| | `uri` | `string` | Primary content URI. Supports `{{base_url}}` placeholder | | `thumbUri` | `string` | Thumbnail image URI for previews | | `previewUri` | `string` | Higher-quality preview URI | | `filename` | `string` | Original filename | | `mimeType` | `string` | MIME type (e.g., `"image/jpeg"`, `"video/mp4"`) | ### Dimension Properties Specify the pixel dimensions of the asset. CE.SDK uses these values for layout calculations and aspect ratio preservation when inserting assets into a design. ```json { "meta": { "width": 1920, "height": 1280 } } ``` | Property | Type | Description | |----------|------|-------------| | `width` | `number` | Content width in pixels | | `height` | `number` | Content height in pixels | ### Block Creation Properties Control what design block CE.SDK creates when the asset is applied. These properties determine how the asset integrates into the design structure. ```json { "meta": { "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/image", "shapeType": "//ly.img.ubq/shape/rect", "kind": "image" } } ``` | Property | Type | Description | |----------|------|-------------| | `blockType` | `string` | Design block type to create | | `fillType` | `string` | Fill type for the block | | `shapeType` | `string` | Shape type for stickers/shapes | | `kind` | `string` | Asset category hint (e.g., `"image"`, `"video"`, `"template"`) | **Block Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/graphic` | Images, stickers, graphics | | `//ly.img.ubq/text` | Text blocks | | `//ly.img.ubq/audio` | Audio clips | | `//ly.img.ubq/page` | Templates, pages | | `//ly.img.ubq/group` | Grouped elements | | `//ly.img.ubq/cutout` | Cutout shapes | **Fill Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/fill/image` | Image fills | | `//ly.img.ubq/fill/video` | Video fills | | `//ly.img.ubq/fill/color` | Solid color fills | | `//ly.img.ubq/fill/gradient/linear` | Linear gradients | | `//ly.img.ubq/fill/gradient/radial` | Radial gradients | | `//ly.img.ubq/fill/gradient/conical` | Conical gradients | **Shape Type Values:** | Value | Use Case | |-------|----------| | `//ly.img.ubq/shape/rect` | Rectangles | | `//ly.img.ubq/shape/ellipse` | Circles, ovals | | `//ly.img.ubq/shape/polygon` | Polygons | | `//ly.img.ubq/shape/star` | Star shapes | | `//ly.img.ubq/shape/line` | Lines | | `//ly.img.ubq/shape/vector_path` | Custom vector paths | ### Media Properties Configure playback behavior for time-based media like video and audio. Use `duration` to specify length and `looping` to enable repeat playback for background music or ambient video. ```json { "meta": { "duration": "30", "looping": true, "vectorPath": "M10 10 L90 90" } } ``` | Property | Type | Description | |----------|------|-------------| | `duration` | `string` | Duration in seconds as a string (e.g., `"30"`, `"120"`) | | `looping` | `boolean` | Whether media should loop continuously. Use for background music or ambient video | | `vectorPath` | `string` | SVG path data for vector shapes | ### Effect Properties Define visual effects that can be applied to design blocks. Effects include filters, blurs, and color adjustments. ```json { "meta": { "effectType": "//ly.img.ubq/effect/lut_filter", "blurType": "//ly.img.ubq/blur/uniform" } } ``` | Property | Type | Description | |----------|------|-------------| | `effectType` | `string` | Effect type (e.g., `"//ly.img.ubq/effect/lut_filter"`, `"//ly.img.ubq/effect/duotone_filter"`) | | `blurType` | `string` | Blur type: `"//ly.img.ubq/blur/uniform"`, `"//ly.img.ubq/blur/linear"`, `"//ly.img.ubq/blur/mirrored"`, `"//ly.img.ubq/blur/radial"` | ### Responsive Sources The `sourceSet` property defines multiple resolutions for responsive loading. This enables CE.SDK to load an appropriately sized image based on the display context, reducing bandwidth for thumbnails while providing full resolution when needed. ```json { "meta": { "sourceSet": [ { "uri": "{{base_url}}/small.jpg", "width": 640, "height": 480 }, { "uri": "{{base_url}}/medium.jpg", "width": 1280, "height": 960 }, { "uri": "{{base_url}}/large.jpg", "width": 1920, "height": 1440 } ] } } ``` When a user browses assets in the library panel, CE.SDK loads the smallest appropriate resolution. When the asset is added to the canvas and zoomed in, higher resolutions are loaded on demand. This pattern significantly improves initial load times for asset libraries with many items. | Property | Type | Required | Description | |----------|------|----------|-------------| | `uri` | `string` | Yes | Source URI | | `width` | `number` | Yes | Source width in pixels | | `height` | `number` | Yes | Source height in pixels | ## Asset Payload The `payload` object contains structured data for specialized asset types like colors, fonts, and presets. | Property | Type | Description | |----------|------|-------------| | `color` | `AssetColor` | Color definition | | `typeface` | `Typeface` | Font family definition | | `transformPreset` | `AssetTransformPreset` | Page size or aspect ratio preset | | `sourceSet` | `Source[]` | Responsive sources (same as meta.sourceSet) | ### Color Payload Colors support three color spaces: sRGB, CMYK, and Spot Color. Use sRGB for screen-based designs, CMYK for print workflows, and Spot Color for brand-specific colors that require exact color matching. **sRGB Color:** ```json { "payload": { "color": { "colorSpace": "sRGB", "r": 0.2, "g": 0.4, "b": 0.8 } } } ``` sRGB is the standard color space for web and digital displays. Component values range from 0 to 1, where `{ r: 1, g: 0, b: 0 }` represents pure red. | Property | Type | Range | Description | |----------|------|-------|-------------| | `colorSpace` | `"sRGB"` | — | Color space identifier | | `r` | `number` | 0–1 | Red component | | `g` | `number` | 0–1 | Green component | | `b` | `number` | 0–1 | Blue component | **CMYK Color:** ```json { "payload": { "color": { "colorSpace": "CMYK", "c": 0.75, "m": 0.25, "y": 0.0, "k": 0.1 } } } ``` CMYK is used for print production. Component values represent ink percentages from 0 to 1, where higher values mean more ink coverage. | Property | Type | Range | Description | |----------|------|-------|-------------| | `colorSpace` | `"CMYK"` | — | Color space identifier | | `c` | `number` | 0–1 | Cyan component | | `m` | `number` | 0–1 | Magenta component | | `y` | `number` | 0–1 | Yellow component | | `k` | `number` | 0–1 | Black (key) component | **Spot Color:** ```json { "payload": { "color": { "colorSpace": "SpotColor", "name": "Pantone 286 C", "externalReference": "pantone://286-c", "representation": { "colorSpace": "sRGB", "r": 0.0, "g": 0.22, "b": 0.62 } } } } ``` Spot colors reference named colors from systems like Pantone. The `representation` provides a screen preview while the actual color is defined by the external reference for accurate print reproduction. | Property | Type | Description | |----------|------|-------------| | `colorSpace` | `"SpotColor"` | Color space identifier | | `name` | `string` | Spot color name | | `externalReference` | `string` | External reference URI | | `representation` | `AssetRGBColor \| AssetCMYKColor` | Screen/print representation | ### Typeface Payload Defines a font family with multiple font files for different weights and styles. This enables CE.SDK to load the correct font file when text formatting changes. ```json { "payload": { "typeface": { "name": "Roboto", "fonts": [ { "uri": "{{base_url}}/Roboto-Regular.ttf", "subFamily": "Regular", "weight": "normal", "style": "normal" }, { "uri": "{{base_url}}/Roboto-Bold.ttf", "subFamily": "Bold", "weight": "bold", "style": "normal" }, { "uri": "{{base_url}}/Roboto-Italic.ttf", "subFamily": "Italic", "weight": "normal", "style": "italic" } ] } } } ``` Each font entry in the `fonts` array represents a single font file. When a user applies bold formatting, CE.SDK automatically selects the font entry with `weight: "bold"`. Include all weight and style combinations you want to support. **Typeface Properties:** | Property | Type | Required | Description | |----------|------|----------|-------------| | `name` | `string` | Yes | Typeface family name | | `fonts` | `Font[]` | Yes | Array of font definitions | **Font Properties:** | Property | Type | Required | Description | |----------|------|----------|-------------| | `uri` | `string` | Yes | Font file URI (.ttf, .otf, .woff, .woff2) | | `subFamily` | `string` | Yes | Font subfamily name (e.g., "Regular", "Bold Italic") | | `weight` | `FontWeight` | No | Font weight | | `style` | `FontStyle` | No | Font style | **Font Weight Values:** `"thin"`, `"extraLight"`, `"light"`, `"normal"`, `"medium"`, `"semiBold"`, `"bold"`, `"extraBold"`, `"heavy"` **Font Style Values:** `"normal"`, `"italic"` ### Transform Preset Payload Defines page size or aspect ratio presets for templates, canvases, and crop tools. Use these to provide users with common format options like social media dimensions or print sizes. **Fixed Size:** ```json { "payload": { "transformPreset": { "type": "FixedSize", "width": 1080, "height": 1920, "designUnit": "Pixel" } } } ``` Fixed size presets lock both width and height to specific values. Use `designUnit` to specify whether dimensions are in pixels (for digital), millimeters, or inches (for print). | Property | Type | Description | |----------|------|-------------| | `type` | `"FixedSize"` | Preset type | | `width` | `number` | Width value | | `height` | `number` | Height value | | `designUnit` | `string` | Unit: `"Pixel"`, `"Millimeter"`, or `"Inch"` | **Fixed Aspect Ratio:** ```json { "payload": { "transformPreset": { "type": "FixedAspectRatio", "width": 16, "height": 9 } } } ``` Fixed aspect ratio presets maintain proportions while allowing flexible sizing. The width and height values represent the ratio components, not pixel dimensions. | Property | Type | Description | |----------|------|-------------| | `type` | `"FixedAspectRatio"` | Preset type | | `width` | `number` | Aspect ratio width component | | `height` | `number` | Aspect ratio height component | **Free Aspect Ratio:** ```json { "payload": { "transformPreset": { "type": "FreeAspectRatio" } } } ``` Free aspect ratio presets allow unrestricted resizing without maintaining proportions. ## Base URL Placeholder The `{{base_url}}` placeholder enables portable asset definitions. CE.SDK replaces this placeholder with the actual base path when loading: - **From URL:** The parent directory of the JSON file becomes the base URL - **From string:** You provide the base URL explicitly when loading ```json { "meta": { "uri": "{{base_url}}/images/photo.jpg", "thumbUri": "{{base_url}}/thumbnails/photo.jpg" } } ``` ## Asset Type Examples ### Image Asset Standard image assets are the most common type, used for photos, illustrations, and background images. They require a `blockType` of graphic with an image fill. ```json { "id": "photo-001", "label": { "en": "Mountain Landscape" }, "tags": { "en": ["nature", "mountain"] }, "meta": { "uri": "{{base_url}}/mountain.jpg", "thumbUri": "{{base_url}}/mountain-thumb.jpg", "mimeType": "image/jpeg", "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/image", "width": 1920, "height": 1280 } } ``` ### Video Asset Video assets include duration information and use a video fill type. Set `looping` to `true` for videos that should repeat continuously. ```json { "id": "video-001", "label": { "en": "Intro Animation" }, "meta": { "uri": "{{base_url}}/intro.mp4", "thumbUri": "{{base_url}}/intro-thumb.jpg", "mimeType": "video/mp4", "blockType": "//ly.img.ubq/graphic", "fillType": "//ly.img.ubq/fill/video", "width": 1920, "height": 1080, "duration": "5", "looping": false } } ``` ### Audio Asset Audio assets use the audio block type and don't require visual dimensions. Set `looping` to `true` for background music that should repeat continuously throughout the design. ```json { "id": "audio-001", "label": { "en": "Background Music" }, "meta": { "uri": "{{base_url}}/music.mp3", "mimeType": "audio/mpeg", "blockType": "//ly.img.ubq/audio", "duration": "120", "looping": true } } ``` ### Sticker Asset Stickers are vector graphics that maintain quality at any size. They use the `vector_path` shape type and typically reference SVG files. ```json { "id": "sticker-001", "label": { "en": "Star Badge" }, "meta": { "uri": "{{base_url}}/star.svg", "thumbUri": "{{base_url}}/star-thumb.png", "mimeType": "image/svg+xml", "blockType": "//ly.img.ubq/graphic", "shapeType": "//ly.img.ubq/shape/vector_path", "width": 200, "height": 200 } } ``` ### Template Asset Templates are complete design scenes that can be loaded as starting points. Use `kind: "template"` to identify them in the UI. ```json { "id": "template-001", "label": { "en": "Social Media Story" }, "meta": { "uri": "{{base_url}}/story-template.scene", "thumbUri": "{{base_url}}/story-thumb.jpg", "kind": "template", "width": 1080, "height": 1920 } } ``` ### Crop Preset Asset Crop presets define aspect ratios for the crop tool. Use `transformPreset` in the payload to specify the ratio without fixed pixel dimensions. ```json { "id": "crop-square", "label": { "en": "Square" }, "groups": ["social"], "payload": { "transformPreset": { "type": "FixedAspectRatio", "width": 1, "height": 1 } } } ``` ### Page Format Preset Asset Page format presets define canvas sizes for new designs. Use `FixedSize` to specify exact dimensions in pixels, millimeters, or inches. ```json { "id": "format-instagram-story", "label": { "en": "Instagram Story" }, "groups": ["social"], "meta": { "thumbUri": "{{base_url}}/instagram-story-thumb.jpg" }, "payload": { "transformPreset": { "type": "FixedSize", "width": 1080, "height": 1920, "designUnit": "Pixel" } } } ``` ## Troubleshooting | Issue | Solution | |-------|----------| | Assets not appearing | Verify `version`, `id`, and `assets` fields exist at the top level | | Invalid asset | Ensure each asset has a unique `id` | | Missing thumbnails | Check `thumbUri` points to accessible image URLs | | Base URL not resolving | Use exact `{{base_url}}` syntax (double curly braces) | | CORS errors | Configure server headers to allow cross-origin requests | | Wrong block created | Verify `meta.blockType` matches the intended design block | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Using Default Assets" description: "Load shapes, stickers, images, and other built-in assets from IMG.LY's CDN to populate your CE.SDK editor using the Asset API." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/default-assets-d2763d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Using Default Assets](https://img.ly/docs/cesdk/sveltekit/import-media/default-assets-d2763d/) --- ```typescript file=@cesdk_web_examples/guides-import-media-default-assets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Using Default Assets Guide * * Demonstrates loading all asset sources from IMG.LY's CDN using * addLocalAssetSourceFromJSONURI and creating a scene with * a star shape, sticker, and image. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk, engine }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Versioned CDN URLs using the SDK package (recommended) // For production, self-host these assets - see the Serve Assets guide const PACKAGE_BASE = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets`; const DEFAULT_ASSETS_URL = `${PACKAGE_BASE}/v4/`; const DEMO_ASSETS_URL = `${PACKAGE_BASE}/demo/v3/`; // Load default asset sources (core editor components) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.sticker/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.vector.shape/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.color.palette/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.filter/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.effect/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.blur/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.typeface/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.crop.presets/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.page.presets/content.json` ); // Load demo asset sources (sample content for testing) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.image/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.video/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.audio/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.templates/content.json` ); await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.text.components/content.json` ); // Update asset library entries to show the loaded sources in the UI cesdk.ui.updateAssetLibraryEntry('ly.img.sticker', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.sticker']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.vector.shape', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.vector.shape']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.color.palette', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.color.palette']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.filter', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.filter']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.effect', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.effect']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.blur', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.blur']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.typeface', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.typeface']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.crop.presets', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.crop.presets']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.page.presets', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.page.presets']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.image']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.video', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.video']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.audio']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.templates', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.templates']) ] }); cesdk.ui.updateAssetLibraryEntry('ly.img.text.components', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.text.components']) ] }); // Create the design scene await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Get the page to add content to const pages = engine.block.findByType('page'); const page = pages[0]; if (page == null) return; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Define the three assets to add: star shape, sticker, and image const assetsToAdd = [ { sourceId: 'ly.img.vector.shape', assetId: '//ly.img.ubq/shapes/star/filled' }, { sourceId: 'ly.img.sticker', assetId: '//ly.img.cesdk.stickers.emoticons/alien' }, { sourceId: 'ly.img.image', assetId: 'ly.img.cesdk.images.samples/sample.1' } ]; // Calculate layout for 3 centered blocks const blockSize = Math.min(pageWidth, pageHeight) * 0.2; const spacing = blockSize * 0.3; const totalWidth = assetsToAdd.length * blockSize + (assetsToAdd.length - 1) * spacing; const startX = (pageWidth - totalWidth) / 2; const centerY = (pageHeight - blockSize) / 2; // Create and position each block for (let i = 0; i < assetsToAdd.length; i++) { const { sourceId, assetId } = assetsToAdd[i]; const asset = await engine.asset.fetchAsset(sourceId, assetId); if (asset != null) { const block = await engine.asset.apply(sourceId, asset); if (block != null) { engine.block.setWidth(block, blockSize); engine.block.setHeight(block, blockSize); engine.block.setPositionX(block, startX + i * (blockSize + spacing)); engine.block.setPositionY(block, centerY); } } } // Clear selection for cleaner visual for (const block of engine.block.findAllSelected()) { engine.block.setSelected(block, false); } // Open the Elements panel to showcase all loaded asset sources cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image', 'ly.img.vector.shape', 'ly.img.sticker'] } }); } } export default Example; ``` Load all asset sources from IMG.LY's CDN to populate your CE.SDK editor with shapes, stickers, filters, effects, fonts, images, and other media using the Asset API.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-default-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-default-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-default-assets-browser/) CE.SDK provides built-in asset sources for shapes, stickers, filters, effects, fonts, and sample media. This guide demonstrates loading all available asset sources from IMG.LY's CDN and applying them to create a scene with a star shape, a sticker, and an image. > **Production Deployment:** The IMG.LY CDN is for development and prototyping only. For production, download and self-host assets from your own server. See the [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) guide for instructions. ## What Are Default and Demo Assets? IMG.LY provides two categories of asset sources hosted on the IMG.LY CDN for development and prototyping: **Default Assets** are core editor components: | Source ID | Description | |-----------|-------------| | `ly.img.sticker` | Emojis, emoticons, decorations | | `ly.img.vector.shape` | Shapes: stars, arrows, polygons | | `ly.img.color.palette` | Default color palette | | `ly.img.filter` | Color filters (LUT and duotone) | | `ly.img.effect` | Visual effects | | `ly.img.blur` | Blur effects | | `ly.img.typeface` | Font families | | `ly.img.crop.presets` | Crop presets | | `ly.img.page.presets` | Page size presets | **Demo Assets** are sample content for development: | Source ID | Description | |-----------|-------------| | `ly.img.image` | Sample images | | `ly.img.video` | Sample videos | | `ly.img.audio` | Sample audio tracks | | `ly.img.templates` | Design and video templates | | `ly.img.text.components` | Text component presets | ## Loading Assets from URL Use `addLocalAssetSourceFromJSONURI()` to load an asset source directly from a JSON URL: ```typescript const baseURL = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets/v4/`; await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.vector.shape/content.json` ); ``` ## Versioned CDN URLs Use the SDK version to construct versioned CDN URLs. This ensures assets are compatible with your SDK version. For production deployments, see the [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) guide to self-host assets. ```typescript highlight-cdn-urls // Versioned CDN URLs using the SDK package (recommended) // For production, self-host these assets - see the Serve Assets guide const PACKAGE_BASE = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets`; const DEFAULT_ASSETS_URL = `${PACKAGE_BASE}/v4/`; const DEMO_ASSETS_URL = `${PACKAGE_BASE}/demo/v3/`; ``` ## Loading Default Asset Sources Load a default asset source from the CDN. Repeat this pattern for each source you need: ```typescript highlight-load-default-assets // Load default asset sources (core editor components) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEFAULT_ASSETS_URL}ly.img.sticker/content.json` ); ``` ## Loading Demo Asset Sources Load a demo asset source from the CDN. Repeat this pattern for each source you need: ```typescript highlight-load-demo-assets // Load demo asset sources (sample content for testing) await engine.asset.addLocalAssetSourceFromJSONURI( `${DEMO_ASSETS_URL}ly.img.image/content.json` ); ``` ## Updating the Asset Library After loading asset sources, update the asset library entries to display them in the UI. Repeat this pattern for each source: ```typescript highlight-update-library // Update asset library entries to show the loaded sources in the UI cesdk.ui.updateAssetLibraryEntry('ly.img.sticker', { sourceIds: ({ currentIds }) => [ ...new Set([...currentIds, 'ly.img.sticker']) ] }); ``` ## Filtering Assets with Matcher Use the `matcher` option to load only specific assets from a source: ```typescript const baseURL = `https://cdn.img.ly/packages/imgly/cesdk-js/${cesdk.version}/assets/v4/`; // Load only star and arrow shapes await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.vector.shape/content.json`, { matcher: ['*star*', '*arrow*'] } ); // Load only emoji stickers await engine.asset.addLocalAssetSourceFromJSONURI( `${baseURL}ly.img.sticker/content.json`, { matcher: ['*emoji*'] } ); ``` An asset is included if it matches ANY pattern in the array. Patterns support `*` wildcards. ## API Reference | Method | Description | |--------|-------------| | `engine.asset.addLocalAssetSourceFromJSONURI(contentURI, options?)` | Load an asset source from a JSON URL | **Parameters for `addLocalAssetSourceFromJSONURI`:** | Parameter | Type | Description | |-----------|------|-------------| | `contentURI` | `string` | Full URL to the content.json file | | `options.matcher` | `string[]` | Optional wildcard patterns to filter assets | **Returns:** `Promise` — The asset source ID from the JSON ## Next Steps - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) — Self-host assets for production deployments - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Configure the asset library UI and entries - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Understand asset library structure and concepts - [Import From Remote Source](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source-b65faf/) — Load assets from external URLs --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit or Remove Assets" description: "Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/edit-or-remove-assets-ce072c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [Edit or Remove Assets](https://img.ly/docs/cesdk/sveltekit/import-media/edit-or-remove-assets-ce072c/) --- Manage assets in local asset sources by updating metadata, removing individual assets, or deleting entire sources.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-edit-or-remove-assets-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-edit-or-remove-assets-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-edit-or-remove-assets-browser/) Assets in local sources can be modified or removed after they have been added. CE.SDK provides two levels of removal: individual assets within a source and entire asset sources. This guide covers how to query, update, and remove assets programmatically, as well as how to notify the UI when changes occur. ```typescript file=@cesdk_web_examples/guides-import-media-edit-or-remove-assets-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // ===== Section 1: Create a Local Asset Source ===== // Create a local asset source to manage images engine.asset.addLocalSource('my-uploads'); // Add some sample assets to the source engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Mountain Landscape' }, tags: { en: ['nature', 'mountain'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-2', label: { en: 'Ocean Waves' }, tags: { en: ['nature', 'water'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-3', label: { en: 'Forest Path' }, tags: { en: ['nature', 'forest'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 2: Find Assets in a Source ===== // Query assets from the source to find specific assets const result = await engine.asset.findAssets('my-uploads', { query: 'nature', page: 0, perPage: 100 }); console.log('Found assets:', result.assets.length); const assetToModify = result.assets.find((a) => a.id === 'image-1'); console.log('Asset to modify:', assetToModify?.label); // ===== Section 3: Update Asset Metadata ===== // To update an asset's metadata, remove it and add an updated version // This pattern ensures the asset library reflects the latest data engine.asset.removeAssetFromSource('my-uploads', 'image-1'); // Add the updated version with new metadata engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Updated Mountain Photo' }, // New label tags: { en: ['nature', 'mountain', 'updated'] }, // New tags meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 4: Remove an Asset from a Source ===== // Remove a single asset from the source // Blocks already using this asset on the canvas remain unaffected engine.asset.removeAssetFromSource('my-uploads', 'image-2'); console.log('Removed image-2 from my-uploads'); // ===== Section 5: Notify UI of Changes ===== // After modifying assets, notify the UI to refresh // This triggers update events for components like the asset library panel engine.asset.assetSourceContentsChanged('my-uploads'); // ===== Section 6: Create a Second Source for Removal Demo ===== // Create a temporary source to demonstrate source removal engine.asset.addLocalSource('temporary-uploads'); engine.asset.addAssetToSource('temporary-uploads', { id: 'temp-1', label: { en: 'Temporary Image' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_4.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg', blockType: '//ly.img.ubq/graphic' } }); // ===== Section 7: Remove an Entire Asset Source ===== // Remove a complete asset source and all its assets // Any UI panels displaying this source will stop showing content engine.asset.removeSource('temporary-uploads'); console.log('Removed temporary-uploads source'); // ===== Section 8: Listen to Asset Source Events ===== // Subscribe to lifecycle events for asset sources const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => { console.log(`Source added: ${sourceId}`); }); const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => { console.log(`Source removed: ${sourceId}`); }); const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => { console.log(`Source updated: ${sourceId}`); }); // Demonstrate events by creating and removing a source engine.asset.addLocalSource('event-demo-source'); engine.asset.assetSourceContentsChanged('event-demo-source'); engine.asset.removeSource('event-demo-source'); // Clean up subscriptions when no longer needed unsubscribeAdded(); unsubscribeRemoved(); unsubscribeUpdated(); // ===== Configure Asset Library Display ===== // Configure the asset library to show our custom source cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ['my-uploads'], gridBackgroundType: 'cover', previewBackgroundType: 'contain' }); // Open the asset library to show the custom uploads cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.image'] } }); } } export default Example; ``` ## Setup Initialize CE.SDK and create a local asset source with sample assets. The example creates a design scene and populates a local source with images. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; ``` ## Creating a Local Asset Source Before editing or removing assets, you need a local source with assets. Use `engine.asset.addLocalSource()` to create a source, then `engine.asset.addAssetToSource()` to populate it. ```typescript highlight=highlight-create-source // Create a local asset source to manage images engine.asset.addLocalSource('my-uploads'); // Add some sample assets to the source engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Mountain Landscape' }, tags: { en: ['nature', 'mountain'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-2', label: { en: 'Ocean Waves' }, tags: { en: ['nature', 'water'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_2.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg', blockType: '//ly.img.ubq/graphic' } }); engine.asset.addAssetToSource('my-uploads', { id: 'image-3', label: { en: 'Forest Path' }, tags: { en: ['nature', 'forest'] }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_3.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg', blockType: '//ly.img.ubq/graphic' } }); ``` Each asset has a unique `id`, descriptive `label` and `tags` for searchability, and `meta` properties including the `uri` for the asset file. ## Finding Assets in a Source Use `engine.asset.findAssets()` to query assets from a source. You can search by query string to match labels and tags, and paginate results for large sources. ```typescript highlight=highlight-find-assets // Query assets from the source to find specific assets const result = await engine.asset.findAssets('my-uploads', { query: 'nature', page: 0, perPage: 100 }); console.log('Found assets:', result.assets.length); const assetToModify = result.assets.find((a) => a.id === 'image-1'); console.log('Asset to modify:', assetToModify?.label); ``` The `findAssets()` method returns an object containing the `assets` array, `total` count, `currentPage`, and optionally `nextPage` for pagination. ## Updating Asset Metadata CE.SDK does not provide a direct update method for assets. To modify an asset's metadata (labels, tags, URIs), remove the existing asset and add an updated version with the same ID. ```typescript highlight=highlight-update-metadata // To update an asset's metadata, remove it and add an updated version // This pattern ensures the asset library reflects the latest data engine.asset.removeAssetFromSource('my-uploads', 'image-1'); // Add the updated version with new metadata engine.asset.addAssetToSource('my-uploads', { id: 'image-1', label: { en: 'Updated Mountain Photo' }, // New label tags: { en: ['nature', 'mountain', 'updated'] }, // New tags meta: { uri: 'https://img.ly/static/ubq_samples/sample_1.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg', blockType: '//ly.img.ubq/graphic' } }); ``` This pattern ensures the asset library reflects the latest metadata. The asset ID remains the same, so any references to the asset continue to work. ## Removing an Asset from a Source Remove individual assets using `engine.asset.removeAssetFromSource()`. The asset is permanently deleted from the source, but blocks already using that asset on the canvas remain unaffected. ```typescript highlight=highlight-remove-asset // Remove a single asset from the source // Blocks already using this asset on the canvas remain unaffected engine.asset.removeAssetFromSource('my-uploads', 'image-2'); console.log('Removed image-2 from my-uploads'); ``` Removing an asset only affects the asset library—it does not modify or delete any blocks that were created using that asset. ## Notifying the UI of Changes After modifying assets in a source, call `engine.asset.assetSourceContentsChanged()` to notify UI components. This triggers update events for the asset library panel and any other components displaying the source. ```typescript highlight=highlight-notify-ui // After modifying assets, notify the UI to refresh // This triggers update events for components like the asset library panel engine.asset.assetSourceContentsChanged('my-uploads'); ``` Without this notification, UI components may show stale data until the user navigates away and returns. ## Creating a Temporary Source You can create additional sources for temporary or session-specific assets. These sources can be removed entirely when no longer needed. ```typescript highlight=highlight-create-temp-source // Create a temporary source to demonstrate source removal engine.asset.addLocalSource('temporary-uploads'); engine.asset.addAssetToSource('temporary-uploads', { id: 'temp-1', label: { en: 'Temporary Image' }, meta: { uri: 'https://img.ly/static/ubq_samples/sample_4.jpg', thumbUri: 'https://img.ly/static/ubq_samples/sample_4.jpg', blockType: '//ly.img.ubq/graphic' } }); ``` ## Removing an Entire Asset Source Remove a complete asset source and all its assets using `engine.asset.removeSource()`. Any UI panels displaying this source will stop showing content for that source. ```typescript highlight=highlight-remove-source // Remove a complete asset source and all its assets // Any UI panels displaying this source will stop showing content engine.asset.removeSource('temporary-uploads'); console.log('Removed temporary-uploads source'); ``` Use this when cleaning up temporary sources or when a user explicitly deletes an entire category of assets. ## Listening to Asset Source Events Subscribe to lifecycle events to react when sources are added, removed, or updated. These events are useful for analytics, cleanup tasks, or syncing with external systems. ```typescript highlight=highlight-events // Subscribe to lifecycle events for asset sources const unsubscribeAdded = engine.asset.onAssetSourceAdded((sourceId) => { console.log(`Source added: ${sourceId}`); }); const unsubscribeRemoved = engine.asset.onAssetSourceRemoved((sourceId) => { console.log(`Source removed: ${sourceId}`); }); const unsubscribeUpdated = engine.asset.onAssetSourceUpdated((sourceId) => { console.log(`Source updated: ${sourceId}`); }); // Demonstrate events by creating and removing a source engine.asset.addLocalSource('event-demo-source'); engine.asset.assetSourceContentsChanged('event-demo-source'); engine.asset.removeSource('event-demo-source'); // Clean up subscriptions when no longer needed unsubscribeAdded(); unsubscribeRemoved(); unsubscribeUpdated(); ``` Each subscription returns an unsubscribe function. Call it when you no longer need to receive events to prevent memory leaks. ## Best Practices - **Query before modifying**: Use `findAssets()` to verify the asset exists before attempting removal - **Notify UI after changes**: Always call `assetSourceContentsChanged()` after modifying a source - **Clean up subscriptions**: Store unsubscribe functions and call them when the component unmounts or the source is removed - **Handle missing assets gracefully**: Check if `findAssets()` returns the expected asset before operating on it - **Use descriptive IDs**: Choose asset IDs that are unique and meaningful for easier debugging ## Troubleshooting | Issue | Cause | Solution | |-------|-------|----------| | Asset not found | ID mismatch or asset already removed | Use `findAssets()` to list available assets | | UI not updating | Missing notification | Call `assetSourceContentsChanged()` after modifications | | Cannot remove asset | Source is not a local source | Only local sources support `removeAssetFromSource()` | | Events not firing | Subscription not active | Verify the subscription was created before the operation | ## API Reference | Method | Category | Purpose | |--------|----------|---------| | `engine.asset.findAssets()` | Asset Discovery | Query assets from a source with filtering and pagination | | `engine.asset.addAssetToSource()` | Asset Lifecycle | Add or update an asset in a local source | | `engine.asset.removeAssetFromSource()` | Asset Lifecycle | Remove a single asset from a local source | | `engine.asset.removeSource()` | Source Management | Remove an entire asset source and all its assets | | `engine.asset.assetSourceContentsChanged()` | UI Notification | Notify UI that source contents changed | | `engine.asset.onAssetSourceAdded()` | Event Subscriptions | Subscribe to source addition events | | `engine.asset.onAssetSourceRemoved()` | Event Subscriptions | Subscribe to source removal events | | `engine.asset.onAssetSourceUpdated()` | Event Subscriptions | Subscribe to source content change events | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Supported File Formats for Import" description: "Review the supported image, video, audio, and template formats for importing assets into CE.SDK on the web." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/import-media/file-format-support-8cdc84/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Import Media Assets](https://img.ly/docs/cesdk/sveltekit/import-media-4e3703/) > [File Format Support](https://img.ly/docs/cesdk/sveltekit/import-media/file-format-support-8cdc84/) --- When building creative applications with CE.SDK, understanding which file formats your users can import is crucial for delivering a smooth editing experience. CE.SDK supports a comprehensive range of modern media formats. This guide provides a complete reference of supported file formats for importing media, templates, and fonts into CE.SDK on web platforms. ## Supported Import Formats CE.SDK supports importing the following media types directly in the browser: | Category | Supported Formats | | --------------- | --------------------------------------------------------------------------------------- | | **Images** | `.png`, `.jpeg`, `.jpg`, `.gif`, `.webp`, `.svg`, `.bmp` | | **Video** | `.mp4` (H.264/AVC, H.265/HEVC), `.mov` (H.264/AVC, H.265/HEVC), `.webm` (VP8, VP9, AV1) | | **Audio** | `.mp3`, `.m4a`, `.mp4` (AAC or MP3), `.mov` (AAC or MP3) | | **Animation** | `.json` (Lottie) | | **Templates** | `.idml` (InDesign), `.psd` (Photoshop), `.scene` (CE.SDK Native) | > **Note:** Need to import a format not listed here? CE.SDK allows you to create custom > importers for any file type by using our Scene and Block APIs > programmatically. Contact our support team to learn more about implementing > custom importers. ## Video and Audio Codecs While container formats (`.mp4`, `.mov`, `.webm`) define how media is packaged, codecs determine how the content is compressed. CE.SDK supports the following codecs for web playback and editing: ### Video Codecs - **H.264 / AVC** (in `.mp4` or `.mov`) – Universally supported across all modern browsers - **H.265 / HEVC** (in `.mp4` or `.mov`) – Requires platform-specific support; availability varies by browser and operating system - **VP8, VP9, AV1** (in `.webm`) – Modern web-native codecs with broad browser support ### Audio Codecs - **MP3** (in `.mp3` files or within `.mp4`/`.mov` containers) - **AAC** (in `.m4a`, `.mp4`, or `.mov` containers) > **Warning:** H.265/HEVC support varies by browser and requires hardware acceleration or > licensed software decoders. Always test video playback on your target browsers > before deploying H.265 content to end users. ## Size Limits and Constraints CE.SDK processes all media client-side in the browser, which means performance is bounded by the user's hardware capabilities. Here are the practical limits to keep in mind: ### Image Resolution Limits | Constraint | Recommendation / Limit | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Input Resolution** | Maximum input resolution is **4096×4096 pixels**. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the `maxImageSize` setting. | | **Output Resolution** | There is no enforced output resolution limit. Theoretically, the editor supports output sizes up to **16,384×16,384 pixels**. However, practical limits depend on the device's GPU capabilities and available memory. | All image processing in CE.SDK is handled client-side, so these values depend on the **maximum texture size** supported by the user's hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded. > **Note:** To ensure consistent results across devices, test higher output sizes on your > target hardware and set conservative defaults in production. ### Video Resolution and Duration Limits | Constraint | Recommendation / Limit | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Resolution** | Up to **4K UHD** is supported for **playback** and **export**, depending on the user's hardware and available GPU resources. For **import**, CE.SDK does not impose artificial limits, but maximum video size is bounded by the **32-bit address space of WebAssembly (wasm32)** and the **browser tab's memory cap (~2 GB)**. | | **Frame Rate** | 30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration | | **Duration** | Stories and reels of up to **2 minutes** are fully supported. Longer videos are also supported, but we generally found a maximum duration of **10 minutes** to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware. | > **Note:** Performance scales with client hardware. For best results with high-resolution > or high-frame-rate video, modern CPUs/GPUs with hardware acceleration are > recommended. ## Format-Specific Considerations ### SVG Limitations CE.SDK uses Skia for SVG parsing and rendering. While most SVG files render correctly, there are some important limitations to be aware of: #### Text Elements - SVG text elements are not supported – any text in SVG files will not be rendered. - Convert text to paths in your vector editor before exporting if text is needed. #### Styling Limitations - CSS styles included in SVGs are not supported – use presentation attributes instead. - RGBA color syntax is not supported – use `fill-opacity` and `stroke-opacity` attributes. - When exporting SVGs from design tools, choose the "presentation attributes" option. #### Unsupported SVG Elements The following SVG elements are not supported: - Animation elements (``) - Foreign object (``) - Text-related elements (``, ``, ``) - Script elements (`

``` ## Step 6: Use the Component Import and use the Design Editor (Advanced) component in your page route: ```svelte {#if browser && AdvancedEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Get Started Integrate Design Editor (Advanced) into an existing SvelteKit application. This adds the editor configuration to your current project structure. ### Step 1: Navigate to Your Project cd your-project ### Step 2: Copy the Editor Configuration Clone the starter kit and copy the `imgly` folder to your project: git clone https://github.com/imgly/starterkit-advanced-design-editor-ts-web.git cp -r starterkit-advanced-design-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-advanced-design-editor-ts-web npx degit imgly/starterkit-advanced-design-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ### Step 3: Install Dependencies Install the required packages for the editor: #### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js #### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web ### Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 5: Create the Editor Component. ### Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/AdvancedEditor.svelte`): ```svelte

``` ### Step 6: Use the Component Import and use the Design Editor (Advanced) component in your page route: ```svelte {#if browser && AdvancedEditor} {/if} ``` #### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Set Up a Scene CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case: ```typescript title="src/index.ts" // Create a blank design canvas - starts with an empty design scene await cesdk.actions.run('scene.create'); // Load from a template archive - restores a previously saved project await cesdk.loadFromArchiveURL('https://example.com/template.zip'); // Load from an image URL - creates a new scene with the image await cesdk.createFromImage('https://example.com/image.jpg'); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); ``` The `createDesignScene()` method is ideal for design workflows, as it creates a blank canvas ready for content. > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading methods. ## Customize Assets Design Editor (Advanced) uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what's included based on your needs. Asset sources are added via plugins in `src/index.ts`. Enable or disable individual sources: ```typescript title="src/index.ts" import { FiltersAssetSource, StickerAssetSource, TextAssetSource, VectorShapeAssetSource, EffectsAssetSource, // ... } from '@cesdk/cesdk-js/plugins'; // Add only the sources you need await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); // ... ``` > **Available Asset Sources:** See [Asset Source Plugins](https://img.ly/docs/cesdk/sveltekit/plugins/asset-sources-a7f3b2/) for the complete list of available sources. For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times. ## Configure Actions Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations. **Key built-in actions:** - `exportDesign` – Export the current design to PNG, JPEG, PDF, or other formats - `saveScene` – Save the scene as a JSON string for later editing - `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats) - `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets - `uploadFile` – Handle file uploads with progress tracking Use `cesdk.actions.run()` to execute any action: ```typescript // Run a built-in action await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); ``` #### Import from File Picker ```typescript title="/imgly/config/actions.ts" // Let users open images from their device cesdk.actions.register('importImage', async () => { const blobURL = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'objectURL' }); await cesdk.createFromImage(blobURL); }); ``` #### Export and Save ```typescript title="/imgly/config/actions.ts" // Register export action that downloads the edited design cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs, options } = await cesdk.utils.export(exportOptions); await cesdk.utils.downloadFile(blobs[0], options.mimeType); }); ``` #### Upload to Your Backend ```typescript title="/imgly/config/actions.ts" // Override the built-in exportDesign action to send to your server cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs } = await cesdk.utils.export(exportOptions); const formData = new FormData(); formData.append('design', blobs[0], 'design.png'); const response = await fetch('/api/upload', { method: 'POST', body: formData }); const { url } = await response.json(); console.log('Uploaded to:', url); }); ``` > **Learn More:** See [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for the full list of built-in actions, how to run them, and how to register custom actions. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'actions.export.image': 'Download Design', 'common.cancel': 'Cancel', 'common.apply': 'Apply' } }); // Add a new language cesdk.i18n.setTranslations({ de: { 'actions.export.image': 'Design herunterladen' } }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. ### UI Layout  Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence. ```typescript title="src/imgly/config/ui/navigationBar.ts" // Get current navigation bar components const navOrder = cesdk.ui.getNavigationBarOrder(); // Add a custom button to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', { id: 'my-custom-action' }, 'after' ); // Rearrange dock items cesdk.ui.setDockOrder([ 'ly.img.assetLibrary.dock', 'ly.img.separator', 'my-custom-dock-item' ]); // Customize the inspector bar cesdk.ui.setInspectorBarOrder([ 'ly.img.fill.inspectorBar', 'ly.img.separator', 'ly.img.filter.inspectorBar' ]); ``` The Order API methods follow a consistent pattern across all UI areas: - `get*Order()` – Retrieve the current component order - `set*Order()` – Replace the entire order - `insert*OrderComponent()` – Add components relative to existing ones See [Dock](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), [Inspector Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/inspector-bar-8ca1cd/), [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/), [Canvas Menu](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-menu-0d2b5b/), and [Canvas](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-632c8e/) for detailed layout customization options. ### Custom Components Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API. ```typescript title="src/imgly/config/ui/components.ts" // Register a custom component cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => { const selectedBlocks = engine.block.findAllSelected(); builder.Button('apply-effect', { label: 'Apply Effect', isDisabled: selectedBlocks.length === 0, onClick: () => { // Apply custom logic to selected blocks } }); }); // Add the component to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', 'my-custom-button', 'after' ); ``` Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required. See [Register New Component](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/register-new-component-b04a04/) for the complete builder API and component patterns. ### Settings & Features Fine-tune editor behavior through settings and features. **Settings** configure core engine behavior—rendering, input handling, and history management: ```typescript title="src/imgly/config/settings.ts" cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true); cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true); cesdk.engine.editor.setSettingBool('features/undoHistory', true); ``` **Features** toggle which editing tools and panels appear in the UI: ```typescript title="src/imgly/config/features.ts" // Toggle editor features cesdk.feature.enable('ly.img.crop', true); cesdk.feature.enable('ly.img.filter', true); cesdk.feature.enable('ly.img.adjustment', true); ``` See [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) and [Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) for the complete reference. ### Explore Plugins CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior. #### Background Removal Add AI-powered background removal that runs entirely client-side. The background removal plugin processes images directly in the browser without sending data to external servers. ```typescript title="src/imgly/config/plugin.ts" import BackgroundRemovalPlugin from '@imgly/plugin-background-removal'; // Add background removal capability await cesdk.addPlugin(BackgroundRemovalPlugin()); ``` See [Background Removal](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) for setup instructions and configuration options. #### Print Ready PDF Export print-ready PDF/X-3 files with CMYK color profiles for professional printing workflows. ```typescript title="src/imgly/config/plugin.ts" import PrintReadyPDFPlugin from '@imgly/plugin-print-ready-pdf'; // Add print-ready PDF export capability await cesdk.addPlugin(PrintReadyPDFPlugin()); ``` See [Print Ready PDF](https://img.ly/docs/cesdk/sveltekit/plugins/print-ready-pdf-iroalu/) for setup instructions and configuration options. #### AI Integration Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers. ```typescript title="src/imgly/config/plugin.ts" import AIPlugin from '@imgly/plugin-ai-generation'; // Configure AI generation await cesdk.addPlugin(AIPlugin({ provider: 'your-ai-provider', apiKey: 'your-api-key' })); ``` See [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) for provider setup and supported AI features. #### Custom Asset Sources Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source. ```typescript title="src/imgly/config/plugin.ts" import UnsplashAssetSource from '@imgly/plugin-unsplash'; // Add Unsplash integration await cesdk.addPlugin(UnsplashAssetSource({ accessKey: 'your-unsplash-access-key' })); ``` See [Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) for integration patterns. #### Discover More Plugins Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include: - **Vectorizer** – Convert raster images to vectors - **Design Presets** – Pre-built design templates - **Social Media Templates** – Platform-specific sizing - **And more** – Check the repository for the latest additions *** ## Key Capabilities Design Editor (Advanced) includes everything needed for professional design editing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark. *** ## Troubleshooting ### Editor doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Assets don't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Export fails or produces blank images - **Wait for content to load**: Ensure images are fully loaded before exporting - **Check CORS on images**: Remote images must allow cross-origin access ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) – Build custom export and save workflows - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Editor (Advanced) for SvelteKit" description: "Add a comprehensive video editor to your SvelteKit app in minutes. Professional tools for timeline editing, effects, and MP4 export—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/advanced-video-editor-2a68z2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Video Editor (Advanced)](https://img.ly/docs/cesdk/sveltekit/starterkits/advanced-video-editor-2a68z2/) --- Comprehensive video editing for your SvelteKit app—professional tools for timeline editing, visual effects, and MP4 export. Runs entirely in the browser with no server dependencies.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-advanced-video-editor-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-advanced-video-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-advanced-video-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-advanced-video-editor/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Integrate Video Editor (Advanced) into your SvelteKit application using the imperative API. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name npx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-advanced-video-editor-ts-web.git cp -r starterkit-advanced-video-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-advanced-video-editor-ts-web npx degit imgly/starterkit-advanced-video-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. The `imgly/` folder contains the editor configuration: ``` src/lib/imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 3: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in the editor component. ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/AdvancedVideoEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Video Editor (Advanced) component in your page route: ```svelte {#if browser && AdvancedVideoEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Get Started Integrate Video Editor (Advanced) into an existing SvelteKit application. This adds the editor configuration to your current project structure. ## Step 1: Navigate to Your Project cd your-project ## Step 2: Clone the Starter Kit Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-advanced-video-editor-ts-web.git cp -r starterkit-advanced-video-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-advanced-video-editor-ts-web npx degit imgly/starterkit-advanced-video-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your > project structure. The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 3: Install Dependencies Install the required packages for the editor: #### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js #### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place > assets in a different location, update the `baseURL` in the editor component. ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/AdvancedVideoEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Video Editor (Advanced) component in your page route: ```svelte {#if browser && AdvancedVideoEditor} {/if} ``` #### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` *** ## Set Up a Scene CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Load from a video URL - creates a new scene with the video await cesdk.createFromVideo('https://example.com/video.mp4'); // Load from a template archive - restores a previously saved project await cesdk.loadFromArchiveURL('https://example.com/template.zip'); // Create a blank video canvas - starts with an empty video scene await cesdk.actions.run('scene.create', { mode: 'Video' }); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); ``` The `createFromVideo()` method is ideal for video editing workflows, as it automatically creates a scene with the video on a timeline. > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading > methods. ## Customize Assets Video Editor (Advanced) uses asset source plugins to provide built-in libraries for video clips, audio, effects, stickers, and fonts. The starter kit includes a curated selection—customize what's included based on your needs. Asset sources are added via plugins in `src/lib/imgly/index.ts`. Enable or disable individual sources: ```typescript title="src/lib/imgly/index.ts" import { FiltersAssetSource, StickerAssetSource, TextAssetSource, VectorShapeAssetSource, EffectsAssetSource, // ... } from '@cesdk/cesdk-js/plugins'; // Add only the sources you need await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); // ... ``` > **Available Asset Sources:** See [Asset Source Plugins](https://img.ly/docs/cesdk/sveltekit/plugins/asset-sources-a7f3b2/) for the complete list of > available sources. For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times. ## Configure Actions Actions are functions that handle user interactions like exporting videos, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations. **Key built-in actions:** - `exportDesign` – Export the current video to MP4 format - `saveScene` – Save the scene as a JSON string for later editing - `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats) - `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets - `uploadFile` – Handle file uploads with progress tracking Use `cesdk.actions.run()` to execute any action: ```typescript // Run a built-in action await cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); ``` The starter kit includes pre-configured actions in `src/lib/imgly/config/actions.ts`. #### Import from File Picker ```typescript title="src/lib/imgly/config/actions.ts" // Let users open videos from their device cesdk.actions.register('importVideo', async () => { const blobURL = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'objectURL', }); await cesdk.createFromVideo(blobURL); }); ``` #### Export and Save ```typescript title="src/lib/imgly/config/actions.ts" // Register export action that downloads the edited video cesdk.actions.register('exportDesign', async exportOptions => { const { blobs, options } = await cesdk.utils.export(exportOptions); await cesdk.utils.downloadFile(blobs[0], options.mimeType); }); ``` #### Upload to Your Backend ```typescript title="src/lib/imgly/config/actions.ts" // Override the built-in exportDesign action to send to your server cesdk.actions.register('exportDesign', async exportOptions => { const { blobs } = await cesdk.utils.export(exportOptions); const formData = new FormData(); formData.append('video', blobs[0], 'edited-video.mp4'); const response = await fetch('/api/upload', { method: 'POST', body: formData, }); const { url } = await response.json(); console.log('Uploaded to:', url); }); ``` > **Learn More:** See [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for the full list of built-in actions, > how to run them, and how to register custom actions. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'actions.export.video': 'Download Video', 'common.cancel': 'Cancel', 'common.apply': 'Apply', }, }); // Add a new language cesdk.i18n.setTranslations({ de: { 'actions.export.video': 'Video herunterladen', }, }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. ### UI Layout  Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence. ```typescript title="src/lib/imgly/config/ui/navigationBar.ts" // Get current navigation bar components const navOrder = cesdk.ui.getNavigationBarOrder(); // Add a custom button to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', { id: 'my-custom-action' }, 'after', ); // Rearrange dock items cesdk.ui.setDockOrder([ 'ly.img.assetLibrary.dock', 'ly.img.separator', 'my-custom-dock-item', ]); // Customize the inspector bar cesdk.ui.setInspectorBarOrder([ 'ly.img.fill.inspectorBar', 'ly.img.separator', 'ly.img.filter.inspectorBar', ]); ``` The Order API methods follow a consistent pattern across all UI areas: - `get*Order()` – Retrieve the current component order - `set*Order()` – Replace the entire order - `insert*OrderComponent()` – Add components relative to existing ones See [Dock](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), [Inspector Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/inspector-bar-8ca1cd/), [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/), [Canvas Menu](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-menu-0d2b5b/), and [Canvas](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-632c8e/) for detailed layout customization options. ### Custom Components Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API. ```typescript title="src/lib/imgly/config/ui/components.ts" // Register a custom component cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => { const selectedBlocks = engine.block.findAllSelected(); builder.Button('apply-effect', { label: 'Apply Effect', isDisabled: selectedBlocks.length === 0, onClick: () => { // Apply custom logic to selected blocks }, }); }); // Add the component to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', 'my-custom-button', 'after', ); ``` Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required. See [Register New Component](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/register-new-component-b04a04/) for the complete builder API and component patterns. ### Settings & Features Fine-tune editor behavior through settings and features. **Settings** configure core engine behavior—rendering, input handling, and history management: ```typescript title="src/lib/imgly/config/settings.ts" cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true); cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true); cesdk.engine.editor.setSettingBool('features/undoHistory', true); ``` **Features** toggle which editing tools and panels appear in the UI: ```typescript title="src/lib/imgly/config/features.ts" // Toggle editor features cesdk.feature.enable('ly.img.trim', true); cesdk.feature.enable('ly.img.filter', true); cesdk.feature.enable('ly.img.adjustment', true); ``` See [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) and [Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) for the complete reference. ### Explore Plugins CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior. #### Background Removal Add AI-powered background removal that runs entirely client-side. The background removal plugin processes images directly in the browser without sending data to external servers. ```typescript title="src/lib/imgly/config/plugin.ts" import BackgroundRemovalPlugin from '@imgly/plugin-background-removal'; // Add background removal capability await cesdk.addPlugin(BackgroundRemovalPlugin()); ``` See [Background Removal](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) for setup instructions and configuration options. #### AI Integration Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers. ```typescript title="src/lib/imgly/config/plugin.ts" import AIPlugin from '@imgly/plugin-ai-generation'; // Configure AI generation await cesdk.addPlugin( AIPlugin({ provider: 'your-ai-provider', apiKey: 'your-api-key', }), ); ``` See [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) for provider setup and supported AI features. #### Custom Asset Sources Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source. ```typescript title="src/lib/imgly/config/plugin.ts" import UnsplashAssetSource from '@imgly/plugin-unsplash'; // Add Unsplash integration await cesdk.addPlugin( UnsplashAssetSource({ accessKey: 'your-unsplash-access-key', }), ); ``` See [Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) for integration patterns. #### Discover More Plugins Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include: - **Vectorizer** – Convert raster images to vectors - **Design Presets** – Pre-built design templates - **Social Media Templates** – Platform-specific sizing - **And more** – Check the repository for the latest additions *** ## Key Capabilities Video Editor (Advanced) includes everything needed for professional video editing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get > a license key and remove the watermark. *** ## Troubleshooting ### Editor doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Assets don't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Export fails or produces blank video - **Wait for content to load**: Ensure videos are fully loaded before exporting - **Check CORS on videos**: Remote videos must allow cross-origin access ### Video export takes too long - **Reduce resolution**: Lower output resolution significantly improves encoding speed - **Shorten clip length**: Longer videos take proportionally longer to encode - **Check system resources**: Video encoding is CPU-intensive; close other applications ### Audio doesn't play - **Check browser autoplay policies**: Browsers require user interaction before playing audio - **Verify audio format**: Ensure audio files are in a supported format (MP3, WAV, AAC) ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) – Build custom export and save workflows - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "AI Image and Video Editor" description: "Add AI-powered image, video, audio, and voice generation directly into your app’s editing interface." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/ai-editor-4z6j9l/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [AI Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/ai-editor-4z6j9l/) --- Bring the power of generative AI directly into your app with the AI Editor – a prebuilt, embeddable solution built on top of the CreativeEditor SDK (CE.SDK). Designed for seamless in-editor use, it allows your users to generate and enhance content without switching tools or workflows. [Launch Web Demo](https://img.ly/showcases/cesdk/ai-editor/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-ai-editor) ## What is the AI Editor Solution? The AI Editor is a fully integrated CE.SDK configuration that enables image, video, audio, and voice generation directly inside your app’s editing interface. Users can start from a text prompt, an existing image, or video element—and generate high-quality, royalty-free content in seconds. Each AI tool is context-aware and accessible via the task bar or element-specific actions, creating a smooth and uninterrupted creative experience for your users. ## Key Features ### Generate images Turn text prompts or base images into photorealistic or stylized visuals. Output raster or vector formats, with styles such as: - Studio portrait - Pixel art - Moodboard - Social post - Product mockup ### Generate videos Transform a single image or prompt into a short, 5-second animated video. Users can define visual tone and animation style. Great for: - Social content - Concept animation - Branding visuals ### Generate audio Create royalty-free soundtracks and effects from simple prompts like “ambient synth loop” or “forest sounds.” Outputs are ready to use in CE.SDK’s video timeline. ### Generate AI voiceovers Type a script and select from natural-sounding voice profiles. Adjust speed to match your content and add voiceovers to explainer videos or product demos. ### In-context AI tools Interact with any element on the canvas—text, image, or video—and apply intelligent enhancements: - Rewrite or improve text - Translate and fix grammar - Style and variant generation - Convert images to video ## Why Use This Solution? - **Embed AI content generation directly in your app** - **Eliminate tool-switching** and keep users in a single creative workspace - **Increase user productivity** with fast, intuitive AI assistance - **Customize model backends** or use ours out-of-the-box - **Build on a proven platform** used by hundreds of production apps --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automated Image Resizing" description: "Resize a single design into multiple platform-ready formats automatically—with editable, on-brand results." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/auto-resize-t2jxae/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Auto-Resizer](https://img.ly/docs/cesdk/sveltekit/starterkits/auto-resize-t2jxae/) --- Automatically generate size variations of your design and scale your marketing materials across platforms — directly inside your app. [Launch Web Demo](https://img.ly/showcases/cesdk/automated-resizing/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-automated-resizing) ## What is the Auto-Resizer Solution? The Auto-Resizer is a prebuilt solution powered by CreativeEditor SDK (CE.SDK) that lets you embed automated design resizing into your web app. Whether you're building a content creation tool, campaign manager, or internal marketing portal, this solution helps your users create consistent assets across platforms — without relying on manual design work. This solution can be used programmatically or with a visual UI, and integrates directly into your existing web application. ## Key Features - **Automatic multi-size generation**\ Resize a single design template into multiple platform-optimized dimensions in just one click. - **Supports common formats**\ Output ready-to-use designs for: - Instagram Story (1080 × 1920 px) - Instagram Post 4:5 (1050 × 1350 px) - X (Twitter) Post (1200 × 675 px) - Facebook Post (1200 × 630 px) - **Editable results**\ After auto-resizing, users can still fine-tune each version individually, offering flexibility where needed. - **Templated consistency**\ Enforce layout and brand consistency across sizes with predefined design constraints. - **No design team needed**\ Empower marketers and non-designers to create professional, on-brand variations at scale. ## Why Use This Solution? Creating multiple size variations for each campaign can quickly become a bottleneck. The auto-resizer eliminates repetitive work by generating size-adapted versions of a single design — while still allowing edits to fine-tune each one. With this solution, you can: - Accelerate content production across teams and platforms - Reduce dependency on design resources - Ensure brand consistency in every output - Integrate resizing into your app with minimal development effort --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Automated Video Generation" description: "Automate video creation from templates using CE.SDK’s UI or headless API for scalable, on-brand content." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/automated-video-generation-8om1qg/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Automated Video Generator](https://img.ly/docs/cesdk/sveltekit/starterkits/automated-video-generation-8om1qg/) --- Generate dynamic videos from reusable templates — right inside your web app. The Automated Video Generator is a pre-built solution powered by CreativeEditor SDK (CE.SDK), designed for developers who want to streamline video content creation at scale. This solution can be embedded as a fully interactive UI or used headlessly via CE.SDK’s programmatic API, giving you full flexibility to match your product’s workflow and user experience. [Launch Web Demo](https://img.ly/showcases/cesdk/placeholders-video/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-placeholders-video) ## What is the Automated Video Generator Solution? The Automated Video Generator is a customizable web-based solution that enables you to build templated video experiences using CE.SDK. It supports both user-facing UIs and headless automation — so whether you want users to edit videos manually or generate them via scripts and data inputs, the choice is yours. At its core, the editor supports **video placeholders**, allowing you to create flexible templates where users or automation scripts can drop in new assets, text, or colors — without altering layout integrity or brand guidelines. This pre-built solution is ideal for content automation platforms, marketing tools, social media management dashboards, or any workflow where video personalization and speed are critical. ## Key Features - **Video placeholders for automation**\ Define editable areas in a video template that users or scripts can replace with their own clips, images, or content — all while keeping layout consistency. - **Permission-based constraints**\ Configure placeholder behavior in “creator” mode to restrict movement, styling, or deletion — ensuring end-users stay on-brand. - **UI or headless execution**\ Use the interactive editor for in-app editing, or automate video generation entirely via CE.SDK’s headless API. - **Scalable output generation**\ Generate multiple variations of a video by swapping placeholder content — ideal for social campaigns, product showcases, or ad creatives. - **Web-optimized experience**\ Fully compatible with modern browsers and built for seamless integration in React or vanilla JavaScript apps. ## Why Use This Solution? - **Fast time to value**\ Get up and running quickly with a plug-and-play editor that’s already configured for video automation. - **Boost user productivity**\ Reduce manual video editing by letting your users start from structured templates — or bypass editing altogether with programmatic generation. - **Flexible and brand-safe**\ Empower non-designers to create custom content without breaking brand guidelines. - **Developer-first architecture**\ Built on CE.SDK’s modular API and headless engine, so you can adapt it to fit UI-driven workflows or backend automation. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Data Merge" description: "Merge structured data into templates to create personalized, editable designs at scale using CE.SDK’s headless API." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/data-merge-d4evnm/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Data Merge](https://img.ly/docs/cesdk/sveltekit/starterkits/data-merge-d4evnm/) --- Generate personalized designs at scale by merging structured data into CE.SDK templates. The Data Merge prebuilt solution can be embedded into your app, allowing you to automate high-volume content creation while keeping every design on-brand and editable. [Launch Web Demo](https://img.ly/showcases/cesdk/batch-image-generation/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-batch-image-generation) ## What is the Data Merge Solution? The Data Merge solution uses CreativeEditor SDK’s headless API to dynamically generate visual assets from structured data inputs. Whether you’re creating team cards, event badges, certificates, or product listings, this solution lets you interpolate variable content—like names, images, and departments—into reusable design templates. It’s designed for scalability: update a master template once, and the changes automatically propagate to all generated instances. You can also enable manual edits per instance to fine-tune layout and content where needed. ## Key Features - **Headless Rendering**\ Generate scenes programmatically using CE.SDK’s headless API—ideal for server-side or automation workflows. - **Data Interpolation**\ Merge content from arrays, spreadsheets, or APIs directly into placeholders and text variables within your templates. - **Editable Outputs**\ Each generated design remains editable, allowing for manual adjustments like resizing images or correcting long names. - **Template Propagation**\ Edits made to the original template automatically apply to all downstream instances—ensuring brand consistency and saving time. - **Flexible Input Sources**\ Use structured data from JSON, databases, or third-party APIs to populate templates. ## Why Use This Solution? - **Automate Creative Workflows**\ Scale content production without scaling your design team. Perfect for marketing campaigns, catalogs, team profiles, and more. - **Maintain Visual Consistency**\ Centralized templates and automatic propagation reduce errors and ensure all materials align with brand guidelines. - **Speed Up Production**\ Eliminate repetitive design tasks by generating dozens—or thousands—of personalized outputs with a single operation. - **Flexible Integration**\ Use the Data Merge solution programmatically in headless environments or combine it with the CE.SDK UI for hybrid workflows. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design Editor for SvelteKit" description: "Add professional design editing to your SvelteKit app in minutes. Create graphics, templates, and multi-page documents—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/design-editor-8unj9u/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Design Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/design-editor-8unj9u/) --- Professional design editing for your SvelteKit app—create graphics, templates, and multi-page documents. Runs entirely in the browser with no server dependencies.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-design-editor-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-design-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-design-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-design-editor/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Create a new SvelteKit application with Design Editor integration. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name yarn dlx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-design-editor-ts-web.git cp -r starterkit-design-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-design-editor-ts-web npx degit imgly/starterkit-design-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. ## Step 3: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web The `onnxruntime-web` package provides the machine learning runtime required for client-side AI processing. ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 5: Create the Editor Component. ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/DesignEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Design Editor component in your page route (e.g., `src/routes/+page.svelte`): ```svelte {#if browser && DesignEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Get Started Integrate the Design Editor into an existing SvelteKit application. This adds the editor configuration to your current project structure. ## Step 1: Clone cd your-project Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-design-editor-ts-web.git cp -r starterkit-design-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-design-editor-ts-web npx degit imgly/starterkit-design-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 2: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web The `onnxruntime-web` package provides the machine learning runtime required for client-side AI processing. ## Step 3: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. For SvelteKit projects, place these in your `static/` directory which is served automatically. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 4: Create the Editor Component. ## Step 4: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/DesignEditor.svelte`): ```svelte

``` ## Step 5: Use the Component Import and use the Design Editor component in your page route (e.g., `src/routes/+page.svelte`): ```svelte {#if browser && DesignEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Set Up a Scene CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Create a blank design canvas - starts with an empty design scene await cesdk.actions.run('scene.create'); // Load from a template archive - restores a previously saved project await cesdk.loadFromArchiveURL('https://example.com/template.zip'); // Load from an image URL - creates a new scene with the image await cesdk.createFromImage('https://example.com/image.jpg'); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); ``` The `createDesignScene()` method is ideal for design workflows, as it creates a blank canvas ready for content. > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading methods. ## Customize Assets The Design Editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what's included based on your needs. Asset sources are added via plugins in `src/lib/imgly/index.ts`. Enable or disable individual sources: ```typescript title="src/lib/imgly/index.ts" import { FiltersAssetSource, StickerAssetSource, TextAssetSource, VectorShapeAssetSource, EffectsAssetSource, // ... } from '@cesdk/cesdk-js/plugins'; // Add only the sources you need await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); // ... ``` > **Available Asset Sources:** See [Asset Source Plugins](https://img.ly/docs/cesdk/sveltekit/plugins/asset-sources-a7f3b2/) for the complete list of available sources. For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times. ## Configure Actions Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations. **Key built-in actions:** - `exportDesign` – Export the current design to PNG, JPEG, PDF, or other formats - `saveScene` – Save the scene as a JSON string for later editing - `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats) - `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets - `uploadFile` – Handle file uploads with progress tracking Use `cesdk.actions.run()` to execute any action: ```typescript // Run a built-in action await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); ``` #### Import from File Picker ```typescript title="src/lib/imgly/config/actions.ts" // Let users open images from their device cesdk.actions.register('importImage', async () => { const blobURL = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'objectURL' }); await cesdk.createFromImage(blobURL); }); ``` #### Export and Save ```typescript title="src/lib/imgly/config/actions.ts" // Register export action that downloads the edited design cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs, options } = await cesdk.utils.export(exportOptions); await cesdk.utils.downloadFile(blobs[0], options.mimeType); }); ``` #### Upload to Your Backend ```typescript title="src/lib/imgly/config/actions.ts" // Override the built-in exportDesign action to send to your server cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs } = await cesdk.utils.export(exportOptions); const formData = new FormData(); formData.append('design', blobs[0], 'design.png'); const response = await fetch('/api/upload', { method: 'POST', body: formData }); const { url } = await response.json(); console.log('Uploaded to:', url); }); ``` > **Learn More:** See [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for the full list of built-in actions, how to run them, and how to register custom actions. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'actions.export.image': 'Download Design', 'common.cancel': 'Cancel', 'common.apply': 'Apply' } }); // Add a new language cesdk.i18n.setTranslations({ de: { 'actions.export.image': 'Design herunterladen' } }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. ### UI Layout  Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence. ```typescript title="src/lib/imgly/config/ui/navigationBar.ts" // Get current navigation bar components const navOrder = cesdk.ui.getNavigationBarOrder(); // Add a custom button to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', { id: 'my-custom-action' }, 'after' ); // Rearrange dock items cesdk.ui.setDockOrder([ 'ly.img.assetLibrary.dock', 'ly.img.separator', 'my-custom-dock-item' ]); // Customize the inspector bar cesdk.ui.setInspectorBarOrder([ 'ly.img.fill.inspectorBar', 'ly.img.separator', 'ly.img.filter.inspectorBar' ]); ``` The Order API methods follow a consistent pattern across all UI areas: - `get*Order()` – Retrieve the current component order - `set*Order()` – Replace the entire order - `insert*OrderComponent()` – Add components relative to existing ones See [Dock](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), [Inspector Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/inspector-bar-8ca1cd/), [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/), [Canvas Menu](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-menu-0d2b5b/), and [Canvas](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-632c8e/) for detailed layout customization options. ### Custom Components Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API. ```typescript title="src/lib/imgly/config/ui/components.ts" // Register a custom component cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => { const selectedBlocks = engine.block.findAllSelected(); builder.Button('apply-effect', { label: 'Apply Effect', isDisabled: selectedBlocks.length === 0, onClick: () => { // Apply custom logic to selected blocks } }); }); // Add the component to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', 'my-custom-button', 'after' ); ``` Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required. See [Register New Component](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/register-new-component-b04a04/) for the complete builder API and component patterns. ### Settings & Features Fine-tune editor behavior through settings and features. **Settings** configure core engine behavior—rendering, input handling, and history management: ```typescript title="src/lib/imgly/config/settings.ts" cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true); cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true); cesdk.engine.editor.setSettingBool('features/undoHistory', true); ``` **Features** toggle which editing tools and panels appear in the UI: ```typescript title="src/lib/imgly/config/features.ts" // Toggle editor features cesdk.feature.enable('ly.img.crop', true); cesdk.feature.enable('ly.img.filter', true); cesdk.feature.enable('ly.img.adjustment', true); ``` See [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) and [Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) for the complete reference. ### Explore Plugins CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior. #### Background Removal Add AI-powered background removal: The background removal plugin processes images directly in the browser without sending data to external servers. ```typescript title="src/lib/imgly/config/plugin.ts" import BackgroundRemovalPlugin from '@imgly/plugin-background-removal'; // Add background removal capability await cesdk.addPlugin(BackgroundRemovalPlugin()); ``` See [Background Removal](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) for setup instructions and configuration options. #### Print Ready PDF Export print-ready PDF/X-3 files with CMYK color profiles for professional printing workflows. ```typescript title="src/lib/imgly/config/plugin.ts" import PrintReadyPDFPlugin from '@imgly/plugin-print-ready-pdf'; // Add print-ready PDF export capability await cesdk.addPlugin(PrintReadyPDFPlugin()); ``` See [Print Ready PDF](https://img.ly/docs/cesdk/sveltekit/plugins/print-ready-pdf-iroalu/) for setup instructions and configuration options. #### AI Integration Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers. ```typescript title="src/lib/imgly/config/plugin.ts" import AIPlugin from '@imgly/plugin-ai-generation'; // Configure AI generation await cesdk.addPlugin(AIPlugin({ provider: 'your-ai-provider', apiKey: 'your-api-key' })); ``` See [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) for provider setup and supported AI features. #### Custom Asset Sources Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source. ```typescript title="src/lib/imgly/config/plugin.ts" import UnsplashAssetSource from '@imgly/plugin-unsplash'; // Add Unsplash integration await cesdk.addPlugin(UnsplashAssetSource({ accessKey: 'your-unsplash-access-key' })); ``` See [Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) for integration patterns. #### Discover More Plugins Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include: - **Vectorizer** – Convert raster images to vectors - **Design Presets** – Pre-built design templates - **Social Media Templates** – Platform-specific sizing - **And more** – Check the repository for the latest additions *** ## Key Capabilities The Design Editor includes everything needed for professional design editing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark. *** ## Troubleshooting ### Editor doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Assets don't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Export fails or produces blank images - **Wait for content to load**: Ensure images are fully loaded before exporting - **Check CORS on images**: Remote images must allow cross-origin access ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) – Build custom export and save workflows - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design Generation" description: "Generate dynamic, on-brand visuals at scale using templates, data inputs, and CE.SDK’s headless API." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/design-generation-v8y4l9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Design Generator](https://img.ly/docs/cesdk/sveltekit/starterkits/design-generation-v8y4l9/) --- Automatically generate on-brand visuals with the Design Generator, a prebuilt solution built on top of CreativeEditor SDK (CE.SDK). Easily embed it into your web application to produce dynamic assets at scale—from social posts to promotional videos. [Launch Web Demo](https://img.ly/showcases/cesdk/headless-design/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-headless-design) ## What is the Design Generator Solution? The Design Generator is a pre-built solution powered by CreativeEditor SDK (CE.SDK) that enables developers to programmatically create design variations from a set of input parameters. Whether you're building a social media automation tool or a creative content engine, this solution lets you generate ready-to-use assets—such as static images and short video clips—based on user or system-defined data. Built with CE.SDK’s headless API, this solution runs fully in the browser and can be embedded into any web application. It combines the flexibility of templated design logic with the scalability of automation. ## Key Features - **Automated Design Generation**\ Generate assets dynamically using a combination of input fields, preconfigured templates, and the CE.SDK variable and placeholder APIs. - **Data Integration**\ Seamlessly connect to external sources (e.g., podcast libraries or CMS data) to drive content generation. - **Multi-format Output**\ Export assets in different aspect ratios and sizes, including formats like Instagram Stories, Facebook Posts, and custom resolutions. - **Real-time Editing**\ Let users refine auto-generated content in a UI-based editor powered by CE.SDK—perfect for last-mile customization. - **Custom Templates**\ Use your own templates or adapt existing ones to define layout, font styles, colors, and asset constraints. - **Headless API**\ Fully automate generation tasks with no UI dependencies—or combine with a UI when customization is needed. ## Why Use This Solution? - **Save Time with Automation**\ Eliminate repetitive design tasks by generating content in bulk—no need for manual editing. - **Enable Personalization at Scale**\ Dynamically adapt your design assets for different users, campaigns, or content sources. - **Integrate with Your Stack**\ This web-based solution can be embedded directly into your app and works seamlessly with your existing data sources and workflows. - **Flexible and Extensible**\ Whether you're producing social graphics, event flyers, podcast visuals, or promotional videos, the Design Generator adapts to your creative needs. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Mockup Editor" description: "Let users preview designs on real products in real time with an embeddable mockup editor for web apps." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/mockup-editor-e8eejr/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Mockup Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/mockup-editor-e8eejr/) --- Visualize the final product with confidence using the Mockup Editor, a prebuilt solution built on top of CreativeEditor SDK (CE.SDK). Easily embed it into your web application to enable real-time product previews across a range of formats, from apparel to postcards. [Launch Web Demo](https://img.ly/showcases/cesdk/mockup-editor/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-mockup-editor) ## What is the Mockup Editor Solution? The Mockup Editor is a ready-to-use interface powered by CE.SDK that lets users preview designs mapped directly onto real-world product surfaces. This preview experience helps users catch layout issues early and make informed design decisions—especially useful in e-commerce, print-on-demand, and marketing workflows. This solution is optimized for a seamless in-browser experience and supports a variety of common formats: - **Apparel** - **Business cards** - **Postcards** - **Posters** - **Social media visuals** Each format comes with a tailored preview mode, ensuring realistic and product-specific mockups. ## Key Features - **Live Preview Rendering**\ All design changes are immediately reflected in the mockup preview, allowing users to validate their work without switching tools. - **Fullscreen & Export Support**\ Users can enter fullscreen mode for a closer inspection of the final product and export their mockup directly from the interface. - **Editable Design Surface**\ Reopen the design view from within the mockup preview to tweak layout, background, sizing, and other style elements—all without leaving the flow. - **Multiple Mockup Types**\ Preconfigured mockups for apparel, stationery, and digital assets let you tailor the experience to your use case. ## Why Use This Solution? The Mockup Editor offers a powerful combination of usability and flexibility: - **Reduce Friction**\ Let users preview and refine designs in one place—no back-and-forth between editing tools and preview windows. - **Accelerate Go-to-Market**\ Help teams move faster by streamlining visual validation in workflows like product launches, custom merchandise, or campaign content. - **Enhance Personalization**\ Ideal for platforms offering user-generated content or product customization. Integrate the Mockup Editor to give users a visual proof of concept before ordering or publishing. - **Easy to Embed**\ Designed for developers, the Mockup Editor can be added to any web app with minimal setup. Customize the experience or use it as-is to quickly provide professional-grade mockup previews. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Multi Image Generation" description: "Generate multiple on-brand image variations from structured data using CE.SDK’s headless API and custom templates." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/multi-image-generation-g7jzku/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Multiple Image Generator](https://img.ly/docs/cesdk/sveltekit/starterkits/multi-image-generation-g7jzku/) --- Generate multiple on-brand image variations from a single data source — and embed the entire workflow into your web application using CreativeEditor SDK (CE.SDK). [Launch Web Demo](https://img.ly/showcases/cesdk/multi-image-generation/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-multi-image-generation) ## What is the Multiple Image Generator Solution? The Multiple Image Generator is a prebuilt web solution built on top of CE.SDK that enables developers to programmatically generate multiple design variations from a single data input. This is especially useful for automating content creation at scale — such as product promotions, social media visuals, or user-generated reviews — while ensuring design consistency. This solution uses CE.SDK’s headless API to interpolate structured data into customizable templates. Developers can easily embed it into their applications to deliver dynamic image generation without requiring manual design work. ## Key Features - **Programmatic design generation**\ Automatically populate templates with structured data using CE.SDK’s variable and placeholder APIs. - **Multi-template support**\ Generate different branded variants of the same content for different platforms or audiences. - **Headless API**\ Run design logic entirely in code — no UI required — making it easy to integrate with backends or automation workflows. - **Template-driven design**\ Easily update or swap templates to reflect new branding, formats, or campaign needs. - **Live preview and export**\ Review auto-generated assets in real time and export them in a variety of formats for production use. ## Why Use This Solution? The Multiple Image Generator helps developers: - **Accelerate content workflows**\ Eliminate repetitive design tasks by generating multiple assets from structured data, such as CSV rows or API responses. - **Maintain brand consistency at scale**\ Every output adheres to a pre-defined visual standard — ensuring a polished and on-brand result. - **Embed creative automation into apps**\ Offer your users the ability to personalize and publish visual content dynamically, all within your platform. - **Scale across platforms**\ Generate variants for different social media formats, marketing channels, or regional campaigns in one flow. This prebuilt solution is ideal for platforms focused on product marketing, social content automation, reviews, or e-commerce — and gives you full control over templates, logic, and output. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Photo Editor for SvelteKit" description: "Add professional photo editing to your SvelteKit app in minutes. Crop, filter, remove backgrounds, and export—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/photo-editor-r6kq0u/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Photo Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/photo-editor-r6kq0u/) --- Professional photo editing for your SvelteKit app—crop, filter, adjust, and remove backgrounds. Runs entirely in the browser with no server dependencies.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-photo-editor-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-photo-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-photo-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-photo-editor/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Create a new SvelteKit application with Photo Editor integration. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name npx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-photo-editor-ts-web.git cp -r starterkit-photo-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-photo-editor-ts-web npx degit imgly/starterkit-photo-editor-ts-web/src/lib/imgly ./src/lib/imgly The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 3: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web The `onnxruntime-web` package provides the machine learning runtime required for client-side AI processing. ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. For SvelteKit projects, place these in your `static/` directory which is served automatically. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 5: Create the Editor Component. ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/PhotoEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Photo Editor component in your page route: ```svelte {#if browser && PhotoEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Force Crop Require users to crop images to specific dimensions before saving. This is useful for profile pictures, social media posts, or any workflow requiring consistent image sizes. Use `applyForceCrop` to enforce a specific aspect ratio on the selected image: ```typescript title="src/lib/imgly/config/actions.ts" // Get the currently selected image block const selectedBlocks = cesdk.engine.block.findAllSelected(); const imageBlock = selectedBlocks[0]; // Apply a 1:1 square crop await cesdk.ui.applyForceCrop(imageBlock, { sourceId: 'ly.img.crop.presets', presetId: 'ly.img.crop.presets.fixed-ratio.1_1', mode: 'ifNeeded' }); ``` The `mode` parameter controls how the crop is applied: - `silent` – Apply the crop automatically without showing the crop UI - `always` – Apply the crop and open the crop UI for user adjustment - `ifNeeded` – Only show the crop UI if current dimensions differ from the preset **Available preset IDs:** - `ly.img.crop.presets.fixed-ratio.free` – Free aspect ratio - `ly.img.crop.presets.fixed-ratio.1_1` – Square (1:1) - `ly.img.crop.presets.fixed-ratio.9_16` – Portrait (9:16) - `ly.img.crop.presets.fixed-ratio.16_9` – Landscape (16:9) - `ly.img.crop.presets.fixed-ratio.4_3` – Standard (4:3) - `ly.img.crop.presets.fixed-ratio.3_4` – Portrait (3:4) - `ly.img.crop.presets.fixed-ratio.4_5` – Portrait (4:5) - `ly.img.crop.presets.fixed-ratio.5_4` – Landscape (5:4) ## Get Started Integrate the Photo Editor into an existing SvelteKit application. This adds the editor configuration to your current project structure. ## Step 1: Clone cd your-project Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-photo-editor-ts-web.git cp -r starterkit-photo-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-photo-editor-ts-web npx degit imgly/starterkit-photo-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 2: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web The `onnxruntime-web` package provides the machine learning runtime required for client-side AI processing. ## Step 3: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. For SvelteKit projects, place these in your `static/` directory which is served automatically. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 4: Create the Editor Component. ## Step 4: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/PhotoEditor.svelte`): ```svelte

``` ## Step 5: Use the Component Import and use the Photo Editor component in your page route: ```svelte {#if browser && PhotoEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Force Crop Require users to crop images to specific dimensions before saving. This is useful for profile pictures, social media posts, or any workflow requiring consistent image sizes. Use `applyForceCrop` to enforce a specific aspect ratio on the selected image: ```typescript title="src/lib/imgly/config/actions.ts" // Get the currently selected image block const selectedBlocks = cesdk.engine.block.findAllSelected(); const imageBlock = selectedBlocks[0]; // Apply a 1:1 square crop await cesdk.ui.applyForceCrop(imageBlock, { sourceId: 'ly.img.crop.presets', presetId: 'ly.img.crop.presets.fixed-ratio.1_1', mode: 'ifNeeded' }); ``` The `mode` parameter controls how the crop is applied: - `silent` – Apply the crop automatically without showing the crop UI - `always` – Apply the crop and open the crop UI for user adjustment - `ifNeeded` – Only show the crop UI if current dimensions differ from the preset **Available preset IDs:** - `ly.img.crop.presets.fixed-ratio.free` – Free aspect ratio - `ly.img.crop.presets.fixed-ratio.1_1` – Square (1:1) - `ly.img.crop.presets.fixed-ratio.9_16` – Portrait (9:16) - `ly.img.crop.presets.fixed-ratio.16_9` – Landscape (16:9) - `ly.img.crop.presets.fixed-ratio.4_3` – Standard (4:3) - `ly.img.crop.presets.fixed-ratio.3_4` – Portrait (3:4) - `ly.img.crop.presets.fixed-ratio.4_5` – Portrait (4:5) - `ly.img.crop.presets.fixed-ratio.5_4` – Landscape (5:4) ## Set Up a Scene CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Load from an image URL - creates a new scene with the image await cesdk.createFromImage('https://example.com/photo.jpg'); // Load from a template archive - restores a previously saved project await cesdk.loadFromArchiveURL('https://example.com/template.zip'); // Create a blank canvas - starts with an empty design scene await cesdk.actions.run('scene.create'); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); ``` The `createFromImage()` method is ideal for photo editing workflows, as it automatically creates a scene sized to the image dimensions. > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading methods. ## Customize Assets The Photo Editor uses asset source plugins to provide built-in libraries for filters, effects, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what's included based on your needs. Asset sources are added via plugins in `src/lib/imgly/index.ts`. Enable or disable individual sources: ```typescript title="src/lib/imgly/index.ts" import { FiltersAssetSource, StickerAssetSource, TextAssetSource, VectorShapeAssetSource, // ... } from '@cesdk/cesdk-js/plugins'; // Add only the sources you need await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // ... ``` > **Available Asset Sources:** See [Asset Source Plugins](https://img.ly/docs/cesdk/sveltekit/plugins/asset-sources-a7f3b2/) for the complete list of available sources. For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times. ## Configure Actions Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations. **Key built-in actions:** - `exportDesign` – Export the current design to PNG, JPEG, PDF, or other formats - `saveScene` – Save the scene as a JSON string for later editing - `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats) - `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets - `uploadFile` – Handle file uploads with progress tracking Use `cesdk.actions.run()` to execute any action: ```typescript // Run a built-in action await cesdk.actions.run('exportDesign', { mimeType: 'image/png' }); ``` #### Import from File Picker ```typescript title="src/lib/imgly/config/actions.ts" // Let users open images from their device cesdk.actions.register('importImage', async () => { const blobURL = await cesdk.utils.loadFile({ accept: 'image/*', returnType: 'objectURL' }); await cesdk.createFromImage(blobURL); }); ``` #### Export and Save ```typescript title="src/lib/imgly/config/actions.ts" // Register export action that downloads the edited photo cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs, options } = await cesdk.utils.export(exportOptions); await cesdk.utils.downloadFile(blobs[0], options.mimeType); }); ``` #### Upload to Your Backend ```typescript title="src/lib/imgly/config/actions.ts" // Override the built-in exportDesign action to send to your server cesdk.actions.register('exportDesign', async (exportOptions) => { const { blobs } = await cesdk.utils.export(exportOptions); const formData = new FormData(); formData.append('image', blobs[0], 'edited-photo.png'); const response = await fetch('/api/upload', { method: 'POST', body: formData }); const { url } = await response.json(); console.log('Uploaded to:', url); }); ``` > **Learn More:** See [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for the full list of built-in actions, how to run them, and how to register custom actions. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'actions.export.image': 'Download Photo', 'common.cancel': 'Cancel', 'common.apply': 'Apply' } }); // Add a new language cesdk.i18n.setTranslations({ de: { 'actions.export.image': 'Foto herunterladen' } }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. ### UI Layout  Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence. ```typescript title="src/lib/imgly/config/ui/navigationBar.ts" // Get current navigation bar components const navOrder = cesdk.ui.getNavigationBarOrder(); // Add a custom button to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', { id: 'my-custom-action' }, 'after' ); // Rearrange dock items cesdk.ui.setDockOrder([ 'ly.img.assetLibrary.dock', 'ly.img.separator', 'my-custom-dock-item' ]); // Customize the inspector bar cesdk.ui.setInspectorBarOrder([ 'ly.img.fill.inspectorBar', 'ly.img.separator', 'ly.img.filter.inspectorBar' ]); ``` The Order API methods follow a consistent pattern across all UI areas: - `get*Order()` – Retrieve the current component order - `set*Order()` – Replace the entire order - `insert*OrderComponent()` – Add components relative to existing ones See [Dock](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), [Inspector Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/inspector-bar-8ca1cd/), [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/), [Canvas Menu](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-menu-0d2b5b/), and [Canvas](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-632c8e/) for detailed layout customization options. ### Custom Components Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API. ```typescript title="src/lib/imgly/config/ui/components.ts" // Register a custom component cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => { const selectedBlocks = engine.block.findAllSelected(); builder.Button('apply-effect', { label: 'Apply Effect', isDisabled: selectedBlocks.length === 0, onClick: () => { // Apply custom logic to selected blocks } }); }); // Add the component to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', 'my-custom-button', 'after' ); ``` Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required. See [Register New Component](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/register-new-component-b04a04/) for the complete builder API and component patterns. ### Settings & Features Fine-tune editor behavior through settings and features. **Settings** configure core engine behavior—rendering, input handling, and history management: ```typescript title="src/lib/imgly/config/settings.ts" cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true); cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true); cesdk.engine.editor.setSettingBool('features/undoHistory', true); ``` **Features** toggle which editing tools and panels appear in the UI: ```typescript title="src/lib/imgly/config/features.ts" // Toggle editor features cesdk.feature.enable('ly.img.crop', true); cesdk.feature.enable('ly.img.filter', true); cesdk.feature.enable('ly.img.adjustment', true); ``` See [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) and [Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) for the complete reference. ### Explore Plugins CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior. #### Background Removal Add AI-powered background removal that runs entirely client-side. The background removal plugin processes images directly in the browser without sending data to external servers. ```typescript title="src/lib/imgly/config/plugin.ts" import BackgroundRemovalPlugin from '@imgly/plugin-background-removal'; // Add background removal capability await cesdk.addPlugin(BackgroundRemovalPlugin()); ``` See [Background Removal](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) for setup instructions and configuration options. #### AI Integration Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers. ```typescript title="src/lib/imgly/config/plugin.ts" import AIPlugin from '@imgly/plugin-ai-generation'; // Configure AI generation await cesdk.addPlugin(AIPlugin({ provider: 'your-ai-provider', apiKey: 'your-api-key' })); ``` See [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) for provider setup and supported AI features. #### Custom Asset Sources Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source. ```typescript title="src/lib/imgly/config/plugin.ts" import UnsplashAssetSource from '@imgly/plugin-unsplash'; // Add Unsplash integration await cesdk.addPlugin(UnsplashAssetSource({ accessKey: 'your-unsplash-access-key' })); ``` See [Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) for integration patterns. #### Discover More Plugins Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include: - **Vectorizer** – Convert raster images to vectors - **Design Presets** – Pre-built design templates - **Social Media Templates** – Platform-specific sizing - **And more** – Check the repository for the latest additions *** ## Key Capabilities The Photo Editor includes everything needed for professional image editing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark. *** ## Troubleshooting ### Editor doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Assets don't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Export fails or produces blank images - **Wait for content to load**: Ensure images are fully loaded before exporting - **Check CORS on images**: Remote images must allow cross-origin access ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) – Build custom export and save workflows - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Photobook Editor" description: "Let users create themed, multi-page photobooks with guided layouts, placeholders, and a simplified editing UI." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/photobook-editor-m5ob81/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Photobook Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/photobook-editor-m5ob81/) --- Easily embed a customizable photobook editor into your web app using CreativeEditor SDK (CE.SDK). Designed for developers building personalized print or digital experiences, this solution offers a clean, guided UI tailored for photobook creation — from theme selection to multi-page layout management. [Launch Web Demo](https://img.ly/showcases/cesdk/photobook-ui/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-photobook-ui) ## What is the Photobook Editor Solution? The Photobook Editor is a pre-built solution built with CE.SDK’s headless API. It’s designed to help developers quickly deliver a fully functional photobook creation experience inside their app. This solution limits complexity for end users by exposing only the most relevant tools: theming, layout selection, and photo placement. From weddings to holidays to portfolios, the Photobook Editor makes it easy to start from themed templates, drop in photos, and customize each page with simple, intuitive controls. ## Key Features - **Theme selector**\ Allow users to personalize their photobook based on a specific event or aesthetic. Themes can be applied per page for full creative flexibility. - **Multi-page layout management**\ Users can add, remove, and reorder pages, with built-in layout templates guiding them to a clean, finished look. - **Placeholder-driven editing**\ Built-in placeholders make adding and replacing photos effortless — just click to upload and crop as needed. - **Sticker and asset library integration**\ Quickly add embellishments or brand elements using an extendable asset library. - **Guided UI**\ A simplified toolbar and sidebar help users focus on key actions, reducing friction and enabling fast photobook creation. - **Smart defaults**\ Users start with a few pre-populated pages that offer different layouts — helping them begin designing immediately without a blank canvas. ## Why Use This Solution? - **Accelerated time-to-market**\ Avoid building a photobook editor from scratch. Use this ready-made UI as a fast foundation for personalization features. - **Customizable and extensible**\ Built on CE.SDK’s headless API, the editor can be tailored to fit your branding, data sources, or workflow needs. - **User-friendly by design**\ The editor surfaces only the most relevant features for your users, streamlining the experience and boosting completion rates. - **Ideal for e-commerce, printing, and creative platforms**\ Whether you're building a photobook flow for print-on-demand, event keepsakes, or digital albums — this solution helps you deliver a polished experience fast. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Player for SvelteKit" description: "Add video playback to your SvelteKit app in minutes. Play, pause, and navigate video content—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/player-6sjm1w/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Video Player](https://img.ly/docs/cesdk/sveltekit/starterkits/player-6sjm1w/) --- Lightweight video playback for your SvelteKit app—play, pause, and navigate video content. Runs entirely in the browser with no server dependencies.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-video-player-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-video-player-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-video-player-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-video-player/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Integrate the Video Player into your SvelteKit application using the imperative API. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name npx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the player configuration to your project: git clone https://github.com/imgly/starterkit-video-player-ts-web.git cp -r starterkit-video-player-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-video-player-ts-web npx degit imgly/starterkit-video-player-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. The `imgly/` folder contains the player configuration: ``` src/lib/imgly/ ├── index.ts # Player initialization function └── config/ ├── plugin.ts # Main configuration plugin ├── features.ts # Feature toggles ├── i18n.ts # Translations └── settings.ts # Engine settings ``` ## Step 3: Install Dependencies The Creative Editor SDK package provides all playback functionality. npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in the player component. ## Step 5: Create the Player Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/VideoPlayer.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Video Player component in your page route: ```svelte {#if browser && VideoPlayer} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Get Started Integrate the Video Player into an existing SvelteKit application. This adds the player configuration to your current project structure. ### Step 1: Navigate to Your Project cd your-project ### Step 2: Clone the Starter Kit Clone the starter kit and copy the player configuration to your project: git clone https://github.com/imgly/starterkit-video-player-ts-web.git cp -r starterkit-video-player-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-video-player-ts-web npx degit imgly/starterkit-video-player-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your > project structure. ### Step 3: Install Dependencies The Creative Editor SDK package provides all playback functionality. npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place > assets in a different location, update the `baseURL` in the player component. ### Step 5: Create the Player Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/VideoPlayer.svelte`): ```svelte

``` ### Step 6: Use the Component Import and use the Video Player component in your page route: ```svelte {#if browser && VideoPlayer} {/if} ``` #### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` *** ## Set Up a Scene CE.SDK offers multiple ways to load content into the player. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Load from a template archive - loads a previously saved project await cesdk.loadFromArchiveURL('https://example.com/video.zip'); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); // Zoom to fit the content await cesdk.actions.run('zoom.toPage', { page: 'first', autoFit: true, padding: 24, }); ``` > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading > methods. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'common.play': 'Play Video', 'common.pause': 'Pause', }, }); // Add a new language cesdk.i18n.setTranslations({ de: { 'common.play': 'Video abspielen', }, }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. *** ## Key Capabilities The Video Player includes everything needed for video playback.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get > a license key and remove the watermark. *** ## Troubleshooting ### Player doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Content doesn't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Video doesn't play - **Check browser autoplay policies**: Browsers require user interaction before playing video - **Verify video format**: Ensure video files are in a supported format (MP4, WebM) ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Postcard Editor" description: "Let users personalize postcards with templates, style presets, and print-ready exports—no design skills needed." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/postcard-editor-03mijr/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Postcard Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/postcard-editor-03mijr/) --- The Postcard Editor is a prebuilt CreativeEditor SDK (CE.SDK) solution designed for quickly creating and personalizing postcards and greeting cards. It provides an intuitive UI that guides users through selecting a design, editing its contents, and customizing messaging—all without needing design expertise. This ready-to-use editor can be easily added to your web app and fully customized to match your brand, making it ideal for direct mail campaigns, seasonal greetings, or personalized customer engagement. [Launch Web Demo](https://img.ly/showcases/cesdk/post-greeting-cards/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-post-greeting-cards) ## What is the Postcard Editor Solution? The Postcard Editor is a prebuilt CreativeEditor SDK (CE.SDK) solution designed for quickly creating and personalizing postcards and greeting cards. It provides an intuitive UI that guides users through selecting a design, editing its contents, and customizing messaging—all without needing design expertise. With built-in support for style presets, design constraints, and variable-driven personalization, the Postcard Editor enables scalable creation of high-quality, print-ready content for direct mail, seasonal greetings, and personalized campaigns. ## Key Features - **Style presets**\ Jump-start the design process with a collection of professionally crafted postcard templates. - **Design mode**\ After selecting a style, users can personalize the design. Depending on the template configuration, they can: - Change accent and background colors - Replace photos from a library or upload their own - Edit headings and body text (fonts, colors, layout) - Add stickers, shapes, or other decorative elements - **Write mode**\ Users can add a personal message and address the card. Text styling options include font, size, and color customization. - **Dynamic variables**\ Enable scalable personalization using variables like `{{firstname}}` or `{{address}}`. Templates can be connected to external data sources for automated batch generation. - **Print-ready export**\ Designs are exported in high-resolution, print-friendly formats, suitable for direct mail or digital delivery. ## Why Use This Solution? - **Accelerate development**\ Save time with a pre-configured UI that’s production-ready and easily customizable via CE.SDK’s headless API. - **Empower non-designers**\ Make creative tools accessible to any user by enforcing design constraints and simplifying the editing experience. - **Scale personalization**\ Integrate with external data to programmatically generate personalized postcards for marketing, e-commerce, or events. - **Cross-platform ready**\ The Postcard Editor works across web, mobile, and desktop environments, offering a seamless user experience wherever it’s deployed. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "T-Shirt Designer" description: "Embed a t-shirt design editor with print areas, PDF export, and a focused UI for apparel customization." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/t-shirt-designer-jwinqr/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [T-Shirt Designer](https://img.ly/docs/cesdk/sveltekit/starterkits/t-shirt-designer-jwinqr/) --- Quickly add a professional-grade t-shirt design editor to your web app with CE.SDK. [Launch Web Demo](https://img.ly/showcases/cesdk/apparel-editor-ui/) [View on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/showcase-apparel-editor-ui) ## What is the T-Shirt Designer Solution? The T-Shirt Designer is a pre-configured instance of the CreativeEditor SDK (CE.SDK) tailored for apparel design workflows. It enables your users to create high-quality, print-ready t-shirt designs directly in your app—whether for a custom merchandise platform, print-on-demand storefront, or internal design tool. This solution comes with a realistic t-shirt mockup background, precise boundary enforcement, and a simplified UI. You can easily integrate it across web, mobile, or desktop platforms and customize it to match your brand or workflow. ## Key Features - **T-Shirt backdrop with placement guidance**\ A visually accurate t-shirt background helps users place artwork exactly where it will appear when printed. - **Strict print area enforcement**\ Elements that extend beyond the defined print region are clipped automatically, ensuring print precision. - **Placeholder-based template editing**\ Supports templates with editable placeholders, such as swappable images. Define which parts of a design are user-editable by toggling between Creator and Adopter modes. - **Print-ready PDF export**\ Outputs print-quality PDFs to seamlessly fit into your existing production workflows. - **Fully customizable UI**\ Adapt the interface and features to suit your brand and user needs using the CE.SDK configuration API. ## Why Use This Solution? - **Accelerated development**\ Save engineering time with a ready-made editor specifically configured for t-shirt design. - **Better user experience**\ The focused UI reduces complexity, guiding users through apparel creation with built-in visual feedback and safeguards. - **Seamless print integration**\ The export format and boundary enforcement make it ideal for print-on-demand systems with no additional post-processing required. - **Flexible and extensible**\ As with all CE.SDK solutions, the T-Shirt Designer is deeply customizable—extend features, change design constraints, or integrate external data and asset libraries. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Video Editor for SvelteKit" description: "Add professional video editing to your SvelteKit app in minutes. Edit clips, add effects, and export to MP4—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/video-editor-e1nlor/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Video Editor](https://img.ly/docs/cesdk/sveltekit/starterkits/video-editor-e1nlor/) --- Professional video editing for your SvelteKit app—edit clips, add effects, trim footage, and export to MP4. Runs entirely in the browser with no server dependencies.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-video-editor-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-video-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-video-editor-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-video-editor/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Integrate the Video Editor into your SvelteKit application using the imperative API. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name yarn dlx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the editor configuration to your project: git clone https://github.com/imgly/starterkit-video-editor-ts-web.git cp -r starterkit-video-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-video-editor-ts-web npx degit imgly/starterkit-video-editor-ts-web/src/lib/imgly ./src/lib/imgly The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Step 3: Install Dependencies Install the required packages for the editor: ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/VideoEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Video Editor component in your page route: ```svelte {#if browser && VideoEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Step 1: Navigate to Your Project cd your-project ## Step 2: Clone the Configuration Copy the Video Editor configuration to your project: git clone https://github.com/imgly/starterkit-video-editor-ts-web.git cp -r starterkit-video-editor-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-video-editor-ts-web npx degit imgly/starterkit-video-editor-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your > project structure. ## Step 3: Install Dependencies ### Core Editor Install the Creative Editor SDK: npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Background Removal Add AI-powered background removal: npm install @imgly/background-removal onnxruntime-web pnpm add @imgly/background-removal onnxruntime-web yarn add @imgly/background-removal onnxruntime-web ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip ## Step 5: Create the Editor Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/VideoEditor.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Video Editor component in your page route: ```svelte {#if browser && VideoEditor} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` The `imgly/` folder contains the editor configuration: ``` imgly/ ├── index.ts # Editor initialization function ├── config/ │ ├── plugin.ts # Main configuration plugin │ ├── actions.ts # Export/import actions │ ├── features.ts # Feature toggles │ ├── i18n.ts # Translations │ ├── settings.ts # Engine settings │ └── ui/ # UI customization │ ├── index.ts # Combines UI customization exports │ ├── canvas.ts # Canvas configuration │ ├── components.ts # Custom component registration │ ├── dock.ts # Dock layout configuration │ ├── inspectorBar.ts # Inspector bar layout │ ├── navigationBar.ts # Navigation bar layout │ └── panel.ts # Panel configuration └── plugins/ └── background-removal.ts # Background removal plugin ``` ## Set Up a Scene CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Load from a video URL - creates a new scene with the video await cesdk.createFromVideo('https://example.com/video.mp4'); // Load from a template archive - restores a previously saved project await cesdk.loadFromArchiveURL('https://example.com/template.zip'); // Create a blank video canvas - starts with an empty video scene await cesdk.actions.run('scene.create', { mode: 'Video' }); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); ``` The `createFromVideo()` method is ideal for video editing workflows, as it automatically creates a scene with the video on a timeline. > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading > methods. ## Customize Assets The Video Editor uses asset source plugins to provide built-in libraries for video clips, audio, effects, stickers, and fonts. The starter kit includes a curated selection—customize what's included based on your needs. Asset sources are added via plugins in `src/lib/imgly/index.ts`. Enable or disable individual sources: ```typescript title="src/lib/imgly/index.ts" import { FiltersAssetSource, StickerAssetSource, TextAssetSource, VectorShapeAssetSource, EffectsAssetSource, // ... } from '@cesdk/cesdk-js/plugins'; // Add only the sources you need await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); // ... ``` > **Available Asset Sources:** See [Asset Source Plugins](https://img.ly/docs/cesdk/sveltekit/plugins/asset-sources-a7f3b2/) for the complete list of > available sources. For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times. ## Configure Actions Actions are functions that handle user interactions like exporting videos, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations. **Key built-in actions:** - `exportDesign` – Export the current video to MP4 format - `saveScene` – Save the scene as a JSON string for later editing - `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats) - `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets - `uploadFile` – Handle file uploads with progress tracking Use `cesdk.actions.run()` to execute any action: ```typescript // Run a built-in action await cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' }); ``` Customize actions in `src/lib/imgly/config/actions.ts`: #### Import from File Picker ```typescript title="src/lib/imgly/config/actions.ts" // Let users open videos from their device cesdk.actions.register('importVideo', async () => { const blobURL = await cesdk.utils.loadFile({ accept: 'video/*', returnType: 'objectURL', }); await cesdk.createFromVideo(blobURL); }); ``` #### Export and Save ```typescript title="src/lib/imgly/config/actions.ts" // Register export action that downloads the edited video cesdk.actions.register('exportDesign', async exportOptions => { const { blobs, options } = await cesdk.utils.export(exportOptions); await cesdk.utils.downloadFile(blobs[0], options.mimeType); }); ``` #### Upload to Your Backend ```typescript title="src/lib/imgly/config/actions.ts" // Override the built-in exportDesign action to send to your server cesdk.actions.register('exportDesign', async exportOptions => { const { blobs } = await cesdk.utils.export(exportOptions); const formData = new FormData(); formData.append('video', blobs[0], 'edited-video.mp4'); const response = await fetch('/api/upload', { method: 'POST', body: formData, }); const { url } = await response.json(); console.log('Uploaded to:', url); }); ``` > **Learn More:** See [Actions](https://img.ly/docs/cesdk/sveltekit/actions-6ch24x/) for the full list of built-in actions, > how to run them, and how to register custom actions. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'actions.export.video': 'Download Video', 'common.cancel': 'Cancel', 'common.apply': 'Apply', }, }); // Add a new language cesdk.i18n.setTranslations({ de: { 'actions.export.video': 'Video herunterladen', }, }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. ### UI Layout  Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence. ```typescript title="src/lib/imgly/config/ui/navigationBar.ts" // Get current navigation bar components const navOrder = cesdk.ui.getNavigationBarOrder(); // Add a custom button to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', { id: 'my-custom-action' }, 'after', ); // Rearrange dock items cesdk.ui.setDockOrder([ 'ly.img.assetLibrary.dock', 'ly.img.separator', 'my-custom-dock-item', ]); // Customize the inspector bar cesdk.ui.setInspectorBarOrder([ 'ly.img.fill.inspectorBar', 'ly.img.separator', 'ly.img.filter.inspectorBar', ]); ``` The Order API methods follow a consistent pattern across all UI areas: - `get*Order()` – Retrieve the current component order - `set*Order()` – Replace the entire order - `insert*OrderComponent()` – Add components relative to existing ones See [Dock](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), [Inspector Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/inspector-bar-8ca1cd/), [Navigation Bar](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/navigation-bar-4e5d39/), [Canvas Menu](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-menu-0d2b5b/), and [Canvas](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/canvas-632c8e/) for detailed layout customization options. ### Custom Components Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API. ```typescript title="src/lib/imgly/config/ui/components.ts" // Register a custom component cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => { const selectedBlocks = engine.block.findAllSelected(); builder.Button('apply-effect', { label: 'Apply Effect', isDisabled: selectedBlocks.length === 0, onClick: () => { // Apply custom logic to selected blocks }, }); }); // Add the component to the navigation bar cesdk.ui.insertNavigationBarOrderComponent( 'ly.img.spacer', 'my-custom-button', 'after', ); ``` Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required. See [Register New Component](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions/register-new-component-b04a04/) for the complete builder API and component patterns. ### Settings & Features Fine-tune editor behavior through settings and features. **Settings** configure core engine behavior—rendering, input handling, and history management: ```typescript title="src/lib/imgly/config/settings.ts" cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true); cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true); cesdk.engine.editor.setSettingBool('features/undoHistory', true); ``` **Features** toggle which editing tools and panels appear in the UI: ```typescript title="src/lib/imgly/config/features.ts" // Toggle editor features cesdk.feature.enable('ly.img.trim', true); cesdk.feature.enable('ly.img.filter', true); cesdk.feature.enable('ly.img.adjustment', true); ``` See [Settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) and [Features](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/disable-or-enable-f058e2/) for the complete reference. ### Explore Plugins CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior. #### Background Removal Add AI-powered background removal: The background removal plugin processes images directly in the browser without sending data to external servers. ```typescript title="src/lib/imgly/config/plugin.ts" import BackgroundRemovalPlugin from '@imgly/plugin-background-removal'; // Add background removal capability await cesdk.addPlugin(BackgroundRemovalPlugin()); ``` See [Background Removal](https://img.ly/docs/cesdk/sveltekit/edit-image/remove-bg-9dfcf7/) for setup instructions and configuration options. #### AI Integration Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers. ```typescript title="src/lib/imgly/config/plugin.ts" import AIPlugin from '@imgly/plugin-ai-generation'; // Configure AI generation await cesdk.addPlugin( AIPlugin({ provider: 'your-ai-provider', apiKey: 'your-api-key', }), ); ``` See [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) for provider setup and supported AI features. #### Custom Asset Sources Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source. ```typescript title="src/lib/imgly/config/plugin.ts" import UnsplashAssetSource from '@imgly/plugin-unsplash'; // Add Unsplash integration await cesdk.addPlugin( UnsplashAssetSource({ accessKey: 'your-unsplash-access-key', }), ); ``` See [Custom Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) for integration patterns. #### Discover More Plugins Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include: - **Vectorizer** – Convert raster images to vectors - **Design Presets** – Pre-built design templates - **Social Media Templates** – Platform-specific sizing - **And more** – Check the repository for the latest additions *** ## Key Capabilities The Video Editor includes everything needed for professional video editing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get > a license key and remove the watermark. *** ## Troubleshooting ### Editor doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Assets don't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Export fails or produces blank video - **Wait for content to load**: Ensure videos are fully loaded before exporting - **Check CORS on videos**: Remote videos must allow cross-origin access ### Video export takes too long - **Reduce resolution**: Lower output resolution significantly improves encoding speed - **Shorten clip length**: Longer videos take proportionally longer to encode - **Check system resources**: Video encoding is CPU-intensive; close other applications ### Audio doesn't play - **Check browser autoplay policies**: Browsers require user interaction before playing audio - **Verify audio format**: Ensure audio files are in a supported format (MP3, WAV, AAC) ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Design Viewer for SvelteKit" description: "Add design viewing to your SvelteKit app in minutes. Pan, zoom, and navigate multi-page designs—all client-side." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/starterkits/viewer-zgs556/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) > [Design Viewer](https://img.ly/docs/cesdk/sveltekit/starterkits/viewer-zgs556/) --- Lightweight design viewing for your SvelteKit app—pan, zoom, and navigate multi-page designs. Runs entirely in the browser with no server dependencies.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/starterkit-design-viewer-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/starterkit-design-viewer-ts-web/tree/release-$UBQ_VERSION$) > > - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-design-viewer-ts-web/tree/release-$UBQ_VERSION$) > > - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-design-viewer/) *** ## Prerequisites Before you begin, make sure you have the following: - **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/) - A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
See [Browser Support](https://img.ly/docs/cesdk/sveltekit/browser-support-28c1b0/) for the full list. *** ## Get Started Create a new SvelteKit application with Design Viewer integration. ## Step 1: Create a New Project npx sv create your-project-name cd your-project-name pnpm dlx sv create your-project-name cd your-project-name yarn dlx sv create your-project-name cd your-project-name ## Step 2: Clone the Starter Kit Clone the starter kit and copy the viewer configuration to your project: git clone https://github.com/imgly/starterkit-design-viewer-ts-web.git cp -r starterkit-design-viewer-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-design-viewer-ts-web npx degit imgly/starterkit-design-viewer-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your project structure. ## Step 3: Install Dependencies The Creative Editor SDK package provides all viewing functionality. npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ## Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in the viewer component. ## Step 5: Create the Viewer Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/DesignViewer.svelte`): ```svelte

``` ## Step 6: Use the Component Import and use the Design Viewer component in your page route: ```svelte {#if browser && DesignViewer} {/if} ``` ### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` ## Get Started Integrate the Design Viewer into an existing SvelteKit application. This adds the viewer configuration to your current project structure. ### Step 1: Navigate to Your Project cd your-project ### Step 2: Clone the Starter Kit Clone the starter kit and copy the viewer configuration to your project: git clone https://github.com/imgly/starterkit-design-viewer-ts-web.git cp -r starterkit-design-viewer-ts-web/src/lib/imgly ./src/lib/imgly rm -rf starterkit-design-viewer-ts-web npx degit imgly/starterkit-design-viewer-ts-web/src/lib/imgly ./src/lib/imgly > **Adjust Path:** The default destination is `./src/lib/imgly`. Adjust the path to match your > project structure. ### Step 3: Install Dependencies The Creative Editor SDK package provides all viewing functionality. npm install @cesdk/cesdk-js pnpm add @cesdk/cesdk-js yarn add @cesdk/cesdk-js ### Step 4: Download Assets CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `static/` directory. curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip unzip imgly-assets.zip -d static/ rm imgly-assets.zip > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place > assets in a different location, update the `baseURL` in the viewer component. ### Step 5: Create the Viewer Component Create a Svelte component using the CE.SDK imperative API (e.g., `src/lib/DesignViewer.svelte`): ```svelte

``` ### Step 6: Use the Component Import and use the Design Viewer component in your page route: ```svelte {#if browser && DesignViewer} {/if} ``` #### SSR Error If you encounter the error `window is not defined`, it means CE.SDK is being imported on the server. CE.SDK requires browser APIs and must run client-side only. Use the dynamic import pattern shown above, which defers loading the component until the browser is ready. The `browser` check from `$app/environment` ensures the component only renders client-side. Alternatively, disable SSR for the entire page by adding a `+page.ts` file: ```typescript export const ssr = false; ``` This allows you to use a simpler static import in `+page.svelte`: ```svelte ``` *** ## Set Up a Scene CE.SDK offers multiple ways to load content into the viewer. Choose the method that matches your use case: ```typescript title="src/lib/imgly/index.ts" // Load from a template archive - loads a previously saved project await cesdk.loadFromArchiveURL('https://example.com/design.zip'); // Load from a scene file - restores a scene from JSON await cesdk.loadFromURL('https://example.com/scene.json'); // Zoom to fit the content await cesdk.actions.run('zoom.toPage', { page: 'first', autoFit: true, padding: 24, }); ``` > **More Loading Options:** See [Open the Editor](https://img.ly/docs/cesdk/sveltekit/open-the-editor-23a1db/) for all available loading > methods. *** ## Customize (Optional) ### Theming CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically: ```typescript title="src/lib/imgly/config/settings.ts" // 'light' | 'dark' | 'system' | (() => 'light' | 'dark') cesdk.ui.setTheme('dark'); ``` See [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) for custom color schemes, CSS variables, and advanced styling options. ### Localization Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements: ```typescript title="src/lib/imgly/config/i18n.ts" // Override specific labels cesdk.i18n.setTranslations({ en: { 'common.zoomIn': 'Zoom In', 'common.zoomOut': 'Zoom Out', }, }); // Add a new language cesdk.i18n.setTranslations({ de: { 'common.zoomIn': 'Vergrößern', }, }); // Set the active locale cesdk.i18n.setLocale('de'); ``` See [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) for supported languages, translation key reference, and right-to-left language support. *** ## Key Capabilities The Design Viewer includes everything needed for design viewing.
> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get > a license key and remove the watermark. *** ## Troubleshooting ### Viewer doesn't load - **Check the container element exists**: Ensure your container element is in the DOM before calling `create()` - **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location - **Check console errors**: Look for CORS or network errors in browser developer tools ### Content doesn't appear - **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly` - **Self-host assets for production**: See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) to host assets on your infrastructure ### Watermark appears in production - **Add your license key**: Set the `license` property in your configuration - **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial) *** ## Next Steps - [Configuration](https://img.ly/docs/cesdk/sveltekit/configuration-2c1c3d/) – Complete list of initialization options - [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) – Self-host engine assets for production - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) – Customize colors and appearance - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) – Add translations and language support --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create and Edit Stickers" description: "Create and customize stickers using image fills for icons, logos, emoji, and multi-color graphics." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-3d4e5f/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-3d4e5f/) --- --- ## Related Pages - [Create Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-stickers-cc46e5/) - Create stickers in CE.SDK using image fills for icons, logos, emoji, and multi-color graphics - [Create Cutout](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-cutout-384be3/) - Create cutout paths for cutting printers to produce die-cut stickers, iron-on decals, and custom-shaped prints. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Combine Shapes" description: "Combine multiple shapes using boolean operations to create custom compound designs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/combine-2a9e26/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) > [Combine](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/combine-2a9e26/) --- Combine multiple shapes using boolean operations to create custom compound designs programmatically.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-combine-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-combine-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-combine-browser/) CE.SDK provides four boolean operations for combining shapes: *Union*, *Difference*, *Intersection*, and *XOR*. These operations work with graphic blocks and text blocks, allowing you to build complex designs from simple primitives. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-combine-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import { calculateGridLayout } from './utils'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Calculate responsive grid layout for demonstrations const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const layout = calculateGridLayout(pageWidth, pageHeight, { cols: 2, rows: 2, spacing: 20, margin: 20 }); const { blockWidth, blockHeight, getPosition } = layout; // ===== Demonstration 1: Union Operation ===== // Create three equal circles for union demonstration const circleSize = 120; const unionCircle1 = engine.block.create('graphic'); engine.block.setShape( unionCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const unionFill1 = engine.block.createFill('color'); engine.block.setColor(unionFill1, 'fill/color/value', { r: 1.0, g: 0.4, b: 0.4, a: 1.0 }); engine.block.setFill(unionCircle1, unionFill1); engine.block.setWidth(unionCircle1, circleSize); engine.block.setHeight(unionCircle1, circleSize); engine.block.appendChild(page, unionCircle1); const unionCircle2 = engine.block.create('graphic'); engine.block.setShape( unionCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const unionFill2 = engine.block.createFill('color'); engine.block.setColor(unionFill2, 'fill/color/value', { r: 0.4, g: 1.0, b: 0.4, a: 1.0 }); engine.block.setFill(unionCircle2, unionFill2); engine.block.setWidth(unionCircle2, circleSize); engine.block.setHeight(unionCircle2, circleSize); engine.block.appendChild(page, unionCircle2); const unionCircle3 = engine.block.create('graphic'); engine.block.setShape( unionCircle3, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const unionFill3 = engine.block.createFill('color'); engine.block.setColor(unionFill3, 'fill/color/value', { r: 0.4, g: 0.4, b: 1.0, a: 1.0 }); engine.block.setFill(unionCircle3, unionFill3); engine.block.setWidth(unionCircle3, circleSize); engine.block.setHeight(unionCircle3, circleSize); engine.block.appendChild(page, unionCircle3); // ===== Demonstration 2: Difference Operation ===== // Create image block for punch-out effect const imageBlock = engine.block.create('graphic'); engine.block.setShape( imageBlock, engine.block.createShape('//ly.img.ubq/shape/rect') ); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(imageBlock, imageFill); engine.block.setWidth(imageBlock, blockWidth * 0.9); engine.block.setHeight(imageBlock, blockHeight * 0.9); engine.block.appendChild(page, imageBlock); // Create text block for punch-out const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'CUTOUT'); engine.block.setFloat(textBlock, 'text/fontSize', 120); engine.block.setWidth(textBlock, blockWidth * 0.9); engine.block.appendChild(page, textBlock); // ===== Demonstration 3: Intersection Operation ===== // Create two overlapping circles for intersection (20% larger) const intersectCircleSize = circleSize * 1.2; const intersectCircle1 = engine.block.create('graphic'); engine.block.setShape( intersectCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const intersectFill1 = engine.block.createFill('color'); engine.block.setColor(intersectFill1, 'fill/color/value', { r: 1.0, g: 0.6, b: 0.2, a: 1.0 }); engine.block.setFill(intersectCircle1, intersectFill1); engine.block.setWidth(intersectCircle1, intersectCircleSize); engine.block.setHeight(intersectCircle1, intersectCircleSize); engine.block.appendChild(page, intersectCircle1); const intersectCircle2 = engine.block.create('graphic'); engine.block.setShape( intersectCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const intersectFill2 = engine.block.createFill('color'); engine.block.setColor(intersectFill2, 'fill/color/value', { r: 1.0, g: 0.6, b: 0.2, a: 1.0 }); engine.block.setFill(intersectCircle2, intersectFill2); engine.block.setWidth(intersectCircle2, intersectCircleSize); engine.block.setHeight(intersectCircle2, intersectCircleSize); engine.block.appendChild(page, intersectCircle2); // ===== Demonstration 4: XOR Operation ===== // Create two overlapping circles for XOR const xorCircle1 = engine.block.create('graphic'); engine.block.setShape( xorCircle1, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const xorFill1 = engine.block.createFill('color'); engine.block.setColor(xorFill1, 'fill/color/value', { r: 1.0, g: 0.8, b: 0.2, a: 1.0 }); engine.block.setFill(xorCircle1, xorFill1); engine.block.setWidth(xorCircle1, 140); engine.block.setHeight(xorCircle1, 140); engine.block.appendChild(page, xorCircle1); const xorCircle2 = engine.block.create('graphic'); engine.block.setShape( xorCircle2, engine.block.createShape('//ly.img.ubq/shape/ellipse') ); const xorFill2 = engine.block.createFill('color'); engine.block.setColor(xorFill2, 'fill/color/value', { r: 0.2, g: 0.8, b: 1.0, a: 1.0 }); engine.block.setFill(xorCircle2, xorFill2); engine.block.setWidth(xorCircle2, 140); engine.block.setHeight(xorCircle2, 140); engine.block.appendChild(page, xorCircle2); // Position all blocks in grid layout before combining // Position union circles at vertices of equilateral triangle in top-left quadrant const unionPos = getPosition(0); const unionCenterX = unionPos.x + blockWidth / 2; const unionCenterY = unionPos.y + blockHeight / 2; const triangleRadius = 55; // Distance from center to each vertex const halfCircle = circleSize / 2; // Top vertex engine.block.setPositionX(unionCircle1, unionCenterX - halfCircle); engine.block.setPositionY( unionCircle1, unionCenterY - triangleRadius - halfCircle ); // Bottom-right vertex (angle -30°) engine.block.setPositionX( unionCircle2, unionCenterX + triangleRadius * 0.866 - halfCircle ); engine.block.setPositionY( unionCircle2, unionCenterY + triangleRadius * 0.5 - halfCircle ); // Bottom-left vertex (angle 210°) engine.block.setPositionX( unionCircle3, unionCenterX - triangleRadius * 0.866 - halfCircle ); engine.block.setPositionY( unionCircle3, unionCenterY + triangleRadius * 0.5 - halfCircle ); // Center image in top-right quadrant, then center text on image const diffPos = getPosition(1); const imageX = diffPos.x + (blockWidth - engine.block.getWidth(imageBlock)) / 2; const imageY = diffPos.y + (blockHeight - engine.block.getHeight(imageBlock)) / 2; engine.block.setPositionX(imageBlock, imageX); engine.block.setPositionY(imageBlock, imageY); // Center text on the image block (not the quadrant) const textX = imageX + (engine.block.getWidth(imageBlock) - engine.block.getWidth(textBlock)) / 2; const textY = imageY + (engine.block.getHeight(imageBlock) - engine.block.getHeight(textBlock)) / 2; engine.block.setPositionX(textBlock, textX); engine.block.setPositionY(textBlock, textY); // Center intersection circles in bottom-left quadrant with vertical overlap const intersectPos = getPosition(2); const intersectCenterX = intersectPos.x + blockWidth / 2; const intersectCenterY = intersectPos.y + blockHeight / 2; const halfIntersectCircle = intersectCircleSize / 2; // Position circles to overlap vertically by about 50% (72px offset for 144px circles) engine.block.setPositionX( intersectCircle1, intersectCenterX - halfIntersectCircle ); engine.block.setPositionY( intersectCircle1, intersectCenterY - halfIntersectCircle - 36 ); engine.block.setPositionX( intersectCircle2, intersectCenterX - halfIntersectCircle ); engine.block.setPositionY( intersectCircle2, intersectCenterY - halfIntersectCircle + 36 ); // Center XOR circles in bottom-right quadrant const xorPos = getPosition(3); const xorCenterX = xorPos.x + blockWidth / 2; const xorCenterY = xorPos.y + blockHeight / 2; engine.block.setPositionX(xorCircle1, xorCenterX - 70); engine.block.setPositionY(xorCircle1, xorCenterY - 70); engine.block.setPositionX(xorCircle2, xorCenterX - 14); engine.block.setPositionY(xorCircle2, xorCenterY - 42); // Perform boolean operations // Check if blocks can be combined before attempting operations const canCombineUnion = engine.block.isCombinable([ unionCircle1, unionCircle2, unionCircle3 ]); const canCombineDiff = engine.block.isCombinable([imageBlock, textBlock]); const canCombineIntersect = engine.block.isCombinable([ intersectCircle1, intersectCircle2 ]); const canCombineXor = engine.block.isCombinable([xorCircle1, xorCircle2]); // Combine three circles using Union operation if (canCombineUnion) { engine.block.combine([unionCircle1, unionCircle2, unionCircle3], 'Union'); } // Create punch-out effect using Difference operation // Ensure image is at the bottom (will be the base block) if (canCombineDiff) { engine.block.sendToBack(imageBlock); engine.block.combine([imageBlock, textBlock], 'Difference'); } // Extract overlapping area using Intersection operation if (canCombineIntersect) { engine.block.combine( [intersectCircle1, intersectCircle2], 'Intersection' ); } // Create exclusion pattern using XOR operation if (canCombineXor) { engine.block.combine([xorCircle1, xorCircle2], 'XOR'); } // Zoom to fit all demonstrations await engine.scene.zoomToBlock(page, { padding: 40 }); } } export default Example; ``` This guide covers checking combinability, applying the four boolean operations, understanding fill inheritance, and troubleshooting common combination issues. ## Understanding Boolean Operations CE.SDK offers four boolean operations for combining blocks into new shapes. Each operation applies geometric transformations to create unique compound designs. **Union** merges all blocks into a single shape, adding their areas together. **Difference** subtracts overlapping areas from a base block, creating cutouts. **Intersection** keeps only the overlapping regions. **XOR** removes overlaps while preserving non-overlapping parts. The operations use `engine.block.combine(ids, operation)` where `ids` is an array of blocks and `operation` is one of: `'Union'`, `'Difference'`, `'Intersection'`, or `'XOR'`. Combining blocks with the `'Union'`, `'Intersection'`, or `'XOR'` operation results in a new block whose fill is that of the top-most block. The operation is applied pair-wise from the top-most block to the bottom-most block. Combining blocks with the `'Difference'` operation results in a new block whose fill is that of the bottom-most block. The operation is applied pair-wise from the bottom-most block to the top-most block. The combined blocks will be destroyed if the `'lifecycle/destroy'` scope is enabled. > **Note:** **Only the following blocks can be combined*** A graphics block > * A text block ## Checking Combinability Before combining blocks, verify they can be combined using `engine.block.isCombinable(ids)`. Only graphic blocks and text blocks with the `'lifecycle/duplicate'` scope enabled can be combined. ```typescript highlight-check-combinability // Check if blocks can be combined before attempting operations const canCombineUnion = engine.block.isCombinable([ unionCircle1, unionCircle2, unionCircle3 ]); const canCombineDiff = engine.block.isCombinable([imageBlock, textBlock]); const canCombineIntersect = engine.block.isCombinable([ intersectCircle1, intersectCircle2 ]); const canCombineXor = engine.block.isCombinable([xorCircle1, xorCircle2]); ``` The check returns `true` if all blocks meet the requirements. Attempting to combine incompatible blocks will fail. ## Combining with Union Union merges multiple shapes into one compound outline. The result inherits the fill from the top-most block in the z-order. ```typescript highlight-combine-union // Combine three circles using Union operation if (canCombineUnion) { engine.block.combine([unionCircle1, unionCircle2, unionCircle3], 'Union'); } ``` We create three circles with different colors. Union combines them into a single block with the blue fill (from the top-most circle). Use Union for merging logos, creating compound icons, and building complex shapes from simple primitives. ## Combining with Difference Difference subtracts overlapping shapes from a base block, creating cutout effects. The result inherits the fill from the bottom-most block. ```typescript highlight-combine-difference // Create punch-out effect using Difference operation // Ensure image is at the bottom (will be the base block) if (canCombineDiff) { engine.block.sendToBack(imageBlock); engine.block.combine([imageBlock, textBlock], 'Difference'); } ``` We position an image as the bottom block and text above it. Difference removes the text shape from the image, creating a punch-out effect where the text was. Use Difference for text punch-outs, logo cutouts, and mask effects. Ensure the base block is at the bottom using `engine.block.sendToBack()`. ## Combining with Intersection Intersection keeps only the overlapping areas of all blocks. The result inherits the fill from the bottom-most block. ```typescript highlight-combine-intersection // Extract overlapping area using Intersection operation if (canCombineIntersect) { engine.block.combine( [intersectCircle1, intersectCircle2], 'Intersection' ); } ``` We create two overlapping circles. Intersection extracts only the area where they overlap, discarding the rest. Use Intersection for lens effects, overlapping patterns, and extracting geometric intersections. ## Combining with XOR XOR (exclusive OR) keeps non-overlapping parts while removing intersections, creating an exclusion or donut effect. The result inherits the fill from the top-most block. ```typescript highlight-combine-xor // Create exclusion pattern using XOR operation if (canCombineXor) { engine.block.combine([xorCircle1, xorCircle2], 'XOR'); } ``` We create two overlapping circles. XOR removes the overlapping area while preserving the non-overlapping parts. Use XOR for donut shapes, exclusion patterns, and inverted overlaps. ## Understanding Fill Inheritance Combined blocks inherit properties from a prioritized block based on the operation. **Union, Intersection, XOR**: The new block inherits the fill from the top-most block. Operations are applied pair-wise from highest to lowest sort order. **Difference**: The new block inherits the fill from the bottom-most block. Operations are applied pair-wise from lowest to highest sort order. Original blocks are destroyed after combination if the `'lifecycle/destroy'` scope is enabled. Control which fill is inherited by reordering blocks with `engine.block.bringToFront()` and `engine.block.sendToBack()`. ## Scope Requirements Combining blocks requires specific scopes: **`'lifecycle/duplicate'`**: Required on all blocks. Checked by `engine.block.isCombinable()`. If missing, combination fails. **`'lifecycle/destroy'`**: Required for destroying original blocks. If disabled, original blocks remain after combination. Check scopes with `engine.block.isScopeEnabled(id, scope)` and enable with `engine.block.setScopeEnabled(id, scope, true)`. ## Troubleshooting ### Combination Fails Silently Verify blocks are combinable using `engine.block.isCombinable(ids)` before attempting operations. Only graphic blocks and text blocks can be combined. Check that the `'lifecycle/duplicate'` scope is enabled on all blocks. ### Original Blocks Not Destroyed Ensure the `'lifecycle/destroy'` scope is enabled on input blocks. If disabled, blocks remain after combination. Check with `engine.block.isScopeEnabled(id, 'lifecycle/destroy')`. ### Wrong Fill on Result For Union/Intersection/XOR, the top-most block's fill is inherited. For Difference, the bottom-most block's fill is inherited. Reorder blocks before combining using `engine.block.bringToFront()` or `engine.block.sendToBack()`. ### Unexpected Shape Result Boolean operations are applied pair-wise in specific order. Union/Intersection/XOR start with the highest sort order (top-most). Difference starts with the lowest sort order (bottom-most). Control order with z-order methods. ## Full Code Here's the complete implementation showing all four boolean operations: ```typescript import CreativeEditorSDK from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource, } from '@cesdk/cesdk-js/plugins'; const config = { license: 'YOUR_CESDK_LICENSE_KEY', callbacks: { onUpload: 'local' } }; const cesdk = await CreativeEditorSDK.create('#cesdk_container', config); // Add default asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Add demo and upload sources await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.actions.run('scene.create'); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; engine.block.setWidth(page, 800); engine.block.setHeight(page, 600); const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const quadrantWidth = pageWidth / 2; const quadrantHeight = pageHeight / 2; // Union: Combine three circles in top-left quadrant (20% larger, centered) const circle1 = engine.block.create('graphic'); engine.block.setShape(circle1, engine.block.createShape('//ly.img.ubq/shape/ellipse')); const fill1 = engine.block.createFill('color'); engine.block.setColor(fill1, 'fill/color/value', { r: 1.0, g: 0.4, b: 0.4, a: 1.0 }); engine.block.setFill(circle1, fill1); engine.block.setWidth(circle1, 96); // 80 * 1.2 = 96 engine.block.setHeight(circle1, 96); engine.block.setPositionX(circle1, quadrantWidth / 2 - 48); engine.block.setPositionY(circle1, quadrantHeight / 2 - 48); engine.block.appendChild(page, circle1); const circle2 = engine.block.create('graphic'); engine.block.setShape(circle2, engine.block.createShape('//ly.img.ubq/shape/ellipse')); const fill2 = engine.block.createFill('color'); engine.block.setColor(fill2, 'fill/color/value', { r: 0.4, g: 1.0, b: 0.4, a: 1.0 }); engine.block.setFill(circle2, fill2); engine.block.setWidth(circle2, 96); // 80 * 1.2 = 96 engine.block.setHeight(circle2, 96); engine.block.setPositionX(circle2, quadrantWidth / 2 + 24); engine.block.setPositionY(circle2, quadrantHeight / 2 - 48); engine.block.appendChild(page, circle2); const circle3 = engine.block.create('graphic'); engine.block.setShape(circle3, engine.block.createShape('//ly.img.ubq/shape/ellipse')); const fill3 = engine.block.createFill('color'); engine.block.setColor(fill3, 'fill/color/value', { r: 0.4, g: 0.4, b: 1.0, a: 1.0 }); engine.block.setFill(circle3, fill3); engine.block.setWidth(circle3, 120); // 100 * 1.2 = 120 engine.block.setHeight(circle3, 120); engine.block.setPositionX(circle3, quadrantWidth / 2 - 12); engine.block.setPositionY(circle3, quadrantHeight / 2 - 12); engine.block.appendChild(page, circle3); // Check combinability and perform Union if (engine.block.isCombinable([circle1, circle2, circle3])) { const unionResult = engine.block.combine([circle1, circle2, circle3], 'Union'); } // Difference: Create punch-out text effect in top-right quadrant const imageWidth = 360; // 300 * 1.2 = 360 const imageHeight = 240; // 200 * 1.2 = 240 const imageBlock = engine.block.create('graphic'); engine.block.setShape(imageBlock, engine.block.createShape('//ly.img.ubq/shape/rect')); const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg'); engine.block.setFill(imageBlock, imageFill); engine.block.setWidth(imageBlock, imageWidth); engine.block.setHeight(imageBlock, imageHeight); engine.block.setPositionX(imageBlock, quadrantWidth + (quadrantWidth - imageWidth) / 2); engine.block.setPositionY(imageBlock, (quadrantHeight - imageHeight) / 2); engine.block.appendChild(page, imageBlock); const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'CUTOUT'); engine.block.setFloat(textBlock, 'text/fontSize', 170); const textWidth = 300; const textHeight = 120; engine.block.setWidth(textBlock, textWidth); engine.block.setHeight(textBlock, textHeight); // Center text on the image engine.block.setPositionX(textBlock, quadrantWidth + (quadrantWidth - textWidth) / 2); engine.block.setPositionY(textBlock, (quadrantHeight - textHeight) / 2); engine.block.appendChild(page, textBlock); // Ensure image is at bottom for Difference operation engine.block.sendToBack(imageBlock); if (engine.block.isCombinable([imageBlock, textBlock])) { const differenceResult = engine.block.combine([imageBlock, textBlock], 'Difference'); } // Zoom to see all results await engine.scene.zoomToBlock(page, { padding: 40 }); ``` ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `engine.block.isCombinable(ids)` | Validation | Check if blocks can be combined | | `engine.block.combine(ids, op)` | Combination | Perform boolean operation on blocks | | `engine.block.create('graphic')` | Creation | Create graphic block for shapes | | `engine.block.create('text')` | Creation | Create text block | | `engine.block.createShape(type)` | Shapes | Create shape (ellipse, rect, etc.) | | `engine.block.setShape(id, shape)` | Shapes | Apply shape to graphic block | | `engine.block.createFill(type)` | Fills | Create fill (color, image, etc.) | | `engine.block.setFill(id, fill)` | Fills | Apply fill to block | | `engine.block.setPositionX/Y(id, val)` | Transform | Position blocks before combining | | `engine.block.setWidth/Height(id, val)` | Transform | Size blocks before combining | | `engine.block.appendChild(parent, child)` | Hierarchy | Add blocks to scene | | `engine.block.isScopeEnabled(id, scope)` | Scope | Check if scope is enabled | | `engine.block.setScopeEnabled(id, scope, enabled)` | Scope | Enable/disable scope | | `engine.block.bringToFront(id)` | Order | Control stacking order | | `engine.block.sendToBack(id)` | Order | Control stacking order | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Cutout" description: "Create cutout paths for cutting printers to produce die-cut stickers, iron-on decals, and custom-shaped prints." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-cutout-384be3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-3d4e5f/) > [Create Cutout](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-cutout-384be3/) --- Create cutout paths for cutting printers to produce die-cut stickers, iron-on decals, and custom-shaped prints programmatically.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-create-cutout-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-create-cutout-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-create-cutout-browser/) Cutouts define outline paths that cutting printers cut with a blade rather than print with ink. CE.SDK supports creating cutouts from SVG paths, generating them from block contours, and combining them with boolean operations. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-create-cutout-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import CutoutLibraryPlugin from '@imgly/plugin-cutout-library-web'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Load assets and create scene await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Add cutout library plugin for UI-based cutout creation await cesdk.addPlugin( CutoutLibraryPlugin({ ui: { locations: ['canvasMenu'] } }) ); // Add cutout library to dock as the last entry const cutoutAssetEntry = cesdk.ui.getAssetLibraryEntry( 'ly.img.cutout.entry' ); cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui .getComponentOrder({ in: 'ly.img.dock' }) .filter(({ key }) => key !== 'ly.img.templates'), { id: 'ly.img.assetLibrary.dock', label: 'Cutouts', key: 'ly.img.assetLibrary.dock', icon: cutoutAssetEntry?.icon, entries: ['ly.img.cutout.entry'] } ]); // Open cutout library panel on startup cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.cutout.entry'] } }); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a circular cutout from SVG path (scaled up for visibility) const circle = engine.block.createCutoutFromPath( 'M 0,75 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0 Z' ); engine.block.appendChild(page, circle); engine.block.setPositionX(circle, 200); engine.block.setPositionY(circle, 225); // Set cutout type to Dashed for perforated cut line engine.block.setEnum(circle, 'cutout/type', 'Dashed'); // Set cutout offset distance from source path engine.block.setFloat(circle, 'cutout/offset', 5.0); // Create a square cutout with solid type (scaled up for visibility) const square = engine.block.createCutoutFromPath('M 0,0 H 150 V 150 H 0 Z'); engine.block.appendChild(page, square); engine.block.setPositionX(square, 450); engine.block.setPositionY(square, 225); engine.block.setFloat(square, 'cutout/offset', 8.0); // Combine cutouts using Union operation const combined = engine.block.createCutoutFromOperation( [circle, square], 'Union' ); engine.block.appendChild(page, combined); engine.block.setPositionX(combined, 200); engine.block.setPositionY(combined, 225); // Destroy original cutouts to avoid duplicate cuts engine.block.destroy(circle); engine.block.destroy(square); // Customize spot color RGB for rendering (bright blue for visibility) engine.editor.setSpotColorRGB('CutContour', 0.0, 0.4, 0.9); // Zoom to fit all cutouts await engine.scene.zoomToBlock(page, { padding: 40 }); } } export default Example; ``` This guide covers creating cutouts programmatically from SVG paths, configuring cutout types and offsets, combining cutouts with boolean operations, customizing spot colors for printer compatibility, and integrating the cutout library plugin for interactive creation. ## Understanding Cutouts Cutouts are special blocks that contain SVG paths interpreted by cutting printers as cut lines. Printers recognize cutouts through specially named spot colors: `CutContour` for solid continuous cuts and `PerfCutContour` for dashed perforated cuts. The spot color RGB values affect on-screen rendering but not printer behavior. By default, solid cutouts render as magenta and dashed cutouts render as green. > **Note:** Cutouts export to PDF format with spot color information preserved. Cutting > printers read the spot colors to identify cut paths. ## Creating Cutouts from SVG Paths Create cutouts using `engine.block.createCutoutFromPath(path)` with standard SVG path syntax. The path coordinates define the cutout dimensions. ```typescript highlight-create-cutout-from-path // Create a circular cutout from SVG path (scaled up for visibility) const circle = engine.block.createCutoutFromPath( 'M 0,75 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0 Z' ); engine.block.appendChild(page, circle); engine.block.setPositionX(circle, 200); engine.block.setPositionY(circle, 225); ``` The method accepts standard SVG path commands: `M` (move), `L` (line), `H` (horizontal), `V` (vertical), `C` (cubic curve), `Q` (quadratic curve), `A` (arc), and `Z` (close path). ## Configuring Cutout Type Set the cutout type using `engine.block.setEnum()` to control whether the printer creates a continuous or perforated cut line. ```typescript highlight-configure-cutout-type // Set cutout type to Dashed for perforated cut line engine.block.setEnum(circle, 'cutout/type', 'Dashed'); ``` `Solid` creates a continuous cutting line (default), while `Dashed` creates a perforated cutting line for tear-away edges. ## Configuring Cutout Offset Adjust the distance between the cutout line and the source path using `engine.block.setFloat()`. ```typescript highlight-configure-cutout-offset // Set cutout offset distance from source path engine.block.setFloat(circle, 'cutout/offset', 5.0); ``` Positive offset values expand the cutout outward from the path. Use offset to add bleed or margin around designs for cleaner cuts. ## Creating Multiple Cutouts Create additional cutouts with different properties to demonstrate various shapes and configurations. ```typescript highlight-create-square-cutout // Create a square cutout with solid type (scaled up for visibility) const square = engine.block.createCutoutFromPath('M 0,0 H 150 V 150 H 0 Z'); engine.block.appendChild(page, square); engine.block.setPositionX(square, 450); engine.block.setPositionY(square, 225); engine.block.setFloat(square, 'cutout/offset', 8.0); ``` Each cutout can have independent type and offset settings based on your production requirements. ## Combining Cutouts with Boolean Operations Combine multiple cutouts into compound shapes using `engine.block.createCutoutFromOperation(ids, operation)`. Available operations are `Union`, `Difference`, `Intersection`, and `XOR`. ```typescript highlight-combine-cutouts // Combine cutouts using Union operation const combined = engine.block.createCutoutFromOperation( [circle, square], 'Union' ); engine.block.appendChild(page, combined); engine.block.setPositionX(combined, 200); engine.block.setPositionY(combined, 225); // Destroy original cutouts to avoid duplicate cuts engine.block.destroy(circle); engine.block.destroy(square); ``` The combined cutout inherits the type from the first cutout in the array and has an offset of 0. Destroy the original cutouts after combining to avoid duplicate cuts. > **Note:** When using `Difference`, the first cutout is the base that others subtract > from. For other operations, the order affects which cutout's type is > inherited. ## Customizing Spot Colors Modify the spot color RGB approximation using `engine.editor.setSpotColorRGB()` to change how cutouts render without affecting printer behavior. ```typescript highlight-customize-spot-color // Customize spot color RGB for rendering (bright blue for visibility) engine.editor.setSpotColorRGB('CutContour', 0.0, 0.4, 0.9); ``` Spot color names (`CutContour`, `PerfCutContour`) are what printers recognize. Adjust the names if your printer uses different conventions. ## Using the Cutout Library Plugin The `@imgly/plugin-cutout-library-web` plugin provides an interactive UI for creating cutouts directly in the editor. Users can add rectangular or elliptical cutouts from the asset library dock, or generate cutouts from selected shapes via the canvas menu. Install the plugin: `bash npm install @imgly/plugin-cutout-library-web ` `bash yarn add @imgly/plugin-cutout-library-web ` `bash pnpm add @imgly/plugin-cutout-library-web ` Import and register the plugin: ```typescript highlight-plugin-import ``` Add the plugin to your editor instance with canvas menu support: ```typescript highlight-plugin-add // Add cutout library plugin for UI-based cutout creation await cesdk.addPlugin( CutoutLibraryPlugin({ ui: { locations: ['canvasMenu'] } }) ); ``` Configure the dock to display the cutout library and open it by default: ```typescript highlight-dock-config // Add cutout library to dock as the last entry const cutoutAssetEntry = cesdk.ui.getAssetLibraryEntry( 'ly.img.cutout.entry' ); cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui .getComponentOrder({ in: 'ly.img.dock' }) .filter(({ key }) => key !== 'ly.img.templates'), { id: 'ly.img.assetLibrary.dock', label: 'Cutouts', key: 'ly.img.assetLibrary.dock', icon: cutoutAssetEntry?.icon, entries: ['ly.img.cutout.entry'] } ]); // Open cutout library panel on startup cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['ly.img.cutout.entry'] } }); ``` The `setComponentOrder` method adds a "Cutouts" entry to the dock panel with the plugin's icon. The `openPanel` call displays the cutout library immediately when the editor loads, giving users instant access to cutout creation tools. > **Note:** The plugin provides three cutout options: generate from selection (creates > cutout from selected blocks), rectangle, and circle. The canvas menu button > appears when blocks are selected for quick cutout generation. ## Troubleshooting ### Cutout Not Visible Cutouts render using spot color RGB approximations. Verify the cutout is appended to the page hierarchy and positioned within the visible canvas area. ### Printer Not Cutting Check that spot color names match your printer's requirements. Some printers need specific names like `CutContour` or `Thru-cut`. Consult your printer documentation. ### Combined Cutout Has Wrong Type Combined cutouts inherit the type from the first cutout in the array. Reorder the array or set the type explicitly after combination. ## API Reference | Method | Category | Purpose | | ---------------------------------------------------------------------- | --------- | -------------------------------------- | | `cesdk.addPlugin(CutoutLibraryPlugin(config))` | Plugin | Register cutout library plugin | | `cesdk.ui.getAssetLibraryEntry(id)` | UI | Get asset library entry for dock | | `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, entries)` | UI | Configure dock panel order | | `cesdk.ui.openPanel(id, options)` | UI | Open panel programmatically | | `engine.block.createCutoutFromPath(path)` | Cutout | Create cutout from SVG path string | | `engine.block.createCutoutFromBlocks(ids, vThresh, sThresh, useShape)` | Cutout | Create cutout from block contours | | `engine.block.createCutoutFromOperation(ids, op)` | Cutout | Combine cutouts with boolean operation | | `engine.block.setEnum(id, 'cutout/type', value)` | Property | Set cutout type (Solid/Dashed) | | `engine.block.setFloat(id, 'cutout/offset', value)` | Property | Set cutout offset distance | | `engine.block.setFloat(id, 'cutout/smoothing', value)` | Property | Set corner smoothing threshold | | `engine.block.appendChild(parent, child)` | Hierarchy | Add cutout to scene | | `engine.block.setPositionX/Y(id, value)` | Transform | Position cutout on canvas | | `engine.block.destroy(id)` | Lifecycle | Remove cutout from scene | | `engine.editor.setSpotColorRGB(name, r, g, b)` | Editor | Customize spot color rendering | ## Next Steps - **[Combine Shapes](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/combine-2a9e26/)** - Boolean operations on graphic blocks - **[Create Shapes](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-shapes-64acc0/)** - Create geometric shapes programmatically - **[Export for Printing](https://img.ly/docs/cesdk/sveltekit/export-save-publish/for-printing-bca896/)** - Export print-ready PDFs with spot colors ## Cutout Type A block that defines a cutout path for another block. This section describes the properties available for the **Cutout Type** (`//ly.img.ubq/cutout`) block type. | Property | Type | Default | Description | | --------------------------------- | -------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element's global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `true` | If true, this element's global sorting order is automatically adjusted to be higher than all other siblings. | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Crop, Cover, Contain)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `cutout/offset` | `Float` | `0` | The offset from path at which to draw the cutout line. | | `cutout/path` | `String` | `""` | The path string, accepts a subset of SVG path strings. | | `cutout/smoothing` | `Float` | `0` | Pixel threshold by which to round out the path's corners. | | `cutout/type` | `Enum` | `"Solid"` | The type of cutout line., Possible values: `"Solid"`, `"Dashed"` | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `height` | `Float` | `100` | The height of the block's frame. | | `height/mode` | `Enum` | `"Absolute"` | A mode describing how the height dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/width` | `Float` | `"-"` | The width of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `placeholderControls/showButton` | `Bool` | `false` | Show the placeholder button. | | `placeholderControls/showOverlay` | `Bool` | `false` | Show the overlay pattern. | | `position/x` | `Float` | `0` | The x-coordinate of the block's origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block's origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in radians. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can't be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `100` | The width of the block's frame. | | `width/mode` | `Enum` | `"Absolute"` | A mode describing how the width dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Shapes" description: "Learn how to programmatically create and configure shapes in CE.SDK for browser applications." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-shapes-64acc0/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) > [Create Shapes](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-shapes-64acc0/) --- Create and configure geometric shapes programmatically using the Engine API—rectangles, ellipses, stars, polygons, lines, and custom vector paths combined with fills.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-create-shapes-browser/) ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-create-shapes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 300, height: 200, unit: 'Pixel' }, }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const testGraphic = engine.block.create('graphic'); engine.block.supportsShape(testGraphic); // Returns true const testText = engine.block.create('text'); engine.block.supportsShape(testText); // Returns false engine.block.destroy(testText); engine.block.destroy(testGraphic); const rectGraphic = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(rectGraphic, rectShape); const redFill = engine.block.createFill('color'); engine.block.setColor(redFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0, }); engine.block.setFill(rectGraphic, redFill); engine.block.setWidth(rectGraphic, 64); engine.block.setHeight(rectGraphic, 64); engine.block.appendChild(page, rectGraphic); engine.block.setPositionX(rectGraphic, 10); engine.block.setPositionY(rectGraphic, 10); const ellipseGraphic = engine.block.create('graphic'); const ellipseShape = engine.block.createShape('ellipse'); engine.block.setShape(ellipseGraphic, ellipseShape); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.6, b: 0.9, a: 1.0 }, stop: 0.0 }, { color: { r: 0.9, g: 0.3, b: 0.6, a: 1.0 }, stop: 1.0 }, ]); engine.block.setFill(ellipseGraphic, gradientFill); engine.block.setWidth(ellipseGraphic, 64); engine.block.setHeight(ellipseGraphic, 64); engine.block.appendChild(page, ellipseGraphic); engine.block.setPositionX(ellipseGraphic, 82); engine.block.setPositionY(ellipseGraphic, 10); // Discover what properties are available on a shape const exampleStarShape = engine.block.createShape('star'); engine.block.findAllProperties(exampleStarShape); // Returns: ['shape/star/points', 'shape/star/innerDiameter', 'type', ...] engine.block.destroy(exampleStarShape); const starGraphic = engine.block.create('graphic'); const starShape = engine.block.createShape('star'); engine.block.setShape(starGraphic, starShape); engine.block.setInt(starShape, 'shape/star/points', 5); engine.block.setFloat(starShape, 'shape/star/innerDiameter', 0.5); const yellowFill = engine.block.createFill('color'); engine.block.setColor(yellowFill, 'fill/color/value', { r: 1.0, g: 0.8, b: 0.0, a: 1.0, }); engine.block.setFill(starGraphic, yellowFill); engine.block.setWidth(starGraphic, 64); engine.block.setHeight(starGraphic, 64); engine.block.appendChild(page, starGraphic); engine.block.setPositionX(starGraphic, 154); engine.block.setPositionY(starGraphic, 10); const polygonGraphic = engine.block.create('graphic'); const polygonShape = engine.block.createShape('polygon'); engine.block.setShape(polygonGraphic, polygonShape); engine.block.setInt(polygonShape, 'shape/polygon/sides', 8); const greenFill = engine.block.createFill('color'); engine.block.setColor(greenFill, 'fill/color/value', { r: 0.2, g: 0.8, b: 0.3, a: 1.0, }); engine.block.setFill(polygonGraphic, greenFill); engine.block.setWidth(polygonGraphic, 64); engine.block.setHeight(polygonGraphic, 64); engine.block.appendChild(page, polygonGraphic); engine.block.setPositionX(polygonGraphic, 226); engine.block.setPositionY(polygonGraphic, 10); const lineGraphic = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(lineGraphic, lineShape); const purpleFill = engine.block.createFill('color'); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.9, a: 1.0, }); engine.block.setFill(lineGraphic, purpleFill); engine.block.setWidth(lineGraphic, 64); engine.block.setHeight(lineGraphic, 10); engine.block.appendChild(page, lineGraphic); engine.block.setPositionX(lineGraphic, 10); engine.block.setPositionY(lineGraphic, 109); const vectorPathGraphic = engine.block.create('graphic'); const vectorPathShape = engine.block.createShape('vector_path'); engine.block.setShape(vectorPathGraphic, vectorPathShape); engine.block.setString( vectorPathShape, 'shape/vector_path/path', 'M 0,0 L 100,50 L 0,100 Z', ); const orangeFill = engine.block.createFill('color'); engine.block.setColor(orangeFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0, }); engine.block.setFill(vectorPathGraphic, orangeFill); engine.block.setWidth(vectorPathGraphic, 64); engine.block.setHeight(vectorPathGraphic, 64); engine.block.appendChild(page, vectorPathGraphic); engine.block.setPositionX(vectorPathGraphic, 82); engine.block.setPositionY(vectorPathGraphic, 82); const roundedRectGraphic = engine.block.create('graphic'); const roundedRectShape = engine.block.createShape('rect'); engine.block.setShape(roundedRectGraphic, roundedRectShape); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusTL', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusTR', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusBL', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusBR', 5.0); const cyanFill = engine.block.createFill('color'); engine.block.setColor(cyanFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.8, a: 1.0, }); engine.block.setFill(roundedRectGraphic, cyanFill); engine.block.setWidth(roundedRectGraphic, 64); engine.block.setHeight(roundedRectGraphic, 64); engine.block.appendChild(page, roundedRectGraphic); engine.block.setPositionX(roundedRectGraphic, 154); engine.block.setPositionY(roundedRectGraphic, 82); } } export default Example; ``` ## Understanding Shapes and Graphic Blocks ### What Are Shapes? Shapes in CE.SDK are geometric definitions—rectangles, ellipses, stars, and other forms—that exist as independent objects until attached to graphic blocks. We create shapes using type identifiers like `'rect'` or `'ellipse'`, and they define the geometry while remaining invisible until combined with fills. Shapes and fills are independent. Change a shape from a rectangle to a star while keeping the same fill, or change a fill from red to blue while maintaining the rectangular shape. ### The Graphic Block System Graphic blocks serve as containers that bring shapes and fills together. When we create a graphic block, it starts empty—no shape, no fill, and therefore invisible. We then apply both a shape and a fill to make it appear on the canvas. Here's what a graphic block can hold: - **Shape**: The geometric form (rectangle, ellipse, star, polygon, line, or vector path) - **Fill**: The color, gradient, image, or video content that makes the shape visible - **Effects**: Optional filters, blur, or shadows applied to the filled shape - **Transform**: Position, rotation, and scale properties ### Available Shape Types CE.SDK provides six built-in shape types: - **Rectangle** (`'rect'`): Basic rectangular shapes with optional rounded corners - **Ellipse** (`'ellipse'`): Circular and oval shapes - **Star** (`'star'`): Star shapes with configurable points and inner radius - **Polygon** (`'polygon'`): Regular polygons with configurable number of sides - **Line** (`'line'`): Straight lines spanning the block's dimensions - **Vector Path** (`'vector_path'`): Custom shapes using SVG path data You can use short type names like `'rect'` or fully qualified names like `'//ly.img.ubq/shape/rect'`—both work identically. ## Checking Shape Support Before applying shapes, we verify that a block type supports them. Not all block types can have shapes—graphic blocks support shapes, but text blocks, scenes, and pages don't. ```typescript highlight-check-shape-support const testGraphic = engine.block.create('graphic'); engine.block.supportsShape(testGraphic); // Returns true const testText = engine.block.create('text'); engine.block.supportsShape(testText); // Returns false engine.block.destroy(testText); engine.block.destroy(testGraphic); ``` We always check `supportsShape()` to prevent errors when working with unknown or dynamic block types. Graphic blocks return `true`, while text blocks return `false`. ## Creating Basic Shapes ### Creating a Rectangle We create a graphic block, apply a rectangle shape, and add a fill to make it visible: ```typescript highlight-create-rectangle const rectGraphic = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(rectGraphic, rectShape); const redFill = engine.block.createFill('color'); engine.block.setColor(redFill, 'fill/color/value', { r: 1.0, g: 0.0, b: 0.0, a: 1.0, }); engine.block.setFill(rectGraphic, redFill); engine.block.setWidth(rectGraphic, 64); engine.block.setHeight(rectGraphic, 64); engine.block.appendChild(page, rectGraphic); engine.block.setPositionX(rectGraphic, 10); engine.block.setPositionY(rectGraphic, 10); ``` Shapes require fills to become visible. The shape defines the geometry while the fill provides the visual content. ### Creating Other Shape Types Creating other shapes follows the same pattern with different shape types and properties. Ellipse with gradient fill: ```typescript highlight-create-ellipse const ellipseGraphic = engine.block.create('graphic'); const ellipseShape = engine.block.createShape('ellipse'); engine.block.setShape(ellipseGraphic, ellipseShape); const gradientFill = engine.block.createFill('gradient/linear'); engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [ { color: { r: 0.2, g: 0.6, b: 0.9, a: 1.0 }, stop: 0.0 }, { color: { r: 0.9, g: 0.3, b: 0.6, a: 1.0 }, stop: 1.0 }, ]); engine.block.setFill(ellipseGraphic, gradientFill); engine.block.setWidth(ellipseGraphic, 64); engine.block.setHeight(ellipseGraphic, 64); engine.block.appendChild(page, ellipseGraphic); engine.block.setPositionX(ellipseGraphic, 82); engine.block.setPositionY(ellipseGraphic, 10); ``` Star with configurable points: ```typescript highlight-create-star const starGraphic = engine.block.create('graphic'); const starShape = engine.block.createShape('star'); engine.block.setShape(starGraphic, starShape); engine.block.setInt(starShape, 'shape/star/points', 5); engine.block.setFloat(starShape, 'shape/star/innerDiameter', 0.5); const yellowFill = engine.block.createFill('color'); engine.block.setColor(yellowFill, 'fill/color/value', { r: 1.0, g: 0.8, b: 0.0, a: 1.0, }); engine.block.setFill(starGraphic, yellowFill); engine.block.setWidth(starGraphic, 64); engine.block.setHeight(starGraphic, 64); engine.block.appendChild(page, starGraphic); engine.block.setPositionX(starGraphic, 154); engine.block.setPositionY(starGraphic, 10); ``` Polygon with custom number of sides: ```typescript highlight-create-polygon const polygonGraphic = engine.block.create('graphic'); const polygonShape = engine.block.createShape('polygon'); engine.block.setShape(polygonGraphic, polygonShape); engine.block.setInt(polygonShape, 'shape/polygon/sides', 8); const greenFill = engine.block.createFill('color'); engine.block.setColor(greenFill, 'fill/color/value', { r: 0.2, g: 0.8, b: 0.3, a: 1.0, }); engine.block.setFill(polygonGraphic, greenFill); engine.block.setWidth(polygonGraphic, 64); engine.block.setHeight(polygonGraphic, 64); engine.block.appendChild(page, polygonGraphic); engine.block.setPositionX(polygonGraphic, 226); engine.block.setPositionY(polygonGraphic, 10); ``` Line with stroke styling: ```typescript highlight-create-line const lineGraphic = engine.block.create('graphic'); const lineShape = engine.block.createShape('line'); engine.block.setShape(lineGraphic, lineShape); const purpleFill = engine.block.createFill('color'); engine.block.setColor(purpleFill, 'fill/color/value', { r: 0.6, g: 0.2, b: 0.9, a: 1.0, }); engine.block.setFill(lineGraphic, purpleFill); engine.block.setWidth(lineGraphic, 64); engine.block.setHeight(lineGraphic, 10); engine.block.appendChild(page, lineGraphic); engine.block.setPositionX(lineGraphic, 10); engine.block.setPositionY(lineGraphic, 109); ``` ## Configuring Shape Properties ### Discovering Properties Each shape type has unique properties that control its appearance. We discover these properties using `findAllProperties()`: ```typescript highlight-discover-properties // Discover what properties are available on a shape const exampleStarShape = engine.block.createShape('star'); engine.block.findAllProperties(exampleStarShape); // Returns: ['shape/star/points', 'shape/star/innerDiameter', 'type', ...] engine.block.destroy(exampleStarShape); ``` This shows what can be configured for each shape type. ### Rectangle: Corner Radius Rectangles support independent corner radius values: ```typescript highlight-configure-properties const roundedRectGraphic = engine.block.create('graphic'); const roundedRectShape = engine.block.createShape('rect'); engine.block.setShape(roundedRectGraphic, roundedRectShape); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusTL', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusTR', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusBL', 5.0); engine.block.setFloat(roundedRectShape, 'shape/rect/cornerRadiusBR', 5.0); const cyanFill = engine.block.createFill('color'); engine.block.setColor(cyanFill, 'fill/color/value', { r: 0.0, g: 0.8, b: 0.8, a: 1.0, }); engine.block.setFill(roundedRectGraphic, cyanFill); engine.block.setWidth(roundedRectGraphic, 64); engine.block.setHeight(roundedRectGraphic, 64); engine.block.appendChild(page, roundedRectGraphic); engine.block.setPositionX(roundedRectGraphic, 154); engine.block.setPositionY(roundedRectGraphic, 82); ``` Set each corner independently using `cornerRadiusTL`, `cornerRadiusTR`, `cornerRadiusBL`, and `cornerRadiusBR` (values in pixels). ### Star: Points and Inner Diameter Configure star shapes using two properties: ```typescript highlight-create-star const starGraphic = engine.block.create('graphic'); const starShape = engine.block.createShape('star'); engine.block.setShape(starGraphic, starShape); engine.block.setInt(starShape, 'shape/star/points', 5); engine.block.setFloat(starShape, 'shape/star/innerDiameter', 0.5); const yellowFill = engine.block.createFill('color'); engine.block.setColor(yellowFill, 'fill/color/value', { r: 1.0, g: 0.8, b: 0.0, a: 1.0, }); engine.block.setFill(starGraphic, yellowFill); engine.block.setWidth(starGraphic, 64); engine.block.setHeight(starGraphic, 64); engine.block.appendChild(page, starGraphic); engine.block.setPositionX(starGraphic, 154); engine.block.setPositionY(starGraphic, 10); ``` The `points` property (minimum 3) sets the number of points. The `innerDiameter` (0.0 to 1.0) controls point sharpness. ### Polygon: Number of Sides Configure polygons by setting the number of sides: ```typescript highlight-create-polygon const polygonGraphic = engine.block.create('graphic'); const polygonShape = engine.block.createShape('polygon'); engine.block.setShape(polygonGraphic, polygonShape); engine.block.setInt(polygonShape, 'shape/polygon/sides', 8); const greenFill = engine.block.createFill('color'); engine.block.setColor(greenFill, 'fill/color/value', { r: 0.2, g: 0.8, b: 0.3, a: 1.0, }); engine.block.setFill(polygonGraphic, greenFill); engine.block.setWidth(polygonGraphic, 64); engine.block.setHeight(polygonGraphic, 64); engine.block.appendChild(page, polygonGraphic); engine.block.setPositionX(polygonGraphic, 226); engine.block.setPositionY(polygonGraphic, 10); ``` ### Vector Paths: Custom SVG Paths Create custom shapes using SVG path data: ```typescript highlight-create-vector-path const vectorPathGraphic = engine.block.create('graphic'); const vectorPathShape = engine.block.createShape('vector_path'); engine.block.setShape(vectorPathGraphic, vectorPathShape); engine.block.setString( vectorPathShape, 'shape/vector_path/path', 'M 0,0 L 100,50 L 0,100 Z', ); const orangeFill = engine.block.createFill('color'); engine.block.setColor(orangeFill, 'fill/color/value', { r: 1.0, g: 0.5, b: 0.0, a: 1.0, }); engine.block.setFill(vectorPathGraphic, orangeFill); engine.block.setWidth(vectorPathGraphic, 64); engine.block.setHeight(vectorPathGraphic, 64); engine.block.appendChild(page, vectorPathGraphic); engine.block.setPositionX(vectorPathGraphic, 82); engine.block.setPositionY(vectorPathGraphic, 82); ``` Vector paths support single-path SVG data only. For complex multi-path graphics, use image fills with SVG files. ## Combining Shapes with Fills ### Why Fills Matter Shapes define geometry but remain invisible without fills. Fills provide the visual content that makes shapes visible on the canvas. ### Shape and Fill Independence Shapes and fills operate independently—change one without affecting the other. We can replace a shape while keeping its fill, or change a fill while maintaining the shape geometry. This enables flexible design workflows where shapes and fills can be modified separately. For comprehensive fill system documentation, see the [Fills Overview](https://img.ly/docs/cesdk/sveltekit/fills/overview-3895ee/) guide. ## Managing Shapes ### Retrieving Shapes We can access the current shape on any graphic block: ```typescript // Get the shape ID from a graphic block const shapeId = engine.block.getShape(graphic); // Check what type of shape it is const shapeType = engine.block.getType(shapeId); // Returns: '//ly.img.ubq/shape/rect' or similar ``` Use this pattern to inspect and modify existing shapes. ### Replacing Shapes Replace shapes by applying the new shape first, then destroying the old one: ```typescript const oldShape = engine.block.getShape(graphic); const newShape = engine.block.createShape('ellipse'); engine.block.setShape(graphic, newShape); engine.block.destroy(oldShape); ``` Always destroy old shapes after replacement to prevent memory leaks. ### Positioning and Transforms Transforms apply to the graphic block. The shape geometry scales automatically: ```typescript const page = engine.block.findByType('page')[0]; engine.block.appendChild(page, graphic); engine.block.setPositionX(graphic, 100); engine.block.setPositionY(graphic, 100); engine.block.setRotation(graphic, Math.PI / 4); engine.block.setWidth(graphic, 200); engine.block.setHeight(graphic, 200); ``` ## Troubleshooting ### Shape Not Visible If your shape doesn't appear, verify these requirements: **Check fill is applied:** ```typescript const fill = engine.block.getFill(graphic); if (!fill) { const colorFill = engine.block.createFill('color'); engine.block.setColor(colorFill, 'fill/color/value', { r: 1, g: 0, b: 0, a: 1 }); engine.block.setFill(graphic, colorFill); } ``` **Check dimensions:** ```typescript const width = engine.block.getWidth(graphic); const height = engine.block.getHeight(graphic); if (width === 0 || height === 0) { engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); } ``` **Check scene hierarchy:** ```typescript const parent = engine.block.getParent(graphic); if (!parent) { const page = engine.block.findByType('page')[0]; engine.block.appendChild(page, graphic); } ``` ### Cannot Apply Shape Verify the block type supports shapes: ```typescript if (!engine.block.supportsShape(blockId)) { console.error('This block type does not support shapes'); // Use a graphic block instead const graphic = engine.block.create('graphic'); } ``` ### Shape Properties Not Changing Use the correct setter method for each property type: ```typescript // Integer properties engine.block.setInt(shape, 'shape/polygon/sides', 5); // Float properties engine.block.setFloat(shape, 'shape/star/innerDiameter', 0.5); // String properties engine.block.setString(shape, 'shape/vector_path/path', 'M 0,0 L 100,100'); ``` List available properties first if you're unsure: ```typescript const properties = engine.block.findAllProperties(shape); console.log('Available properties:', properties); ``` ## API Reference | Method | Description | Returns | | ------------------------------------- | ------------------------------ | ----------------- | | `block.create('graphic')` | Create a new graphic block | Block ID (number) | | `block.createShape(type)` | Create shape of specified type | Shape ID (number) | | `block.setShape(block, shape)` | Apply shape to graphic block | void | | `block.getShape(block)` | Get shape attached to block | Shape ID (number) | | `block.supportsShape(block)` | Check if block supports shapes | boolean | | `block.getType(shape)` | Get shape type identifier | string | | `block.findAllProperties(shape)` | List available properties | string\[] | | `block.setInt(shape, prop, value)` | Set integer property | void | | `block.setFloat(shape, prop, value)` | Set float property | void | | `block.setString(shape, prop, value)` | Set string property | void | | `block.destroy(shape)` | Destroy shape and free memory | void | ## Ellipse Type A shape block representing an ellipse. This section describes the properties available for the **Ellipse Type** (`//ly.img.ubq/shape/ellipse`) block type. | Property | Type | Default | Description | | -------------------------- | ---- | ------- | ----------- | | *(no specific properties)* | | | | ## Line Type A shape block representing a line. This section describes the properties available for the **Line Type** (`//ly.img.ubq/shape/line`) block type. | Property | Type | Default | Description | | -------------------------- | ---- | ------- | ----------- | | *(no specific properties)* | | | | ## Polygon Type A shape block representing a polygon. This section describes the properties available for the **Polygon Type** (`//ly.img.ubq/shape/polygon`) block type. | Property | Type | Default | Description | | ---------------------------- | ------- | ------- | ---------------------------------------------------- | | `shape/polygon/cornerRadius` | `Float` | `0` | The radius for rounding the corners of the shape. | | `shape/polygon/sides` | `Int` | `5` | The number of sides the polygon is supposed to have. | ## Rect Type A shape block representing a rectangle. This section describes the properties available for the **Rect Type** (`//ly.img.ubq/shape/rect`) block type. | Property | Type | Default | Description | | --------------------------- | ------- | ------- | -------------------------------------------------------------- | | `shape/rect/cornerRadiusBL` | `Float` | `0` | The bottom-left radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusBR` | `Float` | `0` | The bottom-right radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusTL` | `Float` | `0` | The top-left radius for rounding the corners of the shape. | | `shape/rect/cornerRadiusTR` | `Float` | `0` | The top-right radius for rounding the corners of the shape. | ## Star Type A shape block representing a star. This section describes the properties available for the **Star Type** (`//ly.img.ubq/shape/star`) block type. | Property | Type | Default | Description | | -------------------------- | ------- | ------- | ------------------------------------------------ | | `shape/star/innerDiameter` | `Float` | `0.5` | The inner diameter of the star. | | `shape/star/points` | `Int` | `5` | The number of tips the star is supposed to have. | ## Vector Path Type A shape block representing a custom vector path. This section describes the properties available for the **Vector Path Type** (`//ly.img.ubq/shape/vector_path`) block type. | Property | Type | Default | Description | | -------------------------- | -------- | ------- | ------------------------------------------------------ | | `shape/vector_path/height` | `Float` | `100` | The coordinate bounds in y direction. | | `shape/vector_path/path` | `String` | `""` | The path string, accepts a subset of svg path strings. | | `shape/vector_path/width` | `Float` | `100` | The coordinate bounds in x direction. | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Create Stickers" description: "Create stickers in CE.SDK using image fills for icons, logos, emoji, and multi-color graphics" platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-stickers-cc46e5/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-3d4e5f/) > [Create Stickers](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/create-stickers-cc46e5/) --- Create stickers from images for use in your designs, perfect for adding icons, logos, emoji, and detailed multi-color graphics that preserve their original appearance.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-create-stickers-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-create-stickers-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-create-stickers-browser/) Stickers are graphic blocks with image fills that cannot be recolored. They work well for icons, brand logos, emoji, and complex multi-color graphics. Unlike shapes (which use solid or gradient fills and can be recolored), stickers preserve the original colors and details of the source image. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-create-stickers-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 450, height: 250, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // ===== Section 1: Using Convenience API ===== // Create sticker using the convenient addImage() method const sticker = await engine.block.addImage( 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_grin.svg' ); // Set size and position (preserve aspect ratio) const naturalWidth = engine.block.getWidth(sticker); const naturalHeight = engine.block.getHeight(sticker); const scale = 80 / Math.max(naturalWidth, naturalHeight); engine.block.setWidth(sticker, naturalWidth * scale); engine.block.setHeight(sticker, naturalHeight * scale); engine.block.setPositionX(sticker, 95); engine.block.setPositionY(sticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(sticker)) { engine.block.setContentFillMode(sticker, 'Contain'); } engine.block.setKind(sticker, 'Sticker'); // Add to scene engine.block.appendChild(page, sticker); // ===== Section 2: Manual Construction ===== // Create sticker manually for fine-grained control const manualSticker = engine.block.create('graphic'); // Set a shape (required for graphic blocks to be visible) engine.block.setShape(manualSticker, engine.block.createShape('rect')); // Create and apply image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_blush.svg' ); engine.block.setFill(manualSticker, imageFill); // Set size and position (preserve aspect ratio) const manualWidth = engine.block.getWidth(manualSticker) || 100; const manualHeight = engine.block.getHeight(manualSticker) || 100; const manualScale = 80 / Math.max(manualWidth, manualHeight); engine.block.setWidth(manualSticker, manualWidth * manualScale); engine.block.setHeight(manualSticker, manualHeight * manualScale); engine.block.setPositionX(manualSticker, 275); engine.block.setPositionY(manualSticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(manualSticker)) { engine.block.setContentFillMode(manualSticker, 'Contain'); } engine.block.setKind(manualSticker, 'Sticker'); // Add to scene engine.block.appendChild(page, manualSticker); } } export default Example; ``` ## Creating Stickers from Images We use `engine.block.addImage()` to create stickers quickly. This method creates the graphic block and image fill in one call. After creation, we read the natural dimensions, calculate a scale factor to preserve aspect ratio, and apply the scaled size. We also set the position, content fill mode, and mark it as 'Sticker' for proper editor behavior. ```typescript highlight-convenience-api // Create sticker using the convenient addImage() method const sticker = await engine.block.addImage( 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_grin.svg' ); // Set size and position (preserve aspect ratio) const naturalWidth = engine.block.getWidth(sticker); const naturalHeight = engine.block.getHeight(sticker); const scale = 80 / Math.max(naturalWidth, naturalHeight); engine.block.setWidth(sticker, naturalWidth * scale); engine.block.setHeight(sticker, naturalHeight * scale); engine.block.setPositionX(sticker, 95); engine.block.setPositionY(sticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(sticker)) { engine.block.setContentFillMode(sticker, 'Contain'); } engine.block.setKind(sticker, 'Sticker'); // Add to scene engine.block.appendChild(page, sticker); ``` We preserve aspect ratio by scaling the natural dimensions proportionally. The 'Contain' fill mode ensures the entire image displays without cropping. Setting the kind to 'Sticker' prevents recoloring and provides appropriate editor controls. ## Manual Construction For fine-grained control, we build stickers step by step using separate API calls. We create the graphic block, set a shape (required for visibility), create an image fill, and apply it to the block. We preserve aspect ratio by reading natural dimensions and scaling proportionally. ```typescript highlight-manual-construction // Create sticker manually for fine-grained control const manualSticker = engine.block.create('graphic'); // Set a shape (required for graphic blocks to be visible) engine.block.setShape(manualSticker, engine.block.createShape('rect')); // Create and apply image fill const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://cdn.img.ly/assets/v4/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_blush.svg' ); engine.block.setFill(manualSticker, imageFill); // Set size and position (preserve aspect ratio) const manualWidth = engine.block.getWidth(manualSticker) || 100; const manualHeight = engine.block.getHeight(manualSticker) || 100; const manualScale = 80 / Math.max(manualWidth, manualHeight); engine.block.setWidth(manualSticker, manualWidth * manualScale); engine.block.setHeight(manualSticker, manualHeight * manualScale); engine.block.setPositionX(manualSticker, 275); engine.block.setPositionY(manualSticker, 85); // Prevent cropping and mark as sticker if (engine.block.supportsContentFillMode(manualSticker)) { engine.block.setContentFillMode(manualSticker, 'Contain'); } engine.block.setKind(manualSticker, 'Sticker'); // Add to scene engine.block.appendChild(page, manualSticker); ``` This approach works well when we need to configure multiple properties or reuse fills across blocks. ## Sticker vs Shape Decision Choose between stickers and shapes based on your requirements: | Requirement | Use Stickers | Use Shapes | | --- | --- | --- | | Multi-color graphics | ✓ Yes | ✗ No (single fill) | | Recolorable | ✗ No | ✓ Yes | | Preserve original artwork | ✓ Yes | ✗ N/A | | Boolean operations | ✗ No | ✓ Yes | | Complex paths/gradients | ✓ Yes | ✗ Limited | | Icons, logos, emoji | ✓ Preferred | - | ## Troubleshooting ### Sticker Not Appearing Verify the image URL returns a valid image. Check that the sticker is added to the current page. Ensure dimensions are non-zero. Confirm the image format is supported (SVG, PNG, JPG). ### Manually Created Sticker Is Blank When creating graphic blocks manually, you must set a shape before the fill becomes visible. Call `engine.block.setShape(graphic, engine.block.createShape('rect'))` after creating the block. The `addImage()` convenience API handles this automatically. ### Sticker Appears Blurry For raster stickers, ensure source image resolution matches or exceeds display size. Use SVG stickers for scalable graphics that remain sharp at any size. ### Sticker Appears Cropped Stickers may appear cropped if the content fill mode defaults to 'Cover'. Set the mode to 'Contain' to display the full image: `engine.block.setContentFillMode(sticker, 'Contain')`. Always check support first with `supportsContentFillMode()`. ### Sticker Cannot Be Recolored This is expected behavior—stickers preserve original colors. For recolorable graphics, create shapes with vector paths instead. For simple single-color graphics, consider using a vector path shape. ### Wrong Editor Behavior Ensure `engine.block.setKind(id, 'Sticker')` was called. The 'Sticker' kind designation controls editor interactions and UI panels. ## API Reference Quick reference for sticker creation methods: | Method | Category | Purpose | | --- | --- | --- | | `engine.block.addImage(url, options)` | Creation | Convenient sticker creation from URL | | `engine.block.create('graphic')` | Creation | Create graphic block manually | | `engine.block.createShape('rect')` | Shapes | Create shape (required for manual blocks) | | `engine.block.setShape(graphic, shape)` | Shapes | Apply shape to graphic block | | `engine.block.createFill('image')` | Fills | Create image fill | | `engine.block.setFill(graphic, fill)` | Fills | Apply fill to graphic block | | `engine.block.setString(fill, prop, uri)` | Fills | Set image URI on fill | | `engine.block.supportsContentFillMode(id)` | Content | Check if block supports fill mode | | `engine.block.setContentFillMode(id, mode)` | Content | Set fill mode ('Contain' or 'Cover') | | `engine.block.setKind(id, 'Sticker')` | Configuration | Mark block as sticker | | `engine.block.setPositionX/Y(id, val)` | Transform | Set position | | `engine.block.setWidth/Height(id, val)` | Transform | Set dimensions | | `engine.block.getWidth/Height(id)` | Transform | Get current dimensions | | `engine.block.appendChild(parent, child)` | Hierarchy | Add to scene | | `engine.scene.getCurrentPage()` | Scene | Get current page | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Shapes" description: "Learn how to programmatically edit shapes in CE.SDK, including geometry changes, fill modifications, stroke properties, transforms, and boolean operations." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/edit-shapes-d67cfb/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) > [Edit Shapes](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/edit-shapes-d67cfb/) --- This guide shows how to programmatically edit shapes using the Block API, covering geometry modifications, fill changes, stroke configuration, transforms, and boolean combinations.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-edit-shapes-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-edit-shapes-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-edit-shapes-browser/) The `graphic` block in CE.SDK allows you to modify and replace its shape. CE.SDK supports many different types of shapes, such as rectangles, lines, ellipses, polygons, stars, and custom vector paths. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-edit-shapes-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 100, height: 100, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const graphic = engine.block.create('graphic'); const imageFill = engine.block.createFill('image'); engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_1.jpg' ); engine.block.setFill(graphic, imageFill); engine.block.setWidth(graphic, 100); engine.block.setHeight(graphic, 100); engine.block.appendChild(page, graphic); engine.block.setPositionX(graphic, 0); engine.block.setPositionY(graphic, 0); await engine.scene.zoomToBlock(page, { padding: 40 }); engine.block.supportsShape(graphic); // Returns true const text = engine.block.create('text'); engine.block.supportsShape(text); // Returns false const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); const shape = engine.block.getShape(graphic); const shapeType = engine.block.getType(shape); const starShape = engine.block.createShape('star'); engine.block.destroy(engine.block.getShape(graphic)); engine.block.setShape(graphic, starShape); /* The following line would also destroy the currently attached starShape */ // engine.block.destroy(graphic); const allShapeProperties = engine.block.findAllProperties(starShape); engine.block.setInt(starShape, 'shape/star/points', 5); } } export default Example; ``` Similarly to blocks, each shape object has a numeric ID which can be used to query and modify its properties. ## Accessing Shapes To query whether a block supports shapes, use the `engine.block.supportsShape(id)` API. Currently, only the `graphic` design block supports shape objects. To query the shape of a design block, first create a shape and set it, then call `engine.block.getShape(id)`. You can pass the returned result into other APIs to query more information about the shape, such as its type via `engine.block.getType(id)`. ```typescript highlight-accessShapes engine.block.supportsShape(graphic); // Returns true const text = engine.block.create('text'); engine.block.supportsShape(text); // Returns false const rectShape = engine.block.createShape('rect'); engine.block.setShape(graphic, rectShape); const shape = engine.block.getShape(graphic); const shapeType = engine.block.getType(shape); ``` ## Replacing Shapes When replacing a shape, remember to destroy the previous shape object if you don't intend to use it further. Shape objects that are not attached to a design block will never be automatically destroyed. ```typescript highlight-replaceShape const starShape = engine.block.createShape('star'); engine.block.destroy(engine.block.getShape(graphic)); engine.block.setShape(graphic, starShape); /* The following line would also destroy the currently attached starShape */ // engine.block.destroy(graphic); ``` Destroying a design block will also destroy its attached shape block (shown in the commented line). ## Shape Properties Just like design blocks, shapes with different types have different properties that you can query and modify via the API. Use `engine.block.findAllProperties(id)` to get a list of all properties of a given shape. ```typescript highlight-getProperties const allShapeProperties = engine.block.findAllProperties(starShape); ``` For the star shape in this example, the call returns an array including properties like `"shape/star/innerDiameter"` and `"shape/star/points"`. Once we know the property keys of a shape, we can use the same APIs as for design blocks to modify those properties. For example, we can use `engine.block.setInt()` to change the number of points of the star to five. ```typescript highlight-modifyProperties engine.block.setInt(starShape, 'shape/star/points', 5); ``` ## Troubleshooting ### Shape Not Changing - Verify the block supports shapes: `engine.block.supportsShape(block)` must return `true` - Check that the shape was created successfully and has a valid ID - Ensure the shape is assigned to the block using `engine.block.setShape()` ### Property Modification Not Working - Confirm you're using the correct property key (use `findAllProperties()` to discover them) - Verify you're using the right setter method: `setInt()` for integers, `setFloat()` for floats, `setString()` for strings - Check that the property exists for that shape type (e.g., `shape/star/points` only exists on star shapes) ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `engine.block.supportsShape(id)` | Validation | Check if block supports shapes | | `engine.block.createShape(type)` | Creation | Create new shape instance | | `engine.block.getShape(id)` | Query | Get shape from graphic block | | `engine.block.getType(id)` | Query | Get type of block or shape | | `engine.block.setShape(id, shape)` | Modification | Apply shape to graphic block | | `engine.block.findAllProperties(id)` | Query | List all properties of block or shape | | `engine.block.setInt(id, prop, val)` | Modification | Set integer property (e.g., star points) | | `engine.block.setFloat(id, prop, val)` | Modification | Set float property (e.g., corner radius) | | `engine.block.setString(id, prop, val)` | Modification | Set string property (e.g., vector path data) | | `engine.block.destroy(id)` | Management | Destroy block or shape | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Vector Edit" description: "Learn how to enter vector edit mode and manipulate individual anchor points, curves and bezier handles of shapes in CE.SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/create-edit/vector-edit-f3a7b2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). --- This guide shows how to use the vector edit APIs to enter path editing mode, switch between move, bend, add and delete modes, control bezier handle mirroring, and manage anchor points on any shape. > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-vector-edit-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-vector-edit-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-vector-edit-browser/) Vector edit mode lets you modify any shape at the path level. When you enter vector edit mode on a shape, CE.SDK converts it to a vector path and exposes its anchor points and bezier handles for direct manipulation. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-vector-edit-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Enable vector path editing feature cesdk.feature.enable('ly.img.shape.edit'); await cesdk.actions.run('scene.create', { page: { width: 100, height: 100, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a graphic block with a star shape const graphic = engine.block.create('graphic'); const starShape = engine.block.createShape('star'); engine.block.setShape(graphic, starShape); const solidFill = engine.block.createFill('color'); engine.block.setFill(graphic, solidFill); engine.block.setWidth(graphic, 60); engine.block.setHeight(graphic, 60); engine.block.appendChild(page, graphic); engine.block.setPositionX(graphic, 20); engine.block.setPositionY(graphic, 20); await engine.scene.zoomToBlock(page, { padding: 40 }); // Select the graphic block and enter vector edit mode. // This converts the shape to a vector path so you can // manipulate individual anchor points and curves. engine.block.select(graphic); engine.editor.setEditMode('Vector'); // Move mode (default): select and drag anchor points. // All mode flags start as false — move mode is active // when none of the other modes are set. // Bend mode: drag path segments to pull out bezier handles. engine.editor.setVectorEditBendMode(true); engine.editor.getVectorEditBendMode(); // true // Add mode: click on a path segment to insert a new anchor point. engine.editor.setVectorEditBendMode(false); engine.editor.setVectorEditAddMode(true); engine.editor.getVectorEditAddMode(); // true // Delete mode: click an anchor point to remove it from the path. engine.editor.setVectorEditAddMode(false); engine.editor.setVectorEditDeleteMode(true); engine.editor.getVectorEditDeleteMode(); // true // Return to move mode by clearing all flags. engine.editor.setVectorEditDeleteMode(false); // Mirror mode controls how bezier handles behave when you // adjust one side of an anchor point. // 0 = None: handles move independently. // 1 = Angle & Length: handles mirror both angle and length. // 2 = Angle Only: handles mirror angle but keep their own length. if (engine.editor.hasSelectedVectorNode()) { engine.editor.setSelectedVectorNodeMirrorMode(1); engine.editor.getSelectedVectorNodeMirrorMode(); // 1 // Toggle smooth/sharp for the selected node. engine.editor.toggleSelectedVectorNodeSmooth(); } // Query whether any vector anchor node is currently selected. engine.editor.hasSelectedVectorNode(); // Insert a new anchor point at the midpoint of the // selected segment (only works in add mode). engine.editor.setVectorEditAddMode(true); // engine.editor.addVectorNode(); // Remove the currently selected anchor point from the path. // engine.editor.deleteVectorNode(); engine.editor.setVectorEditAddMode(false); // Exit vector edit mode and return to the normal transform mode. engine.editor.setEditMode('Transform'); } } export default Example; ``` ## Setup Before using vector edit, enable the `ly.img.shape.edit` feature flag. This flag is disabled by default and must be explicitly enabled. The design editor and video editor starter kits enable it automatically. ```typescript highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Enable vector path editing feature cesdk.feature.enable('ly.img.shape.edit'); await cesdk.actions.run('scene.create', { page: { width: 100, height: 100, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a graphic block with a star shape const graphic = engine.block.create('graphic'); const starShape = engine.block.createShape('star'); engine.block.setShape(graphic, starShape); const solidFill = engine.block.createFill('color'); engine.block.setFill(graphic, solidFill); engine.block.setWidth(graphic, 60); engine.block.setHeight(graphic, 60); engine.block.appendChild(page, graphic); engine.block.setPositionX(graphic, 20); engine.block.setPositionY(graphic, 20); await engine.scene.zoomToBlock(page, { padding: 40 }); ``` ## Entering Vector Edit Mode Select a block that supports shapes and call `engine.editor.setEditMode('Vector')`. CE.SDK converts the current shape to a vector path so you can manipulate individual anchor points and curves. ```typescript highlight-enterVectorEdit // Select the graphic block and enter vector edit mode. // This converts the shape to a vector path so you can // manipulate individual anchor points and curves. engine.block.select(graphic); engine.editor.setEditMode('Vector'); ``` ## Edit Modes Vector edit provides four mutually exclusive modes. Only one can be active at a time — setting a new mode clears the others. When all mode flags are `false`, you are in the default **move mode**. | Mode | Purpose | | --- | --- | | Move | Select and drag anchor points and control handles | | Bend | Drag path segments to pull out bezier handles | | Add | Click on a path segment to insert a new anchor point | | Delete | Click an anchor point to remove it from the path | ```typescript highlight-modes // Move mode (default): select and drag anchor points. // All mode flags start as false — move mode is active // when none of the other modes are set. // Bend mode: drag path segments to pull out bezier handles. engine.editor.setVectorEditBendMode(true); engine.editor.getVectorEditBendMode(); // true // Add mode: click on a path segment to insert a new anchor point. engine.editor.setVectorEditBendMode(false); engine.editor.setVectorEditAddMode(true); engine.editor.getVectorEditAddMode(); // true // Delete mode: click an anchor point to remove it from the path. engine.editor.setVectorEditAddMode(false); engine.editor.setVectorEditDeleteMode(true); engine.editor.getVectorEditDeleteMode(); // true // Return to move mode by clearing all flags. engine.editor.setVectorEditDeleteMode(false); ``` ## Mirror Mode Mirror mode controls how the two bezier handles of an anchor point behave when you adjust one of them. | Value | Name | Behavior | | --- | --- | --- | | `0` | None | Handles move independently | | `1` | Angle & Length | Handles mirror both direction and distance | | `2` | Angle Only | Handles mirror direction but keep independent lengths | Use `toggleSelectedVectorNodeSmooth()` to quickly switch between a sharp corner (no handles) and a smooth curve. ```typescript highlight-mirrorMode // Mirror mode controls how bezier handles behave when you // adjust one side of an anchor point. // 0 = None: handles move independently. // 1 = Angle & Length: handles mirror both angle and length. // 2 = Angle Only: handles mirror angle but keep their own length. if (engine.editor.hasSelectedVectorNode()) { engine.editor.setSelectedVectorNodeMirrorMode(1); engine.editor.getSelectedVectorNodeMirrorMode(); // 1 // Toggle smooth/sharp for the selected node. engine.editor.toggleSelectedVectorNodeSmooth(); } ``` ## Node Operations Use these APIs to query selection state and add or remove anchor points programmatically. ```typescript highlight-nodeOperations // Query whether any vector anchor node is currently selected. engine.editor.hasSelectedVectorNode(); // Insert a new anchor point at the midpoint of the // selected segment (only works in add mode). engine.editor.setVectorEditAddMode(true); // engine.editor.addVectorNode(); // Remove the currently selected anchor point from the path. // engine.editor.deleteVectorNode(); engine.editor.setVectorEditAddMode(false); ``` ## Exiting Vector Edit Mode Call `engine.editor.setEditMode('Transform')` to leave vector edit mode and return to the normal transform controls. ```typescript highlight-exitVectorEdit // Exit vector edit mode and return to the normal transform mode. engine.editor.setEditMode('Transform'); ``` ## Keyboard Shortcuts In the built-in editor UI, vector edit mode supports keyboard shortcuts: - **Backspace / Delete** removes the selected anchor point from the path. ## Troubleshooting ### Edit Path Button Not Visible - Ensure the `ly.img.shape.edit` feature flag is enabled via `cesdk.feature.enable('ly.img.shape.edit')`. - Verify the selected block supports shapes: `engine.block.supportsShape(block)` must return `true`. ### Shape Not Converting - Only blocks with a valid shape can enter vector edit mode. If the block has no shape, create and assign one first using `engine.block.createShape()` and `engine.block.setShape()`. ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `engine.editor.setEditMode('Vector')` | Mode | Enter vector edit mode | | `engine.editor.setEditMode('Transform')` | Mode | Exit vector edit mode | | `engine.editor.setVectorEditBendMode(flag)` | Mode | Enable or disable bend mode | | `engine.editor.getVectorEditBendMode()` | Mode | Query bend mode state | | `engine.editor.setVectorEditAddMode(flag)` | Mode | Enable or disable add mode | | `engine.editor.getVectorEditAddMode()` | Mode | Query add mode state | | `engine.editor.setVectorEditDeleteMode(flag)` | Mode | Enable or disable delete mode | | `engine.editor.getVectorEditDeleteMode()` | Mode | Query delete mode state | | `engine.editor.hasSelectedVectorNode()` | Selection | Check if an anchor is selected | | `engine.editor.addVectorNode()` | Edit | Insert anchor at segment midpoint | | `engine.editor.deleteVectorNode()` | Edit | Remove selected anchor | | `engine.editor.toggleSelectedVectorNodeSmooth()` | Edit | Toggle smooth/sharp anchor | | `engine.editor.setSelectedVectorNodeMirrorMode(mode)` | Edit | Set handle mirror behavior | | `engine.editor.getSelectedVectorNodeMirrorMode()` | Edit | Query handle mirror mode | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Insert QR Code" description: "Add scannable QR codes to designs using image fills." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/insert-qr-code-b6cc53/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Shapes](https://img.ly/docs/cesdk/sveltekit/shapes-9f1b2c/) > [Insert QR Code](https://img.ly/docs/cesdk/sveltekit/stickers-and-shapes/insert-qr-code-b6cc53/) --- Add scannable QR codes to designs programmatically using image fills.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-insert-qr-code-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-stickers-and-shapes-insert-qr-code-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-stickers-and-shapes-insert-qr-code-browser/) QR codes encode URLs that mobile devices can scan, making them useful for marketing materials, business cards, event posters, and product packaging. This guide shows how to generate QR codes as images and add them to CE.SDK designs. > **Note:** For a simpler integration, consider using the official [@imgly/plugin-qr-code-web](https://www.npmjs.com/package/@imgly/plugin-qr-code-web) plugin which provides ready-to-use QR code functionality. ```typescript file=@cesdk_web_examples/guides-stickers-and-shapes-insert-qr-code-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; import { generateQRCodeDataURL } from './qr-utils'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const qrSize = 200; // ===== Demonstration: QR Code as Image Fill ===== // Generate QR code as data URL image with custom colors const qrImageUrl = await generateQRCodeDataURL('https://img.ly', { width: 256, color: { dark: '#1a5fb4', light: '#ffffff' } }); // Create graphic block with rectangle shape and image fill const imageQrBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageQrBlock, rectShape); // Create image fill with QR code data URL const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', qrImageUrl); engine.block.setFill(imageQrBlock, imageFill); // Set dimensions and position for image-based QR code engine.block.setWidth(imageQrBlock, qrSize); engine.block.setHeight(imageQrBlock, qrSize); engine.block.setPositionX(imageQrBlock, 300); engine.block.setPositionY(imageQrBlock, 200); // Add to page engine.block.appendChild(page, imageQrBlock); // Add label for the QR code const textBlock = engine.block.create('text'); engine.block.replaceText(textBlock, 'Image Fill'); engine.block.setFloat(textBlock, 'text/fontSize', 69); engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setWidth(textBlock, 300); engine.block.setPositionX(textBlock, 250); engine.block.setPositionY(textBlock, 420); engine.block.appendChild(page, textBlock); // Zoom to fit all content await engine.scene.zoomToBlock(page, { padding: 40 }); } } export default Example; ``` ## Generating QR Code Images Use a QR code library like `qrcode` to generate QR codes as data URLs with custom colors. ```typescript highlight-generate-image // Generate QR code as data URL image with custom colors const qrImageUrl = await generateQRCodeDataURL('https://img.ly', { width: 256, color: { dark: '#1a5fb4', light: '#ffffff' } }); ``` The `toDataURL` method creates a base64-encoded image that works directly with CE.SDK's image fill. You can customize the colors at generation time. ## Creating a QR Code Block Create a graphic block with a rectangle shape and apply the QR code as an image fill. ```typescript highlight-create-image-block // Create graphic block with rectangle shape and image fill const imageQrBlock = engine.block.create('graphic'); const rectShape = engine.block.createShape('rect'); engine.block.setShape(imageQrBlock, rectShape); // Create image fill with QR code data URL const imageFill = engine.block.createFill('image'); engine.block.setString(imageFill, 'fill/image/imageFileURI', qrImageUrl); engine.block.setFill(imageQrBlock, imageFill); ``` Image fills use a rectangle shape with the QR code as the fill content. This approach is straightforward and supports color customization at generation time. ## Positioning and Sizing Set the QR code dimensions and position on the page. ```typescript highlight-position-image // Set dimensions and position for image-based QR code engine.block.setWidth(imageQrBlock, qrSize); engine.block.setHeight(imageQrBlock, qrSize); engine.block.setPositionX(imageQrBlock, 300); engine.block.setPositionY(imageQrBlock, 200); // Add to page engine.block.appendChild(page, imageQrBlock); ``` Maintain a square aspect ratio by setting equal width and height. For reliable scanning, keep QR codes at least 100x100 pixels. ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `engine.block.create('graphic')` | Creation | Create graphic block for QR code | | `engine.block.createShape('rect')` | Shapes | Create rectangle shape | | `engine.block.setShape(id, shape)` | Shapes | Apply shape to graphic block | | `engine.block.createFill('image')` | Fills | Create image fill | | `engine.block.setString(id, 'fill/image/imageFileURI', uri)` | Fills | Set image data URL | | `engine.block.setFill(id, fill)` | Fills | Apply fill to block | | `engine.block.setWidth(id, width)` | Transform | Set QR code width | | `engine.block.setHeight(id, height)` | Transform | Set QR code height | | `engine.block.setPositionX(id, x)` | Transform | Set horizontal position | | `engine.block.setPositionY(id, y)` | Transform | Set vertical position | | `engine.block.appendChild(parent, child)` | Hierarchy | Add QR code to page | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text" description: "Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text-8a993a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/text/overview-0bd620/) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools. - [Add Text](https://img.ly/docs/cesdk/sveltekit/text/add-4f5011/) - Insert text blocks into your CE.SDK scene. - [Edit Text](https://img.ly/docs/cesdk/sveltekit/text/edit-c5106b/) - Edit text content directly on the canvas or through the properties panel. - [Text Styling](https://img.ly/docs/cesdk/sveltekit/text/styling-269c48/) - Apply fonts, colors, alignment, and other styling options to customize text appearance. - [Text Decorations](https://img.ly/docs/cesdk/sveltekit/text/decorations-d3c0a1/) - Add underline, strikethrough, and overline decorations to text with customizable styles, colors, and thickness. - [Text Designs](https://img.ly/docs/cesdk/sveltekit/text/text-designs-a1b2c3/) - Create and customize text component libraries using predefined text designs that appear in your asset library. - [Text Enumerations](https://img.ly/docs/cesdk/sveltekit/text/enumerations-b5c1d2/) - Add bullet lists and numbered lists to text blocks in CE.SDK using per-paragraph list styles and nesting levels. - [Auto-Size](https://img.ly/docs/cesdk/sveltekit/text/auto-size-5331b3/) - Configure text blocks to automatically adapt their dimensions or font size for dynamic content. - [Text Effects](https://img.ly/docs/cesdk/sveltekit/text/effects-2dc9fc/) - Apply visual effects to text blocks including drop shadows and stroke outlines. - [Emojis](https://img.ly/docs/cesdk/sveltekit/text/emojis-510651/) - Insert and style emojis alongside text for expressive, modern typographic designs. - [Adjust Text Spacing](https://img.ly/docs/cesdk/sveltekit/text/adjust-spacing-c1a3b6/) - Control letter spacing, line height, and paragraph spacing in CE.SDK text blocks for precise typographic control. - [Customize Fonts](https://img.ly/docs/cesdk/sveltekit/text/custom-fonts-9565b3/) - Load and manage custom fonts to match brand guidelines or user preferences. - [Text and Language Support](https://img.ly/docs/cesdk/sveltekit/text/language-support-a0f010/) - Create designs that work seamlessly across different languages and writing systems with RTL text, complex scripts, and multilingual font support. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Add Text" description: "Insert text blocks into your CE.SDK scene." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/add-4f5011/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Add Text](https://img.ly/docs/cesdk/sveltekit/text/add-4f5011/) --- Create and configure text blocks in CE.SDK with custom fonts, rich text styling, and dynamic sizing options.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-add-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-add-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-add-browser/) Text blocks are fundamental design elements for displaying titles, captions, labels, and body text. CE.SDK provides a range-based styling system that allows different formatting within a single text block, enabling rich text with multiple colors, font weights, and styles. ```typescript file=@cesdk_web_examples/guides-text-add-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Browser Guide: Add Text * * Demonstrates text block creation and configuration: * - Creating text blocks * - Setting text content * - Configuring auto-sizing * - Applying fonts and typefaces * - Range-based styling with colors and font weights * - Text case transformations * - Text alignment and spacing */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 900, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); // Document layout settings const margin = 40; const fontSize = 80; const lineSpacing = 100; // Create a title text block const titleBlock = engine.block.create('text'); engine.block.appendChild(page, titleBlock); // Set the text content using replaceText engine.block.replaceText(titleBlock, 'Welcome to CE.SDK'); // Configure auto-sizing so the block adjusts to content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); // Position at top of document engine.block.setPositionX(titleBlock, margin); engine.block.setPositionY(titleBlock, margin); // Apply a custom font to the title // Font URIs point to hosted font files (TTF, OTF, WOFF, WOFF2) const fontUri = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Caveat/Caveat-Bold.ttf'; const typeface = { name: 'Caveat', fonts: [ { uri: fontUri, subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; engine.block.setFont(titleBlock, fontUri, typeface); // Set font size (80pt for visibility) engine.block.setTextFontSize(titleBlock, fontSize); // Create a text block with rich text styling (multiple colors and weights) const richTextBlock = engine.block.create('text'); engine.block.appendChild(page, richTextBlock); engine.block.replaceText(richTextBlock, 'Rich text with colors and styles'); // Position below title engine.block.setPositionX(richTextBlock, margin); engine.block.setPositionY(richTextBlock, margin + lineSpacing); engine.block.setWidthMode(richTextBlock, 'Auto'); engine.block.setHeightMode(richTextBlock, 'Auto'); engine.block.setTextFontSize(richTextBlock, fontSize); // Apply different colors to specific ranges // "Rich" (0-4) in blue engine.block.setTextColor( richTextBlock, { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, 0, 4 ); // "text" (5-9) in green engine.block.setTextColor( richTextBlock, { r: 0.2, g: 0.7, b: 0.3, a: 1.0 }, 5, 9 ); // "colors" (15-21) in orange engine.block.setTextColor( richTextBlock, { r: 0.9, g: 0.5, b: 0.1, a: 1.0 }, 15, 21 ); // "styles" (26-32) in purple engine.block.setTextColor( richTextBlock, { r: 0.6, g: 0.2, b: 0.8, a: 1.0 }, 26, 32 ); // Create a text block demonstrating auto-sizing with fixed width const autoSizeBlock = engine.block.create('text'); engine.block.appendChild(page, autoSizeBlock); engine.block.replaceText(autoSizeBlock, 'Auto-sizing text block'); // Position below rich text engine.block.setPositionX(autoSizeBlock, margin); engine.block.setPositionY(autoSizeBlock, margin + lineSpacing * 2); // Set fixed width but auto height - text wraps and height adjusts engine.block.setWidth(autoSizeBlock, pageWidth - margin * 2); engine.block.setWidthMode(autoSizeBlock, 'Absolute'); engine.block.setHeightMode(autoSizeBlock, 'Auto'); engine.block.setTextFontSize(autoSizeBlock, fontSize); // Create a text block demonstrating text case transformations const caseBlock = engine.block.create('text'); engine.block.appendChild(page, caseBlock); engine.block.replaceText(caseBlock, 'uppercase text'); // Position below auto-size block engine.block.setPositionX(caseBlock, margin); engine.block.setPositionY(caseBlock, margin + lineSpacing * 3); engine.block.setWidthMode(caseBlock, 'Auto'); engine.block.setHeightMode(caseBlock, 'Auto'); engine.block.setTextFontSize(caseBlock, fontSize); // Transform the entire text to uppercase without changing the source engine.block.setTextCase(caseBlock, 'Uppercase'); // Create a text block demonstrating bold/italic toggle const toggleBlock = engine.block.create('text'); engine.block.appendChild(page, toggleBlock); engine.block.replaceText(toggleBlock, 'Toggle Bold and Italic'); // Position below case block engine.block.setPositionX(toggleBlock, margin); engine.block.setPositionY(toggleBlock, margin + lineSpacing * 4); engine.block.setWidthMode(toggleBlock, 'Auto'); engine.block.setHeightMode(toggleBlock, 'Auto'); engine.block.setTextFontSize(toggleBlock, fontSize); // Set a font that supports bold/italic variants const robotoTypeface = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf', subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const }, { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const }, { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Italic.ttf', subFamily: 'Italic', weight: 'normal' as const, style: 'italic' as const } ] }; engine.block.setFont( toggleBlock, 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf', robotoTypeface ); // Toggle bold for "Bold" (7-11) engine.block.toggleBoldFont(toggleBlock, 7, 11); // Toggle italic for "Italic" (16-22) engine.block.toggleItalicFont(toggleBlock, 16, 22); // Create a text block to demonstrate text modification const modifyBlock = engine.block.create('text'); engine.block.appendChild(page, modifyBlock); engine.block.replaceText(modifyBlock, 'Hello World'); // Position below toggle block engine.block.setPositionX(modifyBlock, margin); engine.block.setPositionY(modifyBlock, margin + lineSpacing * 5); engine.block.setWidthMode(modifyBlock, 'Auto'); engine.block.setHeightMode(modifyBlock, 'Auto'); engine.block.setTextFontSize(modifyBlock, fontSize); // Replace "World" with "CE.SDK" (range 6-11) engine.block.replaceText(modifyBlock, 'CE.SDK', 6, 11); // Result: "Hello CE.SDK" // Create a centered text block with custom spacing const alignedBlock = engine.block.create('text'); engine.block.appendChild(page, alignedBlock); engine.block.replaceText(alignedBlock, 'Centered Text\nWith Line Spacing'); // Position at bottom of document engine.block.setPositionX(alignedBlock, margin); engine.block.setPositionY(alignedBlock, margin + lineSpacing * 6); // Set explicit dimensions for centered alignment engine.block.setWidth(alignedBlock, pageWidth - margin * 2); engine.block.setWidthMode(alignedBlock, 'Absolute'); engine.block.setHeightMode(alignedBlock, 'Auto'); engine.block.setTextFontSize(alignedBlock, fontSize); // Set horizontal alignment to center engine.block.setEnum(alignedBlock, 'text/horizontalAlignment', 'Center'); // Adjust line height (1.5 = 150% of font size) engine.block.setFloat(alignedBlock, 'text/lineHeight', 1.5); // Adjust letter spacing (0.05 = 5% of font size) engine.block.setFloat(alignedBlock, 'text/letterSpacing', 0.05); // Select the title block to show in the editor engine.block.select(titleBlock); } } export default Example; ``` This guide covers how to create text blocks, apply fonts and typefaces, style text ranges with colors and weights, configure auto-sizing, and apply text transformations. ## Create Text Blocks We create a text block using `engine.block.create('text')` and add it to the page hierarchy. The `replaceText()` method sets the initial content. ```typescript highlight-create-text // Create a title text block const titleBlock = engine.block.create('text'); engine.block.appendChild(page, titleBlock); // Set the text content using replaceText engine.block.replaceText(titleBlock, 'Welcome to CE.SDK'); // Configure auto-sizing so the block adjusts to content engine.block.setWidthMode(titleBlock, 'Auto'); engine.block.setHeightMode(titleBlock, 'Auto'); // Position at top of document engine.block.setPositionX(titleBlock, margin); engine.block.setPositionY(titleBlock, margin); ``` Text blocks default to auto-sizing, where both width and height adjust to fit the content. We position the block using `setPositionX()` and `setPositionY()`. ## Apply Fonts and Typefaces We set fonts for text blocks using `setFont()`, which requires a font file URI and a typeface configuration object. The typeface describes the font family and available variants. ```typescript highlight-set-font // Apply a custom font to the title // Font URIs point to hosted font files (TTF, OTF, WOFF, WOFF2) const fontUri = 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Caveat/Caveat-Bold.ttf'; const typeface = { name: 'Caveat', fonts: [ { uri: fontUri, subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; engine.block.setFont(titleBlock, fontUri, typeface); // Set font size (80pt for visibility) engine.block.setTextFontSize(titleBlock, fontSize); ``` CE.SDK supports TTF, OTF, WOFF, and WOFF2 font formats. The typeface object includes a `name`, and a `fonts` array describing each variant with its URI, weight, style, and sub-family. ## Style Text Ranges We apply rich text formatting to specific character ranges using range-based APIs. Each method accepts start and end indices to target specific portions of the text. ```typescript highlight-rich-text-styling // Create a text block with rich text styling (multiple colors and weights) const richTextBlock = engine.block.create('text'); engine.block.appendChild(page, richTextBlock); engine.block.replaceText(richTextBlock, 'Rich text with colors and styles'); // Position below title engine.block.setPositionX(richTextBlock, margin); engine.block.setPositionY(richTextBlock, margin + lineSpacing); engine.block.setWidthMode(richTextBlock, 'Auto'); engine.block.setHeightMode(richTextBlock, 'Auto'); engine.block.setTextFontSize(richTextBlock, fontSize); // Apply different colors to specific ranges // "Rich" (0-4) in blue engine.block.setTextColor( richTextBlock, { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }, 0, 4 ); // "text" (5-9) in green engine.block.setTextColor( richTextBlock, { r: 0.2, g: 0.7, b: 0.3, a: 1.0 }, 5, 9 ); // "colors" (15-21) in orange engine.block.setTextColor( richTextBlock, { r: 0.9, g: 0.5, b: 0.1, a: 1.0 }, 15, 21 ); // "styles" (26-32) in purple engine.block.setTextColor( richTextBlock, { r: 0.6, g: 0.2, b: 0.8, a: 1.0 }, 26, 32 ); ``` The range indices use UTF-16 code unit positions. We can apply: - **Colors** with `setTextColor(block, color, from, to)` - **Font weights** with `setTextFontWeight(block, weight, from, to)` - **Font styles** with `setTextFontStyle(block, style, from, to)` - **Font sizes** with `setTextFontSize(block, size, from, to)` ## Configure Auto-Sizing We control how text blocks resize using width and height modes. Setting `setHeightMode(block, 'Auto')` allows the block height to adjust based on content, while a fixed width causes text to wrap. ```typescript highlight-auto-sizing // Create a text block demonstrating auto-sizing with fixed width const autoSizeBlock = engine.block.create('text'); engine.block.appendChild(page, autoSizeBlock); engine.block.replaceText(autoSizeBlock, 'Auto-sizing text block'); // Position below rich text engine.block.setPositionX(autoSizeBlock, margin); engine.block.setPositionY(autoSizeBlock, margin + lineSpacing * 2); // Set fixed width but auto height - text wraps and height adjusts engine.block.setWidth(autoSizeBlock, pageWidth - margin * 2); engine.block.setWidthMode(autoSizeBlock, 'Absolute'); engine.block.setHeightMode(autoSizeBlock, 'Auto'); engine.block.setTextFontSize(autoSizeBlock, fontSize); ``` Available sizing modes include: - **'Auto'** - Dimension adjusts to fit content - **'Absolute'** - Dimension uses the explicit pixel value - **'Percent'** - Dimension uses a percentage of the parent ## Apply Text Case Transformations We transform text appearance without changing the underlying content using `setTextCase()`. This applies visual transformations while preserving the original text. ```typescript highlight-text-case // Create a text block demonstrating text case transformations const caseBlock = engine.block.create('text'); engine.block.appendChild(page, caseBlock); engine.block.replaceText(caseBlock, 'uppercase text'); // Position below auto-size block engine.block.setPositionX(caseBlock, margin); engine.block.setPositionY(caseBlock, margin + lineSpacing * 3); engine.block.setWidthMode(caseBlock, 'Auto'); engine.block.setHeightMode(caseBlock, 'Auto'); engine.block.setTextFontSize(caseBlock, fontSize); // Transform the entire text to uppercase without changing the source engine.block.setTextCase(caseBlock, 'Uppercase'); ``` Available text cases include 'Normal', 'Uppercase', 'Lowercase', and 'Titlecase'. ## Set Text Alignment and Spacing We configure text layout properties using `setEnum()` for alignment and `setFloat()` for spacing values. ```typescript highlight-text-alignment // Create a centered text block with custom spacing const alignedBlock = engine.block.create('text'); engine.block.appendChild(page, alignedBlock); engine.block.replaceText(alignedBlock, 'Centered Text\nWith Line Spacing'); // Position at bottom of document engine.block.setPositionX(alignedBlock, margin); engine.block.setPositionY(alignedBlock, margin + lineSpacing * 6); // Set explicit dimensions for centered alignment engine.block.setWidth(alignedBlock, pageWidth - margin * 2); engine.block.setWidthMode(alignedBlock, 'Absolute'); engine.block.setHeightMode(alignedBlock, 'Auto'); engine.block.setTextFontSize(alignedBlock, fontSize); // Set horizontal alignment to center engine.block.setEnum(alignedBlock, 'text/horizontalAlignment', 'Center'); // Adjust line height (1.5 = 150% of font size) engine.block.setFloat(alignedBlock, 'text/lineHeight', 1.5); // Adjust letter spacing (0.05 = 5% of font size) engine.block.setFloat(alignedBlock, 'text/letterSpacing', 0.05); ``` Horizontal alignment options include 'Left', 'Center', 'Right', and 'Auto'. Line height is a multiplier of the font size (1.5 = 150%), and letter spacing is a proportion of the font size. ## Toggle Bold and Italic We use convenience methods to toggle bold and italic formatting. These methods switch between the normal and formatted states. ```typescript highlight-toggle-bold-italic // Create a text block demonstrating bold/italic toggle const toggleBlock = engine.block.create('text'); engine.block.appendChild(page, toggleBlock); engine.block.replaceText(toggleBlock, 'Toggle Bold and Italic'); // Position below case block engine.block.setPositionX(toggleBlock, margin); engine.block.setPositionY(toggleBlock, margin + lineSpacing * 4); engine.block.setWidthMode(toggleBlock, 'Auto'); engine.block.setHeightMode(toggleBlock, 'Auto'); engine.block.setTextFontSize(toggleBlock, fontSize); // Set a font that supports bold/italic variants const robotoTypeface = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf', subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const }, { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const }, { uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Italic.ttf', subFamily: 'Italic', weight: 'normal' as const, style: 'italic' as const } ] }; engine.block.setFont( toggleBlock, 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/extensions/ly.img.cesdk.fonts/fonts/Roboto/Roboto-Regular.ttf', robotoTypeface ); // Toggle bold for "Bold" (7-11) engine.block.toggleBoldFont(toggleBlock, 7, 11); // Toggle italic for "Italic" (16-22) engine.block.toggleItalicFont(toggleBlock, 16, 22); ``` The `toggleBoldFont()` and `toggleItalicFont()` methods check if the font supports the variant before toggling. Use `canToggleBoldFont()` and `canToggleItalicFont()` to verify availability. ## Modify Text Content We replace or remove text using range-based operations. The `replaceText()` method substitutes text at specific positions while preserving surrounding formatting. ```typescript highlight-modify-text // Create a text block to demonstrate text modification const modifyBlock = engine.block.create('text'); engine.block.appendChild(page, modifyBlock); engine.block.replaceText(modifyBlock, 'Hello World'); // Position below toggle block engine.block.setPositionX(modifyBlock, margin); engine.block.setPositionY(modifyBlock, margin + lineSpacing * 5); engine.block.setWidthMode(modifyBlock, 'Auto'); engine.block.setHeightMode(modifyBlock, 'Auto'); engine.block.setTextFontSize(modifyBlock, fontSize); // Replace "World" with "CE.SDK" (range 6-11) engine.block.replaceText(modifyBlock, 'CE.SDK', 6, 11); // Result: "Hello CE.SDK" ``` When range parameters are omitted, `replaceText()` replaces the entire text content. The `removeText()` method deletes text within a specified range. ## Troubleshooting ### Text Not Displaying - Verify text content is set with `replaceText()` not `setString()` for text property - Check the block is added to the page hierarchy with `appendChild()` - Ensure the text block has sufficient width for content to render ### Font Not Loading - Verify the font URI is accessible and returns a valid font file - Check that the typeface configuration matches the font file's metadata - Confirm the font format is supported (TTF, OTF, WOFF, WOFF2) ### Range Styling Not Applying - Verify range indices are valid UTF-16 code unit positions - Check that the `from` index is less than the `to` index - Confirm the font supports the requested weight or style variant ## API Reference | Method | Description | | --- | --- | | `engine.block.create('text')` | Create a new text block | | `engine.block.replaceText(block, text, from, to)` | Set or replace text content | | `engine.block.removeText(block, from, to)` | Remove text range | | `engine.block.setFont(block, uri, typeface)` | Set font for entire block | | `engine.block.setTextColor(block, color, from, to)` | Set color for range | | `engine.block.setTextFontWeight(block, weight, from, to)` | Set font weight for range | | `engine.block.setTextFontStyle(block, style, from, to)` | Set font style for range | | `engine.block.setTextFontSize(block, size, from, to)` | Set font size for range | | `engine.block.setTextCase(block, case, from, to)` | Set text case transformation | | `engine.block.toggleBoldFont(block, from, to)` | Toggle bold weight | | `engine.block.toggleItalicFont(block, from, to)` | Toggle italic style | | `engine.block.setHeightMode(block, mode)` | Set height sizing mode | | `engine.block.setWidthMode(block, mode)` | Set width sizing mode | | `engine.block.setEnum(block, property, value)` | Set enum property (alignment) | | `engine.block.setFloat(block, property, value)` | Set float property (spacing) | ## Next Steps - [Style Text](https://img.ly/docs/cesdk/sveltekit/text/styling-269c48/) - Apply fills, strokes, and backgrounds to text - [Auto-Size Text](https://img.ly/docs/cesdk/sveltekit/text/auto-size-5331b3/) - Configure text blocks to resize dynamically - [Adjust Text Spacing](https://img.ly/docs/cesdk/sveltekit/text/adjust-spacing-c1a3b6/) - Fine-tune letter and line spacing - [Add Emojis](https://img.ly/docs/cesdk/sveltekit/text/emojis-510651/) - Display emoji characters with custom fonts - [Add Text Effects](https://img.ly/docs/cesdk/sveltekit/text/effects-2dc9fc/) - Apply visual effects to text blocks --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Adjust Text Spacing" description: "Control letter spacing, line height, and paragraph spacing in CE.SDK text blocks for precise typographic control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/adjust-spacing-c1a3b6/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Adjust Spacing](https://img.ly/docs/cesdk/sveltekit/text/adjust-spacing-c1a3b6/) --- Control letter spacing, line height, and paragraph spacing in text blocks using the Block API.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-adjust-spacing-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-adjust-spacing-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-adjust-spacing-browser/) CE.SDK provides three text spacing properties: `text/letterSpacing`, `text/lineHeight`, and `text/paragraphSpacing`. All are float properties controlled via `engine.block.setFloat()` and `engine.block.getFloat()`. Text spacing adjustments are programmatic-only; there is no built-in UI for these properties. ```typescript file=@cesdk_web_examples/guides-text-adjust-spacing-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from "@cesdk/cesdk-js"; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from "./package.json"; /** * CE.SDK Plugin: Adjust Text Spacing Guide * * Demonstrates programmatic text spacing capabilities: * - Letter spacing (tracking) * - Line height (leading) * - Paragraph spacing */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error("CE.SDK instance is required for this plugin"); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run("scene.create", { page: { width: 800, height: 600, unit: "Pixel" }, }); const engine = cesdk.engine; const page = engine.block.findByType("page")[0]; // Text block 1: Letter Spacing Demo const textLetterSpacing = engine.block.create("text"); engine.block.appendChild(page, textLetterSpacing); engine.block.setPositionX(textLetterSpacing, 50); engine.block.setPositionY(textLetterSpacing, 30); engine.block.setWidth(textLetterSpacing, 700); engine.block.setHeightMode(textLetterSpacing, "Auto"); engine.block.replaceText(textLetterSpacing, "CREATIVE STUDIO"); engine.block.setTextFontSize(textLetterSpacing, 48); // Set letter spacing - controls space between characters // Positive values increase spacing, negative values tighten characters engine.block.setFloat(textLetterSpacing, "text/letterSpacing", 0.1); // Read current letter spacing value const letterSpacing = engine.block.getFloat( textLetterSpacing, "text/letterSpacing" ); console.log("Letter spacing:", letterSpacing); // Text block 2: Line Height Demo const textLineHeight = engine.block.create("text"); engine.block.appendChild(page, textLineHeight); engine.block.setPositionX(textLineHeight, 50); engine.block.setPositionY(textLineHeight, 150); engine.block.setWidth(textLineHeight, 700); engine.block.setHeightMode(textLineHeight, "Auto"); engine.block.replaceText( textLineHeight, "Design your ideas\nBring them to life" ); engine.block.setTextFontSize(textLineHeight, 48); // Set line height - controls vertical distance between lines // Values are multipliers of font size (1.5 = 150% of font size) engine.block.setFloat(textLineHeight, "text/lineHeight", 1.8); // Read current line height value const lineHeight = engine.block.getFloat(textLineHeight, "text/lineHeight"); console.log("Line height:", lineHeight); // Text block 3: Paragraph Spacing Demo const textParagraphSpacing = engine.block.create("text"); engine.block.appendChild(page, textParagraphSpacing); engine.block.setPositionX(textParagraphSpacing, 50); engine.block.setPositionY(textParagraphSpacing, 350); engine.block.setWidth(textParagraphSpacing, 700); engine.block.setHeightMode(textParagraphSpacing, "Auto"); engine.block.replaceText( textParagraphSpacing, "Start Creating\nJoin Today" ); engine.block.setTextFontSize(textParagraphSpacing, 48); // Set paragraph spacing - adds space after paragraph breaks engine.block.setFloat(textParagraphSpacing, "text/paragraphSpacing", 4); // Read current paragraph spacing value const paragraphSpacing = engine.block.getFloat( textParagraphSpacing, "text/paragraphSpacing" ); console.log("Paragraph spacing:", paragraphSpacing); // Zoom to show all text blocks engine.scene.zoomToBlock(page, { padding: 40 }); } } export default Example; ``` This guide covers how to adjust letter spacing between characters, line height between lines, and paragraph spacing between paragraphs. ## Letter Spacing We control the horizontal space between characters using `engine.block.setFloat()` with the `text/letterSpacing` property. Positive values increase spacing, negative values tighten characters. ```typescript highlight-letter-spacing // Text block 1: Letter Spacing Demo const textLetterSpacing = engine.block.create("text"); engine.block.appendChild(page, textLetterSpacing); engine.block.setPositionX(textLetterSpacing, 50); engine.block.setPositionY(textLetterSpacing, 30); engine.block.setWidth(textLetterSpacing, 700); engine.block.setHeightMode(textLetterSpacing, "Auto"); engine.block.replaceText(textLetterSpacing, "CREATIVE STUDIO"); engine.block.setTextFontSize(textLetterSpacing, 48); // Set letter spacing - controls space between characters // Positive values increase spacing, negative values tighten characters engine.block.setFloat(textLetterSpacing, "text/letterSpacing", 0.1); // Read current letter spacing value const letterSpacing = engine.block.getFloat( textLetterSpacing, "text/letterSpacing" ); console.log("Letter spacing:", letterSpacing); ``` Letter spacing (also known as tracking) helps adjust text density for improved readability or visual effect. ## Line Height We control the vertical distance between lines using `engine.block.setFloat()` with the `text/lineHeight` property. Values are multipliers of the font size—for example, 1.5 means 150% of the font size. ```typescript highlight-line-height // Text block 2: Line Height Demo const textLineHeight = engine.block.create("text"); engine.block.appendChild(page, textLineHeight); engine.block.setPositionX(textLineHeight, 50); engine.block.setPositionY(textLineHeight, 150); engine.block.setWidth(textLineHeight, 700); engine.block.setHeightMode(textLineHeight, "Auto"); engine.block.replaceText( textLineHeight, "Design your ideas\nBring them to life" ); engine.block.setTextFontSize(textLineHeight, 48); // Set line height - controls vertical distance between lines // Values are multipliers of font size (1.5 = 150% of font size) engine.block.setFloat(textLineHeight, "text/lineHeight", 1.8); // Read current line height value const lineHeight = engine.block.getFloat(textLineHeight, "text/lineHeight"); console.log("Line height:", lineHeight); ``` Line height affects multi-line text. A single line of text won't show visible differences. ## Paragraph Spacing We add vertical space between paragraphs using `engine.block.setFloat()` with the `text/paragraphSpacing` property. The value is added after each paragraph break (newline characters in the text content). ```typescript highlight-paragraph-spacing // Text block 3: Paragraph Spacing Demo const textParagraphSpacing = engine.block.create("text"); engine.block.appendChild(page, textParagraphSpacing); engine.block.setPositionX(textParagraphSpacing, 50); engine.block.setPositionY(textParagraphSpacing, 350); engine.block.setWidth(textParagraphSpacing, 700); engine.block.setHeightMode(textParagraphSpacing, "Auto"); engine.block.replaceText( textParagraphSpacing, "Start Creating\nJoin Today" ); engine.block.setTextFontSize(textParagraphSpacing, 48); // Set paragraph spacing - adds space after paragraph breaks engine.block.setFloat(textParagraphSpacing, "text/paragraphSpacing", 4); // Read current paragraph spacing value const paragraphSpacing = engine.block.getFloat( textParagraphSpacing, "text/paragraphSpacing" ); console.log("Paragraph spacing:", paragraphSpacing); ``` Paragraph spacing only affects text with actual paragraph breaks. Single paragraphs won't show visible differences. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.setFloat()` | Set numeric spacing property values | | `engine.block.getFloat()` | Get current spacing property values | ### Properties Reference | Property | Type | Purpose | |----------|------|---------| | `text/letterSpacing` | Float | Space between characters (tracking) | | `text/lineHeight` | Float | Multiplier for vertical line distance | | `text/paragraphSpacing` | Float | Space added after paragraph breaks | ## Troubleshooting **Spacing changes not visible**: Ensure the text block contains enough content to show the effect—multiple characters for letter spacing, multiple lines for line height, multiple paragraphs for paragraph spacing. **Unexpected line height behavior**: Line height is a multiplier of font size, not an absolute value. A value of 1.5 means 150% of the current font size. **Paragraph spacing not working**: Verify the text content contains actual paragraph breaks (newline characters). --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Auto-Size" description: "Configure text blocks to automatically adapt their dimensions or font size for dynamic content." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/auto-size-5331b3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Auto-Size](https://img.ly/docs/cesdk/sveltekit/text/auto-size-5331b3/) --- Configure text blocks to automatically adapt their dimensions or font size for dynamic content.  > **Reading time:** 8 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-auto-size-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-auto-size-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-auto-size-browser/) CE.SDK provides two approaches for handling dynamic text content. **Auto size modes** let text blocks resize to fit their content, while **automatic font sizing** scales the font to fit within fixed boundaries. These techniques ensure text displays correctly regardless of content length, which is essential for templates and automation workflows. ```typescript file=@cesdk_web_examples/guides-text-auto-size-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Text Auto-Size Guide * * Demonstrates text auto-sizing capabilities: * - Auto width and height modes for content-fitting text * - Fixed dimensions with automatic font sizing * - Font size constraints (min/max) * - Detecting clipped text */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create text with Auto width and height - grows to fit content const autoText = engine.block.create('text'); engine.block.appendChild(page, autoText); engine.block.setWidthMode(autoText, 'Auto'); engine.block.setHeightMode(autoText, 'Auto'); engine.block.replaceText(autoText, 'Auto-sized text'); engine.block.setFloat(autoText, 'text/fontSize', 48); engine.block.setPositionX(autoText, 50); engine.block.setPositionY(autoText, 50); // Create text with fixed width and auto height - wraps and grows vertically const wrappedText = engine.block.create('text'); engine.block.appendChild(page, wrappedText); engine.block.setWidthMode(wrappedText, 'Absolute'); engine.block.setWidth(wrappedText, 250); engine.block.setHeightMode(wrappedText, 'Auto'); engine.block.replaceText( wrappedText, 'This text has a fixed width but auto height, so it wraps to multiple lines' ); engine.block.setFloat(wrappedText, 'text/fontSize', 48); engine.block.setPositionX(wrappedText, 50); engine.block.setPositionY(wrappedText, 150); // Create text with automatic font sizing - scales to fit fixed dimensions const scaledText = engine.block.create('text'); engine.block.appendChild(page, scaledText); engine.block.setWidthMode(scaledText, 'Absolute'); engine.block.setHeightMode(scaledText, 'Absolute'); engine.block.setWidth(scaledText, 300); engine.block.setHeight(scaledText, 80); engine.block.setBool(scaledText, 'text/automaticFontSizeEnabled', true); engine.block.replaceText(scaledText, 'Auto-scaled font'); engine.block.setPositionX(scaledText, 50); engine.block.setPositionY(scaledText, 350); // Add background to visualize the text frame engine.block.setBool(scaledText, 'backgroundColor/enabled', true); engine.block.setColor(scaledText, 'backgroundColor/color', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Create text with font size constraints // Note: Constraints only affect automatic sizing, not manual UI changes const constrainedText = engine.block.create('text'); engine.block.appendChild(page, constrainedText); engine.block.setWidthMode(constrainedText, 'Absolute'); engine.block.setHeightMode(constrainedText, 'Absolute'); engine.block.setWidth(constrainedText, 300); engine.block.setHeight(constrainedText, 80); engine.block.setBool( constrainedText, 'text/automaticFontSizeEnabled', true ); // Set min and max font size constraints for automatic sizing engine.block.setFloat(constrainedText, 'text/minAutomaticFontSize', 12); engine.block.setFloat(constrainedText, 'text/maxAutomaticFontSize', 48); // Use longer text to demonstrate automatic scaling within constraints engine.block.replaceText( constrainedText, 'Edit this text to see automatic font scaling (12-48pt range)' ); engine.block.setPositionX(constrainedText, 50); engine.block.setPositionY(constrainedText, 460); // Add background to visualize the text frame engine.block.setBool(constrainedText, 'backgroundColor/enabled', true); engine.block.setColor(constrainedText, 'backgroundColor/color', { r: 0.9, g: 0.95, b: 1.0, a: 1.0 }); // Query the size modes and automatic font size state const widthMode = engine.block.getWidthMode(autoText); const heightMode = engine.block.getHeightMode(autoText); const isAutoFontSize = engine.block.getBool( scaledText, 'text/automaticFontSizeEnabled' ); console.log('Auto text width mode:', widthMode); console.log('Auto text height mode:', heightMode); console.log('Scaled text has automatic font sizing:', isAutoFontSize); // Check for clipped lines (text exceeding frame bounds) const hasClippedLines = engine.block.getBool( scaledText, 'text/hasClippedLines' ); console.log('Scaled text has clipped lines:', hasClippedLines); // Add labels for each example const createLabel = (text: string, x: number, y: number) => { const label = engine.block.create('text'); engine.block.appendChild(page, label); engine.block.setWidthMode(label, 'Auto'); engine.block.setHeightMode(label, 'Auto'); engine.block.replaceText(label, text); engine.block.setFloat(label, 'text/fontSize', 32); engine.block.setTextColor(label, { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }); engine.block.setPositionX(label, x); engine.block.setPositionY(label, y); }; createLabel('Auto Width + Auto Height', 50, 20); createLabel('Fixed Width + Auto Height', 50, 120); createLabel('Automatic Font Sizing', 50, 320); createLabel('With Min/Max Constraints', 50, 430); // Select the first text block to show it in the inspector engine.block.select(autoText); } } export default Example; ``` This guide covers configuring size modes, enabling automatic font sizing, setting font size constraints, and detecting clipped text. ## Text Size Modes CE.SDK offers three size modes for text block dimensions: 'Absolute', 'Percent', and 'Auto'. We use `engine.block.setWidthMode()` and `engine.block.setHeightMode()` to configure how text blocks handle their dimensions. ### Auto Width and Height When both dimensions use 'Auto' mode, the text block expands freely to fit its content. This works well for single-line text that grows horizontally. ```typescript highlight=highlight-auto-width-height // Create text with Auto width and height - grows to fit content const autoText = engine.block.create('text'); engine.block.appendChild(page, autoText); engine.block.setWidthMode(autoText, 'Auto'); engine.block.setHeightMode(autoText, 'Auto'); engine.block.replaceText(autoText, 'Auto-sized text'); engine.block.setFloat(autoText, 'text/fontSize', 48); engine.block.setPositionX(autoText, 50); engine.block.setPositionY(autoText, 50); ``` We set both width and height modes to 'Auto', and the text block automatically sizes itself based on the content and font size. ### Fixed Width with Auto Height For wrapped multi-line text, we set a specific width while allowing height to adjust automatically. The text wraps within the defined width and the block grows vertically as needed. ```typescript highlight=highlight-fixed-width-auto-height // Create text with fixed width and auto height - wraps and grows vertically const wrappedText = engine.block.create('text'); engine.block.appendChild(page, wrappedText); engine.block.setWidthMode(wrappedText, 'Absolute'); engine.block.setWidth(wrappedText, 250); engine.block.setHeightMode(wrappedText, 'Auto'); engine.block.replaceText( wrappedText, 'This text has a fixed width but auto height, so it wraps to multiple lines' ); engine.block.setFloat(wrappedText, 'text/fontSize', 48); engine.block.setPositionX(wrappedText, 50); engine.block.setPositionY(wrappedText, 150); ``` This pattern is useful for template placeholders where the width should remain constant but content length varies. ### Querying Size Modes We check current modes using `engine.block.getWidthMode()` and `engine.block.getHeightMode()`. These return 'Absolute', 'Percent', or 'Auto'. ```typescript highlight=highlight-query-size-modes // Query the size modes and automatic font size state const widthMode = engine.block.getWidthMode(autoText); const heightMode = engine.block.getHeightMode(autoText); const isAutoFontSize = engine.block.getBool( scaledText, 'text/automaticFontSizeEnabled' ); console.log('Auto text width mode:', widthMode); console.log('Auto text height mode:', heightMode); console.log('Scaled text has automatic font sizing:', isAutoFontSize); ``` ## Automatic Font Sizing For text blocks with fixed dimensions, we enable automatic font sizing to scale the font to fit within the frame. The engine calculates the largest font size that fits the content. ```typescript highlight=highlight-automatic-font-sizing // Create text with automatic font sizing - scales to fit fixed dimensions const scaledText = engine.block.create('text'); engine.block.appendChild(page, scaledText); engine.block.setWidthMode(scaledText, 'Absolute'); engine.block.setHeightMode(scaledText, 'Absolute'); engine.block.setWidth(scaledText, 300); engine.block.setHeight(scaledText, 80); engine.block.setBool(scaledText, 'text/automaticFontSizeEnabled', true); engine.block.replaceText(scaledText, 'Auto-scaled font'); engine.block.setPositionX(scaledText, 50); engine.block.setPositionY(scaledText, 350); // Add background to visualize the text frame engine.block.setBool(scaledText, 'backgroundColor/enabled', true); engine.block.setColor(scaledText, 'backgroundColor/color', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); ``` We first set both width and height to 'Absolute' mode with specific dimensions, then enable automatic font sizing with `text/automaticFontSizeEnabled`. The background helps visualize the text frame boundaries. ### Setting Font Size Constraints We constrain the automatic scaling range using `text/minAutomaticFontSize` and `text/maxAutomaticFontSize` properties. These constraints apply only to the automatic sizing algorithm—they do not restrict manual font size changes made through the UI. This prevents text from becoming too small to read or too large for the design when content length varies. ```typescript highlight=highlight-font-size-constraints // Create text with font size constraints // Note: Constraints only affect automatic sizing, not manual UI changes const constrainedText = engine.block.create('text'); engine.block.appendChild(page, constrainedText); engine.block.setWidthMode(constrainedText, 'Absolute'); engine.block.setHeightMode(constrainedText, 'Absolute'); engine.block.setWidth(constrainedText, 300); engine.block.setHeight(constrainedText, 80); engine.block.setBool( constrainedText, 'text/automaticFontSizeEnabled', true ); // Set min and max font size constraints for automatic sizing engine.block.setFloat(constrainedText, 'text/minAutomaticFontSize', 12); engine.block.setFloat(constrainedText, 'text/maxAutomaticFontSize', 48); // Use longer text to demonstrate automatic scaling within constraints engine.block.replaceText( constrainedText, 'Edit this text to see automatic font scaling (12-48pt range)' ); engine.block.setPositionX(constrainedText, 50); engine.block.setPositionY(constrainedText, 460); // Add background to visualize the text frame engine.block.setBool(constrainedText, 'backgroundColor/enabled', true); engine.block.setColor(constrainedText, 'backgroundColor/color', { r: 0.9, g: 0.95, b: 1.0, a: 1.0 }); ``` With constraints set, the font size automatically scales within the 12-48pt range as content length changes. When the user types more text, the font shrinks (down to the minimum). When they delete text, the font grows (up to the maximum). ## Text Clipping When text exceeds its frame boundaries without auto-sizing, lines may be clipped. We use `engine.block.getBool()` with `text/hasClippedLines` to detect overflow. ```typescript highlight=highlight-text-clipping // Check for clipped lines (text exceeding frame bounds) const hasClippedLines = engine.block.getBool( scaledText, 'text/hasClippedLines' ); console.log('Scaled text has clipped lines:', hasClippedLines); ``` Detecting clipped text helps identify when automatic font sizing should be enabled or when the frame dimensions need adjustment. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.setWidthMode()` | Set width mode: 'Absolute', 'Percent', 'Auto' | | `engine.block.getWidthMode()` | Query current width mode | | `engine.block.setHeightMode()` | Set height mode: 'Absolute', 'Percent', 'Auto' | | `engine.block.getHeightMode()` | Query current height mode | | `engine.block.setWidth()` | Set block width value | | `engine.block.setHeight()` | Set block height value | | `engine.block.setBool()` | Enable/disable boolean properties | | `engine.block.getBool()` | Query boolean property values | | `engine.block.setFloat()` | Set numeric property values | | `engine.block.getFloat()` | Query numeric property values | ## Troubleshooting **Text not resizing**: Verify the correct size mode is set. Auto mode requires both `setWidthMode()` and `setHeightMode()` to be called. **Font size not scaling**: Ensure `text/automaticFontSizeEnabled` is true and the block has fixed (Absolute) dimensions. **Text too small with automatic sizing**: Set an appropriate `text/minAutomaticFontSize` to ensure readability. **Text clipped unexpectedly**: Check if the frame has fixed dimensions without automatic font sizing. Consider enabling `text/automaticFontSizeEnabled` or using Auto height mode. **Auto mode ignored**: Make sure no conflicting explicit size values override the Auto behavior. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Customize Fonts" description: "Load and manage custom fonts to match brand guidelines or user preferences." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/custom-fonts-9565b3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Customize Fonts](https://img.ly/docs/cesdk/sveltekit/text/custom-fonts-9565b3/) --- Load and configure custom fonts in CE.SDK to match brand guidelines or provide users with a curated font selection.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fonts-typefaces-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fonts-typefaces-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-fonts-typefaces-browser/) CE.SDK includes a set of default typefaces, but you can customize the available fonts by creating custom asset sources with your own typeface definitions. Fonts are managed through the asset system and displayed in the editor UI via the typeface library. ```typescript file=@cesdk_web_examples/guides-fonts-typefaces-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import type CreativeEngine from '@cesdk/cesdk-js/node_modules/@cesdk/engine'; import packageJson from './package.json'; class CustomFontsExample implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); const engine = cesdk.engine; const orbitronTypeface = createOrbitronTypeface(); const sourceId = 'my-custom-typefaces'; engine.asset.addLocalSource(sourceId); await engine.asset.addAssetToSource(sourceId, { id: 'orbitron', payload: { typeface: orbitronTypeface } }); cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['my-custom-typefaces'] }); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Create a text block and apply the custom font const page = engine.block.findByType('page')[0]; if (page) { const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Set the text content engine.block.replaceText(textBlock, 'Custom Font Example'); // Configure auto-sizing so the block adjusts to content engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Apply the custom font to the text block const fontUri = orbitronTypeface.fonts[0].uri; engine.block.setFont(textBlock, fontUri, orbitronTypeface); // Set font size engine.block.setTextFontSize(textBlock, 24); // Center the text block on the page centerBlockOnPage(engine, textBlock, page); // Select the text block engine.block.select(textBlock); } } } export default CustomFontsExample; // ============================================================================ // Typeface Definitions // ============================================================================ type DesignBlockId = number; interface TypefaceFont { uri: string; subFamily: string; weight: | 'thin' | 'extraLight' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'heavy'; style: 'normal' | 'italic'; } interface Typeface { name: string; fonts: TypefaceFont[]; } /** * Builds a full URL for a font file served from the public directory */ function buildFontUri(filename: string): string { return `${window.location.protocol}//${window.location.host}/${filename}`; } /** * Creates the Orbitron typeface with properly resolved font URIs */ function createOrbitronTypeface(): Typeface { return { name: 'Orbitron', fonts: [ { uri: buildFontUri('Orbitron-Regular.ttf'), subFamily: 'Regular', weight: 'normal', style: 'normal' }, { uri: buildFontUri('Orbitron-Bold.ttf'), subFamily: 'Bold', weight: 'bold', style: 'normal' } ] }; } // ============================================================================ // Helper Functions // ============================================================================ /** * Centers a block on a page by calculating and setting its position */ function centerBlockOnPage( engine: CreativeEngine, block: DesignBlockId, page: DesignBlockId ): void { const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const blockWidth = engine.block.getFrameWidth(block); const blockHeight = engine.block.getFrameHeight(block); engine.block.setPositionX(block, (pageWidth - blockWidth) / 2); engine.block.setPositionY(block, (pageHeight - blockHeight) / 2); } ``` This guide covers how to define typefaces with multiple font weights and styles, create a custom typeface asset source, update the typeface library in the editor UI, and apply fonts programmatically to text blocks. ## Typeface and Font Structure A typeface in CE.SDK represents a font family containing multiple font variants. Each typeface has a `name` property displayed in the UI and a `fonts` array containing individual font definitions. Each font in the array requires: - `uri` - Path to the font file (TTF, OTF, WOFF, or WOFF2) - `subFamily` - Display name for this font variant (e.g., "Regular", "Bold", "Italic") - `weight` - Font weight: `thin`, `extraLight`, `light`, `normal`, `medium`, `semiBold`, `bold`, `extraBold`, or `heavy` - `style` - Font style: `normal` or `italic` ```typescript highlight=highlight-typeface-structure interface TypefaceFont { uri: string; subFamily: string; weight: | 'thin' | 'extraLight' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'heavy'; style: 'normal' | 'italic'; } interface Typeface { name: string; fonts: TypefaceFont[]; } ``` ## Create a Custom Typeface Asset Source To make custom fonts available in the editor, we create a local asset source and add typeface assets to it. Each asset must include a `payload.typeface` property containing the typeface definition. We first create the source with `engine.asset.addLocalSource()`, then add typeface assets with `engine.asset.addAssetToSource()`: ```typescript highlight=highlight-typeface-source const sourceId = 'my-custom-typefaces'; engine.asset.addLocalSource(sourceId); await engine.asset.addAssetToSource(sourceId, { id: 'orbitron', payload: { typeface: orbitronTypeface } }); ``` The `name` property defines how the typeface appears in the font dropdown: ```typescript highlight=highlight-typeface-name name: 'Orbitron', ``` The `fonts` array defines each available font variant. Here we add both Regular and Bold weights: ```typescript highlight=highlight-typeface-fonts fonts: [ { uri: buildFontUri('Orbitron-Regular.ttf'), subFamily: 'Regular', weight: 'normal', style: 'normal' }, { uri: buildFontUri('Orbitron-Bold.ttf'), subFamily: 'Bold', weight: 'bold', style: 'normal' } ] ``` ## Update the Typeface Library After creating the custom typeface source, we update the typeface library entry to control which fonts appear in the editor's font dropdown. Use `cesdk.ui.updateAssetLibraryEntry()` with the `ly.img.typefaces` entry ID. To replace the default typefaces entirely with your custom fonts: ```typescript highlight=highlight-update-library cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['my-custom-typefaces'] }); ``` To extend the default typefaces (keeping them alongside your custom fonts), include both source IDs: ```typescript cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['ly.img.typeface', 'my-custom-typefaces'] }); ``` The order in `sourceIds` determines the display order in the UI. ## Apply Fonts Programmatically You can apply fonts to text blocks without relying on the UI using the block API. CE.SDK provides two methods with different behaviors: **setFont** - Sets the font for an entire text block and resets all text formatting: ```typescript engine.block.setFont(textBlock, fontFileUri, typeface); ``` **setTypeface** - Applies a typeface to a text range while preserving existing formatting: ```typescript engine.block.setTypeface(textBlock, typeface, from, to); ``` To query the current font applied to a text block: ```typescript // Get the base typeface of a text block const typeface = engine.block.getTypeface(textBlock); // Get unique typefaces within a text range const typefaces = engine.block.getTypefaces(textBlock, from, to); ``` Here's a complete example that creates a text block and applies a custom font: ```typescript highlight=highlight-apply-font // Create a text block and apply the custom font const page = engine.block.findByType('page')[0]; if (page) { const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Set the text content engine.block.replaceText(textBlock, 'Custom Font Example'); // Configure auto-sizing so the block adjusts to content engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Apply the custom font to the text block const fontUri = orbitronTypeface.fonts[0].uri; engine.block.setFont(textBlock, fontUri, orbitronTypeface); // Set font size engine.block.setTextFontSize(textBlock, 24); // Center the text block on the page centerBlockOnPage(engine, textBlock, page); // Select the text block engine.block.select(textBlock); } ``` ## Troubleshooting **Font not appearing in UI**: Verify the asset source is registered with `engine.asset.addLocalSource()` and that `updateAssetLibraryEntry` is called with the correct source ID. **Font not loading**: Check that the font file URI is accessible and returns a valid font file with the correct MIME type. Use browser developer tools to verify the network request. **Font weight/style not available**: Ensure the typeface definition includes font entries for the requested weight and style combinations. If you only define Regular and Bold, Italic variants won't be available. **getTypeface() throws error**: New text blocks don't have an explicit typeface until `setFont()` is called. Handle this case in your code. ## API Reference | Method | Purpose | | ------ | ------- | | `engine.asset.addLocalSource(sourceId)` | Create a local asset source for custom typefaces | | `engine.asset.addAssetToSource(sourceId, asset)` | Add a typeface asset to the source | | `cesdk.ui.updateAssetLibraryEntry(entryId, options)` | Update which sources appear in the font dropdown | | `engine.block.setFont(block, fontUri, typeface)` | Set font for entire text block, resets formatting | | `engine.block.setTypeface(block, typeface, from, to)` | Apply typeface to text range, preserves formatting | | `engine.block.getTypeface(block)` | Get the base typeface of a text block | | `engine.block.getTypefaces(block, from, to)` | Get unique typefaces within a text range | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Decorations" description: "Add underline, strikethrough, and overline decorations to text with customizable styles, colors, and thickness." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/decorations-d3c0a1/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Text Decorations](https://img.ly/docs/cesdk/sveltekit/text/decorations-d3c0a1/) --- Add underline, strikethrough, and overline decorations to text blocks with configurable styles, colors, and thickness.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-decorations-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-decorations-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-decorations-browser/) CE.SDK supports three types of text decorations: underline, strikethrough, and overline. We can toggle decorations on and off, customize them with different line styles, and apply them to specific character ranges. All active decoration lines share the same style and thickness settings. ```typescript file=@cesdk_web_examples/guides-text-decorations-browser/browser.ts reference-only import type { EditorPlugin,EditorPluginContext } from "@cesdk/cesdk-js"; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from "./package.json"; /** * CE.SDK Plugin: Text Decorations Guide * * Demonstrates text decoration capabilities: * - Toggling underline, strikethrough, and overline * - Querying current decorations * - Setting custom decoration styles, colors, and thickness * - Applying decorations to character ranges * - Combining multiple decoration types */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error("CE.SDK instance is required for this plugin"); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ["ly.img.image.upload"] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ "ly.img.templates.blank.*", "ly.img.templates.presentation.*", "ly.img.templates.print.*", "ly.img.templates.social.*", "ly.img.image.*", ], }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run("scene.create", { page: { width: 800, height: 600, unit: "Pixel" }, }); const engine = cesdk.engine; const page = engine.block.findByType("page")[0]; // Create a text block to demonstrate decorations const text = engine.block.create("text"); engine.block.appendChild(page, text); engine.block.setPositionX(text, 100); engine.block.setPositionY(text, 100); engine.block.setWidthMode(text, "Auto"); engine.block.setHeightMode(text, "Auto"); engine.block.replaceText(text, "Hello CE.SDK"); // Toggle underline on the entire text engine.block.toggleTextDecorationUnderline(text); // Toggle strikethrough on the entire text engine.block.toggleTextDecorationStrikethrough(text); // Toggle overline on the entire text engine.block.toggleTextDecorationOverline(text); // Calling toggle again removes the decoration engine.block.toggleTextDecorationOverline(text); // Query the current decoration configurations // Returns a list of unique TextDecorationConfig objects in the range const decorations = engine.block.getTextDecorations(text); // Each config contains: lines, style, underlineColor, underlineThickness, underlineOffset, skipInk // Set a specific decoration style // Available styles: 'Solid', 'Double', 'Dotted', 'Dashed', 'Wavy' engine.block.setTextDecoration(text, { lines: ["Underline"], style: "Dashed", }); // Set a custom underline color (only applies to underlines) // Strikethrough and overline always use the text color engine.block.setTextDecoration(text, { lines: ["Underline"], underlineColor: { r: 1, g: 0, b: 0, a: 1 }, }); // Adjust the underline thickness // Default is 1.0, values above 1.0 make the line thicker engine.block.setTextDecoration(text, { lines: ["Underline"], underlineThickness: 2.0, }); // Adjust the underline position relative to the font default // 0 = font default, positive values move further from baseline, negative values move closer engine.block.setTextDecoration(text, { lines: ["Underline"], underlineOffset: 0.1, }); // Apply decorations to a specific character range using UTF-16 indices // Toggle underline on characters 0-5 ("Hello") engine.block.toggleTextDecorationUnderline(text, 0, 5); // Set strikethrough on characters 6-12 ("CE.SDK") engine.block.setTextDecoration(text, { lines: ["Strikethrough"] }, 6, 12); // Query decorations in a specific range const subrangeDecorations = engine.block.getTextDecorations(text, 0, 5); // Combine multiple decoration lines on the same text // All active lines share the same style and thickness engine.block.setTextDecoration(text, { lines: ["Underline", "Strikethrough"], style: "Solid", }); // Remove all decorations engine.block.setTextDecoration(text, { lines: ["None"] }); // Select the text block to show it in the inspector engine.block.setSelected(text, true); // Suppress unused variable warnings void decorations; void subrangeDecorations; } } export default Example; ``` This guide covers toggling decorations, querying current state, setting custom styles, adjusting color and thickness, and applying decorations to character subranges. ## Toggle Decorations We toggle decorations using `engine.block.toggleTextDecorationUnderline()`, `engine.block.toggleTextDecorationStrikethrough()`, and `engine.block.toggleTextDecorationOverline()`. If all characters in the range already have the decoration, it is removed; otherwise, it is added to all. ```typescript highlight-toggle-decorations // Toggle underline on the entire text engine.block.toggleTextDecorationUnderline(text); // Toggle strikethrough on the entire text engine.block.toggleTextDecorationStrikethrough(text); // Toggle overline on the entire text engine.block.toggleTextDecorationOverline(text); // Calling toggle again removes the decoration engine.block.toggleTextDecorationOverline(text); ``` ## Query Decorations We query the current decorations using `engine.block.getTextDecorations()`. It returns an ordered list of unique `TextDecorationConfig` objects. Each config includes the active lines, style, optional underline color, thickness multiplier, underline offset, and skip-ink setting. ```typescript highlight-query-decorations // Query the current decoration configurations // Returns a list of unique TextDecorationConfig objects in the range const decorations = engine.block.getTextDecorations(text); // Each config contains: lines, style, underlineColor, underlineThickness, underlineOffset, skipInk ``` ## Custom Decoration Styles We set a specific decoration style using `engine.block.setTextDecoration()` with a `TextDecorationConfig`. Available styles are `'Solid'` (default), `'Double'`, `'Dotted'`, `'Dashed'`, and `'Wavy'`. ```typescript highlight-custom-style // Set a specific decoration style // Available styles: 'Solid', 'Double', 'Dotted', 'Dashed', 'Wavy' engine.block.setTextDecoration(text, { lines: ["Underline"], style: "Dashed", }); ``` ## Underline Color We set a custom underline color that differs from the text color. The `underlineColor` property only applies to underlines; strikethrough and overline always use the text color. ```typescript highlight-underline-color // Set a custom underline color (only applies to underlines) // Strikethrough and overline always use the text color engine.block.setTextDecoration(text, { lines: ["Underline"], underlineColor: { r: 1, g: 0, b: 0, a: 1 }, }); ``` ## Decoration Thickness We adjust the underline thickness using the `underlineThickness` property. The default is `1.0`. Values above `1.0` make the underline thicker. ```typescript highlight-thickness // Adjust the underline thickness // Default is 1.0, values above 1.0 make the line thicker engine.block.setTextDecoration(text, { lines: ["Underline"], underlineThickness: 2.0, }); ``` ## Underline Offset We adjust the underline position using the `underlineOffset` property, which acts as a relative multiplier on the font-default distance. The actual position is computed as `fontDefault * (1 + underlineOffset)`. The default is `0`, which uses the font's default underline position. Positive values move the underline proportionally further from the baseline, negative values move it proportionally closer. ```typescript highlight-offset // Adjust the underline position relative to the font default // 0 = font default, positive values move further from baseline, negative values move closer engine.block.setTextDecoration(text, { lines: ["Underline"], underlineOffset: 0.1, }); ``` ## Subrange Decorations We apply decorations to specific character ranges using UTF-16 indices `[from, to)`. Both toggle and set operations accept range parameters. ```typescript highlight-subrange // Apply decorations to a specific character range using UTF-16 indices // Toggle underline on characters 0-5 ("Hello") engine.block.toggleTextDecorationUnderline(text, 0, 5); // Set strikethrough on characters 6-12 ("CE.SDK") engine.block.setTextDecoration(text, { lines: ["Strikethrough"] }, 6, 12); // Query decorations in a specific range const subrangeDecorations = engine.block.getTextDecorations(text, 0, 5); ``` ## Combine Decorations We combine multiple decoration types by passing an array of lines to `setTextDecoration()`. All active lines share the same style and thickness. ```typescript highlight-combine // Combine multiple decoration lines on the same text // All active lines share the same style and thickness engine.block.setTextDecoration(text, { lines: ["Underline", "Strikethrough"], style: "Solid", }); ``` ## Remove Decorations We remove all decorations by setting the lines to `['None']`. ```typescript highlight-remove // Remove all decorations engine.block.setTextDecoration(text, { lines: ["None"] }); ``` ## API Reference | Method | Purpose | |--------|---------| | `engine.block.toggleTextDecorationUnderline()` | Toggle underline on entire text or range | | `engine.block.toggleTextDecorationStrikethrough()` | Toggle strikethrough on entire text or range | | `engine.block.toggleTextDecorationOverline()` | Toggle overline on entire text or range | | `engine.block.getTextDecorations()` | Get ordered list of decoration configs in range | | `engine.block.setTextDecoration()` | Set decoration config for entire text or range | ## Troubleshooting **Decoration not visible**: Ensure the text block has content and the decoration lines are not set to `'None'`. **Underline color not changing**: The `underlineColor` property only applies to underlines. Strikethrough and overline always use the text color. **Toggle not adding decoration**: If all characters in the range already have the decoration, toggle removes it instead of adding it. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Edit Text" description: "Edit text content directly on the canvas or through the properties panel." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/edit-c5106b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Edit Text](https://img.ly/docs/cesdk/sveltekit/text/edit-c5106b/) --- Edit text content programmatically with range-based APIs for replacing, formatting, and querying text.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-edit-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-edit-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-edit-browser/) CE.SDK provides text editing through two approaches: interactive canvas editing where users type directly into text blocks, and programmatic editing through range-based APIs. This guide focuses on the programmatic approach, covering how to replace text, apply formatting to specific ranges, and query text properties. ```typescript file=@cesdk_web_examples/guides-text-edit-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from "@cesdk/cesdk-js"; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from "./package.json"; /** * CE.SDK Plugin: Edit Text Guide * * Demonstrates text editing capabilities: * - Replacing and removing text content * - Applying formatting to text ranges * - Managing cursor position and selection * - Querying line information */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error("CE.SDK instance is required for this plugin"); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run("scene.create", { page: { width: 800, height: 600, unit: "Pixel" }, }); const engine = cesdk.engine; const page = engine.block.findByType("page")[0]; // Create a text block const text = engine.block.create("text"); engine.block.appendChild(page, text); engine.block.setPositionX(text, 50); engine.block.setPositionY(text, 100); engine.block.setWidthMode(text, "Auto"); engine.block.setHeightMode(text, "Auto"); // Define a typeface with bold variant support const typeface = { name: "Roboto", fonts: [ { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf", subFamily: "Regular", }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf", subFamily: "Bold", weight: "bold" as const, }, ], }; // Set the font (required for bold weight support) engine.block.setFont(text, typeface.fonts[0].uri, typeface); // Replace the entire text content engine.block.replaceText(text, "Hello World!"); // Replace "World" with "CE.SDK" (positions 6-11) engine.block.replaceText(text, "CE.SDK", 6, 11); // Insert " Guide" before the exclamation mark (position 12) engine.block.replaceText(text, " Guide", 12, 12); // Remove "Hello " to get "CE.SDK Guide!" (positions 0-6) engine.block.removeText(text, 0, 6); // Apply bold formatting to "CE.SDK" (positions 0-6) engine.block.setTextFontWeight(text, "bold", 0, 6); // Apply color to "Guide" (positions 7-12) engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 7, 12); // Set font size for the entire block engine.block.setTextFontSize(text, 240); // Query formatting properties const colors = engine.block.getTextColors(text); const weights = engine.block.getTextFontWeights(text); const sizes = engine.block.getTextFontSizes(text); console.log("Text colors:", colors); console.log("Font weights:", weights); console.log("Font sizes:", sizes); // Query line information const lineCount = engine.block.getTextVisibleLineCount(text); console.log("Line count:", lineCount); if (lineCount > 0) { const lineContent = engine.block.getTextVisibleLineContent(text, 0); console.log("First line content:", lineContent); const lineBounds = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH( text, 0 ); console.log("First line bounds:", lineBounds); } // Get raw font metrics from a font file URI const fontFileUri = typeface.fonts[0].uri; const metrics = await engine.editor.getFontMetrics(fontFileUri); console.log("Ascender:", metrics.ascender); console.log("Descender:", metrics.descender); console.log("Units per em:", metrics.unitsPerEm); console.log("Line Gap:", metrics.lineGap); console.log("Cap Height:", metrics.capHeight); console.log("x-Height:", metrics.xHeight); console.log("Underline Offset:", metrics.underlineOffset); console.log("Underline Size:", metrics.underlineSize); console.log("Strikeout Offset:", metrics.strikeoutOffset); console.log("Strikeout Size:", metrics.strikeoutSize); // Enable auto-fit zoom to keep the page visible when resizing engine.scene.zoomToBlock(page); engine.scene.enableZoomAutoFit(page, "Both", 40, 40); // Select the text block to show it in the inspector engine.block.select(text); } } export default Example; ``` This guide covers creating text blocks, replacing and removing text content, applying formatting to character ranges, and querying line information. ## Creating a Text Block We first create a text block and position it on the page. Text blocks support automatic sizing based on content using the `Auto` width and height modes. ```typescript highlight=highlight-create-text // Create a text block const text = engine.block.create("text"); engine.block.appendChild(page, text); engine.block.setPositionX(text, 50); engine.block.setPositionY(text, 100); engine.block.setWidthMode(text, "Auto"); engine.block.setHeightMode(text, "Auto"); ``` The text block is appended to the page and positioned with explicit X and Y coordinates. Setting width and height modes to `Auto` allows the block to resize based on its content. ## Setting a Typeface We define a typeface with font variants to enable formatting options like bold. The typeface must include variants for each weight or style you want to apply. ```typescript highlight=highlight-set-typeface // Define a typeface with bold variant support const typeface = { name: "Roboto", fonts: [ { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf", subFamily: "Regular", }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf", subFamily: "Bold", weight: "bold" as const, }, ], }; // Set the font (required for bold weight support) engine.block.setFont(text, typeface.fonts[0].uri, typeface); ``` The `setFont()` method sets the font and typeface for the text block. Once set, the block supports all formatting options defined in the typeface's font variants. ## Replacing and Removing Text We modify text content using `engine.block.replaceText()` and `engine.block.removeText()`. Text positions use UTF-16 indices where `[from, to)` defines the range. ```typescript highlight=highlight-replace-text // Replace the entire text content engine.block.replaceText(text, "Hello World!"); // Replace "World" with "CE.SDK" (positions 6-11) engine.block.replaceText(text, "CE.SDK", 6, 11); // Insert " Guide" before the exclamation mark (position 12) engine.block.replaceText(text, " Guide", 12, 12); ``` The `replaceText()` method can replace all text (when no indices provided), insert at a position (when `from` equals `to`), or replace a range. Here we start with a full replacement, insert text, then replace a portion. ```typescript highlight=highlight-remove-text // Remove "Hello " to get "CE.SDK Guide!" (positions 0-6) engine.block.removeText(text, 0, 6); ``` The `removeText()` method deletes characters in the specified range. When we omit indices, operations apply to the entire text content. ## Applying Text Formatting We apply formatting to specific character ranges using setter methods. Each method accepts optional `from` and `to` parameters to target specific ranges. ```typescript highlight=highlight-set-formatting // Apply bold formatting to "CE.SDK" (positions 0-6) engine.block.setTextFontWeight(text, "bold", 0, 6); // Apply color to "Guide" (positions 7-12) engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 7, 12); // Set font size for the entire block engine.block.setTextFontSize(text, 240); ``` The `setTextFontWeight()` method applies bold or normal weight. The `setTextColor()` method accepts RGBA color objects. The `setTextFontSize()` method sets the font size in design units. ## Querying Text Properties We retrieve formatting information using getter methods that return arrays of unique values found in the specified range. ```typescript highlight=highlight-query-formatting // Query formatting properties const colors = engine.block.getTextColors(text); const weights = engine.block.getTextFontWeights(text); const sizes = engine.block.getTextFontSizes(text); console.log("Text colors:", colors); console.log("Font weights:", weights); console.log("Font sizes:", sizes); ``` The getter methods return arrays because text blocks can contain mixed formatting. For example, `getTextColors()` returns all unique colors applied within the queried range. ## Line Information We query information about rendered text lines including count, content, and bounding boxes. ```typescript highlight=highlight-line-info // Query line information const lineCount = engine.block.getTextVisibleLineCount(text); console.log("Line count:", lineCount); if (lineCount > 0) { const lineContent = engine.block.getTextVisibleLineContent(text, 0); console.log("First line content:", lineContent); const lineBounds = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH( text, 0 ); console.log("First line bounds:", lineBounds); } ``` The `getTextVisibleLineCount()` returns the number of rendered lines. For each line, `getTextVisibleLineContent()` returns the text content and `getTextVisibleLineGlobalBoundingBoxXYWH()` returns the bounding box in scene coordinates. ## Font Metrics We retrieve raw font metrics from a font file URI. The returned values are in the font's design units coordinate space. ```typescript highlight=highlight-font-metrics // Get raw font metrics from a font file URI const fontFileUri = typeface.fonts[0].uri; const metrics = await engine.editor.getFontMetrics(fontFileUri); console.log("Ascender:", metrics.ascender); console.log("Descender:", metrics.descender); console.log("Units per em:", metrics.unitsPerEm); console.log("Line Gap:", metrics.lineGap); console.log("Cap Height:", metrics.capHeight); console.log("x-Height:", metrics.xHeight); console.log("Underline Offset:", metrics.underlineOffset); console.log("Underline Size:", metrics.underlineSize); console.log("Strikeout Offset:", metrics.strikeoutOffset); console.log("Strikeout Size:", metrics.strikeoutSize); ``` The `getFontMetrics()` method returns the font's `ascender`, `descender`, `unitsPerEm`, `lineGap`, `capHeight`, `xHeight`, `underlineOffset`, `underlineSize`, `strikeoutOffset`, and `strikeoutSize` values. These metrics are useful for precise text layout calculations, such as computing line heights, aligning text across different fonts, or positioning text decorations. The `capHeight` and `xHeight` values are useful for optical alignment of text elements. If the font is not yet loaded, it will be fetched asynchronously. ## Troubleshooting **Text not updating**: Verify the text block ID is valid using `engine.block.isValid()`. **Range indices incorrect**: Remember indices are UTF-16 code units. Multi-byte characters (emojis, some Unicode) occupy multiple indices. **Formatting not applied**: Check that the range `[from, to)` is valid and within the text length. Also ensure the typeface includes a font variant for the requested weight or style. **Line count is zero**: Ensure the text block has content and is rendered. Empty text blocks return zero lines. ## API Reference | Method | Purpose | | -------------------------------------------------------- | ------------------------------------------- | | `engine.block.setFont()` | Set font and typeface for the text block | | `engine.block.replaceText()` | Replace or insert text at specified indices | | `engine.block.removeText()` | Remove text at specified indices | | `engine.block.setTextColor()` | Set color for entire text or specific range | | `engine.block.getTextColors()` | Get unique colors in text range | | `engine.block.setTextFontWeight()` | Set font weight for text range | | `engine.block.getTextFontWeights()` | Get unique font weights in range | | `engine.block.setTextFontSize()` | Set font size for text range | | `engine.block.getTextFontSizes()` | Get unique font sizes in range | | `engine.block.getTextVisibleLineCount()` | Get number of rendered lines | | `engine.block.getTextVisibleLineContent()` | Get text content of a specific line | | `engine.block.getTextVisibleLineGlobalBoundingBoxXYWH()` | Get line bounds in scene coordinates | ## Text Type A block for displaying text content. This section describes the properties available for the **Text Type** (`//ly.img.ubq/text`) block type. | Property | Type | Default | Description | | ------------------------------- | -------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alwaysOnBottom` | `Bool` | `false` | If true, this element's global sorting order is automatically adjusted to be lower than all other siblings. | | `alwaysOnTop` | `Bool` | `false` | If true, this element's global sorting order is automatically adjusted to be higher than all other siblings. | | `backgroundColor/color` | `Color` | `{"r":0.667,"g":0.667,"b":0.667,"a":1}` | The color of the background. | | `backgroundColor/cornerRadius` | `Float` | `0` | The corner radius of the background. | | `backgroundColor/enabled` | `Bool` | `false` | Whether the background color is enabled. | | `backgroundColor/paddingBottom` | `Float` | `0` | The bottom padding of the background. | | `backgroundColor/paddingLeft` | `Float` | `0` | The left padding of the background. | | `backgroundColor/paddingRight` | `Float` | `0` | The right padding of the background. | | `backgroundColor/paddingTop` | `Float` | `0` | The top padding of the background. | | `blend/mode` | `Enum` | `"Normal"` | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` | | `clipped` | `Bool` | `false` | This component is used to identify elements whose contents and children should be clipped to their bounds. | | `contentFill/mode` | `Enum` | `"Cover"` | Defines how content should be resized to fit its container (e.g., Crop, Cover, Contain)., Possible values: `"Crop"`, `"Cover"`, `"Contain"` | | `dropShadow/blurRadius/x` | `Float` | `1` | The horizontal blur radius of the drop shadow. | | `dropShadow/blurRadius/y` | `Float` | `1` | The vertical blur radius of the drop shadow. | | `dropShadow/clip` | `Bool` | `false` | Whether the drop shadow should be clipped to the block's bounds. | | `dropShadow/color` | `Color` | `{"r":0,"g":0,"b":0,"a":0.25}` | The color of the drop shadow. | | `dropShadow/enabled` | `Bool` | `false` | Whether the drop shadow is enabled. | | `dropShadow/offset/x` | `Float` | `1.76777` | The horizontal offset of the drop shadow. | | `dropShadow/offset/y` | `Float` | `1.76777` | The vertical offset of the drop shadow. | | `fill/enabled` | `Bool` | `true` | Whether the fill should be rendered or not. | | `fill/solid/color` | `Color` | `"-"` | The fill color. | | `flip/horizontal` | `Bool` | `"-"` | Whether the block is flipped horizontally. | | `flip/vertical` | `Bool` | `"-"` | Whether the block is flipped vertically. | | `globalBoundingBox/height` | `Float` | `"-"` | The height of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/width` | `Float` | `"-"` | The width of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/x` | `Float` | `"-"` | The x-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `globalBoundingBox/y` | `Float` | `"-"` | The y-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)* | | `height` | `Float` | `100` | The height of the block's frame. | | `height/mode` | `Enum` | `"Absolute"` | A mode describing how the height dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `highlightEnabled` | `Bool` | `true` | Show highlighting when selected or hovered | | `lastFrame/height` | `Float` | `"-"` | The height of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/width` | `Float` | `"-"` | The width of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/x` | `Float` | `"-"` | The x-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `lastFrame/y` | `Float` | `"-"` | The y-coordinate of the block's frame from the previous layout pass., *(read-only)* | | `opacity` | `Float` | `1` | The opacity of the block. Valid range is 0.0 to 1.0. | | `placeholder/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `placeholderBehavior/enabled` | `Bool` | `false` | Whether the placeholder behavior is enabled or not. | | `playback/duration` | `Double` | `5` | The duration in seconds for which this block should be visible. | | `playback/timeOffset` | `Double` | `0` | The time in seconds relative to its parent at which this block should first appear. | | `position/x` | `Float` | `0` | The x-coordinate of the block's origin. | | `position/x/mode` | `Enum` | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `position/y` | `Float` | `0` | The y-coordinate of the block's origin. | | `position/y/mode` | `Enum` | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | | `rotation` | `Float` | `0` | The rotation of the block in radians. | | `selected` | `Bool` | `false` | Indicates if the block is currently selected. | | `stroke/color` | `Color` | `{"r":0.67,"g":0.67,"b":0.67,"a":1}` | The color of the stroke. | | `stroke/cornerGeometry` | `Enum` | `"Miter"` | The geometry of the stroke at corners (e.g., Miter, Round, Bevel)., Possible values: `"Bevel"`, `"Miter"`, `"Round"` | | `stroke/enabled` | `Bool` | `false` | Whether the stroke is enabled. | | `stroke/position` | `Enum` | `"Center"` | The position of the stroke relative to the shape's edge (Center, Inner, Outer)., Possible values: `"Center"`, `"Inner"`, `"Outer"` | | `stroke/style` | `Enum` | `"Solid"` | The style of the stroke (e.g., Solid, Dotted, Dashed)., Possible values: `"Dashed"`, `"DashedRound"`, `"Dotted"`, `"LongDashed"`, `"LongDashedRound"`, `"Solid"` | | `stroke/width` | `Float` | `4.72441` | The width of the stroke. | | `text/automaticFontSizeEnabled` | `Bool` | `false` | Whether the font size should be automatically determined to fit the entire text within the block's frame. | | `text/clipLinesOutsideOfFrame` | `Bool` | `true` | Whether or not to display lines outside the frame. | | `text/externalReference` | `String` | `""` | An external reference that may hint at the source that was used to populate fontFileURI. | | `text/fontFileUri` | `String` | `""` | The URI of a font file. | | `text/fontSize` | `Float` | `10` | The font size in points. | | `text/hasClippedLines` | `Bool` | `false` | A tag indicating that text lines are outside the block's frame and are hidden., *(read-only)* | | `text/horizontalAlignment` | `Enum` | `"Left"` | The horizontal text alignment., Possible values: `"Left"`, `"Right"`, `"Center"` | | `text/letterSpacing` | `Float` | `0` | The letter spacing relative to the original spacing. | | `text/lineHeight` | `Float` | `1` | The line height relative to the font size. | | `text/maxAutomaticFontSize` | `Float` | `-1` | The upper font size limit if the font size is automatically calculated. | | `text/minAutomaticFontSize` | `Float` | `-1` | The lower font size limit if the font size is automatically calculated. | | `text/paragraphSpacing` | `Float` | `0` | The additional spacing between paragraphs relative to the font size. | | `text/text` | `String` | `"Text"` | The text content. | | `text/typeface` | `String` | `""` | The typeface of the font. | | `text/verticalAlignment` | `Enum` | `"Top"` | The vertical text alignment., Possible values: `"Top"`, `"Bottom"`, `"Center"` | | `transformLocked` | `Bool` | `false` | DesignBlocks with this tag can't be transformed (moved, rotated, scaled, cropped, or flipped). | | `visible` | `Bool` | `true` | If the block is visible in the editor. | | `width` | `Float` | `100` | The width of the block's frame. | | `width/mode` | `Enum` | `"Absolute"` | A mode describing how the width dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"` | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Effects" description: "Apply visual effects to text blocks including drop shadows and stroke outlines." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/effects-2dc9fc/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Text Effects](https://img.ly/docs/cesdk/sveltekit/text/effects-2dc9fc/) --- Add visual depth and interest to text blocks using drop shadows and stroke outlines.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-effects-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-effects-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-effects-browser/) Text effects in CE.SDK include drop shadows for depth and stroke outlines for text borders. These visual effects are distinct from text styling properties like colors, fonts, and backgrounds. ```typescript file=@cesdk_web_examples/guides-text-effects-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Text Effects Guide * * Demonstrates applying visual effects to text blocks: * - Drop shadows for depth * - Outline effect for text borders * - Glow effect for luminous aura */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 500, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block with drop shadow const shadowText = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(shadowText, 'Drop Shadow'); engine.block.setTextFontSize(shadowText, 90); engine.block.setWidthMode(shadowText, 'Auto'); engine.block.setHeightMode(shadowText, 'Auto'); engine.block.setPositionX(shadowText, 50); engine.block.setPositionY(shadowText, 50); engine.block.appendChild(page, shadowText); // Enable and configure drop shadow engine.block.setDropShadowEnabled(shadowText, true); engine.block.setDropShadowColor(shadowText, { r: 0, g: 0, b: 0, a: 0.6 }); engine.block.setDropShadowOffsetX(shadowText, 5); engine.block.setDropShadowOffsetY(shadowText, 5); engine.block.setDropShadowBlurRadiusX(shadowText, 10); engine.block.setDropShadowBlurRadiusY(shadowText, 10); // Create a text block with stroke outline const outlineText = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(outlineText, 'Outline'); engine.block.setTextFontSize(outlineText, 90); engine.block.setWidthMode(outlineText, 'Auto'); engine.block.setHeightMode(outlineText, 'Auto'); engine.block.setPositionX(outlineText, 50); engine.block.setPositionY(outlineText, 180); engine.block.appendChild(page, outlineText); // Enable and configure stroke engine.block.setStrokeEnabled(outlineText, true); engine.block.setStrokeWidth(outlineText, 2); engine.block.setStrokeColor(outlineText, { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setStrokeStyle(outlineText, 'Solid'); engine.block.setStrokePosition(outlineText, 'Center'); // Select the first text block engine.block.select(shadowText); } } export default Example; ``` This guide covers how to apply drop shadows and stroke outlines to text blocks programmatically using the Block API. ## Drop Shadows Drop shadows add depth and emphasis to text. CE.SDK provides dedicated APIs for configuring shadow properties on text blocks. ```typescript highlight-drop-shadow // Create a text block with drop shadow const shadowText = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(shadowText, 'Drop Shadow'); engine.block.setTextFontSize(shadowText, 90); engine.block.setWidthMode(shadowText, 'Auto'); engine.block.setHeightMode(shadowText, 'Auto'); engine.block.setPositionX(shadowText, 50); engine.block.setPositionY(shadowText, 50); engine.block.appendChild(page, shadowText); // Enable and configure drop shadow engine.block.setDropShadowEnabled(shadowText, true); engine.block.setDropShadowColor(shadowText, { r: 0, g: 0, b: 0, a: 0.6 }); engine.block.setDropShadowOffsetX(shadowText, 5); engine.block.setDropShadowOffsetY(shadowText, 5); engine.block.setDropShadowBlurRadiusX(shadowText, 10); engine.block.setDropShadowBlurRadiusY(shadowText, 10); ``` The drop shadow API provides control over color, position, and blur. The offset values position the shadow relative to the text, while the blur radius controls shadow softness. Horizontal and vertical blur can be configured independently for asymmetric effects. ## Stroke Outlines Stroke outlines add a colored border around text. We enable stroke with `setStrokeEnabled()`, then configure width, color, style, and position. ```typescript highlight-stroke // Create a text block with stroke outline const outlineText = engine.block.create('//ly.img.ubq/text'); engine.block.replaceText(outlineText, 'Outline'); engine.block.setTextFontSize(outlineText, 90); engine.block.setWidthMode(outlineText, 'Auto'); engine.block.setHeightMode(outlineText, 'Auto'); engine.block.setPositionX(outlineText, 50); engine.block.setPositionY(outlineText, 180); engine.block.appendChild(page, outlineText); // Enable and configure stroke engine.block.setStrokeEnabled(outlineText, true); engine.block.setStrokeWidth(outlineText, 2); engine.block.setStrokeColor(outlineText, { r: 0.2, g: 0.4, b: 0.9, a: 1.0 }); engine.block.setStrokeStyle(outlineText, 'Solid'); engine.block.setStrokePosition(outlineText, 'Center'); ``` The stroke width is specified in pixels. Text blocks use centered stroke positioning. Stroke styles include `'Solid'`, `'Dashed'`, `'Dotted'`, and other line patterns. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.supportsDropShadow()` | Check if block supports drop shadows | | `engine.block.setDropShadowEnabled()` | Enable or disable drop shadow | | `engine.block.setDropShadowColor()` | Set shadow color | | `engine.block.setDropShadowOffsetX()` | Set horizontal shadow offset | | `engine.block.setDropShadowOffsetY()` | Set vertical shadow offset | | `engine.block.setDropShadowBlurRadiusX()` | Set horizontal blur radius | | `engine.block.setDropShadowBlurRadiusY()` | Set vertical blur radius | | `engine.block.setStrokeEnabled()` | Enable or disable stroke | | `engine.block.setStrokeWidth()` | Set stroke width in pixels | | `engine.block.setStrokeColor()` | Set stroke color | | `engine.block.setStrokeStyle()` | Set stroke style (Solid, Dashed, etc.) | ## Troubleshooting **Drop shadow not visible**: Ensure `setDropShadowEnabled()` is called after configuring properties. Verify `supportsDropShadow()` returns true for the block. **Stroke not visible**: Ensure `setStrokeEnabled()` is called with `true` and stroke width is greater than 0. **Stroke too thick or thin**: Adjust the value passed to `setStrokeWidth()` to control outline thickness. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Emojis" description: "Insert and style emojis alongside text for expressive, modern typographic designs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/emojis-510651/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Emojis](https://img.ly/docs/cesdk/sveltekit/text/emojis-510651/) --- Configure emoji rendering in CE.SDK text blocks using a dedicated emoji font for consistent cross-platform display.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-emojis-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-emojis-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-emojis-browser/) Emojis are Unicode characters representing pictographic symbols. They can be single code points (😀), multi-character sequences (flags like 🇩🇪), ZWJ-joined combinations (👨‍👩‍👧), or skin tone variants (👋🏽). CE.SDK renders text to canvas for precise layout control, which bypasses browser font fallback. This means CE.SDK must explicitly provide an emoji font—it uses Noto Color Emoji by default. ```typescript file=@cesdk_web_examples/guides-text-emojis-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Emojis Guide * * Demonstrates emoji rendering configuration: * - Understanding the default emoji font (Noto Color Emoji) * - Getting and setting the emoji font URI * - Creating text blocks with emojis */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // CE.SDK uses Noto Color Emoji by default for consistent cross-platform rendering // Get the current emoji font URI const defaultEmojiFontUri = engine.editor.getSetting( 'defaultEmojiFontFileUri' ); console.log('Default emoji font URI:', defaultEmojiFontUri); // You can set a custom emoji font if needed // engine.editor.setSetting( // 'defaultEmojiFontFileUri', // 'https://your-cdn.com/fonts/CustomEmoji.ttf' // ); // For this guide, we use the default Noto Color Emoji font // which is already configured in CE.SDK // Create a text block with emoji content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Set text content with emojis engine.block.replaceText(textBlock, 'Hello World! 🎉🚀✨'); // Configure text appearance engine.block.setTextFontSize(textBlock, 64); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Position the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 100); // Create additional text blocks demonstrating various emoji types // Single emoji characters const singleEmojis = engine.block.create('text'); engine.block.appendChild(page, singleEmojis); engine.block.replaceText(singleEmojis, 'Single emojis: 😀 👍 ❤️ ⭐'); engine.block.setTextFontSize(singleEmojis, 36); engine.block.setWidthMode(singleEmojis, 'Auto'); engine.block.setHeightMode(singleEmojis, 'Auto'); engine.block.setPositionX(singleEmojis, 50); engine.block.setPositionY(singleEmojis, 200); // Flag emojis (multi-character sequences) const flagEmojis = engine.block.create('text'); engine.block.appendChild(page, flagEmojis); engine.block.replaceText(flagEmojis, 'Flags: 🇩🇪 🇺🇸 🇯🇵 🇬🇧'); engine.block.setTextFontSize(flagEmojis, 36); engine.block.setWidthMode(flagEmojis, 'Auto'); engine.block.setHeightMode(flagEmojis, 'Auto'); engine.block.setPositionX(flagEmojis, 50); engine.block.setPositionY(flagEmojis, 270); // ZWJ (Zero Width Joiner) sequences const familyEmojis = engine.block.create('text'); engine.block.appendChild(page, familyEmojis); engine.block.replaceText(familyEmojis, 'Families: 👨‍👩‍👧 👨‍👩‍👦‍👦 👩‍👦'); engine.block.setTextFontSize(familyEmojis, 36); engine.block.setWidthMode(familyEmojis, 'Auto'); engine.block.setHeightMode(familyEmojis, 'Auto'); engine.block.setPositionX(familyEmojis, 50); engine.block.setPositionY(familyEmojis, 340); // Skin tone variants const skinToneEmojis = engine.block.create('text'); engine.block.appendChild(page, skinToneEmojis); engine.block.replaceText(skinToneEmojis, 'Skin tones: 👋 👋🏻 👋🏽 👋🏿'); engine.block.setTextFontSize(skinToneEmojis, 36); engine.block.setWidthMode(skinToneEmojis, 'Auto'); engine.block.setHeightMode(skinToneEmojis, 'Auto'); engine.block.setPositionX(skinToneEmojis, 50); engine.block.setPositionY(skinToneEmojis, 410); // Zoom to show all content engine.scene.zoomToBlock(page, { padding: 40 }); // Select the main text block to show it in the inspector engine.block.setSelected(textBlock, true); } } export default Example; ``` This guide covers understanding the default emoji font, configuring a custom emoji font, and adding text with emojis programmatically. ## Default Emoji Font CE.SDK uses Noto Color Emoji (~9.9 MB, PNG-based) from `https://cdn.img.ly/assets/v5/emoji/NotoColorEmoji.ttf` by default. This ensures identical emoji rendering across all platforms and browsers—designs created on macOS look the same on Windows or Android. No configuration is needed; emoji rendering works out of the box. We retrieve the current emoji font URI using `engine.editor.getSetting()`: ```typescript highlight-default-emoji-font // CE.SDK uses Noto Color Emoji by default for consistent cross-platform rendering // Get the current emoji font URI const defaultEmojiFontUri = engine.editor.getSetting( 'defaultEmojiFontFileUri' ); console.log('Default emoji font URI:', defaultEmojiFontUri); ``` ## Configuring the Emoji Font We can change the emoji font using `engine.editor.setSetting()`. The URI can point to any accessible URL, CDN, or local file containing an emoji font. ```typescript highlight-configure-emoji-font // You can set a custom emoji font if needed // engine.editor.setSetting( // 'defaultEmojiFontFileUri', // 'https://your-cdn.com/fonts/CustomEmoji.ttf' // ); // For this guide, we use the default Noto Color Emoji font // which is already configured in CE.SDK ``` ## Adding Emojis to Text Blocks We create text blocks and add emoji content using `engine.block.replaceText()`. Emojis are inserted directly as Unicode characters: ```typescript highlight-create-text-with-emojis // Create a text block with emoji content const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); // Set text content with emojis engine.block.replaceText(textBlock, 'Hello World! 🎉🚀✨'); // Configure text appearance engine.block.setTextFontSize(textBlock, 64); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); // Position the text block engine.block.setPositionX(textBlock, 50); engine.block.setPositionY(textBlock, 100); ``` CE.SDK handles all emoji types automatically—single characters, flag sequences, ZWJ combinations, and skin tone variants: ```typescript highlight-emoji-examples // Create additional text blocks demonstrating various emoji types // Single emoji characters const singleEmojis = engine.block.create('text'); engine.block.appendChild(page, singleEmojis); engine.block.replaceText(singleEmojis, 'Single emojis: 😀 👍 ❤️ ⭐'); engine.block.setTextFontSize(singleEmojis, 36); engine.block.setWidthMode(singleEmojis, 'Auto'); engine.block.setHeightMode(singleEmojis, 'Auto'); engine.block.setPositionX(singleEmojis, 50); engine.block.setPositionY(singleEmojis, 200); // Flag emojis (multi-character sequences) const flagEmojis = engine.block.create('text'); engine.block.appendChild(page, flagEmojis); engine.block.replaceText(flagEmojis, 'Flags: 🇩🇪 🇺🇸 🇯🇵 🇬🇧'); engine.block.setTextFontSize(flagEmojis, 36); engine.block.setWidthMode(flagEmojis, 'Auto'); engine.block.setHeightMode(flagEmojis, 'Auto'); engine.block.setPositionX(flagEmojis, 50); engine.block.setPositionY(flagEmojis, 270); // ZWJ (Zero Width Joiner) sequences const familyEmojis = engine.block.create('text'); engine.block.appendChild(page, familyEmojis); engine.block.replaceText(familyEmojis, 'Families: 👨‍👩‍👧 👨‍👩‍👦‍👦 👩‍👦'); engine.block.setTextFontSize(familyEmojis, 36); engine.block.setWidthMode(familyEmojis, 'Auto'); engine.block.setHeightMode(familyEmojis, 'Auto'); engine.block.setPositionX(familyEmojis, 50); engine.block.setPositionY(familyEmojis, 340); // Skin tone variants const skinToneEmojis = engine.block.create('text'); engine.block.appendChild(page, skinToneEmojis); engine.block.replaceText(skinToneEmojis, 'Skin tones: 👋 👋🏻 👋🏽 👋🏿'); engine.block.setTextFontSize(skinToneEmojis, 36); engine.block.setWidthMode(skinToneEmojis, 'Auto'); engine.block.setHeightMode(skinToneEmojis, 'Auto'); engine.block.setPositionX(skinToneEmojis, 50); engine.block.setPositionY(skinToneEmojis, 410); ``` ## The `forceSystemEmojis` Setting CE.SDK has a `forceSystemEmojis` setting (default: `true`). Despite its name, this setting has no practical effect on web because regular text fonts don't contain emoji glyphs and canvas rendering cannot access browser emoji fallback. CE.SDK always uses `defaultEmojiFontFileUri` for emoji characters. The setting exists for cross-platform compatibility. ## Troubleshooting **Emojis look different than expected**: CE.SDK uses Noto Color Emoji by default. To use a different emoji style, change `defaultEmojiFontFileUri` to another emoji font. **Missing emojis**: The emoji font may not support all Unicode emoji characters. Ensure your custom emoji font has comprehensive Unicode coverage. **Large initial download**: The default Noto Color Emoji font is ~9.9 MB. Consider preloading it or showing a loading indicator for your users. **Want browser-native emojis**: This is not possible with canvas rendering. CE.SDK requires an explicit emoji font file for consistent cross-platform results. ## API Reference | Method | Purpose | |--------|---------| | `engine.editor.getSetting('defaultEmojiFontFileUri')` | Get the current emoji font URI | | `engine.editor.setSetting('defaultEmojiFontFileUri', uri)` | Set a custom emoji font URI | | `engine.block.create('text')` | Create a text block | | `engine.block.replaceText(id, text)` | Set text content including emojis | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Enumerations" description: "Add bullet lists and numbered lists to text blocks in CE.SDK using per-paragraph list styles and nesting levels." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/enumerations-b5c1d2/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Text Enumerations](https://img.ly/docs/cesdk/sveltekit/text/enumerations-b5c1d2/) --- Apply bullet lists and numbered lists to text blocks programmatically using per-paragraph list styles and nesting levels.  > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-text-enumerations-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-text-enumerations-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-enumerations-browser/) CE.SDK represents list formatting as per-paragraph properties on a text block. Each paragraph independently holds a list style (`'None'`, `'Unordered'`, or `'Ordered'`) and a zero-based nesting level. A single call to `setTextListStyle()` targets either one paragraph or all paragraphs at once, making it straightforward to build structured lists without iterating manually. ```typescript file=@cesdk_web_examples/guides-text-enumerations-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // DesignEditorConfig uses settings not yet in the published package when this guide // was authored. Guarded so the text block renders in both local and published contexts. try { await cesdk.addPlugin(new DesignEditorConfig()); } catch { // noop — proceeds with asset sources and the enumeration example below } await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); // Create a new design scene with an 800×600 canvas await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block and populate it with three paragraphs const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.replaceText(textBlock, 'First item\nSecond item\nThird item'); engine.block.setTextFontSize(textBlock, 36); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 80); engine.block.setPositionY(textBlock, 80); // eslint-disable-next-line @typescript-eslint/no-explicit-any const block = engine.block as any; // Apply ordered list style to all paragraphs (paragraphIndex defaults to -1 = all) block.setTextListStyle(textBlock, 'Ordered'); // Override the third paragraph (index 2) to unordered block.setTextListStyle(textBlock, 'Unordered', 2); // Set the second paragraph (index 1) to nesting level 1 (one indent deep) block.setTextListLevel(textBlock, 1, 1); // Read back the nesting level to confirm const level = block.getTextListLevel(textBlock, 1); console.log('Second paragraph nesting level:', level); // 1 // Atomically set both list style and nesting level in one call // Sets paragraph 0 to ordered style at nesting level 0 (outermost) block.setTextListStyle(textBlock, 'Ordered', 0, 0); // Get all paragraph indices in the text block const allIndices: number[] = block.getTextParagraphIndices(textBlock); console.log('All paragraph indices:', allIndices); // [0, 1, 2] // Get indices overlapping a specific grapheme range const rangeIndices = block.getTextParagraphIndices(textBlock, 0, 10); console.log('Indices for range [0, 10):', rangeIndices); // [0] // Read back the list style and nesting level for each paragraph const styles = allIndices.map((i) => block.getTextListStyle(textBlock, i)); const levels = allIndices.map((i) => block.getTextListLevel(textBlock, i)); console.log('Paragraph styles:', styles); // ['Ordered', 'Ordered', 'Unordered'] console.log('Paragraph levels:', levels); // [0, 1, 0] engine.scene.zoomToBlock(textBlock, { padding: 40 }); engine.block.setSelected(textBlock, true); } } export default Example; ``` This guide covers applying list styles, managing nesting levels, performing atomic style-and-level assignments, and resolving paragraph indices from text ranges. ## Applying List Styles We start by creating a new design scene, then add a text block to it with three paragraphs separated by newlines. These paragraphs are the targets for all subsequent list operations. ```typescript highlight-setup // Create a new design scene with an 800×600 canvas await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block and populate it with three paragraphs const textBlock = engine.block.create('text'); engine.block.appendChild(page, textBlock); engine.block.replaceText(textBlock, 'First item\nSecond item\nThird item'); engine.block.setTextFontSize(textBlock, 36); engine.block.setWidthMode(textBlock, 'Auto'); engine.block.setHeightMode(textBlock, 'Auto'); engine.block.setPositionX(textBlock, 80); engine.block.setPositionY(textBlock, 80); ``` We apply list styles with `engine.block.setTextListStyle()`. Omitting `paragraphIndex` (or passing `-1`) applies the style to all paragraphs simultaneously. Passing a non-negative index targets a single paragraph. ```typescript highlight-apply-list-styles // Apply ordered list style to all paragraphs (paragraphIndex defaults to -1 = all) block.setTextListStyle(textBlock, 'Ordered'); // Override the third paragraph (index 2) to unordered block.setTextListStyle(textBlock, 'Unordered', 2); ``` After these two calls, paragraphs 0 and 1 are ordered (numbered) and paragraph 2 is unordered (bulleted). ## Managing Nesting Levels We control the visual depth of list items with `engine.block.setTextListLevel()`. The `listLevel` parameter is zero-based: `0` is the outermost item and `1` is one indent deeper. Nesting has no visual effect when the list style is `'None'`. We read the current level back with `engine.block.getTextListLevel()`. ```typescript highlight-manage-nesting // Set the second paragraph (index 1) to nesting level 1 (one indent deep) block.setTextListLevel(textBlock, 1, 1); // Read back the nesting level to confirm const level = block.getTextListLevel(textBlock, 1); console.log('Second paragraph nesting level:', level); // 1 ``` ## Atomic Style and Level Assignment We set both list style and nesting level in a single call by passing the optional `listLevel` parameter to `setTextListStyle()`. This saves a separate `setTextListLevel()` call when both properties need to change together. ```typescript highlight-atomic // Atomically set both list style and nesting level in one call // Sets paragraph 0 to ordered style at nesting level 0 (outermost) block.setTextListStyle(textBlock, 'Ordered', 0, 0); ``` ## Resolving Paragraph Indices from Text Ranges When working with a text selection or a known grapheme range, `engine.block.getTextParagraphIndices()` returns the 0-based paragraph indices that overlap the range. Passing negative values for `from` and `to` (the defaults) returns all indices in the block. This is useful before targeted per-paragraph operations. ```typescript highlight-paragraph-indices // Get all paragraph indices in the text block const allIndices: number[] = block.getTextParagraphIndices(textBlock); console.log('All paragraph indices:', allIndices); // [0, 1, 2] // Get indices overlapping a specific grapheme range const rangeIndices = block.getTextParagraphIndices(textBlock, 0, 10); console.log('Indices for range [0, 10):', rangeIndices); // [0] ``` ## Querying List Styles We read back the current list style and nesting level for each paragraph using `engine.block.getTextListStyle()` and `engine.block.getTextListLevel()`. Both getters require a non-negative `paragraphIndex`—use `getTextParagraphIndices()` to discover valid indices. ```typescript highlight-query-list-styles // Read back the list style and nesting level for each paragraph const styles = allIndices.map((i) => block.getTextListStyle(textBlock, i)); const levels = allIndices.map((i) => block.getTextListLevel(textBlock, i)); console.log('Paragraph styles:', styles); // ['Ordered', 'Ordered', 'Unordered'] console.log('Paragraph levels:', levels); // [0, 1, 0] ``` The logged output confirms styles `['Ordered', 'Ordered', 'Unordered']` and levels `[0, 1, 0]` across the three paragraphs. ## Troubleshooting - **List markers not visible**: Verify the `text/character` scope is enabled on the text block before calling setters. - **`getTextListStyle()` throws**: The `paragraphIndex` must be non-negative for getters. Use `getTextParagraphIndices()` to retrieve valid indices. - **Nesting level has no effect**: Check that the list style is not `'None'`—nesting only applies when a list style is active. - **Numbered list restarting unexpectedly**: Ordered numbering is calculated per-paragraph across the entire block. A `'None'` paragraph between ordered items may reset the counter depending on the renderer. ## API Reference | Method | Purpose | |--------|---------| | engine.block.setTextListStyle() | Apply list style to one or all paragraphs, optionally setting nesting level atomically | | engine.block.getTextListStyle() | Get the list style of a specific paragraph | | engine.block.setTextListLevel() | Set the nesting level of one or all paragraphs | | engine.block.getTextListLevel() | Get the nesting level of a specific paragraph | | engine.block.getTextParagraphIndices() | Get 0-based paragraph indices overlapping a grapheme range | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text and Language Support" description: "Create designs that work seamlessly across different languages and writing systems with RTL text, complex scripts, and multilingual font support." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/language-support-a0f010/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Language Support](https://img.ly/docs/cesdk/sveltekit/text/language-support-a0f010/) --- Support right-to-left text, complex scripts, and multilingual typography in your designs using CE.SDK's comprehensive text rendering capabilities.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-language-support-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-language-support-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-language-support-browser/) CE.SDK provides built-in support for creating designs that work seamlessly across different languages and writing systems. The engine automatically handles text shaping, bidirectional layout, and script-specific rendering - supporting all Unicode characters, complex script ligatures, and mixed LTR/RTL content without additional configuration. ```typescript file=@cesdk_web_examples/guides-text-language-support-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext, CreativeEngine } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Typeface definitions const ROBOTO_BOLD = { name: 'Roboto', fonts: [ { uri: 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAw.ttf', subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; const NOTO_NASKH_ARABIC = { name: 'Noto Naskh Arabic', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoNaskhArabic-Regular.ttf`, subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const } ] }; const NOTO_SANS_KR = { name: 'Noto Sans KR', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoSansKR-VariableFont_wght.ttf`, subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const } ] }; // Layout configuration const LAYOUT = { PAGE: { width: 800, height: 1200 }, TEXT: { x: 50, width: 700, defaultHeight: 140, fontSize: 20 }, SPACING: { gap: 16, startY: 50 } }; // Typeface interface interface Typeface { name: string; fonts: Array<{ uri: string; subFamily: string; weight: 'normal' | 'bold'; style: 'normal' | 'italic'; }>; } function createTextBlock( engine: CreativeEngine, page: number, text: string, typeface: Typeface, yPosition: number, height: number = LAYOUT.TEXT.defaultHeight, alignment: 'Left' | 'Center' | 'Right' = 'Left' ): void { const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', text); engine.block.setPositionX(textBlock, LAYOUT.TEXT.x); engine.block.setPositionY(textBlock, yPosition); engine.block.setWidth(textBlock, LAYOUT.TEXT.width); engine.block.setHeight(textBlock, height); engine.block.setFloat(textBlock, 'text/fontSize', LAYOUT.TEXT.fontSize); engine.block.setTypeface(textBlock, typeface); if (alignment !== 'Left') { engine.block.setEnum(textBlock, 'text/horizontalAlignment', alignment); } engine.block.appendChild(page, textBlock); } /** * CE.SDK Plugin: Text Language Support Guide * * Demonstrates multilingual text support: * - RTL text rendering (Arabic) * - Complex script support (Korean) * - Custom font loading for Unicode coverage * - Text alignment for different writing directions */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } // Add custom multilingual fonts to asset library cesdk.engine.asset.addLocalSource('multilingual-typefaces'); cesdk.engine.asset.addAssetToSource('multilingual-typefaces', { id: 'noto-naskh-arabic', label: { en: 'Noto Naskh Arabic' }, payload: { typeface: { name: 'Noto Naskh Arabic', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoNaskhArabic-Regular.ttf`, subFamily: 'Regular', weight: 'normal', style: 'normal' } ] } } }); cesdk.engine.asset.addAssetToSource('multilingual-typefaces', { id: 'noto-sans-kr', label: { en: 'Noto Sans KR' }, payload: { typeface: { name: 'Noto Sans KR', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoSansKR-VariableFont_wght.ttf`, subFamily: 'Regular', weight: 'normal', style: 'normal' } ] } } }); cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: ['ly.img.typeface', 'multilingual-typefaces'] }); const engine = cesdk.engine; // Create a blank scene with a white canvas const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, LAYOUT.PAGE.width); engine.block.setHeight(page, LAYOUT.PAGE.height); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page); // Create four text elements demonstrating multilingual font support const textElements = [ { text: 'RTL Arabic', typeface: ROBOTO_BOLD, height: 140 }, { text: 'هذا مثال.', typeface: NOTO_NASKH_ARABIC, height: 160, alignment: 'Right' as const }, { text: 'Korean', typeface: ROBOTO_BOLD, height: 140 }, { text: '이는 한 예입니다.', typeface: NOTO_SANS_KR, height: 140 } ]; let currentY = LAYOUT.SPACING.startY; for (const element of textElements) { createTextBlock( engine, page, element.text, element.typeface, currentY, element.height, element.alignment ); currentY += element.height + LAYOUT.SPACING.gap; } } } export default Example; ``` This guide covers how to work with multilingual text using both the built-in text UI and programmatic APIs for font configuration, text direction, and dynamic language content. ## Programmatic Font and Typeface Management ### Initialize CE.SDK For applications that need to manage multilingual text programmatically, we start by setting up CE.SDK and creating a scene. ```typescript highlight-setup // Create a blank scene with a white canvas const scene = engine.scene.create(); const page = engine.block.create('page'); engine.block.setWidth(page, LAYOUT.PAGE.width); engine.block.setHeight(page, LAYOUT.PAGE.height); engine.block.appendChild(scene, page); engine.scene.zoomToBlock(page); ``` This creates a blank 800×1200px canvas that we'll use for demonstrating multilingual text features. ### Configuring Typefaces for Language Support To support specific languages and scripts, we define typefaces as constants with appropriate Unicode coverage. This example uses a constants-based approach for reusable typeface definitions that can be referenced throughout the code. ```typescript highlight-configure-fonts // Typeface definitions const ROBOTO_BOLD = { name: 'Roboto', fonts: [ { uri: 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAw.ttf', subFamily: 'Bold', weight: 'bold' as const, style: 'normal' as const } ] }; const NOTO_NASKH_ARABIC = { name: 'Noto Naskh Arabic', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoNaskhArabic-Regular.ttf`, subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const } ] }; const NOTO_SANS_KR = { name: 'Noto Sans KR', fonts: [ { uri: `${window.location.origin}${import.meta.env.BASE_URL}NotoSansKR-VariableFont_wght.ttf`, subFamily: 'Regular', weight: 'normal' as const, style: 'normal' as const } ] }; ``` The example defines three typefaces as named constants: - **ROBOTO\_BOLD** - A web font for Latin script labels - **NOTO\_NASKH\_ARABIC** - Optimized for Arabic script with proper contextual forms - **NOTO\_SANS\_KR** - Variable font supporting Korean (Hangul) characters Each typeface includes: - **name** - The typeface family name - **fonts** - Array of font objects with URIs and styles - **uri** - Path to font file (TTF, OTF, WOFF2 formats supported) - **weight** - Font weight (normal, bold, or numeric values) - **style** - Font style (normal or italic) > **Note:** CE.SDK uses system fonts with Unicode support by default. Custom typefaces > are useful when you need specific brand fonts or enhanced coverage for > particular scripts. ### Applying Fonts with a Helper Function The `createTextBlock()` function encapsulates all text block setup logic, reducing code duplication. Text elements are defined as an array and processed in a loop: ```typescript highlight-helper-function function createTextBlock( engine: CreativeEngine, page: number, text: string, typeface: Typeface, yPosition: number, height: number = LAYOUT.TEXT.defaultHeight, alignment: 'Left' | 'Center' | 'Right' = 'Left' ): void { const textBlock = engine.block.create('text'); engine.block.setString(textBlock, 'text/text', text); engine.block.setPositionX(textBlock, LAYOUT.TEXT.x); engine.block.setPositionY(textBlock, yPosition); engine.block.setWidth(textBlock, LAYOUT.TEXT.width); engine.block.setHeight(textBlock, height); engine.block.setFloat(textBlock, 'text/fontSize', LAYOUT.TEXT.fontSize); engine.block.setTypeface(textBlock, typeface); if (alignment !== 'Left') { engine.block.setEnum(textBlock, 'text/horizontalAlignment', alignment); } engine.block.appendChild(page, textBlock); } ``` ```typescript highlight-apply-fonts // Create four text elements demonstrating multilingual font support const textElements = [ { text: 'RTL Arabic', typeface: ROBOTO_BOLD, height: 140 }, { text: 'هذا مثال.', typeface: NOTO_NASKH_ARABIC, height: 160, alignment: 'Right' as const }, { text: 'Korean', typeface: ROBOTO_BOLD, height: 140 }, { text: '이는 한 예입니다.', typeface: NOTO_SANS_KR, height: 140 } ]; let currentY = LAYOUT.SPACING.startY; for (const element of textElements) { createTextBlock( engine, page, element.text, element.typeface, currentY, element.height, element.alignment ); currentY += element.height + LAYOUT.SPACING.gap; } ``` This approach provides several benefits: - **DRY Principle** - Eliminates repetitive block setup code - **Easy to Extend** - Add new languages by appending to the configuration array - **Maintainable** - Change layout spacing or dimensions in one place The `engine.block.setTypeface()` method applies fonts at the block level. CE.SDK automatically uses the configured fonts to render text with proper glyph coverage for the languages in your content. ## Working with Right-to-Left (RTL) Text ### Understanding Automatic RTL Detection CE.SDK automatically detects text direction based on Unicode character properties. When you create a text block with RTL content like Arabic or Hebrew, the engine analyzes the text and applies right-to-left rendering automatically. ```typescript highlight-apply-fonts // Create four text elements demonstrating multilingual font support const textElements = [ { text: 'RTL Arabic', typeface: ROBOTO_BOLD, height: 140 }, { text: 'هذا مثال.', typeface: NOTO_NASKH_ARABIC, height: 160, alignment: 'Right' as const }, { text: 'Korean', typeface: ROBOTO_BOLD, height: 140 }, { text: '이는 한 예입니다.', typeface: NOTO_SANS_KR, height: 140 } ]; let currentY = LAYOUT.SPACING.startY; for (const element of textElements) { createTextBlock( engine, page, element.text, element.typeface, currentY, element.height, element.alignment ); currentY += element.height + LAYOUT.SPACING.gap; } ``` The engine implements the Unicode Bidirectional Algorithm (UAX #9), which: - **Detects strong directional characters** - Characters like Arabic or Hebrew letters establish RTL flow - **Handles neutral characters** - Spaces, punctuation, and numbers display correctly in context - **Manages embedding** - LTR words (like English brand names) embed correctly within RTL text This automatic detection works for: - **Arabic** - Including Persian and Urdu variants - **Hebrew** - Modern and Biblical Hebrew - **Mixed content** - English or other LTR text within RTL paragraphs ### Text Alignment for RTL Languages CE.SDK now defaults to 'Auto' alignment, which automatically aligns text based on script direction. RTL scripts (Arabic, Hebrew) align right, while LTR scripts align left. This eliminates the need to manually configure alignment for different writing systems. ```typescript highlight-text-alignment if (alignment !== 'Left') { engine.block.setEnum(textBlock, 'text/horizontalAlignment', alignment); } ``` The alignment options: - **'Auto'** (default) - Automatically aligns based on the text's script direction. RTL scripts align right, LTR scripts align left. - **'Left'** - Always align text to the left - **'Right'** - Always align text to the right - **'Center'** - Center-align text (language-neutral) With 'Auto' alignment, the Arabic text in our example automatically aligns to the right without explicit configuration: ```typescript { text: 'هذا مثال.', typeface: NOTO_NASKH_ARABIC, height: 160, // No alignment needed - Auto handles RTL automatically } ``` You can still override alignment when needed: ```typescript { text: 'Centered Title', typeface: ROBOTO_BOLD, height: 80, alignment: 'Center' as const // Override Auto for centering } ``` To check the effective alignment when 'Auto' is set, use `getTextEffectiveHorizontalAlignment()`: ```typescript const effectiveAlignment = engine.block.getTextEffectiveHorizontalAlignment(textBlock); // Returns 'Left' or 'Right' based on text content, never 'Auto' ``` This approach simplifies multilingual templates - the same template works correctly for both LTR and RTL languages without alignment adjustments. ## Complex Script Support CE.SDK automatically handles complex script features without requiring additional configuration. The text engine provides: ### Arabic Script Features When rendering Arabic text, the engine automatically applies: - **Contextual letter forms** - Letters change shape based on position (initial, medial, final, isolated) - **Required ligatures** - Mandatory character combinations render as single glyphs - **Diacritical marks** - Tashkeel marks position correctly above and below letters - **Kashida** - Text justification through letter elongation These features work automatically when you use fonts that include the necessary OpenType tables. ### Other Complex Scripts The text engine similarly supports other writing systems: - **Devanagari** (Hindi, Sanskrit) - Conjunct formations and half-forms - **Thai** - Vowel and tone mark positioning above and below base characters - **Japanese** - Kanji, hiragana, and katakana rendering - **Southeast Asian scripts** - Khmer subscripts, Myanmar ligatures All complex script features are applied automatically based on Unicode properties and font capabilities. ## Creating Multilingual Design Templates ### Using Variables for Multilingual Content For designs that need to display different language content dynamically, use variable bindings. Variables enable you to switch languages while maintaining proper text rendering for each script. Benefits of using variables: - **Dynamic language switching** - Update variable values to change content language - **Consistent formatting** - Text styling and layout remain stable across languages - **Template reusability** - One template works for multiple language markets Variables are particularly useful for: - **Localized marketing materials** - Same design, different language content - **A/B testing** - Test messaging across languages - **Regional campaigns** - Deploy region-specific content from a single template ### Template Design Considerations When designing multilingual templates, account for: - **Text expansion** - Some languages require 30-50% more space than English - **Direction changes** - RTL layouts may need mirrored designs - **Font availability** - Ensure typefaces cover all target scripts - **Line height** - Scripts with diacritics may need additional vertical space Test templates with representative content in all target languages to verify layout works correctly. ## Font Fallback and Character Coverage ### Font Selection Priority When rendering text, CE.SDK follows a fallback chain to ensure all characters display correctly: 1. **Primary typeface** - The explicitly assigned font 2. **System fonts** - Fonts available on the user's system 3. **Fallback glyphs** - Generic replacement characters when no font contains the glyph This fallback system ensures text always renders, even when fonts lack specific characters. ### Ensuring Complete Character Coverage To avoid missing glyph issues: - **Use comprehensive typefaces** - Noto fonts family provides extensive Unicode coverage - **Test with target languages** - Verify fonts include required scripts before deployment - **Configure fallback stacks** - Define multiple typefaces for comprehensive coverage - **Check font formats** - Ensure fonts include OpenType layout tables for complex scripts Testing with representative text samples in all target languages helps identify coverage gaps before production. ## Troubleshooting ### Text Displays as Squares or Question Marks **Issue**: Characters render as replacement glyphs (□ or ?) instead of the intended script. **Solution**: The selected font lacks glyphs for the text content. Use fonts with appropriate Unicode coverage: - Verify font supports required Unicode blocks - Test with Noto fonts family for comprehensive coverage - Check font file format compatibility (TTF, OTF, WOFF2) - Ensure font files are accessible with correct URIs ### RTL Text Renders Left-to-Right **Issue**: Arabic or Hebrew text flows left-to-right instead of right-to-left. **Solution**: The default 'Auto' alignment should handle this automatically. If issues persist: - Verify alignment is set to 'Auto' (default) or explicitly 'Right' - Use `engine.block.getTextEffectiveHorizontalAlignment(block)` to check resolved alignment - Verify font includes bidirectional layout features - Check that font supports RTL scripts - Test with known RTL-compatible fonts (Noto Sans Arabic, Noto Sans Hebrew) ### Ligatures or Diacritics Display Incorrectly **Issue**: Complex script features like ligatures or diacritical marks appear disconnected or mispositioned. **Solution**: Use fonts specifically designed for the target script: - Verify font includes GSUB/GPOS OpenType tables - Use script-specific Noto fonts - Check font includes required OpenType layout features - Test with fonts known to support the script ### Mixed-Direction Text Layout Issues **Issue**: Text with both LTR and RTL content displays incorrectly. **Solution**: The engine's automatic bidirectional handling should resolve most cases. If issues persist: - Test with different fonts to verify bidirectional support - Use Unicode directional formatting characters sparingly (RLM U+200F, LRM U+200E) - Verify text editor preserves directional markers - Check that text content includes proper strong directional characters --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/overview-0bd620/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Overview](https://img.ly/docs/cesdk/sveltekit/text/overview-0bd620/) --- --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Styling" description: "Apply fonts, colors, alignment, and other styling options to customize text appearance." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/styling-269c48/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Text Styling](https://img.ly/docs/cesdk/sveltekit/text/styling-269c48/) --- Style text blocks programmatically with colors, backgrounds, typefaces, and formatting.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-styling-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-styling-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-styling-browser/) CE.SDK provides comprehensive text styling capabilities through the Block API. We can control text appearance through colors, backgrounds, typefaces, font weights, and case transformations, with the ability to apply different styling to specific character ranges within a single text block. ```typescript file=@cesdk_web_examples/guides-text-styling-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from "@cesdk/cesdk-js"; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from "./package.json"; /** * CE.SDK Plugin: Text Styling Guide * * Demonstrates programmatic text styling capabilities: * - Editing text content * - Applying colors to character ranges * - Adding styled backgrounds * - Text case transformations * - Managing typefaces and fonts * - Toggling font weights and styles */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error("CE.SDK instance is required for this plugin"); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run("scene.create", { page: { width: 800, height: 600, unit: "Pixel" }, }); const engine = cesdk.engine; const page = engine.block.findByType("page")[0]; // Create a text block to demonstrate styling const text = engine.block.create("text"); engine.block.appendChild(page, text); engine.block.setPositionX(text, 100); engine.block.setPositionY(text, 100); engine.block.setWidthMode(text, "Auto"); engine.block.setHeightMode(text, "Auto"); // Edit text content using replaceText() engine.block.replaceText(text, "Hello World"); // Add a "!" at the end by inserting at position 11 engine.block.replaceText(text, "!", 11); // Replace "World" with "CE.SDK" engine.block.replaceText(text, "CE.SDK", 6, 11); // Remove "Hello " (first 6 characters) engine.block.removeText(text, 0, 6); // Apply colors to the entire text engine.block.setTextColor(text, { r: 1.0, g: 0.65, b: 0.0, a: 1.0 }); // Orange // Apply different color to a specific range (characters 0-2) engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 0, 2); // Blue // Enable and configure text background engine.block.setBool(text, "backgroundColor/enabled", true); // Set background color engine.block.setColor(text, "backgroundColor/color", { r: 0.95, g: 0.95, b: 0.95, a: 1.0, }); // Light gray // Configure padding on all sides engine.block.setFloat(text, "backgroundColor/paddingLeft", 10); engine.block.setFloat(text, "backgroundColor/paddingRight", 10); engine.block.setFloat(text, "backgroundColor/paddingTop", 8); engine.block.setFloat(text, "backgroundColor/paddingBottom", 8); // Add rounded corners engine.block.setFloat(text, "backgroundColor/cornerRadius", 8); // Background inherits text block animations when writing style is 'Block' const animation = engine.block.createAnimation("slide"); engine.block.setEnum(animation, "textAnimationWritingStyle", "Block"); engine.block.setInAnimation(text, animation); // Apply text case transformation (doesn't modify the string value) engine.block.setTextCase(text, "Uppercase"); // Define a typeface with multiple font variants const typeface = { name: "Roboto", fonts: [ { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf", subFamily: "Regular", }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf", subFamily: "Bold", weight: "bold" as const, }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Italic.ttf", subFamily: "Italic", style: "italic" as const, }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-BoldItalic.ttf", subFamily: "Bold Italic", weight: "bold" as const, style: "italic" as const, }, ], }; // Change font and reset formatting engine.block.setFont(text, typeface.fonts[0].uri, typeface); engine.block.setTextFontSize(text, 320); // Toggle bold font weight if (engine.block.canToggleBoldFont(text)) { engine.block.toggleBoldFont(text); } // Toggle italic font style on a specific range if (engine.block.canToggleItalicFont(text, 0, 2)) { engine.block.toggleItalicFont(text, 0, 2); } // Zoom to show the text block engine.scene.zoomToBlock(text, { padding: 40 }); // Select the text block to show it in the inspector engine.block.setSelected(text, true); } } export default Example; ``` This guide covers editing text content, applying colors and backgrounds, managing typefaces, and controlling text case and font styles. ## Editing Text Content We modify text using `engine.block.replaceText()` and `engine.block.removeText()`. Text ranges are specified using UTF-16 indices \[from, to). When we omit indices, operations apply to the entire string. ```typescript highlight-edit-text // Edit text content using replaceText() engine.block.replaceText(text, "Hello World"); // Add a "!" at the end by inserting at position 11 engine.block.replaceText(text, "!", 11); // Replace "World" with "CE.SDK" engine.block.replaceText(text, "CE.SDK", 6, 11); // Remove "Hello " (first 6 characters) engine.block.removeText(text, 0, 6); ``` The `replaceText()` method can replace the entire text, insert at a specific position, or replace a character range. The `removeText()` method removes characters from specified indices. ## Text Colors We apply different colors to character ranges using `engine.block.setTextColor()` with RGBA or spot colors. The `engine.block.getTextColors()` method returns an ordered list of unique colors in the text. ```typescript highlight-text-colors // Apply colors to the entire text engine.block.setTextColor(text, { r: 1.0, g: 0.65, b: 0.0, a: 1.0 }); // Orange // Apply different color to a specific range (characters 0-2) engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 0, 2); // Blue ``` CE.SDK supports applying different colors to individual character ranges within a single text block, enabling multi-colored text effects. ## Text Backgrounds We add rectangular backgrounds using `backgroundColor/*` properties. The background is enabled with `engine.block.setBool()`, customized with `engine.block.setColor()`, and adjusted with `engine.block.setFloat()` for padding and corner radius. ```typescript highlight-text-background // Enable and configure text background engine.block.setBool(text, "backgroundColor/enabled", true); // Set background color engine.block.setColor(text, "backgroundColor/color", { r: 0.95, g: 0.95, b: 0.95, a: 1.0, }); // Light gray // Configure padding on all sides engine.block.setFloat(text, "backgroundColor/paddingLeft", 10); engine.block.setFloat(text, "backgroundColor/paddingRight", 10); engine.block.setFloat(text, "backgroundColor/paddingTop", 8); engine.block.setFloat(text, "backgroundColor/paddingBottom", 8); // Add rounded corners engine.block.setFloat(text, "backgroundColor/cornerRadius", 8); ``` Text backgrounds inherit animations assigned to their text block when the animation writing style is set to 'Block'. ```typescript highlight-background-animation // Background inherits text block animations when writing style is 'Block' const animation = engine.block.createAnimation("slide"); engine.block.setEnum(animation, "textAnimationWritingStyle", "Block"); engine.block.setInAnimation(text, animation); ``` ## Text Case Transformations We render text in different cases without modifying the underlying string value. The `engine.block.setTextCase()` method accepts Normal, Uppercase, Lowercase, or Titlecase values. ```typescript highlight-text-case // Apply text case transformation (doesn't modify the string value) engine.block.setTextCase(text, "Uppercase"); ``` Text case transformations are visual modifiers - they change how the text renders without altering the actual string data. ## Typefaces and Fonts We change fonts by providing a URI and typeface definition. The `engine.block.setFont()` method changes the font and resets existing formatting. The `engine.block.setTypeface()` method changes the typeface while preserving formatting. ```typescript highlight-typeface // Define a typeface with multiple font variants const typeface = { name: "Roboto", fonts: [ { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf", subFamily: "Regular", }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf", subFamily: "Bold", weight: "bold" as const, }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Italic.ttf", subFamily: "Italic", style: "italic" as const, }, { uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-BoldItalic.ttf", subFamily: "Bold Italic", weight: "bold" as const, style: "italic" as const, }, ], }; // Change font and reset formatting engine.block.setFont(text, typeface.fonts[0].uri, typeface); engine.block.setTextFontSize(text, 320); ``` A typeface definition includes the typeface name and a list of font definitions with URIs, subFamily names, weights, and styles. The `engine.block.getTypeface()` method returns the current typeface definition. ## Font Weights and Styles We toggle between normal/bold weights and normal/italic styles using `engine.block.toggleBoldFont()` and `engine.block.toggleItalicFont()`. We first check availability with `canToggleBoldFont()` and `canToggleItalicFont()`. ```typescript highlight-font-styles // Toggle bold font weight if (engine.block.canToggleBoldFont(text)) { engine.block.toggleBoldFont(text); } // Toggle italic font style on a specific range if (engine.block.canToggleItalicFont(text, 0, 2)) { engine.block.toggleItalicFont(text, 0, 2); } ``` The typeface must include fonts matching the requested weight and style combination for toggling to work. We query current weights and styles with `engine.block.getTextFontWeights()` and `engine.block.getTextFontStyles()`. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.replaceText()` | Replace or insert text at specified indices | | `engine.block.removeText()` | Remove text at specified indices | | `engine.block.setTextColor()` | Set color for entire text or specific range | | `engine.block.getTextColors()` | Get ordered list of unique colors in text | | `engine.block.setBool()` | Enable/disable boolean properties | | `engine.block.setColor()` | Set color property values | | `engine.block.getColor()` | Get color property values | | `engine.block.setFloat()` | Set numeric property values | | `engine.block.setTextCase()` | Apply text case transformation | | `engine.block.getTextCases()` | Get ordered list of text cases in range | | `engine.block.setFont()` | Change font and reset formatting | | `engine.block.setTypeface()` | Change typeface and preserve formatting | | `engine.block.getTypeface()` | Get current typeface definition | | `engine.block.canToggleBoldFont()` | Check if bold toggle is possible | | `engine.block.toggleBoldFont()` | Toggle between normal and bold weight | | `engine.block.canToggleItalicFont()` | Check if italic toggle is possible | | `engine.block.toggleItalicFont()` | Toggle between normal and italic style | | `engine.block.getTextFontWeights()` | Get ordered list of font weights in range | | `engine.block.getTextFontStyles()` | Get ordered list of font styles in range | ## Troubleshooting **getTypeface() throws error**: New text blocks don't have explicit typefaces until `setFont()` is called. **Font toggle not working**: Verify the typeface definition includes fonts for requested weight and style combinations. **Text background not visible**: Ensure the `backgroundColor/enabled` property is set to true. **Unexpected text case rendering**: Text case transformations don't modify the underlying string value - they only affect rendering. **Font formatting lost**: Use `setTypeface()` instead of `setFont()` to preserve existing formatting when changing fonts. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Text Designs" description: "Create and customize text component libraries using predefined text designs that appear in your asset library." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/text/text-designs-a1b2c3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Edit Text](https://img.ly/docs/cesdk/sveltekit/text-8a993a/) > [Text Designs](https://img.ly/docs/cesdk/sveltekit/text/text-designs-a1b2c3/) --- Create and customize text designs (text components) that appear in CE.SDK's asset library for users to insert into their designs.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-text-designs-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-text-designs-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-text-designs-browser/) Text designs (also known as text components) are pre-designed text layouts stored as serialized blocks in the asset library. Users click on these components to insert them into their designs. CE.SDK ships with over 20 default components; this guide shows how to create custom ones programmatically. ```typescript file=@cesdk_web_examples/guides-text-text-designs-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; // Import the pre-generated thumbnail for the asset library import customTitleThumbnail from './assets/custom-title-thumbnail.png'; /** * CE.SDK Plugin: Text Designs Guide * * Demonstrates how to create and register custom text designs (text components): * - Create styled text blocks programmatically * - Serialize text components with saveToArchive() * - Generate thumbnails with block.export() * - Register custom asset sources for the text components library * * The saveToArchive() method creates a zip archive containing the blocks.blocks file * and all referenced resources (fonts, images). For production, extract this archive * and host the files. Use block.loadFromURL() pointing to the blocks.blocks file. */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a styled text block that will become our custom component const textComponent = engine.block.create('text'); engine.block.appendChild(page, textComponent); // Set text content and styling engine.block.replaceText(textComponent, 'Custom Title'); engine.block.setFloat(textComponent, 'text/fontSize', 72); // Set text color to a brand color engine.block.setTextColor(textComponent, { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); // Configure dimensions - use fixed frame with clipping engine.block.setWidthMode(textComponent, 'Absolute'); engine.block.setHeightMode(textComponent, 'Absolute'); engine.block.setWidth(textComponent, 400); engine.block.setHeight(textComponent, 100); engine.block.setBool(textComponent, 'clipped', true); // Position the component on the page engine.block.setPositionX(textComponent, 50); engine.block.setPositionY(textComponent, 50); // Define a custom typeface // With saveToArchive(), fonts are automatically bundled in the archive // You can use any font - CDN URLs, bundle:// URIs, or custom fonts const caveatTypeface = { name: 'Caveat', fonts: [ { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Caveat/Caveat-Regular.ttf', subFamily: 'Regular' }, { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Caveat/Caveat-Bold.ttf', subFamily: 'Bold' } ] }; // Set the font - saveToArchive() will include the font files in the archive engine.block.setFont( textComponent, caveatTypeface.fonts[0].uri, caveatTypeface ); // Configure constraints for flexible resizing // These ensure the component maintains proper proportions when resized // Enable automatic font sizing within constraints engine.block.setBool(textComponent, 'text/automaticFontSizeEnabled', true); engine.block.setFloat(textComponent, 'text/minAutomaticFontSize', 24); engine.block.setFloat(textComponent, 'text/maxAutomaticFontSize', 120); // Add a background to visualize the text frame engine.block.setBool(textComponent, 'backgroundColor/enabled', true); engine.block.setColor(textComponent, 'backgroundColor/color', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); // Serialize the text component using saveToArchive() // This creates a zip archive containing blocks.blocks and all resources (fonts, images) const archiveBlob = await engine.block.saveToArchive([textComponent]); console.log('Archive size:', archiveBlob.size, 'bytes'); // Create a Blob URL for in-memory loading // In production, you would extract the archive and host the files on your server const archiveUrl = URL.createObjectURL(archiveBlob); // In production, generate thumbnails using block.export(): // // const thumbnailBlob = await engine.block.export(textComponent, { // mimeType: 'image/png', // targetWidth: 400, // targetHeight: 320 // }); // // For this example, we use a pre-generated thumbnail to avoid // watermarks when running without a license key. // Prepend origin to make it an absolute URL (CE.SDK prepends its base URL to relative paths) const thumbnailUri = window.location.origin + customTitleThumbnail; // Create the content.json structure for the custom component // In production, you would host the serialized component and thumbnail on your server const contentJson = { version: '3.0.0', id: 'my.custom.textComponents', assets: [ { id: '//my.custom.textComponents/customTitle', label: { en: 'Custom Title' }, meta: { // In production, these would be URLs to your hosted files // uri: 'https://your-server.com/textComponents/data/CustomTitle.blocks', // thumbUri: 'https://your-server.com/textComponents/thumbnails/customTitle.png', mimeType: 'application/ubq-blocks-string' } } ], blocks: [] }; console.log( 'Content.json structure:', JSON.stringify(contentJson, null, 2) ); // Register a custom asset source with an apply callback // The callback handles loading and inserting blocks when clicked // Store archive URLs in a Map for lookup when applying const archiveUrls = new Map(); archiveUrls.set('customTitle', archiveUrl); // Create local source with custom apply callback engine.asset.addLocalSource( 'custom.textComponents', undefined, // No MIME type filter async (asset) => { // Get the archive URL for this asset const assetArchiveUrl = archiveUrls.get(asset.id); if (!assetArchiveUrl) return undefined; // Load the block from the archive using loadFromArchiveURL() const loadedBlocks = await engine.block.loadFromArchiveURL( assetArchiveUrl ); const newBlock = loadedBlocks[0]; if (!newBlock) return undefined; // Add to the current page and center it const currentPage = engine.scene.getCurrentPage(); if (currentPage) { engine.block.appendChild(currentPage, newBlock); // Center the block on the page const pageWidth = engine.block.getWidth(currentPage); const pageHeight = engine.block.getHeight(currentPage); const blockWidth = engine.block.getWidth(newBlock); const blockHeight = engine.block.getHeight(newBlock); engine.block.setPositionX(newBlock, (pageWidth - blockWidth) / 2); engine.block.setPositionY(newBlock, (pageHeight - blockHeight) / 2); } engine.editor.addUndoStep(); return newBlock; } ); // Add the text component asset to the source engine.asset.addAssetToSource('custom.textComponents', { id: 'customTitle', label: { en: 'Custom Title' }, meta: { thumbUri: thumbnailUri, mimeType: 'application/ubq-blocks-string' } }); console.log('Custom text components asset source registered'); // Configure the asset library to display the custom text components // Add translation for the library entry label cesdk.i18n.setTranslations({ en: { 'libraries.text-components-entry.label': 'Text Components' } }); // Add the text components source to the asset library cesdk.ui.addAssetLibraryEntry({ id: 'text-components-entry', sourceIds: ['custom.textComponents'], previewLength: 2, previewBackgroundType: 'contain', gridBackgroundType: 'contain', gridColumns: 2, cardLabelPosition: () => 'below' }); // Add text components library to the dock for easy access cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'text-components-dock', label: 'Text Components', icon: '@imgly/Type', entries: ['text-components-entry'] } ]); // Open the text components panel to showcase the result cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['text-components-entry'] } }); // Add a label explaining what this example demonstrates const label = engine.block.create('text'); engine.block.appendChild(page, label); engine.block.setWidthMode(label, 'Auto'); engine.block.setHeightMode(label, 'Auto'); engine.block.replaceText( label, 'This example creates a custom text component,\nserializes it, and registers it as an asset source.' ); engine.block.setFloat(label, 'text/fontSize', 54); engine.block.setTextColor(label, { r: 0.4, g: 0.4, b: 0.4, a: 1.0 }); engine.block.setPositionX(label, 50); engine.block.setPositionY(label, 200); // Create a second example component with different styling const promoComponent = engine.block.create('text'); engine.block.appendChild(page, promoComponent); engine.block.replaceText(promoComponent, 'SALE'); engine.block.setFloat(promoComponent, 'text/fontSize', 96); // Use a bold red color for the promo text engine.block.setTextColor(promoComponent, { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }); // Set a bold font for the promo component const robotoTypeface = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold' } ] }; engine.block.setFont( promoComponent, robotoTypeface.fonts[0].uri, robotoTypeface ); engine.block.setWidthMode(promoComponent, 'Absolute'); engine.block.setHeightMode(promoComponent, 'Absolute'); engine.block.setWidth(promoComponent, 300); engine.block.setHeight(promoComponent, 120); engine.block.setBool(promoComponent, 'clipped', true); // Add background engine.block.setBool(promoComponent, 'backgroundColor/enabled', true); engine.block.setColor(promoComponent, 'backgroundColor/color', { r: 1.0, g: 0.95, b: 0.9, a: 1.0 }); engine.block.setPositionX(promoComponent, 50); engine.block.setPositionY(promoComponent, 350); // Select the first text component to show it in the inspector engine.block.select(textComponent); } } export default Example; ``` This guide covers creating styled text components, serializing them for storage, generating thumbnails, and registering them as custom asset sources. ## Setting Up the Editor We initialize CE.SDK with asset sources and create a design scene. The page provides a canvas where we build our text components. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; ``` With the editor ready, we can create text blocks and configure them as reusable components. ## Creating a Text Component We create a text block and configure its styling, dimensions, and position. The component uses fixed frame dimensions with clipping enabled to ensure consistent display. We set an explicit font using the `setFont()` API. ```typescript highlight=highlight-create-text-component // Create a styled text block that will become our custom component const textComponent = engine.block.create('text'); engine.block.appendChild(page, textComponent); // Set text content and styling engine.block.replaceText(textComponent, 'Custom Title'); engine.block.setFloat(textComponent, 'text/fontSize', 72); // Set text color to a brand color engine.block.setTextColor(textComponent, { r: 0.2, g: 0.4, b: 0.8, a: 1.0 }); // Configure dimensions - use fixed frame with clipping engine.block.setWidthMode(textComponent, 'Absolute'); engine.block.setHeightMode(textComponent, 'Absolute'); engine.block.setWidth(textComponent, 400); engine.block.setHeight(textComponent, 100); engine.block.setBool(textComponent, 'clipped', true); // Position the component on the page engine.block.setPositionX(textComponent, 50); engine.block.setPositionY(textComponent, 50); // Define a custom typeface // With saveToArchive(), fonts are automatically bundled in the archive // You can use any font - CDN URLs, bundle:// URIs, or custom fonts const caveatTypeface = { name: 'Caveat', fonts: [ { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Caveat/Caveat-Regular.ttf', subFamily: 'Regular' }, { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Caveat/Caveat-Bold.ttf', subFamily: 'Bold' } ] }; // Set the font - saveToArchive() will include the font files in the archive engine.block.setFont( textComponent, caveatTypeface.fonts[0].uri, caveatTypeface ); ``` The text block now has custom styling including font size, color, and fixed dimensions. The `clipped` property ensures text that exceeds the frame boundaries is hidden. With `saveToArchive()`, fonts are automatically bundled in the archive, so you can use any font source. ## Configuring Constraints We configure the text component with automatic font sizing and constraints. This ensures the component adapts gracefully when users resize it while maintaining readability. ```typescript highlight=highlight-configure-constraints // Configure constraints for flexible resizing // These ensure the component maintains proper proportions when resized // Enable automatic font sizing within constraints engine.block.setBool(textComponent, 'text/automaticFontSizeEnabled', true); engine.block.setFloat(textComponent, 'text/minAutomaticFontSize', 24); engine.block.setFloat(textComponent, 'text/maxAutomaticFontSize', 120); // Add a background to visualize the text frame engine.block.setBool(textComponent, 'backgroundColor/enabled', true); engine.block.setColor(textComponent, 'backgroundColor/color', { r: 0.95, g: 0.95, b: 1.0, a: 1.0 }); ``` The automatic font sizing scales text between 24pt and 120pt as the frame is resized. ## Serializing the Component We serialize the text component using `saveToArchive()`. This creates a zip archive containing the `blocks.blocks` file and all referenced resources (fonts, images). The archive is self-contained and portable. ```typescript highlight=highlight-serialize-component // Serialize the text component using saveToArchive() // This creates a zip archive containing blocks.blocks and all resources (fonts, images) const archiveBlob = await engine.block.saveToArchive([textComponent]); console.log('Archive size:', archiveBlob.size, 'bytes'); // Create a Blob URL for in-memory loading // In production, you would extract the archive and host the files on your server const archiveUrl = URL.createObjectURL(archiveBlob); ``` For production, extract the archive and host the files on your server. Use `loadFromURL()` pointing to the `blocks.blocks` file. In this example, we create a Blob URL for in-memory loading to demonstrate the workflow. ## Legacy: Using saveToString() For backward compatibility, you can use `saveToString()` instead of `saveToArchive()`. This approach serializes the block as a string but requires external font URLs to remain accessible. ```typescript // Legacy approach - requires external font URLs const serializedComponent = await engine.block.saveToString( [textComponent], ['bundle', 'buffer', 'http', 'https'] // Allowed resource schemes ); // Load with loadFromString() const loadedBlocks = await engine.block.loadFromString(serializedComponent); ``` **Limitations of saveToString():** - Font URLs must remain accessible at load time - No automatic resource bundling - Requires `allowedResourceSchemes` configuration We recommend `saveToArchive()` for new implementations as it bundles all resources automatically. ## Hosting for Production For production deployments, extract the archive and host the files on your web server. Maintain the following directory structure: ``` /ly.img.text.components/ ├── content.json ├── data/ │ ├── customTitle/ │ │ └── blocks.blocks │ ├── customHeading/ │ │ ├── blocks.blocks │ │ ├── fonts/ │ │ │ └── 59251598.ttf │ │ └── images/ │ │ └── 3255389386.jpeg │ └── ... └── thumbnails/ ├── customTitle.png ├── customHeading.png └── ... ``` Simple components contain only `blocks.blocks`. Components with custom fonts or images include additional subdirectories. The archive structure mirrors this layout - extract it directly to your server. Update the `uri` paths in `content.json` to point to your hosted files: ```json { "uri": "https://your-server.com/ly.img.text.components/data/customTitle/blocks.blocks", "thumbUri": "https://your-server.com/ly.img.text.components/thumbnails/customTitle.png" } ``` ## Generating a Thumbnail Thumbnails help users preview components before inserting them. In production, generate 400x320px thumbnails using `block.export()` and host them on your server. ```typescript highlight=highlight-generate-thumbnail // In production, generate thumbnails using block.export(): // // const thumbnailBlob = await engine.block.export(textComponent, { // mimeType: 'image/png', // targetWidth: 400, // targetHeight: 320 // }); // // For this example, we use a pre-generated thumbnail to avoid // watermarks when running without a license key. // Prepend origin to make it an absolute URL (CE.SDK prepends its base URL to relative paths) const thumbnailUri = window.location.origin + customTitleThumbnail; ``` For this example, we use a pre-generated thumbnail imported as a static asset. In your production code, you would generate thumbnails dynamically or host them alongside your `.blocks` files. ## Creating the Content.json Structure We create the content.json structure that defines the asset source. This file lists all components with their metadata, including paths to the serialized blocks and thumbnails. ```typescript highlight=highlight-create-content-json // Create the content.json structure for the custom component // In production, you would host the serialized component and thumbnail on your server const contentJson = { version: '3.0.0', id: 'my.custom.textComponents', assets: [ { id: '//my.custom.textComponents/customTitle', label: { en: 'Custom Title' }, meta: { // In production, these would be URLs to your hosted files // uri: 'https://your-server.com/textComponents/data/CustomTitle.blocks', // thumbUri: 'https://your-server.com/textComponents/thumbnails/customTitle.png', mimeType: 'application/ubq-blocks-string' } } ], blocks: [] }; console.log( 'Content.json structure:', JSON.stringify(contentJson, null, 2) ); ``` In production, the `uri` and `thumbUri` fields point to your hosted files. The `mimeType` must be `"application/ubq-blocks-string"` for text components. ## Registering the Asset Source We register a custom asset source using `addLocalSource()` with a custom apply callback. The callback handles loading the block from the archive and inserting it into the scene when users click on a component. ```typescript highlight=highlight-register-asset-source // Register a custom asset source with an apply callback // The callback handles loading and inserting blocks when clicked // Store archive URLs in a Map for lookup when applying const archiveUrls = new Map(); archiveUrls.set('customTitle', archiveUrl); // Create local source with custom apply callback engine.asset.addLocalSource( 'custom.textComponents', undefined, // No MIME type filter async (asset) => { // Get the archive URL for this asset const assetArchiveUrl = archiveUrls.get(asset.id); if (!assetArchiveUrl) return undefined; // Load the block from the archive using loadFromArchiveURL() const loadedBlocks = await engine.block.loadFromArchiveURL( assetArchiveUrl ); const newBlock = loadedBlocks[0]; if (!newBlock) return undefined; // Add to the current page and center it const currentPage = engine.scene.getCurrentPage(); if (currentPage) { engine.block.appendChild(currentPage, newBlock); // Center the block on the page const pageWidth = engine.block.getWidth(currentPage); const pageHeight = engine.block.getHeight(currentPage); const blockWidth = engine.block.getWidth(newBlock); const blockHeight = engine.block.getHeight(newBlock); engine.block.setPositionX(newBlock, (pageWidth - blockWidth) / 2); engine.block.setPositionY(newBlock, (pageHeight - blockHeight) / 2); } engine.editor.addUndoStep(); return newBlock; } ); // Add the text component asset to the source engine.asset.addAssetToSource('custom.textComponents', { id: 'customTitle', label: { en: 'Custom Title' }, meta: { thumbUri: thumbnailUri, mimeType: 'application/ubq-blocks-string' } }); console.log('Custom text components asset source registered'); ``` The apply callback uses `loadFromArchiveURL()` to load the block from the archive and then appends it to the current page. This pattern provides custom handling for inserting text components with their bundled resources. ## Displaying in the Asset Library After registering the asset source, we configure the UI to display the text components in an accessible panel. This involves adding translations, creating a library entry, and adding it to the dock navigation. ```typescript highlight=highlight-configure-asset-library // Configure the asset library to display the custom text components // Add translation for the library entry label cesdk.i18n.setTranslations({ en: { 'libraries.text-components-entry.label': 'Text Components' } }); // Add the text components source to the asset library cesdk.ui.addAssetLibraryEntry({ id: 'text-components-entry', sourceIds: ['custom.textComponents'], previewLength: 2, previewBackgroundType: 'contain', gridBackgroundType: 'contain', gridColumns: 2, cardLabelPosition: () => 'below' }); // Add text components library to the dock for easy access cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }), 'ly.img.spacer', { id: 'ly.img.assetLibrary.dock', key: 'text-components-dock', label: 'Text Components', icon: '@imgly/Type', entries: ['text-components-entry'] } ]); // Open the text components panel to showcase the result cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['text-components-entry'] } }); ``` The `addAssetLibraryEntry()` method creates a panel that displays the components with their thumbnails. The `setComponentOrder({ in: 'ly.img.dock' }, order)` method adds a button to the dock so users can access the library. Finally, `openPanel()` opens the library to showcase the result. ## Creating Additional Components We create a second component with different styling to demonstrate building a library of text components. ```typescript highlight=highlight-create-second-component const promoComponent = engine.block.create('text'); engine.block.appendChild(page, promoComponent); engine.block.replaceText(promoComponent, 'SALE'); engine.block.setFloat(promoComponent, 'text/fontSize', 96); // Use a bold red color for the promo text engine.block.setTextColor(promoComponent, { r: 0.9, g: 0.2, b: 0.2, a: 1.0 }); // Set a bold font for the promo component const robotoTypeface = { name: 'Roboto', fonts: [ { uri: 'https://cdn.img.ly/assets/v3/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf', subFamily: 'Bold' } ] }; engine.block.setFont( promoComponent, robotoTypeface.fonts[0].uri, robotoTypeface ); engine.block.setWidthMode(promoComponent, 'Absolute'); engine.block.setHeightMode(promoComponent, 'Absolute'); engine.block.setWidth(promoComponent, 300); engine.block.setHeight(promoComponent, 120); engine.block.setBool(promoComponent, 'clipped', true); // Add background engine.block.setBool(promoComponent, 'backgroundColor/enabled', true); engine.block.setColor(promoComponent, 'backgroundColor/color', { r: 1.0, g: 0.95, b: 0.9, a: 1.0 }); engine.block.setPositionX(promoComponent, 50); engine.block.setPositionY(promoComponent, 350); ``` Each component can have unique styling, dimensions, and behavior. Build a library by creating multiple components and adding them to your content.json. ## Troubleshooting **Archive fails to load**: Ensure the Blob URL is valid and the archive was created successfully. Check browser console for errors. **Components not appearing in library**: Verify content.json structure, check that mimeType is "application/ubq-blocks-string", and ensure the asset source is registered. **Thumbnails not loading**: Confirm thumbUri paths are correct and accessible. Verify CORS settings if loading from a different origin. **Component scales incorrectly when inserted**: Review constraint configuration. Ensure automatic font sizing is enabled with appropriate min/max values. **Fonts missing when component loads**: With `saveToArchive()`, fonts are bundled automatically. If issues persist, verify the archive was created correctly. ## API Reference | Method | Purpose | |--------|---------| | `engine.block.create()` | Create a new block of specified type | | `engine.block.replaceText()` | Set text content on a text block | | `engine.block.setFloat()` | Set numeric properties like font size | | `engine.block.setFont()` | Set font with typeface definition and URI | | `engine.block.setTextColor()` | Set text color with RGBA values | | `engine.block.setWidthMode()` | Set width mode: 'Absolute', 'Percent', 'Auto' | | `engine.block.setHeightMode()` | Set height mode: 'Absolute', 'Percent', 'Auto' | | `engine.block.setBool()` | Enable/disable boolean properties | | `engine.block.setColor()` | Set color properties like background | | `engine.block.saveToArchive()` | Save blocks to zip archive with all resources | | `engine.block.loadFromArchiveURL()` | Load blocks from archive URL | | `engine.block.saveToString()` | Legacy: Save blocks as string (requires external resources) | | `engine.block.loadFromString()` | Legacy: Load blocks from string | | `engine.block.export()` | Export block as image blob | | `engine.asset.addLocalSource()` | Create asset source with custom apply callback | | `engine.asset.addAssetToSource()` | Add individual assets to a local source | | `cesdk.ui.addAssetLibraryEntry()` | Add custom entry to asset library UI | | `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` | Configure dock navigation buttons | | `cesdk.ui.openPanel()` | Open a panel programmatically | | `cesdk.i18n.setTranslations()` | Add translations for UI labels | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.10" description: "Review breaking changes and migration steps required to upgrade your project to CE.SDK v1.10." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-10-1ff469/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.10](https://img.ly/docs/cesdk/sveltekit/to-v1-10-1ff469/) --- Version v1.10 introduced major changes to how and where engine and the UI store assets. This guide helps you navigate those changes and explains what you need to do to bring your integration up to speed. ## 1. Scene Uploads are no longer serialized Image uploads are no longer stored in the scene and will not reappear upon scene load. To offer specific assets in your editor, configure and [add an asset source](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) containing the desired assets. ## 2. Deprecating Extensions Starting with `v1.10` we fully embrace [Asset Sources](https://img.ly/docs/cesdk/sveltekit/import-media/from-remote-source/unsplash-8f31f0/) as our standard interface for asset management. We're deprecating extension packs, previously stored in `/assets/extensions` and indexed via `manifest.json` files. **Fonts are not affected by this deprecation yet, but will receive the same treatment in an upcoming version.** We'll deprecate the `config.extensions` field for `CreativeEditorSDK`. As part of this deprecation, we'll **no longer ship** the following packs in the `/assets/extensions` directory in our `npm` packages: - `ly.img.cesdk.images.samples` - `ly.img.cesdk.shapes.default` - `ly.img.cesdk.stickers.doodle` - `ly.img.cesdk.stickers.emoji` - `ly.img.cesdk.stickers.emoticons` - `ly.img.cesdk.stickers.hand` - `ly.img.cesdk.vectorpaths` - `ly.img.cesdk.vectorpaths.abstract` To keep offering the contained assets in your deployment, use our new [convenience functions](#making-use-of-default-and-demo-asset-sources) to instantiate asset sources holding these assets. If you have existing scenes where an asset from an extension pack might be included, you must make sure you're still serving the corresponding files from your baseURL, so that `/extensions/…` paths still resolve properly. You can acquire a copy of the extension packs shipped in `v1.9.2` [from our CDN](https://cdn.img.ly/packages/imgly/cesdk-engine/1.9.2/assets/extensions.zip). Otherwise your scenes will **render missing asset alerts**. ### 2.1 Making use of Default and Demo Asset Sources We still want to offer a package, that has all batteries included and quickly gets you up to speed. To do so, we introduced two new convenience functions, that can be used to add a set of predefined asset sources to your integration: #### `addDefaultAssetSources` Adds a set of asset sources containing our default assets. These assets may be used in production and [served from your own servers](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/). The assets are parsed from the IMG.LY CDN at `{{base_url}}//content.json`, where `base_url` defaults to `https://cdn.img.ly/assets/v1`. Each source is created via `addLocalSource` and populated with the parsed assets. You can specify your own `base_url` or exclude certain source IDs. The following sources are added: | ID | Description | | ------------------------- | ------------------------------- | | `'ly.img.sticker'` | Various stickers | | `'ly.img.vectorpath'` | Shapes and arrows | | `'ly.img.filter.lut'` | LUT effects of various kinds. | | `'ly.img.filter.duotone'` | Color effects of various kinds. | #### `addDemoAssetSources` Registers a set of demo asset sources containing our example assets. These are not to meant to be used in your production code. The assets are parsed from the IMG.LY CDN at `https://cdn.img.ly/assets/demo/v1`. The `sceneMode` and `withUploadAssetSources` parameters control whether audio/video and upload sources are added. The following sources are added: | ID | Description | | ----------------------- | ---------------------------------- | | `'ly.img.image'` | Sample images | | `'ly.img.image.upload'` | Demo source to upload image assets | | `'ly.img.audio'` | Sample audios | | `'ly.img.audio.upload'` | Demo source to upload audio assets | | `'ly.img.video'` | Sample audios | | `'ly.img.video.upload'` | Demo source to upload video assets | #### Modifying Default & Demo Sources After registration you can freely modify the contained assets using the Asset APIs. You can add or remove entire asset sources or individual assets. #### Upload Asset Sources The upload asset sources and library entries for video and audio were added to the default configuration from `addDefaultAssetSources`. If you have added these sources manually (like mentioned in our video docs) you can remove them now. ## 3. AssetAPI Changes To further streamline interaction, the following breaking changes were made to the AssetAPI: - The `applyAsset` callbacks and `defaultApplyAsset` API now return an optional design block id in their callback if they created a new block. - `thumbUri` and `size` properties in `AssetDefinition` and `AssetResult` are now part of the `meta` property dictionary. - Values of the `blockType` asset meta property must now be design block type ids (e.g. `//ly.img.ubq/image`) ## 4. A New Way to Add Images Instead of specifying additional images for the `CreativeEditorSDK` in `config.presets.images`, you should make use of `asset.addAsset` and add your images into the `ly.img.image` asset source. ## 5. General API Changes The `blockType` `meta` property for assets changed from `ly.img.` to fully qualified block types: E.g. `'ly.img.image'` now needs to be `'//ly.img.ubq/image'`. As we're starting to apply the 'fill' concept to more parts of the interface, we deprecated various fill color related APIs: - Deprecated `hasFillColor`, use `hasFill` and query `block.getEnum(id, 'fill/type')` for `Solid` type instead. - Deprecated `get/setFillColorRGBA`, use `setFillSolidColor`instead.. - Deprecated `isFillColorEnabled`, use `isFillEnabled` instead. - Deprecated `setFillType` and `setFillGradientType`, use `createFill`, e.g., with type 'color' and then apply the fill block with `setFill` to the block instead. If the block has a fill, it should be removed with `getFill` and `destroy`. - Deprecated `getFillType` and `getFillGradientType`, query `block.getEnum(id, 'fill/type')` and `block.getEnum(id, 'fill/gradient/type')` instead instead - Deprecated `add/removeFillGradientColorStop` and `get/setFillGradientColorStops`. - Deprecated `get/setFillGradientControlPointX/Y`, use `block.getFloat(fill, keypath)` and `block.setFloat(fill, keypath, value)` with key paths 'fill/gradient/linear/startPointX/Y', 'fill/gradient/radial/centerPointX/Y', and 'fill/gradient/conical/centerPointX/Y' instead. - Deprecated `get/setFillGradientRadius`, use `block.getFloat(fill, 'fill/gradient/radial/radius')` and `block.setFloat(fill, 'fill/gradient/radial/radius', value)` instead." `camera/clearColor` property was replaced it with a global `clearColor` setting to allow controlling the clear color before loading a scene. Properties affecting playback that existed on both `Audio` and `VideoFill` where moved to a common `playback/` namespace: - `'fill/video/looping'` and `'audio/looping'` are now `'playback/looping'` - `'fill/video/volume'` and `'audio/volume'` are now `'playback/volume'` - `'fill/video/muted'` and `'audio/muted'` are now `'playback/muted'` --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.13" description: "Follow version-specific upgrade instructions to migrate from earlier versions to CE.SDK v1.13." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-13-d1ac5d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.13](https://img.ly/docs/cesdk/sveltekit/to-v1-13-d1ac5d/) --- In version v1.13, the way the CreativeEngine and CreativeEditor SDK are configured has changed. Several configuration options that were previously passed to `CreativeEngine.init()` or `CreativeEditor SDK.init()` have been removed or replaced. This document will explain the changes and describe the steps you can take to adapt them to your setup. #### CreativeEditorSDK initialization We are also introducing a new way of instantiating the CreativeEditorSDK, that provides more precise control over the initialization. Using `CreativeEditorSDK.create()`, you have the chance to configure the SDK before loading or creating a scene. This was not possible before. When using `CreativeEditorSDK.init()`, the SDK would create the initial scene before giving you the option to perform additional configuration via the API. The `create()` method will not create an initial scene for you. You need to do that yourself, using either the Scene API at `cesdk.editor.scene`, or one of the methods on the CreativeEditorSDK instance itself (`createDesignScene`, `createVideoScene`, `loadFromUrl`, `loadFromString`). ### Rationale Over time the number options you could pass into the call to `CreativeEngine.init({...config})` has grown quite a bit. Initially this was the only place where you could configure the behavior and settings of the CreativeEngine, but over the past year we introduced several new APIs. One of those APIs is the EditorAPI, which lets you [adjust](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) many [settings](https://img.ly/docs/cesdk/sveltekit/settings-970c98/) at runtime, not just at the launch of the app. To improve consistency of our APIs, we decided to scale back the options available in the configuration object in favor of changing settings via the EditorAPI. The only options that remain are those that are strictly necessary for the initialization of the CreativeEngine, such as the `baseUrl` and `license`. These changes were performed with the Creative Engine in mind, but since the CreativeEditor SDK shares a lot of the same code, the changes described in this document also apply to the configuration for the CE.SDK. ### Changed configuration options The following is a list of all configuration options that have been changed or removed, along with instructions on how to migrate the use of these options in your codebase: - `scene` options (`dpi`, `pixelScaleFactor`) have been removed. `scene/dpi` and `scene/pixelScaleFactor` can now be found as [properties on the scene in the BlockAPI](https://img.ly/docs/cesdk/sveltekit/concepts/blocks-90241e/). - `page` options have been removed. - `page.title.show` has been replaced with `cesdk.engine.editor.setSettingBool('page/title/show', enabled)` - `page.title.fontFileUri` has been replaced with `cesdk.engine.editor.setSettingString('page/title/fontFileUri', uri)` - `page.dimOutOfPageAreas` has been replaced with `cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', dimEnabled)` - `assetSources` have been removed. To add asset sources, use the AssetAPI at `cesdk.engine.asset`. - `preset.colors` has been removed as it was never used, previously. - `presets.colorPalettes` has been removed from CreativeEngine as it was not used. It has been moved to `ui.colorPalette` in the CESDK. - `presets.images` has been removed. To add assets and asset sources, use the AssetAPI at `cesdk.engine.asset`. - `presets.pageFormats` has been removed from the CreativeEngine as it was not used. Is has been moved to `ui.pageFormats` in the CESDK. Previously it was possible to mark a page format as default by setting `meta: {default: true}` in it. In `ui.pageFormats`, this has been simplified, to just `default: true`. - `variables` has been removed. Use the [VariableAPI](https://img.ly/docs/cesdk/sveltekit/create-templates/add-dynamic-content/text-variables-7ecb50/) instead. - `callbacks.log` has been moved to `logger`. Previously the logger callback would take a `Loglevel` enum as a second parameter. This enum has been removed. Instead you can define the loglevel with plain strings `'Warning' | 'Error' | 'Info' ` ### Change initialization code To ensure your users perceive a consistent UI experience, settings that have been moved to api calls should be made immediately after initializing the CreativeEngine. For the Creative Editor SDK, use the `create()` method, instead of `init()` #### CreativeEngine ``` const engine = await CreativeEngine.init(config); // 1. Configure Engine engine.editor.setSettingEnum('doubleClickSelectionMode', 'Direct'); // ... other settings // 2. Create/load scene const sceneId = await engine.scene.create(); // 3. Append Engine canvas element to the DOM document.getElementById('my-engine-container').append(engine.element); // ... your application code ``` #### CreativeEngine SDK ``` const cesdk = await CreativeEditorSDK.create('my-engine-container', config); // 1. Configure SDK cesdk.engine.asset.addSource(myAssetSource); // ... other settings // 2. Create/load scene const sceneId = await cesdk.createDesignScene(myPageFormats[pageFormatId]); // ... your application code ``` ### Fallback and warnings The CreativeEngine and CreativeEditor SDK still interpret the config object with its previous settings. If removed configuration options are detected during intialization, a warning is printed to the console, with individual instructions on how to migrate them. It is recommended to adjust your configuration as described above for the best compatibility with future developments and to get rid of these warnings. The fallback mechanism is not enabled for the new `CreativeEditorSDK.create()` method! Passing removed configuration options to `create()` will cause that option to be ignored and an error will be printed to the console. ### CreativeEngine Typescript definitions The more complex parts of our configuration (such as the page format definitions) were previously exporting type definitions under the `ConfigTypes` namespace in the CreativeEngine package. This namespace and all the types in it have been removed or moved elsewhere. For now we still export `ConfigTypes`, but have marked it and its members as `@deprecated`. Most of them are not used at all anymore, the rest have been moved elsewhere: - `ConfigTypes.Color` can now be imported directly as `PaletteColor` - `ConfigTypes.TypefaceDefinition` can be imported directly, as `TypefaceDefinition`. - `ConfigTypes.PageFormatDefinition` can be imported directly as `PageFormatDefinition` (CE.SDK only). - `ConfigTypes.Logger` can be imported directly as `Logger` The `LogLevel` enum that was previously used by `Logger` has been replaced with a string union (`'Warning' | 'Error' | 'Info'`). ### CreativeEditorSDK Typescript definitions The CreativeEditor SDK package still *does* export a `ConfigTypes` namespace. For use with the new `CreativeEditorSDK.create()`, we are offering a new type `CreateConfiguration`, which is lacking all of the removed keys instead of marking them as deprecated. ### Demo asset sources When adding demo asset sources using `cesdk.addDemoAssetSources()`, or `engine.addDemoAssetSources()`, make sure to specify the correct scene mode. The installed demo asset sources vary between Design and Video modes. If you don't specify a scene mode, `addDemoAssetSources()` will try to add the correct sources based on the current scene, and default to `'Design'`. If you call `addDemoAssetSources()` *without* a scene mode, and *before* loading or creating a video scene, the audio and video asset sources will not be added. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.19" description: "Learn what changed in v1.19 and how to update your implementation to stay compatible." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-19-55bcad/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.19](https://img.ly/docs/cesdk/sveltekit/to-v1-19-55bcad/) --- Version v1.19 of CreativeEngineSDK and CreativeEditorSDK introduces structural changes to many of the current design blocks, making them more composable and more powerful. Along with this update, there are mandatory license changes that require attention. This comes with a number of breaking changes. This document will explain the changes and describe the steps you need to take to adapt them to your setup. ## **License Changes** The `license` parameter is now required for CreativeEngineSDK and CreativeEditorSDK. This means that you will need to update your license parameter in the `CreativeEngine.init` and `CreativeEditorSDK.create` configuration object properties. There is also a new `userId`, an optional unique ID tied to your application's user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they're counted once. Providing this aids in better data accuracy. ## **Graphic Design Block** A new generic `Graphic` design block with the type id `//ly.img.ubq/graphic` has been introduced, which forms the basis of the new unified block structure. ## **Shapes** Similar to how the fill of a block is a separate object which can be attached to and replaced on a design block, we have now introduced a similar concept for the shape of a block. You use the new `createShape`, `getShape` and `setShape` APIs in order to define the shape of a design block. Only the new `//ly.img.ubq/graphic` block allows for its shape to be changed with these APIs. The new available shape types are: - `//ly.img.ubq/shape/rect` - `//ly.img.ubq/shape/line` - `//ly.img.ubq/shape/ellipse` - `//ly.img.ubq/shape/polygon` - `//ly.img.ubq/shape/star` - `//ly.img.ubq/shape/vector_path` The following block types are now removed in favor of using a `Graphic` block with one of the above mentioned shape instances: - `//ly.img.ubq/shapes/rect` - `//ly.img.ubq/shapes/line` - `//ly.img.ubq/shapes/ellipse` - `//ly.img.ubq/shapes/polygon` - `//ly.img.ubq/shapes/star` - `//ly.img.ubq/vector_path` (The removed type ids use the plural “shapes” and the new shape types use the singular “shape”) This structural change means that the shape-specific properties (e.g. the number of sides of a polygon) are not available on the design block any more but on the shape instances instead. You will have to add calls to `getShape` to get the instance id of the shape instance and then pass that to the property getter and setter APIs. Also remember to change property key strings in the getter and setter calls from the plural `shapes/…` to the singular `shape/…` to match the new type identifiers. ## **Image and Sticker** Previously, `//ly.img.ubq/image` and `//ly.img.ubq/sticker` were their own high-level design block types. They do not support the fill APIs nor the effects APIs. Both of these blocks are now removed in favor of using a `Graphic` block with an image fill (`//ly.img.ubq/fill/image`) and using the effects APIs instead of the legacy image block’s numerous effects properties. At its core, the sticker block has always just been an image block that is heavily limited in its capabilities. You can not crop it, nor apply any effects to it. In order to replicate this difference as closely as possible in the new unified structure, more fine-grained scopes have been added. You can now limit the adopter’s ability to crop a block and to edit its appearance. Note that since these scopes only apply to a user of the editor with the “Adopter” role, a “Creator” user will now have all of the same editing options for both images and for blocks that used to be stickers. ## **Scopes** The following is the list of changes to the design block scopes: - (Breaking) The permission to crop a block was split from `content/replace` and `design/style` into a separate scope: `layer/crop`. - Deprecated the `design/arrange` scope and renamed `design/arrange/move` → `layer/move` `design/arrange/resize` → `layer/resize` `design/arrange/rotate` → `layer/rotate` `design/arrange/flip` → `layer/flip` - Deprecated the `content/replace` scope. For `//ly.img.ubq/text` blocks, it is replaced with the new `text/edit` scope. For other blocks it is replaced with `fill/change`. - Deprecated the `design/style` scope and replaced it with the following fine-grained scopes: `text/character`, `stroke/change`, `layer/opacity`, `layer/blendMode`, `layer/visibility`, `layer/clipping`, `appearance/adjustments`, `appearance/filter`, `appearance/effect`, `appearance/blur`, `appearance/shadow` - Introduced `fill/change`, `stroke/change`, and `shape/change` scopes that control whether the fill, stroke or shape of a block may be edited by a user with an "Adopter" role. - The deprecated scopes are automatically mapped to their new corresponding scopes by the scope APIs for now until they will be removed completely in a future update. ## **Kind** While the new unified block structure both simplifies a lot of code and makes design blocks more powerful, it also means that many of the design blocks that used to have unique type ids now all have the same generic `//ly.img.ubq/graphic` type, which means that calls to the `findByType` cannot be used to filter blocks based on their legacy type ids any more. Simultaneously, there are many instances in which different blocks in the scene which might have the same type and underlying technical structure have different semantic roles in the document and should therefore be treated differently by the user interface. To solve both of these problems, we have introduced the concept of a block “kind”. This is a mutable string that can be used to tag different blocks with a semantic label. You can get the kind of a block using the `getKind` API and you can query blocks with a specific kind using the `findByKind` API. CreativeEngine provides the following default kind values: - `image` - `video` - `sticker` - `scene` - `camera` - `stack` - `page` - `audio` - `text` - `shape` - `group` Unlike the immutable design block type id, you can change the kind of a block with the new `setKind` API. It is important to remember that the underlying structure and properties of a design block are not strictly defined by its kind, since the kind, shape, fill and effects of a block can be changed independent of each other. Therefore, a user-interface should not make assumptions about available properties of a block purely based on its kind. > **Note:** **Note**Due to legacy reasons, blocks with the kind "sticker" will continue to not allow > their contents to be cropped. This special behavior will be addressed and replaced > with a more general-purpose implementation in a future update. ​ ## **Asset Definitions** The asset definitions have been updated to reflect the deprecation of legacy block type ids and the introduction of the “kind” property. In addition to the “blockType” meta property, you can now also define the `“shapeType”` ,`“fillType”` and `“kind”` of the block that should be created by the default implementation of the applyAsset function. - `“blockType”` defaults to `“//ly.img.ubq/graphic”` if left unspecified. - `“shapeType”` defaults to `“//ly.img.ubq/shape/rect”` if left unspecified - `“fillType”` defaults to `“//ly.img.ubq/fill/color”` if left unspecified Video block asset definitions used to specify the `“blockType”` as `“//ly.img.ubq/fill/video“`. The `“fillType”` meta asset property should now be used instead for such fill type ids. ## **Automatic Migration** CreativeEngine will always continue to support scene files that contain the now removed legacy block types. Those design blocks will be automatically replaced by the equivalent new unified block structure when the scene is loaded, which means that the types of all legacy blocks will change to `“//ly.img.ubq/graphic”`. Note that this can mean that a block gains new capabilities that it did not have before. For example, the line shape block did not have any stroke properties, so the `hasStroke` API used to return `false`. However, after the automatic migration its `Graphic` design block replacement supports both strokes and fills, so the `hasStroke` API now returns `true` . Similarly, the image block did not support fills or effects, but the `Graphic` block does. ## List of all Removed Block Type IDs - `//ly.img.ubq/image` - `//ly.img.ubq/sticker` - `//ly.img.ubq/shapes/rect` - `//ly.img.ubq/shapes/line` - `//ly.img.ubq/shapes/ellipse` - `//ly.img.ubq/shapes/polygon` - `//ly.img.ubq/shapes/star` - `//ly.img.ubq/vector_path` ## **UI Configuration** The configuration options for the legacy blocks have also been removed under `config.ui.elements.blocks` and a new configuration option for the `ly.img.ubq/graphic` block type have been introduced which will then define which UI controls to enable for graphic blocks (crop, filters, adjustments, effects, blur). This new configuration option follows the same structure as before. Here is a list of the deprecated block configuration options: - `//ly.img.ubq/image` - `//ly.img.ubq/fill/video` - `//ly.img.ubq/shapes/rect` - `//ly.img.ubq/shapes/line` - `//ly.img.ubq/shapes/star` - `//ly.img.ubq/shapes/polygon` - `//ly.img.ubq/shapes/ellipse` - `//ly.img.ubq/vector_path` ## Translations Some of the translation keys related to Scopes and Placeholder-Settings have been also updated: - Removed the following keys: - `scope.content.replace` - `scope.design.arrange` - `scope.design.style` - Renamed the following keys: - `scope.design.arrange.flip` is now `scope.layer.flip` - `scope.design.arrange.move` is now `scope.layer.move` - `scope.design.arrange.resize` is now `scope.layer.resize` - `scope.design.arrange.rotate` is now `scope.layer.rotate` - Added the following keys: - `component.placeholder.appearance.description` - `component.placeholder.appearance` - `component.placeholder.arrange.description` - `component.placeholder.arrange` - `component.placeholder.disableAll` - `component.placeholder.enableAll` - `component.placeholder.fill.description` - `component.placeholder.fill` - `component.placeholder.general.description` - `component.placeholder.general` - `component.placeholder.shape.description` - `component.placeholder.shape` - `component.placeholder.stroke.description` - `component.placeholder.stroke` - `component.placeholder.text.description` - `component.placeholder.text` - `scope.appearance.adjustments` - `scope.appearance.blur` - `scope.appearance.effect` - `scope.appearance.filter` - `scope.appearance.shadow` - `scope.fill.change` - `scope.layer.blendMode` - `scope.layer.opacity` - `scope.shape.change` - `scope.stroke.change` - `scope.text.character` - `scope.text.edit` ## **Types and API Signatures** To improve the type safety of our APIs, we have moved away from using the `DesignBlockType` enum and replaced with a set of types. Those changes have affected the following APIs: - `CESDK.engine.block.create()` - `CESDK.engine.block.createFill()` - `CESDK.engine.block.createEffect()` - `CESDK.engine.block.createBlur()` - `CESDK.engine.block.findByType()` - `CESDK.engine.block.getType()` > **Note:** **Note**The `create`, `findByType`, and `getType` APIs will no longer accept the IDs of > the deprecated legacy blocks and will throw an error when those are passed ## **Code Examples** This section will show some code examples of the breaking changes and how it would look like after migrating. ```js /** Block Creation */ // Creating an Image before migration const image = cesdk.engine.block.create('image'); cesdk.engine.block.setString( image, 'image/imageFileURI', 'https://domain.com/link-to-image.jpg', ); // Creating an Image after migration const block = cesdk.engine.block.create('graphic'); const rectShape = cesdk.engine.block.createShape('rect'); const imageFill = cesdk.engine.block.createFill('image'); cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-image.jpg', ); cesdk.engine.block.setShape(block, rectShape); cesdk.engine.block.setFill(block, imageFill); cesdk.engine.block.setKind(block, 'image'); // Creating a star shape before migration const star = cesdk.engine.block.create('shapes/star'); cesdk.engine.block.setInt(star, 'shapes/star/points', 8); // Creating a star shape after migration const block = cesdk.engine.block.create('graphic'); const starShape = cesdk.engine.block.createShape('star'); const colorFill = cesdk.engine.block.createFill('color'); cesdk.engine.block.setInt(starShape, 'shape/star/points', 8); cesdk.engine.block.setShape(block, starShape); cesdk.engine.block.setFill(block, colorFill); cesdk.engine.block.setKind(block, 'shape'); // Creating a sticker before migration const sticker = cesdk.engine.block.create('sticker'); cesdk.engine.setString( sticker, 'sticker/imageFileURI', 'https://domain.com/link-to-sticker.png', ); // Creating a sticker after migration const block = cesdk.engine.block.create('graphic'); const rectShape = cesdk.engine.block.createShape('rect'); const imageFill = cesdk.engine.block.createFill('image'); cesdk.engine.block.setString( imageFill, 'fill/image/imageFileURI', 'https://domain.com/link-to-sticker.png', ); cesdk.engine.block.setShape(block, rectShape); cesdk.engine.block.setFill(block, imageFill); cesdk.engine.block.setKind(block, 'sticker'); /** Block Creation */ ``` ```js /** Block Exploration */ // Query all images in the scene before migration const images = cesdk.engine.block.findByType('image'); // Query all images in the scene after migration const images = cesdk.engine.block.findByType('graphic').filter(block => { const fill = cesdk.engine.block.getFill(block); return ( cesdk.engine.block.isValid(fill) && cesdk.engine.block.getType(fill) === '//ly.img.ubq/fill/image' ); }); // Query all stickers in the scene before migration const stickers = cesdk.engine.block.findByType('sticker'); // Query all stickers in the scene after migration const stickers = cesdk.engine.block.findByKind('sticker'); // Query all Polygon shapes in the scene before migration const polygons = cesdk.engine.block.findByType('shapes/polygon'); // Query all Polygon shapes in the scene after migration const polygons = cesdk.engine.block.findByType('graphic').filter(block => { const shape = cesdk.engine.block.getShape(block); return ( cesdk.engine.block.isValid(shape) && cesdk.engine.block.getType(shape) === '//ly.img.ubq/shape/polygon' ); }); /** Block Exploration */ ``` --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.32" description: "Upgrade to CE.SDK v1.32 with guidance on feature changes, removals, and integration adjustments." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-32-1b6ae8/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.32](https://img.ly/docs/cesdk/sveltekit/to-v1-32-1b6ae8/) --- Version v1.32 introduced powerful new APIs for customizing the CE.SDK web editor. These new APIs render some of the existing configurations obsolete, requiring code migration to leverage the more flexible new options. This guide will help you navigate these changes and explain what you need to do to update your integration. ## Configuring the Dock Until version 1.32, the dock was configured by two configuration options (although most users only used one of them and kept the others default): - `config.ui.elements.libraries.insert.entries` and - `config.ui.elements.dock` If your configuration adapted one of these two (mostly `config.ui.elements.libraries.insert.entries`), you are affected by this change. For now, it is only deprecated and we will try to do an internal migration for you, but this still might include a breaking change depending on how you used the configuration options before. ### Breaking Change `config.ui.elements.libraries.insert.entries` was called repeatedly with a context of currently selected blocks. Most users and configurations have not used this behavior and just returned the same static list of entries for every call. In this case, your configuration should work as before, but if you have relied on this fact, you have to migrate your configuration to the new API, listen to selection changes, and update the asset library entries accordingly. ### Migration to new APIs Defining the dock is now done by our new APIs in a consistent way to all other customizable locations of the editor. With the [Dock API](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/), you now have much greater control of how and what is displayed in the dock. This does not only include dock buttons to open asset libraries but also arbitrary buttons and other elements. Please take a look at the [Dock API](https://img.ly/docs/cesdk/sveltekit/user-interface/customization/dock-cb916c/) or learn about the general concept [here](https://img.ly/docs/cesdk/sveltekit/user-interface/overview-41101a/). If you aren't affected by the breaking change mentioned above, the easiest way to migrate is to first copy your current dock order after the editor has been inialized. This can be done by calling the new `cesdk.ui.getDockOrder()` method. Now you can take this order and set it during the initialization of the editor by using `cesdk.ui.setDockOrder(copiedDockOrder)`. The old configuration (`config.ui.elements.libraries.insert.entries` and `config.ui.elements.dock`) can be removed afterwards. Of course, you could also just remove the old configuration and use the new API to define the dock order from scratch. Please note, that changes to the asset library entries are now done by the [Asset Library Entry API](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) and the dock order is just referring to these. So if you, for instance, want to add an asset source id to be shown in a library, you have to add this asset source id to the asset library entry and not to the dock order. ```javascript // Before // ====== const config: Configuration = { ui: { elements: { libraries: { insert: { entries: (defaultEntries) => { return [ // Changing some of the default entries ...defaultEntries.map((entry) => { if (entry.id === 'ly.img.image') { entry.sourceIds.push('my-own-image-source'); } return entry; }), // Adding a new entry { id: 'my-own-entry', sourceIds: ['my-own-source'] } ]; } } } } } }; // After // ====== cesdk.ui.setDockOrder([ ...cesdk.ui.getDockOrder(), // Add a new button referencing your new entry { id: 'ly.img.assetLibrary.dock', label: 'My Own Entry', icon: [...], entries: ['my-own-entry'] } ]); // Adding your custom entry cesdk.ui.addAssetLibraryEntry({ id: 'my-own-entry', sourceIds: ['my-own-source'] }); // Updating an existing default entry cesdk.ui.updateAssetLibraryEntry('ly.img.image', { sourceIds: ({ currentIds }) => [...currentIds, 'my-own-image-source'] }); ``` ## Configuring the Asset Replacement Panel Similar to the definition of the dock, we deprecate the configuration `config.ui.elements.libraries.replace.entries` of the asset library entries for the replacement panel. This method is deprecated but we will try to migrate your configuration internally until it is removed. We recommend you to migrate to the new API as soon as possible. The new API is similar with subtle differences. With `cesdk.ui.setReplaceAssetLibraryEntries` you register a function that is called with the current context (of selected blocks) but only returns ids of entries. ### Breaking Change With the `config.ui.elements.libraries.replace.entries` it was possible to take the default entries and modify them. In theory, you could change the entries and have different "default" entries for insert or replace. Now a change to a default entry provided by the editor via the [Asset Library Entry API](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) will be reflected in both the insert and replace entries. To solve this you can just copy one entry for replacement, modify it, and return its id instead. ### Migration to new APIs Take the function from `config.ui.elements.libraries.replace.entries` and use it in `cesdk.ui.setReplaceAssetLibraryEntries` by replacing the entries with their ids. If you have made changes to the default entries or added new custom ones you need to add or change them via the [Asset Library Entry API](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) on initialization of the editor. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.69+" description: "Learn how to migrate to CE.SDK v1.69+ with Starter Kits, new asset source plugins, and updated naming conventions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-69-193354/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.69](https://img.ly/docs/cesdk/sveltekit/to-v1-69-193354/) --- Version 1.69 introduces Starter Kits, a new asset source plugin system, and consolidated asset naming conventions. This guide walks you through the breaking changes and migration steps. ## TL;DR **Key changes:** - Editor now initializes with a blank canvas by default - `addDefaultAssetSources()` and `addDemoAssetSources()` are deprecated - `createDesignScene()` and `createVideoScene()` are deprecated - Asset source IDs have been renamed and consolidated (v5 naming) - UI configuration options moved from `create()` to runtime APIs - New plugin-based system for loading assets - Unified `scene.create` action for scene creation **Migration time:** ~15-30 minutes for most projects ## What's New in v1.69 ### Starter Kits Starter Kits are complete project templates with editable configuration files. Each kit provides a ready-to-run project with a well-defined architecture: - A `config/` folder containing all editor configuration - Separate files for UI layout, features, settings, and translations - A configuration plugin class that wires everything together - Clean separation between your app code and editor config ### Asset Restructuring Version 1.69 introduces v5 assets and demo-v4 assets with updated naming conventions. This restructuring consolidates asset sources, establishes consistent naming patterns for asset source and asset IDs, and improves the developer experience when working with assets. > **Self-Host Your Assets:** For production deployments, we recommend downloading the assets and hosting them on your own CDN. This ensures faster load times, better reliability, and full control over asset availability. You can download assets from our CDN and serve them from your infrastructure using the `baseURL` option in asset source plugins. See [Serve Assets](https://img.ly/docs/cesdk/sveltekit/serve-assets-b0827c/) for detailed instructions. ## Step-by-Step Migration ### Step 1: Adopt Starter Kit Configuration Extract a Starter Kit config folder into your project: npx degit imgly/starterkit-design-editor-ts-web/src/imgly/config ./src/config git clone https://github.com/imgly/starterkit-design-editor-ts-web.git cp -r starterkit-design-editor-ts-web/src/imgly/config ./src/config rm -rf starterkit-design-editor-ts-web > **Adjust Path:** The default destination is `./src/config`. Adjust the path to match your project structure. #### Which Starter Kit Should I Use? Choose based on your previous editor setup: - **Design Editor** — You used `createDesignScene()` for multi-page designs (social posts, flyers, presentations) - **Video Editor** — You used `createVideoScene()` for video timeline editing - **Advanced Design Editor** — You used `createDesignScene()` with the advanced inspector enabled to author design templates with placeholders for end-users to customize - **Advanced Video Editor** — You used `createVideoScene()` with the advanced inspector enabled to author video templates with placeholders for end-users to customize #### Available Starter Kits | Starter Kit | Repository | Use Case | |-------------|------------|----------| | Design Editor | `imgly/starterkit-design-editor-ts-web` | Multi-page design creation | | Photo Editor | `imgly/starterkit-photo-editor-ts-web` | Single-image editing | | Video Editor | `imgly/starterkit-video-editor-ts-web` | Video timeline editing | | Advanced Design Editor | `imgly/starterkit-advanced-design-editor-ts-web` | Full-featured design editor | | Advanced Video Editor | `imgly/starterkit-advanced-video-editor-ts-web` | Full-featured video editor | | Design Viewer | `imgly/starterkit-design-viewer-ts-web` | Read-only design viewing | | Video Player | `imgly/starterkit-video-player-ts-web` | Read-only video playback | #### Repository Structure The `config/` folder contains all configuration files you can modify: ``` config/ ├── index.ts # Exports configuration class ├── plugin.ts # Main plugin class, orchestrates all setup ├── features.ts # Feature flags (text, stickers, audio, etc.) ├── settings.ts # Engine settings (page size, margins, etc.) ├── i18n.ts # Custom translations and labels ├── actions.ts # Export, save, and share button handlers └── ui/ ├── index.ts # UI setup entry point ├── canvas.ts # Canvas behavior (zoom, pan, selection) ├── components.ts # Custom UI components ├── dock.ts # Left dock panel order and items ├── inspectorBar.ts # Right inspector panel configuration ├── navigationBar.ts # Top navigation bar buttons └── panel.ts # Panel settings and behavior ``` ### Step 2: Use the Configuration Plugin ```ts import CreativeEditorSDK from '@cesdk/cesdk-js'; import { DesignEditorConfig } from './config/plugin'; const cesdk = await CreativeEditorSDK.create('#editor', { license: 'YOUR_CESDK_LICENSE_KEY', baseURL: `https://cdn.img.ly/packages/imgly/cesdk-js/${CreativeEditorSDK.version}/assets` }); // Add plugin first (resets configuration to clean slate) await cesdk.addPlugin(new DesignEditorConfig()); // Apply custom configuration on top // ... // Create the scene await cesdk.actions.run('scene.create'); ``` > **Preserving Legacy Configuration:** If you're still using deprecated configuration options (like `callbacks`, `ui.elements`, `locale`, or `ui.colorLibraries` in the `create()` call), they continue to work. Starter Kits call `reapplyLegacyUserConfiguration()` at the end of their `initialize()` method to preserve your deprecated settings on top of their defaults, so you can adopt them incrementally. Once you've fully migrated to runtime APIs, you can safely remove this call. ### Step 3: Replace Deprecated Asset Loading Methods Replace calls to `addDefaultAssetSources()` and `addDemoAssetSources()` with the new plugin-based approach. #### Replacing `addDefaultAssetSources()` **Before (deprecated):** ```ts await cesdk.addDefaultAssetSources(); ``` **After (v1.69+):** The snippets below show the asset sources that `addDefaultAssetSources()` previously loaded by default. Include only the plugins your application requires: ```ts import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); ``` ```ts import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.video.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.youtube.*' ] })); await cesdk.addPlugin(new CropPresetsAssetSource()); ``` #### Replacing `addDemoAssetSources()` **Before (deprecated):** ```ts await cesdk.addDemoAssetSources(); ``` **After (v1.69+):** The snippets below show the demo assets and upload sources that `addDemoAssetSources()` previously loaded by default. Include only the plugins your application requires: ```ts import { DemoAssetSources, UploadAssetSources } from '@cesdk/cesdk-js/plugins'; await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.image.*', 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*' ] }) ); ``` ```ts import { DemoAssetSources, UploadAssetSources } from '@cesdk/cesdk-js/plugins'; await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.audio.*', 'ly.img.image.*', 'ly.img.templates.video.*', 'ly.img.video.*' ] }) ); ``` #### Asset Source Plugins Reference All plugins are imported from `@cesdk/cesdk-js/plugins`: | Plugin | Asset Source ID | Description | |--------|-----------------|-------------| | `BlurAssetSource` | `ly.img.blur` | Blur effects | | `CaptionPresetsAssetSource` | `ly.img.caption.presets` | Caption text presets (video) | | `ColorPaletteAssetSource` | `ly.img.color.palette` | Color palettes | | `CropPresetsAssetSource` | `ly.img.crop.presets` | Crop aspect ratios | | `EffectsAssetSource` | `ly.img.effect` | Visual effects | | `FiltersAssetSource` | `ly.img.filter` | LUT and duotone filters | | `PagePresetsAssetSource` | `ly.img.page.presets` | Page size presets | | `StickerAssetSource` | `ly.img.sticker` | Stickers and decorations | | `TextAssetSource` | `ly.img.text` | Text presets | | `TextComponentAssetSource` | `ly.img.text.components` | Styled text components | | `TypefaceAssetSource` | `ly.img.typeface` | Fonts and typefaces | | `VectorShapeAssetSource` | `ly.img.vector.shape` | Vector shapes | | `UploadAssetSources` | `ly.img.*.upload` | User upload sources | | `DemoAssetSources` | Various | Demo content for testing | Each plugin accepts an optional configuration object with: - `baseURL`: Custom base URL for loading assets - `include`: GLOB patterns to filter which assets to load - `assetLibraryEntries`: Map asset source IDs to UI library entry IDs #### Demo Asset Sources The `DemoAssetSources` plugin provides sample content for development and testing: | Pattern | Description | |---------|-------------| | `ly.img.templates.*` | All template categories | | `ly.img.templates.blank.*` | Blank templates | | `ly.img.templates.social.*` | Social media templates | | `ly.img.templates.print.*` | Print templates | | `ly.img.templates.presentation.*` | Presentation templates | | `ly.img.templates.video.*` | Video templates | | `ly.img.image.*` | Demo images | | `ly.img.video.*` | Demo videos | | `ly.img.audio.*` | Demo audio | > **Production vs. Development:** Use `DemoAssetSources` for development and testing. For production, replace demo assets with your own content or licensed stock assets. #### Upload Asset Sources The `UploadAssetSources` plugin enables file uploads: | ID | Default MIME Types | |----|-------------------| | `ly.img.image.upload` | `image/jpeg`, `image/png`, `image/webp`, `image/svg+xml`, `image/bmp`, `image/gif` | | `ly.img.video.upload` | `video/mp4`, `video/quicktime`, `video/webm`, `video/matroska`, `image/gif` | | `ly.img.audio.upload` | `audio/mpeg`, `audio/mp3`, `audio/x-m4a`, `audio/wav` | ## Breaking Changes ### Asset Source ID Renames The following asset source IDs have been renamed to align with v5 naming conventions: | Old ID (deprecated) | New ID (v1.69+) | |---------------------|-----------------| | `ly.img.captionPresets` | `ly.img.caption.presets` | | `ly.img.colors.defaultPalette` | `ly.img.color.palette` | | `ly.img.vectorpath` | `ly.img.vector.shape` | | `ly.img.textComponents` | `ly.img.text.components` | ### Merged Asset Sources The following asset sources have been consolidated: | Old IDs (deprecated) | New ID (v1.69+) | Notes | |----------------------|-----------------|-------| | `ly.img.filter.lut` + `ly.img.filter.duotone` | `ly.img.filter` | Single source for all filters | | `ly.img.page.presets` + `ly.img.page.presets.video` | `ly.img.page.presets` | Unified page presets | | `ly.img.template` + `ly.img.video.template` | `ly.img.templates` | Unified template assets | ### Merged Feature API Identifiers The following Feature API identifiers have been consolidated: | Old IDs (deprecated) | New ID (v1.69+) | Notes | |----------------------|-----------------|-------| | `ly.img.filter.lut` + `ly.img.filter.duotone` | `ly.img.filter` | Controls all filter types | ### Translation Key Updates Translation keys have been updated to match the new asset source naming: - Keys containing `captionPresets` → `caption.presets` - Keys containing `colors.defaultPalette` → `color.palette` - Keys containing `vectorpath` → `vector.shape` - Keys containing `textComponents` → `text.components` - Keys containing `filter.lut` or `filter.duotone` → `filter` ### Scene Creation Methods The `createDesignScene()` and `createVideoScene()` methods are deprecated. Use the unified `scene.create` action instead. **Before (deprecated):** ```ts await cesdk.createDesignScene(); ``` **After (v1.69+):** ```ts await cesdk.actions.run('scene.create'); ``` **Before (deprecated):** ```ts await cesdk.createVideoScene(); ``` **After (v1.69+):** ```ts await cesdk.actions.run('scene.create', { mode: 'Video' }); ``` The new action provides a single entry point for scene creation with flexible configuration: ```ts // Create a scene with specific page dimensions await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); // Create a scene from a page preset asset await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); // Create multiple pages at once await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1080, unit: 'Pixel' }, pageCount: 3 }); ``` > **Default Page Format Migration:** If you previously set `meta: { default: 'true' }` on a page preset asset to auto-select it when creating scenes, this is no longer applied automatically. Pass the desired page format explicitly via the `page` parameter. ```ts await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); ``` ## Migration Checklist Use this checklist to ensure a complete migration: - Adopt a Starter Kit configuration for your editor type - Replace `addDefaultAssetSources()` and `addDemoAssetSources()` calls with individual asset source plugins - Update any hardcoded asset source IDs to use the new v5 naming conventions (see Breaking Changes) - Test asset loading and UI configuration ## Want a Complete, Ready-to-Run App? Extracting the configuration folder is ideal for existing projects where you need full control over editor setup. If you're starting fresh and want a complete application scaffold with build tooling, asset management, and framework integration already configured, explore our [Starter Kits](https://img.ly/docs/cesdk/sveltekit/starterkits-kxg120/) instead. Starter Kits provide complete applications with everything wired together—clone, install, and start building. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "To v1.72" description: "Learn how to migrate to CE.SDK v1.72, which deprecates scene mode in favor of a single scene type with all capabilities." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/to-v1-72-b37fa1/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) > [To v1.72](https://img.ly/docs/cesdk/sveltekit/to-v1-72-b37fa1/) --- Version 1.72 deprecates scene mode. Previously, scenes were either `'Design'` or `'Video'`, and the mode restricted which engine features were available. Starting with this version, there is a single scene type that supports all features. Mode is legacy metadata that no longer affects engine behavior. This guide covers how to migrate to the new model and, if you cannot migrate yet, how to keep using legacy mode. > **Caution:** **Cross-platform users:** Mobile SDKs (iOS, Android) do not yet support scenes without a mode. If your application creates scenes on Web and loads them on mobile, you **must** set an explicit mode. See [How to Keep Using Legacy Mode](#how-to-keep-using-legacy-mode) below. ## What Changed - **Scene mode is deprecated.** The following APIs still work but will be removed in a future version: `engine.scene.getMode()`, `engine.scene.setMode()`, `engine.scene.createVideo()`, `cesdk.createDesignScene()`, `cesdk.createVideoScene()`, and the `mode` option on the `scene.create` action. - **New scenes have no mode.** Both the `scene.create` action and `engine.scene.create()` now create scenes without a mode. `engine.scene.getMode()` returns `null` instead of `'Design'`. - **The engine no longer restricts features by mode.** Methods that previously threw errors on Design-mode scenes (e.g., `addVideo()`, `getBackgroundTrack()`) now work on every scene. - **Reading `scene/mode` via the property system errors on mode-less scenes.** Code that reads `scene/mode` through `engine.block.getEnum(scene, 'scene/mode')` will throw on scenes without a mode. Either remove mode checks entirely (see [Remove Scene Mode Checks](#remove-scene-mode-checks)) or set a mode explicitly (see [How to Keep Using Legacy Mode](#how-to-keep-using-legacy-mode)). - **Browser support checks are no longer automatic.** Config plugins that need video decode/encode checks must call `editor.checkBrowserSupport` explicitly. ## How to Migrate Migrating means embracing the single scene type. You no longer need to think about mode at all. ### Simplify Scene Creation The `scene.create` action no longer requires a `mode` option. Previously, video editors passed `{ mode: 'Video' }` to get video capabilities. Now every scene has all capabilities by default. **Before:** ```typescript // Editor instance methods await cesdk.createDesignScene(); await cesdk.createVideoScene(); // Editor action with mode await cesdk.actions.run('scene.create', { mode: 'Video' }); // Engine API const scene = engine.scene.createVideo(); ``` **After:** ```typescript // Editor action, no mode needed await cesdk.actions.run('scene.create'); // Engine API const scene = engine.scene.create(); ``` All of the following are deprecated: - `cesdk.createDesignScene()` and `cesdk.createVideoScene()`: use the `scene.create` action instead. - `engine.scene.createVideo()`: use `engine.scene.create()` instead. - The `mode` option on the `scene.create` action: omit it entirely. - `engine.scene.setMode()`: only needed if you must maintain legacy mode (see below). - `engine.scene.getMode()`: mode no longer determines available features. ### Remove Scene Mode Checks Since mode no longer affects behavior, any code that branches on `getMode()` to decide which features to enable can be removed. All features are always available. **Before:** ```typescript const mode = engine.scene.getMode(); if (mode === 'Video') { // enable video features } ``` **After:** ```typescript // No check needed. Video features are always available. ``` ### Update Browser Support Checks in Your Config Browser capability checks (video decode/encode support) no longer run automatically based on scene mode. They are now triggered explicitly via the `editor.checkBrowserSupport` action. **If you use a starter kit config** (e.g., video editor, advanced video editor): update to the latest version of the config. The v1.72 configs already include the `editor.checkBrowserSupport` call with the appropriate defaults. No changes needed on your end. **If you have a custom config plugin**, add the `editor.checkBrowserSupport` call to your plugin's `initialize()` method: ```typescript async initialize({ cesdk }: EditorPluginContext) { await cesdk.actions.run('editor.checkBrowserSupport', { videoDecode: 'block', videoEncode: 'warn' }); } ``` The action accepts an optional parameters object: | Parameter | Values | Description | |-----------|--------|-------------| | `videoDecode` | `'block'` | `'warn'` | `'ignore'` | How to handle missing video decode support. `'block'` shows an unclosable error dialog. `'warn'` shows a dismissible warning. `'ignore'` skips the check. | | `videoEncode` | `'block'` | `'warn'` | `'ignore'` | How to handle missing video encode support. Same options as above. | When called without parameters, the action falls back to scene mode-based defaults for backward compatibility: - **Video mode scenes:** `videoDecode: 'block'`, `videoEncode: 'warn'` - **No-mode scenes (null):** all checks ignored - **Design mode scenes:** no checks run ### Update TypeScript Types The return type of `engine.scene.getMode()` changed from `SceneMode` to `SceneMode | null`. If you still reference this API, update your type annotations. ```typescript // Before const mode: SceneMode = engine.scene.getMode(); // After const mode: SceneMode | null = engine.scene.getMode(); ``` ## How to Keep Using Legacy Mode If you cannot fully migrate yet, you can continue using scene mode. The deprecated APIs still work and will remain functional until removed in a future version. The key change is that scene creation no longer sets a mode automatically. To preserve the old behavior, you need to both set the mode explicitly **and** enable the `useLegacySceneModeChecks` feature flag. ### Enable the Feature Flag By default, the editor UI treats all scenes as unified and ignores mode when deciding which features to show. To restore the old behavior where the UI gates features based on scene mode (e.g., hiding video export in Design mode or hiding page resize in Video mode), set `useLegacySceneModeChecks` to `true` in your configuration: ```typescript CreativeEditorSDK.create(container, { featureFlags: { useLegacySceneModeChecks: true } }); ``` Without this flag, calling `setMode()` still stores the mode on the scene, but the editor UI will not restrict any features based on it. ### Cross-Platform Compatibility (Web + Mobile) > **Caution:** Mobile SDKs (iOS, Android) do not yet support scenes without a mode. If you create scenes on Web and load them on mobile without an explicit mode, mobile SDKs will not be able to handle the scene correctly. Set the mode explicitly when creating scenes that will be shared with mobile: ```typescript // Using the scene.create action await cesdk.actions.run('scene.create', { mode: 'Video' }); // or 'Design' // Using the engine API const scene = engine.scene.create(); engine.scene.setMode('Design'); // or 'Video' ``` ### Keeping Legacy Behavior on Web If your Web integration relies on the editor UI gating features by mode, enable the `useLegacySceneModeChecks` feature flag (see above) and call `setMode()` after `create()`. The engine itself no longer restricts features by mode, but the editor UI will respect mode when the flag is enabled. Your own code can also still read and branch on `getMode()`. ## Scene File Compatibility ### Loading Old Scenes in v1.72+ Scenes saved with older SDK versions contain an explicit mode (`'Design'` or `'Video'`). When loaded in v1.72+, the mode is **preserved**. `engine.scene.getMode()` returns the original mode. All features work regardless of the loaded mode. ### Loading New Scenes in Older SDKs Older SDK versions (pre-v1.72) cannot load mode-less scenes. If you need to support older SDK versions, set an explicit mode with `engine.scene.setMode()` before saving. See [How to Keep Using Legacy Mode](#how-to-keep-using-legacy-mode). ### Cross-Platform Compatibility Mobile SDKs (iOS, Android) do not yet support scenes without a mode. If you share scenes between Web and mobile, always set an explicit mode before saving. See [How to Keep Using Legacy Mode](#how-to-keep-using-legacy-mode). ## Summary | Change | Impact | Migration | Legacy workaround | |--------|--------|-----------|-------------------| | Scene mode deprecated | Mode no longer affects engine behavior | Remove mode checks | Enable `useLegacySceneModeChecks` flag, call `setMode()` or pass `mode` to action | | New scenes have no mode | `getMode()` returns `null` | No action needed | Pass `mode` to `scene.create` action | | `createVideo()` and `mode` option deprecated | Still work | Use `create()` without `mode` | Keep using them | | All features work on every scene | Methods that threw in Design mode no longer throw | No action needed | No action needed | | Browser support checks need explicit params | No longer automatic | Update starter kit config, or add `editor.checkBrowserSupport` in custom plugins | Call without params for mode-based defaults | | Cross-platform scenes | Mobile doesn't support mode-less scenes yet | N/A | Always `setMode()` before saving | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Upgrade" description: "Learn how to upgrade CE.SDK and apply required changes when migrating between major SDK versions." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Upgrading](https://img.ly/docs/cesdk/sveltekit/upgrade-4f8715/) --- --- ## Related Pages - [To v1.10](https://img.ly/docs/cesdk/sveltekit/to-v1-10-1ff469/) - Review breaking changes and migration steps required to upgrade your project to CE.SDK v1.10. - [To v1.13](https://img.ly/docs/cesdk/sveltekit/to-v1-13-d1ac5d/) - Follow version-specific upgrade instructions to migrate from earlier versions to CE.SDK v1.13. - [To v1.19](https://img.ly/docs/cesdk/sveltekit/to-v1-19-55bcad/) - Learn what changed in v1.19 and how to update your implementation to stay compatible. - [To v1.32](https://img.ly/docs/cesdk/sveltekit/to-v1-32-1b6ae8/) - Upgrade to CE.SDK v1.32 with guidance on feature changes, removals, and integration adjustments. - [To v1.69+](https://img.ly/docs/cesdk/sveltekit/to-v1-69-193354/) - Learn how to migrate to CE.SDK v1.69+ with Starter Kits, new asset source plugins, and updated naming conventions. - [To v1.72](https://img.ly/docs/cesdk/sveltekit/to-v1-72-b37fa1/) - Learn how to migrate to CE.SDK v1.72, which deprecates scene mode in favor of a single scene type with all capabilities. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Apply a Template" description: "Learn how to apply template scenes via API in the CreativeEditor SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/apply-template-35c73e/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Apply a Template](https://img.ly/docs/cesdk/sveltekit/use-templates/apply-template-35c73e/) --- Apply template content to an existing scene while preserving your canvas dimensions and design unit. > **Reading time:** 5 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-apply-template-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-apply-template-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-apply-template-browser/)  Unlike loading a scene which replaces everything, applying a template merges template content into your current scene. CE.SDK preserves the current page dimensions and design unit while automatically adjusting template content to fit. This approach is ideal for template switching workflows where users explore different layouts without changing canvas dimensions, or for automation pipelines that standardize output sizes across varying template sources. ```typescript file=@cesdk_web_examples/guides-use-templates-apply-template-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Apply a Template * * This example demonstrates how to apply template content to an existing scene: * 1. Creating a scene with specific dimensions * 2. Applying a template from a URL while preserving dimensions * 3. Switching between templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; if (!page) { throw new Error('No page found'); } // Set custom page dimensions - these will be preserved when applying templates // Apply a template from URL - content adjusts to fit current page dimensions const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.applyTemplateFromURL(templateUrl); // Auto-fit zoom to page await cesdk.actions.run('zoom.toPage', { autoFit: true }); console.log('Template applied from URL'); // Verify that page dimensions are preserved after applying template const width = engine.block.getWidth(page); const height = engine.block.getHeight(page); console.log(`Page dimensions preserved: ${width}x${height}`); // Demonstrate template switching - apply a different template // The page dimensions remain the same while content changes const alternativeTemplateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_2.scene'; // Uncomment to switch templates: // await engine.scene.applyTemplateFromURL(alternativeTemplateUrl); // console.log('Switched to alternative template'); // Store for potential use console.log('Alternative template URL:', alternativeTemplateUrl); console.log('Apply template example completed'); } } export default Example; ``` This guide covers how to apply templates from URLs and strings while preserving page dimensions, and how to implement template switching functionality. ## When to Use Apply vs Load Use `applyTemplateFromURL()` or `applyTemplateFromString()` when you want to: - **Switch templates**: Let users preview different templates while keeping a consistent canvas size - **Standardize output dimensions**: Generate content with fixed sizes (e.g., social media formats, print sizes) - **Batch process with templates**: Apply various templates to a pre-configured scene without dimension drift Use `loadFromString()` or `loadFromURL()` when you need the template's original dimensions. **Key distinction**: Loading replaces everything; applying preserves dimensions and merges content. ## Apply a Template from URL We first create a scene with specific dimensions. These dimensions will be preserved when we apply the template. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 1080, height: 1920, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; if (!page) { throw new Error('No page found'); } // Set custom page dimensions - these will be preserved when applying templates ``` To apply a template from a URL, call `engine.scene.applyTemplateFromURL()` with the template URL. The template content adjusts automatically to fit the current page dimensions. ```typescript highlight=highlight-apply-from-url // Apply a template from URL - content adjusts to fit current page dimensions const templateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'; await engine.scene.applyTemplateFromURL(templateUrl); // Auto-fit zoom to page await cesdk.actions.run('zoom.toPage', { autoFit: true }); console.log('Template applied from URL'); ``` ## Verify Preserved Dimensions After applying the template, the page dimensions remain unchanged. You can verify this by checking the width and height of the page. ```typescript highlight=highlight-verify-dimensions // Verify that page dimensions are preserved after applying template const width = engine.block.getWidth(page); const height = engine.block.getHeight(page); console.log(`Page dimensions preserved: ${width}x${height}`); ``` ## Template Switching You can apply multiple templates to the same scene. Each application replaces the content while preserving the page setup. This enables "preview" functionality where users explore different templates without affecting their canvas dimensions. ```typescript highlight=highlight-template-switching // Demonstrate template switching - apply a different template // The page dimensions remain the same while content changes const alternativeTemplateUrl = 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_2.scene'; // Uncomment to switch templates: // await engine.scene.applyTemplateFromURL(alternativeTemplateUrl); // console.log('Switched to alternative template'); // Store for potential use console.log('Alternative template URL:', alternativeTemplateUrl); ``` ## Apply a Template from String For templates stored in databases or received from APIs, use `engine.scene.applyTemplateFromString()` with a base64-encoded scene string: ```typescript // Scene string typically retrieved from storage or API const templateString = 'UBQ1ewoiZm9ybWF0Ij...'; // Apply template content to current scene await engine.scene.applyTemplateFromString(templateString); ``` ## Troubleshooting ### No Scene Loaded `applyTemplateFromString()` and `applyTemplateFromURL()` require an existing scene. Create one first with `cesdk.actions.run('scene.create')` or `engine.scene.create()`. ### Template URL Not Accessible Verify CORS configuration allows fetching from the template URL. Check network connectivity and URL validity. ### Content Not Scaling as Expected Template content scales to fit the current page dimensions. Verify page dimensions are set before applying the template. ## Related Guides - [Use Templates Programmatically](https://img.ly/docs/cesdk/sveltekit/use-templates/programmatic-9349f3/) — Comprehensive programmatic template workflows - [Templates Overview](https://img.ly/docs/cesdk/sveltekit/use-templates/overview-ae74e1/) — Understanding templates in CE.SDK - [Headless Mode](https://img.ly/docs/cesdk/sveltekit/concepts/headless-mode/browser-24ab98/) — Server-side template processing --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Generate From Template" description: "Learn how to generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/generate-334e15/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Generate From Template](https://img.ly/docs/cesdk/sveltekit/use-templates/generate-334e15/) --- Generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos programmatically.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-generate-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-generate-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-generate-browser/) Template generation transforms templates into finished designs by populating data and exporting to output formats. Load templates with `engine.scene.loadFromURL()`, set variables with `engine.variable.setString()`, and export with `engine.block.export()`. This enables batch processing, personalization systems, and automated design production. ```typescript file=@cesdk_web_examples/guides-use-templates-generate-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Generate From Template Guide * * Demonstrates how to generate finished designs from templates: * - Loading templates from URLs * - Populating template variables * - Finding and updating placeholder content * - Exporting to images and creating downloadable files * - Batch generation workflows */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Load a template from URL - this template has visible {{variable}} placeholders await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_2.scene' ); console.log( 'Template loaded - variable placeholders like {{first_name}}, {{city}} are now visible on the canvas' ); // Discover available variables in the template const allVariables = engine.variable.findAll(); console.log('Available variables:', allVariables); // Wait 3 seconds so users can see the variable placeholders before population await new Promise((resolve) => setTimeout(resolve, 3000)); // Set variable values to replace {{variableName}} placeholders engine.variable.setString('first_name', 'Alice'); engine.variable.setString('last_name', 'Smith'); engine.variable.setString('city', 'Paris'); engine.variable.setString('address', '10 Rue de Rivoli'); console.log('Variables populated - placeholders replaced with values'); // Find all placeholder blocks in the template const placeholders = engine.block.findAllPlaceholders(); console.log('Found placeholders:', placeholders.length); // Find specific blocks by name const namedBlocks = engine.block.findByName('Image'); if (namedBlocks.length > 0) { console.log('Found image block by name:', namedBlocks[0]); } // Update image placeholder content const imageBlocks = engine.block.findByName('Image'); if (imageBlocks.length > 0) { const imageBlock = imageBlocks[0]; const fill = engine.block.getFill(imageBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); console.log('Image placeholder updated'); } // Export the populated template to PNG const pages = engine.block.findByType('page'); if (pages.length > 0) { const page = pages[0]; const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); console.log('Exported to PNG:', blob.size, 'bytes'); // Create downloadable file const url = URL.createObjectURL(blob); console.log('Download URL created:', url); // In a real application, you would trigger a download: // const link = document.createElement('a'); // link.href = url; // link.download = 'greeting-card.png'; // link.click(); // URL.revokeObjectURL(url); } // Export to PDF format const scene = engine.scene.get(); if (scene !== null) { const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); console.log('Exported to PDF:', pdfBlob.size, 'bytes'); } // Demonstrate batch generation workflow // Save template for reuse const templateString = await engine.scene.saveToString(); console.log('Template saved for batch processing'); // Process multiple data records const dataRecords = [ { firstName: 'Alice', lastName: 'Smith', city: 'Paris', address: '10 Rue de Rivoli' }, { firstName: 'Bob', lastName: 'Johnson', city: 'London', address: '221B Baker Street' }, { firstName: 'Carol', lastName: 'Williams', city: 'Tokyo', address: '1-1 Shibuya' } ]; for (const record of dataRecords) { // Reload template for each record await engine.scene.loadFromString(templateString); // Populate with record data engine.variable.setString('first_name', record.firstName); engine.variable.setString('last_name', record.lastName); engine.variable.setString('city', record.city); engine.variable.setString('address', record.address); console.log( `Processed record for: ${record.firstName} ${record.lastName}` ); // In a real workflow, you would export here: // const blob = await engine.block.export(page, { mimeType: 'image/png' }); } console.log(`Batch processed ${dataRecords.length} records`); // Reload the original template for display await engine.scene.loadFromString(templateString); engine.variable.setString('first_name', 'Alice'); engine.variable.setString('last_name', 'Smith'); engine.variable.setString('city', 'Paris'); engine.variable.setString('address', '10 Rue de Rivoli'); console.log( 'Generate from template guide initialized. The template demonstrates loading, variable population, and export workflows.' ); } } export default Example; ``` This guide covers how to load templates, populate variables, update placeholder content, and export to various formats including batch generation workflows. ## Loading Templates Load templates from various sources before populating and exporting. Use `engine.scene.loadFromURL()` for remote templates, `engine.scene.loadFromString()` for serialized data, or `engine.scene.loadFromArchiveURL()` for templates with embedded assets. ```typescript highlight=highlight-load-template // Load a template from URL - this template has visible {{variable}} placeholders await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_2.scene' ); console.log( 'Template loaded - variable placeholders like {{first_name}}, {{city}} are now visible on the canvas' ); ``` ## Populating Variables CE.SDK's variable system allows you to set values that replace `{{variableName}}` placeholders throughout the template. Before setting variables, you can discover what variables are available using `engine.variable.findAll()`. ### Discover Available Variables Find all variables defined in a template to understand what data can be populated. ```typescript highlight=highlight-discover-variables // Discover available variables in the template const allVariables = engine.variable.findAll(); console.log('Available variables:', allVariables); ``` ### Set Variable Values Use `engine.variable.setString()` to assign values that automatically replace placeholders in text blocks. ```typescript highlight=highlight-populate-variables // Set variable values to replace {{variableName}} placeholders engine.variable.setString('first_name', 'Alice'); engine.variable.setString('last_name', 'Smith'); engine.variable.setString('city', 'Paris'); engine.variable.setString('address', '10 Rue de Rivoli'); console.log('Variables populated - placeholders replaced with values'); ``` ## Updating Placeholder Content Beyond variables, templates often contain placeholder blocks for images and other content. Find these blocks using `engine.block.findByName()` or `engine.block.findAllPlaceholders()`. ```typescript highlight=highlight-find-placeholders // Find all placeholder blocks in the template const placeholders = engine.block.findAllPlaceholders(); console.log('Found placeholders:', placeholders.length); // Find specific blocks by name const namedBlocks = engine.block.findByName('Image'); if (namedBlocks.length > 0) { console.log('Found image block by name:', namedBlocks[0]); } ``` ### Update Image Placeholders Locate image blocks and modify their fill URI using `engine.block.getFill()` and `engine.block.setString()` on the `'fill/image/imageFileURI'` property. ```typescript highlight=highlight-update-image // Update image placeholder content const imageBlocks = engine.block.findByName('Image'); if (imageBlocks.length > 0) { const imageBlock = imageBlocks[0]; const fill = engine.block.getFill(imageBlock); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_4.jpg' ); console.log('Image placeholder updated'); } ``` ## Exporting to Images Generate image outputs using `engine.block.export()` with options for format, resolution, and quality. Find the page to export with `engine.block.findByType('page')`. ```typescript highlight=highlight-export-image // Export the populated template to PNG const pages = engine.block.findByType('page'); if (pages.length > 0) { const page = pages[0]; const blob = await engine.block.export(page, { mimeType: 'image/png', targetWidth: 1920, targetHeight: 1080 }); console.log('Exported to PNG:', blob.size, 'bytes'); // Create downloadable file const url = URL.createObjectURL(blob); console.log('Download URL created:', url); // In a real application, you would trigger a download: // const link = document.createElement('a'); // link.href = url; // link.download = 'greeting-card.png'; // link.click(); // URL.revokeObjectURL(url); } ``` You can configure export options including `targetWidth` and `targetHeight` for output resolution, `pngCompressionLevel` for PNG files (0-9), and `jpegQuality` for JPEG files (0-1). ## Exporting to PDF Use `mimeType: 'application/pdf'` to generate PDF documents from design scenes. For multi-page documents, export the scene block rather than individual pages. ```typescript highlight=highlight-export-pdf // Export to PDF format const scene = engine.scene.get(); if (scene !== null) { const pdfBlob = await engine.block.export(scene, { mimeType: 'application/pdf' }); console.log('Exported to PDF:', pdfBlob.size, 'bytes'); } ``` ## Batch Generation Workflows Process multiple data records through a single template. Save the template once with `engine.scene.saveToString()`, then loop through records—reloading the template with `engine.scene.loadFromString()`, populating variables, and exporting for each iteration. ```typescript highlight=highlight-batch-generation // Demonstrate batch generation workflow // Save template for reuse const templateString = await engine.scene.saveToString(); console.log('Template saved for batch processing'); // Process multiple data records const dataRecords = [ { firstName: 'Alice', lastName: 'Smith', city: 'Paris', address: '10 Rue de Rivoli' }, { firstName: 'Bob', lastName: 'Johnson', city: 'London', address: '221B Baker Street' }, { firstName: 'Carol', lastName: 'Williams', city: 'Tokyo', address: '1-1 Shibuya' } ]; for (const record of dataRecords) { // Reload template for each record await engine.scene.loadFromString(templateString); // Populate with record data engine.variable.setString('first_name', record.firstName); engine.variable.setString('last_name', record.lastName); engine.variable.setString('city', record.city); engine.variable.setString('address', record.address); console.log( `Processed record for: ${record.firstName} ${record.lastName}` ); // In a real workflow, you would export here: // const blob = await engine.block.export(page, { mimeType: 'image/png' }); } console.log(`Batch processed ${dataRecords.length} records`); ``` ## Troubleshooting ### Template Loading Fails Verify URL accessibility and scene format version compatibility. Wrap loading calls in try-catch blocks to handle network or parsing errors. Ensure the URL returns valid scene data and not HTML or other content. ### Variables Not Updating Ensure variable names in text blocks (within `{{}}`) exactly match keys passed to `engine.variable.setString()`. Variable names are case-sensitive. Use `engine.variable.findAll()` to discover available variable names. ### Export Returns Empty or Corrupted Output Confirm all required assets are accessible before exporting. Check that blocks are attached to the page hierarchy—orphaned blocks won't appear in exports. Verify the page has visible content by checking block visibility states. ### Image Placeholders Not Found Verify the exact name string matches what's set in the template. Names are case-sensitive. Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in the scene. ## API Reference | Method | Description | |--------|-------------| | `scene.loadFromURL(url)` | Load template from remote URL | | `scene.loadFromString(data)` | Load template from serialized string | | `scene.loadFromArchiveURL(url)` | Load archived template with embedded assets | | `scene.saveToString()` | Serialize scene for batch processing | | `variable.setString(name, value)` | Set text variable value | | `variable.getString(name)` | Retrieve current variable value | | `variable.findAll()` | List all variable names in scene | | `block.findByName(name)` | Find blocks by name identifier | | `block.findByType(type)` | Find blocks by type (e.g., 'page') | | `block.findAllPlaceholders()` | Discover all placeholder blocks | | `block.getFill(block)` | Get fill block from graphic block | | `block.setString(block, property, value)` | Set string properties like image URIs | | `block.export(block, options)` | Export block to image or PDF blob | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Template Library" description: "Learn how to provide a set of predefined templates in the CreativeEditor SDK." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/library-b3c704/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Template Library](https://img.ly/docs/cesdk/sveltekit/use-templates/library-b3c704/) --- Configure and populate the Template Library in CE.SDK so users can browse and select predefined design templates.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-library-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-library-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-library-browser/) Templates in CE.SDK are pre-designed scenes stored as assets within asset sources. They contain complete scene definitions that users can load and customize. The Template Library provides a centralized way to organize, browse, and access these templates through both the built-in UI and programmatic APIs. ```typescript file=@cesdk_web_examples/guides-use-templates-library-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Template Library * * This example demonstrates how to configure and populate the Template Library: * 1. Creating custom template sources from JSON * 2. Handling template application with addLocalSource callback * 3. Querying and browsing templates programmatically * 4. Managing template sources */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } const engine = cesdk.engine; // Create a design scene to work with await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Create a custom template source with an apply callback // The callback handles what happens when a user clicks a template engine.asset.addLocalSource('my.custom.templates', undefined, async (asset) => { const sceneUri = asset.meta?.uri; const scene = engine.scene.get(); if (!sceneUri || scene == null) return undefined; const sceneUrl = new URL(sceneUri, window.location.href); await engine.scene.applyTemplateFromURL(sceneUrl.href); return scene; }); // Add template assets to the source // Each asset needs meta.uri pointing to a .scene file engine.asset.addAssetToSource('my.custom.templates', { id: 'postcard-1', label: { en: 'Postcard Design' }, tags: { en: ['postcard', 'card'] }, groups: ['cards'], meta: { thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg', uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene' } }); engine.asset.addAssetToSource('my.custom.templates', { id: 'postcard-2', label: { en: 'Business Card' }, tags: { en: ['business', 'card'] }, groups: ['business'], meta: { thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_2.jpg', uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.scene' } }); // Create an asset library entry for the custom templates cesdk.ui.addAssetLibraryEntry({ id: 'custom-templates-entry', sourceIds: ['my.custom.templates'], title: 'Custom Templates', icon: '@imgly/Template', gridColumns: 2, gridItemHeight: 'square' }); // Configure the dock to show ONLY the custom template library cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ { id: 'ly.img.assetLibrary.dock', key: 'custom-templates', icon: '@imgly/Template', label: 'Custom Templates', entries: ['custom-templates-entry'] } ]); // Open the custom templates panel on startup (same as clicking dock button) cesdk.ui.openPanel('//ly.img.panel/assetLibrary', { payload: { entries: ['custom-templates-entry'] } }); // Query templates with filtering options const queryResult = await engine.asset.findAssets('my.custom.templates', { page: 0, perPage: 20, groups: ['cards'] }); console.log( 'Templates in "cards" group:', queryResult.assets.map((t) => t.id) ); // Query all templates from custom source const allCustomTemplates = await engine.asset.findAssets( 'my.custom.templates', { page: 0, perPage: 100 } ); console.log('Total custom templates:', allCustomTemplates.total); // List all registered asset sources const allSources = engine.asset.findAllSources(); const templateSources = allSources.filter( (id) => id.includes('template') || id === 'my.custom.templates' ); console.log('Template sources:', templateSources); // Get available groups from a source const groups = await engine.asset.getGroups('my.custom.templates'); console.log('Available groups:', groups); // Subscribe to source changes const unsubscribeAdd = engine.asset.onAssetSourceAdded((sourceId) => { console.log('Asset source added:', sourceId); }); const unsubscribeRemove = engine.asset.onAssetSourceRemoved((sourceId) => { console.log('Asset source removed:', sourceId); }); // Clean up subscriptions when done (for demonstration) setTimeout(() => { unsubscribeAdd(); unsubscribeRemove(); }, 10000); console.log('Template Library example loaded successfully!'); } } export default Example; ``` This guide covers how to create custom template sources, handle template application, query templates programmatically, and manage template sources. ## Setup Before creating custom template sources, load the default asset sources to ensure fonts and other base assets are available. Then create a design scene to work with. ```typescript highlight=highlight-setup // Create a design scene to work with await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); ``` ## Using the Built-in Template UI The CE.SDK editor UI includes a template panel where users can browse and select templates. The panel displays thumbnails organized by groups, allowing users to filter templates by category. To access templates in the UI: 1. Open the asset library panel 2. Navigate to the Templates section 3. Browse templates with thumbnail previews 4. Click a template to apply it to the current design The template panel automatically displays templates from all registered template sources. ## Creating Custom Template Sources You can create custom template sources to provide your own branded templates. We use `engine.asset.addLocalSource()` to create a source with an apply callback, then `engine.asset.addAssetToSource()` to add template assets. ```typescript highlight=highlight-custom-source // Create a custom template source with an apply callback // The callback handles what happens when a user clicks a template engine.asset.addLocalSource('my.custom.templates', undefined, async (asset) => { const sceneUri = asset.meta?.uri; const scene = engine.scene.get(); if (!sceneUri || scene == null) return undefined; const sceneUrl = new URL(sceneUri, window.location.href); await engine.scene.applyTemplateFromURL(sceneUrl.href); return scene; }); // Add template assets to the source // Each asset needs meta.uri pointing to a .scene file engine.asset.addAssetToSource('my.custom.templates', { id: 'postcard-1', label: { en: 'Postcard Design' }, tags: { en: ['postcard', 'card'] }, groups: ['cards'], meta: { thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg', uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene' } }); engine.asset.addAssetToSource('my.custom.templates', { id: 'postcard-2', label: { en: 'Business Card' }, tags: { en: ['business', 'card'] }, groups: ['business'], meta: { thumbUri: 'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_2.jpg', uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.scene' } }); ``` The `addLocalSource()` method creates the source and registers a callback that handles template application when users click a template. The callback: 1. Extracts the scene URI from `asset.meta.uri` 2. Resolves the URI to an absolute URL 3. Applies the template using `engine.scene.applyTemplateFromURL()` 4. Returns the scene ID to indicate successful application Each template asset added with `addAssetToSource()` can include: - `id` - Unique identifier for the template - `label` - Localized display name (e.g., `{ en: 'Business Card' }`) - `tags` - Searchable keywords for filtering - `groups` - Categories for organization - `meta.uri` - URL to the `.scene` file (required for template application) - `meta.thumbUri` - Thumbnail image URL ### From Remote URI For production use, you can load templates from a hosted JSON file using `engine.asset.addLocalAssetSourceFromJSONURI()`. The parent directory of the JSON URI becomes the base path for resolving relative URLs within the JSON. ```typescript const sourceId = await engine.asset.addLocalAssetSourceFromJSONURI( 'https://cdn.example.com/templates/content.json' ); ``` ## Querying Templates Programmatically We use `engine.asset.findAssets()` to search and retrieve templates from a source. You can query by groups, tags, or search text to find specific templates. ```typescript highlight=highlight-query-templates // Query templates with filtering options const queryResult = await engine.asset.findAssets('my.custom.templates', { page: 0, perPage: 20, groups: ['cards'] }); console.log( 'Templates in "cards" group:', queryResult.assets.map((t) => t.id) ); // Query all templates from custom source const allCustomTemplates = await engine.asset.findAssets( 'my.custom.templates', { page: 0, perPage: 100 } ); console.log('Total custom templates:', allCustomTemplates.total); ``` The query options include: - `page` and `perPage` - Pagination controls - `groups` - Filter by group names (e.g., `['business', 'cards']`) - `tags` - Filter by tags - `query` - Text search across labels and tags The result object contains: - `assets` - Array of template assets matching the query - `total` - Total number of matching templates - `currentPage` - Current page index - `nextPage` - Next page index (if available) ## Managing Template Sources CE.SDK provides APIs to manage the lifecycle of template sources, including listing, monitoring, and removing sources. ```typescript highlight=highlight-manage-sources // List all registered asset sources const allSources = engine.asset.findAllSources(); const templateSources = allSources.filter( (id) => id.includes('template') || id === 'my.custom.templates' ); console.log('Template sources:', templateSources); // Get available groups from a source const groups = await engine.asset.getGroups('my.custom.templates'); console.log('Available groups:', groups); // Subscribe to source changes const unsubscribeAdd = engine.asset.onAssetSourceAdded((sourceId) => { console.log('Asset source added:', sourceId); }); const unsubscribeRemove = engine.asset.onAssetSourceRemoved((sourceId) => { console.log('Asset source removed:', sourceId); }); // Clean up subscriptions when done (for demonstration) setTimeout(() => { unsubscribeAdd(); unsubscribeRemove(); }, 10000); ``` Key management methods: - `engine.asset.findAllSources()` - Lists all registered asset source IDs - `engine.asset.getGroups(sourceId)` - Gets available groups from a source - `engine.asset.removeSource(sourceId)` - Removes an asset source - `engine.asset.onAssetSourceAdded(callback)` - Subscribe to source additions - `engine.asset.onAssetSourceRemoved(callback)` - Subscribe to source removals ## Troubleshooting Common issues when working with the Template Library: - **Templates not appearing in UI**: Verify the source is registered by checking `engine.asset.findAllSources()`. Ensure the source ID matches what you expect. - **Thumbnails not loading**: Check that `thumbUri` values are accessible URLs with proper CORS headers enabled. - **Scene files not loading**: Ensure `meta.uri` values point to valid `.scene` files that are accessible from the browser. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Overview" description: "Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/overview-ae74e1/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Use Templates Overview](https://img.ly/docs/cesdk/sveltekit/use-templates/overview-ae74e1/) --- ## Output Formats When Using Templates When generating outputs from templates, CE.SDK supports: Templates are format-aware, allowing you to design once and export to multiple formats seamlessly. For example, a single marketing template could be used to produce a social media graphic, a printable flyer, and a promotional video, all using the same underlying design. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Use Templates Programmatically" description: "Work with templates programmatically through CE.SDK's engine APIs to load existing templates, build new templates from scratch, modify template structures, and populate templates with dynamic data for batch processing and automation." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/programmatic-9349f3/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Programmatic](https://img.ly/docs/cesdk/sveltekit/use-templates/programmatic-9349f3/) --- Automate template workflows with CE.SDK's engine APIs for batch processing, personalization, and headless design generation.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-programmatic-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-programmatic-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-programmatic-browser/) Templates are scenes with predefined structures that support dynamic content through variables. This guide shows you how to work with templates programmatically using CE.SDK's engine APIs—without requiring user interface interactions. ```typescript file=@cesdk_web_examples/guides-use-templates-programmatic-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Use Templates Programmatically * * This example demonstrates how to work with templates programmatically: * 1. Creating templates from scratch with text variables * 2. Setting up text variables for dynamic content * 3. Populating templates with data * 4. Saving and exporting templates */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); // Create a greeting card template from scratch // This template will have placeholders for customization // Set up text variables FIRST so they're available when text is created engine.variable.setString('recipientName', 'Alice'); engine.variable.setString('customMessage', 'Wishing you a wonderful day!'); // Add a title text block with variable placeholder const titleBlock = engine.block.create('text'); engine.block.setName(titleBlock, 'title'); engine.block.appendChild(page, titleBlock); engine.block.setPositionX(titleBlock, 50); engine.block.setPositionY(titleBlock, 50); engine.block.setWidth(titleBlock, 700); engine.block.setHeight(titleBlock, 80); // Set text with variable syntax for dynamic replacement engine.block.replaceText(titleBlock, 'Hello, {{recipientName}}!'); engine.block.setTextColor(titleBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); // Set font size and weight for better visibility engine.block.setFloat(titleBlock, 'text/fontSize', 48); // Add a message text block with variable const messageBlock = engine.block.create('text'); engine.block.setName(messageBlock, 'message'); engine.block.appendChild(page, messageBlock); engine.block.setPositionX(messageBlock, 50); engine.block.setPositionY(messageBlock, 140); engine.block.setWidth(messageBlock, 700); engine.block.setHeight(messageBlock, 120); engine.block.replaceText(messageBlock, '{{customMessage}}'); engine.block.setTextColor(messageBlock, { r: 0.3, g: 0.3, b: 0.3, a: 1.0 }); engine.block.setFloat(messageBlock, 'text/fontSize', 28); // Variables have already been set earlier in the template creation // You can retrieve variable values at any time const recipientName = engine.variable.getString('recipientName'); console.log('Current recipient:', recipientName); // List all variables in the scene const allVariables = engine.variable.findAll(); console.log('All variables:', allVariables); // Demonstrate populating the template with different data // In a real application, you would iterate through data records // Example: Update variables to populate template with new data setTimeout(() => { engine.variable.setString('recipientName', 'Bob'); engine.variable.setString( 'customMessage', 'Congratulations on your achievement!' ); console.log('Variables updated to new values'); }, 2000); // Demonstrate saving and exporting the template setTimeout(async () => { // Save the entire scene to a string for later reuse const sceneString = await engine.scene.saveToString(); console.log('Template saved, length:', sceneString.length); // You can export the current view as an image const blob = await engine.block.export(page, 'image/png', { targetWidth: 800, targetHeight: 600 }); console.log('Exported as PNG, size:', blob.size, 'bytes'); // Create a download link for the export (demonstration purposes) const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'greeting-card.png'; console.log('Export ready for download'); // Uncomment to trigger automatic download: // link.click(); }, 4000); // Switch to adopter mode to demonstrate placeholder functionality engine.editor.setRole('Adopter'); console.log('Template created successfully!'); console.log('The template includes:'); console.log('- Text variables: recipientName, customMessage'); console.log('- Automatic variable updates will occur every 2 seconds'); } } export default Example; ``` This guide covers creating templates from scratch, configuring text variables, populating templates with data, implementing batch processing workflows, and exporting personalized designs. ## Initialize CE.SDK We start by initializing CE.SDK and creating a design scene. This provides the foundation for programmatic template operations. ```typescript highlight=highlight-setup await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const pages = engine.block.findByType('page'); const page = pages[0]; if (!page) { throw new Error('No page found'); } // Set page background const pageFill = engine.block.getFill(page); engine.block.setColor(pageFill, 'fill/color/value', { r: 0.95, g: 0.95, b: 0.95, a: 1.0 }); ``` We create a page with specific dimensions and set a light gray background. This serves as the canvas for our template structure. ## Creating Templates from Scratch We build templates programmatically by creating and arranging blocks with `engine.block.create()` and `engine.block.appendChild()`. ```typescript highlight=highlight-create-template // Create a greeting card template from scratch // This template will have placeholders for customization // Set up text variables FIRST so they're available when text is created engine.variable.setString('recipientName', 'Alice'); engine.variable.setString('customMessage', 'Wishing you a wonderful day!'); // Add a title text block with variable placeholder const titleBlock = engine.block.create('text'); engine.block.setName(titleBlock, 'title'); engine.block.appendChild(page, titleBlock); engine.block.setPositionX(titleBlock, 50); engine.block.setPositionY(titleBlock, 50); engine.block.setWidth(titleBlock, 700); engine.block.setHeight(titleBlock, 80); // Set text with variable syntax for dynamic replacement engine.block.replaceText(titleBlock, 'Hello, {{recipientName}}!'); engine.block.setTextColor(titleBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }); // Set font size and weight for better visibility engine.block.setFloat(titleBlock, 'text/fontSize', 48); // Add a message text block with variable const messageBlock = engine.block.create('text'); engine.block.setName(messageBlock, 'message'); engine.block.appendChild(page, messageBlock); engine.block.setPositionX(messageBlock, 50); engine.block.setPositionY(messageBlock, 140); engine.block.setWidth(messageBlock, 700); engine.block.setHeight(messageBlock, 120); engine.block.replaceText(messageBlock, '{{customMessage}}'); engine.block.setTextColor(messageBlock, { r: 0.3, g: 0.3, b: 0.3, a: 1.0 }); engine.block.setFloat(messageBlock, 'text/fontSize', 28); ``` We create a greeting card template with two text blocks. The title block contains `{{recipientName}}` and the message block contains `{{customMessage}}`—these double-brace syntax markers define where variables will be replaced. We position each block precisely and configure text properties like font size and color. ## Text Variables for Dynamic Content Variables enable text replacement throughout templates. We set variable values with `engine.variable.setString()`, which automatically updates any text containing `{{variableName}}` syntax. ```typescript highlight=highlight-manage-variables // Variables have already been set earlier in the template creation // You can retrieve variable values at any time const recipientName = engine.variable.getString('recipientName'); console.log('Current recipient:', recipientName); // List all variables in the scene const allVariables = engine.variable.findAll(); console.log('All variables:', allVariables); ``` We initialize variables for `recipientName` and `customMessage`. The `engine.variable.getString()` method retrieves current values, and `engine.variable.findAll()` lists all variables in the scene. Variables persist with the scene and automatically update text content whenever changed. ## Populating Template Content We populate templates by updating variables with new data. This enables data-driven design generation. ```typescript highlight=highlight-populate-content // Demonstrate populating the template with different data // In a real application, you would iterate through data records // Example: Update variables to populate template with new data setTimeout(() => { engine.variable.setString('recipientName', 'Bob'); engine.variable.setString( 'customMessage', 'Congratulations on your achievement!' ); console.log('Variables updated to new values'); }, 2000); ``` We update variables to change text content using `engine.variable.setString()`. When variables are updated, all text blocks containing those variable references automatically display the new values. This approach enables efficient template population without manually finding and updating individual blocks. ## Saving and Exporting Templates Templates can be serialized for storage and reuse. We use `engine.scene.saveToString()` to create portable template files. ```typescript highlight=highlight-save-export // Demonstrate saving and exporting the template setTimeout(async () => { // Save the entire scene to a string for later reuse const sceneString = await engine.scene.saveToString(); console.log('Template saved, length:', sceneString.length); // You can export the current view as an image const blob = await engine.block.export(page, 'image/png', { targetWidth: 800, targetHeight: 600 }); console.log('Exported as PNG, size:', blob.size, 'bytes'); // Create a download link for the export (demonstration purposes) const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'greeting-card.png'; console.log('Export ready for download'); // Uncomment to trigger automatic download: // link.click(); }, 4000); ``` The `saveToString()` method returns a base64-encoded string containing the complete scene, including all blocks, properties, and variable definitions. This string can be stored in databases, file systems, or transmitted over networks. For generating final outputs, `engine.block.export()` renders blocks to images. The `targetWidth` and `targetHeight` options control output resolution. The method returns a Blob that can be downloaded, uploaded, or further processed. ## Data-Driven Workflows Batch processing combines template creation, data population, and export operations. A common pattern loads a template once, then iterates through data records: ```typescript const templateString = await engine.scene.saveToString(); for (const record of dataRecords) { await engine.scene.loadFromString(templateString); engine.variable.setString('name', record.name); engine.variable.setString('title', record.title); const page = engine.block.findByType('page')[0]; const blob = await engine.block.export(page, 'image/png'); // Process or save the blob } ``` This pattern works for generating personalized certificates, greeting cards, social media graphics, or any scenario requiring multiple customized outputs from a single template. ## Loading Existing Templates Templates can be loaded from various sources. Use `engine.scene.loadFromURL()` to fetch remote templates: ```typescript await engine.scene.loadFromURL( 'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene' ); ``` For templates with embedded assets, `engine.scene.loadFromArchiveURL()` loads the complete package including all resources. The `engine.scene.applyTemplateFromString()` and `engine.scene.applyTemplateFromURL()` methods merge template content into existing scenes without replacing everything—useful for adding template sections to ongoing designs. ## Managing Variables Variables integrate with text blocks automatically. When you set a variable value, CE.SDK updates all text containing that variable immediately: ```typescript engine.variable.setString('userName', 'Alice'); // All text with {{userName}} now displays 'Alice' engine.variable.setString('userName', 'Bob'); // Same text now displays 'Bob' ``` Remove variables with `engine.variable.remove()` when they're no longer needed. This doesn't affect existing text—the variable syntax remains as literal text. ## API Reference | Method | Description | | --- | --- | | `engine.block.create()` | Create a new design block | | `engine.block.appendChild()` | Add a block to the scene hierarchy | | `engine.block.setPositionX()` | Set block horizontal position | | `engine.block.setPositionY()` | Set block vertical position | | `engine.block.setWidth()` | Set block width | | `engine.block.setHeight()` | Set block height | | `engine.block.replaceText()` | Set text content (supports variable tokens) | | `engine.variable.setString()` | Create or update a text variable | | `engine.variable.getString()` | Read the current value of a variable | | `engine.variable.findAll()` | Get array of all variable keys in the scene | | `engine.variable.remove()` | Delete a variable from the scene | | `engine.scene.saveToString()` | Serialize scene to portable string | | `engine.scene.loadFromString()` | Load scene from serialized string | | `engine.scene.loadFromURL()` | Load scene from remote URL | | `engine.block.export()` | Export block to image blob | ## Troubleshooting **Template loading failures:** Verify scene strings are properly encoded and URLs are accessible. Use `try-catch` blocks around loading operations to handle network or parsing errors. **Variables not replacing text:** Variable names in text (within `{{}}`) must exactly match keys passed to `engine.variable.setString()`. Variables are case-sensitive. **Export issues:** Validate that all required assets are accessible before exporting. Missing images or fonts can cause export failures. Check block hierarchy structure—orphaned blocks (not connected to the page tree) won't appear in exports. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Replace Content" description: "Learn how to dynamically replace content within templates using CE.SDK's placeholder and variable systems." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/use-templates/replace-content-4c482b/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [Create and Use Templates](https://img.ly/docs/cesdk/sveltekit/create-templates-3aef79/) > [Replace Content](https://img.ly/docs/cesdk/sveltekit/use-templates/replace-content-4c482b/) --- Dynamically replace content within templates using CE.SDK's placeholder and variable systems. Find placeholder blocks by name, update text using variables, and swap images programmatically.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-replace-content-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-use-templates-replace-content-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-use-templates-replace-content-browser/) Template content replacement enables dynamic designs by swapping placeholder content programmatically. Templates contain blocks marked as placeholders that can be located by name or discovered in bulk for batch processing. Text replacement uses the variable system with `{{variableName}}` syntax, while images are updated by modifying fill properties. ```typescript file=@cesdk_web_examples/guides-use-templates-replace-content-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import packageJson from './package.json'; /** * CE.SDK Plugin: Replace Content Guide * * Demonstrates how to dynamically replace content in templates: * - Finding placeholder blocks by name * - Using text variables for dynamic content * - Replacing image sources * - Building data-driven template workflows */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { width: 800, height: 600, unit: 'Pixel' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]; // Create a text block with a name for later retrieval const headerText = engine.block.create('text'); engine.block.setName(headerText, 'header-text'); engine.block.replaceText(headerText, 'Welcome, {{userName}}!'); engine.block.setTextFontSize(headerText, 96); engine.block.setWidthMode(headerText, 'Auto'); engine.block.setHeightMode(headerText, 'Auto'); engine.block.appendChild(page, headerText); engine.block.setPositionX(headerText, 50); engine.block.setPositionY(headerText, 30); // Find the block by its name const [foundHeader] = engine.block.findByName('header-text'); console.log('Found header block:', foundHeader); // Enable placeholder behavior on blocks engine.block.setPlaceholderEnabled(headerText, true); // Create an image placeholder const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 300, height: 200 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 120); engine.block.setName(imageBlock, 'product-image'); engine.block.setPlaceholderEnabled(imageBlock, true); // Find all placeholder blocks in the scene const placeholders = engine.block.findAllPlaceholders(); console.log('Found placeholders:', placeholders.length); // Check if a block supports placeholder behavior const supportsPlaceholder = engine.block.supportsPlaceholderBehavior(imageBlock); console.log('Supports placeholder behavior:', supportsPlaceholder); // Check if placeholder is enabled const isPlaceholderEnabled = engine.block.isPlaceholderEnabled(imageBlock); console.log('Placeholder enabled:', isPlaceholderEnabled); // Set text variables to replace {{variableName}} placeholders engine.variable.setString('userName', 'Alex'); // The text block now displays "Welcome, Alex!" console.log('Variable set, text updated automatically'); // List all variables in the scene const allVariables = engine.variable.findAll(); console.log('All variables:', allVariables); // Get a variable value const userName = engine.variable.getString('userName'); console.log('Current userName:', userName); // Update the variable engine.variable.setString('userName', 'Jordan'); // Replace image content by updating the fill's image URI const [productImage] = engine.block.findByName('product-image'); const fill = engine.block.getFill(productImage); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); console.log('Image replaced'); // Create another text block for direct replacement const subtitleText = engine.block.create('text'); engine.block.setName(subtitleText, 'subtitle'); engine.block.replaceText(subtitleText, 'Original subtitle text'); engine.block.setTextFontSize(subtitleText, 48); engine.block.setWidthMode(subtitleText, 'Auto'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.appendChild(page, subtitleText); engine.block.setPositionX(subtitleText, 50); engine.block.setPositionY(subtitleText, 350); // Replace text directly without using variables const [subtitle] = engine.block.findByName('subtitle'); engine.block.replaceText(subtitle, 'Updated subtitle content'); console.log('Text replaced directly'); // Demonstrate data-driven template workflow pattern const dataRecords = [ { name: 'Alice', title: 'Designer' }, { name: 'Bob', title: 'Developer' } ]; // Process each record (in practice, you'd export between iterations) for (const record of dataRecords) { engine.variable.setString('userName', record.name); console.log(`Processed record for: ${record.name}`); // In a real workflow, you would export here: // const blob = await engine.block.export(page, { mimeType: 'image/png' }); } // Select the header text to show in the UI engine.block.select(headerText); console.log( 'Replace content guide initialized. The template demonstrates text variables, image replacement, and placeholder APIs.' ); } } export default Example; ``` This guide covers how to find placeholder blocks, replace text using variables, swap image content, and build data-driven template workflows. ## Finding Placeholder Blocks Locate replaceable content using block discovery APIs. Use `engine.block.findByName()` to find specific blocks when you know the placeholder name. ```typescript highlight=highlight-find-by-name // Create a text block with a name for later retrieval const headerText = engine.block.create('text'); engine.block.setName(headerText, 'header-text'); engine.block.replaceText(headerText, 'Welcome, {{userName}}!'); engine.block.setTextFontSize(headerText, 96); engine.block.setWidthMode(headerText, 'Auto'); engine.block.setHeightMode(headerText, 'Auto'); engine.block.appendChild(page, headerText); engine.block.setPositionX(headerText, 50); engine.block.setPositionY(headerText, 30); // Find the block by its name const [foundHeader] = engine.block.findByName('header-text'); console.log('Found header block:', foundHeader); ``` ### Discover All Placeholders Use `engine.block.findAllPlaceholders()` to discover all placeholder blocks in a template for iterating through them programmatically. ```typescript highlight=highlight-find-all-placeholders // Enable placeholder behavior on blocks engine.block.setPlaceholderEnabled(headerText, true); // Create an image placeholder const imageBlock = await engine.block.addImage( 'https://img.ly/static/ubq_samples/sample_1.jpg', { size: { width: 300, height: 200 } } ); engine.block.appendChild(page, imageBlock); engine.block.setPositionX(imageBlock, 50); engine.block.setPositionY(imageBlock, 120); engine.block.setName(imageBlock, 'product-image'); engine.block.setPlaceholderEnabled(imageBlock, true); // Find all placeholder blocks in the scene const placeholders = engine.block.findAllPlaceholders(); console.log('Found placeholders:', placeholders.length); ``` ### Query Placeholder State Verify blocks support replacement with `engine.block.isPlaceholderEnabled()` and `engine.block.supportsPlaceholderBehavior()` before attempting content updates. ```typescript highlight=highlight-query-placeholder-state // Check if a block supports placeholder behavior const supportsPlaceholder = engine.block.supportsPlaceholderBehavior(imageBlock); console.log('Supports placeholder behavior:', supportsPlaceholder); // Check if placeholder is enabled const isPlaceholderEnabled = engine.block.isPlaceholderEnabled(imageBlock); console.log('Placeholder enabled:', isPlaceholderEnabled); ``` ## Text Variable Replacement Replace text content dynamically using CE.SDK's variable system. Text blocks containing `{{variableName}}` syntax automatically update when you set variable values with `engine.variable.setString()`. ```typescript highlight=highlight-text-variables // Set text variables to replace {{variableName}} placeholders engine.variable.setString('userName', 'Alex'); // The text block now displays "Welcome, Alex!" console.log('Variable set, text updated automatically'); ``` ### Managing Variables List all variables with `engine.variable.findAll()`, retrieve current values using `engine.variable.getString()`, and update variables as needed. ```typescript highlight=highlight-manage-variables // List all variables in the scene const allVariables = engine.variable.findAll(); console.log('All variables:', allVariables); // Get a variable value const userName = engine.variable.getString('userName'); console.log('Current userName:', userName); // Update the variable engine.variable.setString('userName', 'Jordan'); ``` ## Replacing Image Content Update image placeholders by modifying the fill's image URI. First get the fill block using `engine.block.getFill()`, then set the new image source with `engine.block.setString()` on the `'fill/image/imageFileURI'` property. ```typescript highlight=highlight-replace-image // Replace image content by updating the fill's image URI const [productImage] = engine.block.findByName('product-image'); const fill = engine.block.getFill(productImage); engine.block.setString( fill, 'fill/image/imageFileURI', 'https://img.ly/static/ubq_samples/sample_2.jpg' ); console.log('Image replaced'); ``` ## Direct Text Replacement Replace text content directly without variables using `engine.block.replaceText()`. This method replaces all text in a block when you need precise control without the variable system. ```typescript highlight=highlight-direct-text-replacement // Create another text block for direct replacement const subtitleText = engine.block.create('text'); engine.block.setName(subtitleText, 'subtitle'); engine.block.replaceText(subtitleText, 'Original subtitle text'); engine.block.setTextFontSize(subtitleText, 48); engine.block.setWidthMode(subtitleText, 'Auto'); engine.block.setHeightMode(subtitleText, 'Auto'); engine.block.appendChild(page, subtitleText); engine.block.setPositionX(subtitleText, 50); engine.block.setPositionY(subtitleText, 350); // Replace text directly without using variables const [subtitle] = engine.block.findByName('subtitle'); engine.block.replaceText(subtitle, 'Updated subtitle content'); console.log('Text replaced directly'); ``` ## Data-Driven Template Workflows Build automated template population by iterating through data records. Load the template once, then loop through your data, updating variables and placeholders for each record before exporting. ```typescript highlight=highlight-data-driven // Demonstrate data-driven template workflow pattern const dataRecords = [ { name: 'Alice', title: 'Designer' }, { name: 'Bob', title: 'Developer' } ]; // Process each record (in practice, you'd export between iterations) for (const record of dataRecords) { engine.variable.setString('userName', record.name); console.log(`Processed record for: ${record.name}`); // In a real workflow, you would export here: // const blob = await engine.block.export(page, { mimeType: 'image/png' }); } ``` ## Troubleshooting ### Block Not Found by Name Verify the exact name string matches what's set in the template. Names are case-sensitive. Use `engine.block.getName()` to inspect existing block names. ### Variable Not Replacing Text Ensure the variable syntax `{{variableName}}` in the text block matches the key used in `engine.variable.setString()` exactly, including casing. ### Image Not Updating Confirm the block has an image fill by checking `engine.block.getFill()` returns a valid fill block. Verify the URI is accessible and properly formatted. ### Placeholder State Queries Return False Not all blocks support placeholder behavior. Use `engine.block.supportsPlaceholderBehavior()` to check compatibility before querying enabled state. ## API Reference | Method | Description | |--------|-------------| | `block.findByName(name)` | Find blocks by name identifier | | `block.getName(block)` | Get the name of a block | | `block.findAllPlaceholders()` | Discover all placeholder blocks in scene | | `block.isPlaceholderEnabled(block)` | Check if placeholder functionality is enabled | | `block.supportsPlaceholderBehavior(block)` | Verify block supports placeholder behavior | | `block.getFill(block)` | Get fill block from a graphic block | | `block.setString(block, property, value)` | Set string properties like image URIs | | `block.replaceText(block, text)` | Replace text content directly | | `variable.setString(name, value)` | Set text variable value for dynamic replacement | | `variable.getString(name)` | Get current variable value | | `variable.findAll()` | List all variable names in scene | --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "User Interface" description: "Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) --- --- ## Related Pages - [Overview](https://img.ly/docs/cesdk/sveltekit/user-interface/overview-41101a/) - Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface. - [Appearance](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance-b155eb/) - Customize the visual style of the editor UI, including themes, fonts, labels, and icons. - [Customization](https://img.ly/docs/cesdk/sveltekit/user-interface/customization-72b2f8/) - Control which features are available and how UI components behave, appear, or are arranged in the editor. - [UI Extensions](https://img.ly/docs/cesdk/sveltekit/user-interface/ui-extensions-d194d1/) - Extend the editor interface with custom components, panels, actions, and dialogs tailored to your workflow. - [Build Your Own UI](https://img.ly/docs/cesdk/sveltekit/user-interface/build-your-own-ui-fe7527/) - Build a completely custom editor UI using CE.SDK's headless engine APIs and flexible integration options. - [Localization](https://img.ly/docs/cesdk/sveltekit/user-interface/localization-508e20/) - Learn how to translate and customize the CE.SDK editor interface for different languages and regions using the built-in I18n API. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "AI Integration" description: "Integrate external AI services into CE.SDK to enhance creative workflows and power advanced features." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) --- Learn how CE.SDK’s new AI intgrations bring intelligent content generation and enhancement directly into your creative workflow - no tool-switching, no additional complexity. --- ## Related Pages - [Integrate AI Into CE.SDK](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) - Add AI features like image generation or content suggestions directly into the editor. - [Custom AI Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) - Connect your own AI service for design automation, asset generation, or enhancements. - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) - Route AI requests through a secure proxy server to meet privacy or infrastructure needs. - [AI Text Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/text-generation-3e8302/) - Generate creative content for headlines, descriptions, captions, and marketing copy using Claude or GPT with both a built-in UI and programmatic control. - [AI Image Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/) - Create visuals from text prompts or transform existing images using leading AI providers like fal.ai (RecraftV3, Recraft20b, IdeogramV3, GeminiFlash) and OpenAI (GPT Image) with support for both raster and vector outputs. - [Audio Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/audio-generation-2d502a/) - Integrate AI-powered audio generation into CE.SDK with text-to-speech and sound effects using the Audio Generation plugin. - [AI Video Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/video-generation-b3122d/) - Create dynamic videos from text descriptions or animate static images using leading AI providers like fal.ai with Minimax Video, Pixverse, Kling Video, and ByteDance Seedance models. - [Auto Captions](https://img.ly/docs/cesdk/sveltekit/-73368c/) - Integrate automatic caption generation into your CE.SDK application using the Auto Caption plugin with pluggable speech-to-text providers. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Audio Generation" description: "Integrate AI-powered audio generation into CE.SDK with text-to-speech and sound effects using the Audio Generation plugin." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/audio-generation-2d502a/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Audio Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/audio-generation-2d502a/) --- Add AI-powered text-to-speech and sound effect generation directly into your CE.SDK application using the Audio Generation plugin powered by ElevenLabs.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-audio-generation-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-audio-generation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-audio-generation-browser/) The Audio Generation plugin provides two main capabilities: text-to-speech with multiple voice options and sound effect generation from text descriptions. The plugin adds a built-in UI to CE.SDK that allows end users to generate audio content, while also providing programmatic control for automation workflows. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-audio-generation-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import AiApps from '@imgly/plugin-ai-apps-web'; import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); // Configure the audio generation plugin // NOTE: In production, provide a secure proxy URL that forwards // requests to ElevenLabs API with your API key const proxyUrl = 'https://your-proxy-server.com/api/elevenlabs'; // Configure audio generation with text-to-speech and sound effects await cesdk.addPlugin( AiApps({ providers: { text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl, properties: { voice_id: 'pNInz6obpgDQGcFmaJgB' // Default voice } } as any), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl } as any) }, // IMPORTANT: dryRun mode simulates generation without API calls dryRun: true }) ); // Reorder dock to show AI Apps button prominently cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Add AI audio generation history to the audio asset library const audioEntry = cesdk.ui.getAssetLibraryEntry('ly.img.audio'); if (audioEntry != null) { const existingSourceIds = Array.isArray(audioEntry.sourceIds) ? audioEntry.sourceIds : audioEntry.sourceIds({} as any); cesdk.ui.updateAssetLibraryEntry('ly.img.audio', { sourceIds: [...existingSourceIds, 'ly.img.ai.audio-generation.history'] }); } // Open the AI Apps panel to make the audio generation features visible cesdk.ui.openPanel('ly.img.ai.apps'); } } export default Example; ``` This guide covers installing the plugin, configuring providers, customizing voice parameters, controlling feature visibility, implementing middleware, and troubleshooting common issues. ## Prerequisites Before integrating audio generation, ensure you have: - CE.SDK installed in your project - An ElevenLabs API account for audio generation - A proxy server to securely forward API requests (required for production) - Basic familiarity with plugin installation in CE.SDK ## Using the Built-in Audio Generation UI When the Audio Generation plugin is configured, users can access audio generation features directly within the CE.SDK interface. The plugin automatically adds UI panels that allow users to: - Choose between text-to-speech and sound effects generation - Select from available voices (for text-to-speech) - Enter text prompts describing the desired audio - Adjust generation parameters like speed and stability - Preview and use generated audio in their designs Generated audio automatically appears in the asset library and can be added to scenes like any other audio asset. The plugin handles all UI rendering, asset management, and integration with CE.SDK's existing workflows. ## Installing the Plugin Install the audio generation plugin package: ```bash npm install @imgly/plugin-ai-audio-generation-web ``` ```bash yarn add @imgly/plugin-ai-audio-generation-web ``` ```bash pnpm add @imgly/plugin-ai-audio-generation-web ``` Import the plugin and provider modules in your application: ```typescript highlight-install import AiApps from '@imgly/plugin-ai-apps-web'; import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs'; ``` The plugin provides the `AudioGeneration` function for configuration and the `Elevenlabs` module containing provider implementations. ## Configuring Audio Generation Providers We configure audio generation by calling `cesdk.addPlugin()` with the `AudioGeneration` plugin and provider settings. The configuration includes the provider type, a proxy URL for secure API communication, and optional headers for request metadata. For available voices and models, see the [ElevenLabs Models](https://elevenlabs.io/docs/api-reference/models) documentation. ```typescript highlight-basic-config // Configure audio generation with text-to-speech and sound effects await cesdk.addPlugin( AiApps({ providers: { text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl, properties: { voice_id: 'pNInz6obpgDQGcFmaJgB' // Default voice } } as any), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl } as any) }, // IMPORTANT: dryRun mode simulates generation without API calls dryRun: true }) ); ``` The `proxyUrl` parameter is required and should point to your proxy server that forwards requests to ElevenLabs. Custom headers allow you to add metadata like client version or request tracking information. ## Setting Up a Proxy Server A proxy server protects your API keys by forwarding requests server-side. See the [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) guide for implementation details and examples. ## Customizing Voice Parameters The `properties` configuration object allows you to set default voice properties and generation parameters: ```typescript text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl, properties: { voice_id: 'pNInz6obpgDQGcFmaJgB', // Default voice voice_settings_stability: 0.5, voice_settings_similarity_boost: 0.75, }, }); ``` The `voice_id` parameter selects which ElevenLabs voice to use. Stability controls voice consistency (higher values = more consistent), while similarity boost affects how closely the generated voice matches the selected voice model. These defaults can still be adjusted by users through the UI. ## Multiple Provider Configuration We can configure multiple providers to give users a choice of voices or generation models. When multiple providers are configured, the plugin automatically displays a provider selection interface: ```typescript await cesdk.addPlugin( AiApps({ providers: { text2speech: [ Elevenlabs.ElevenMultilingualV2({ proxyUrl, properties: { voice_id: 'voice_1' }, }), Elevenlabs.ElevenMultilingualV2({ proxyUrl, properties: { voice_id: 'voice_2' }, }), ], }, }), ); ``` Each provider in the array can have different voice settings, allowing you to offer users a curated selection of voice options with predefined characteristics. ## Controlling Feature Visibility We can control which plugin features are visible to users using `cesdk.feature.enable()`. This is useful when you want to restrict users to a single provider or hide certain UI elements: ```typescript cesdk.feature.enable( 'ly.img.plugin-ai-audio-generation-web.speech.providerSelect', false, ); ``` The feature ID `ly.img.plugin-ai-audio-generation-web.speech.providerSelect` controls the provider selection UI. Setting it to `false` hides the selection interface when you've configured only one provider and don't want users choosing between options. ## Customizing Labels and Translations We can customize the plugin's UI text using `cesdk.i18n.setTranslations()`. The i18n system supports both provider-specific and generic translation keys: ```typescript cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-generation-web.property.prompt': 'Describe the audio you want to generate', 'ly.img.plugin-ai-audio-generation-web.elevenlabs/multilingual/v2.property.voice_id': 'Select Voice', }, }); ``` Translation keys follow a hierarchy where provider-specific keys (including the provider name) take precedence over generic keys. This allows you to customize text differently for each provider or apply consistent changes across all providers. ## Implementing Middleware Middleware functions intercept generation requests and responses, enabling logging, rate limiting, or custom error handling: ```typescript const loggingMiddleware = async (input, options, next) => { console.log('Generation started:', input); const result = await next(input, options); console.log('Generation completed:', result); return result; }; await cesdk.addPlugin( AiApps({ providers: { text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl }), }, middleware: [loggingMiddleware], }), ); ``` Middleware receives the input parameters, an options object, and a `next` callback. Calling `next` continues the generation process. Middleware can modify inputs before generation, process outputs after generation, or implement cross-cutting concerns like logging and rate limiting. ## Testing Without API Calls We can test the plugin configuration without making actual API calls using the `debug` and `dryRun` options: ```typescript await cesdk.addPlugin( AiApps({ providers: { text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl }), }, debug: true, // Enable console logging dryRun: true, // Simulate generation without API calls }), ); ``` Debug mode logs request and response details to the console, helping you verify configuration. Dry-run mode simulates generation without calling the ElevenLabs API, useful for testing integration and UI flows without incurring API costs. ## Accessing Generated Audio Generated audio is automatically stored in provider-specific history sources within the asset library. We can access these assets programmatically if needed: ```typescript const assets = await cesdk.engine.asset.findAssets( 'elevenlabs/multilingual/v2.history', ); ``` The history source ID follows the pattern `{provider}/{variant}.history`. Assets include metadata like the prompt used and generation parameters. Users can also access generated audio through the asset library UI and add it to their scenes. ## Troubleshooting Common issues when configuring the Audio Generation plugin: **Plugin not appearing in UI**: Verify the plugin package is installed and the `addPlugin()` call completed successfully. Check the browser console for initialization errors. **Proxy errors**: Ensure your proxy URL is accessible from the client and properly configured for CORS. Verify the proxy is forwarding requests correctly to ElevenLabs with your API key. **Generation failures**: Check that your ElevenLabs API key is valid and has sufficient quota. Verify the proxy is passing through error responses for debugging. **Provider selection not showing**: Confirm you've configured multiple providers in an array. A single provider configuration doesn't display the selection UI. **Custom translations not applying**: Verify the translation key format matches the plugin's expected pattern. Check that `setTranslations()` is called before the plugin UI is rendered. **Middleware not executing**: Ensure the middleware array is included in the plugin configuration at the top level, not inside individual provider configurations. **Audio not appearing in scene**: Check that the asset library is configured to show audio assets and that the history source is enabled. ## API Reference | Method | Purpose | | ----------------------------------- | ------------------------------------------------------------------- | | `cesdk.addPlugin()` | Register and initialize the Audio Generation plugin with CE.SDK | | `AudioGeneration()` | Create the plugin instance with provider configuration and options | | `Elevenlabs.ElevenMultilingualV2()` | Configure a text-to-speech generation provider with voice selection | | `Elevenlabs.ElevenSoundEffects()` | Configure a sound effect generation provider for ambient audio | | `cesdk.feature.enable()` | Control visibility of plugin features like provider selection | | `cesdk.i18n.setTranslations()` | Customize UI labels and translations for different languages | | `engine.asset.findAssets()` | Query generated audio assets from provider history sources | ## Next Steps - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Integrate AI Features](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) — Overview of AI integration - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Work with generated assets - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Configure asset sources --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Custom AI Provider" description: "Connect your own AI service for design automation, asset generation, or enhancements." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Custom AI Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) --- Build a custom AI-powered image generation provider for CE.SDK using the `@imgly/plugin-ai-generation-web` package. You'll implement an AI provider from scratch using the schema-based approach and integrate it seamlessly with the editor.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-custom-provider-browser/) This guide walks you through creating an image generation provider that connects to your own AI service. You'll learn about the provider interface, OpenAPI schema-based input configuration, quick actions, middleware patterns, and CE.SDK integration. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-custom-provider-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import { CommonProviderConfiguration, ImageOutput, Provider, loggingMiddleware, uploadMiddleware } from '@imgly/plugin-ai-generation-web'; import ImageGeneration from '@imgly/plugin-ai-image-generation-web'; import type CreativeEditorSDK from '@cesdk/cesdk-js'; import packageJson from './package.json'; import apiSchema from './myApiSchema.json'; // Define your input type based on your schema interface MyProviderInput { prompt: string; width: number; height: number; style: string; image_url?: string; // For image-to-image operations } // Define provider configuration interface extending CommonProviderConfiguration interface MyProviderConfiguration extends CommonProviderConfiguration { // Add any provider-specific configuration here customApiKey?: string; } // Mock API function that simulates image generation // In production, this would be replaced with actual API calls async function mockGenerateImage( input: MyProviderInput, _abortSignal?: AbortSignal ): Promise<{ imageUrl: string }> { // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 1500)); // Return real demo image URLs based on the style const sampleImages: Record = { photorealistic: 'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_1.jpg', cartoon: 'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_2.jpg', sketch: 'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_3.jpg', painting: 'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_4.jpg' }; return { imageUrl: sampleImages[input.style] || sampleImages.photorealistic }; } // Create a function that returns your provider export function MyImageProvider( _config: MyProviderConfiguration ): (context: { cesdk: CreativeEditorSDK; }) => Promise> { // Return a function that returns the provider return async ({ cesdk: _cesdk }) => { // Create and return the provider const provider: Provider<'image', MyProviderInput, ImageOutput> = { // Unique identifier for your provider id: 'my-image-provider', // Define output type as 'image' kind: 'image', // Initialize your provider initialize: async () => { console.log('Initializing my image provider'); // Any setup needed (e.g., API client initialization) }, // Define input panel and UI using schema input: { panel: { type: 'schema', document: apiSchema, // Your OpenAPI schema inputReference: '#/components/schemas/GenerationInput', // Reference to your input schema userFlow: 'placeholder', // Creates a block first, then updates it with the generated content orderExtensionKeyword: 'x-order-properties', // Used to control property display order // Convert API input to block parameters getBlockInput: async (input) => ({ image: { width: input.width || 512, height: input.height || 512, label: `AI: ${input.prompt?.substring(0, 20)}...` } }) }, // Add quick actions for canvas menu quickActions: { supported: { // Map quick action IDs to provider input transformations 'ly.img.editImage': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.swapBackground': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.createVariant': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.styleTransfer': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.style, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) } } } }, // Define output generation behavior output: { // Allow cancellation of generation abortable: true, // Store generated assets in browser's IndexedDB history: '@imgly/indexedDB', // Add middleware for logging and uploading middleware: [ loggingMiddleware({ enable: true }), // Example of upload middleware that stores generated images on your server uploadMiddleware(async (output: ImageOutput) => { // In production, upload the image to your server // For this example, we just return the output as-is console.log('Upload middleware: Processing output', output.url); return output; }), // Custom error handling middleware async (input, options, next) => { try { return await next(input, options); } catch (error: any) { // Prevent default error notification options.preventDefault(); // Show custom error notification options.cesdk?.ui.showNotification({ type: 'error', message: `Image generation failed: ${error.message}` }); throw error; } } ], // Configure success/error notifications notification: { success: { show: true, message: 'Image generated successfully!' }, error: { show: true, message: (context) => `Generation failed: ${context.error}` } }, // The core generation function generate: async (input, { abortSignal }) => { try { // Use mock API for demonstration // In production, replace with actual API call: // const response = await fetch(config.proxyUrl, { ... }); const data = await mockGenerateImage(input, abortSignal); // Return the image URL return { kind: 'image', url: data.imageUrl }; } catch (error) { console.error('Image generation failed:', error); throw error; } } } }; return provider; }; } class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Add translations for the custom provider cesdk.i18n.setTranslations({ en: { 'panel.my-image-provider.generate': 'Generate Image' } }); // Add your image generation provider await cesdk.addPlugin( ImageGeneration({ providers: { text2image: MyImageProvider({ proxyUrl: 'https://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) }, debug: true }) ); // Add the dock component to open the AI image generation panel cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.image-generation.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Open the AI Image Generation panel cesdk.ui.openPanel('ly.img.ai.image-generation'); } } // Example: Control which features are visible in the UI function configureFeatures(cesdk: CreativeEditorSDK) { // Hide the provider dropdown if you only have one provider cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.providerSelect', false ); // Enable text-to-image generation cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromText', true); // Disable image-to-image generation cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromImage', false ); } export default Example; ``` This guide covers: - Understanding the Provider interface for image generation - Creating an OpenAPI schema for input configuration - Implementing a custom image provider with quick actions - Adding middleware for logging, uploads, and error handling - Integrating the provider with CE.SDK ## Prerequisites - Basic knowledge of TypeScript and React - Familiarity with CreativeEditor SDK - An image generation API to integrate with ## Project Setup First, set up your project and install the necessary packages: ```bash # Create a new project or use an existing one mkdir my-image-provider cd my-image-provider # Initialize package.json npm init -y # Install required dependencies npm install @imgly/plugin-ai-generation-web @imgly/plugin-ai-image-generation-web @cesdk/cesdk-js typescript ``` Then import the packages in your TypeScript file: ```typescript highlight-install import { CommonProviderConfiguration, ImageOutput, Provider, loggingMiddleware, uploadMiddleware } from '@imgly/plugin-ai-generation-web'; import ImageGeneration from '@imgly/plugin-ai-image-generation-web'; ``` ## Understanding the Provider Interface The core of the AI generation system is the `Provider` interface. For image generation, we implement this interface with `kind: 'image'`. Key components of an image provider: - **id**: Unique identifier for your provider - **kind**: Always 'image' for image generation - **initialize**: Setup function for any necessary configuration - **input**: Configuration for the input UI panel and parameters - **output**: Configuration for generation behavior and result handling ## Creating an OpenAPI Schema For schema-based input, you need an OpenAPI schema that defines your input parameters. The schema controls what UI components appear in the generation panel: ```json file=@cesdk_web_examples/guides-user-interface-ai-integration-custom-provider-browser/myApiSchema.json { "openapi": "3.0.0", "info": { "title": "My Image Generator API", "version": "1.0.0" }, "components": { "schemas": { "GenerationInput": { "type": "object", "required": ["prompt"], "properties": { "prompt": { "type": "string", "title": "Description", "description": "Describe the image you want to generate", "x-imgly-builder": { "component": "TextArea" } }, "width": { "type": "integer", "title": "Width", "default": 512, "enum": [256, 512, 768, 1024], "x-imgly-builder": { "component": "Select" } }, "height": { "type": "integer", "title": "Height", "default": 512, "enum": [256, 512, 768, 1024], "x-imgly-builder": { "component": "Select" } }, "style": { "type": "string", "title": "Style", "default": "photorealistic", "enum": ["photorealistic", "cartoon", "sketch", "painting"], "x-imgly-builder": { "component": "Select" } } }, "x-order-properties": ["prompt", "width", "height", "style"] } } } } ``` Key concepts in the schema: - **Required vs optional properties**: Use the `required` array to specify which fields must be filled - **x-imgly-builder extension**: Specifies the UI component type (TextArea, Select, etc.) - **x-order-properties**: Controls the display order of fields in the UI - **enum values**: Provides predefined options for Select components Import the schema in your provider: ```typescript highlight-schema import apiSchema from './myApiSchema.json'; ``` ## Understanding CommonProviderConfiguration Before creating your provider, understand the `CommonProviderConfiguration` interface. This interface provides standardized configuration options that all providers should extend: ```typescript highlight-configuration // Define provider configuration interface extending CommonProviderConfiguration interface MyProviderConfiguration extends CommonProviderConfiguration { // Add any provider-specific configuration here customApiKey?: string; } ``` ### Configuration Options **proxyUrl**: The URL of your proxy server that forwards requests to your AI API. This is essential for keeping API keys secure on the server side. **headers**: Custom headers to include in all API requests. Useful for: - Adding client identification headers - Including version information - Passing through metadata required by your API - Adding correlation IDs for request tracing **history**: Override the provider's default history storage behavior: - `false`: Disable history storage entirely - `'@imgly/local'`: Use temporary local storage (not persistent across sessions) - `'@imgly/indexedDB'`: Use browser IndexedDB storage (persistent across sessions) - `string`: Use your own custom asset source ID **supportedQuickActions**: Configure which quick actions are supported: - `false` or `null`: Remove the quick action entirely - Object with `mapInput`: Override with custom input mapping **properties**: Define default values for any provider property (static values or dynamic functions based on context). ## Defining Input Types Define TypeScript interfaces for your provider's input and configuration: ```typescript highlight-input-types // Define your input type based on your schema interface MyProviderInput { prompt: string; width: number; height: number; style: string; image_url?: string; // For image-to-image operations } ``` ## Creating the Provider Factory The provider factory function returns a provider instance configured with your settings: ```typescript highlight-provider-factory // Create a function that returns your provider export function MyImageProvider( _config: MyProviderConfiguration ): (context: { cesdk: CreativeEditorSDK; }) => Promise> { // Return a function that returns the provider return async ({ cesdk: _cesdk }) => { // Create and return the provider const provider: Provider<'image', MyProviderInput, ImageOutput> = { // Unique identifier for your provider id: 'my-image-provider', // Define output type as 'image' kind: 'image', // Initialize your provider initialize: async () => { console.log('Initializing my image provider'); // Any setup needed (e.g., API client initialization) }, ``` ## Configuring the Input Panel The input panel configuration uses your OpenAPI schema to automatically generate the UI: ```typescript highlight-input-panel // Define input panel and UI using schema input: { panel: { type: 'schema', document: apiSchema, // Your OpenAPI schema inputReference: '#/components/schemas/GenerationInput', // Reference to your input schema userFlow: 'placeholder', // Creates a block first, then updates it with the generated content orderExtensionKeyword: 'x-order-properties', // Used to control property display order // Convert API input to block parameters getBlockInput: async (input) => ({ image: { width: input.width || 512, height: input.height || 512, label: `AI: ${input.prompt?.substring(0, 20)}...` } }) }, ``` Configuration properties: - **type**: Set to `'schema'` for OpenAPI-driven UI - **document**: Your OpenAPI schema object - **inputReference**: JSON pointer to the input schema definition - **userFlow**: Either `'placeholder'` (creates a block first) or `'direct'` - **getBlockInput**: Transforms API input to block parameters (dimensions, label) ## Adding Quick Actions Quick actions appear in the canvas context menu for supported block types. Map quick action IDs to your provider's input format: ```typescript highlight-quick-actions // Add quick actions for canvas menu quickActions: { supported: { // Map quick action IDs to provider input transformations 'ly.img.editImage': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.swapBackground': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.createVariant': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.prompt, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) }, 'ly.img.styleTransfer': { mapInput: (quickActionInput) => ({ prompt: quickActionInput.style, image_url: quickActionInput.uri, width: 512, height: 512, style: 'photorealistic' }) } } } ``` Available quick action IDs: - `'ly.img.editImage'`: Edit selected image with AI - `'ly.img.swapBackground'`: Replace image background - `'ly.img.createVariant'`: Generate variation of image - `'ly.img.styleTransfer'`: Apply style to image ## Configuring Output Behavior The output configuration defines how generation works and handles results: ```typescript highlight-output-config // Define output generation behavior output: { // Allow cancellation of generation abortable: true, // Store generated assets in browser's IndexedDB history: '@imgly/indexedDB', ``` ## Adding Middleware Middleware functions process requests and responses in the generation pipeline: ```typescript highlight-middleware // Add middleware for logging and uploading middleware: [ loggingMiddleware({ enable: true }), // Example of upload middleware that stores generated images on your server uploadMiddleware(async (output: ImageOutput) => { // In production, upload the image to your server // For this example, we just return the output as-is console.log('Upload middleware: Processing output', output.url); return output; }), // Custom error handling middleware async (input, options, next) => { try { return await next(input, options); } catch (error: any) { // Prevent default error notification options.preventDefault(); // Show custom error notification options.cesdk?.ui.showNotification({ type: 'error', message: `Image generation failed: ${error.message}` }); throw error; } } ], ``` ### Available Middleware **loggingMiddleware()**: Debug logging for development. **uploadMiddleware()**: Store generated images on your server before adding to design. **Custom middleware**: Create your own for error handling, rate limiting, or request transformation. ### Custom Error Handling with preventDefault() Middleware can suppress default UI feedback using `options.preventDefault()`. This is useful when you want complete control over how errors are presented: **What gets prevented:** - Error/success notifications (toast messages) - Block error state (error icon) - Console error logging **What is NOT prevented:** - Pending → Ready transition (loading spinner always stops) ## Configuring Notifications Configure success and error notifications shown to users: ```typescript highlight-notification // Configure success/error notifications notification: { success: { show: true, message: 'Image generated successfully!' }, error: { show: true, message: (context) => `Generation failed: ${context.error}` } }, ``` ## Implementing the Generate Function The generate function is the core of your provider—it calls your AI API and returns the result: ```typescript highlight-generate // The core generation function generate: async (input, { abortSignal }) => { try { // Use mock API for demonstration // In production, replace with actual API call: // const response = await fetch(config.proxyUrl, { ... }); const data = await mockGenerateImage(input, abortSignal); // Return the image URL return { kind: 'image', url: data.imageUrl }; } catch (error) { console.error('Image generation failed:', error); throw error; } } ``` In production, replace the mock API call with actual requests to your image generation service. ## Integrating with CE.SDK Register your provider with CE.SDK using the image generation plugin: ```typescript highlight-integration // Add your image generation provider await cesdk.addPlugin( ImageGeneration({ providers: { text2image: MyImageProvider({ proxyUrl: 'https://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) }, debug: true }) ); ``` Add the dock component to make the panel accessible: ```typescript highlight-dock // Add the dock component to open the AI image generation panel cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.image-generation.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); ``` ## Controlling Features with Feature API Control which UI elements and features are available to users: ```typescript highlight-feature-api // Hide the provider dropdown if you only have one provider cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.providerSelect', false ); // Enable text-to-image generation cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fromText', true); // Disable image-to-image generation cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromImage', false ); ``` Available feature flags: - `ly.img.plugin-ai-image-generation-web.providerSelect`: Show/hide provider dropdown - `ly.img.plugin-ai-image-generation-web.fromText`: Enable text-to-image input - `ly.img.plugin-ai-image-generation-web.fromImage`: Enable image-to-image input ## Troubleshooting Common issues and solutions: - **API errors**: Check proxy URL configuration and headers. Ensure your proxy server is correctly forwarding requests to your AI API. - **Generation not starting**: Verify the license key is valid. Check browser console for initialization errors. - **Quick actions not appearing**: Ensure quick action IDs are mapped correctly in the `supported` object. Verify the block type supports quick actions. - **UI not updating**: Check that `generate()` returns the correct output format with `kind: 'image'` and a valid `url`. ## Next Steps - Explore the [AI Image Generation Overview](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/) for built-in provider options - Learn about [AI Text Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/text-generation-3e8302/) for text-based AI providers - Understand the [Plugin System](https://img.ly/docs/cesdk/sveltekit/plugins-693c48/) for extending CE.SDK --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "AI Image Generation" description: "Create visuals from text prompts or transform existing images using leading AI providers like fal.ai (RecraftV3, Recraft20b, IdeogramV3, GeminiFlash) and OpenAI (GPT Image) with support for both raster and vector outputs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Image Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/) --- We add AI image generation to CE.SDK applications for creating visuals from text descriptions or transforming existing images using multiple AI providers.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-image-generation-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-image-generation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-image-generation-browser/) The image generation plugin creates visuals from text descriptions (text-to-image) or transforms existing images (image-to-image). Use models like RecraftV3, Recraft20b, IdeogramV3, GeminiFlash25, and GPT Image with output in raster or vector format. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-image-generation-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import AiApps from '@imgly/plugin-ai-apps-web'; import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai'; import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; // Configure the AI image generation plugin // NOTE: In production, provide a secure proxy URL that forwards // requests to fal.ai or OpenAI API with your API key const proxyUrl = 'https://your-proxy-server.com/api'; // Configure image generation with all available providers using AiApps await cesdk.addPlugin( AiApps({ providers: { text2image: [ FalAiImage.RecraftV3({ proxyUrl }), FalAiImage.Recraft20b({ proxyUrl }), FalAiImage.IdeogramV3({ proxyUrl }), FalAiImage.GeminiFlash25({ proxyUrl }), FalAiImage.NanoBanana({ proxyUrl }), FalAiImage.SeedreamV4({ proxyUrl }), FalAiImage.FluxProKontextEdit({ proxyUrl }), FalAiImage.FluxProKontextMaxEdit({ proxyUrl }), OpenAiImage.GptImage1.Text2Image({ proxyUrl }) ], image2image: [ FalAiImage.GeminiFlashEdit({ proxyUrl }), FalAiImage.Gemini25FlashImageEdit({ proxyUrl }), FalAiImage.IdeogramV3Remix({ proxyUrl }), FalAiImage.QwenImageEdit({ proxyUrl }), FalAiImage.NanoBananaEdit({ proxyUrl }), FalAiImage.SeedreamV4Edit({ proxyUrl }), OpenAiImage.GptImage1.Image2Image({ proxyUrl }) ] }, // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development dryRun: true }) ); // Reorder dock to show AI Apps button prominently cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Alternative: Configure with single provider /* await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, headers: { 'x-client-version': '1.0.0' } }) as any }, dryRun: true }) ); */ // Customize generation parameters with default values /* await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, properties: { style: { default: 'realistic_image/natural_light' }, image_size: { default: 'square_hd' }, }, }) as any, }, }) ); */ // Control output mode (vector vs raster) via style selection // RecraftV3 supports both raster (realistic_image) and vector output // To restrict to vector only: /* cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.image', false ); */ // Configure artistic styles for different visual outputs /* await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, properties: { style: { default: 'digital_illustration/pixel_art', }, }, }) as any, }, }) ); */ // Control which features are visible in the UI /* // Hide provider selection when using single provider cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.providerSelect', false); // Disable specific style groups cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false ); */ // Customize UI labels and translations /* cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Describe your image', 'ly.img.plugin-ai-generation-web.property.prompt': 'AI Prompt', }, de: { 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Beschreiben Sie Ihr Bild', }, }); */ // Implement middleware for logging or rate limiting /* import { loggingMiddleware, rateLimitMiddleware, } from '@imgly/plugin-ai-generation-web'; const logging = loggingMiddleware(); const rateLimit = rateLimitMiddleware({ maxRequests: 10, timeWindow: 60000, // 1 minute }); await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl }) as any, }, middleware: [logging, rateLimit], }) ); */ // Test without making actual API calls /* await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, debug: true, dryRun: true, }) as any, }, }) ); */ // Generated images are automatically added to provider-specific history sources: // - fal-ai/recraft-v3.history // - fal-ai/ideogram/v3.history // - open-ai/gpt-image-1/text2image.history // Access them through the asset library or programmatically: /* const assets = engine.asset.findAllSources(); const historySource = assets.find(id => engine.asset.getName(id) === 'fal-ai/recraft-v3.history' ); if (historySource) { const results = await engine.asset.findAssets(historySource); console.log('Generated images:', results); } */ // Open the AI Apps panel to make the image generation features visible cesdk.ui.openPanel('ly.img.ai.apps'); } } export default Example; ``` This guide covers installing the plugin, configuring text-to-image and image-to-image providers, setting up proxy communication, customizing generation parameters, choosing between vector and raster output, configuring artistic styles, and testing with dry-run mode. ## Using the Built-in Image Generation UI After configuring the plugin, users access image generation through the UI. They choose text-to-image or image-to-image mode, enter prompts or upload images, select output format and styles, adjust generation parameters, and find generated results in the asset library. The UI adapts based on the configured providers and available features. ## Installing the Plugin Import the plugin and provider modules from the image generation package. ```typescript highlight-install import AiApps from '@imgly/plugin-ai-apps-web'; import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai'; import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai'; ``` Install `@imgly/plugin-ai-image-generation-web` to access the ImageGeneration plugin and provider modules for fal.ai and OpenAI: ```bash npm install @imgly/plugin-ai-image-generation-web ``` ```bash yarn add @imgly/plugin-ai-image-generation-web ``` ```bash pnpm add @imgly/plugin-ai-image-generation-web ``` ## Configuring Text-to-Image Providers Configure text-to-image generation by adding providers like RecraftV3, Recraft20b, IdeogramV3, GeminiFlash25, or GPT Image. Each provider requires a proxy URL for secure API communication. For available models, see the provider documentation: - [fal.ai Models](https://fal.ai/models) - [OpenAI Models](https://platform.openai.com/docs/models) ```typescript highlight-text-to-image-basic await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, headers: { 'x-client-version': '1.0.0' } }) as any }, dryRun: true }) ); ``` We configure RecraftV3 as the text-to-image provider with custom headers and enable dry-run mode for testing without actual API calls. ## Configuring Image-to-Image Providers Set up image-to-image transformation by configuring providers like GeminiFlashEdit, Gemini25FlashImageEdit, IdeogramV3Remix, QwenImageEdit, FluxProKontextEdit, or GPT Image. Users can upload images and transform them based on text instructions. ```typescript ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl: '...' }), image2image: FalAiImage.GeminiFlashEdit({ proxyUrl: '...' }), }, }) ``` The image-to-image mode accepts uploaded images and applies AI-powered transformations based on user prompts. ## Setting Up a Proxy Server A proxy server protects your API keys by forwarding requests server-side. See the [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) guide for implementation details and examples. ## Customizing Generation Parameters Set default generation properties using the properties configuration. Control style for visual appearance and image\_size for output dimensions. ```typescript highlight-customizing-parameters await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, properties: { style: { default: 'realistic_image/natural_light' }, image_size: { default: 'square_hd' }, }, }) as any, }, }) ); ``` For RecraftV3 and Recraft20b, configure `style` (realistic\_image, digital\_illustration, vector\_illustration) and `image_size` (square\_hd, landscape\_4\_3, portrait\_3\_4). For IdeogramV3, control `style_mode` (AUTO, GENERAL, REALISTIC, DESIGN). For GeminiFlash25, set `aspect_ratio` and `output_format`. ## Choosing Output Modes: Vector vs Raster Choose between vector (scalable SVG) and raster (bitmap PNG/JPEG) output via style selection. RecraftV3 and Recraft20b support both modes based on the selected style. ```typescript highlight-vector-vs-raster cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.image', false ); ``` RecraftV3 provides `realistic_image` for raster output, and `digital_illustration` or `vector_illustration` for vector output. Control available styles with the Feature API to restrict output modes. ## Configuring Artistic Styles RecraftV3 and Recraft20b support artistic styles through the properties configuration. RecraftV3 offers styles like `realistic_image/natural_light`, `digital_illustration/pixel_art`, and `vector_illustration`. Recraft20b adds icon styles like `icon/broken_line`, `icon/colored_outline`, and `logo`. ```typescript highlight-artistic-styles await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, properties: { style: { default: 'digital_illustration/pixel_art', }, }, }) as any, }, }) ); ``` Users select styles in the UI or set defaults programmatically to control the visual appearance of generated images. ## Multiple Provider and Model Configuration Configure arrays of providers to give users choice between different AI models and capabilities. ```typescript highlight-multiple-providers // Configure image generation with all available providers using AiApps await cesdk.addPlugin( AiApps({ providers: { text2image: [ FalAiImage.RecraftV3({ proxyUrl }), FalAiImage.Recraft20b({ proxyUrl }), FalAiImage.IdeogramV3({ proxyUrl }), FalAiImage.GeminiFlash25({ proxyUrl }), FalAiImage.NanoBanana({ proxyUrl }), FalAiImage.SeedreamV4({ proxyUrl }), FalAiImage.FluxProKontextEdit({ proxyUrl }), FalAiImage.FluxProKontextMaxEdit({ proxyUrl }), OpenAiImage.GptImage1.Text2Image({ proxyUrl }) ], image2image: [ FalAiImage.GeminiFlashEdit({ proxyUrl }), FalAiImage.Gemini25FlashImageEdit({ proxyUrl }), FalAiImage.IdeogramV3Remix({ proxyUrl }), FalAiImage.QwenImageEdit({ proxyUrl }), FalAiImage.NanoBananaEdit({ proxyUrl }), FalAiImage.SeedreamV4Edit({ proxyUrl }), OpenAiImage.GptImage1.Image2Image({ proxyUrl }) ] }, // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development dryRun: true }) ); ``` Multiple provider configurations trigger automatic provider and model selection interfaces in the UI, allowing users to choose the best model for their use case. ## Controlling Feature Visibility Hide or show features using the Feature API. Disable provider selection when using a single provider or restrict specific style groups. ```typescript highlight-feature-visibility // Hide provider selection when using single provider cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.providerSelect', false); // Disable specific style groups cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false ); ``` We disable provider selection to hide the UI when only one provider is configured, and control style group visibility to restrict output modes. ## Customizing Labels and Translations Customize UI text using the i18n system. Set provider-specific translations or generic keys that apply to multiple providers. ```typescript highlight-custom-translations cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Describe your image', 'ly.img.plugin-ai-generation-web.property.prompt': 'AI Prompt', }, de: { 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Beschreiben Sie Ihr Bild', }, }); ``` Provider-specific keys like `ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt` customize individual models, while generic keys like `ly.img.plugin-ai-generation-web.property.prompt` apply broadly. ## Implementing Middleware Intercept generation requests and responses with middleware functions. Use built-in middleware for logging or rate limiting, or create custom middleware for error handling. ```typescript highlight-middleware import { loggingMiddleware, rateLimitMiddleware, } from '@imgly/plugin-ai-generation-web'; const logging = loggingMiddleware(); const rateLimit = rateLimitMiddleware({ maxRequests: 10, timeWindow: 60000, // 1 minute }); await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl }) as any, }, middleware: [logging, rateLimit], }) ); ``` Middleware receives input, options, and a next callback. Chain multiple middleware functions to process requests before they reach the AI provider. ## Testing Without API Calls Use debug mode for console logging and dryRun to simulate generation without making actual API requests. ```typescript highlight-dry-run await cesdk.addPlugin( ImageGeneration({ providers: { text2image: FalAiImage.RecraftV3({ proxyUrl, debug: true, dryRun: true, }) as any, }, }) ); ``` Dry-run mode returns simulated responses, allowing development and testing without consuming API credits or requiring valid API keys. ## Accessing Generated Images Generated images appear in provider-specific history sources like `fal-ai/recraft-v3.history`, `fal-ai/ideogram/v3.history`, and `open-ai/gpt-image-1/text2image.history`. ```typescript highlight-accessing-images const assets = engine.asset.findAllSources(); const historySource = assets.find(id => engine.asset.getName(id) === 'fal-ai/recraft-v3.history' ); if (historySource) { const results = await engine.asset.findAssets(historySource); console.log('Generated images:', results); } ``` Access generated images through the asset library UI or programmatically with `engine.asset` methods to retrieve and use generated content. ## Troubleshooting Common issues when configuring the image generation plugin: **Plugin not appearing in UI**: Verify plugin installation and the `addPlugin()` call is executed after scene creation. **Proxy errors**: Check proxy URL accessibility, CORS configuration, and that the proxy correctly forwards requests with API keys. **Generation failures**: Verify provider API key validity and that the proxy correctly authenticates with the AI provider. **Generation timeouts**: Adjust timeout settings for complex prompts or high-resolution outputs. **Provider/model selection not showing**: Verify multiple provider configurations are provided in the array format. **Custom translations not applying**: Check translation key format matches provider-specific patterns. **Middleware not executing**: Verify middleware array is passed to the plugin configuration. **Images not appearing in asset library**: Check asset library configuration includes the provider's history source. **Poor quality results**: Adjust style and image\_size parameters to match your use case. **Vector output not working**: Verify style is set to vector modes and vector style groups are enabled. **Styles not showing in UI**: Check the provider supports styles and style feature flags are enabled. **Image-to-image not accepting uploads**: Verify input image format and size meet the provider's requirements. ## API Reference | Method | Category | Purpose | | ------------------------------------- | -------- | --------------------------------------------------- | | `cesdk.addPlugin()` | Plugin | Register and initialize the Image Generation plugin | | `ImageGeneration()` | Plugin | Create plugin instance with provider configuration | | `FalAiImage.RecraftV3()` | Provider | Configure RecraftV3 text-to-image (raster/vector) | | `FalAiImage.Recraft20b()` | Provider | Configure Recraft20b text-to-image with icon styles | | `FalAiImage.IdeogramV3()` | Provider | Configure IdeogramV3 text-to-image generation | | `FalAiImage.IdeogramV3Remix()` | Provider | Configure IdeogramV3 image remixing | | `FalAiImage.GeminiFlash25()` | Provider | Configure Gemini Flash 2.5 text-to-image | | `FalAiImage.GeminiFlashEdit()` | Provider | Configure Gemini Flash image editing | | `FalAiImage.Gemini25FlashImageEdit()` | Provider | Configure Gemini 2.5 Flash image editing | | `FalAiImage.QwenImageEdit()` | Provider | Configure Qwen image editing | | `FalAiImage.FluxProKontextEdit()` | Provider | Configure Flux Pro Kontext image editing | | `FalAiImage.FluxProKontextMaxEdit()` | Provider | Configure Flux Pro Kontext Max image editing | | `FalAiImage.NanoBanana()` | Provider | Configure NanoBanana text-to-image | | `FalAiImage.NanoBananaEdit()` | Provider | Configure NanoBanana image editing | | `FalAiImage.SeedreamV4()` | Provider | Configure Seedream V4 text-to-image | | `FalAiImage.SeedreamV4Edit()` | Provider | Configure Seedream V4 image editing | | `OpenAiImage.GptImage1.Text2Image()` | Provider | Configure GPT Image text-to-image | | `OpenAiImage.GptImage1.Image2Image()` | Provider | Configure GPT Image image-to-image | | `cesdk.feature.enable()` | Feature | Control visibility of plugin features | | `cesdk.i18n.setTranslations()` | I18n | Customize UI labels and translations | | `engine.asset` | Asset | Access and manage generated image assets | ## Next Steps - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Integrate AI Features](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) — Overview of AI integration - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Work with generated assets - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Configure asset sources --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Integrate AI Into CE.SDK" description: "Add AI features like image generation or content suggestions directly into the editor." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Integrate AI Into CE.SDK](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) --- Add AI-powered generation capabilities to your CE.SDK application for generating images, videos, audio, and text using the `@imgly/plugin-ai-apps-web` package.  > **Reading time:** 15 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-browser/) This tutorial will guide you through integrating AI-powered generation capabilities into your CreativeEditor SDK application using the `@imgly/plugin-ai-apps-web` package. You'll learn how to set up various AI providers for generating images, videos, audio, and text. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import AiApps from '@imgly/plugin-ai-apps-web'; // Import providers from individual AI generation packages import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs'; import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai'; import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai'; import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic'; import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai'; // Import middleware utilities import { uploadMiddleware } from '@imgly/plugin-ai-generation-web'; import packageJson from './package.json'; /** * Upload to your image storage server. * Replace this mock with your actual storage API call. */ async function uploadToYourStorageServer(imageUrl: string) { // In production, upload the image to your server: // const response = await fetch('https://your-server.com/api/store-image', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ // imageUrl, // metadata: { source: 'ai-generation' } // }) // }); // return await response.json(); // Mock: Return a fake response return { permanentUrl: imageUrl }; } /** * CE.SDK Plugin: AI Integration Guide * * Demonstrates how to integrate AI-powered generation capabilities: * - Text generation and transformation (Anthropic) * - Image generation (fal.ai, OpenAI) * - Video generation (fal.ai) * - Audio generation (ElevenLabs) * - Using middleware for custom processing * - Configuring UI integration */ class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } // Configure AI Apps dock position cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Add AI options to canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ 'ly.img.ai.text.canvasMenu', 'ly.img.ai.image.canvasMenu', ...cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.menu' }) ]); // Add the AI Apps plugin with all providers cesdk.addPlugin( AiApps({ // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development - remove for production use dryRun: true, providers: { // Text generation and transformation text2text: Anthropic.AnthropicProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Optional: Configure default property values properties: { temperature: { default: 0.7 }, maxTokens: { default: 500 } } }), // Image generation - Multiple providers with selection UI text2image: [ FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Add upload middleware to store generated images on your server middleware: [ uploadMiddleware(async (output) => { // Upload the generated image to your server const result = await uploadToYourStorageServer(output.url); // Return the output with your server's URL return { ...output, url: result.permanentUrl }; }) ] }), // Alternative with icon style support FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Configure dynamic defaults based on style type properties: { style: { default: 'broken_line' }, image_size: { default: 'square_hd' } } }), // Additional image provider for user selection OpenAiImage.GptImage1.Text2Image({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-api-key': 'your-key', 'x-request-source': 'cesdk-tutorial' } }) ], // Image-to-image transformation image2image: FalAiImage.GeminiFlashEdit({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Video generation - Multiple providers text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) ], image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Audio generation text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) } }) ); // Control AI features with Feature API // Disable specific quick actions cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.quickAction.editImage', false ); cesdk.feature.enable( 'ly.img.plugin-ai-text-generation-web.quickAction.translate', false ); // Control input types for image/video generation cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromText', true ); cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromImage', false ); // Hide provider selection dropdowns cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.providerSelect', false ); // Control style groups for specific providers cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false ); console.log('AI integration guide initialized.'); } } export default Example; ``` This guide covers installing AI generation packages, initializing CE.SDK, configuring the AI dock and canvas menu, setting up text, image, video, and audio providers, implementing middleware for custom processing, controlling features with the Feature API, and setting up proxy servers for secure API communication. ## Prerequisites - Basic knowledge of JavaScript/TypeScript and React - Familiarity with CreativeEditor SDK - API keys for AI services (Anthropic, fal.ai, ElevenLabs, etc.) ## 1. Project Setup First, set up your project and install the necessary packages: ```bash # Initialize a new project or use an existing one npm install @cesdk/cesdk-js npm install @imgly/plugin-ai-apps-web # Install individual AI generation packages as needed npm install @imgly/plugin-ai-image-generation-web npm install @imgly/plugin-ai-video-generation-web npm install @imgly/plugin-ai-audio-generation-web npm install @imgly/plugin-ai-text-generation-web ``` Import the providers from their respective packages: ```typescript highlight=highlight-imports // Import providers from individual AI generation packages import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs'; import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai'; import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai'; import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic'; import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai'; // Import middleware utilities import { uploadMiddleware } from '@imgly/plugin-ai-generation-web'; ``` ## 2. Initialize CE.SDK Initialize CE.SDK to utilize all AI capabilities: ```typescript highlight=highlight-setup await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: [ 'ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload' ] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } ``` ## 3. Configure UI Components ### AI Dock Button The main entry point for AI features is the AI dock button. Position it at the beginning of the dock: ```typescript highlight=highlight-dock-position // Configure AI Apps dock position cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); ``` ### Canvas Menu Options AI text and image transformations are available in the canvas context menu: ```typescript highlight=highlight-canvas-menu // Add AI options to canvas menu cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ 'ly.img.ai.text.canvasMenu', 'ly.img.ai.image.canvasMenu', ...cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.menu' }) ]); ``` ## 4. Add the AI Apps Plugin Configure the AI Apps plugin with all providers: ```typescript highlight=highlight-add-plugin // Add the AI Apps plugin with all providers cesdk.addPlugin( AiApps({ // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development - remove for production use dryRun: true, providers: { // Text generation and transformation text2text: Anthropic.AnthropicProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Optional: Configure default property values properties: { temperature: { default: 0.7 }, maxTokens: { default: 500 } } }), // Image generation - Multiple providers with selection UI text2image: [ FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Add upload middleware to store generated images on your server middleware: [ uploadMiddleware(async (output) => { // Upload the generated image to your server const result = await uploadToYourStorageServer(output.url); // Return the output with your server's URL return { ...output, url: result.permanentUrl }; }) ] }), // Alternative with icon style support FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Configure dynamic defaults based on style type properties: { style: { default: 'broken_line' }, image_size: { default: 'square_hd' } } }), // Additional image provider for user selection OpenAiImage.GptImage1.Text2Image({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-api-key': 'your-key', 'x-request-source': 'cesdk-tutorial' } }) ], // Image-to-image transformation image2image: FalAiImage.GeminiFlashEdit({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Video generation - Multiple providers text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) ], image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), // Audio generation text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) } }) ); ``` ### Testing with Dry-Run Mode During development, use `dryRun: true` to simulate AI generation without making actual API calls: ```typescript highlight=highlight-dry-run // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development - remove for production use dryRun: true, ``` This helps verify your integration and UI flows without incurring API costs or requiring valid API keys. ## 5. AI Provider Configuration Each AI provider type serves a specific purpose and creates different types of content: ### Text Generation (Anthropic) ```typescript highlight=highlight-text-provider // Text generation and transformation text2text: Anthropic.AnthropicProvider({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Optional: Configure default property values properties: { temperature: { default: 0.7 }, maxTokens: { default: 500 } } }), ``` The text provider enables capabilities like: - Improving writing quality - Fixing spelling and grammar - Making text shorter or longer - Changing tone (professional, casual, friendly) - Translating to different languages - Custom text transformations ### Image Generation Configure multiple image providers with selection UI: ```typescript highlight=highlight-image-providers // Image generation - Multiple providers with selection UI text2image: [ FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Add upload middleware to store generated images on your server middleware: [ uploadMiddleware(async (output) => { // Upload the generated image to your server const result = await uploadToYourStorageServer(output.url); // Return the output with your server's URL return { ...output, url: result.permanentUrl }; }) ] }), // Alternative with icon style support FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' }, // Configure dynamic defaults based on style type properties: { style: { default: 'broken_line' }, image_size: { default: 'square_hd' } } }), // Additional image provider for user selection OpenAiImage.GptImage1.Text2Image({ proxyUrl: 'http://your-proxy-server.com/api/proxy', headers: { 'x-api-key': 'your-key', 'x-request-source': 'cesdk-tutorial' } }) ], // Image-to-image transformation image2image: FalAiImage.GeminiFlashEdit({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), ``` When multiple providers are configured, users will see a selection box to choose between them. Image generation features include: - Creating images from text descriptions - Multiple style options (realistic, illustration, vector) - Various size presets and custom dimensions - Transforming existing images based on text prompts ### Video Generation ```typescript highlight=highlight-video-providers // Video generation - Multiple providers text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) ], image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: 'https://your-server.com/api/fal-ai-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), ``` Video generation capabilities include: - Creating videos from text descriptions - Transforming still images into videos - Fixed output dimensions (typically 1280×720) - 5-second video duration ### Audio Generation (ElevenLabs) ```typescript highlight=highlight-audio-providers // Audio generation text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }), text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl: 'https://your-server.com/api/elevenlabs-proxy', headers: { 'x-client-version': '1.0.0', 'x-request-source': 'cesdk-tutorial' } }) ``` Audio generation features include: - Text-to-speech with multiple voices - Multilingual support - Adjustable speaking speed - Sound effect generation from text descriptions - Creating ambient sounds and effects ## 6. Using Middleware The AI generation framework supports middleware that can enhance or modify the generation process. Middleware functions are executed in sequence and can perform operations before generation, after generation, or both. ### Upload Middleware The `uploadMiddleware` is useful when you need to store generated content on your server before it's used. First, create a helper function for your storage server: ```typescript highlight=highlight-upload-function /** * Upload to your image storage server. * Replace this mock with your actual storage API call. */ async function uploadToYourStorageServer(imageUrl: string) { // In production, upload the image to your server: // const response = await fetch('https://your-server.com/api/store-image', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ // imageUrl, // metadata: { source: 'ai-generation' } // }) // }); // return await response.json(); // Mock: Return a fake response return { permanentUrl: imageUrl }; } ``` Then use `uploadMiddleware` to process generated outputs before they're added to the scene: ```typescript highlight=highlight-upload-middleware // Add upload middleware to store generated images on your server middleware: [ uploadMiddleware(async (output) => { // Upload the generated image to your server const result = await uploadToYourStorageServer(output.url); // Return the output with your server's URL return { ...output, url: result.permanentUrl }; }) ] ``` Use cases for upload middleware: - Storing generated assets in your own cloud storage - Adding watermarks or processing assets before use - Tracking/logging generated content - Implementing licensing or rights management ### Rate Limiting Middleware To prevent abuse of AI services, you can implement rate limiting: ```typescript import { rateLimitMiddleware } from '@imgly/plugin-ai-generation-web'; // In your provider configuration middleware: [ rateLimitMiddleware({ maxRequests: 10, timeWindowMs: 60 * 60 * 1000, // 1 hour onRateLimitExceeded: (input, options, info) => { // Show a notice to the user console.log(`Rate limit reached: ${info.currentCount}/${info.maxRequests}`); return false; // Reject the request } }) ] ``` ### Custom Error Handling Middleware You can create custom middleware for error handling: ```typescript const errorMiddleware = async (input, options, next) => { try { return await next(input, options); } catch (error) { // Handle error (show UI notification, log, etc.) console.error('Generation failed:', error); // You can rethrow or return a fallback throw error; } }; ``` ### Middleware Order The order of middleware is important - they're executed in the sequence provided: ```typescript middleware: [ // Executes first rateLimitMiddleware({ maxRequests: 10, timeWindowMs: 3600000 }), // Executes second (only if rate limit wasn't exceeded) loggingMiddleware(), // Executes third (after generation completes) uploadMiddleware(async (output) => { /* ... */ }) ] ``` ## 7. Controlling Features with Feature API You can control which AI features are available to users using CE.SDK's Feature API: ```typescript highlight=highlight-feature-control // Control AI features with Feature API // Disable specific quick actions cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.quickAction.editImage', false ); cesdk.feature.enable( 'ly.img.plugin-ai-text-generation-web.quickAction.translate', false ); // Control input types for image/video generation cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromText', true ); cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fromImage', false ); // Hide provider selection dropdowns cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.providerSelect', false ); // Control style groups for specific providers cesdk.feature.enable( 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false ); ``` This is useful for: - Creating different feature tiers for different user groups - Simplifying the UI by hiding unused features - Temporarily disabling features during maintenance For more details on available feature flags, see the [@imgly/plugin-ai-generation-web documentation](https://github.com/imgly/plugins/tree/release-$UBQ_VERSION$/packages/plugin-ai-generation-web#available-feature-flags). ## 8. Proxy Server Configuration For security reasons, you should never include your AI service API keys directly in client-side code. Instead, you should set up proxy services that securely forward requests to AI providers while keeping your API keys secure on the server side. Each AI provider configuration requires a `proxyUrl` parameter, which should point to your server-side endpoint that handles authentication and forwards requests to the AI service: ```typescript text2image: FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy' }); ``` Your proxy server should handle authentication, forward requests to the appropriate AI service providers, and manage response streaming for optimal performance. ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `cesdk.addPlugin()` | Plugin | Register and initialize the AI Apps plugin with CE.SDK | | `AiApps()` | Plugin | Create unified plugin instance with all AI provider types | | `Anthropic.AnthropicProvider()` | Text | Configure Claude for text generation and transformation | | `FalAiImage.RecraftV3()` | Image | Configure RecraftV3 text-to-image with vector/raster support | | `FalAiImage.Recraft20b()` | Image | Configure Recraft20b text-to-image with icon styles | | `FalAiImage.GeminiFlashEdit()` | Image | Configure Gemini Flash for image-to-image transformation | | `OpenAiImage.GptImage1.Text2Image()` | Image | Configure GPT Image for text-to-image generation | | `FalAiVideo.MinimaxVideo01Live()` | Video | Configure Minimax Video for text-to-video generation | | `FalAiVideo.MinimaxVideo01LiveImageToVideo()` | Video | Configure Minimax Video for image-to-video transformation | | `FalAiVideo.PixverseV35TextToVideo()` | Video | Configure Pixverse for text-to-video generation | | `Elevenlabs.ElevenMultilingualV2()` | Audio | Configure ElevenLabs for multilingual text-to-speech | | `Elevenlabs.ElevenSoundEffects()` | Audio | Configure ElevenLabs for sound effect generation | | `uploadMiddleware()` | Middleware | Process and store generated outputs before use | | `rateLimitMiddleware()` | Middleware | Limit generation requests per time window | | `cesdk.feature.enable()` | Feature | Control visibility of AI features and providers | | `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` | UI | Position AI Apps button in the dock | | `cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` | UI | Add AI options to canvas context menu | | `engine.asset.findAssets()` | Asset | Query generated assets from provider history sources | ## Next Steps - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication for production - [Text Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/text-generation-3e8302/) — Deep dive into text generation and transformation - [Image Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/) — Advanced image generation configuration - [Video Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/video-generation-b3122d/) — Video generation with multiple providers - [Audio Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/audio-generation-2d502a/) — Text-to-speech and sound effects - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Work with generated assets --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Proxy Server" description: "Route AI requests through a secure proxy server to meet privacy or infrastructure needs." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) --- For security reasons, you should never include your AI service API keys directly in client-side code. Instead, you should set up proxy services that securely forward requests to AI providers while keeping your API keys secure on the server side. Each AI provider configuration requires a `proxyUrl` parameter, which should point to your server-side endpoint that handles authentication and forwards requests to the AI service: ```typescript text2image: FalAiImage.RecraftV3({ proxyUrl: 'http://your-proxy-server.com/api/proxy' }); // Or use Recraft20b with icon style support: // text2image: FalAiImage.Recraft20b({ // proxyUrl: 'http://your-proxy-server.com/api/proxy' // }); ``` ## Proxy Implementation Requirements Your proxy should implement specific requirements for each AI service: ### 1. Anthropic Proxy - **Target URL**: `https://api.anthropic.com/` - **Authentication Header**: Add `X-Api-Key` header with your Anthropic API key - **Request Handling**: Forward request body as-is to Anthropic API - **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly ### 2. fal.ai Proxy - **Dynamic URL**: Use a special header called `x-fal-target-url` to determine the actual endpoint - **Authentication Header**: Add `Authorization: Key YOUR_FAL_KEY` header - **Request Forwarding**: Preserve the complete request body and query parameters - For more information on the requirements, refer to fal.ai's [documentation](https://docs.fal.ai/model-endpoints/server-side/#the-proxy-formula). ### 3. ElevenLabs Proxy - **Target URL**: `https://api.elevenlabs.io/` - **Authentication Header**: Add `xi-api-key` header with your ElevenLabs API key - **Headers**: Add an `Accept: audio/mpeg` header for audio requests. - **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly ### 4. OpenAI Proxy - **Target URL**: `https://api.openai.com/v1/` - **Authentication Header**: Add `Authorization: Bearer YOUR_OPENAI_API_KEY` header - **Response Handling**: Remove `content-encoding` headers to handle compressed responses correctly - **Rate Limiting**: Implement rate limiting based on your OpenAI plan tier (recommended) - For more information on the requirements, refer to OpenAI's [documentation](https://platform.openai.com/docs/api-reference/debugging-requests) ## Important Information for All Proxies **Response Streaming** To handle large responses efficiently, response streaming should be enabled for all proxies. Common approaches include: - **Axios**: `responseType: 'stream'` - **Fetch API**: Access `response.body` as a `ReadableStream` - **Node.js native HTTP clients**: Use stream-based responses - **Other HTTP clients**: Check documentation for streaming support ## General Proxy Design A well-designed proxy service should: 1. **Route requests** to the appropriate AI service based on the endpoint path 2. **Add authentication** headers containing your API keys 3. **Forward the request body** to maintain payload integrity 4. **Handle response streaming** for services that support it (like Anthropic) 5. **Implement proper CORS headers** to allow browser requests 6. **Add appropriate error handling** and logging 7. **Consider rate limiting** to protect your API keys from overuse ## Security Considerations When implementing your proxy: - Store API keys securely as environment variables - Implement request validation to prevent abuse - Consider adding user authentication to your proxy endpoints - Monitor usage to detect unusual patterns - Implement proper error handling without leaking sensitive information This approach ensures your API keys remain secure while still allowing your application to utilize AI services. For a complete example of a proxy implementation, you can find various proxy templates online that can be adapted for your specific needs. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "AI Text Generation" description: "Generate creative content for headlines, descriptions, captions, and marketing copy using Claude or GPT with both a built-in UI and programmatic control." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/text-generation-3e8302/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Text Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/text-generation-3e8302/) --- We add AI-powered text generation to CE.SDK applications for creating headlines, descriptions, captions, and marketing content.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-text-generation-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-text-generation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-text-generation-browser/) The text generation plugin provides quick actions for improving writing, fixing spelling and grammar, shortening or lengthening text, changing tone, and translating to different languages. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-text-generation-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; import AiApps from '@imgly/plugin-ai-apps-web'; import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic'; import OpenAI from '@imgly/plugin-ai-text-generation-web/open-ai'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new DesignEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin(new UploadAssetSources({ include: ['ly.img.image.upload'] })); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.blank.*', 'ly.img.templates.presentation.*', 'ly.img.templates.print.*', 'ly.img.templates.social.*', 'ly.img.image.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin(new PagePresetsAssetSource()); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); const engine = cesdk.engine; const page = engine.block.findByType('page')[0]!; // Create a text block to demonstrate AI text generation features const textBlock = engine.block.create('text'); engine.block.setString( textBlock, 'text/text', 'Use the AI Quick Actions in the canvas menu to rewrite this text' ); engine.block.select(textBlock); // Set text block size and center it on the page const pageWidth = engine.block.getWidth(page); const pageHeight = engine.block.getHeight(page); const blockHeight = pageHeight / 4; engine.block.setWidth(textBlock, pageWidth); engine.block.setHeight(textBlock, blockHeight); engine.block.setPositionX(textBlock, 0); engine.block.setPositionY(textBlock, (pageHeight - blockHeight) / 2); // Center text horizontally and vertically engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center'); engine.block.setEnum(textBlock, 'text/verticalAlignment', 'Center'); // Set larger font size engine.block.setFloat(textBlock, 'text/fontSize', 24); engine.block.appendChild(page, textBlock); // Configure the AI text generation plugin // NOTE: In production, provide a secure proxy URL that forwards // requests to Anthropic API with your API key const proxyUrl = 'https://your-proxy-server.com/api/anthropic'; // Configure text generation with both Anthropic and OpenAI using AiApps await cesdk.addPlugin( AiApps({ providers: { text2text: [ Anthropic.AnthropicProvider({ proxyUrl, model: 'claude-sonnet-4-5-20250929', properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 } } }) as any, OpenAI.OpenAIProvider({ proxyUrl: 'https://your-proxy-server.com/api/openai', model: 'gpt-4.1-nano-2025-04-14', properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 } } }) as any ] }, // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development dryRun: true }) ); // Reorder dock to show AI Apps button prominently cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Configure canvas menu to show AI text quick actions cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ 'ly.img.ai.text.canvasMenu', ...cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.menu' }) ]); // Customize UI labels for AI text generation features // This demonstrates how to customize the i18n system cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-text-generation-web.anthropic.quickAction.improve': '✨ Enhance Text', 'ly.img.plugin-ai-text-generation-web.anthropic.property.prompt': 'Your Custom Instructions' } }); // Alternative: Configure with single provider /* await cesdk.addPlugin( AiApps({ providers: { text2text: [ Anthropic.AnthropicProvider({ proxyUrl, model: 'claude-sonnet-4-5-20250929', properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 } } }) as any ] }, dryRun: true }) ); */ // Open the AI Apps panel to make the text generation features visible cesdk.ui.openPanel('ly.img.ai.apps.panel'); } } export default Example; ``` This guide covers installing the plugin, configuring AI providers, setting up quick actions, customizing parameters, and testing with dry-run mode. ## Installation Import the plugin and provider modules from the text generation package. ```typescript highlight-install import AiApps from '@imgly/plugin-ai-apps-web'; import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic'; import OpenAI from '@imgly/plugin-ai-text-generation-web/open-ai'; ``` Install `@imgly/plugin-ai-text-generation-web` to access the TextGeneration plugin, Anthropic provider, and OpenAI provider modules: ```bash npm install @imgly/plugin-ai-text-generation-web ``` ```bash yarn add @imgly/plugin-ai-text-generation-web ``` ```bash pnpm add @imgly/plugin-ai-text-generation-web ``` ## Configuration Configure the plugin with an Anthropic or OpenAI provider. The provider requires a proxy URL that forwards requests to the AI service with your API key. For available models, see the provider documentation: - [Claude Models](https://docs.anthropic.com/en/docs/about-claude/models/overview) - [OpenAI Models](https://platform.openai.com/docs/models) ```typescript highlight-basic-config await cesdk.addPlugin( AiApps({ providers: { text2text: [ Anthropic.AnthropicProvider({ proxyUrl, model: 'claude-sonnet-4-5-20250929', properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 } } }) as any ] }, dryRun: true }) ); ``` We configure the Anthropic provider with Claude Sonnet 4.5, set generation parameters like temperature and max tokens, and enable dry-run mode for testing without API calls. ## Canvas Menu Setup Add the text generation quick actions to the canvas menu so users can access them when editing text blocks. ```typescript highlight-canvas-menu // Configure canvas menu to show AI text quick actions cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [ 'ly.img.ai.text.canvasMenu', ...cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.menu' }) ]); ``` We prepend `ly.img.ai.text.canvasMenu` to the existing canvas menu order, making text quick actions appear first when users select text blocks. ## Proxy Server A proxy server protects your API keys by forwarding requests server-side. See the [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) guide for implementation details and examples. ## Generation Parameters Customize generation behavior with properties configuration. Control creativity level with temperature (0.0-1.0 for Claude, 0.0-2.0 for GPT) and response length with max\_tokens. ```typescript TextGeneration({ provider: Anthropic.AnthropicProvider({ proxyUrl: 'https://your-proxy.com/api/anthropic', properties: { temperature: { default: 0.7 }, max_tokens: { default: 500 }, }, }), }) ``` Higher temperature values produce more creative output, while lower values generate more focused and deterministic text. ## Quick Actions Quick actions provide preset text transformations accessible from the canvas menu. Users can improve writing quality, fix spelling and grammar, make text shorter or longer, change tone (professional, casual, friendly), and translate to various languages. The plugin includes these quick actions by default: - **Improve** - Enhance clarity and flow - **Fix** - Correct spelling and grammar - **Shorter** - Reduce text length - **Longer** - Expand text content - **Tone** - Change style (professional, casual, friendly, empathetic, confident) - **Translate** - Convert to different languages ## Multiple Providers Configure multiple providers to give users choice between different AI models. ```typescript TextGeneration({ provider: [ Anthropic.AnthropicProvider({ model: 'claude-3-7-sonnet-20250219', proxyUrl: 'https://your-proxy.com/api/anthropic', }), OpenAIText.OpenAIProvider({ model: 'gpt-4o-mini', proxyUrl: 'https://your-proxy.com/api/openai', }), ], }) ``` Multiple providers trigger automatic provider selection in the UI. ## Feature Visibility Control which features appear in the UI using the Feature API. ```typescript // Disable provider selection cesdk.feature.enable('ly.img.plugin-ai-text-generation-web.providerSelect', false); // Disable all quick actions cesdk.feature.enable('ly.img.plugin-ai-text-generation-web.quickAction', false); // Disable specific quick actions cesdk.feature.enable('ly.img.plugin-ai-text-generation-web.quickAction.translate', false); ``` This restricts user choices when you want to enforce specific models or limit available transformations. ## Custom Labels Customize UI text using the i18n system. Replace default labels with custom text or add translations for multiple languages. ```typescript highlight-custom-labels // Customize UI labels for AI text generation features // This demonstrates how to customize the i18n system cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-text-generation-web.anthropic.quickAction.improve': '✨ Enhance Text', 'ly.img.plugin-ai-text-generation-web.anthropic.property.prompt': 'Your Custom Instructions' } }); ``` The example demonstrates customizing the "Improve" quick action label and the prompt input placeholder. Use provider-specific keys for Anthropic or OpenAI, or generic keys to apply across all providers. You can also add translations for multiple languages by including additional language codes like `es`, `de`, or `fr`. ## Middleware Intercept generation requests and responses with middleware functions. Use middleware for logging, rate limiting, or custom error handling. ```typescript import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web'; const logging = loggingMiddleware(); const rateLimit = rateLimitMiddleware({ maxRequests: 10, windowMs: 60000 }); await cesdk.addPlugin( TextGeneration({ provider: Anthropic.AnthropicProvider({ proxyUrl: '...' }), middleware: [logging, rateLimit], }) ); ``` Middleware receives input, options, and a next callback. Call next to continue the chain or return early to intercept. ## Dry-Run Mode Test the plugin without making actual API calls using dry-run mode. This simulates generation and returns placeholder text. ```typescript await cesdk.addPlugin( TextGeneration({ provider: Anthropic.AnthropicProvider({ proxyUrl: 'https://your-proxy.com/api/anthropic' }) as any, dryRun: true // Simulate generation without API calls } as any) ); ``` Dry-run mode helps during development and testing by avoiding API costs while verifying integration. ## Accessing Generated Text Generated text appears automatically in text blocks. Access it using the Block API for further manipulation or retrieval. ```typescript const textBlocks = engine.block.findByType('text'); textBlocks.forEach(block => { const content = engine.block.getString(block, 'text/text'); console.log('Text content:', content); }); // Modify text programmatically engine.block.setString(textBlock, 'text/text', 'New content'); ``` The Block API provides full control over text content after generation. ## Troubleshooting Common issues when configuring the plugin: **Plugin not appearing in UI** - Verify plugin installation and `addPlugin()` call completed successfully. **Quick actions not showing** - Check canvas menu order includes `ly.img.ai.text.canvasMenu`. **Proxy errors** - Verify proxy URL is accessible and CORS is configured correctly. **Generation failures** - Confirm API key is valid and proxy forwards requests properly. **Provider selection not showing** - Multiple providers must be configured in an array. **Custom translations not applying** - Check translation key format matches the i18n documentation. **Middleware not executing** - Verify middleware array is passed correctly to the plugin configuration. **Generated text not appearing** - Ensure text blocks are selected and quick actions are triggered. **Wrong model being used** - Verify the model parameter in provider configuration matches your intent. ## API Reference | Method | Category | Purpose | | --- | --- | --- | | `cesdk.addPlugin()` | Plugin | Register and initialize the Text Generation plugin | | `TextGeneration()` | Plugin | Create plugin instance with provider configuration | | `Anthropic.AnthropicProvider()` | Provider | Configure Claude text generation | | `OpenAIText.OpenAIProvider()` | Provider | Configure GPT text generation | | `cesdk.feature.enable()` | Feature | Control visibility of plugin features | | `cesdk.i18n.setTranslations()` | I18n | Customize UI labels and translations | | `cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` | UI | Configure canvas menu order for quick actions | | `engine.block.getString()` | Block | Access generated text content | | `engine.block.setString()` | Block | Modify text block content | ## Next Steps - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Integrate AI Features](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) — Overview of AI integration - [Audio Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/audio-generation-2d502a/) — AI-powered audio generation - [Image Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/image-generation-0540d9/) — AI-powered image generation --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "AI Video Generation" description: "Create dynamic videos from text descriptions or animate static images using leading AI providers like fal.ai with Minimax Video, Pixverse, Kling Video, and ByteDance Seedance models." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/video-generation-b3122d/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [AI Integration](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration-5aa356/) > [Video Generation](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/video-generation-b3122d/) --- We add AI-powered video generation to CE.SDK applications for creating dynamic videos from text or animating static images.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-video-generation-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-ai-integration-video-generation-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-video-generation-browser/) The video generation plugin creates videos from text descriptions (text-to-video) or animates static images (image-to-video). Use models like Minimax Video, Pixverse, Kling Video, and ByteDance Seedance. ```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-video-generation-browser/browser.ts reference-only import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js'; import { BlurAssetSource, CaptionPresetsAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource, DemoAssetSources, EffectsAssetSource, FiltersAssetSource, PagePresetsAssetSource, StickerAssetSource, TextAssetSource, TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources, VectorShapeAssetSource } from '@cesdk/cesdk-js/plugins'; import { VideoEditorConfig } from './video-editor/plugin'; import AiApps from '@imgly/plugin-ai-apps-web'; import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai'; import packageJson from './package.json'; class Example implements EditorPlugin { name = packageJson.name; version = packageJson.version; async initialize({ cesdk }: EditorPluginContext): Promise { if (!cesdk) { throw new Error('CE.SDK instance is required for this plugin'); } await cesdk.addPlugin(new VideoEditorConfig()); // Add asset source plugins await cesdk.addPlugin(new BlurAssetSource()); await cesdk.addPlugin(new CaptionPresetsAssetSource()); await cesdk.addPlugin(new ColorPaletteAssetSource()); await cesdk.addPlugin(new CropPresetsAssetSource()); await cesdk.addPlugin( new UploadAssetSources({ include: ['ly.img.image.upload', 'ly.img.video.upload', 'ly.img.audio.upload'] }) ); await cesdk.addPlugin( new DemoAssetSources({ include: [ 'ly.img.templates.video.*', 'ly.img.image.*', 'ly.img.audio.*', 'ly.img.video.*' ] }) ); await cesdk.addPlugin(new EffectsAssetSource()); await cesdk.addPlugin(new FiltersAssetSource()); await cesdk.addPlugin( new PagePresetsAssetSource({ include: [ 'ly.img.page.presets.instagram.*', 'ly.img.page.presets.facebook.*', 'ly.img.page.presets.x.*', 'ly.img.page.presets.linkedin.*', 'ly.img.page.presets.pinterest.*', 'ly.img.page.presets.tiktok.*', 'ly.img.page.presets.youtube.*', 'ly.img.page.presets.video.*' ] }) ); await cesdk.addPlugin(new StickerAssetSource()); await cesdk.addPlugin(new TextAssetSource()); await cesdk.addPlugin(new TextComponentAssetSource()); await cesdk.addPlugin(new TypefaceAssetSource()); await cesdk.addPlugin(new VectorShapeAssetSource()); await cesdk.actions.run('scene.create', { layout: 'DepthStack', page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.instagram.story' } }); // Configure the AI video generation plugin // NOTE: In production, provide a secure proxy URL that forwards // requests to fal.ai API with your API key const proxyUrl = 'https://your-proxy-server.com/api/fal-ai'; // Configure video generation with all available providers using AiApps await cesdk.addPlugin( AiApps({ providers: { text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl }), FalAiVideo.ByteDanceSeedanceV1ProTextToVideo({ proxyUrl }), FalAiVideo.KlingVideoV21MasterTextToVideo({ proxyUrl }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl }), FalAiVideo.Veo31FastTextToVideo({ proxyUrl }), FalAiVideo.Veo31TextToVideo({ proxyUrl }), FalAiVideo.Veo3TextToVideo({ proxyUrl }) ] as any, image2video: [ FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl }), FalAiVideo.ByteDanceSeedanceV1ProImageToVideo({ proxyUrl }), FalAiVideo.KlingVideoV21MasterImageToVideo({ proxyUrl }), FalAiVideo.MinimaxHailuo02StandardImageToVideo({ proxyUrl }), FalAiVideo.Veo31FastImageToVideo({ proxyUrl }), FalAiVideo.Veo31ImageToVideo({ proxyUrl }), FalAiVideo.Veo31FastFirstLastFrameToVideo({ proxyUrl }), FalAiVideo.Veo31FirstLastFrameToVideo({ proxyUrl }) ] as any }, // IMPORTANT: dryRun mode simulates generation without API calls // Perfect for testing and development dryRun: true }) ); // Reorder dock to show AI Apps button prominently cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [ 'ly.img.ai.apps.dock', ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' }) ]); // Customize UI labels for AI video generation features // This demonstrates how to customize the i18n system cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt': '🎬 Describe Your Video' } }); // Alternative: Configure with single video generation provider /* await cesdk.addPlugin( VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl, properties: { prompt_optimizer: { default: true } } } as any), image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl } as any), dryRun: true } as any) ); */ // Open the AI Apps panel to make the video generation features visible cesdk.ui.openPanel('ly.img.ai.apps'); } } export default Example; ``` This guide covers installing the plugin, configuring AI providers, setting up text-to-video and image-to-video, customizing parameters, and testing with dry-run mode. ## Installation Import the plugin and provider modules from the video generation package. ```typescript highlight-install import AiApps from '@imgly/plugin-ai-apps-web'; import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai'; ``` Install `@imgly/plugin-ai-video-generation-web` to access the VideoGeneration plugin and fal.ai provider modules: ```bash npm install @imgly/plugin-ai-video-generation-web ``` ```bash yarn add @imgly/plugin-ai-video-generation-web ``` ```bash pnpm add @imgly/plugin-ai-video-generation-web ``` ## Configuration Configure the plugin with fal.ai video providers. The provider requires a proxy URL that forwards requests to fal.ai with your API key. For available models, see the [fal.ai Models](https://fal.ai/models) documentation. ```typescript highlight-basic-config await cesdk.addPlugin( VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl, properties: { prompt_optimizer: { default: true } } } as any), image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl } as any), dryRun: true } as any) ); ``` We configure MinimaxVideo01Live for text-to-video and MinimaxVideo01LiveImageToVideo for image-to-video, enable prompt optimization, and set dry-run mode for testing without API calls. ## Proxy Server A proxy server protects your API keys by forwarding requests server-side. See the [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) guide for implementation details and examples. ## Text-to-Video Generation Generate videos from text descriptions using models like MinimaxVideo01Live, PixverseV35, or KlingVideoV21Master. Each model offers different video styles and capabilities. ```typescript VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-proxy.com/api/fal-ai', properties: { prompt_optimizer: { default: true }, }, }), }); ``` The prompt optimizer enhances text descriptions for better video results. ## Image-to-Video Generation Animate static images by configuring image-to-video providers. Choose from MinimaxVideo01Live, MinimaxHailuo02Standard, KlingVideoV21Master, or ByteDance Seedance models. ```typescript VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl: '...' }), image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: '...' }), }); ``` Users can upload images and the AI generates animated video sequences. ## Generation Parameters Customize video generation behavior with properties configuration. Control aspect ratio (16:9, 9:16, 1:1), duration (5s, 10s), and resolution (512P, 768P). ```typescript FalAiVideo.KlingVideoV21MasterTextToVideo({ proxyUrl: 'https://your-proxy.com/api/fal-ai', properties: { aspect_ratio: { default: '16:9' }, duration: { default: '5s' }, }, }); ``` Different models support different parameter combinations. Check model documentation for available options. ## Multiple Providers Configure multiple providers to give users choice between different AI models and capabilities. ```typescript VideoGeneration({ text2video: [ FalAiVideo.MinimaxVideo01Live({ proxyUrl: '...' }), FalAiVideo.PixverseV35TextToVideo({ proxyUrl: '...' }), FalAiVideo.KlingVideoV21MasterTextToVideo({ proxyUrl: '...' }), FalAiVideo.ByteDanceSeedanceV1ProTextToVideo({ proxyUrl: '...' }), FalAiVideo.Veo3TextToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31TextToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31FastTextToVideo({ proxyUrl: '...' }), ], image2video: [ FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl: '...' }), FalAiVideo.MinimaxHailuo02StandardImageToVideo({ proxyUrl: '...' }), FalAiVideo.KlingVideoV21MasterImageToVideo({ proxyUrl: '...' }), FalAiVideo.ByteDanceSeedanceV1ProImageToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31ImageToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31FastImageToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31FirstLastFrameToVideo({ proxyUrl: '...' }), FalAiVideo.Veo31FastFirstLastFrameToVideo({ proxyUrl: '...' }), ], }); ``` Multiple providers trigger automatic provider and model selection in the UI. ## Feature Visibility Control which features appear in the UI using the Feature API. ```typescript // Disable provider selection cesdk.feature.enable( 'ly.img.plugin-ai-video-generation-web.providerSelect', false, ); // Disable model selection cesdk.feature.enable( 'ly.img.plugin-ai-video-generation-web.modelSelect', false, ); ``` This restricts user choices when you want to enforce specific models. ## Custom Labels Customize UI text using the i18n system. Replace default labels with custom text or add translations for multiple languages. ```typescript highlight-custom-labels // Customize UI labels for AI video generation features // This demonstrates how to customize the i18n system cesdk.i18n.setTranslations({ en: { 'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt': '🎬 Describe Your Video' } }); ``` The example demonstrates customizing the prompt input placeholder for the Minimax video generation model. Use provider-specific keys for individual models or generic keys to apply across all providers. You can also add translations for multiple languages by including additional language codes like `es`, `de`, or `fr`. ## Middleware Intercept generation requests and responses with middleware functions. Use middleware for logging, rate limiting, or custom error handling. ```typescript import { loggingMiddleware, rateLimitMiddleware, } from '@imgly/plugin-ai-generation-web'; const logging = loggingMiddleware(); const rateLimit = rateLimitMiddleware({ maxRequests: 5, windowMs: 60000 }); await cesdk.addPlugin( VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl: '...' }), middleware: [logging, rateLimit], }), ); ``` Video generation typically takes longer than image generation, so adjust rate limits accordingly. ## Dry-Run Mode Test the plugin without making actual API calls using dry-run mode. This simulates generation and returns placeholder videos. ```typescript await cesdk.addPlugin( VideoGeneration({ text2video: FalAiVideo.MinimaxVideo01Live({ proxyUrl: 'https://your-proxy.com/api/fal-ai', }) as any, dryRun: true, // Simulate generation without API calls } as any), ); ``` Dry-run mode helps during development and testing by avoiding API costs while verifying integration. ## Accessing Generated Videos Generated videos appear in provider-specific history sources. Access them through the asset library or programmatically. ```typescript // Access video history sources const videoHistorySources = [ 'fal-ai/minimax/video-01-live.history', 'fal-ai/kling-video/v2.1/master/text-to-video.history', 'fal-ai/pixverse/v3.5/text-to-video.history', ]; // Query video assets const videos = engine.asset.findAssets('video'); ``` Video generation history integrates with the asset library for easy access. ## Troubleshooting Common issues when configuring the plugin: **Plugin not appearing in UI** - Verify plugin installation and `addPlugin()` call completed successfully. **Proxy errors** - Verify proxy URL is accessible and CORS is configured correctly. **Generation failures** - Confirm fal.ai API key is valid and proxy forwards requests properly. **Generation timeouts** - Video generation takes significantly longer than images. Adjust timeout settings (typically 60-180 seconds). **Provider/model selection not showing** - Multiple providers must be configured in an array. **Custom translations not applying** - Check translation key format matches the i18n documentation. **Middleware not executing** - Verify middleware array is passed correctly to the plugin configuration. **Videos not appearing in asset library** - Check asset library configuration includes video history sources. **Poor quality or jerky motion** - Adjust duration and resolution parameters. Longer durations may improve smoothness. **Image-to-video not working** - Verify input image meets size requirements (typically 512×512 to 1920×1080) and format (JPG, PNG). ## API Reference | Method | Category | Purpose | | -------------------------------------------------- | -------- | ------------------------------------------------------- | | `cesdk.addPlugin()` | Plugin | Register and initialize the Video Generation plugin | | `VideoGeneration()` | Plugin | Create plugin instance with provider configuration | | `FalAiVideo.MinimaxVideo01Live()` | Provider | Configure Minimax Video text-to-video | | `FalAiVideo.MinimaxVideo01LiveImageToVideo()` | Provider | Configure Minimax Video image-to-video | | `FalAiVideo.MinimaxHailuo02StandardImageToVideo()` | Provider | Configure Minimax Hailuo image-to-video | | `FalAiVideo.PixverseV35TextToVideo()` | Provider | Configure Pixverse text-to-video | | `FalAiVideo.KlingVideoV21MasterTextToVideo()` | Provider | Configure Kling Video text-to-video | | `FalAiVideo.KlingVideoV21MasterImageToVideo()` | Provider | Configure Kling Video image-to-video | | `FalAiVideo.ByteDanceSeedanceV1ProTextToVideo()` | Provider | Configure ByteDance Seedance text-to-video | | `FalAiVideo.ByteDanceSeedanceV1ProImageToVideo()` | Provider | Configure ByteDance Seedance image-to-video | | `FalAiVideo.Veo3TextToVideo()` | Provider | Configure Google Veo 3 text-to-video | | `FalAiVideo.Veo31TextToVideo()` | Provider | Configure Google Veo 3.1 text-to-video | | `FalAiVideo.Veo31FastTextToVideo()` | Provider | Configure Google Veo 3.1 Fast text-to-video | | `FalAiVideo.Veo31ImageToVideo()` | Provider | Configure Google Veo 3.1 image-to-video | | `FalAiVideo.Veo31FastImageToVideo()` | Provider | Configure Google Veo 3.1 Fast image-to-video | | `FalAiVideo.Veo31FirstLastFrameToVideo()` | Provider | Configure Google Veo 3.1 first/last frame to video | | `FalAiVideo.Veo31FastFirstLastFrameToVideo()` | Provider | Configure Google Veo 3.1 Fast first/last frame to video | | `cesdk.feature.enable()` | Feature | Control visibility of plugin features | | `cesdk.i18n.setTranslations()` | I18n | Customize UI labels and translations | | `engine.asset` | Asset | Access and manage generated video assets | ## Next Steps - [Proxy Server](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/proxy-server-61f901/) — Set up secure API communication - [Custom Provider](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/custom-provider-16e851/) — Create custom AI providers - [Integrate AI Features](https://img.ly/docs/cesdk/sveltekit/user-interface/ai-integration/integrate-8e906c/) — Overview of AI integration - [Asset Library Basics](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/basics-f29078/) — Work with generated assets - [Customize Asset Library](https://img.ly/docs/cesdk/sveltekit/import-media/asset-panel/customize-c9a4de/) — Configure asset sources --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Appearance" description: "Customize the visual style of the editor UI, including themes, fonts, labels, and icons." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/appearance-b155eb/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) > [Appearance](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance-b155eb/) --- --- ## Related Pages - [Theming](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/theming-4b0938/) - Customize the editor's visual theme to match your brand using flexible theming options. - [Change UI Font](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/change-ui-font-49b6fc/) - Set a custom font for the editor's UI to ensure visual consistency across your application. - [Custom Labels](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/custom-labels-7794f7/) - Override default UI text labels in CreativeEditor SDK to match your brand voice, product terminology, or specific use case requirements. - [Icons](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/icons-679e32/) - Replace or customize the editor’s icons to align with your brand or application design. --- ## More Resources - **[SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md)** - Browse all SvelteKit documentation - **[Complete Documentation](https://img.ly/docs/cesdk/sveltekit/llms-full.txt)** - Full documentation in one file (for LLMs) - **[Web Documentation](https://img.ly/docs/cesdk/sveltekit/)** - Interactive documentation with examples - **[Support](mailto:support@img.ly)** - Contact IMG.LY support --- --- title: "Change UI Font" description: "Set a custom font for the editor's UI to ensure visual consistency across your application." platform: sveltekit url: "https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/change-ui-font-49b6fc/" --- > This is one page of the CE.SDK SvelteKit documentation. For a complete overview, see the [SvelteKit Documentation Index](https://img.ly/docs/cesdk/sveltekit.md). For all docs in one file, see [llms-full.txt](https://img.ly/docs/cesdk/sveltekit/llms-full.txt). **Navigation:** [Guides](https://img.ly/docs/cesdk/sveltekit/guides-8d8b00/) > [User Interface](https://img.ly/docs/cesdk/sveltekit/user-interface-5a089a/) > [Appearance](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance-b155eb/) > [Change UI Font](https://img.ly/docs/cesdk/sveltekit/user-interface/appearance/change-ui-font-49b6fc/) --- Customize the font family used throughout the CE.SDK editor interface to match your application's branding.  > **Reading time:** 10 minutes > > **Resources:** > > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip) > > - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-appearance-change-ui-font-browser) > > - [Open in StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-user-interface-appearance-change-ui-font-browser) > > - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-appearance-change-ui-font-browser/) CE.SDK's UI uses CSS custom properties for typography, allowing you to apply a custom font to all editor elements—panels, buttons, labels, and inputs—through a single CSS variable. ```typescript file=@cesdk_web_examples/guides-user-interface-appearance-change-ui-font-browser/browser.ts reference-only import type CreativeEditorSDK from '@cesdk/cesdk-js'; import { PagePresetsAssetSource } from '@cesdk/cesdk-js/plugins'; import { DesignEditorConfig } from './design-editor/plugin'; export async function initialize(cesdk: CreativeEditorSDK) { await cesdk.addPlugin(new DesignEditorConfig()); await cesdk.addPlugin(new PagePresetsAssetSource()); // Create a design scene to showcase the UI font customization await cesdk.actions.run('scene.create', { page: { sourceId: 'ly.img.page.presets', assetId: 'ly.img.page.presets.print.iso.a6.landscape' } }); // Add a text block to demonstrate the design canvas const page = cesdk.engine.block.findByType('page')[0]; const text = cesdk.engine.block.create('text'); cesdk.engine.block.setString(text, 'text/text', 'Monospace UI Font'); cesdk.engine.block.setWidth(text, 400); cesdk.engine.block.setPositionX( text, cesdk.engine.block.getWidth(page) / 2 - 200 ); cesdk.engine.block.setPositionY( text, cesdk.engine.block.getHeight(page) / 2 - 50 ); cesdk.engine.block.appendChild(page, text); // You can verify the current theme and scale settings const currentTheme = cesdk.ui.getTheme(); // 'light' or 'dark' const currentScale = cesdk.ui.getScale(); // 'normal', 'large', or 'modern' console.log('Current theme:', currentTheme); console.log('Current scale:', currentScale); // Optional: Change theme to see font in different contexts // Uncomment to test: // cesdk.ui.setTheme('dark'); // cesdk.ui.setScale('large'); // Zoom to fit the page await cesdk.engine.scene.zoomToBlock(page); } ``` This guide covers loading custom fonts from various sources, setting the CSS variable, verifying the application, and troubleshooting common issues. ## Understanding the UI Theming System CE.SDK's typography uses CSS custom properties scoped to `.ubq-public` with theme and scale attributes. The `--ubq-typography-font_family` variable controls all UI elements, providing centralized font customization. All UI text inherits from this single variable. When you set `--ubq-typography-font_family`, panels, buttons, dropdowns, inputs, and labels all update to use your chosen font. ## Loading Custom Fonts Before setting the CSS variable, fonts must be available in the browser. You can use system fonts, self-host font files, load from Google Fonts, or use other providers. ### Using Self-Hosted Fonts Define `@font-face` rules in your CSS with woff2 format for modern browsers and woff fallback: ```css @font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont-Regular.woff2') format('woff2'), url('/fonts/CustomFont-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont-SemiBold.woff2') format('woff2'), url('/fonts/CustomFont-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; } ``` CE.SDK uses font weights 450 and 600 throughout the interface. Load these weights or the closest alternatives (400 and 600 work well). ### Using Google Fonts Add `` tags to your HTML `` to load fonts from Google Fonts CDN. Place these before CE.SDK initialization to prevent flash of unstyled text. ```html ``` The `preconnect` links establish early connections to Google's servers, reducing latency. The main font link loads Roboto with multiple weights. The `display=swap` parameter shows fallback text immediately while the custom font loads. ### Using Adobe Fonts or Other Providers Load fonts according to the provider's documentation, typically via `` or `