IMG.LY: Blog

CE.SDK v1.76 Release Notes

Neslihan — Fri, 05 Jun 2026 15:17:25 GMT

With this release, the mobile video timeline gets a meaningful upgrade, background removal comes to Android, and a set of engine improvements tighten text, shape, and font-size handling across platforms.

Let’s jump in!

Edit Multi-Clip Timelines on iOS and Android

The mobile video timeline now supports multiple clips per foreground track. Long-press any clip to drag it within a track, across tracks, or into a gap to create a new track. Split, trim, and move are all gap-aware and respect locked clips.

For your product, this means: users can manage their video edit the way they’d expect — organizing clips in a single track instead of working around single-clip limitations.

→ Video Editor Starter Kit – iOS
→ Video Timeline Docs – iOS

→ Video Editor Starter Kit – Android
→ Video Timeline Docs – Android

Remove Backgrounds on Android

The Background Removal plugin is now available for Android. Users can remove backgrounds from images directly in the editor, without leaving the app or sending images to an external server.

For your product, this means: Android users get the same background removal capability that was already available on web, closing a gap for teams building cross-platform photo editing experiences. Users stay in your app for design tasks.

→ Android Background Removal Docs

New Plugin: Turn PDFs into Editable Designs

A new plugin and demo lets you import PDF documents directly into CE.SDK and turn them into fully editable designs.

With that, users can bring existing PDF assets into your editor without rebuilding them from scratch, opening up workflows around template reuse, document personalization, and print editing.

→ Try the Demo

Improvements

Set Font Sizes in Pixels or Points
v1.76 adds per-scene font-size unit control. Choose pixels or points for a scene, and CE.SDK font-size APIs and editor UI follow that unit across all platforms.

Set Different Line Spacing Per Paragraph
Each paragraph in a text block can now have its own line spacing, instead of every paragraph sharing the same setting.

Add Precise Strokes to Texts

Style text outlines down to the last detail! The same controls you’d expect on any shape, now on text and captions too.

Tweak stroke position (inner, outer, center), dash patterns, cap styles, and corner joins directly on text and caption blocks.
→ Text Effects Docs

Draw Better Lines
Lines are now true line shapes. You can control how the ends of lines and dashes are styled (round, flat, or square), instead of working around lines behaving like thin rectangles.

Control Where Images Sit Inside a Block
New APIs let you control how image fills align inside a block when using Contain or Cover fill modes. Useful for templates where the inserted image’s aspect ratio is unknown. Also available for cropping in the web editor.

Changelog

v1.76 includes a significant number of improvements across platforms. See the full changelog for the complete list.

Thank you for building with IMG.LY.

CE.SDK v1.75 Release Notes

Neslihan — Fri, 22 May 2026 12:18:08 GMT

v1.75 is an engine release. Four new capabilities across media support, color workflows and smarter canvas and selection behaviors.

Let’s dive in!

Import Animated PNGs

CE.SDK now supports APNG import. Animated PNG files load and behave in line with GIF import, giving you a second animated format to work with in your editor.

→ Supported File Formats Docs

Pull Dominant Colors from Images on the Canvas

The engine can now extract the most prominent colors from an image already placed on the canvas. The data is available programmatically, ready to feed into palette suggestions.

→ Colors in CE.SDK Docs

Control How Far Elements Can Move

Define how far elements can be dragged beyond a page or parent boundary. This is now fairly simple with new movement constraint APIs.

Allow partial overflow where it makes sense while keeping content inside the intended editable area everywhere else.

This means more precise control over template behavior. Useful for any use case where content boundaries need to be enforced.

→ Movement Constraints API Docs

Improvements

Reach Elements Hidden Behind Transparent Images

Clicks now pass through transparent image areas to the element underneath. Selecting stacked elements just got easier.

Instead of selecting the top image, the click passes through to the element below. Now, users can reach and select elements from overlapping images without trouble.

Changelog

v1.75 includes bug fixes across the engine, web, iOS, and Android. See the full changelog for the complete list.

CE.SDK Release Notes v1.74

Neslihan — Fri, 08 May 2026 08:53:50 GMT

v1.74 is a web-focused release. Color and Gradient editing gets a full rebuild, closing gaps with popular editors. And PDF export takes a meaningful step forward for professional print workflows.

Edit Gradients with Full Control

The color input system in the web editor has been rebuilt. The user-facing result: gradient editing now works the way you’d expect it to.

Create and edit linear, radial, and conical gradients
Add and remove gradient colors, and switch between gradient types without losing the colors. Color picking now works consistently across all contexts: fill, stroke, shadow, and text.

Build and refine complex gradients entirely within your editor, without relying on external tools.

→ Explore Gradients Documentation

Export Print-Ready PDFs Without Extra Steps

Professional print workflows have a high bar for color fidelity. v1.74 raises CE.SDK’s output to meet it.

Spot colors are written as device CMYK in the exported file, matching what professional print pipelines expect.
Overprint on text is preserved correctly.
You can now opt out of ICC profile embedding in the print-ready PDF plugin when your workflow doesn’t need it.

Take exported PDFs directly into production with less manual intervention, making CE.SDK a stronger fit for workflows where color fidelity is a real purchasing factor.

→ Print-Ready PDF Plugin Documentation
→ Export to PDF Documentation

Improvements

Edit Vectors with Precision

Vector editing now feels more precise and easier to control, with better bend handles, live corner rounding, mirrored handles for new points on curved paths, new anchor snapping, and clearer tooltips throughout the editing flow.

Align Elements with Snapping Guides

Snapping guides have been refined to better show what is being aligned, using bounded guide segments, clearer visual distinctions, and new anchor-to-anchor feedback, making object placement and path editing more predictable and easier to understand.

Developer Experience

Web Demos Are Now Starter Kits

Every web demo is now a Starter Kit. That means 46 fully-fledged, clonable app templates. Starter Kits are production-ready configurations complete with the toolbars, behaviors, and workflows a real product needs.

Clone it, run it, build from there.

Whether you need the core Design, Photo, and Video Editors (and their powerhouse Advanced variants), specialized industry kits for Apparel, or AI-optimized workflows for generative assets, there is now a clonable app for every use case.

→ Explore Web Editor Demos
→ Starter Kit Documentation

Changelog

v1.74 includes fixes across the engine and web editor. See the full changelog for the complete list.

How 600+ Teams Shipped Creative Editing in 14 Days

Jan — Tue, 28 Apr 2026 21:15:17 GMT

The IMG.LY Impact Report

Based on a self-reported customer survey, 28 structured customer interviews, and IMG.LY’s published customer case studies. External benchmarks cited in context.

600+ companies from startups, over Fortune 500s to government organizations run creative editing on IMG.LY, collectively producing 500 million creations every month. The median customer goes from first SDK access to a working prototype in 2 days and a production-ready feature shipped inside a single 14-day sprint. Those self-reported medians run roughly 13× faster than the 6-month industry baseline for building an equivalent editor in-house, and around 6× faster than stitching together an open-source toolkit.

The time-to-market number is the entry ticket. What those 600+ customers do after shipping, how the editor changes their pricing, funnel, team velocity, and competitive position is what this report is about.

Methodology note. Time-to-prototype and time-to-MVP figures are self-reported by IMG.LY customers in a recent customer survey. All named customer outcomes are drawn from IMG.LY’s published case studies, where the customer has reviewed and approved the specific figures cited. Quantitative ranges and anonymous quotes come from 30 structured customer interviews (2024–2026); individual customers are not identified.

What Customers Unlock

1. Ship in days, not quarters

A working prototype takes an average of two days, a production feature often just a single sprint. Customer interviews put the alternative, an in-house build, at 6–12 months with 2–3 senior developers, consistent with the cost bands documented in IMG.LY’s Build vs. Buy guide and independently with the Standish Group CHAOS Report, which finds only 31% of software projects succeed on time, on budget, and with full scope… and under 10% for large projects.

Plai went live in about a month where their founder had estimated “months and months” for an in-house build. Optimizely, serving 1,000+ enterprise customers, described the integration as “one of the quickest projects we’ve worked on.”

Time to a production-ready MVP

14 days vs. 6 months: how long it takes to ship creative editing

Median time from project start to a production-ready creative editor, by integration path.

Sources. CE.SDK figure (14 days) is the self-reported median from an IMG.LY customer survey; individual results vary with scope and team. In-house (180 days) and open-source (90 days) figures are midpoints of the ranges documented in IMG.LY's Build vs. Buy guide, cross-referenced with customer interviews (N=28).

2. Open new pricing and market tiers

Embedding an editor changes the customer’s own unit economics. It unlocks a self-serve tier where users previously needed a designer in the loop, lowers the price floor, and opens markets where manual production was the binding constraint.

Plai doubled annual revenue and now generates 30,000+ ad creatives monthly on the platform. Postbuddy measured a 4× A/B-test improvement after moving direct-mail creation in-app, a lift that funded expansion into Sweden and Norway. In an anonymized interview, one customer described the change plainly: “We can lower our prices for the base product, it’s cheaper for clients who can use self-service.”

3. Lift your own conversion and engagement

In-context editing keeps users inside the product, shortens time-to-value, and removes the “export to Photoshop” detour that quietly leaks trials. The effect shows up directly in sign-up and trial-to-paid numbers.

Omneky recorded a 10× month-over-month increase in new sign-ups after embedding CE.SDK. In a separate interview, one customer described 400–500 organic trials per month with roughly $65–70K of opportunity evaporating at an 8% trial-to-paid rate tied largely to editor friction, the number that made their own build-vs-buy case close itself.

4. Free your design, marketing, and support teams

The cost saved by an editor isn’t only on the engineering line. It shows up in designer queues that disappear, support tickets that drop, and marketing teams that stop waiting on the bottleneck.

ImageBank X compressed a recurring asset-prep task from 15 minutes to 2 minutes — an 87% reduction per task. Halio.ai enables financial advisors to produce 30 days of branded content in 30 minutes. Interview customers describe the same pattern in plainer language: “happier marketing teams,” and, of the post-launch support burden, “the things the sales team had to deal with all day are just gone.”

5. Compound instead of freeze

This is where the engineering-economics story earns its keep. An in-house editor is a snapshot: the team ships what’s feasible in the window, then expends time and money just to keep it alive. Atlassian’s 2024 State of Developer Experience Report (N=2,100+) found 69% of developers lose eight or more hours per week to inefficiencies — about 20% of their time — with technical debt as the primary cause. Stack Overflow’s 2024 Developer Survey (N=65,437) independently found 62% of developers rank technical debt as their single biggest frustration.

CE.SDK customers don’t pay that tax. New capabilities such as AI background removal, text-to-image, object add/remove, style transfer arrive as modular plugins, not re-architectures. One interviewed customer, who had spent a year building their own editor before switching, described maintaining it as “a full-time job and our main product isn’t editing.” Every month an in-house team spends on maintenance is a month IMG.LY customers get new capabilities shipped to them. The feature gap widens, not narrows.

Editor capability over 24 months

In-house builds freeze. CE.SDK customers compound.

An in-house editor ships at the snapshot the team can afford and then plateaus under the weight of maintenance. CE.SDK customers absorb new capabilities — AI background removal, text-to-image, object remove, automatic subtitles — as modular plugins each quarter.

Build in-house

CE.SDK customer

Illustrative. The CE.SDK trajectory reflects the cadence of major capability releases shipped to customers without re-architecture. The in-house trajectory reflects the typical build-then-maintain pattern documented in customer interviews and corroborated by the Atlassian 2024 State of Developer Experience Report (69% of developers lose 8+ hours per week to inefficiencies, primarily technical debt).

6. Become deal-eligible and privacy-credible

Some categories require an editor to win the deal at all. One interviewed customer received a written RFP rejection that read: “the other provider has an editor, you don’t.” That single moment approved their budget to buy.

For regulated buyers, fintech, healthcare, government, enterprise, client-side processing is a procurement requirement, not a feature. CE.SDK’s default client-side execution means customer data never leaves the browser, which makes the editor defensible in categories where server-side alternatives are blocked.

Swiss Post producing 1 million+ personalized postcards annually on the platform described CE.SDK as “the only solution allowing a specialized, on-brand UI.”

The economics, in one table

The cost gap between building and buying isn’t just wider on day one, it widens over time. Every month an in-house team spends maintaining the editor is a month IMG.LY customers compound new capability on top of what’s already shipped. The table below summarizes the 3-year picture. For the full cost methodology, including the open-source path and the senior-developer rate assumptions, see IMG.LY’s Build vs. Buy guide.

	Build In-House	Open Source + Glue	CE.SDK
Working prototype	2–6 months	1–2 months	2 days (self-reported median)
Production MVP	6–12+ months	3–6 months	14 days (self-reported median)
Team required	3–5 senior developers	1–2 senior developers	1 developer for integration
Year-1 development cost	$100K–$500K+	$150K–$400K	License + integration
Annual maintenance	$75K–$125K (15–25%)	$50K–$100K	Included
3-year TCO	$525K–$1.4M+	$300K–$700K+	Fraction of build cost
Cross-platform parity	Build per platform	Typically web-only	Web, iOS, Android, Desktop, Server

Source for build and open-source cost bands: IMG.LY’s Strategic Guide to Creative Editing: When to Build, When to Buy. Cross-referenced against BLS May 2024 wage data - median software-developer wage $133,080, 90th percentile $211,450 - and aggregated maintenance benchmarks (Pegotec, 2026). Time-to-prototype and time-to-MVP for CE.SDK are self-reported medians from an IMG.LY customer survey; individual results vary with scope, team, and platform target.

When building in-house still makes sense

This report defends one conclusion, so here is the honest counterweight.
Build your own creative editor if all of the following are true:

Creative editing is your core product, and your unique IP lives inside the editing experience itself.
Your requirements are genuinely non-standard, i.e. no off-the-shelf SDK supports your rendering or interaction model.
You have surplus senior engineering capacity that isn’t needed on differentiated work elsewhere.
Time-to-market is not competitive in your category, nobody else is shipping similar capability.

If any one of these is false, the economics above generally make buying both cheaper and faster.

Methodology

Time-to-prototype and time-to-MVP (2 days, 14 days) are self-reported medians from an IMG.LY customer survey. Individual results vary with team experience, integration scope, and platform target.

In-house and open-source timeline ranges are drawn from 28 structured customer interviews conducted between 2024 and 2026, cross-referenced against IMG.LY’s Build vs. Buy guide. Interview customers are not identified; quantitative ranges reflect the distribution of answers across the set.

Named customer outcomes (Plai, Omneky, Optimizely, Swiss Post, ImageBank X, Halio.ai, Postbuddy) come from IMG.LY’s published case studies, where the customer has reviewed and approved each cited figure.

External benchmarks are drawn from:

U.S. Bureau of Labor Statistics, Occupational Outlook Handbook, Software Developers (May 2024)
Atlassian State of Developer Experience Report (2024) (N = 2,100+ developers and engineering leaders, in partnership with DX and Wakefield Research)
Stack Overflow 2024 Developer Survey (N = 65,437 developers across 185 countries)
Standish Group CHAOS Report
Aggregated software-maintenance benchmarks from Gartner, IEEE, and industry practitioners, summarized in Pegotec (2026) and Vention Teams.

Frequently asked questions

How long does it take to integrate CE.SDK?
The median customer in our survey reports a working prototype within 2 days and a production-ready MVP within a single 14-day sprint. Self-reported; varies with scope and team.

What do IMG.LY customers unlock beyond faster shipping?
Five additional outcomes: new pricing and market tiers enabled by self-serve editing; lifted trial-to-paid and sign-up conversion; reduced design, marketing, and support load; a roadmap that compounds instead of freezes as AI features ship as plugins; and deal eligibility in procurement categories that require an embedded editor or client-side processing.

Can AI coding agents like Claude Code accelerate CE.SDK integration further?
Yes. IMG.LY publishes a set of specialized CE.SDK Agent Skills portable knowledge packs that give AI coding assistants expert-level understanding of the SDK before they write a line of code. The skills cover framework-specific documentation lookup (React, Vue, Svelte, Angular, Next.js, Nuxt.js, SvelteKit, Electron, Node.js, Vanilla JS), feature implementation (/cesdk:build), conceptual explanations (/cesdk:explain), and a builder agent that autonomously scaffolds complete CE.SDK applications from a natural-language description.

How much does it cost to build a creative editor in-house?
Published industry benchmarks and customer-reported estimates converge on $100K–$500K+ initial development over 6–12 months with 3–5 senior developers, plus 15–25% of that cost annually in maintenance. 3-year TCO typically lands between $525K and $1.4M. See our Build vs. Buy guide for full methodology.

What percentage of developer time is spent on maintenance?
Atlassian’s 2024 State of Developer Experience Report found 69% of developers lose 8+ hours per week to inefficiencies, about 20% of their time, primarily to technical debt. Gartner reports that 55–80% of corporate IT budgets go to maintaining existing systems.

What is the failure rate of custom software projects?
The Standish Group CHAOS research finds only 31% of software projects succeed (on time, on budget, full scope); 50% are challenged, 19% cancelled outright. For large projects specifically, success rates fall below 10%.

Custom software project outcomes

Only 31% of custom software projects succeed

Across tens of thousands of tracked projects, the Standish Group CHAOS research finds the majority of custom software is late, over budget, reduced in scope, or cancelled outright.

31%

Successful

On time, on budget, with full scope.

50%

Challenged

Delivered late, over budget, or with reduced features.

19%

Failed

Cancelled before delivery.

~25% of IMG.LY customers failed at building a creative editor in-house

In our customer interviews (N=28), roughly one in four customers had attempted to build a creative editor in-house — or stitch one together from open-source — and abandoned the attempt before adopting CE.SDK.

Source. Standish Group CHAOS Report. For large projects specifically — the size band most in-house creative-editor builds fall into — success rates drop below 10%. IMG.LY customer figure is drawn from 28 structured customer interviews conducted between 2024 and 2026.

How many companies use IMG.LY CE.SDK?
600+ customers including startups, Fortune 500 companies, and government organizations collectively produce 500 million creations per month on the platform.

What platforms does CE.SDK support?
Web (React, Angular, Vue, Svelte, Next.js, Nuxt.js, SvelteKit, Vanilla JavaScript, Electron), Mobile (iOS/Swift, Android/Kotlin, React Native, Flutter, Ionic, Cordova), and Server (Node.js headless mode for batch automation).

Starter Kits: A New Way to Use and Configure Our Editor

João — Wed, 22 Apr 2026 17:14:54 GMT

When we built the first version of CE.SDK’s mobile editors, we optimized for speed and ease of integration. We designed a set of ready-made solution editors: Photo, Design, Video, Postcard, and Apparel Editor. Each is built around the use cases we believed would meet the needs of most of our customers. With one component and a license key, you had a full creative editor running in your app. That approach got products to market fast, and for many teams it was exactly the right starting point.

But products evolve, and so do the needs around it.

As integrations matured, teams needed deeper configuration, more granular control, and the ability to shape the editor into something uniquely theirs. What starts as “give us a working photo editor” becomes “give us our photo editor.”

That’s why, starting with CE.SDK v1.73 on iOS and Android, CE.SDK evolves from a set of preconfigured solution editors into a single, flexible Editor foundation paired with Starter Kits: complete, working editor projects that you own, customize, and control entirely.

Here’s what that means and why it’s worth it.

What changed

Previously, you integrated CE.SDK by dropping in a solution-specific component: PhotoEditor, DesignEditor, VideoEditor, ApparelEditor and PostacardEditor. Each came with built-in UI, default behaviors, and preconfigured toolbars. You could adjust some of it through configuration APIs, but the foundation was managed internally by our SDK.

With v1.73, those components are replaced by a single Editor entry point that starts minimal without any configuration and a set of Starter Kits that provide the full experience you’re used to.

Each Starter Kit matches a previous solution: Photo, Design, Video, Postcard, and Apparel. You download it, drop it into your project, and you have the same editor as before.

With Starter Kits, the setup becomes explicit and lives in your own codebase. Instead of relying on built-in defaults inside a prebuilt solution, you start from a ready-made configuration structure that you can inspect, own, and change directly.

And if none of the starter kits match your needs, you can build your own editor from scratch using our configuration directly.

Before, you were always starting from one of the predefined solutions and trying to bend it to fit your use case, which was limited and often frustrating. Now, the building blocks are there for you to assemble however you want.

What are the benefits?

The full picture in one place

Configuration used to be spread across multiple APIs and documentation pages. It wasn’t always clear what you could customize, where to find the right setting, or whether a particular behavior was even exposed for modification.

With a starter kit, the configuration is the documentation. Open the configuration file, and you see every callback, every toolbar item, every setting, the complete scope of what the editor does.

This also makes production behavior safer. Critical parts of the editor setup are now explicit in your code rather than implied by SDK defaults. Your team can see exactly what is configured, why, and review changes through your normal development process.

More control and capability over your editor

Starter kits unlock customizations that were simply not possible before: restructure how the editor initializes; inject custom logic between loading phases; defines layouts from the ground up; build workflows that are unique to your product; and more.

The old configuration APIs drew a line between “customizable” and “not customizable.” Starter kits erase that line. If you can see it in the code, you can change it.

In simple terms, you can now adapt the editor to your product, instead of adapting your product to the editor, and this was one of our main drivers.

Opt in, never opt out

Until now, an SDK update could introduce visible changes to your editor, like a new toolbar button, a different menu option, a changed default, without you asking for it. Your release process had to account for UI changes that came from a dependency, not from your team.

With CE.SDK v1.73, that dynamic is reversed. SDK updates bring new features, engine improvements, performance gains, and bug fixes. But your editor UI stays exactly as you left it. New features and components become building blocks you adopt on your own schedule, documented, with examples, and ready when your implicit decide to add them. Nothing shows up in your product unless you put it there.

Two paths, your choice

Start from a Starter Kit
Download the one that matches your use case, run it, and customize from there. Each kit is a proven, production-ready structure that handles the complexity of editor setup so you don’t have to figure it out from scratch. Most teams will take this path.

Build from scratch
If you have very specific requirements or prefer to architect everything yourself, the Editor view accepts raw configuration directly. The starter kits serve as comprehensive, living reference implementations. Even if you never use them directly, they show you exactly how every piece fits together.

The engine you rely on hasn’t changed

It’s worth saying clearly: the core of CE.SDK, the rendering engine, export pipeline, asset handling, performance characteristics, and everything that powers the creative experience is unchanged. We improved how you configure and integrate the editor, not what powers it.

The Tradeoff

The old one-component integration was genuinely convenient for getting started. With starter kits, you have a small module in your project, a handful of well-organized files that you own and maintain.

We believe this is the right tradeoff for any team building a real product. The moment you need to customize anything you’ll be able to clearly structured and to modify without limits.

At its core, this change is about moving from implicit behavior to explicit control, and we believe that is the better long-term contract with our customers. Your editor should not change in meaningful ways unless you decide it should. Your upgrade path should be predictable. And your team should be able to understand the integration by reading its own code.

Getting Started

We’ve written detailed migration guides that walk through every change with before-and-after examples. Each guide also links to the starter kit repositories for your platform:

	iOS	Android
Migration Guide	Upgrading to v1.73	Upgrading to v1.73
Photo Editor	GitHub	GitHub
Design Editor	GitHub	GitHub
Video Editor	GitHub	GitHub
Postcard Editor	GitHub	GitHub
Apparel Editor	GitHub	GitHub

We’re here to help with the transition. If you have questions, reach out to our support team or open an issue on the starter kit repositories.

CE.SDK v1.73 Release Notes

Neslihan — Tue, 21 Apr 2026 13:29:35 GMT

v1.73 is a mobile-focused release. The main act is our new architectural foundation for iOS and Android: Starter Kits give you full ownership of your editor configuration. On the engine side, CE.SDK now supports SVG export across all platforms.

Own Your Mobile Editor — Not Just the Config

The old model was simple: drop in a solution component (PhotoEditor, VideoEditor, DesignEditor), pass a license key, ship. For most teams, that was exactly the right starting point. Fast to integrate, zero configuration overhead, a full editor running in your app within hours.

As products matured, though, teams needed more. Deeper customization. Granular control over behaviors. An editor that felt like theirs.

That’s what Starter Kits for Mobile addresses.

The prebuilt solution components are replaced by a single Editor entry point and a set of Starter Kits: complete, working editor projects for each use case that live in your codebase, not ours. Set it up in minutes.

For your product, this means: you can adapt the editor to fit your product, not the other way around.

Everything Is In Your Code Now
Each Starter Kit is a real editor project — not a thin config wrapper. Every toolbar item, every callback, every loading phase is written out explicitly in files you own.

That means your team can read the integration, review changes to it, and understand exactly what the editor does and why. No more hunting through SDK internals to figure out why something behaves the way it does.

SDK Updates Stop Touching Your UI
Previously, updating CE.SDK could introduce new buttons, changed defaults, or different menus without you asking for them. Your QA had to catch it.

That dynamic is reversed now. Engine improvements, bug fixes, and performance gains come through updates as before. But your editor UI stays exactly where you left it. New features arrive as optional building blocks, documented and ready when you want them.

No More Customization Ceiling
The old configuration APIs had a line between what you could change and what you couldn’t. Starter Kits remove that line entirely. You can restructure initialization, inject custom logic between loading phases, and build workflows specific to your product.

If you can see it in the code, you can change it.

If none of the five kits match your needs, the Editor view accepts raw configuration directly.

Migration

This is a breaking change on both iOS and Android. Migration guides cover every change with before-and-after examples.

→ Android Migration Guide
→ iOS Migration Guide

Starter Kit Repositories

Editor	iOS (Swift)	Android (Kotlin)
Photo	GitHub	GitHub
Design	GitHub	GitHub
Video	GitHub	GitHub
Postcard	GitHub	GitHub
Apparel	GitHub	GitHub

Export Vector Designs as SVG

Until now, users working with vector content in CE.SDK had no path to get that content out as a vector file. CE.SDK v1.73 adds SVG export via the image/svg+xml MIME type.

Text is exported as vector paths for consistent rendering across environments regardless of font availability. Drop shadows, blur, effects, and embedded raster images are rasterized and included as embedded images within the SVG output.

→ Exporting Blocks Engine Guide

Changelog

See the full changelog for the complete list.

Thanks for building with IMG.LY.

Join 3,000+ creative professionals who get early access to new features and updates—subscribe.

PowerPoint Online: Native PPTX Editing in the Browser with CreativeEditor SDK

Klaudia — Fri, 17 Apr 2026 11:21:14 GMT

Organizations can now create workflows where presentations stay editable inside their own platforms: content management systems, collaboration tools, educational platforms, and SaaS applications, without switching to external editing software each time.

PowerPoint Import Capabilities

IMG.LY SDK enables importing PPTX files directly into browser-based workflows.

Import functionality
Existing PowerPoint files can be loaded directly into CE.SDK. The importer interprets the PPTX structure — text, images, shapes, and formatting — and converts each slide into an editable CE.SDK scene. Files can come from uploads or your own storage systems.

Editing interface
Once imported, slides become CE.SDK design scenes. Users can change content freely using CE.SDK’s editor, which keeps the structure intact, including text hierarchies and slide ordering.

What gets preserved: Text formatting (font families, sizes, colors, bold, italic), shapes (rectangles, ellipses, custom vector shapes), images, gradient fills, shadow effects, gradient backgrounds, groups, z-order, and theme colors are all carried over from the original PowerPoint file.

Editing Capabilities for Presentation Workflows

The browser-based editor includes the essential features needed for everyday presentation updates:

Text editing: Change text and adjust typography — fonts, colors, alignment, sizes, etc.
Visual element manipulation: Move, resize, rotate, and reorder shapes, images, and text boxes
Layer management: Adjust stacking order to control which content appears on top
Slide navigation: Rearrange slide order and quickly move between slides
Content addition: Add new images, shapes, or text elements when needed
Styling options: Edit fills, borders, and other visual properties

This helps teams refresh outdated content, localize presentations, update brand assets, or adapt a single deck to many different use cases — all without leaving the platform.

What’s Not Supported

The importer focuses on the most common presentation elements. Some PowerPoint features don’t carry over:

Tables — Table content is skipped on import; a workaround is to ungroup tables in PowerPoint before importing
Charts — Chart visualizations are not imported
SmartArt — Diagram graphics are not imported
Animations and transitions
Slide masters and layouts
Audio and video
Comments and notes
Background images — solid colors and gradients are supported, but image backgrounds are not

For presentations that rely heavily on these elements, it’s worth reviewing the output after import and making adjustments in CE.SDK.

Workflow Improvements with PowerPoint on the Web

Why this matters for real workflows:

Less switching between tools: Users can make changes right inside the system where the presentation is stored. It’s faster and reduces confusing file versions.

Accessible anywhere: Works on any modern browser, making editing possible on devices without native PowerPoint support.

Lower dependency on desktop software: Teams don’t always need Microsoft PowerPoint licenses just to update a slide or fix small mistakes.

Faster corrections: Updates become quick tasks — improving slides doesn’t need to slow things down, especially for marketing or sales content.

Aligned with existing processes: Versioning, commenting, and permissions stay right where the content lives, which really simplifies collaboration.

Browser-Based Editing vs. Desktop PowerPoint

The browser-based editor covers the most common editing needs. PowerPoint on desktop still handles specialized features the importer doesn’t cover.

Capability	Browser-Based Editor	Desktop PowerPoint
Installation requirement	None — opens in the browser	Requires installation
Platform compatibility	Works on any device with a modern browser	Windows, macOS
Core content editing	Yes, for supported elements	Fully supported
Advanced features	Tables, charts, SmartArt, animations not supported	Complex animations, transitions, macros, advanced design
Integration	Easy embedding into web apps	Requires file transfer flow
Access speed	Instant, no launch time	Depends on local system
File compatibility	Imports PPTX; outputs CE.SDK scenes	Native PPTX with extended features
Collaboration	Connects with existing web-based systems	Microsoft ecosystem required
Network requirement	Can be edited offline	Can be offline

For straightforward content updates — text changes, image swaps, visual tweaks — the browser-based workflow handles most everyday needs. For presentations that rely on tables, charts, animations, or other advanced PowerPoint features, desktop PowerPoint remains the right tool.

Technical Implementation for Developers

The SDK handles PPTX parsing and slide rendering in the browser as CE.SDK scenes.

Fast integration: Setup usually takes hours or days, not months, since all the hard parts are already covered by the SDK.

Customizable interface: Developers can enable or disable features, apply brand styling, and connect to authentication and storage systems already in use.

Platform-agnostic: The package works in both browser and Node.js environments with no file system dependencies, using pure ArrayBuffer handling.

Controlled infrastructure: Everything runs where your platform runs, and you keep full control of data processing and access.

Use Cases Across Industries

EdTech: Students edit presentations directly in learning platforms without software installation.

CMS platforms: Teams update brand assets and sales decks in the same place they manage all other content.

Collaboration tools: Everyone works on the same version of a file without downloading and re-uploading.

SaaS products: Presentations become part of the workflow, not a separate step.

Creative agencies: Client slides can be adjusted quickly without leaving project management systems.

Getting Started

Try PowerPoint editing in the browser using our demo, or get started with CreativeEditor SDK to explore the full feature set.

CE.SDK v1.72 Release Notes

Neslihan — Fri, 03 Apr 2026 10:47:49 GMT

CE.SDK v1.72 is a massive design and creative capabilities release: Edit vector paths in your web editor. Generate AI images on mobile. Record voiceovers on iOS and Android, and format text with lists, underline, and strikethrough across every platform. Design and video scenes unify into a single editing surface on Web.

Let’s take a look!

Edit Vectors with Precision on the Web

CE.SDK now lets users edit any shape at the path level.

Select a shape and enter Edit Path mode. Manipulate individual anchor points and curves. Move nodes, bend segments, add or remove points. Lastly, apply fills, gradients, and colors.

In this example, we build our figure from a simple polygon shape:

Build custom icons, illustrations and detailed layouts directly in the web editor, without leaving your app.

→ Explore Vector Path Editing Documentation

Design and Video Editing In One Editor

Web users can now work across design and video in a single scene. Everything you can do in design mode, you can do in video mode too.

For your product, this means a simpler, more coherent editing experience for users who work across both formats.

Note: The feature toggle shown in the video is coming to our demos soon. It is not part of the default CE.SDK setup.

→ Visit CE.SDK 1.72 Migration Guide

Generate AI Images on Android and iOS

The AI image generation plugin now ships on iOS and Android.

This is the first mobile AI plugin for CE.SDK. Users can generate images directly inside the mobile editor through custom plugin panels, without leaving the creative workflow.

For your product, this means: you can now deliver AI-powered creative features on mobile with the same plugin architecture already available on web. One capability, every platform.

→ Try Android Mobile Demo
→ Try iOS Mobile Demo

Record Voice-Overs on Android & iOS

Tell your story by giving your videos a voice. iOS and Android users can now record their voice directly over video clips.

Layer multiple voiceover tracks on the timeline. Perfect to record engaging videos, like creators work in TikTok and Reels.

→ Try Android Mobile Demo
→ Try iOS Mobile Demo

Decorate Text On All Platforms

Updates for text editing land simultaneously across platforms:

Use Bullet and Numbered Lists to structure text with ordered and unordered lists. Underline and strike text, including custom underline colors.

Improvements

Rename Pages with Double Click
Web users can now rename pages directly on the canvas with a double click, without navigating to a separate settings panel.

Place Elements Anywhere with Infinite Canvas
Web Users can now place elements outside page boundaries. The canvas extends beyond the page, giving users a flexible workspace to park assets, build off-canvas elements. Work more freely without being constrained to the page frame.

Changelog

See the full list of fixes and breaking changes in the v1.72.0 Changelog and 1.72.0 Migration Guide.

Thank you for building with IMG.LY.

AI Design Agents and Creative Automation: How to Ship a Full Campaign Without a Designer

Klaudia — Wed, 01 Apr 2026 10:14:03 GMT

You have your files, hooks, Google Ads data but still can’t actually launch a campaign because you have to go to a designer for the final assets.

That gap is exactly where campaign momentum dies. Not at the strategy stage or in copy but at the last mile, when everything is ready except the thing people will actually see.

Luckily, it no longer has to.

The AI Marketing Stack Has a Design-Shaped Hole in It

Most marketing workflows have been quietly transformed over the last two years. Copy generation, audience segmentation, keyword research, performance analysis - all of it runs faster now, with less manual input. A solo marketer can do what used to require a team. Except for one part.

Design hasn’t moved. The workflow is still: write a brief, hand it to a designer, wait, review, revise, wait again. Then do the same thing in three more formats because the 1:1 you approved doesn’t fit Stories, Display, or LinkedIn. That loop can take days. And it doesn’t matter how good your AI-generated copy is if it’s sitting in a doc waiting for someone to have bandwidth.

This isn’t a resourcing problem. Hiring more designers doesn’t fix the structural issue; it just adds capacity to a fundamentally slow process. The problem is that the tools built for design weren’t designed for the workflow a modern marketer actually runs. They expect a designer at the keyboard. They don’t expect a marketer with a campaign brief and a conversation window.

The result: campaigns that are otherwise fully automated still stall before they ship. The bottleneck moved from copy to creative. And most teams haven’t noticed yet, because design delays feel normal. They’ve always been there.

What an AI Design Agent Actually Changes

An AI design agent is an autonomous AI system, not a prompt-response tool. It plans, reasons, and executes design tasks independently. Given a goal, it breaks that goal into steps, uses the tools available to it, retains context across the session, and can self-correct when the output isn’t right. That’s the category: a system that drives the workflow rather than waiting for instruction at each step.

Most design agents deliver speed. The handoff that used to take days can happen in minutes. But the output is still a deliverable: a file you receive, use as-is, or move somewhere else. Most operate inside existing tools or generate assets you work with elsewhere. The speed is real, the editability usually isn’t. If something needs to change, you’re back to prompting from scratch.

CoDesign sits differently. It doesn’t hand you a finished asset. It gives you a working starting point on a real canvas. Layers, text boxes, placeholders - real assets you can continue to work with, in the same conversation, without leaving the session.

Brand consistency gets handled at the foundation. Load your brand kit once, including colors, fonts, logo, and layout rules, and every output that session respects those constraints. You’re not eyeballing hex codes or hoping the font looks right. The rules are applied from the start, not checked at the end.

Multi-format adaptation is where the time savings become concrete. A campaign that runs across Instagram, Google Display, LinkedIn, and print doesn’t produce four separate briefs and four separate rounds of designer revisions. You describe the formats you need, and the agent adapts the work. The campaign stays consistent across all of them.

The biggest shift isn’t speed, though that’s real. It’s that you stay in creative control throughout. There’s no handoff moment where you lose the thread and have to re-explain the brief to someone else. The context lives in the conversation.

How to Run a Campaign Production Session with CoDesign

This is the actual sequence. Walk through it once and the workflow becomes repeatable.

1.Start with the brief. Open CoDesign and describe the campaign in plain language. Audience, objective, platform, tone, any constraints. The more specific you are here, the less iteration you’ll need later. Treat it like briefing a senior designer who hasn’t worked with your brand before.

2.Generate copy variations before you open the canvas. Use whichever AI writing tool you already work with — ChatGPT, Claude, or whatever is in your stack — to produce multiple copy directions: headline hooks, body copy, CTAs. Get four or five versions per element. Copy and design are separate steps that feed into each other. Having real options ready before you start the design session means CoDesign has something specific to work with, not a blank brief waiting to be interpreted.

3.Feed the brief to the AI design companion. With copy variations ready, ask CoDesign to generate initial ad designs. Describe the format, the hierarchy you want, any layout preferences. You’ll get structured, editable designs on the canvas. Not a rendered image, but a working starting point with real layers.

4.Apply your brand kit. If you haven’t already, load your brand assets: logo, color palette, type system, approved imagery. The agent applies these rules to the designs. Every output from this point respects your brand standards automatically.

5.Adapt across formats. Tell the agent which formats you need. The social variant, the display variant, the vertical for Stories, the square for feed. Watch the layouts adapt to each context, maintaining the campaign idea and brand consistency across dimensions. If the hierarchy needs adjusting for a specific format, describe what’s not working and the agent fixes it in conversation.

6.Refine in conversation. This is where the canvas-based approach earns its value. You’re not generating new versions from scratch. You’re iterating on what’s already there, in the same session. “Move the logo to the bottom right. Try the headline in the lighter weight. Swap this layout for something with more white space.” Each exchange builds on the last, so the conversation stays grounded in what’s on the canvas rather than starting over from a new prompt.

7.Export and ship. When the designs are approved, export in the formats your media plan requires. The session context lives with the file, so if something needs to change post-launch, you’re not starting from zero.

One honest note: the quality of the output is proportional to the quality of the brief. Vague prompts produce generic starting points. Teams that invest two minutes in a specific, structured brief consistently get more usable first outputs than teams that describe the campaign in one sentence and expect the agent to fill in the gaps.

This Is What Closing the Loop Actually Looks Like

Design agents don’t replace designers. They remove the bottleneck that sits between strategy and execution.

The marketer who used to wait three days for ad assets can now produce a full campaign set in a single session. The designer who spent half their week on format resizes and small-copy tweaks can spend that time on the work that genuinely requires their judgment. That means brand-defining creative, campaign concepts, and anything where taste and experience are the actual input.

It was never about willingness to collaborate. The tools just didn’t allow for anything else. Every design change, no matter how small, had to go through a handoff. A headline adjustment on a banner resize does not need a creative director. A resize from 1:1 to 9:16 does not need a brief, a Slack message, and a 48-hour turnaround.

Thanks to design agents conversation shifts. It moves from “can you make this” to “how should this look.” And that’s a way more interesting conversation.

Interested in trying IMG.LY CoDesign? Reach out to our team.

What Is an AI Design Agent?

Klaudia — Mon, 30 Mar 2026 04:52:01 GMT

The phrase “design agent” is being used in two completely different ways right now, and the confusion is worth clearing up before either meaning becomes the default. Search for it today and you’ll mostly find AI design agencies - services firms that use AI in their process. That’s a reasonable business, but it has nothing to do with what this article is about.

The second meaning, a design agent as a category of AI tool, is the one that matters for product builders, developers, and creative teams trying to understand where AI-assisted design is actually going. That’s what we’re defining here: what it is, how it works, how it differs from tools you already know, and why the distinction matters if you’re building or evaluating creative software in 2026.

First, What an AI Design Agent Is Not

An AI design agency. This is a services firm that uses AI tools in its creative process. It’s a completely different category - a service, not a tool - and it’s the most common result you’ll find when you search “design agent” right now.

An AI image generator. Midjourney, DALL-E, and similar tools produce images from text prompts. They generate a single output from a single instruction.

An AI feature inside a design tool. Figma’s AI suggestions, auto-layout assistance, and background removal are AI features. They augment a manual workflow making specific tasks faster.

A design automation pipeline. Server-side systems that batch-generate assets from templates are automation, not agency. They’re fast and scalable, but they don’t converse, can’t interpret an ambiguous brief, and don’t refine their output in response to feedback. The confusion here is understandable: modern automation systems use AI models internally and can produce polished, varied-looking results that are easy to mistake for something more intelligent. But give one an ambiguous brief and it either fails or produces something technically correct that misses the point entirely. Give a design agent the same brief and it asks a question. That distinction - executing a fixed process versus reasoning about intent - is what separates the two categories.

The distinction matters because “design agent” is becoming a meaningful category term, and what it actually describes is different enough from all of the above that collapsing the distinctions creates real confusion, both for people evaluating tools and for people building products.

AI Design Agent - a Working Definition

There is no settled definition of an AI design agent yet, the term is still early. Based on what we see in the tools that genuinely deliver on the promise, three properties distinguish a real design agent from something that merely resembles one:

1. Autonomy. The agent takes multi-step actions without requiring a human instruction at each step. Given “create a five-page product catalog in a Scandinavian minimal style,” it works out the layout, typography, and image placement independently and produces the result.

2. Conversational interface. The agent communicates in natural language. It can ask clarifying questions, explain what it’s done, and accept follow-up instructions. The interaction feels like briefing a designer, not operating software.

3. Refinement loop. The agent takes feedback across multiple conversation turns: “make the typography lighter,” “apply the brand’s warm color palette”, and updates the design accordingly. This iterative loop is what separates a design agent from a one-shot generation tool.

A tool that has all three of these properties is a design agent. A tool that has one or two is something else; probably useful, but in a different category.

How an AI Design Agent Works in Practice

An abstract definition only takes you so far. Here’s what a fully implemented design agent workflow actually looks like, drawn from a real demo of IMG.LY CoDesign.

Step 1. The user opens CoDesign. The agent interface - a chat panel - sits alongside the canvas. They’re in the same window.

Step 2. The user types a brief: “Here’s a CSV of five products from our furniture brand. Generate one landscape catalog page per product — two-column grid, full-bleed photo left, typography-led layout right. Clean, minimal. Think Hay, Muuto, Frama.”

Step 3. The agent processes the brief, the data, and any brand context it has access to. It generates a five-page catalog in the editor: product names, descriptions, prices, photo placeholders, layout structure consistent across all five pages.

Step 4. The user reviews the output and follows up in the chat: “Nice. Pre-fill the photo placeholders with black-and-white product photography, soft contrast.”

Step 5. The agent updates the design. The user manually adjusts one headline, corrects a price, and exports.

The full workflow, from brief to print-ready output, took minutes rather than hours. The user never left the tool. The agent handled all structural and stylistic decisions. The human handled final judgment and small corrections.

But generating layouts from a brief is only part of what a design agent can do. In the same chat interface, the agent can build functional decision-making tools directly inside the editor. Ask it to create a Color Themes panel, and it produces a working component: five named presets, each one applying a complete color theme across the entire design in a single click. The user doesn’t switch to a settings screen or manually update individual elements. The agent has built the control they need, right where they need it, as part of the same conversation. That’s a meaningfully different capability: not just producing a designed output, but constructing the tools that let the user make better decisions about that output as they finalize it.

This table is meant as a fair comparison, each column represents how these tool categories actually behave today:

Capability	AI Image Generator	AI Design Features	Design Agent
Takes a brief	Prompt only	No	Yes
Produces editable layouts	No	Partial	Depends on a tool
Multi-step autonomy	No	No	Yes
Conversational refinement	No	Limited	Yes
Brand / context awareness	No	Partial	Yes
Iterative across a session	No	No	Yes

The pattern here isn’t that design agents are better at everything - it’s that they operate at a different level of the workflow. Image generators and AI design features are task-level tools. A design agent is a workflow-level tool.

The Autonomy Slider: Why Human Control Still Matters

One of the most important design decisions when building or evaluating a design agent is how much autonomy the AI exercises by default.

Full autonomy is fast. The agent makes all decisions and presents a finished output. But it can produce results that don’t match the user’s actual intent, especially when the brief is ambiguous or the stakes are high.

Minimal autonomy is safe. The agent only suggests, the human decides everything. But at that point, you’ve lost much of the value of having an agent in the first place.

The best implementations give users what you might call an autonomy slider: the ability to let the agent run with full independence on some tasks, take targeted direction on others, and step aside entirely when the user wants to edit manually. The right level of autonomy depends on the task and the user’s confidence, not a fixed setting applied uniformly across every interaction.

For any design agent, this means the interface needs to let the user reach in and adjust manually, mid-workflow, without losing what the agent has already done. The agent and the editor have to exist in the same environment. Separate windows with an export step between them break the loop entirely.

Where AI Design Agents Create the Most Value

Not every creative workflow benefits equally from an AI agent. The scenarios where design agents consistently create the most value tend to fall into three categories:

High-volume, high-variation creative production. Marketing teams producing dozens of ad variants, e-commerce teams generating product imagery at scale, publishers creating template-based content in bulk. A team can brief the agent once: brand colors, copy, format specs, and get 40 properly formatted variants back in the time it would have taken to manually produce three, each one consistent with the last.

Non-designer users who need professional results. Not everyone who needs to produce a designed output is a designer. Marketers, retailers, operations teams, small business owners - they know what they want but don’t have the tools or time to build it manually. A design agent gives them a way in that doesn’t require either.

Expert designers who want to explore faster. Experienced designers using the agent to generate starting points, explore multiple directions quickly, or offload the time-consuming production work while retaining full control over the final result. A designer can spend 20 minutes reviewing six distinct layout directions the agent generated from a single brief, rather than a full afternoon building each one from scratch.

These aren’t exhaustive categories, but they represent the use cases where the workflow-level shift actually changes what’s possible, not just what’s faster.

A Different Kind of Design Tool

A design agent makes creative work faster and more accessible. For designers who want to explore more directions in less time, and for non-designers who have always known what they wanted but lacked the tools to build it.

That’s what IMG.LY Codesign is built around. It’s in early access now, inside a fully featured design editor - get in touch for early access.

Vibe Design Tools Compared

Klaudia — Sun, 29 Mar 2026 03:51:56 GMT

Vibe coding gave non-technical people the ability to build software by describing what they wanted. The same shift is now happening with vibe design. For the first time, a marketer, a retailer, or a small business owner can create a professional design exactly to their specification just by explaining it to an AI. No design skills required. No external tool. No waiting for a designer to become available.

This article compares four tools leading that shift - what they do well, where they differ, and how to choose between them.

Tools Built for Creators

These tools represent the current state of standalone vibe design software. Each is genuinely good at what it does. The differences come down to what kind of work they’re built for.

Google Stitch

Google Stitch is an AI-native design canvas from Google Labs, launched for public beta in early 2026. It accepts text, voice, images, and code as input and produces high-fidelity UI designs and interactive prototypes on an infinite canvas. Its design agent can reason across an entire project rather than just the current frame - a meaningful step beyond tools that only operate on one screen at a time.

Stitch introduces a DESIGN.md file format for exporting and importing design rules across tools, and it connects to Cursor, Claude Code, and Gemini CLI via an MCP server. It’s available free during beta with monthly generation limits, and it’s clearly aimed at UI/UX designers and developers building product interfaces - not marketing or graphic design work.

Figma Make

Figma Make takes natural language prompts or existing Figma designs and produces working prototypes and web apps - functional code, not just mockups, with optional Supabase backend integration. Because it lives inside Figma, it has access to your existing design libraries, component systems, and tokens from the start.

It’s best understood as a rapid ideation and prototyping tool. It generates interactive, working outputs fast, but the code benefits from developer review before going to production. It’s distinct from Figma Sites, which handles actual publishing. AI credits are required for usage.

Lovart

Lovart is a standalone AI design agent founded by a former ByteDance senior product director. Its scope goes well beyond graphic asset creation: from a single prompt, it can generate brand identity systems, UI mockups, video content, packaging designs, and full marketing campaigns. It uses a proprietary MCoT (Mind Chain of Thought) reasoning engine designed to mimic how a creative director thinks - analyzing business context, target audience, and brand requirements, not just aesthetic style.

Its infinite canvas continuously analyzes all assets present to maintain visual consistency across an entire project, and outputs are compatible with Figma, Photoshop, and After Effects. Lovart is positioned for marketing creatives, solo designers, and small creative teams who need to produce full campaigns without a large agency.

Adobe Firefly Boards

Adobe Firefly Boards is Adobe’s AI-first collaborative ideation canvas, built for creative professionals who need to move quickly from inspiration to concept. It lives inside the Adobe Firefly web app and mobile apps (iOS and Android), and syncs with Creative Cloud so work can move from moodboard to production without switching platforms.

The core of Boards is an infinite multimedia canvas where you bring in text prompts, reference images, video clips, and Adobe Stock assets, then generate across all of them at once. What makes it unusual is the model breadth: Boards gives you access to Adobe’s own Firefly models alongside partner models from Runway, Pika, Luma AI, Google Veo, Black Forest Labs, and others—all inside the same workspace. Outputs are images, video clips, text overlays, and assembled mood boards or storyboards, and every generated asset carries Content Credentials that automatically record which AI model produced it.

Canva Magic Studio

Canva Magic Studio is a suite of more than 15 AI-powered tools embedded directly into the Canva editor on web, mobile, and desktop. It’s not a separate app—if you’re already a Canva user, you’re already inside Magic Studio.

The suite covers writing, image generation, video creation, format switching, and multi-language translation, all accepting text prompts, uploaded media, documents, and existing canvas elements as input. Brand Kit integration is what distinguishes it from more isolated AI generation tools: when you generate a design through Magic Design, it pulls from your saved Brand Kit—logo, colors, fonts—rather than producing something generically styled. That keeps AI-generated output on-brand without manual cleanup.

The trade-off is structural. Canva outputs are flat exports within a consumer-grade editor, not structured design objects you can manipulate at the element level. Generations are fast and on-brand, but the editing ceiling is Canva’s editor—for users who need granular creative control or complex asset structures, that’s a real constraint, not just a preference.

IMG.LY CoDesign

IMG.LY CoDesign is AI-powered design companion built for creators and teams producing marketing materials, branded content, social assets, and multi-format campaigns. What sets it apart from other standalone tools is how it treats AI output: every element CoDesign generates is a structured, editable design object on the canvas - not a flat image to export and rebuild elsewhere. Move a headline, swap a font, resize a block, change a color - directly in the same tool that generated it.

The agent and the editor aren’t two modes. They’re the same tool. You can prompt a direction, refine it in conversation, and take over the canvas directly at any point - without switching tools, exporting, or starting over. CoDesign also goes beyond the canvas: ask it to build a brand panel, a form-based template, or a custom configurator, and it builds that too - directly inside the editor, from the same prompt interface.

Here is a quick demo to showcase what IMG.LY CoDesign can do.

Vibe Design Tools at a Glance

	Google Stitch	Figma Make	Lovart	Adobe Firefly Boards	Canva Magic Studio	IMG.LY CoDesign
Primary use	UI/UX design from prompts	Prompt-to-prototype / app	Full campaign and brand creation	AI-first concepting and moodboarding	AI design generation inside Canva editor	AI-assisted design for creators and teams
Where it lives	Google (standalone web app)	Inside Figma	Lovart (standalone)	Adobe Firefly web + mobile; syncs with Creative Cloud	Inside Canva (web, mobile, desktop)	IMG.LY
Input types	Text, voice, images, code	Text, existing Figma designs	Text, images, brand briefs	Text, images, video, Adobe Stock assets	Text, images, video, documents, existing design elements	Text, images, CSV, brand kits
Output type	UI designs and prototypes	Interactive prototypes and web apps	Brand assets, campaigns, video, packaging	Images, video, text overlays, mood boards, storyboards	Images, video, presentations, styled text, format-converted designs	Editable multi-page designs, videos, animations
Output format	Flat / exportable	Code / exportable	Flat / exportable	Flat / exportable; Content Credentials attached	Flat / exportable within Canva editor	Structured editable objects on canvas
Brand context	Manual per session	Via Figma design system	Canvas-aware within session	Enterprise Custom Models; personal library import	Brand Kit applied automatically at generation	Loaded at session start
In-chat UI generation	No	No	No	No	No	Yes
Multi-model AI	No	No	No	Yes (Runway, Pika, Luma, Google Veo, BFL, and more)	No (Dream Lab uses Leonardo.ai Phoenix)	No
Best for	Product designers, developers	Product teams in Figma ecosystem	Marketing creatives, solo designers	Creative professionals doing concepting and ideation	Non-designers and content teams needing fast, on-brand output	Creators and teams needing editable AI-generated design

For a detailed breakdown of how Canva Magic Studio compares to CoDesign specifically, see Canva Magic Studio vs. CoDesign.

How to Choose

The criteria here aren’t about feature counts. They’re about the kind of work you’re doing.

Choose Google Stitch if you’re a product designer or developer building UI and want an AI agent that reasons across your whole project, not just individual screens. It’s the most technically connected of the six—MCP server, code input, DESIGN.md export—and it’s clearly built for product interface work.

Choose Figma Make if you’re already in the Figma ecosystem and want to go from prompt to working prototype fast. It inherits your design system automatically, which removes a lot of setup friction, and it outputs functional code rather than static designs.

Choose Lovart if you need to produce full creative campaigns—brand identity, packaging, video, marketing assets—from a single prompt. Its MCoT reasoning engine and canvas-level consistency analysis make it particularly strong for high-volume marketing creative work.

Choose Adobe Firefly Boards if you’re a creative professional working inside the Adobe ecosystem who needs to generate and align on large volumes of visual concepts before moving them into production. It’s the right call for designers, photographers, and creative directors doing serious concepting work that will ultimately land in Photoshop, Premiere, or Illustrator.

Choose Canva Magic Studio if you need fast, on-brand creative output and your users aren’t designers. Magic Studio’s Brand Kit integration means generated designs pull from your saved colors, fonts, and logos automatically—no cleanup, no manual adjustment. It’s not the tool for pixel-level creative control, but for marketing teams and content creators producing high volumes across multiple formats and channels, that’s rarely the priority.

Choose CoDesign if you need AI-generated output you can actually edit. Every element lands on the canvas as a structured design object—headline, image block, color field—not a flat export. That matters when the brief changes, the brand needs adjusting, or the output needs to become ten variations rather than one. For creators and teams producing branded content at scale, that editability is the difference between a starting point and a finished asset.

CoDesign is in early access. Be among the first to prompt a direction and walk away with a design you can actually use. Talk to our team to learn more.

CE.SDK v1.71 Release Notes

Neslihan — Fri, 20 Mar 2026 20:37:43 GMT

v1.71 is a design capabilities release. Animations arrive on iOS, completing motion design across every platform. The web editor gets free layout mode. Variable fonts land across all platforms.

Let’s dive in!

Add Animations to Your iOS Video Editor

Add dynamic motion to your text and design elements with CE.SDK for iOS. Our Animations for design blocks (images, shapes, stickers) come with a comprehensive library. This release also ships with a sleek UI.

Comprehensive Animation Library
Access a full suite of in, out, and loop animations—mirroring the capabilities of our animation for Web and Android.

Tailored Motion Controls
Fine-tune animations like duration, easing, direction, and more.

→ iOS Animation Documentation
→ Try the iOS Video Editor Demo
→ Download the iOS Demo App

Design Multi-Format Scenes with Mixed Page Sizes

In your web editor, every page in a scene can now have its own dimensions. If enabled, the resize panel automatically adapts to your selection. Resize one page or all pages at once.

For your product, this means: users can design across multiple formats in a single session. Social post, banner, side by side.

One Font File, Every Weight: Variable Font Support

Our engine now supports variable fonts! A single font file can represent multiple weight and style variants, eliminating the need to load separate files for each.

For your app this means: leaner asset loading, more typographic flexibility, and better brand consistency for users working with modern type systems.

→ Variable Fonts Docs

Improvements

Stay Focused on a Simplified Video Timeline
The web video timeline now focuses on the active track by default, hiding other tracks to reduce visual noise. Users can still access everything, but the default view keeps attention on what they’re actually editing.

Full Changelog

All performance improvements, breaking changes, and fixes are in the v1.71.0 Changelog.

Thank you for building with IMG.LY.

What Is Vibe Design? The Definitive Guide for Product Builders, Designers, and Creative Teams

Klaudia — Fri, 20 Mar 2026 17:23:51 GMT

Vibe Design - A Concept That Just Got a Name

Creative work has always involved describing an idea and having someone skilled make it real. Vibe design follows the same principle — except the “someone” is AI, ready whenever you are, no brief needed. You describe what you want through text, images, brand assets, or sketches, and the AI generates the design. You direct the process; the tool handles the making.

The term itself is not new but was brought into mainstream use in early 2026 by Google via their Stitch announcement, and within a day it was appearing across The Register, CNBC, and TechRadar. The practice it describes had been building for well over a year — in Figma’s AI features, in generative design tools, in the growing number of products letting users create from a prompt rather than from a toolbox.

Today, we’ll define what vibe design actually is, traces where the idea came from, and explains what it means for people building products.

Where the Term Comes From: Vibe Coding’s Design Sibling

To understand vibe design, it helps to start with the concept it’s directly descended from: vibe coding.

Former Director of AI at Tesla and co-founder of OpenAI, Andrej Karpathy coined “vibe coding” in early 2025 to describe a shift in how developers work with AI-generated code. The idea: instead of writing implementation yourself, you describe what you want in natural language and an AI writes the code. The developer’s role shifts from implementation to direction. You stop thinking about how things are built and focus entirely on what you want to create.

Vibe design is the same shift applied to visual creation. Instead of opening a design tool and manually placing elements, adjusting colors, choosing fonts and spacing, you describe what you want — in words, or by uploading a reference image, a photo, a sketch, a brand kit — and the design takes shape. The phrase “vibe coding design” captures this lineage neatly: it’s the same intent-first principle, moved from engineering into the visual layer.

The underlying movement had been gathering momentum since AI image generators went mainstream, accelerating rapidly as tools like Figma Make, Lovart, and now Google Stitch brought the concept directly into design workflows. The label arrived late to a trend that had already changed how a lot of creative work gets done.

What Vibe Design Actually Means: A Working Definition

Here is a working definition that holds up across tools and use cases:

Vibe design is a creative workflow in which the primary input is intent — described in natural language or visual references — rather than manual manipulation of design tools. The designer’s role becomes one of direction, curation, and refinement rather than construction.

Three things define a genuine vibe design workflow:

1. Intent-first input. The starting point is a brief, a description, a reference image, or a combination — not a blank canvas and a toolbox. You’re communicating what you want, not building it.

2. Generative execution. An AI interprets that intent and produces a designed output — a layout, a color scheme, a complete page, a set of variations. The construction step is handled by the system.

3. Human refinement in the loop. The human stays involved throughout — approving directions, adjusting outputs, steering away from things that don’t work. The AI handles execution; the human handles judgment.

What vibe design is not: it’s not simply using an AI image generator to produce pictures. Image generation is one possible input into a vibe design workflow, not the workflow itself. Vibe design produces editable, structured design outputs — layouts, components, documents, campaigns — not static images. The output is something you can work with, not just something you can look at.

How It Differs from AI-Assisted Design

“AI-assisted design” has covered a lot of ground over the past few years: autocomplete for design tokens, background removal, content generation within a layout. These are useful additions to a manual workflow. But in all of them, the designer still drives — AI is a tool called on for specific tasks while the human remains in the seat.

Vibe design flips the ratio. The AI drives the initial creation; the human steers and refines. It’s a different relationship with the tool, not a faster version of the same one.

The distinction matters because it changes three things:

What skills are most useful. Writing clear, directed prompts and making fast curatorial judgments matters more than knowing every keyboard shortcut.
What the workflow looks like. You’re reviewing and steering outputs rather than constructing from scratch.
What software is relevant. Vibe design tools are built around a different interaction model than tools built to accelerate traditional manual design.

Vibe Design in Practice: Three Scenarios

The best way to make this concrete is to show what an AI design workflow built around vibe design actually looks like. These three scenarios cover the range of contexts where it’s becoming relevant.

Scenario 1: A Marketing Team, No Designer Available

A marketing manager at a mid-sized e-commerce brand needs a product launch campaign for social media. There’s no designer available this week — they’re tied up on a bigger project.

She opens the creative tool embedded in their marketing platform, uploads the product photo and the brand guidelines, and types: “Create a campaign for our summer collection — clean, minimal, white space heavy, headline-driven.”

She receives a set of formatted, brand-consistent assets sized for each social channel. The layouts are on-brand. The typography follows the guidelines she uploaded. She adjusts the headline copy on two of the assets and swaps one background color. The whole thing takes 12 minutes.

No design skills required. No third-party tool. No waiting for a designer to become available. The campaign goes out on schedule.

Scenario 2: A Designer Exploring Variations

A senior designer is working on a brand campaign for a luxury lifestyle client. She’s settled on a layout she likes, but she can’t land on the right color direction — everything she’s tried manually feels either too cold or too safe, and exporting variations to compare them side by side is eating time she doesn’t have.

Instead, she types a single instruction into the agent chat: “Add a panel on the left with five color theme presets I can click to instantly apply to my design.”

The agent builds the panel directly inside the editor. Five named presets — Warm Sand, Midnight, Rose Quartz, Forest, Slate Blue — each applying a complete color theme across the entire design in one click: backgrounds, accents, headings, body text, all updated together. She works through all five in under a minute and finds the direction she was looking for without typing another prompt.

The variation-exploration workflow, at its most useful, doesn’t just produce more outputs — it builds the tools you need to make the decision faster.

Scenario 3: A Product Team Embedding Creative Capability

A print-on-demand platform serves retailers and small brands who need to produce product catalogues regularly but don’t have in-house design resource. One of their customers — a retailer for a furniture brand — opens the editor, pastes a CSV of five products into the agent chat, and describes the layout style she wants: two-column landscape, typography-led, minimal, referencing the aesthetic of Hay, Muuto, and Frama.

The agent generates a complete five-page catalogue inside the editor — one page per product, consistent layout throughout, with product names, descriptions, prices, and photo placeholders already in place. She follows up in plain language: “Pre-fill the photo placeholders with elegant product photography, make them black and white, soft contrast.” The agent updates all five pages. She adjusts one headline manually and exports.

The Vibe Design Tools Shaping the Space Right Now

Several tools are explicitly built around this workflow.

Tool	What it does	Where the agent lives	Best for
Google Stitch	Voice and text prompts to UI design	Google’s standalone tool	UI/UX designers, developers
Figma Make	Prompt to prototype inside Figma	Inside Figma (standalone)	Product designers working in Figma
Lovart	AI design agent for graphic creation	Lovart’s standalone platform	Marketing creatives, solo designers
IMG.LY	Design companion for all types of design works and tasks	IMG.LY Codesign studio	Designers, marketers, brand owners

Google Stitch is built around the idea that UI design should start with a conversation. You describe a screen — its purpose, the actions it needs to support, the general feel — and Stitch produces an interface design you can refine. It’s aimed at developers and UI/UX designers who want to move faster in the early stages of building a product interface. Where it works well is in getting from a rough idea to a structured screen layout without having to make every decision from scratch.

Figma Make extends the environment that product designers already work in. Because it lives inside Figma, it has access to your existing components, tokens, and design system. The prompt-to-prototype workflow is useful for designers who want to explore how a brief might translate into a working layout without manually composing every frame. Its biggest advantage is that the output lands directly in a space where a full design team can take over.

Lovart is focused on graphic and campaign creation rather than UI or product design. It’s built for the kind of work that marketing creatives and solo designers do a lot of — producing visual assets for social, campaigns, brand activations. The emphasis is on speed and aesthetic quality for graphic outputs rather than on structured, component-based design systems.

IMG.LY brings a design companion together with manual canvas edits - each element created by AI can be manually moved, changed, or adapted. It maintains brand and template context throughout the generation process, redefining the meaning of templates - from simple asset with placeholders, to true brand guideliness. Excels at number of import and export options, making a great options for true graphic and asset designs.

Where Vibe Design Has Limits

Vibe design works well when there’s something to work from — a reference image, a brand kit, an existing visual direction. When there’s genuinely nothing to draw from, outputs tend toward the generic. A completely new brand identity with no existing visual language is a poor fit for a vibe design workflow; that kind of work still benefits from the deliberate, decision-by-decision process of traditional design.

It’s also less suited to accessibility-critical UI, where precise specification — contrast ratios, touch targets, interaction states — matters more than mood or aesthetic direction. A generated layout might look right without being accessible, and catching that requires careful manual review.

Finally, the more technically constrained the brief, the more refinement the output will need. Vibe design compresses the path to a starting point; it doesn’t always compress the path to a final, production-ready output. Teams that go in expecting to iterate will get more out of it than teams that expect to export and ship.

The Human Element: Vibe Design Is Not Autonomous Design

A common concern about vibe design workflows is that they reduce the role of skill and judgment in creative work. The evidence so far points the other way.

The most effective workflows keep the human firmly in control of direction, curation, and final judgment. The AI generates; the human decides what’s good, what fits the brief, what needs to change. Removing that layer doesn’t improve outcomes — it just produces more output with no quality filter.

What changes is not whether human judgment matters, but at which stage it matters most. In a traditional design workflow, judgment is exercised continuously — at every click, every color choice, every alignment decision. In a vibe design workflow, judgment operates at a higher level: Is this the right direction? Does this match the intent? What needs to change?

The craft is still there. The instruments are different.

A Shift That’s Already Underway

Vibe design isn’t a trend arriving from the future. It’s a name for a shift that’s been building for several years and just became visible enough to label properly.

The creative AI tools exist. The workflows are being adopted. The user expectation is forming. Naming the practice in 2026 didn’t create the movement — it just gave it a shared vocabulary that makes it easier to talk about and build toward.

If what you’re looking for is a balance between manual control of the output and power of AI generation, IMG.LY Codesign might be the right fit for you. Talk to our team to see how it can fit inside your stack.

Make Your Docs Agent-Ready: Compiling MDX into Markdown

Mirko — Wed, 11 Mar 2026 14:38:44 GMT

TL;DR: The 7x Efficiency Gain

We rebuilt our documentation pipeline to treat AI agents as a first-class audience. By natively compiling MDX into clean, fully-resolved Markdown—rather than heavy HTML or unresolved source code—agents and LLMs can now ingest our docs 7x faster and with far higher accuracy.

Test it yourself:
Request our docs with the Markdown accept header to see the agent-optimized view:

curl -s -H "Accept: text/markdown" https://img.ly/docs/cesdk/js/settings-970c98/

The Documentation Mismatch: Humans vs. Agents

If you build developer tools today, you have two distinct audiences: human engineers and the AI agents they use to write code. Recently, we realized we were treating them exactly the same.

Our docs pipeline is built on MDX and optimized for the browser. But when an LLM tries to ingest a page, it has to wade through navigation chrome, layout wrappers, and raw JSX. We didn’t just need a “clean text” mode; we needed a fundamentally different architecture.

Humans vs. Agents: A Comparative Overview

Feature	Humans (Browser)	Agents (Context Window)
Primary Format	HTML + CSS + JS	Clean Markdown
Navigation	Visual UI (Sidebar/Tabs)	Explicit links + hierarchy
Context	Implicit (Site layout)	Explicit (Frontmatter + headers)
Constraints	Performance / Core Web Vitals	Token / Context Window budgets
Payload Size	~222 KB	~31 KB (7x smaller)

The Problem: Why HTML and Raw MDX Fail Agents

1. HTML is expensive “Chrome”

A documentation site is an application. Even static sites ship navigation chrome, scripts, and styling hooks. For AI, this is “token noise.” You are paying for bytes that provide zero value to the LLM and forcing the agent to reconstruct a hierarchy that you already had at authoring time.

2. Raw MDX is unresolved source code

Serving raw MDX files doesn’t solve the problem either. MDX is for maintainers—it is full of imports and unresolved dependencies. Our documentation often pulls code from external, tested repositories:

## Initialize the Engine
<CodeBlock file="examples/getting-started/src/index.ts" lines="12-24" />

In the browser, this renders beautifully. In raw MDX, it’s a pointer to a file the agent cannot see. The actual code isn’t there.

The Solution: Treat Markdown as a Compilation Target

We stopped thinking about this as “exporting text” and started treating it as what it really is: a second build target.

Old Pipeline: MDX (Source) → HTML (Browser View)
New Pipeline: MDX (Source) → HTML AND MDX (Source) → Markdown (Agent View)

Why we didn’t just “convert” HTML

We tried rendering to HTML and then running a converter. It failed at code blocks. Syntax highlighting adds spans and wrappers around tokens; reversing that into clean, trustworthy code is nearly impossible.

<pre><code class="language-js">
  <span class="token keyword">const</span>
  <span class="token variable">engine</span>
  ...
</code></pre>

By working at the AST (Abstract Syntax Tree) level before rendering, we avoid this entirely.

Implementation: Transforming MDX at the AST Level

Rather than trying to reconstruct meaning from rendered markup, we preserve it directly. We built a remark plugin that transforms MDX at the MDAST level.

import { remark } from 'remark';
import remarkMdx from 'remark-mdx';
import remarkStringify from 'remark-stringify';
import { remarkTransformForExport } from './remarkTransformForExport';

const processor = remark()
  .use(remarkMdx) // Parse MDX/JSX nodes
  .use(remarkTransformForExport, {
    baseUrl: '[https://img.ly/docs/cesdk/](https://img.ly/docs/cesdk/)',
    paths: resolvedPathMap,
  })
  .use(remarkStringify); // Back to markdown

const markdown = await processor.process(mdxContent);

The Component Contract

Every MDX component must define how it exports to the agent view. We colocate the transform directly with the component: Aside.astro (Human UI) ↔ Aside.toMarkdown.ts (Agent logic).

Example: Aside Component → Blockquote

Input: <Aside title="Pro Tip">Use the basePath...</Aside>
Output: > **Pro Tip:** Use the basePath...

Example: Resolving Code References This is the most critical transform. Instead of a file pointer, the agent gets the actual, inlined code block fetched during the build process.

When you strip the sidebar and footer, you lose context. We reintroduce “navigational chrome” as text-native primitives at the top and bottom of every Markdown file:

---
title: 'Working with Filters'
platform: 'react'
url: '[https://docs.example.com/react/guides/filters/](https://docs.example.com/react/guides/filters/)'
---

> You’re reading the React docs. For the full corpus, see llms-full.txt.

## **Path:** [Home](https://docs.example.com/) > [Guides](https://docs.example.com/guides/)

[Self-contained Page Content]

---

## Continue Reading

- [Color Adjustments](https://docs.example.com/react/guides/color-adjustments/)
- [API Reference](https://docs.example.com/api/)

Lessons for Scaling Agentic DX

If you maintain docs at scale, “optimizing for bots” is no longer optional—it is the new standard for Developer Experience (DX).

Don’t serve HTML and hope: Reverse-engineering structure is hard for AI. Give it the structure directly.
Every component needs an identity: If a component carries meaning, it needs a Markdown equivalent. If it’s just layout, unwrap it.
Resolve everything: Assume zero ambient context. Links must be absolute, and code must be inlined.
Content Negotiation: Use the Accept: text/markdown header. It is becoming the industry standard for tools like Claude Code and OpenCode.
The Single-File Corpus: In addition to per-page files, generate a llms-full.txt that concatenates everything. Some agents prefer one large fetch over a crawl.

By acknowledging that AI agents are a primary consumer of our documentation, we’ve made our SDK significantly easier to integrate. The future of docs isn’t just “readable”. It’s “storable and traversable.”

Note: We built this for CE.SDK. The implementation uses Astro and Vercel, but the approach is framework-agnostic.

CE.SDK v1.70 Release Notes

Neslihan — Tue, 10 Mar 2026 16:08:17 GMT

Fresh off v1.69 (our biggest developer experience release yet), v1.70 now strengthens what’s already there. The Android video timeline gets a professional-grade overhaul, iOS and Android gain video duration controls. Under the hood, significant stability improvements across every platform.

Let’s dive in!

Edit Videos with Clarity on Android

These updates to the Android video timeline improve how editing looks and feels for your mobile users.

Use Real Audio Waveforms for Accurate Video Editing

Audio clips now display actual waveform visualization, replacing the previous placeholder. Users can see exactly where audio peaks and drops — making precise edits faster and more intuitive.

→ Explore Audio Waveform Docs

Keep Your Timeline Clutter-Free

Images, stickers, and shapes now display one thumbnail per clip, instead of repeating across the track. The timeline is cleaner and easier to read, keeping complex video compositions tidy on mobile screens.

Keep Text Visible Throughout Your Timeline

Text clips now show their actual text content alongside the clip label, so users can identify and navigate text layers without opening each one.

Improvements

Set Video Duration Limits on iOS and Android
You can now define minimum and maximum video duration constraints directly in CE.SDK on both iOS and Android.

Timeline markers make the boundaries visible to users while they edit, and export validation ensures clips meet the defined limits before rendering.

Edit Colors like a Pro – in One Panel

The color panel for web is now unified: preview, saved colors, and custom editing controls all live in one place. Users can pick, adjust, and reuse colors in a single continuous workflow, without a separate modal or extra clicks.

CMYK Color Mode for Web
Additionally, the web editor supports restricting the color picker to a specific color mode: RGB, CMYK. When CMYK is enforced, elements using a different color mode show a clear convert option rather than broken inputs.
New pages, asset library blocks, and fill type switches automatically convert colors to match the configured mode.

Full Changelog

All technical details, breaking changes, and migration notes are in the v1.70.0 Changelog.

Thank you for building with IMG.LY.

CE.SDK v1.69 Release Notes

Neslihan — Fri, 27 Feb 2026 18:29:53 GMT

v1.69 is the biggest developer experience release we’ve shipped. Agent Skills collapse the time from idea to working editor from days to under a minute. Production-ready Starter Kits eliminate days of boilerplate setup. PPTX and Canva Importer lets users bring their existing designs directly into your editor. And a comprehensive video overhaul across Web, iOS, and Android closes the gap between CE.SDK and native professional editing apps.

Let’s dive in!

Introducing IMG.LY Agent Skills for CE.SDK

The biggest change to CE.SDK’s developer experience since launch.

AI agents have changed how developers build. With Agent Skills, CE.SDK works natively with your AI agent.

Install the plugin for Claude Code or Cursor and your AI coding agent becomes a CE.SDK expert with bundled access to guides, API references, and starter kits across 10 web frameworks. No external services, no MCP servers, no context-switching.

What your developers can now do:

/cesdk:build — Describe a use case in plain language. The agent detects the framework, pulls the right starter kit, and scaffolds a working project autonomously.
/cesdk:explain — Ask any CE.SDK implementation question and get answers adapted to the specific framework and experience level.
/cesdk:docs-[framework] — Retrieve guides and API references directly from the IDE, without leaving the editor.

For your product, this means: developers prototype in minutes, not days. Non-technical team members can now build and extend functional editors independently. And onboarding new engineers to CE.SDK shrinks from a multi-day ramp to a single session.

→ Quick Start & Full Announcement
→ Explore Agent Skills Documentation

Launch in Minutes with Production-Ready Starter Kits for Web

Previously, getting CE.SDK running in a real product meant adapting complex demo projects: stripping features, adjusting architecture, and undoing assumptions baked into example code.

Starter Kits replace all of that with pre-configured, production-ready editor UIs.

Specialized kits for Photo, Video, and Design editors are scoped, clean, and immediately deployable. Each kit starts with a focused feature set. You explicitly opt in to what you need, so your UI stays performant and your users don’t see capabilities they can’t use.

For your product, this means: a functional, shippable editor in minutes rather than days of setup. Clean architecture from day one, without accumulating technical debt.

→ Explore Starter Kit Documentation

Let Users Bring Their PPTX & Canva Designs to CE.SDK

Some customers don’t start from scratch. They have existing creative assets locked inside PowerPoint and Canva — and until now, bringing those into CE.SDK required manual recreation.

The new PPTX Importer removes that barrier.

Users can import native PowerPoint files or export Canva designs as PPTX and bring them directly into your CE.SDK-powered editor, with layouts, elements, and structure intact.

→ Try the PPTX Import Demo
→ View PPTX npm

Professional-Grade Video Editing Across Platforms

This release expands CE.SDK’s video features across web & mobile platforms.

Control Video Speed (iOS & Android)

Users can now adjust the playback speed of video and audio clips via a dedicated Speed UI. This has been one of the most-requested mobile features and is now available on both platforms.
→ View Video Speed Documentation iOS
→ View Video Speed Documentation Android

Create Video Groups in the Timeline (Web)

Multiple clips can now be combined into a single manageable unit with synchronized timing, trimming, and a unified timeline representation.

This enables complex, multi-layer content production and speeds up the design process.

Video Timeline Now Grows Automatically (Web)

The timeline now automatically adjusts its height based on content. Manual track configuration is gone, and complex projects are easier to pick up for your new users.

Use a Clutter-Free iOS Timeline (iOS)

Non-video tracks now show a single thumbnail per clip, reducing clutter in multi-layer timelines on your iOS app.

Full Changelog

See all technical details, breaking changes, and performance improvements in the v1.69.0 Changelog.

Thank you for building with IMG.LY.

Building a CapCut-Like Video Editor with CE.SDK and AI

Jan — Thu, 26 Feb 2026 22:50:34 GMT

Build this with AI in minutes

This tutorial is a great way to understand how CE.SDK works under the hood. But if you just want to get to the result, you can build this entire editor using IMG.LY Agent Skills, no manual setup required.

Install the skills, then run:

/cesdk:build Build a CapCut-like video editor with a dark theme, multi-track timeline, AI video/image/audio generation, background removal, and MP4 export.

Want to understand a specific concept in depth? Use /cesdk:explain — for example:

/cesdk:explain How does the video timeline and block hierarchy work?

Introduction

CapCut has set the standard for accessible video editing. Its dark UI, intuitive timeline, and AI-powered features make it feel like a professional tool that anyone can use. But what if you could build something similar embedded directly in your own web application in minutes? Yes, minutes!

In this tutorial, we’ll walk through how we built a CapCut-like video editor using IMG.LY’s CreativeEditor SDK (CE.SDK) for React. The finished editor includes:

A multi-track timeline for video, audio, text, and captions
Trim, split, and join operations on video clips
A CapCut-inspired dark theme built with CSS custom properties
AI video generation (text-to-video, image-to-video) via Minimax, Kling, and Pixverse
AI image generation (text-to-image, image editing) via RecraftV3, IdeogramV3, and GPT Image
AI audio generation (text-to-speech, sound effects) via ElevenLabs
AI text generation (copywriting, translation) via Anthropic Claude
Background removal — client-side, powered by WebAssembly/WebGPU
MP4 export directly from the browser

The entire editor is a single React component with roughly 180 lines of JavaScript and 100 lines of CSS.

Architecture Overview

CE.SDK has two main layers:

CreativeEngine: The headless core that manages scenes, blocks, assets, and rendering. It handles the video timeline, playback, and export entirely client-side.
CreativeEditor UI: A pre-built, customizable UI layer that wraps the engine with a dock, inspector, timeline, canvas, and navigation bar.

Plugins extend both layers. The AiApps plugin, for example, registers AI providers with the engine and injects UI components (dock buttons, canvas menu items, generation panels) into the editor.

Step 1: Project Setup

We scaffolded a React project with Vite and installed CE.SDK alongside the AI plugin packages:

npm create vite@latest capcut-like-editor -- --template react
cd capcut-like-editor
npm install

# Core SDK
npm install @cesdk/cesdk-js

# AI plugins
npm install @imgly/plugin-ai-apps-web
npm install @imgly/plugin-ai-video-generation-web
npm install @imgly/plugin-ai-image-generation-web
npm install @imgly/plugin-ai-audio-generation-web
npm install @imgly/plugin-ai-text-generation-web

# Background removal (runs locally via WASM/WebGPU)
npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0

Why so many packages?

CE.SDK follows a modular plugin architecture. Each AI capability is a separate package with its own provider modules. This means you only bundle what you use if you don’t need audio generation, don’t install @imgly/plugin-ai-audio-generation-web. The @imgly/plugin-ai-apps-web package is the unifying layer that brings them all together into a single dock panel.

Step 2: The React Component

CE.SDK provides a first-class React wrapper via @cesdk/cesdk-js/react. The <CreativeEditor> component handles mounting, initialization, and cleanup:

import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  // license: 'YOUR_CESDK_LICENSE_KEY',
};

const init = async (cesdk) => {
  // All setup happens here — theme, assets, plugins, UI customization
};

export default function VideoEditor() {
  return (
    <CreativeEditor config={config} init={init} width="100vw" height="100vh" />
  );
}

The config object is passed to the engine at creation time. The init callback fires once the cesdk instance is ready — this is where all our customization lives.

Pitfall: Silent init errors. The <CreativeEditor> component swallows errors thrown inside init. If something fails, the editor loads but appears broken with no console output. Always wrap init in a try/catch:

Step 3: Creating the Video Scene

A video editor needs three things at startup: asset sources, a video scene, and a timeline.

// Load built-in asset libraries (stickers, shapes, filters, typefaces, etc.)
await cesdk.addDefaultAssetSources();

// Load demo content (sample videos, images, audio) + enable upload slots
await cesdk.addDemoAssetSources({
  sceneMode: 'Video',
  withUploadAssetSources: true,
});

// Create a video scene with timeline
await cesdk.createVideoScene();

createVideoScene() sets up the scene hierarchy that powers the timeline:

Scene
 └── Page (represents the video canvas — 1920x1080 by default)
      ├── Track (video track — holds video clips in sequence)
      ├── Track (overlay track — text, stickers, images)
      ├── CaptionTrack (subtitles synced to playback)
      └── Audio (background music, voiceover, sound effects)

Each element on the timeline is a block with timing properties: timeOffset (when it appears) and duration (how long it plays). The engine handles rendering each frame, compositing layers, and synchronizing audio.

Browser support

Video editing relies on modern web codecs (WebCodecs API), which are available in Chromium-based browsers (Chrome, Edge, Brave). Safari and Firefox support is limited.

Step 4: The CapCut Dark Theme

CapCut’s visual identity is defined by its deep charcoal backgrounds, teal accent colors, and subtle elevation layers. CE.SDK’s theming system maps perfectly to this through CSS custom properties.

Setting the base theme

cesdk.ui.setTheme('dark');

This activates CE.SDK’s built-in dark theme. But we want to go further — we need CapCut’s specific color palette.

Custom CSS overrides

CE.SDK scopes all its UI under .ubq-public with data-ubq-theme and data-ubq-scale attributes. We override the CSS custom properties to inject our palette:

.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'],
.ubq-public[data-ubq-theme='dark'][data-ubq-scale='modern'] {
  /* Deep charcoal backgrounds — darker than CE.SDK's default dark */
  --ubq-canvas: hsl(220, 15%, 8%) !important;
  --ubq-elevation-1: hsl(220, 13%, 12%) !important;
  --ubq-elevation-2: hsl(220, 12%, 15%) !important;
  --ubq-elevation-3: hsl(220, 10%, 18%) !important;

  /* High-contrast white text */
  --ubq-foreground-default: hsla(0, 0%, 100%, 0.92) !important;
  --ubq-foreground-light: hsla(0, 0%, 100%, 0.55) !important;

  /* CapCut's signature teal/cyan accent */
  --ubq-interactive-accent-default: hsl(190, 85%, 48%) !important;
  --ubq-interactive-accent-hover: hsl(190, 85%, 42%) !important;
  --ubq-interactive-accent-pressed: hsl(190, 85%, 36%) !important;

  /* Subtle borders — barely visible, like CapCut */
  --ubq-border-default: hsla(0, 0%, 100%, 0.08) !important;
}

The key design decisions:

Property	Value	Why
`--ubq-canvas`	`hsl(220, 15%, 8%)`	Near-black with a slight blue tint — matches CapCut’s canvas area
`--ubq-elevation-1/2/3`	12% → 15% → 18% lightness	Subtle elevation steps create depth without harsh contrast
`--ubq-interactive-accent-*`	`hsl(190, 85%, 48%)`	CapCut’s teal — used for buttons, selections, and progress bars
`--ubq-border-default`	8% opacity white	Nearly invisible borders that only appear on close inspection

Responsive scale

We also configure responsive scaling so the editor adapts to touch devices:

cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  if ((containerWidth && containerWidth < 768) || isTouch) {
    return 'large'; // Bigger touch targets on small/touch screens
  }
  return 'normal'; // Standard desktop sizing
});

Step 5: AI Plugin Integration

This is where the editor transforms from a basic video tool into something that feels like CapCut’s AI-powered experience. CE.SDK’s plugin system lets us add all AI capabilities through a single unified AiApps plugin.

The unified AiApps approach

Instead of registering each AI plugin separately, @imgly/plugin-ai-apps-web provides a single entry point:

import AiApps from '@imgly/plugin-ai-apps-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';

await cesdk.addPlugin(
  AiApps({
    dryRun: true, // Simulate for development — no API calls
    providers: {
      text2text: Anthropic.AnthropicProvider({ proxyUrl: PROXY_URL }),
      text2image: [FalAiImage.RecraftV3({ proxyUrl }) /* ... */],
      image2image: [FalAiImage.GeminiFlashEdit({ proxyUrl }) /* ... */],
      text2video: [FalAiVideo.MinimaxVideo01Live({ proxyUrl }) /* ... */],
      image2video: [
        FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl }) /* ... */,
      ],
      text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl }),
      text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl }),
    },
  })
);

Provider categories explained

Category	What it does	Models we configured
`text2text`	AI copywriting — improve text, translate, change tone	Anthropic Claude
`text2image`	Generate images from text prompts	RecraftV3, IdeogramV3, GPT Image
`image2image`	Transform existing images with AI	Gemini Flash Edit, GPT Image
`text2video`	Generate video clips from text descriptions	Minimax Video, Kling Video, Pixverse
`image2video`	Animate a static image into video	Minimax Video, Kling Video
`text2speech`	Convert text to spoken audio with voice selection	ElevenLabs Multilingual V2
`text2sound`	Generate sound effects from text	ElevenLabs Sound Effects

When multiple providers are configured in an array (like text2image), the UI automatically shows a provider/model selection dropdown so users can choose which AI model to use.

The proxy server requirement

Every provider takes a proxyUrl parameter. This is critical for production:

Browser  →  Your Proxy Server  →  AI Provider (fal.ai, ElevenLabs, etc.)
                ↑
          Injects API keys
          server-side

Your API keys should never be in client-side code. The proxy server receives requests from CE.SDK, attaches your API key, and forwards to the AI provider. During development, dryRun: true simulates generation without any API calls.

Background removal

Background removal is a separate plugin because it runs entirely client-side — no proxy needed:

import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';

await cesdk.addPlugin(
  BackgroundRemovalPlugin({
    ui: { locations: ['canvasMenu'] },
  })
);

This uses ONNX Runtime (WebAssembly + WebGPU) to run an AI segmentation model directly in the browser. The first run downloads ~40MB of model weights, which are then cached. Select any image on the canvas and click “Remove Background” in the context menu.

Step 6: UI Customization with the Component Order API

CE.SDK’s UI is built from five customizable areas: Dock, Inspector Bar, Canvas Menu, Navigation Bar, and Canvas Bar. The Component Order API lets us insert, remove, and reorder components in each area.

Adding the AI button to the dock

We want the AI Apps button to be the first thing users see in the dock:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.dock', position: 'start' },
  'ly.img.ai.apps.dock'
);

insertOrderComponent takes a location specifier and the component(s) to insert. position: 'start' puts it at the top of the dock. Alternative positions include 'end', a numeric index, or relative placement with before/after matchers.

When a user selects a text or image block and right-clicks, we want AI options available:

cesdk.ui.insertOrderComponent({ in: 'ly.img.canvas.menu', position: 'start' }, [
  'ly.img.ai.text.canvasMenu',
  'ly.img.ai.image.canvasMenu',
]);

Passing an array inserts multiple components at once.

We add an Export button with a real click handler that triggers MP4 export:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.navigation.bar', position: 'end' },
  {
    id: 'ly.img.action.navigationBar',
    key: 'export',
    label: 'Export',
    icon: '@imgly/Download',
    onClick: async () => {
      const engine = cesdk.engine;
      const page = engine.block.findByType('page')[0];
      if (page) {
        const blob = await engine.block.exportVideo(page, {
          mimeType: 'video/mp4',
        });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4';
        a.click();
        URL.revokeObjectURL(url);
      }
    },
  }
);

The exportVideo method renders every frame of the timeline — compositing video tracks, overlays, text, captions, and audio — into an MP4 blob entirely in the browser.

Step 7: Wiring Generated Audio into the Asset Library

AI-generated audio (speech and sound effects) is stored in provider-specific history sources. To make this audio browsable alongside regular audio assets, we inject the history source into the audio asset library entry:

const audioEntry = cesdk.ui.getAssetLibraryEntry('ly.img.audio');
if (audioEntry != null) {
  const existingSourceIds = Array.isArray(audioEntry.sourceIds)
    ? audioEntry.sourceIds
    : audioEntry.sourceIds({});
  cesdk.ui.updateAssetLibraryEntry('ly.img.audio', {
    sourceIds: [...existingSourceIds, 'ly.img.ai.audio-generation.history'],
  });
}

Now when users open the Audio panel in the dock, they’ll see their AI-generated audio alongside the sample library.

Step 8: Custom Labels with i18n

CE.SDK’s i18n system lets us customize any UI string. We used it to make the AI prompt fields more inviting:

cesdk.i18n.setTranslations({
  en: {
    'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt':
      'Describe your video...',
    'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt':
      'Describe your image...',
  },
});

Translation keys follow the pattern {plugin-id}.{provider-id}.property.{field}. You can also add multi-language support by including keys for de, fr, es, etc.

The Complete File Structure

capcut-like-editor/
├── src/
│   ├── App.jsx              # Root — imports VideoEditor + theme CSS
│   ├── VideoEditor.jsx      # The entire editor (single component, ~180 lines)
│   ├── capcut-theme.css     # CapCut dark theme overrides (~100 lines)
│   ├── index.css            # Global reset (margin/padding/overflow)
│   └── main.jsx             # React entry point
├── index.html
├── package.json
└── vite.config.js

That’s it. The entire CapCut-like editor is three files: one React component, one CSS file, and a thin App wrapper.

What We Get Out of the Box

Because CE.SDK’s video UI is pre-built, we didn’t write any code for these features — they come from createVideoScene() and the default UI:

Multi-track timeline with drag-to-reorder, drag-to-resize
Trim and split — drag clip edges or use the split tool
Join and arrange — drag clips between tracks
Transform — crop, flip, rotate via the inspector
Playback controls — play, pause, seek, scrub
Text overlays — add styled text with the text tool
Stickers and graphics — from the asset library
Filters and effects — LUT-based color grading
Undo/redo — full history stack
Zoom and pan — standard canvas navigation

The AI plugins add their own UI components (dock buttons, generation panels, context menu items) through the plugin system. We just positioned them where we wanted.

Going to Production

To take this from a prototype to production, you need three things:

1. License key

Get a free trial key at https://img.ly/forms/contact-sales and set it in the config (yes, if you want to ship to production you’ll have to talk to our lovely colleagues in sales):

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
};

2. Proxy server

Set up a server that forwards AI requests with your API keys:

const PROXY_URL = 'https://your-server.com/api/ai-proxy';

See the CE.SDK Proxy Server guide for Express.js and other server examples.

3. Disable dry run

Remove dryRun: true from the AiApps configuration to enable real AI generation.

Key Takeaways

CE.SDK does the heavy lifting. The timeline, playback, rendering, and export are all handled by the engine. We wrote zero video processing code.
The plugin system is powerful. Six AI capabilities were added with a single addPlugin(AiApps({ ... })) call. Background removal was one more call.
CSS custom properties make theming painless. We matched CapCut’s aesthetic by overriding ~25 CSS variables. No forking, no patching.
The Component Order API is the customization backbone. insertOrderComponent with position-based placement is the cleanest pattern for adding UI elements.
Wrap init in try/catch. CE.SDK’s <CreativeEditor> swallows errors silently. This is the single most important debugging tip.
Pin your package versions. All @imgly/* plugins must match the @cesdk/cesdk-js version exactly. A version mismatch (like 1.68 vs 1.69) will cause peer dependency conflicts.

Resources

Introducing IMG.LY Agent Skills

Neslihan — Mon, 16 Feb 2026 18:54:06 GMT

TL;DR
We are moving beyond static documentation. IMG.LY Agent Skills is a specialized intelligence layer that transforms AI coding assistants (Claude Code, Cursor, Windsurf) into CE.SDK implementation experts. Instead of mapping APIs manually, you now inject our full SDK expertise directly into your IDE and coding agent.

→ Explore Agent Skill Documentation
→ Access Agent Skills GitHub Repository

The “Quick Start” Paradox

In our recent analysis of client integrations, a consistent pattern emerged: even with a high-performance SDK, the “Time to First Edit” is often delayed by research. Developers spend a significant portion of their initial integration time context-switching between their IDE and documentation, manually mapping complex API hierarchies to their specific framework.

We figured: You don’t just need better documentation; you need an expert partner who is already inside your codebase.

The Solution: IMG.LY Agent Skills for Web

We are moving beyond static documentation. Today, we are launching IMG.LY Agent Skills, a specialized intelligence layer that transforms AI coding assistants like Claude Code, Cursor, and Gemini into CE.SDK implementation experts.

Instead of searching for answers, you now give your agent our complete SDK knowledge with a single command.

How It Works: Your Autonomous Implementation Partner

By injecting versioned, live documentation and framework-specific starter kits directly into your agent’s context window, we’ve created three adaptive paths to launch:

1. The Explain Path

Architecture is complex. The Explain Skill acts as a digital implementation partner that adapts to you. It can provide a technical deep-dive on the export pipeline for a Senior Dev or a high-level summary for a Product Manager—in any language and at any level of detail.

2. The Build Path

Command your agent to “Add a photo editor to my React app.” The agent autonomously detects your environment, pulls the correct starter kit, and handles the boilerplate. It doesn’t just show you code; it builds the foundation for you.

3. The Docs Path

Stop the tab-switching. Your agent retrieves versioned API references offline, keeping your focus entirely within the terminal or IDE.

The Shift to Autonomous Engineering

This release marks a strategic shift for IMG.LY. We believe the next era of software development isn’t about “better documentation,” but about Portable Expertise.

By providing that AI with a “skill” rather than a manual, we are empowering teams to move from a multi-month build cycle to a 30-second scaffold.

Supported Frameworks

The initial Web release supports 10 frameworks out of the box:
React · Vue.js · Svelte · Angular · Next.js · Nuxt.js · SvelteKit · Electron · Node.js · Vanilla JS

Get Started

Run the command:

npx skills add imgly/agent-skills

For example, Claude Code users, can run:

claude plugin marketplace add imgly/agent-skills

claude plugin install cesdk@imgly

→ Explore the full Agent Skill Documentation

The “editor of your dreams” is now a conversation away.

Join 3,000+ creative professionals who get early access to new features and updates—subscribe.

Migrating from Canva Connect API to IMG.LY SDK: A Practical Implementation Guide

Klaudia — Wed, 11 Feb 2026 12:13:28 GMT

If you’re reading this, you’ve probably hit Canva Connect API’s walls.

Maybe you need deeper UI customization than Canva allows. Maybe you’re tired of Canva branding in your product. Maybe you need offline editing, server-side automation, or deployment flexibility that Canva’s cloud-only model can’t provide.

This guide is for teams currently using Canva Connect API who need a clear path to migrate to IMG.LY’s CreativeEditor SDK (CE.SDK). We’ll walk through the decision framework, feature mapping, step-by-step migration process, code comparisons, timeline estimates, and risk mitigation strategies. This isn’t about whether you should migrate—it’s about how to execute the migration with minimal disruption to your product and users. Need more reasons to switch to IMG.LY? Check out our customer report with real numbers and feedback about implementation and working with IMG.LY.

We’ve worked with teams who’ve made this transition. Some ran both systems in parallel during cutover. Others migrated user segments gradually. All of them needed a clear implementation plan that addressed technical migration, user experience continuity, and rollback options. That’s what this guide provides.

If you’re only looking for a Canva Connect alternative, check out this guide.

Executive Summary: What This Migration Involves

Who this guide is for: Development teams, product managers, and technical decision-makers currently using Canva Connect API who need more control, customization, or deployment flexibility than Canva provides.

Why teams migrate: Canva Connect API works well for basic embedded editing with Canva’s branded experience. Teams migrate when they need white-label customization, offline support, server-side rendering, headless automation, or infrastructure control that Canva’s SaaS model doesn’t offer.

What changes: You’re moving from a cloud-dependent embedded Canva editor to an SDK that runs on your infrastructure. This shift gives you complete control over UI, branding, deployment, and data—but requires more technical integration upfront.

Migration complexity: Moderate to significant, depending on how deeply Canva Connect API is integrated into your product. Expect 2-6 weeks for basic implementations, 2-4 months for complex integrations with extensive customization and user migration planning. Many teams start with CE.SDK using the default UI and only customize as needs evolve—you don’t need to build everything from scratch on day one.

Key benefit: Complete control over editing experience, UI customization, branding, deployment options (client-side or server-side), offline capabilities, and data ownership—without vendor lock-in to Canva’s roadmap or infrastructure.

When Migration Makes Sense (Canva-Specific Pain Points)

Not every Canva Connect API user needs to migrate. Here are the specific limitations that typically trigger the decision:

You’ve hit Canva’s customization ceiling. Canva Connect API gives you access to Canva’s editor, but you can’t modify the core interface, remove Canva branding completely, or build custom editing workflows. If your product needs deep UI customization or a fully white-labeled experience, Canva’s constraints become blockers.

Canva branding conflicts with your brand identity. While Canva offers some branding customization, users still know they’re using Canva. If you’re building a product where editing needs to feel native—not like an embedded third-party tool—the Canva branding creates friction.

You need offline editing capabilities. Canva Connect API requires internet connectivity. If your users need to work offline (on planes, in areas with unreliable connectivity, or in secure environments without external network access), Canva’s cloud-dependent architecture won’t work.

Server-side automation is critical. Canva Connect API focuses on user-driven editing through their interface. If you need headless automation, batch processing, or programmatic generation on your servers without user interaction, you’ll struggle with Canva’s SaaS model.

Data ownership and infrastructure control matter. Canva Connect API runs on Canva’s infrastructure, which means your creative data flows through their systems. If data sovereignty, compliance requirements, or complete infrastructure control are important, Canva’s model introduces dependencies you can’t eliminate.

You need deployment flexibility across platforms. Canva Connect API is web-focused. If you need native mobile SDKs, desktop applications, or server-side rendering with the same editing engine and consistent output, Canva’s platform coverage has gaps.

If two or more of these pain points resonate, migration probably makes sense. If Canva Connect API meets your needs and you don’t face these limitations, there’s no compelling reason to migrate.

What You’ll Gain from Migration

Moving from Canva Connect API to IMG.LY CE.SDK unlocks capabilities that Canva’s architecture doesn’t support. Here’s what changes:

Complete white-label control. Remove all vendor branding, customize every UI component, match your design system precisely, or build entirely custom interfaces using the headless API. Your editing experience looks and feels like a native part of your product, not an embedded third-party tool.

Offline editing support. After initial SDK load, users can edit, export, and work with templates completely offline. No internet dependency for core editing functionality, which matters for mobile apps, travel scenarios, or secure environments.

Server-side rendering and automation. Run the same rendering engine on your Node.js servers for programmatic asset generation. Create thousands of personalized variants from templates, integrate with marketing automation platforms, or build batch processing workflows—all without user interaction.

Full infrastructure control. The SDK runs entirely on your infrastructure (client-side in browsers/mobile apps or server-side in your Node.js environment). You control data flow, storage, processing, and compliance. No creative assets or user data flows through IMG.LY’s servers unless you explicitly choose external integrations like Getty Images or Unsplash.

Cross-platform consistency. Deploy the same editing capabilities across web (JavaScript, React, Vue, Angular, Svelte), native mobile (iOS, Android, React Native, Flutter), desktop (Electron), and server (Node.js). The underlying C++ rendering engine ensures identical output across all platforms.

Headless architecture flexibility. Use the SDK three ways: full pre-built UI for out-of-the-box editing, custom UI built on the engine APIs, or pure headless mode for programmatic generation without any UI. Mix approaches as needed—visual editor for template creation, headless API for automated generation.

Success Story: Halio’s Migration

Halio, a UK-based SaaS platform helping financial advisors create and manage social media content, faced challenges manually creating customized assets using tools like Canva. The process couldn’t scale to meet growing client demand for consistent, branded content.

After migrating to IMG.LY CE.SDK, Halio unlocked scalable, automated content generation integrated directly into their platform. Mark Lamb, Co-founder of Halio, explained the impact:

“Our users love the fact that they can either just edit an existing template…or go in and build it themselves. It’s super easy.”

The flexibility to support both template-driven workflows and custom creation—combined with complete white-label control—gave Halio the editing experience they needed without Canva’s limitations. Read the full Halio case study to see how they implemented CE.SDK across their platform.

Pre-Migration Checklist

Before starting technical migration work, document your current implementation and plan your approach:

Audit Current Canva Integration

Map all Canva Connect API touchpoints. Identify every place in your codebase where you initialize Canva’s editor, load designs, handle exports, or interact with Canva’s API. Document initialization parameters, custom configurations, and integration points.

Document current user workflows. How do users currently interact with Canva’s editor? What editing features do they use most? Which capabilities are business-critical vs. nice-to-have? Understanding actual usage patterns helps prioritize migration work.

Catalog existing designs and templates. How many templates do users have? Are they stored in Canva’s system or yours? Do you programmatically generate designs, or is everything user-created? You’ll need a strategy for migrating or recreating these assets.

Identify customization gaps. What do you wish you could customize in Canva but can’t? What UI elements feel out of place? What features do users request that Canva doesn’t support? These become your migration opportunity list.

Assess Technical Dependencies

Review authentication integration. How does your authentication system work with Canva? Do you pass user tokens? How are permissions managed? IMG.LY’s SDK authentication model differs from Canva’s, so you’ll need to adapt.

Map asset storage and delivery. Where do images, fonts, and media assets currently live? How does Canva access them? CE.SDK can integrate with cloud storage, CDNs, or local asset libraries, but you’ll need to configure these connections.

Document export workflows. What happens after users finish editing? Where do exported assets go? How are they processed, stored, or delivered? Ensure your export pipeline can handle CE.SDK’s output formats and data structures.

Evaluate infrastructure requirements. If you plan to use server-side rendering for automation, do you have Node.js infrastructure? For GPU-accelerated video rendering, do you have access to Linux servers with GPU support? For mobile apps, do you have native development capabilities?

Conceptual Model Shift: Canva vs IMG.LY

Understanding the architectural difference between Canva Connect API and CE.SDK helps clarify why certain migration steps are necessary and what new capabilities become possible.

Canva Connect API: SaaS Embedded Editor

Canva Connect API gives you an iframe or embed that loads Canva’s editor from their infrastructure. Your application integrates by:

Initialization: You embed Canva’s interface using their JavaScript SDK
Authentication: Users authenticate through your system, but editing happens in Canva’s environment
Editing: All editing occurs in Canva’s cloud-hosted editor with their UI and branding
Storage: Designs and assets live in Canva’s infrastructure (with API access)
Export: Canva generates exports on their servers and delivers results to you
Updates: Canva controls feature rollout, UI changes, and API evolution

This model works well for teams who want a production-ready editor without building infrastructure. The tradeoff is limited customization, Canva branding, cloud dependency, and reliance on Canva’s roadmap.

IMG.LY CE.SDK: Client-Controlled SDK

CE.SDK is a software library you integrate directly into your application that runs on your infrastructure. Your application works by:

Initialization: You instantiate the SDK in your codebase (client-side JavaScript or server-side Node.js)
Rendering: A C++ engine bundled with the SDK handles all rendering locally on user devices or your servers
Editing: Users interact with UI you control (pre-built components you customize or fully custom interfaces you build)
Storage: All data and assets remain on your infrastructure unless you choose external integrations
Export: Rendering happens client-side (in browsers/mobile apps) or server-side (in your Node.js environment)
Updates: You control when to upgrade SDK versions and roll out new features

This model gives you complete control over experience, branding, infrastructure, and data flow. The tradeoff is more technical integration work upfront and ongoing maintenance responsibility.

The Control Spectrum

Here’s what shifts from Canva’s control to your control:

Aspect	Canva Connect API	IMG.LY CE.SDK
UI Customization	Limited to Canva’s configuration options	Full control—customize everything or build from scratch
Branding	Canva branding present (limited white-labeling)	Complete white-label—no IMG.LY branding
Infrastructure	Canva’s cloud infrastructure	Your infrastructure (client or server)
Data Flow	Through Canva’s systems	Entirely within your systems
Offline Capability	Requires internet connection	Full offline support after initial load
Platform Support	Web-focused	Web, native mobile, desktop, server
Automation	User-driven editing primarily	Equal-weight headless automation
Feature Updates	Canva’s timeline	Your upgrade schedule

Deployment Model Differences

Canva’s deployment: Your app → Canva’s editor (cloud) → Canva’s rendering servers → Export delivered to you

CE.SDK’s deployment (client-side): Your app → SDK embedded in your app → Rendering on user’s device → Export in your app

CE.SDK’s deployment (server-side): Your server → SDK running in Node.js → Rendering on your server → Export stored/delivered by you

This architectural shift is why migration requires more than swapping API endpoints—you’re fundamentally changing where editing and rendering happen.

Mapping Core Features: Migration Cheat Sheet

This table maps common Canva Connect API capabilities to CE.SDK equivalents. Use this as a reference when translating your Canva integration to CE.SDK.

Canva Connect API Feature	IMG.LY CE.SDK Equivalent	Implementation Notes
Initialize editor	`CreativeEditorSDK.create()`	Replace Canva’s SDK initialization with CE.SDK setup. Configuration includes license, UI options, and feature flags.
Load design/template	`engine.scene.loadFromURL()` or `cesdk.createDesignScene()`	You can recreate templates in CE.SDK format or import Canva templates directly to CE.SDK.
User authentication	Your own auth system + license management	CE.SDK doesn’t handle user auth—implement using your existing authentication. License management happens separately.
Asset library integration	Asset API + custom asset sources	CE.SDK connects to Getty Images, Unsplash, or your own asset storage. Configure asset sources via plugin system.
Custom fonts	Font API + custom font loading	Upload custom fonts to your CDN/storage and configure CE.SDK to load them. Supports WOFF, WOFF2, TTF formats.
Export to PNG/JPG	`engine.block.export(blockId, { mimeType: 'image/png' }`	Similar export API. You control export quality, resolution, format. Export happens client-side or server-side.
Export to PDF	`engine.block.export(blockId, { mimeType: 'application/pdf' })`	Full PDF support including print-ready PDF/X with CMYK and Pantone color spaces.
Export to video	`engine.block.exportVideo(pageId, options)`	Timeline-based video editing with MP4 export. Supports custom bitrates, framerates, resolution.
Template variables	Variable API: `engine.variable.setString()`	Define variables in templates, populate programmatically or through UI. Same template works for UI editing and automation.
Programmatic design creation	Block API + Scene API	Create designs entirely through code. Full control over elements, layers, composition, properties.
Batch generation/automation	Server-side Node.js SDK + rendering pipeline	Run CE.SDK in Node.js for headless generation. GPU-accelerated Docker containers available for high-volume rendering.
Real-time collaboration	Not built-in (implement using your own infrastructure)	CE.SDK doesn’t include built-in collaboration. Implement using operational transforms, WebRTC, or your preferred real-time architecture.
Design history/versioning	Not built-in (implement using your own storage)	CE.SDK doesn’t include versioning. Save scene files at checkpoints using your storage and version control systems.
Cloud storage integration	Your own storage + Asset API	CE.SDK doesn’t provide storage—integrate with S3, Azure Blob, Google Cloud Storage, or your existing systems.

Key API Comparison: Common Operations

Creating a design scene:

// Canva Connect API
const canva = await CanvaAPI.createEditor({
  apiKey: 'YOUR_API_KEY',
  container: '#editor',
});

// IMG.LY CE.SDK
const cesdk = await CreativeEditorSDK.create('#cesdk-container', {
  license: 'YOUR_LICENSE',
  userId: 'user-123',
});
await cesdk.createDesignScene();

Loading a template:

// Canva Connect API
await canva.loadDesign('canva-design-id');

// IMG.LY CE.SDK
const scene = await cesdk.engine.scene.loadFromURL(
  'https://your-cdn.com/template.scene'
);

Exporting a design:

// IMG.LY CE.SDK
const page = cesdk.engine.scene.getCurrentPage();
const blob = await cesdk.engine.block.export(page, {
  mimeType: 'image/png',
  targetWidth: 1920,
  targetHeight: 1080,
});

Setting dynamic content:

// Canva Connect API (varies by implementation)
await canva.updateText('text-element-id', 'New Text Content');

// IMG.LY CE.SDK
const textBlock = cesdk.engine.block.findByName('headline')[0];
cesdk.engine.block.setString(textBlock, 'text/text', 'New Text Content');

What Doesn’t Directly Translate

Some Canva features don’t have direct CE.SDK equivalents. Here’s what requires custom implementation:

Real-time collaboration: Canva handles multi-user editing natively. CE.SDK doesn’t include collaboration infrastructure—you’ll implement using WebRTC, operational transforms, or your preferred real-time sync approach.

Cloud design storage: Canva stores designs in their cloud. CE.SDK doesn’t provide storage—integrate with your existing storage systems (database, S3, etc.) to save and load scene files.

Version history: Canva tracks design versions automatically. CE.SDK doesn’t include versioning—implement by saving scene snapshots at intervals and storing them with your version control approach.

Migration Path: Step-by-Step

This section provides a phased approach to migration that minimizes risk and maintains product stability.

Phase 1: Setup and Proof of Concept

Goal: Get CE.SDK running in a test environment and validate it meets your technical requirements.

Step 1: Get access and license

Sign up for a free 30-day trial
Receive license key for development environment
Review licensing model and plan for production deployment

Step 2: Setup development environment

Install CE.SDK via npm: npm install @cesdk/cesdk-js
Follow quickstart documentation for your platform (React, Vue, vanilla JS, etc.)
Initialize basic editor instance in test environment
Confirm SDK loads and renders correctly

Step 3: Test core capabilities

Create a simple design using the visual editor
Export to PNG/JPG/PDF
Load a template and modify elements programmatically
Validate output quality matches requirements

Step 4: Evaluate gaps

Compare Canva features your product uses vs. CE.SDK capabilities
Identify features requiring custom implementation
Document technical blockers or concerns
Confirm CE.SDK meets your use case before deeper investment

Deliverable: Working proof-of-concept demonstrating CE.SDK handles your core editing workflows.

Phase 2: Template Recreation

Goal: Recreate your most critical Canva templates in CE.SDK format.

Step 1: Prioritize templates

List all Canva templates by usage frequency
Identify top 5-10 templates accounting for 80% of usage
Start with highest-value templates

Step 2: Recreate or import templates in CE.SDK

Use CE.SDK’s visual editor to rebuild templates or plugin to import
Define variables for dynamic content (text placeholders, image slots)
Set role-based permissions (what’s editable, what’s locked)
Test template behavior with sample data

Step 3: Validate template outputs

Export samples using CE.SDK
Compare visually to Canva exports
Verify templates work with real content variations
Document any visual differences or limitations

Step 4: Setup template storage

Save templates as .scene files
Store in version-controlled repository or CDN
Setup template loading infrastructure in your application
Create template management system (if needed)

Deliverable: Core templates recreated in CE.SDK format and accessible in your test environment.

Phase 3: Integration Development

Goal: Build CE.SDK integration into your application with feature parity to current Canva implementation.

Step 1: Replace editor initialization

Swap Canva SDK initialization with CE.SDK setup
Configure CE.SDK with your license, user data, and settings
Adapt authentication flow to work with CE.SDK
Ensure editor loads in your application context

Step 2: Migrate asset integrations

Connect CE.SDK to your asset storage (images, fonts, media)
Configure asset libraries using Asset API
Setup custom asset sources if needed
Test asset loading and performance

Step 3: Rebuild export workflows

Replace Canva export calls with CE.SDK export API
Adapt export format handling (PNG, PDF, video)
Update downstream systems that consume exported assets
Test export quality, performance, file sizes

Step 4: Implement UI customization

Customize CE.SDK’s default UI to match your design system
Apply white-label theming (colors, typography, icons)
Remove any IMG.LY branding
Test UI responsiveness and accessibility

Step 5: Add server-side automation (if needed)

Setup Node.js environment for headless rendering
Implement batch generation workflows
Configure GPU acceleration for video (if applicable)
Test automation pipeline performance and reliability

Step 6: Build migration tools

Create utilities to help users transition from Canva designs
Build import tools if you can extract data from Canva exports
Develop user communication and guidance materials
Prepare support documentation

Deliverable: Fully functional CE.SDK integration running in staging environment with feature parity to Canva implementation.

Handling Common Migration Concerns

Teams migrating from Canva Connect API often face similar challenges. Here’s how to address the most common concerns:

“Can we migrate existing Canva designs?”

Short answer: Yes, through a designated upcoming plugin.

”What if users prefer Canva’s interface?”

Short answer: CE.SDK’s UI is highly customizable—you can replicate Canva’s UX patterns if desired.

Practical approach:

Customize CE.SDK’s interface to match familiar patterns
If specific Canva features drove user preference, implement equivalents
Gather user feedback early (during beta testing) to identify friction points
Focus messaging on control and ownership benefits rather than forcing change

”How do we minimize workflow disruption?”

Short answer: Phased rollout with parallel systems reduces disruption.

Practical approach:

Run Canva and CE.SDK side-by-side during transition
Let users opt-in to new editor before forcing switch
Migrate user segments gradually (internal users first, then beta customers, then all users)
Maintain Canva integration as fallback during initial rollout
Plan rollout during low-traffic periods

”What about performance differences?”

Short answer: CE.SDK runs locally, so performance characteristics differ from cloud-based Canva.

Practical approach:

Client-side rendering means performance depends on user devices (generally fast on modern hardware)
Server-side rendering gives you full control over performance (scale infrastructure as needed)
Test across your actual user device distribution
Optimize asset delivery (use CDN for fonts, images, templates)
For complex video editing, consider GPU-accelerated server-side rendering

”How do we handle authentication changes?”

Short answer: CE.SDK doesn’t manage authentication—integrate with your existing auth system.

Practical approach:

CE.SDK license validation is separate from user authentication
Use your existing authentication system (JWT, OAuth, session-based)
Pass authenticated user context to CE.SDK during initialization
Implement access control and permissions at application level
No changes required to your user authentication flow

”What if we need features CE.SDK doesn’t have?”

Short answer: CE.SDK’s plugin architecture and headless API let you build custom features.

Practical approach:

Extend functionality using CE.SDK’s plugin system
Build custom UI components using the headless engine API
Integrate third-party services via Asset API and custom plugins
Work with IMG.LY’s team for complex enterprise requirements
Evaluate whether missing features are actually used—often they’re not critical

Unlocked Capabilities: What’s Now Possible

Once you’ve migrated from Canva Connect API to CE.SDK, you gain capabilities that Canva’s architecture couldn’t support. Here’s what becomes possible:

Complete UI Control

Build editing experiences that feel native to your product. Customize every component, button, panel, and interaction to match your design system. Or go further—use CE.SDK’s headless API to build entirely custom interfaces that don’t look anything like a traditional editor.

Example: An e-commerce platform replaces Canva’s generic editor with a product customization flow integrated directly into the product page. Users configure product options (colors, sizes, personalization) using custom UI components, while CE.SDK handles rendering and export behind the scenes.

Server-Side Automation

Generate creative assets programmatically without user interaction. Run CE.SDK in Node.js on your servers to automate design production at scale. Create thousands of personalized banners from product data, generate dynamic video campaigns, or build batch processing pipelines.

Example: A marketing platform automatically generates A/B testing variants for ad creatives by running CE.SDK server-side. When a marketer creates a campaign, the system instantly produces 50 design variations (different headlines, images, CTAs) for testing—no manual design work required.

Offline Editing

Let users work without internet connectivity. After initial SDK load, all editing, template manipulation, and export functionality works offline. Critical for mobile apps, travel scenarios, or environments with restricted network access.

Example: A field service application lets technicians create incident reports with photos and annotations while working in areas without cell coverage. CE.SDK handles all editing and export offline, syncing when connectivity returns.

Cross-Platform Deployment

Deploy identical editing capabilities across web, native mobile, and desktop. Use the same templates, same rendering engine, and same output quality across all platforms. No need to build separate editing tools for each platform.

Example: A social media management tool provides consistent editing across their web dashboard (React), iOS app (native Swift), and desktop application (Electron). Templates created in the web version work identically in mobile and desktop, and exports look the same everywhere.

Infrastructure and Data Control

Keep all creative data on your infrastructure. No external dependencies, no data flowing through third-party systems (unless you choose external integrations like stock image libraries). Full control for compliance, security, and data sovereignty requirements.

Example: A healthcare company builds patient education materials with custom templates. All patient data and generated documents stay within their HIPAA-compliant infrastructure—nothing touches external systems.

Flexible Deployment Models

Choose where rendering happens based on your needs. Render client-side for user-driven editing (no server costs, scales infinitely with users). Render server-side for automation and batch processing (control quality, performance, and infrastructure).

Example: A web-to-print company uses client-side rendering when customers design products interactively, then uses server-side rendering to generate high-resolution print-ready PDFs for production—different rendering strategies for different workflows, same SDK.

For architectural patterns and infrastructure design when implementing these capabilities, see our guide on creative automation infrastructure.

Realistic Migration Examples

Here are concrete code comparisons showing how common Canva Connect API patterns translate to CE.SDK.

Example 1: Simple Design Creation

Canva Connect API approach:

import { CanvaAPI } from '@canva/connect-api';

const editor = await CanvaAPI.createEditor({
  apiKey: process.env.CANVA_API_KEY,
  container: '#editor-container',
  publishLabel: 'Export',
});

await editor.ready();

// Load a template
await editor.loadDesign('AAF_template_id');

// User edits in Canva's interface...

// Handle export
editor.on('publish', async (opts) => {
  const exported = await editor.exportDesign({ format: 'png' });
  // Handle exported.url
});

CE.SDK equivalent:

import CreativeEditorSDK from '@cesdk/cesdk-js';

const cesdk = await CreativeEditorSDK.create('#cesdk-container', {
  license: process.env.CESDK_LICENSE,
  userId: 'user-123',
});

// Register export action
cesdk.actions.register('exportDesign', async (blobs, options) => {
  // Handle exported blobs
  await uploadToStorage(blobs[0], 'exported-design.png');
});

// Load a template
await cesdk.engine.scene.loadFromURL(
  'https://cdn.example.com/templates/banner.scene'
);

// User edits in customized interface...

// Or handle export programmatically
const page = cesdk.engine.scene.getCurrentPage();
const blob = await cesdk.engine.block.export(page, {
  mimeType: 'image/png',
  targetWidth: 1920,
  targetHeight: 1080,
  jpegQuality: 0.9,
});

// Upload or save blob
await uploadToStorage(blob, 'exported-design.png');

Key differences:

CE.SDK requires explicit scene loading (from URL or creation)
Export is manual (you control where files go)
More configuration options for export quality and resolution

Example 2: Template-Based Generation with Dynamic Content

Canva Connect API approach:

// Canva's template autofill (if available in your plan)
await canva.autofill({
  templateId: 'template_id',
  data: {
    headline: 'Summer Sale',
    description: 'Save up to 50% on selected items',
    image_url: 'https://example.com/image.jpg',
  },
});

const exported = await canva.exportDesign({ format: 'png' });

CE.SDK equivalent:

// Set dynamic text content
engine.block.setString(headlineBlock, 'text/text', 'Summer Sale');
engine.block.setString(
  descriptionBlock,
  'text/text',
  'Save up to 50% on selected items'
);

// Replace image by updating the fill's image URI
const imageFill = engine.block.getFill(imageBlock);
engine.block.setString(
  imageFill,
  'fill/image/imageFileURI',
  'https://example.com/image.jpg'
);

// Export
const pageId = engine.scene.getCurrentPage();
const blob = await engine.block.export(pageId, {
  mimeType: 'image/png',
  targetWidth: 1200,
  targetHeight: 628,
});

Key differences:

CE.SDK runs headlessly on your servers (no user interface)
More granular control over element manipulation
You manage storage and delivery of exported assets
Can batch-process hundreds/thousands of variants in loops

Example 3: Custom UI Integration

Canva Connect API approach:

// Limited UI customization
const editor = await CanvaAPI.createEditor({
  apiKey: process.env.CANVA_API_KEY,
  container: '#editor',
  brandingTheme: {
    primaryColor: '#4A90E2',
    logo: 'https://example.com/logo.png',
  },
});
// Canva's UI with minimal theming applied

CE.SDK equivalent (full control):

import CreativeEditorSDK from '@cesdk/cesdk-js';

const cesdk = await CreativeEditorSDK.create('#cesdk-container', {
  license: process.env.CESDK_LICENSE,
  userId: 'user-123',
});

// Configure theme (light or dark mode)
cesdk.ui.setTheme('dark');

// Configure UI features using the Feature API
cesdk.feature.enable('ly.img.library.panel');
cesdk.feature.enable('ly.img.settings');
cesdk.feature.enable('ly.img.navigation.bar');
cesdk.feature.enable('ly.img.navigation.actions');

// Configure navigation bar using the Order API
cesdk.ui.setNavigationBarOrder([
  'ly.img.back.navigationBar',
  'ly.img.undoRedo.navigationBar',
  'ly.img.spacer',
  'ly.img.title.navigationBar',
  'ly.img.spacer',
  'ly.img.zoom.navigationBar',
  'ly.img.preview.navigationBar',
  'ly.img.exportImage.navigationBar',
]);

// Configure panel positioning
cesdk.ui.setPanelPosition('//ly.img.panel/assetLibrary', 'left');

// Register custom export action
cesdk.actions.register('exportDesign', async (blobs, options) => {
  // Custom export handling
  await uploadToStorage(blobs[0], 'design.png');
});

// Or build completely custom UI using headless API
const engine = cesdk.engine;

// Custom toolbar
document.querySelector('#custom-text-btn').addEventListener('click', () => {
  const page = engine.scene.getCurrentPage();
  const textBlock = engine.block.create('text');
  engine.block.setString(textBlock, 'text/text', 'New Text');
  engine.block.appendChild(page, textBlock);
});

document
  .querySelector('#custom-export-btn')
  .addEventListener('click', async () => {
    const page = engine.scene.getCurrentPage();
    const blob = await engine.block.export(page, {
      mimeType: 'image/png',
    });
    // Custom export handling
  });

Key differences:

CE.SDK offers deep UI customization through configuration
Can build entirely custom interfaces using headless engine API
Complete control over branding, layout, and interactions
No external branding or forced UI patterns

Example 4: Batch Asset Generation

Canva Connect API approach:

// Would require multiple API calls and user interaction
for (const product of products) {
  await canva.loadDesign('template_id');
  await canva.autofill({
    product_name: product.name,
    price: product.price,
    image: product.imageUrl,
  });
  const exported = await canva.exportDesign({ format: 'png' });
  // Handle exported design
}

CE.SDK equivalent (optimized for batch):

import CreativeEngine from '@cesdk/node';

const engine = await CreativeEngine.init({
  license: process.env.CESDK_LICENSE
});

// Load template once
const templateURL = 'https://cdn.example.com/templates/product-card.scene';

// Process batch
for (const product of products) {
  // Fresh scene for each product
  await engine.scene.loadFromURL(templateURL);

  // Find and populate blocks
  const nameBlock = engine.block.findByName('product_name')[0];
  const priceBlock = engine.block.findByName('price')[0];
  const imageBlock = engine.block.findByName('product_image')[0];

  engine.block.setString(nameBlock, 'text/text', product.name);
  engine.block.setString(priceBlock, 'text/text', `$${product.price}`);

  // Replace image by updating the fill
  const imageFill = engine.block.getFill(imageBlock);
  engine.block.setString(imageFill, 'fill/image/imageFileURI', product.imageUrl);

  // Export
  const page = engine.scene.getCurrentPage();
  const blob = await engine.block.export(page, {
    mimeType: 'image/png'
  });

Key differences:

CE.SDK runs efficiently on servers for batch workloads
No user interaction required—fully automated
Can scale horizontally (multiple rendering nodes)
GPU acceleration available for video and complex renders

Final Recommendation and Next Steps

Migrating from Canva Connect API to CE.SDK requires upfront effort, but unlocks capabilities Canva’s architecture can’t provide: complete white-label control, offline editing, server-side automation, cross-platform consistency, and infrastructure ownership. For teams hitting Canva’s customization limits, needing deeper product integration, or requiring deployment flexibility, migration makes strategic sense.

The technical migration is straightforward—CE.SDK’s APIs are well-documented, the SDK is production-proven (powering 500M+ creations monthly), and our team provides migration support. The real effort is template recreation and user transition planning. Teams succeed when they approach migration as a phased rollout, maintain Canva as fallback during transition, and communicate changes clearly to users.

Recommended Migration Approach

If you’re ready to start migration:

Sign up for a free 30-day trial to access CE.SDK and begin proof-of-concept work.
Review CE.SDK documentation for your platform (React, Vue, native mobile, Node.js) to understand integration requirements.
Contact our team to discuss your specific migration scenario. We’ll help you plan approach, estimate timeline, and address technical questions.
Start with highest-value templates and validate they work in CE.SDK before committing to full migration.

If you’re still evaluating whether to migrate:

Review Why building with IMG.LY makes sense for broader context on vendor comparison, cost analysis, and customer outcomes.
Check out full comparison between IMG.LY and Canva Connect API.

Questions about your specific migration scenario? Talk to our team. We’ll help you evaluate whether migration makes sense for your use case, provide timeline estimates, and answer technical questions specific to your integration.

Hundreds of teams have migrated from various editing solutions to CE.SDK and successfully deployed in production. With proper planning, phased rollout, and clear user communication, migration minimizes disruption while unlocking capabilities that transform what your product can do.

Frequently Asked Questions About Migrating from Canva to CE.SDK

Can I import my existing Canva designs into CE.SDK?

Yes, with an upcoming Canva template importer you will be able to import templates directly into IMG.LY SDK.

How long does migration typically take?

Migration timelines vary by complexity: simple integrations take 2–4 weeks, moderate integrations take 6–10 weeks, and complex enterprise deployments take 3–4 months. The duration depends on factors like template library size, customization requirements, user base size, and whether you need server-side automation. Teams starting with CE.SDK’s default UI and basic customization can migrate faster than those building fully custom interfaces.

Does CE.SDK cost more or less than Canva Connect API?

Pricing models differ significantly. Canva Connect API uses subscription-based pricing, while CE.SDK uses usage-based enterprise licensing that scales with active editors, export volume, and platforms. Total cost depends on your usage patterns, infrastructure costs if using server-side rendering, and development investment. Many teams find CE.SDK more cost-effective at scale due to infrastructure control and no ongoing vendor subscription fees.

Do I need to rebuild my entire UI from scratch?

No. CE.SDK provides a production-ready default UI that you can use immediately with minimal customization. Many teams start with the default UI and only customize specific components as needs evolve. You can progressively enhance the interface by applying theming and branding first, then customizing individual panels, and eventually building fully custom UI only if needed. Building from scratch using the headless API is optional and typically reserved for teams with unique workflow requirements.

Can CE.SDK work offline, or does it require internet like Canva?

Yes, CE.SDK fully supports offline editing after the initial SDK load. All editing, template manipulation, and export functionality works without internet connectivity. This is critical for mobile apps, travel scenarios, secure environments, or areas with unreliable connectivity. Canva Connect API requires constant internet connection, making offline editing impossible.

How does server-side rendering work with CE.SDK compared to Canva?

CE.SDK runs natively in Node.js environments for headless, programmatic generation with no user interface required. You control the rendering infrastructure including cloud servers, containers, and GPU acceleration. This enables batch processing, automated variant generation, and high-volume production workflows that Canva’s SaaS model doesn’t support. Server-side rendering uses the same templates as the visual editor, ensuring output consistency.

Is there a free trial to test CE.SDK before committing to migration?

Yes. IMG.LY offers a free 30-day trial with full access to CE.SDK across web, mobile, and server platforms. Use the trial to validate capabilities, test proof-of-concept integrations, recreate templates, and confirm CE.SDK meets your technical requirements before full migration.

What support does IMG.LY provide during migration?

IMG.LY provides migration guidance, technical support, architectural consultation, and code review. Enterprise customers receive dedicated support channels, migration planning sessions, and ongoing technical account management to help ensure a smooth transition.

CE.SDK v1.68 Release Notes

Neslihan — Mon, 09 Feb 2026 16:51:58 GMT

This release focuses on engine refinements and developer velocity. We are introducing the CE.SDK Docs MCP Server to bring our documentation directly into your AI coding workflows.

Let’s dive in!

Enhanced Developer Experience

Code Faster with the CE.SDK Docs MCP Server

Integrate CE.SDK documentation directly into your development environment. By supporting the Model Context Protocol (MCP), we optimize how AI assistants like Claude, Cursor, and VS Code Copilot search and retrieve our latest technical guides and API references in real time.

For your team, this means more accurate, context-aware code suggestions and a significantly faster integration process without leaving your editor.

→ Read our Docs MCP Server Guide

Improvements

Perfect Your Global Reach with RTL Text

We have refined our native right-to-left support for languages like Arabic, Hebrew, and Persian with a new “Auto” alignment feature.

The engine now detects script direction on the fly, aligning right for RTL languages like Arabic, and left for LTR languages like English.
For your product, this delivers a truly native feel for your users.

→ Get started with our RTL Guide

Refine Animations with More Control Settings

We have expanded the “Grow” animation style with new directional controls. Creators can now scale elements from all corners, instead of only the center.

This allows for more intentional, fun motion design that aligns with high-end standards.

Full Changelog

See all technical details and the complete list of fixes in the v1.68.0 Changelog.

Thank you for growing with IMG.LY.

Join 3,000+ creative professionals who get early access to new features and updates—subscribe.