Design Editor – IMG.LY Blog

Open-Source Design Editor SDKs: A Developer's Guide to Choosing the Right Solution

Klaudia — Tue, 25 Nov 2025 08:56:18 GMT

If you’re implementing design or editing capabilities, you’ve probably wondered whether to use an open-source library or go with a commercial SDK. It’s a fair question—especially when there are established libraries like Fabric.js and Konva.js that offer powerful canvas manipulation tools without licensing costs.

Here’s the reality: there’s no single open-source SDK that delivers a complete, production-ready design editor out of the box. Instead, developers typically piece together solutions from canvas libraries, rendering engines, and SVG tools—each requiring custom UI development, editor logic, and ongoing maintenance.

In this guide, we’ll walk through the most popular open-source options for building design editors, organized by what they actually do: canvas manipulation, high-performance rendering, or SVG control. We’ll cover what each library excels at, where you’ll hit roadblocks, and how much development effort you’re really signing up for. Then we’ll show how IMG.LY CE.SDK approaches the same challenges with a different philosophy: providing a complete, enterprise-ready editor that works across platforms from day one.

The Open-Source Landscape: What You’re Actually Choosing

When you choose an open-source approach to building a design editor, you’re typically selecting from three categories of tools. Each solves part of the puzzle, but none deliver a complete editor experience without significant custom development.

1. Canvas and Drawing Libraries

These libraries handle core canvas drawing and object manipulation—layers, transformations, text, images—but they don’t include prebuilt editor UI or workflows. Think of them as powerful toolkits that give you the building blocks, but you’re responsible for assembling the actual editor experience.

2. Rendering Engines

Optimized for high-performance graphics and WebGL-powered rendering, these engines excel at drawing complex scenes quickly. However, they’re focused purely on rendering—no editing workflows, no UI components, no editor logic. Great for graphics-heavy applications, but you’ll need to build everything else yourself.

3. SVG Manipulation Libraries

Lightweight tools for creating, transforming, and animating SVG elements with precision. Perfect for SVG-based graphics projects, but like the others, they require you to build the editor UI and interaction logic from scratch.

Let’s dive into each category and see what these tools actually offer.

Canvas and Drawing Libraries: Flexible Foundations Without the Editor UI

Canvas libraries provide rich object manipulation capabilities—layers, transformations, events, custom controls—but they stop short of delivering ready-made editor interfaces. You get the power and flexibility to build exactly what you want, but you’re taking on the responsibility of creating polished, user-friendly editing experiences.

Fabric.js

Fabric.js is one of the most popular HTML5 canvas libraries for interactive object editing. It’s been around for years and has a large community, extensive documentation, and plenty of examples showing how to manipulate canvas objects programmatically.

Features & Capabilities:
Fabric.js gives you layers, object manipulation (resize, rotate, drag), text rendering, image handling, custom controls, and event systems. It’s feature-rich and handles most of what you’d need at the object level for a design editor.

Platforms:
Web only—Fabric.js runs on the HTML5 Canvas API, so it’s browser-based.

Difficulty Building a Full Editor:
Medium. Fabric.js provides the canvas toolkit, but building a polished, production-ready editor means developing the entire UI layer: toolbars, property panels, layer management, undo/redo, export controls, and more. You’ll also need to handle performance optimizations for complex designs and manage state across the editor experience.

Potential Roadblocks:
No ready-made editor UI means substantial frontend development work. Scaling can become an issue with very large or complex designs—you’ll need to implement custom optimizations. Managing collaborative editing, version control, or template systems requires building those features from scratch.

Use Cases:
Product customizers (t-shirts, mugs, promotional items), custom design tools for SaaS platforms, marketing asset creators, and interactive whiteboards.

Future-Proofing:
Fabric.js is mature, stable, and actively maintained by its community. It’s a safe bet for long-term projects, though you’re responsible for keeping up with web standards and browser changes.

Support:
Community-driven through GitHub issues, Stack Overflow, and forums. No SLAs or dedicated support—you’re relying on the open-source community and your own team’s expertise.

Pricing:
Free and open-source (MIT license).

Who It’s For:
Developers who need a flexible, powerful canvas toolkit and have the resources to build a custom editor UI and workflows on top of it.

Comparison to IMG.LY CE.SDK:
Fabric.js gives you raw canvas power and control, but you’re building the editor from the ground up. IMG.LY CE.SDK provides a polished, enterprise-grade design editor with prebuilt UI, templates, AI-powered enhancements, cross-platform SDKs (web, iOS, Android, React Native, Flutter, server), and automation workflows—ready for production integration in hours instead of months.

Learn more: How Fabric.js compares to IMG.LY
Build vs. Buy: Is Fabric.js Right for You?

Konva.js

Konva.js is a 2D canvas library focused on interactive shapes, layers, and animations. It’s slightly more opinionated than Fabric.js about how you structure your canvas scenes, which can make certain tasks simpler but also less flexible.

Features & Capabilities:
Shapes (rectangles, circles, paths), layers with hierarchical grouping, transformations, animations, filters (blur, color effects), and robust event handling. Konva.js excels at interactive graphics with smooth animations.

Platforms:
Web primarily, with Node.js support via node-canvas for server-side rendering.

Difficulty Building a Full Editor:
Medium. Konva.js simplifies working with shapes and layers compared to lower-level canvas APIs, but you still need to build the entire editor UI—toolbars, controls, asset management, export logic, and workflows.

Potential Roadblocks:
Limited to 2D graphics—no built-in support for advanced design features like typography fine-tuning, CMYK color spaces, or print-ready exports. Complex editor UIs and collaboration features must be custom-built.

Use Cases:
Data visualization tools, custom 2D design editors, interactive whiteboards, educational apps with drawing capabilities, and diagram builders.

Future-Proofing:
Stable and actively maintained with regular updates. The library has a solid foundation and community support.

Support:
GitHub issues, community forums, and documentation. No commercial support or SLAs.

Pricing:
Free and open-source (MIT license).

Who It’s For:
Developers who want to build interactive graphics applications without reinventing low-level canvas logic, and who have time to develop a complete editor interface.

Comparison to IMG.LY CE.SDK:
Konva.js is excellent for interactive graphics and shape manipulation, but it’s still just the canvas layer. IMG.LY CE.SDK adds complete design workflows, templating systems, brand controls, AI-powered editing, and cross-platform support—turning interactive graphics into full-featured, production-ready design editors.

Learn more: IMG.LY as a Konva.js Alternative

EaselJS

EaselJS is part of the CreateJS suite and provides low-level canvas graphics and animation capabilities. It was originally built for interactive media and game development, with a focus on sprites, timelines, and animation control.

Features & Capabilities:
Canvas drawing, vector graphics, sprite handling, timeline-based animations, bitmap manipulation, and basic shape rendering. It’s designed for developers who need precise control over animation and drawing operations.

Platforms:
Web (HTML5 Canvas API).

Difficulty Building a Full Editor:
Medium-high. EaselJS gives you low-level drawing primitives, but building a design editor requires significant work: UI development, editor logic, object management systems, and export workflows. It’s more suited to animation and game-like applications than traditional design editors.

Potential Roadblocks:
No editor abstractions or prebuilt UI components. The API is lower-level, so you’ll spend more time building foundational features. EaselJS is also an older library compared to newer canvas tools, and it’s not as actively developed.

Use Cases:
Canvas-based games, interactive media projects, custom animation tools, and educational applications with drawing features.

Future-Proofing:
Stable but older. The CreateJS suite is still maintained, but the pace of updates has slowed compared to more actively developed libraries.

Support:
Community-driven through forums and GitHub. No commercial support.

Pricing:
Free and open-source (MIT license).

Who It’s For:
Developers building custom canvas animations, games, or editors from scratch who need low-level control and are comfortable with older API patterns.

Comparison to IMG.LY CE.SDK:
EaselJS provides low-level graphics primitives for custom applications. IMG.LY CE.SDK delivers full-featured design editors with UI, workflows, templates, automation, and cross-platform support—eliminating the need to build editing infrastructure from the ground up.

Learn more: IMG.LY as a CreateJS Alternative

Summary: Canvas and Drawing Libraries

Pros:
These libraries offer powerful, flexible control over canvas objects and manipulation. They provide rich feature sets for transformations, animations, and interactive graphics—perfect for developers who want to build highly customized editing experiences.

Cons:
No prebuilt editor UI or workflows. You’re responsible for building the entire user-facing editor: toolbars, property panels, layer management, export controls, undo/redo systems, and more. That’s months of development work for a polished product.

Key Challenges:
Managing performance and scaling for large, complex designs; implementing intuitive, user-friendly editor interfaces; building robust export pipelines (especially for print); and maintaining feature parity across evolving web standards.

Rendering Engines: High Performance, Zero Editor Features

Rendering engines are built for one thing: drawing complex graphics fast. They leverage WebGL and optimized rendering pipelines to handle thousands of objects, animations, and effects smoothly. But they’re focused purely on rendering—they don’t include editing workflows, UI elements, or editor logic. If you need a design editor, you’ll be building it entirely from scratch on top of these engines.

PixiJS

PixiJS is a WebGL-powered 2D rendering engine known for its exceptional performance. It’s widely used in browser-based games, data visualization, and graphics-intensive applications that need to render large numbers of objects at high frame rates.

Features & Capabilities:
High-performance rendering with WebGL acceleration, sprite management, filters and effects, texture atlases, and advanced graphics pipelines. PixiJS is built for speed and can handle complex scenes that would choke traditional canvas libraries.

Platforms:
Web (WebGL, with fallback to Canvas API).

Difficulty Building a Full Editor:
Medium-high. PixiJS is not designed as an editor—it’s a rendering engine. Building a design editor means creating all the editing logic, UI, object manipulation systems, selection tools, layer management, and export functionality yourself. That’s a massive undertaking.

Potential Roadblocks:
No editor abstractions or UI components. PixiJS is focused on rendering performance, so you’ll need to build everything related to editing and user interaction from scratch. The learning curve can be steep if you’re optimizing for WebGL performance.

Use Cases:
Browser games, interactive data visualizations, graphics-heavy web applications, particle systems, and custom animation tools.

Future-Proofing:
PixiJS has a large, active community and is regularly updated with performance improvements and new features. It’s a solid choice for long-term graphics projects.

Support:
Community-driven through GitHub, forums, and Discord. No commercial support or SLAs.

Pricing:
Free and open-source (MIT license).

Who It’s For:
Developers building high-performance graphics applications—especially games or data visualization tools—who need rendering power but are prepared to build editing features from the ground up.

Comparison to IMG.LY CE.SDK:
PixiJS is a rendering engine for graphics-intensive applications. IMG.LY CE.SDK is a complete design editor with ready-made workflows, UI, templates, and automation—built for teams that need production-ready editing experiences, not just rendering capabilities.

See how IMG.LY compares to PixiJs

React Canvas

React Canvas is a React renderer for the HTML5 Canvas API. It allows you to use React components and paradigms to build canvas-based applications, treating canvas elements like React components with props and state.

Features & Capabilities:
High-performance drawing, text rendering, image handling, and layout via React components. React Canvas is designed for React developers who want to leverage familiar patterns for canvas-based applications.

Platforms:
Web (React).

Difficulty Building a Full Editor:
Medium. If you’re already building with React, React Canvas simplifies canvas rendering by using React’s component model. But it’s still just a rendering layer—you’ll need to build the entire editor UI, state management, object manipulation, and export workflows yourself.

Potential Roadblocks:
React Canvas is a niche library with a smaller ecosystem compared to mainstream canvas tools. Limited community support and examples mean you’ll be on your own for many use cases. Not actively maintained at the same pace as React itself.

Use Cases:
React-based applications that need custom canvas rendering, such as dashboards, data visualizations, or lightweight drawing tools.

Future-Proofing:
Small community and slower update cadence compared to more popular canvas libraries. While stable, it’s not heavily maintained.

Support:
Community-driven via GitHub. Minimal documentation and examples.

Pricing:
Free and open-source.

Who It’s For:
React developers who need canvas rendering and prefer working within React’s component model, with resources to build editing features from scratch.

Comparison to IMG.LY CE.SDK:
React Canvas provides rendering primitives for React developers. IMG.LY CE.SDK delivers a complete, cross-platform editor SDK with ready-made UI, workflows, templates, and automation—turning rendering capabilities into full-featured design products.

Summary: Rendering Engines

Pros:
Highly efficient and performant, leveraging WebGL and modern rendering techniques. Excellent for graphics-heavy applications that need to render complex scenes smoothly. React Canvas provides React-friendly patterns for canvas rendering.

Cons:
Focused purely on rendering—no editor logic, UI components, or workflows included. Building a design editor on top of these engines requires extensive custom development across every aspect of the editing experience.

Key Challenges:
Extremely high custom development overhead to implement editing features, object manipulation, and user interfaces. Steep learning curves for WebGL optimization and rendering pipelines. Limited community support for editor-specific use cases.

SVG Manipulation: Lightweight Control, Custom UI Required

SVG libraries give you precise control over vector graphics—shapes, transformations, animations, filters—without the overhead of canvas rendering. They’re lightweight, performant for moderate-scale graphics, and ideal for projects where SVG’s scalability and precision matter. But like canvas libraries, they provide no editor UI or workflows—you’re building those yourself.

SVG.js

SVG.js is a lightweight library for creating, manipulating, and animating SVG elements. It’s simple, fast, and focused exclusively on SVG—no canvas, no WebGL, just vector graphics.

Features & Capabilities:
SVG shape creation (rectangles, circles, paths, polygons), transformations (rotate, scale, translate), event handling, filters and effects, animations, and group management. SVG.js gives you direct, low-level control over SVG elements.

Platforms:
Web (SVG).

Difficulty Building a Full Editor:
Medium. SVG.js handles SVG manipulation well, but building a design editor requires creating the entire UI layer: toolbars, property panels, object selection, layer management, undo/redo, and export controls. You’re also responsible for managing complex interactions and maintaining performance with large SVG documents.

Potential Roadblocks:
Not an editor—just SVG primitives. You’ll need to build all editor logic and UI yourself. SVG.js is lightweight, but scaling to very complex designs may require custom optimizations.

Use Cases:
Interactive vector graphics, SVG-based design tools, data visualization, icon editors, and illustration applications.

Future-Proofing:
Stable, actively maintained, and lightweight. SVG.js has a solid community and regular updates.

Support:
Community-driven through GitHub and documentation. No commercial support or SLAs.

Pricing:
Free and open-source (MIT license).

Who It’s For:
Developers who need precise SVG control for custom vector graphics applications and have the resources to build a complete editor interface on top.

Comparison to IMG.LY CE.SDK:
SVG.js provides SVG manipulation primitives for custom projects. IMG.LY CE.SDK delivers a full-featured design editor with prebuilt UI, templates, brand controls, AI-powered enhancements, and cross-platform support—eliminating the need to build editing infrastructure from scratch.

Summary: SVG Manipulation

Pros:
Precise control over vector graphics with a lightweight, performant library. Excellent for SVG-based projects that need scalability and fine-tuned control.

Cons:
Not an editor—no ready-made UI or editing workflows. Requires building the entire editor experience from scratch, including UI components, interaction logic, and export systems.

Key Challenges:
Developing user-friendly, scalable editors requires substantial frontend work. Managing complex SVG documents and maintaining performance with large designs demands custom optimizations.

Commercial Alternative: IMG.LY CE.SDK

After looking at open-source libraries, you might notice a pattern: they’re all excellent at what they do—canvas manipulation, rendering, SVG control—but none of them give you a complete editor. That’s where we come in.

Overview:
IMG.LY CE.SDK is an enterprise-grade design and editing SDK built for companies that need production-ready editing experiences without months of custom development. We provide a complete, polished editor with prebuilt UI, workflows, templates, and automation—ready to integrate across web, iOS, Android, React Native, and Flutter.

Features & Capabilities:
Multi-layer editing with full object manipulation, drag-and-drop UI, template libraries, brand controls (fonts, colors, logo enforcement), AI-powered enhancements (background removal, smart cropping, style transfer), print-ready exports (CMYK, bleed, trim marks), and server-side automation for batch processing and design generation.

Platforms:
Web, iOS, Android, React Native, Flutter—one SDK, all platforms.

Difficulty Building a Full Editor:
Low. Our SDK provides prebuilt, customizable UI and editor logic. You’re integrating, not building from scratch. Most teams go from integration to production in days, not months.

Potential Roadblocks:
Minimal—mainly workflow decisions and enterprise integration points. We’re a paid, enterprise-focused solution, so it’s not free like open-source alternatives. But you’re trading licensing costs for time-to-market, scalability, and dedicated support.

Use Cases:
SaaS applications with design features, e-commerce personalization (custom products, print-on-demand), marketing automation tools, digital asset management (DAM) systems, and enterprise content creation platforms.

Future-Proofing:
We’re actively developing AI-powered features, expanding cross-platform capabilities, and maintaining a scalable engine built for enterprise workloads. Our roadmap is driven by customer needs and evolving market demands.

Support:
Enterprise SLAs, dedicated onboarding, engineering support, and ongoing updates. You’re not relying on community forums—you have a direct line to our team.

Pricing:
Custom enterprise pricing based on usage and features. Contact us for a quote and demo.

Who It’s For:
Companies and product teams that need full-featured, cross-platform design editors with templates, automation, and AI enhancements—without the time and cost of building and maintaining custom solutions.

Key Differentiator:
We combine an embeddable, white-label editor with automation workflows across all major platforms. You get a complete design stack—editor, templates, APIs, and automation—in one SDK, ready for production from day one.

Side-by-Side Comparison: Open-Source vs. IMG.LY CE.SDK

Here’s how these solutions stack up across key criteria for building a design editor:

Use Case / Solution	Fabric.js	Konva.js	EaselJS	PixiJS	React Canvas	SVG.js	IMG.LY CE.SDK
Ease of integration	⚠️ Flexible canvas library; requires building UI and controls from scratch	⚠️ Good for interactive shapes and layers; UI must be custom-built	⚠️ Low-level canvas graphics; more work to build editors	⚠️ Rendering engine; requires custom app development	⚠️ React-based canvas renderer; dev effort required	⚠️ Lightweight SVG manipulation; requires UI assembly	✅ Prebuilt SDK with polished, enterprise-ready editor UI and APIs
Features & Capabilities	✅ Layers, object manipulation, text, images, transformations	✅ Shapes, animations, filters, event handling	⚠️ Canvas drawing, sprites, animations, timeline	⚠️ High-performance WebGL rendering, sprites, filters	⚠️ Canvas drawing via React components	✅ SVG shapes, transformations, filters, animations	✅ Multi-layer editing, templates, brand controls, AI enhancements, print-ready exports
Cross-platform support	❌ Web only	❌ Web only	❌ Web only	❌ Web only	❌ Web only	❌ Web only	✅ Web, iOS, Android, React Native, Flutter
Scalability	⚠️ Suitable for moderate-sized web apps; may struggle with very complex scenes	⚠️ Medium; optimized for interactive web graphics	⚠️ Limited; desktop/web apps with graphics	✅ High-performance rendering for complex scenes	⚠️ Moderate; suitable for React-based canvas apps	⚠️ Moderate; suitable for medium-sized interactive graphics	✅ Enterprise-grade; cloud-ready, scalable multi-platform workflows
Difficulty building / integration	Medium — needs custom UI, but feature-rich	Medium — shapes & layers are simple, full editor requires work	Medium-high — low-level API, manual UI building	Medium-high — engine-level, no editor features	Medium — React integration required	Medium — must assemble SVG components	Low — SDK provides prebuilt editor and APIs for production apps
Potential roadblocks	Dev must implement UI and editor logic	Must implement full editor UI for production	Older library; UI building is manual	Not an editor; requires substantial dev work	Niche use case; React dependency	Only works with SVG; UI must be built	Minimal; mainly workflow decisions and enterprise integration
AI / Automation	❌ None	❌ None	❌ None	❌ None	❌ None	❌ None	✅ AI-assisted editing, automation workflows, multi-layer design
Pricing	Free, OSS	Free, OSS	Free, OSS	Free, OSS	Free, OSS	Free, OSS	Custom enterprise pricing
Who it’s for	Developers needing a flexible canvas toolkit to build custom editors	Developers needing interactive 2D graphics and layer manipulation	Developers creating canvas-based animations or games	Developers needing high-performance 2D rendering	React developers building canvas apps	Developers building interactive SVG-based apps	Companies needing a full-featured, cross-platform design editor with templates, AI, and automation

Final Thoughts: Open-Source Flexibility vs. Enterprise-Ready Solutions

There’s no single “wrong” choice here—it depends on what you’re building, what resources you have, and how quickly you need to get to market.

Choose open-source canvas and drawing libraries (Fabric.js, Konva.js, EaselJS) if you’re building highly custom editors and have the development resources to create polished UI, workflows, and editor logic from scratch. These libraries offer flexibility and rich graphics capabilities, but expect months of development work to reach production quality.

Choose rendering engines (PixiJS, React Canvas) if you’re building graphics-heavy or game-like applications where rendering performance is the primary concern, and you’re prepared to build all editing features and workflows yourself. These engines excel at drawing complex scenes efficiently but provide no editor abstractions.

Choose SVG manipulation libraries (SVG.js) if you’re working on SVG-based projects that require lightweight, precise vector control, and you have the resources to develop the entire editor UI and interaction logic.

Choose IMG.LY CE.SDK if you need a complete, production-ready design editor that works across web, iOS, Android, React Native, and Flutter—with templates, AI-powered enhancements, automation workflows, and enterprise support. We’re the only option that combines an enterprise-grade editor with cross-platform SDKs, eliminating the need to build and maintain custom editing infrastructure. You get fast time-to-market, scalability, and dedicated support, all in one integrated stack.

Whether you’re evaluating build-versus-buy or comparing commercial SDKs, the key is understanding what you’re actually signing up for. Open-source libraries give you building blocks—powerful, flexible, and free—but you’re responsible for assembling the editor experience. We give you the complete editor, ready to integrate and scale.

Want to see how IMG.LY CE.SDK compares in action? Explore our demos or talk to our team about your specific use case. We’re here to help you build better editing experiences, faster.

How to Embed an Editable InDesign Template in Your Website

Jan — Tue, 28 Oct 2025 12:29:03 GMT

Why Editing InDesign Files in the Browser Matters Now

Adobe InDesign has long been the standard for high-fidelity layout and print design. Yet for many teams, its power comes with friction: it’s desktop-bound, collaboration-limited, and inaccessible to clients or non-designers who simply need to make minor edits.

Creative work requires ever shorter feedback loops and is becoming more and more accessible to the average users, hence organizations are looking for ways to bring InDesign workflows into the browser to make templates editable, collaborative, and automatable.

At the same time, businesses are under pressure to modernize creative production. Marketing teams need to localize campaigns at scale, SaaS platforms want to let users personalize assets, and agencies aim to deliver editable templates instead of static files. The question naturally arises:

“Can I edit InDesign files in a browser?”

Until recently, the answer was “not really.” Adobe offers Share for Review for commenting, InCopy on the Web for limited text changes, and Adobe Express for simplified exports, but none provide full-fidelity, browser-native editing or the ability to embed such functionality into your own product.

That’s where CE.SDK enters the picture.

CE.SDK is an embeddable creative editor that powers photo, video, and design workflows directly in the browser. It’s deeply customizable and extensible, enabling developers to tailor every aspect of the editing experience. The same SDK works cross-platform, Web, iOS, Android, Desktop, and Server, so teams can build consistent creative tools across environments.

By combining CE.SDK’s robust editing engine with the InDesign Importer, you can now bring InDesign templates (IDML files) into a fully fledged web-based design editor while preserving essential layout, style, and asset information. The result: true browser editing of InDesign content, without the limitations of traditional desktop software.

The Current Landscape: What’s Possible (and What Isn’t) with InDesign on the Web

While creative teams increasingly expect collaborative, browser-based tools, Adobe InDesign remains deeply rooted in its desktop heritage. Its powerful layout engine and proprietary file structure were never designed for real-time, cloud-native editing. As a result, teams who rely on InDesign often face friction when trying to make designs accessible to clients or other stakeholders online.

Adobe has made incremental steps toward the web, but these tools still serve limited purposes:

Share for Review – enables commenting and approval workflows in the browser, but doesn’t allow editing or layout changes.
InCopy on the Web (beta) – offers browser-based text editing within locked layouts. It’s useful for copy review, yet visual elements remain untouchable.
Adobe Express export – lets designers repurpose InDesign layouts as simplified templates for lightweight editing, but the process is one-way and loses much of InDesign’s fidelity and control.

For teams that need to deliver editable templates, enable client-side personalization, or embed creative workflows inside their own platforms, these options aren’t sufficient. They lack extensibility, API access, and the ability to maintain brand-level control in a web environment.

Beyond Adobe: Existing Alternatives

Several third-party tools have tried to fill the gap:

VivaDesigner mirrors parts of InDesign’s functionality in a browser, but operates as a self-contained product rather than an embeddable SDK.
Silicon Designer builds on InDesign Server to power web-to-print solutions, but depends on heavy backend infrastructure and costly licensing.
Photopea provides impressive browser editing for layered graphics and basic IDML files, yet lacks enterprise-grade extensibility or workflow integration.

Each of these solutions demonstrates what’s possible, but none offer a developer-friendly foundation for building editing workflows and experience on-top of InDesign in the browser.

Where IMG.LY’s CE.SDK Fits In

This is the gap that CE.SDK fills.

Instead of emulating InDesign’s desktop application, CE.SDK focuses on data translation and browser-native rendering. Its InDesign Importer converts the open IDML format into CE.SDK’s optimized scene format retaining layout structure, typography, and key design elements so users can edit and export designs directly in the browser and all other platforms supported by CE.SDK.

For developers, this approach unlocks a new level of flexibility:

Embed an editable InDesign experience in any web platform.
Integrate design editing into DAMs, CMSs, or creative automation workflows.
Customize UI, behaviors, and integrations to match existing systems.

In short, CE.SDK transforms what used to be static, desktop-bound InDesign files into interactive, web-based design templates, without compromising control or scalability.

Introducing the CE.SDK InDesign Importer

Moving professional InDesign layouts into the browser isn’t just about file conversion, it’s about accurately translating complex design data into a web-native format that can be rendered, edited, and automated.

That’s exactly what the CE.SDK InDesign Importer does.

The importer acts as a bridge between Adobe InDesign’s IDML format and CE.SDK’s scene model, transforming desktop-authored layouts into editable, browser-ready projects. Once an .idml file is exported from InDesign, the importer reconstructs its layers, assets, and properties, packaging them into a CE.SDK scene archive that can be opened instantly inside any CE.SDK instance.

Explore the InDesign Template Import Demo for a comprehensive example.

A Stand-Alone Module, Built for Integration

Unlike the core CE.SDK editor, the InDesign Importer is distributed as a stand-alone package that you can integrate into any workflow. It’s available via npm as

@imgly/idml-importer,

allowing developers to run imports in their own build systems, servers, or client-side applications before loading the resulting scene into CE.SDK.

This separation makes it easy to slot the importer into existing pipelines, for example, automated template ingestion systems, DAM integrations, or internal pre-processing tools — without requiring the full editor runtime.

How It Fits into the CE.SDK Ecosystem

CE.SDK (CreativeEditor SDK) is an embeddable creative editor powering photo, video, and design workflows across Web, iOS, Android, Desktop, and Server. It offers a modular, extensible engine and UI framework that teams can tailor to any brand or use case.

The InDesign Importer extends that ecosystem by unlocking compatibility with one of the most widely used layout tools in the world. Together, they enable a complete pipeline:

InDesign (IDML) → @imgly/idml-importer → CE.SDK Scene File → Browser Editing & Automation

This means existing InDesign templates can become live, editable browser experiences — without rebuilding designs manually or deploying heavy server infrastructure.

What the Importer Delivers

File-Format Translation – Converts IDML files into CE.SDK scene archives while preserving layout hierarchy, positioning, and grouping.
Asset Bundling – Packages fonts, embedded images, and color data for immediate use in CE.SDK.
Color Mapping – Converts CMYK values into RGB for web rendering (native CMYK support is in development).
Element Preservation – Maintains grouping, rotation, shapes (rectangles, ovals, polygons, lines), gradients, transparency, and strokes.
Developer Flexibility – Import locally or at scale, feed the resulting scene into CE.SDK’s API, or integrate into automated asset pipelines.

Real-World Use Cases & Workflows

Once an InDesign file becomes editable in the browser, entirely new workflows open up — from collaborative editing to automated content generation.

The CE.SDK InDesign Importer enables organizations to extend proven InDesign templates into scalable, web-native experiences:

Web-to-Print Platforms

Allow end users to personalize marketing collateral, business cards, or packaging directly in a browser editor while maintaining the designer’s original layout integrity.

Brand Template Portals

Empower distributed teams, agencies, or franchise partners to create on-brand materials without ever touching desktop software. Designers upload InDesign templates once; users edit and export variations on demand.

Creative Automation Systems

Combine CE.SDK with data pipelines to automatically generate localized or personalized assets at scale — replacing time-consuming manual layout work with programmable design workflows.

Client Collaboration

Deliver interactive proofing experiences where clients can adjust copy, swap images, or approve layouts in a controlled browser environment, eliminating the “export–review–revise” loop typical of InDesign-based projects.

Each of these use cases builds on the same foundation: reliable IDML translation plus CE.SDK’s flexible editing engine.

That combination makes the Importer not just a conversion tool, but a bridge to entirely new creative business models.

CE.SDK vs. Traditional InDesign Server & Other Alternatives

For teams exploring browser-based design editing, the landscape typically centers on three paths — InDesign Server, web-to-print middleware, or browser SDKs.

The CE.SDK InDesign Importer offers a modern alternative to all three.

Feature / Capability	InDesign Server	Third-Party Tools (VivaDesigner, Silicon Designer)	CE.SDK + InDesign Importer
Editing Fidelity	Full but desktop-rendered	Partial; varies by implementation	High; layout preserved via IDML
Web Accessibility	Limited; server-side only	Browser UI, but closed systems	Fully client-side, browser-native
Embeddable / SDK	No	Proprietary	Yes + modular npm packages
Infrastructure	Requires Adobe licensing & server setup	Vendor-hosted	Lightweight; deploy anywhere
Extensibility	Restricted scripting	Limited	Full API & UI customization
Cost / Licensing	High, per-instance	Varies; often enterprise-only	Predictable developer friendly licensing

CE.SDK’s approach eliminates the dependency on server-side rendering and proprietary hosting, providing a developer-first, browser-native foundation for creative editing.

By translating InDesign layouts into open CE.SDK scenes, it combines professional-grade fidelity with the flexibility of modern web architecture.

Conclusion – A New Era for InDesign Workflows

For years, creative teams have struggled to bridge the gap between InDesign’s print-grade precision and the web’s flexibility and scalability.

The CE.SDK InDesign Importer closes that gap — turning traditional .indd projects into browser-ready, editable templates that can live inside any modern application.

Whether you’re building a web-to-print platform, empowering clients through self-service editing, or connecting templates to creative-automation pipelines, CE.SDK provides the foundation to make it happen — with full developer control and a consistent experience across Web, Mobile, and Desktop.

Explore the live demo: InDesign Template Import Demo

Try the importer: @imgly/idml-importer on npm

Learn more about CE.SDK: https://img.ly/products/creative-sdk

Frequently Asked Questions

Can I edit an InDesign file directly in a browser?

Not with Adobe’s native tools alone — Share for Review and InCopy on the Web only allow commenting or text changes. With the CE.SDK InDesign Importer, however, you can convert an exported IDML file into a browser-editable format that retains layout, fonts, and key visual elements.

What file formats does the importer support?

The importer reads IDML files exported from Adobe InDesign and converts them into CE.SDK scene archives. These can then be opened in CE.SDK for full browser editing and exported again to formats such as PDF, PNG, or JSON.

Does it require Adobe InDesign Server?

No. The @imgly/idml-importer runs independently — it’s a standalone npm package and doesn’t depend on InDesign Server or any Adobe infrastructure. You only need an IDML export from InDesign.

Is CMYK color supported?

Currently, CMYK values are automatically translated into RGB for accurate web rendering. Native CMYK support is planned in future updates.

Can I automate bulk imports?

Yes. Because the importer is installable via npm, you can integrate it into scripts or pipelines to process large template libraries automatically before loading them into CE.SDK.

Do imported InDesign templates remain editable for non-designers?

Absolutely. Once loaded into CE.SDK, templates can be edited through a customizable browser interface — ideal for client portals, marketing platforms, or self-service brand editors.

Comparing the 7 Best Design Editor SDKs: Which is the Right Choice for You?

Vatsala — Mon, 29 Sep 2025 13:28:10 GMT

Choosing the right design editor SDK can define how your product handles content creation. The wrong choice may limit your growth, while the right one can unlock scalable workflows, better user experience, and faster time to market.

We’ll look at their strengths, limitations, and best-fit scenarios, and explain why IMG.LY stands out as the best cross-platform design editor SDK for enterprises.

1. IMG.LY CreativeEditor SDK (CE.SDK)

CE.SDK is built for companies that need more than just basic image or video filters. It’s designed as an enterprise-grade editing platform covering both creative UI for end users and backend automation workflows. It supports photo, video, and template-based editing, so it can adapt as your product’s creative demands grow.

Features & capabilities: With CE.SDK you get multi-layer editing, template systems you can feed dynamic content into, AI-powered tools like background removal or generative design, and a plugin ecosystem to extend what comes out of the box.
Platforms & customization: CE.SDK runs on every platform: Web, iOS, Android, React Native, Flutter, Node.js, and Electron. This means whether you’re building a mobile app, a desktop dashboard, or a hybrid setup, the editor behaves consistently. On the customization side, everything is fully white-label. You can theme the UI, adapt workflows, and build custom plugins. It’s designed so your users feel like they’re interacting with your brand, not a third-party tool.
Implementation: Implementation is designed to scale. You can get going quickly with default editors, then ramp up to more custom UX as needed. Because CE.SDK handles both the frontend editing tools and has engine APIs for automation (e.g., templating, rendering), teams don’t need to piece together separate tools for UI and backend workflows.
Use cases: Some of the use cases include: E-commerce personalization, allowing customers to design or customize products, packaging, or visuals. For MarTech platforms, you can create campaign graphics, video ads, and templates. It’s also perfect for social platforms, Digital Asset Management (DAM) systems, and SaaS apps that want rich media editing.
Future‑proofing, support & pricing: IMG.LY ships frequent releases with cross‑platform parity and a clear AI roadmap. Support includes enterprise service-level agreements, onboarding support, and assistance for scaling. Pricing is custom, based on enterprise licensing. That means you pay for what you need.
Who it’s for: CE.SDK is ideal for organizations that need high customization and a white-label editor across platforms. Or companies that want both interactive user editing and automated creative workflows.

Key differentiator

CE.SDK sets itself apart by combining an interactive editor UX with a powerful automation stack in one SDK. It also brings AI features and cross‑platform coverage, making it the benchmark for enterprise‑grade design editing. If your company is expected to scale, CE.SDK will scale with you. And it’s perfect if you care about brand consistency, UX polish, and want to avoid “bolting on” tools later.

Explore our case studies to see how companies in e‑commerce, MarTech, and SaaS have already adopted CE.SDK to scale their creative workflows.

2. Canva Connect API

Canva Connect API brings Canva’s editor and templates into other apps. It provides an integration layer that allows third-party platforms to embed Canva’s design environment without investing in building a native editor from scratch. This makes it an appealing choice for teams who want to add familiar design tools quickly, but it also means that the editing experience remains tied to Canva’s infrastructure and branding.

Features & capabilities: With Canva Connect, your users get Canva’s large library of templates and assets, plus Canva’s editing tools and export options. This often means access to well-designed template content, background assets, and photo editing tools.
Platforms & customization: It’s primarily a web-based API, and the actual editing experience is tied to the Canva ecosystem and branding. While this allows stability and ease of maintenance, it reduces the ability for organizations to adapt the editor to their own branding or workflows.
Implementation & use cases: Implementation is relatively simple: connect via API and embed or redirect to Canva’s editor. It’s beneficial for SaaS apps that want to allow users to design graphics without building an editor from scratch.
Future-proofing, support & pricing: The API is tied to Canva’s roadmap, so the feature availability depends on how Canva evolves. Support is offered via documentation and community. The pricing is usage-based SaaS; you pay according to usage and the features you enable.
Who it’s for: Canva Connect API is most suitable for teams that want to provide template‑driven design capabilities with minimal development effort. It works well for organizations that are comfortable adopting Canva’s ecosystem and can accept the trade‑offs in branding and customization.

How it compares to IMG.LY

Compared to IMG.LY, Canva Connect provides significantly less control. With IMG.LY, you gain access to a fully white-label solution that allows you to theme and brand the interface, deploy across multiple platforms, and integrate advanced AI tools.

Canva Connect offers speed and convenience, but at the cost of design ownership, UI flexibility, and long-term control. For organizations prioritizing consistent user experience, platform coverage, and automation, IMG.LY remains the stronger choice.

Read more about how IMG.LY is a great alternative to Canva Connect here.

3. Placid Editor SDK

The Placid Editor allows you to embed a customizable editing experience of your templates directly into your application. Its primary strength lies in enabling organizations to deliver consistent, template-driven content creation without requiring significant development resources. By restricting edits to predefined fields and layouts it helps maintain brand integrity while still giving end users the flexibility to customize outputs.

Features & capabilities: Placid provides a curated template system. You define branded templates and control which elements are editable. Users create consistent assets without risking layout integrity. Exports cover common image formats and simple video formats.
Platforms & customization: Placid runs on the Web (JavaScript SDK). Customization centers on template configuration rather than deep UI theming or plugins. The tool is less about deep custom UI themes or plugins and more about giving non-designers safe, branded content creation workflows.
Implementation & use cases: This SDK offers easy integration via CDN, and the setup tends to be fast. Some of the common use cases include marketing automation tools, campaign content creation, branded content platforms where consistency matters, and cases where development bandwidth is limited but design control is important.
Future‑Proofing, support & pricing: Placid’s roadmap is largely centered on enhancing template management, expanding export options, and simplifying collaboration. Support is vendor‑driven and through documentation. Pricing follows a subscription model, usually linked to template volumes or usage tiers.
Who it’s for: Teams who need branded, template-driven editing, but don’t need advanced customization or deep video timelines. Placid is good for smaller teams, marketing departments, content creators, or SaaS tools focused on content campaigns rather than video editors.

How it compares to IMG.LY

To summarize, Placid is simpler and lighter. If you just need templates, safe editing, and minimal dev effort, Placid could get you up and running fast.

But compared to IMG.LY, you lose: multi-platform coverage, full white-label UI control, advanced video editing capability, deep automation, and AI features. If you expect your editing requirements to grow over time, IMG.LY gives more headroom to do so.

4. Design Huddle

Design Huddle is an embeddable, white-label editor SDK equipped with automation features. It intends to deliver the capabilities of a Canva‑style editor, but within an organization’s own environment and with greater control over content workflows and branding.

Features & capabilities: Design Huddle offers template editing, asset libraries and management, and dynamic content insertion (for example, personalize templates with user or data inputs). It may also support some automation in rendering or exporting, depending on your use case.
Platforms & customization: It is web-based, using JavaScript and iframe embedding. The tool offers themeable UI, configurable workflows, and ability to white-label so end users see your brand. There may be limitations in deeper customization compared to a plugin-based system.
Implementation & use cases: You embed the editor into your app or site (often via iframe or JS widget), configure which template sets/assets are available, define edit permissions, then let users create content within this controlled environment. These features are great for MarTech platforms, product personalization workflows, and branded content creation.
Future‑proofing, support & pricing: Design Huddle maintains an enterprise‑focused roadmap. Vendor support is available to assist with integration, onboarding, and ongoing operations, ensuring that large organizations can adopt the editor with confidence. Pricing typically follows an enterprise licensing model, reflecting its positioning toward organizations with higher demands.
Who it’s for: Companies that require a white‑label Canva‑style editor but do not want to invest in building a solution from the ground up. It is best suited for organizations that prioritize branded content workflows, product personalization, and marketing automation use cases, where ease of deployment and controlled editing environments are more important than extensive customization or cross‑platform reach.

How it compares to IMG.LY

Design Huddle and IMG.LY overlap quite a bit for use cases like branded content, template workflows, and marketing automation.

However, IMG.LY extends its offering by supporting mobile SDKs, advanced video tooling, AI‑powered features, plugin extensibility, and a deeper automation stack. This combination makes it better suited for organizations that need to manage complex, multi‑platform deployments while maintaining consistent user experiences and future‑ready capabilities.

5. DesignCombo SDK

DesignCombo is a React and Remotion-based SDK. It is designed for teams that want to build custom, browser‑based video and graphic editors where detailed control and performance are priorities.

Features & capabilities: DesignCombo includes timeline editing, visual effects, and filters, along with AI‑supported tools such as smart crop and background removal. Since it is component‑driven, development teams can assemble the editor experience in a highly tailored way, adding or removing features to suit their product requirements.
Platforms & customization: The SDK is built around Web (React). This provides a high degree of customization but also requires more engineering effort to create a cohesive user experience. Unlike pre‑packaged editors, DesignCombo expects development teams to invest time in shaping the interface and workflows to match their needs.
Implementation & use cases: Implementation generally demands skilled React developers who can integrate the SDK’s components effectively. It is well-suited to SaaS tools where video timelines and browser performance are central. Common applications include online video‑creation platforms, social video editing tools, and advertising solutions that need precise control over video assets.
Future‑proofing, support & pricing: Their roadmap includes expanding AI integrations and improvements in browser performance. Support is available through community channels and vendor documentation, though it may be lighter than enterprise‑grade offerings. Pricing typically follows a subscription model.
Who it’s for: To sum it up, DesignCombo is most appropriate for teams comfortable with developer‑heavy builds who want full control over how a video editor operates in the browser. It fits organizations where customization, flexibility, and a video‑first focus outweigh the need for fast setup.

How it compares to IMG.LY

DesignCombo performs strongly for web‑based video timelines. On the other hand, IMG.LY provides a broader solution, covering images, video, templates, and automation with support for native mobile and desktop platforms. This reduces the need for organizations to maintain separate technology stacks as they expand their creative workflows.

6. Creatomate

Creatomate is an API‑first solution with a strong focus on automation. Rather than offering an embedded, in‑app editor, it generates images and videos directly from templates and structured data. This makes it well-suited for platforms that prioritize large‑scale, programmatic asset creation over interactive editing.

Features & capabilities: Creatomate excels at dynamic rendering. It supports text overlays, data‑driven compositions, and bulk generation, making it effective for producing marketing visuals, personalized campaigns, and video variations at scale.
Platforms & customization: Because it is API‑based, Creatomate can be integrated with almost any environment: web, mobile, or server. But unlike a full SDK, it does not provide an in‑app editor UX. Instead, customization is handled within the templates and the payloads you define. This gives developers strong control over output, but it also limits end‑user flexibility inside applications.
Implementation & use cases: Creatomate offers simple REST integration. You define templates, supply data, and retrieve rendered media files. It is commonly used for automated marketing videos, social content production at scale, and personalized campaigns where assets need to be generated automatically.
Future‑proofing, support & pricing: The roadmap emphasizes improvements focused on automation. Support is vendor‑led, with documentation designed to help developers set up workflows efficiently. Pricing follows a usage‑based model, aligning costs with the volume of rendered assets.
Who it’s for: Creatomate is best suited for teams that require automation‑only workflows and do not need a user‑facing editor. It is valuable for businesses building large‑scale personalization engines, content factories, or data‑driven marketing systems.

How it compares to IMG.LY

Creatomate is strong for backend rendering and bulk content generation. IMG.LY extends beyond this by combining a front‑end editing experience with automation and AI. This allows organizations to support both interactive content creation for end users and programmatic asset generation within a single stack.

Read our detailed comparison of IMG.LY and Creatomate for more information.

7. Rendley

Rendley is a creative automation API designed for images and templates. It is an API‑first solution built to support asset generation at scale, making it well-suited for automation‑driven content pipelines.

Features & capabilities: Rendley focuses on server‑side image generation and template rendering. Developers can define templates and logic to generate large volumes of assets quickly and consistently. It does not provide an in‑app editor, but instead acts as a backend service for automated content creation.
Platforms & customization: As an API‑first platform, Rendley can be integrated with almost any environment. Customization is high, since developers control how templates are structured and how the API processes them. This gives flexibility in automation workflows, though it also means less emphasis on user‑facing editing interfaces.
Implementation & use cases: Implementation is straightforward through simple API integration. Typical use cases include marketing automation, large‑scale asset generation, and creative workflows where automation is prioritized over manual editing.
Future‑proofing, support & pricing: Rendley follows a developer‑first roadmap as a SaaS platform. The focus is on improving automation performance and scalability. Support is available from the vendor for developers, and pricing is usage‑based, aligning cost with the scale of asset generation.
Who it’s for: Rendley is intended for teams building automation‑driven creative pipelines. It is most relevant for organizations that need to generate large volumes of assets programmatically and do not require an embedded editor.

How it compares to IMG.LY

Rendley is backend‑only and provides automation for image and template generation. IMG.LY, on the other hand, combines backend automation with user‑facing editing tools, cross‑platform SDKs, and AI features, making it a more complete solution for enterprises that need both automation and interactive design experiences.

Read more about IMG.LY vs Rendley here to make the right choice.

Overview Table

Here’s a quick overview of the tools we’ve discussed.

Selecting the best fit: Why IMG.LY stands out

Choosing a design editor SDK or API starts with a clear view of what your teams’ priorities are. Here’s a quick summary to help you choose.

Canva API, Placid, Design Huddle: These tools are great for teams wanting Canva-like workflows at different levels of control.
DesignCombo, Creatomate, Rendley: Ideal for teams focused on video-first web editors, or are geared toward automation-only scenarios.

But if you want an interactive editor with automation, cross‑platform coverage, AI features, and enterprise support, IMG.LY CreativeEditor SDK is the most complete option.

Beyond offering a polished, white‑label editor, our tool provides a plugin ecosystem, native SDKs for web and mobile, and a strong roadmap for AI features that ensure long‑term relevance. Our enterprise‑grade support model with SLAs and onboarding engineers also makes IMG.LY a reliable choice for organizations with complex requirements.

We already empowered over 600 innovative startups, government entities, and Fortune 500 companies to streamline their design, video, and photo editing workflows. Get in touch, to see how we can do the same for you.

CE.SDK v1.59 Release Notes

Neslihan — Thu, 11 Sep 2025 11:09:03 GMT

This release makes building with CE.SDK smoother than ever: embed editors in minutes with React & Vue wrappers, get WebM video support, and enjoy sharper visuals with improved image scaling.

Work with WebM Video Files

CE.SDK for Web and our Engine now support WebM videos. Supported codecs include VP8, VP9, and AV1. This allows you to handle more video formats efficiently, deliver faster-loading videos, and ensure smooth playback across browsers and platforms.

→ Explore all supported formats in our documentation.

Add a Full-Featured Editor to React or Vue in Minutes

CE.SDK now ships React and Vue wrappers directly in the @cesdk/cesdk-js package. Just install, import, and skip lengthy setups.

Get prebuilt editors and smart features out of the box. This frees your team to ship faster and focus on what makes your app unique in the market.

Browse pre-built solutions for React and Vue.

What You Get Out of The Box

All-in-one integration
With wrappers included, installation is cleaner and simplified. Simply install and import the necessary components.

Prebuilt Editor Solutions
Our wrappers provide ready-to-use editor components. Perfect for rapid prototyping or embedding full-featured editing experiences.

Rich Editing Features
Use built-in support for photo & video editing (crop, filters, adjustments), smart AI tools, template creation, asset libraries. Customize the UI if needed.

→ Get started with React
→ Get started with Vue

Improvements

Keep Images Crisp Without Accidental Upscaling
When you add a bitmap image to your canvas, CE.SDK now ensures it isn’t placed larger than its original size. This prevents low-res images from being upscaled automatically and looking blurry, while still letting users enlarge them manually if they choose.

Thanks for reading! Explore the complete v1.59 Changelog (1.59.1).

3,000+ creative professionals get early access to new features and updates—don’t miss out, and subscribe to our newsletter.

A Modern React Design Editor: Integration Guide

Antonello — Thu, 16 Jan 2025 14:38:04 GMT

Learn how to integrate IMG.LY’s design editor for React into your web app and explore various use cases and customization options.

It is no surprise that content asset generation is a key for businesses in marketing and promotion, as well as for users on social media. Whether it is images or videos, these are the types of posts we engage with and relate to the most as human beings—much more than plain text.

Most content that resonates with an audience is not created from scratch. Instead, it often comes from pre-designed designs that are reused, repurposed, and adapted to fit different content or goals. That is why adding a design editor to your React application is so valuable.

In this guide, you will learn how to build a React design editor using the CreativeEditor SDK (also known as CE.SDK). We will also cover when this is useful and the customization options the editor supports.

For a quick start, check out the GitHub repository with the full code integration.

Let’s dive in!

Why Add a Design Editor to Your React App?

Before answering the question, you must understand what a design is and how helpful it can be. In this context, a design can be defined as a set of predefined assets, text overlays, placeholders, and other elements arranged in a specific layout.

Users can use designs to create images or videos with a particular structure and for specific use cases at scale. Thus, a design editor would enable your users to create personalized assets—and in the case of a React application, directly within the browser.

Building such a platform is not a piece of cake. A robust design editor requires numerous features, such as intuitive drag-and-drop functionality, template management, image manipulation tools, and more. It also generally requires integrations with third-party services and dependencies to enhance its capabilities.

Fortunately, an all-in-one solution like CreativeEditor SDK from IMG.LY makes it easy to embed this powerful design editor into your application. It supports various programming languages and technologies, including React. With extensive features and customization options, CE.SDK has no limits on the types of designs users can generate.

CE.SDK features adaptable design tools for diverse industries and use cases, such as social media post creation, digital asset management, and AI-assisted content personalization. That is why it is used by hundreds of customers, including governments, Fortune 500 companies, and dozens of startups.

CreativeEditor SDK is trusted by companies like Swiss Post, Brother, Optimizely, HP, and many more.

How to Integrate a Design Editor in React

Follow this step-by-step tutorial to see how to quickly set up a React design editor in your web app using CreativeEditor SDK. For a complete guide, read our tutorial on building a Canva alternative in React using CE.SDK.

Integrate CE.SDK into your React app using the instructions below!

Requirements

Before getting started, ensure that you meet the following prerequisites:

The latest LTS version of Node.js: If you do not have it installed, download it from the official site and follow the installation instructions.
A React 18+ application: If you do not have one set up, follow the instructions below to create it.
A CreativeEditor SDK license: In case you do not have a license, sign up for a free trial or buy a license.

If you do not have a React project set up yet, create a new one using Vite:

npm create vite@latest my-react-video-editor-app -- --template react

Open your project in a JavaScript IDE, and you are all set to start coding!

Install CE.SDK

Install CE.SDK by adding the @cesdk/cesdk-js package to your project’s dependencies:

npm install @cesdk/cesdk-js

Your package.json file will now list it as a dependency:


"dependencies": {
  "@cesdk/cesdk-js": "^1.41.1",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

Create the Design Editor Component

In the src folder of your React project, create a DesignEditor.jsx file. This will house your CE.SDK-based React design editor component.

Inside it, import CreativeEditorSDK from @cesdk/cesdk-js:

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

Next, initialize your video editor React component with the following logic:

// src/DesignEditor.jsx

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { useEffect, useRef, useState } from 'react';

// your CE.SDK license and user configs
const config = {
  license: '<YOUR_LICENSE>',
  userId: '<YOUR_USER_ID>',
};

export default function DesignEditor() {
  const cesdk_container = useRef(null);
  const [cesdk, setCesdk] = useState(null);

  useEffect(() => {
    // if the CE.SDK container has already been initialized
    if (!cesdk_container.current) {
      return;
    }
    let cleanedUp = false;

    // initialize a CE.SDK instance
    let instance;
    CreativeEditorSDK.create(cesdk_container.current, config).then(
      async (_instance) => {
        instance = _instance;
        if (cleanedUp) {
          instance.dispose();
          return;
        }

        // customize the design editor behavior...

        setCesdk(instance);
      }
    );

    // clean up the CE.SDK instance
    const cleanup = () => {
      cleanedUp = true;
      instance?.dispose();
      setCesdk(null);
    };

    return cleanup;
  }, [cesdk_container]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Replace <YOUR_LICENSE> with the license key from CreativeEditor SDK, and <YOUR_USER_ID> with your user ID to optionally track monthly active users (MAUs) across different devices.

The component defined above embeds CreativeEditor SDK into an HTML <div> element. See how to customize and use it in the docs.

Use the Component

You can now import the DesignEditor component as below:

import DesignEditor from "./DesignEditor";

Then, add it to the DOM as follows:

<DesignEditor />

This will open the design editor with the preset, enabling users to place assets, set constraints, and perform other tasks to create their final designs.

React Design Editor Use Cases

Now that you are familiar with integrating a React design editor into your web app. It is time to explore key use cases and see how CreativeEditorSDK can cover many scenarios.

CreativeEditorSDK offers a wide suite of tools to help users easily create high-quality, personalized, on-brand social media assets in your React application.

With a vast library of professionally designed templates, it streamlines the design process and ensures consistency across multiple platforms. Users can efficiently produce engaging content tailored for

Key features include customizable dimensions, filters, placeholders, and text overlays. These give users what they need to craft content optimized for various social networks, such as Instagram, X, LinkedIn, and more. That is possible thanks to platform-specific export options to produce ready-to-upload assets.

The SDK’s capabilities extend beyond static images, supporting the creation of dynamic short videos, stories, and reels. Do not forget that CE.SDK can also function as a modern React video editor.

Digital Asset Management

DAM, short for Digital Asset Management, is the process of organizing, storing, and efficiently retrieving a wide range of digital files.

CreativeEditorSDK supports DAM by helping teams centralize asset creation and editing directly within an embeddable React design editor—eliminating the need for external tools. This is achieved through features like pre-defining and locking branding elements—including logos, fonts, and color schemes—to ensure brand consistency across all generated content.

Additionally, CE.SDK offers :

Design validation tools to prevent the creation of misaligned assets.
Automatic asset generation to streamline content variations.
Robust asset management features for handling both generated content and external assets retrieved via third-party APIs.

Marketing Automation

Businesses can use CreativeEditor SDK to scale marketing campaigns through dynamic, unique, customizable design templates. In detail, this design editor allows you to generate campaign materials—like personalized flyers, ads, or banners—quickly and at scale.

Key features for marketing automation include:

Automation: Integrate with CRM or marketing tools to auto-populate templates.
Dynamic Templates: Easily create content with placeholders or custom text variables for personalized outputs and A/B testing.
Brand Compliance: Lock assets like logos and fonts for consistent messaging and branding.

AI-Powered Applications

AI is rapidly becoming a key component of more and more applications, with many integrating it in some form. Still, a critical step is often overlooked: manual editing and supervision.

CreativeEditorSDK bridges that gap by seamlessly integrating with AI-powered workflows while guaranteeing users the ability to manually define constraints, placeholders, and rules that the AI-driven automation process must follow.

Example of how a CE.SDK-powered React design editor could work with AI includes:

Automated template suggestions based on industry or use case.
Prompt-based content generation where users describe their needs, and the app delivers a draft design.
Automated content optimization, where the AI evaluates design elements and suggests improvements for readability and visual appeal.

AI-generated content is impressive, but it is essential to find the right balance between automation and manual control in the content generation process for the best results.

Product Mockups

CreativeEditorSDK simplifies the creation of product mockups, packaging designs, and marketing materials, including printable brochures and business cards.

CE.SDK features powerful customization tools and flexible capabilities, including alignment guides and snap tools to ensure perfect positioning. Additionally, color pickers and vector shape editors enable you to explore and create professional design concepts.

E-Learning Materials

Thanks to CreativeEditorSDK, you can integrate a design editor into your React e-learning application.

The embeddable design editor supports the entire process of creating e-learning materials, including custom graphics like annotations, diagrams, and visual explanations, or videos recorded directly from the camera by the teachers/educators/coaches. The component also allows for the creation of unique and customized student certificates.

Those features empower educators and content creators in the education sector to craft visually engaging and impactful learning materials.

Customization Options With CreativeEditor SDK

CreativeEditor SDK does not provide a static React design design experience. Instead, it offers extensive customization options to align with your application’s branding and workflow. Key customization options are:

Theming: Adjust the editor’s theme to match your app’s design. Choose from built-in themes, generate new ones using the theme generator, or create a custom theme manually. Test themes in the demo page.
Custom UI Plugins: Add custom UI components to fit your design style through custom plugins.
Enabling/Disabling Features: Tailor the editor by enabling or disabling features like specific fonts, templates, or tools.
Toolbar Customization: Reposition toolbar elements, change icons, or rename tools to suit your needs, creating a unique editing experience.
Custom Templates, Assets, Themes: Add your own templates, assets, or themes for a more personalized user experience.
Media Libraries: Set up customizable, sortable media libraries. CE.SDK supports integration with third-party libraries, allowing easy access to external media assets.
Custom Integrations via Events: Hook into the editor’s events to trigger workflows, save progress, or integrate with external systems.
Internationalization: Adapt the design editor component for different languages and regions with full i18n support. Overwrite and extend text strings in any language.

Conclusion

CreativeEditor SDK’s compatibility with React’s component-based architecture and large set of features ensures simple integration into any project, making it ideal for a wide range of industries—from marketing and e-learning to e-commerce and social media.

A CE.SDK-based design editor offers UI customization and unique feature options to adapt to any use case. Additionally, its support for AI workflows ensures your application remains future-proof and ready to meet evolving user needs.

By following the steps outlined in this blog post, you can bring professional-level design editing features to your web users. Explore CE.SDK’s capabilities and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.33 Release Notes

Neslihan — Thu, 29 Aug 2024 12:08:57 GMT

Welcome to the latest update of CE.SDK! We are bringing you new features that enhance your app’s creative capabilities and user experience. This release includes Configurations for a Design Editor or Photo Editor on iOS and Android, Plugins, Voiceover Capabilities, and more.

With this release, you can:

Integrate a Design Editor on iOS and Android

Get started with our new Design Editor configuration for iOS and Android. The out-of-the-box package is designed for easy creation and management of multipage designs.

Users can switch between editing and the page overview mode to review and adjust their work.

Keep the design process straightforward and efficient: the editor features a dock at the bottom, offering convenient access to essential tools like adding text, images, stickers, and uploading new assets. Additionally, you can insert a photo directly from your camera.

Key Features

Page Management
Create and manage your design pages within a template. It’s easy to create fun carousel posts, as seen on Instagram and LinkedIn, or create a series. Head to the ‘Pages’ icon on the top right bar. In the page overview, you can create, duplicate, and edit a page. Lastly, you can change the order of pages by moving them up and down.

Image Settings
Selecting an image lets you fine-tune adjustment settings, and add filters, effects, or blur. Easily crop, straighten, rotate, or flip images.

Try the Design Editor Configuration on iOS and Android.

Use Plugins to Customize UI and Add Quick Actions

We’re excited to introduce the first part of our plugin release for CE.SDK on the web: with this release, you can tailor the editor’s UI elements, reorder components, and add quick actions like background removal.

We’ve enabled extension points within key areas of the UI: the Canvas, Navigation bar, Inspector Bar, Dock, and Canvas Menu. Modify the appearance of existing features, register new components, and integrate quick actions. For example, you can add a “Background Removal” button directly in the Canvas Menu or create complex interactions like custom cut-out lines.

For more details on this first batch release and the upcoming plugins, please read our dedicated article.

Add Voiceovers to Videos on iOS

Add voiceover tracks directly within your mobile app, making your projects more dynamic and engaging. Whether creating a tutorial, narrating a slideshow, or adding commentary to a video, this feature allows you to seamlessly record, edit, and integrate voiceovers.

The popular feature, as enjoyed on TikTok and Instagram, is a staple for content creation and adds a personal touch to video creations.

To get started, navigate to “Add Audio”, select “Voiceover” section and start recording. You can preview the recording, re-record it, and add more audio, such as music. Adjust the audio levels for a balanced background track.

Try recording a voiceover with our Demo App for iOS.

Integrate a Photo Editor for iOS and Android

Our new Photo Editor Configuration is designed to offer an intuitive, out-of-the-box solution that bundles a range of key photo editing capabilities. Enhance individual photos, add text and shapes, or apply filters—this configuration is a kick-start to provide high-quality photo editing for iOS and Android with CE.SDK.

Key Features

Crop, Resize
Crop, straighten, flip, resize, and rotate your photos.

Adjustments
Fine-tune your photos by adjusting brightness, contrast, and other key settings, ensuring your images look their best.

Text, Shapes, and Stickers
Enhance your photos by adding and customizing text, shapes, and stickers. Whether you’re creating eye-catching titles, intricate shapes, or playful stickers—our configuration gives you the flexibility to adjust fonts, font colors, sizes, and positions to perfectly match your vision.

Effects, Filters, Blur, Blending Modes
Transform your images with fun effects, blur, and filters. Apply overlays to add depth and texture to your photos by adjusting blend modes and opacity to achieve the perfect effect.

Additionally, use our range of photo filters to set the mood, from warm and nostalgic tones to vibrant, modern effects, giving your images a distinctive and professional look.

Check our documentation to get started with our photo editor configuration, or try the photo editor on iOS and Android.

Improvements

Preview Audio on iOS and Android

We’ve made it easier to select the perfect audio clip for your projects. Listen to audio tracks directly within the interface before adding them to your video. Tap the play button of an audio clip in the asset library to preview it, and adjust your audio clip within the timeline.

Resize Pages

Resize pages in your web editor by simply grabbing corners and side handles, moving beyond the limitations of input fields or preset format sizes. This intuitive resizing integrates seamlessly with other adjustments, such as image cropping, ensuring a smooth workflow. Enable or disable this behavior as needed.

Create Rounded Corners

You can now easily create rounded corners for images on the web, iOS and Android. Within your designs, you can add a sleek and modern touch to your projects.

Drag and Select Multiple Elements

You can now click and drag with your mouse to draw a selection rectangle, instantly selecting all blocks within the covered area. This feature saves you time and effort, working with complex templates.

Thanks for reading! Don’t hesitate to reach out if you have any questions or need assistance.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

Please note that these release notes also include improvements from previous versions.

IMG.LY Research: AI-based Generative Design Editing

Mirko — Tue, 16 Jul 2024 10:44:05 GMT

Generative AI is transforming the tech landscape, finding applications in virtually every field. At IMG.LY, we’re exploring how these advancements can revolutionize creative workflows. This article presents a research project, where we integrate Large Language Models (LLMs) with our flagship product, CreativeEditor SDK (CE.SDK), to enable natural language-driven design edits.

Our flagship product, CreativeEditor SDK (CE.SDK) allows for advanced creative workflows for countless use cases in industries ranging from print to marketing tech. Most use cases can be realized with the out-of-the-box feature set, but it also exposes a best-in-class API, called Engine API, to build complex custom workflows with designs and videos.

In this article, we will showcase how to combine our CE.SDK Engine API with LLMs to edit designs with natural language.

Introduction to LLMs

Generative AI is often associated with chatbots, but its capabilities stretch further. It is a versatile text processor that can transform any textual input into various structured outputs. This adaptability is due to its training on diverse textual patterns, allowing it to support a wide range of text-to-text applications beyond just generating conversational prose.

Carefully crafting an input text (prompt) in a way that instructs the LLM to output a specific structured output format allows us to use LLMs to solve almost any arbitrary text-based task.

Crafting prompts is an art in itself. When ensuring that we receive the required output we need to adhere to the following steps:

Consider what type of data our model was trained on to ensure the correct formatting of our input text. The most basic example is using English as our “main prompt language” since most LLMs are mainly trained on English text samples.
All necessary problem-specific information to solve the task needs to be included in the prompt. While LLMs often possess an inherent understanding of the world inferred from the vast amount of text they are trained on, they may not know much about our specific problem. Furthermore, LLMs have the notorious tendency to hallucinate, that is fill in missing context with incoherent or incorrect information. To ensure the best performance, the input to the LLM must provide as much context as possible.
Finally, we need to instruct the LLM well enough to output text-based data in a format we can then parse and process.

Human vs. AI Workflows for Executing Design Tasks

We started this project with the vision to use generative AI to magically handle requests like these (in increasing order of complexity):

Make the logo bigger
Translate this design into German
Adopt this template to our brand colors and brand assets
Transform this Instagram story portrait design into a landscape YouTube thumbnail

When trying to delegate a task to an AI, it’s best to start by thinking about how these tasks are currently solved by humans.

Let’s walk through how a human would complete a task such as
Make the logo bigger:

Humans would visually scan the design and automatically segment it by its elements such as objects, backgrounds, or text.
Humans would then read and comprehend the task “Make the logo bigger”
Finally, users would use their existing knowledge of how to move and interact with design software to fulfill the task by manipulating the individual elements in the design.

Based on these considerations we can extract the implicit knowledge necessary to fulfill a task and make it explicit for the benefit of our LLM.

Design Representation:

To enable the LLM to understand and manipulate a design, it is essential to provide a representation of the design. This can be either textual or a mix of textual and visual (if the LLM has vision capabilities) data. While supplying the current design as a raster image to the LLM is trivial, serializing a CE.SDK design into a textual format requires a custom serialization process. The textual representation is important since it allows the LLM to identify, address, and comprehend the different components of the design effectively.

Refer to Appendix: Use-Case dependent serialization of CE.SDK Designs for a more in-depth explanation of how to accomplish this.

Editing Protocol:

LLMs do not interact with design software using traditional human interfaces like a mouse, keyboard, or visual feedback. Therefore, we need a specific protocol for the LLM to propose changes to the design. We have developed a method where we pass a textual representation of the design to the LLM as part of the prompt so that the LLM can indicate changes to the design by returning a modification of this representation.

Practically, this means that if we pass in an element such as <Image id="1337" x=”100” y="100" .../>, the LLM can change those x and y attributes by simply returning <Image id="1337" x="0" y="0" .. /> inside its output text. Since we can identify the design element that was changed using the ID attribute, we can then calculate the programmatic changes that need to be applied to the design, like in this case engine.block.setPositionX(1337, 0) and engine.block.setPositionY(1337, 0).

Refer to Appendix: Parsing and transforming LLM response for a deeper look into this topic.

Based on what we have learned, we assemble a workflow, with the LLM as the center point that allows the LLM to execute design-related tasks on any of our CE.SDK designs. This workflow can be divided into two sub-tasks: Composing an input text (prompt) with all necessary context and parsing and applying the output of the LLM to the CE.SDK design.

Composing the Input Text

As seen in the graphic above we first compose the input text based on different components to provide the model with all necessary context to fulfill the user’s editing request: This includes a general text to “instruct” the model, the actual request that the user entered, an exemplary design representation to explain our output format to the model and a representation of the currently edited design.

The general, static text to “instruct” the model is composed of the following three parts.

What we are trying to achieve in general:
"You are an AI with expertise in design, specifically focused on XML representations of designs".
Output format instructions:
Your responses should only contain one XML document. Ensure that you do not introduce new attributes to any XML elements. You can change image elements by setting the alt attribute, which then will be used to search Unsplash for a fitting image. A sample alt text is “A mechanic changing tires with a pair of beautiful work gloves on”.
Additionally, pay close attention to the layout: verify that no elements in the XML document extend beyond the page boundaries. This constraint is critical for maintaining consistency and accuracy in XML formatting. Always double-check your XML output for these requirements.
The actual user request:
e.g., "Make the logo bigger"

By including a textual representation of a comprehensive example design we can show the model which layer types are available as well as which properties of those layers can be manipulated.

The model now has all the necessary context and building blocks to respond to user requests in a format that we can process downstream.

Applying the Output Text

In the first step, we scan the output text for an XML-like document and if we find one, attempt to parse it.

This will yield a structured data object we can compare to the one we passed in and calculate which elements have been modified, added, or removed.

The resulting change set can then be translated into specific calls to the CE.SDK Engine API to change the current design.

Issues faced

Latency: One issue with state-of-the-art models is their big latency: Each LLM response contains approximately 1000 tokens. That means each request takes 7-45 seconds (depending on the model) to complete. This long delay may be unacceptable for some user experiences. However, we see this issue as transitory and expect upcoming models to have much smaller latency while maintaining their capabilities.

Pricing: Each request/response with GPT-4 turbo as a backing model costs around 5 cents and restricts some use cases. We also expect the pricing to drop significantly. The new GPT-4o model for example reduces the price by half.

Hallucinations: LLMs do not always follow the instructions properly and, e.g., produce output that is not parsable. Hallucinations directly correlate with the capabilities of the model and this issue is not apparent at current state-of-the-art LLMs like e.g GPT-4/GPT-4o.

Conclusion

We present a novel and adaptable approach to use Generative AI and LLMs specifically to interact with IMG.LY’s CreativeEditor SDK. We showcase how this technology can be used to execute common design requests on arbitrary CE.SDK Designs. The proposition that LLMs can understand textual representations of visual elements was by no means obvious. This research project has revealed that it is very well within the scope of LLMs to translate instructions from a visual semantic context to its textual representation and back. This invites more inquiries into LLMs as assistants for tasks with a heavy visual component such as design.

While further research is needed to make this technology available in production environments, we are confident that Generative AI-based editing will play a big role in the future of Graphics and Video editing.

Appendix: Use-case Dependent Serialization of CE.SDK Designs

LLMs work based on “tokens” which are equal to words. However, a design, like e.g a poster design or a social media graphic, is highly visual. That means that we need a way to convert a design into text, a way to serialize it. Our CE.SDK engine can serialize an existing scene using our engine.block.saveToString method. However, this serialization contains a huge pile of information that is not necessary to do edits inside the file. LLMs are priced by token and their speed is also relative to the number of tokens the input and output have. Thus, the number of tokens should be reduced.

We looked at several ways to convert the current state of the design into a textual representation. Since GenAI is trained on a lot of (X)HTML which has an XML-like format, we decided to serialize any designs into a tag-based XML-like format.

The IMG.LY editor internally refers to design elements like images or texts as “blocks”. These blocks are uniquely identifiable and addressable using a numeric ID. We use this ID to be able to identify a serialized design block in the input and output of the LLM. Example: <Image id="12582927" x="0" y="0" width="800" height="399" />

For each of the CE.SDK block types like e.g “Text” or “Graphics” (representing images or vector shapes), we will the CE.SDK Engine API to query very specific data from the block. That means that for example we only have a text attribute for Text blocks.

This rather specific mapping of only certain properties from the CE.SDK design into the text serialization allows us to optimize the design serialization for different use cases. A use-case where we e.g. want to automatically name each layer does maybe not require fine-grained information about e.g the font size.

Appendix: Parsing and transforming LLM response

The LLM answers with arbitrary tokens. It’s not possible to restrict the response to a certain syntax. By settling on a well-defined and widely used format we instruct the model to also reply with an XML-like document, similar to the one we passed in as “current state”.

After receiving the LLM’s Response we first make sure that only a single XML document is present inside the response. We then compare the retrieved XML document with the state of the Design that we passed into the LLM and generate a change set. This change set contains entries like “Color of block with ID=123 has changed”. These change set entries are then converted into programmatic commands, like e.g engine.block.setColor(123) and executed on the current design.

One challenges when working with an LLM is the inability to restrict the output space. Thus, we are never guaranteed that the LLM did not add e.g new XML node names or that it even replies with a proper, valid XML-like document. The only lever to influence the probability of a proper XML-like document is to use strong prompting and LLM that are good at following those instructions.

In our tests, state-of-the-art models like GPT-4 can follow those instructions without any further tooling.

Further Research Topics

It’s also worth exploring fine-tuning an LLM specifically for this task which could improve the performance of the LLM for the specific tasks.

It would also be possible to use more advanced libraries like Guidance, which allows to define a grammar for the LLM response thus making sure that the output of the LLM is always parseable.

Another way to improve the performance would be to methodically test different prompt templates and find a way to measure and compare the output quality.

Thank you for reading!

3,000+ creative professionals gain exclusive access and hear of our releases first—subscribe to our newsletter and never miss out.

Unleash Creativity with CE.SDK’s New Plugin System

Daniel — Mon, 03 Jun 2024 08:42:25 GMT

At IMG.LY, we have always believed that a superb design editor should be effortlessly customizable and extensible. We are thrilled to roll out a brand-new Plugin system for CE.SDK in the upcoming months—to take creative editing and feature development to the next level.

Starting with one-click features like background removal or vectorizers, smart design tools like QR codes or subtitle generators, and deeply interactive features like generative AI for text and images; all these tools can be used or built by customers soon.

Additionally, our upcoming Plugin system will bring you unparalleled autonomy by making feature development for our SDK accessible and offering extensive options to reconfigure our editor’s UI.

Start exploring our Plugin System rollout now to immediately benefit from upcoming features.

Built for Modification

Let’s dive deep into some of the opportunities CE.SDK plugins help unlock.

Unlocking the AI Revolution

While the AI transformation is already fully underway, much of the tech is still not very accessible to product builders, often requiring deep technical knowledge to get started. At the same time, AI features become significantly more valuable when integrated with other editing functionalities in workflows or automation. With our plugins, we aim to make it effortless to leverage innovation and put it to use.

Boosting Customer Autonomy

Key to our success is providing maximum flexibility and autonomy to our customers about product decisions. Ultimately, you shouldn’t depend on our product roadmap; rather, you should be able to add features when you like. While our SDKs are already highly configurable, plugins allow tailoring the whole user experience not only on a look & feel level but through custom functionalities and editing experiences.

Accelerate Product Expansion

Many ecosystems witnessed explosive growth in added value to the user after releasing plugin mechanisms. Currently, only IMG.LY core developers can contribute to the SDK. We have started to extend this to solution engineers and even designers on our team who don’t have much knowledge of the inner workings of the SDK. Ultimately, we will push this more and more into a community of contributors, making the community’s innovation accessible to everyone.

Key Concepts

Three important concepts have driven the development of our Plugins:

Customizable Menu Bars
We are extending our API so that it allows easy hooking into various parts of the UI. Our editor has key components like the inspector, toolbar, and on-canvas menu. These are now all accessible through an API, so you can hook your feature anywhere in the editor.

UI Building Blocks to Provide Consistency
To reach a high level of consistency and speed up time for development, we will be providing out-of-the-box UI components such as buttons, sliders, text inputs, etc.

Escape Hatches
From experience, we know that sometimes unique functionality needs unique solutions, so we have added escape hatches to add custom elements via HTML whenever needed.

What Can You Build with our Plugin System?

Let’s explore some potential use cases of the plugin system.

Custom Actions

Adding custom actions is a great option to make simple third-party APIs accessible within the editor. This can be one-click edits such as background removal, vectorizers, or auto-enhancement for images. You can also add custom actions for text in combination with Large Language Models (LLM) to provide features like autocorrection and improved writing, etc.

Custom Tools

Some custom functionality will require more than just a single button, e.g., to generate AI images, background patterns, QR codes, or maps. In these cases, you’ll require sliders, text input, drop-downs, and many other UI elements. With plugins, you can easily create panels with your own UI to bring any custom tool to life.

Custom Assets & Presets

Apart from building custom tools, you can also bundle and group effects into presets and make them accessible in a custom panel. This is especially useful to simplify the design process or create standard design components: for example, providing beautiful text presets will enable your users to create instantly great text designs without any design knowledge.

Custom Libraries

Integrate third-party libraries, such as Unsplash, Getty Images, Pexels, or your own.

Custom Editor Behavior

Some of our customers asked us how they could move a functionality from one place in the editor to another. Let’s say you wish to move the function ‘move to front’ from the inspector to the canvas menu. This is not a problem! You can do this by using the internal API endpoints of our editor.

As for custom editor behavior, you can do far more than just move functionality. Here is a demo of layer lists we built as a plugin.

Custom User Feedback

Additionally, you can enhance the canvas with overlays, which are useful for providing alerts, instructions, or feedback directly on the canvas.

What’s Next

We are now rolling out Plugins and building an initial set of features through Plugins ourselves—available for the web first, and mobile SDKs will follow. Keep your eyes peeled for our next releases and don’t hesitate to get in touch with us to learn more about plugins, and how your product benefits from integration without losing time and resources.

Thank you for reading. Join 3,000+ creative professionals—subscribe to our newsletter for updates on new features, plugins, early access, and more!

CE.SDK v1.25 Release Notes

Neslihan — Tue, 07 May 2024 11:43:59 GMT

Welcome to the latest update from our team! Since our last release, we have been working to bring more creative capabilities to your app and improve user experience. With this release, you can:

Recolor Images like T-shirt Mockups

Replace colors in any image with our new recoloring feature. Select a color you want to change, choose its replacement, and apply the changes. Recoloring is ideal for tasks like altering the color of specific elements, such as t-shirts in product photos.

Simply choose your image, navigate to Effects, and select “Recolor”. Choose the color you want to change (Source Color), and the color you want to replace it with (Target Color). For a more refined result, adjust “Smoothness”, “Color Match”, and “Brightness Match”.

This feature is available on Web, Android, and iOS platforms.

Check our documentation on filters and effects to learn more.

Create Transparency with a Green Screen

Easily make green screen backgrounds transparent in your images and videos on the Web, and for images on Android and iOS. Our Green Screen Effect is tailored to identify and eliminate green backdrops—or any other color you specify. Perfect for content creators and videographers who need to isolate subjects without manually editing backgrounds.

Select an image or video clip with a color background you wish to remove. Then choose “Green Screen” in the Effects, and our effect handles the rest. Fine-tune the effect to your liking.

User Interface Improvements

In our latest update, we’ve focused on enhancing the usability and functionality of our interface. Here’s what’s new:

Audio Preview

Choosing the right audio clip is now easier with our new Audio Preview feature. Preview audio clips directly within the interface and make the perfect selection for your projects.

Selection Frame Improvements

We’ve upgraded our selection frames with new icons, hover effects, enhanced drag functionality, and shadow rendering. These improvements make manipulating elements within our platform more intuitive and visually appealing. Whether you’re rearranging components or resizing elements, our refined handling ensures a smoother interaction.

Please note that these release notes also include improvements from v1.24.

Thanks for reading. Join over 3000 specialists with powerful apps, and subscribe to our newsletter. We keep you in the loop with brand-new features, early access, and updates.

CE.SDK v1.20 Release Notes

Neslihan — Mon, 29 Jan 2024 10:37:42 GMT

Since our last release, we’ve been crafting new features to empower your users’ creative journey. Today, we are happy to introduce CE.SDK v1.20!

With this release, you can:

Create Unique Element Combinations

Platforms: iOS, Android, Web, API

Forge limitless combinations of photos, videos, texts, and shapes with our new boolean operations feature. This dynamic suite includes operations such as Combine, Subtract, Intersect, and Exclude.

Subtract text from a shape, or seamlessly merge a distinctive shape with a lively video clip. With these powerful tools, your creativity knows no bounds, offering the freedom to craft truly unique design elements.

Refine Images with iOS Appearance Settings

Breathe life into your content and set the ambiance! We’ve recently updated the user interface on iOS to include Appearance Settings. Now, users can enhance their visual content with advanced improvements. This includes precise adjustments, creative filters, effects, and blur options.
Experience our new features by using the free Demo Design Editor, now live on the App Store.

Optimize High-Quality Asset Imports

Importing high-quality assets, like photos, can strain your device and impact your editor performance. Imagine editing on your phone and just importing a 5k pixels stock photo. Our smart engine steps in, creating an image source set with different resolutions: The intelligent engine selects the optimal target resolution for your asset and seamlessly switches to it.

The technical scoop? This update minimizes network bandwidth, loading times, and runtime memory usage.

Keep Designs in Focus on Android

With our new Camera Zoom Limits, editing a design is simpler. Your page remains in focus to prevent accidental scrolling outside the design. The zoom level is set within a minimum and maximum range for a sensible, usable view at all times. Lastly, when you select an element in your design, it will remain in focus when opening adjustments or any other inspectors. This allows you to instantly view changes made to the selected element.
Try our live Demo Design Editor for free, on Google Play.

Exclusive Access: Integrate Short-Form Video Creation

Video continues to be the most effective method for attracting and retaining your audience. However, creating a video editor from scratch can be challenging. We’re excited to announce the upcoming release: your out-of-the-box solution for video content creation!

Download Feature Exposé (PDF)

Give your users the ability to arrange video, audio, text, and graphics seamlessly on a sleek video timeline with our new Camera. This includes popular features like Voiceover, Zoom, Tap to Record, and more.

Additionally, we include the beloved Split Screen Modes for Reactions and Duets, similar to those on TikTok and Instagram.

Gain exclusive early access to our Video Content Creation Release.

Thanks for reading! Join over 3000 app specialists, and subscribe to our newsletter. We keep you in the loop with brand-new features and updates.

CE.SDK v1.19 Release Notes

Neslihan — Fri, 22 Dec 2023 14:26:48 GMT

Since our last release, we’ve been crafting new features to empower your users’ creative journey. Today, we’re thrilled to introduce CE.SDK v1.19! With this release, you can:

Unify Design Power with Block Unification

Introducing Block Unification for CE.SDK on Mobile and Web—a feature that simplifies design versatility. Videos, images, shapes, and stickers now seamlessly come together as one Graphic Block, easily modified within a unified inspector. All supported settings for your selected block, including strokes, filters, and adjustments, are conveniently displayed in a single, user-friendly space.

Unified Graphic Block
Experience a singular Graphic Block supporting diverse fills (images, videos, colors, gradients) and shapes. Switch fill types (video, image, color) effortlessly, enabling dynamic designs in one place.

Easy Fine-Tuning
Block Unification integrates effects, filters, adjustments, and blur uniformly across all design elements. Elevate your designs with precision and consistency.

A Treat for Users and Developers
For developers, Block Unification means streamlined code maintenance. The consolidation of design blocks into one Graphic Block simplifies development, allowing more focus on crafting exceptional design experiences with IMG.LY.

Enhance Interaction with Mouse Wheel Support

In our latest update, our engine now directly registers mouse wheel events on the canvas, eliminating the need for manual camera manipulation. This seamless integration brings a host of new features, including smooth zooming, centered around the cursor, and support for pinch gestures on multitouch trackpads. Enjoy a more intuitive and unified interaction experience across various inputs, simplifying and enriching your design process.

Migrate to CE.SDK v1.19

The structural changes of CE.SDK v1.19 bring a more composable and powerful editing experience. To benefit from our new features, and to attain to licensing changes, head to our documentation on migrating to v.1.19 for an easy transition.

Wait. There’s more. As we explore the extensive capabilities of our SDK, we’re unveiling new showcases to demonstrate your possibilities. Plus, stick around until the end for an exciting announcement that will elevate your video creation experience!

New Showcase: Automated Resizing

In our new live showcase for web, effortlessly generate size variations of your designs and seamlessly scale your marketing materials across platforms. The automated resizing feature empowers you to easily leverage marketing materials without requiring the involvement of a design team, ensuring efficiency and adaptability.

New Showcase: Version History

Discover the convenience of Version History, enabling you to monitor changes made to each design and seamlessly restore past versions when needed. Explore our straightforward Version History showcase for a practical design experience.

Outlook: Offer TikTok-Inspired Video Editing

Video remains the reigning champion for attracting and retaining your audience. Yet, building a video editor from the ground up is a pain.

To simplify your journey and save valuable time and resources, we are excited to unveil a groundbreaking SDK for creating captivating short-form videos in January 2024!

Empower your users to arrange video, audio, text, and graphics seamlessly on a sleek video timeline. Our new camera introduces popular features like Voiceover, Zoom, Tap to Record, and more. Plus, bring the beloved Split Screen Modes for Reactions and Duets, akin to TikTok and Instagram!

Be the first to access our new IMG.LY SDK—join our waitlist now!

Thanks for reading! Subscribe to our newsletter to stay in the loop with the latest news and updates.

CE.SDK v1.16 Release Notes

Neslihan — Tue, 26 Sep 2023 14:26:37 GMT

It’s getting colorful! Since our last release, we’ve been busy crafting new features and enhancements to empower your user’s creative journey. We are excited to announce that CE.SDK v1.16 is now available.

With this release, you can:

Maintain Color Consistency with CMYK & Libraries

Interfaces: Engine, Editor
Platforms: Web

We understand the importance of precise color reproduction and the need for brand consistency. That’s why we’re enhancing your editing experience with greater color control.

You can now seamlessly integrate CMYK and Pantone color spaces, along with other customized color libraries, including your brand’s unique colors.

This ensures that your designs not only meet but exceed expectations across all mediums, delivering a consistent and visually engaging experience. It also helps eliminate color inconsistencies and product returns, while ensuring color accuracy.

Learn more about adding color libraries to CE.SDK in our documentation.

Improve Web Interaction with Touch Gestures

Interfaces: Engine, Editor
Platforms: Web

With this update, we’re bringing a more interactive and responsive experience to our web applications. Let your users experience seamless multitouch interactions, even on mobile web. This ensures that the content and functionality of our web applications remain accessible and user-friendly across various devices.

Thank you for reading! Never miss out on updates and subscribe to our newsletter.

CE.SDK v1.11 Release

Neslihan — Tue, 16 May 2023 15:37:49 GMT

We are introducing CE.SDK v1.11! Elevate your editing game with new features like Cutout Lines, Advanced Text Styling, HEVC/H.265 codec, and transparent video support. We’ve also improved asset resource management, and added user interfaces to enhance your template creation and editing workflow. See how CE.SDK v1.11 can bring your creative vision to life.

With this release, you can:

Create Cutout Stickers and Shapes
Choose Letter Cases
Keep Font Size Consistent in Templates
Enhance and Highlight Text
Ensure Effortless Layouting with Alignment Options
Support More Video Codecs
Use Less Memory
Enjoy Smoother Editing

Create Cutout Stickers and Shapes

Interfaces: API, Default UI, Advanced UI
Platforms: Web, Server, iOS, Android

We are excited to announce that CE.SDK now supports cutout lines, which includes a new type of block that enables users to create these lines and perform cutout line combinations. A future update will allow dynamic generation of such lines for existing blocks. This feature is based on the technology used for named/spot colors and is available for use with a range of printers.

Create Cutout and Adjust Offset
By providing precise control over the offset, we enable print businesses to ensure accurate and high-quality output for their users. Empower your users to create designs with exceptional precision, perfect for applications like stickers.

Combine Cutout Shapes (Boolean Operations)
These boolean operations provide designers with the ability to manipulate and combine Cutout shapes in various ways, enabling the creation of complex designs and precise control over the final output.

Union: Combines two or more shapes into a single shape, creating a merged outline of the combined areas.
Subtract: Removes one shape from another, resulting in a new shape formed by subtracting the overlapping region.
Intersect: Creates a new shape that represents the overlapping area between two or more shapes.
Exclude: Achieve artistic flair by excluding the overlapping area between shapes, resulting in a unique and captivating composition.

Visit our documentation on using cutouts to get started.

Choose Letter Cases

Interfaces: API, Advanced UI, Default UI
Platforms: Web, iOS, Android, Server

In our Advanced Text Styling, users can now adjust multiple new settings to enhance the visual appeal of their designs:

Letter case settings, including uppercase, lowercase, and title case.

Using the new styling settings enhances your design’s visual appeal while reducing implementation time and effort.

Keep Font Size Consistent in Templates

Interfaces: API, Default UI, Advanced UI
Platforms: Web, iOS, Android, Server

CE.SDK’s new Automatic Font Size feature adjusts font size to fit within text frame constraints, enabling users to create visually appealing designs with ease. For example, a text placeholder for names will now adjust the font size for longer names, ensuring they fit perfectly within a print design. Users can now enter as much text as they need, without worrying about it overflowing out of the designated frame.

Enhance and Highlight Text

Interfaces: API, Advanced UI, Default UI
Platforms: Web, iOS, Android, Server

Easily manipulate individual segments of text within a text block with Text Run. That means, you can modify the formatting of specific words or phrases, such as font weight and changing colors, without having to manipulate the entire text block. This feature is particularly useful for creating visually appealing text effects or highlighting specific words or phrases within a larger body of text.

Ensure Effortless Layouting with Alignment Options

Interfaces: API, Advanced UI, Default UI
Platforms: Web, Server, iOS, Android

We are introducing the Block Align feature, which transforms the editing experience by enabling users to effortlessly align blocks to the page or each other, empowering them to achieve their desired layout with ease. Read our documentation on Block Alignment for more details.

Support More Codecs and Transparent Videos

Interfaces: All
Platforms: Web

We have added support for hardware-accelerated video decoding of the HEVC/H.265 codec. This new feature will allow users to decode high-quality videos with better compression and smaller file sizes. It enables CE.SDK to handle a wider range of video files with improved efficiency.

Please note: At the moment, we do not support transparent videos on some major platforms due to a limitation on Windows. However, we’re excited to announce preliminary MOV container support, allowing you to work with a wider range of video files.

Use Less Memory

Loading and unloading assets, including images and fonts, has been updated to allow for the unloading of unused items. This unused asset usage optimization frees up memory and reduces the engine’s memory footprint, resulting in more stable and longer editing sessions.

Smoother Editing

This update addresses issues with the undo/redo stack not being built properly in certain scenarios, which could cause delays in updating the video timeline. With these improvements, users can now benefit from a smoother and more efficient editing experience.

Thanks for reading. Visit our changelog for more details and start creating with confidence.

Variable Data Printing: What Is It & Why Do You Need It

Klaudia — Fri, 03 Mar 2023 09:45:33 GMT

Variable data printing (VDP) has been around since the 1980s, helping businesses automate manual processes, scale personalization efforts, and utilize the power of direct mail marketing. While the term “variable data printing” may not be familiar to everyone, we encounter its use regularly in our day-to-day lives through bills, event tickets, or membership cards.

VDP’s ability to leverage data and create personalized tangible items, such as postcards or brochures, provides a more intimate experience compared to digital communication. Although process automation is a significant advantage of VDP, there are many other ways to use it.

In this article, we’ll explore the most common applications of VDP and the best practices for working with it.

How It Works

To fully understand the advantages of variable data printing (VDP), let’s start with a clear definition. VDP, also referred to as variable data imaging, is a digital printing technique that enables the creation of numerous customized materials in a single print run. This process is powered by software that can generate data-driven designs or templates by pulling variables from databases or files.

The variables used in VDP can automatically generate unique and personalized materials based on data sources. Anything that can be customized, such as names, addresses, messages, or images, can be utilized as a variable. These elements can be changed on each printed piece without slowing down the printing process.

To illustrate how VDP works in practice, let’s consider a scenario where a company offers a loyalty program for customers to collect points when they make purchases. To encourage more spending, customers can use their accumulated points to receive discounts or freebies. Although points and bonuses can be accessed through an app or website, the company can create immediate gamification by sending a personalized card with every new purchase.

To personalize that card, we are looking at three separate variables: name, number of points, and type of discount that can be applied. To manually generate all variations of the same template would be counterproductive, but with variables connected to a database it’s an automated process. A name is connected to a number of points, which in turn are connected to discounts. The software does all the heavy lifting, while marketers and designers can focus on other tasks.

Common Applications of VDP

Although VDP was originally used to automate manual mail processes, its usefulness extends beyond that. Its ability to personalize marketing and advertising materials quickly and efficiently has made it widely appreciated and used in various industries.

While there are many ways to use VDP, we’ll focus on its most common applications in marketing, advertising, and customer relationship management. These areas benefit greatly from the ability to tailor messages to specific audiences and create unique, personalized experiences.

Marketing

From quickly generating business cards to creating custom QR codes, variable data printing is a big part of marketing efforts for most businesses. Apart from handling internal processes, VPD also has a hand in scaling personalized marketing campaigns. The growing preference for personalized messaging and products goes alongside increased usage of VDP.

Production of personalized labels, packaging, or brochures is one of the best ways to leverage VDP in marketing. It can be used as a step in a broader personalization campaign, like generating custom QR codes to bring users to personalized landing pages. Or be a venture on its own, like “Share a Coke” by Coca-Cola and its widely successful personalization of labels.

Advertising

Variable data printing brought new life to direct mail, moving away from what once was perceived as junk and irrelevant advertising, and bringing about a new age of valuable and relatable mail. A recent study reported that 70% of consumers see direct mail as more personal than online interactions, with 54% claiming they want direct mail from brands that interest them. Moreover, direct mail has the highest response rate among all advertising channels being five to nine times higher than other forms, with a simple act of adding a name to a direct mail piece that can increase response rates by 135%.

Taking advantage of VPD in advertising usually includes customized leaflets or coupons with images and content based on age or demographics. One of the personalization examples is including custom maps with steps on how to reach an advertised location, making it much more relatable and easy to act on.

Customer Relationship Management

While VDP helps marketing and advertising drive acquisition, it’s also a great way to help with customer retention. Small and yet important gestures of appreciation like custom-made thank you and birthday cards can go a long way. As mentioned before, VDP can also be used to generate membership cards or personalized bonuses and discounts based on shopping preferences. Tapping into the power of variables, every printed material sent to a customer can be created in a way that will feel personal and appreciative, in turn helping sustain loyal customers.

Why Use VDP

Variable data printing is not reserved for a single industry or business type. It can be leveraged across multiple customer touchpoints, from the awareness stage via direct mail advertising, to a personalized label and thank you card shipped with a purchased product. VDP can also be used internally to show gratitude and appreciation to employees with custom-made cards and packaging. In fact, variable data printing can be used on any piece of printed content or design that can be personalized.

Benefits

The advantages of variable data printing go hand-in-hand with the advantages of personalization. Studies show that customers respond much better to marketing materials they can connect to, with 60% of consumers saying they will likely become repeat buyers after a personalized shopping experience with a retailer.

VDP can help create a valuable experience from start to finish and facilitate a meaningful connection between a brand and a customer. Some of the most prominent benefits are:

Providing personalized shopping experience in the form of custom labels, packaging & cards
Building strong customer relationships with personalized thank you & birthday cards, custom messaging, and discounts
Delivering meaningful direct mail advertising with higher conversion rates
Generating personalized marketing campaigns & materials that customers can connect with

Bringing variable data printing to your workflows, whether it concerts marketing, advertising, HR, or sales, is a great way to tap into powerful benefits of personalization.

Challenges

The main challenge of VDP is having software that can efficiently work with variables and generate print-ready designs, while also providing advanced design editing features.

Since the popularization of personalization, variables can be leveraged in many different types of marketing materials. However, the design of those materials is equally important, and so it’s an automated print validation process.

This challenge applies to companies that use variable data to generate designs, as well as Print Service Providers (PSP) working with VDP. For the PSP, another challenge is file format submission, especially if they don’t have a web-to-print editor their customers can use to submit their orders. Flawed print validation, incompatible format, low resolution, or insufficient quality could be costly mistakes to make. Hence, the best option for print service providers is to develop their own web-to-print editor with variable data printing that will take care of those problems and limit manual work to a minimum.

Example of Leveraging Variable Data Printing with CE.SDK

IMG.LY has developed CreativeEditor SDK to help integrate VDP into all designs in an easy and intuitive way. CE.SDK is fully customizable and can be integrated into a customer-facing web-to-print editor, providing powerful editing features, or an in-house design editor for all creative needs. Here’s an example of how you can leverage variables with our editor.

Creating Custom Thank-You Card

As mentioned before, thank you cards are a great way to show appreciation and build stronger connections with both customers and employees. Creation of a custom thank-you card is pretty straightforward, here are the necessary steps:

Creating a Smart Template

To create a personalized card, we begin by designing a template with variable fields. The front design remains consistent, while the back features unique personalized messages.

2. Assigning Placeholders

The next step is to choose the elements that will be personalized. For example, we may select a personalized greeting, such as “Hello {{name}}”, and address information. To insert a variable, we use double curly brackets {{}} and a placeholder name, such as {{firstname}} or {{address}}.

3. Connecting Template to a Data Source

The last step is connecting your template to a data source with list of variables. This can be done by using the Creative Engine variable API to programmatically set values for the variables and render the final personalized card.

4. Design Validation

In the example above, there shouldn’t be any issue with text exceeding beyond bleed line or other common print errors, however, design validation is an important feature of CE.SDK. It will automatically detect any issues that might cause a print error, cause trademark infringement or generate harmful content.

And that’s it! We have created a template for custom thank-you card in three easy steps. Here is what a card would look like.

Try creating a custom card with CE.SDK yourself on our showcase page!

Conclusion

Variable data printing can be a valuable tool to boost performance and take initiatives to the next level. It can help scale personalization efforts, acquire new customers, add value to the final product, and make employees feel appreciated. By using VDP, businesses can efficiently grow and reap numerous benefits, with only a few obstacles that can be easily overcome with the right solution.

To take advantage of the benefits of VDP and overcome its challenges, consider using CreativeEditor SDK and see how it can help you scale personalization and bring variable data printing to your company and customers.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Personalize or Perish: Why Companies Need to Go Personal

Klaudia — Tue, 21 Feb 2023 11:34:58 GMT

In the past, tailor-made marketing campaigns and personalized products were seen as a luxury that only a few companies could afford. However, as we enter 2023, personalization has become essential for all industries. Consumers now expect to see relevant and relatable content on a regular basis, which means that leveraging personalization on at least one channel has become a must-have.

Many marketers already use personalization techniques to retain customers and boost conversions. However, with new trends constantly emerging, there’s a risk of falling behind. If you’re still unconvinced that personalization is the future, we’ve put together an overview of why it should be a top priority for your business strategy.

What is Personalization?

First, let’s clarify what personalization actually means. The most straightforward way to explain personalization would be tailoring of marketing materials, campaigns, and products to individuals’ specific characteristics, preferences, and needs in order to provide a more relevant and engaging experience.

With technological development, companies are finding new ways to apply personalization across their businesses, ways beyond mere “Hello [name]” emails. For industries like e-commerce or printers, the personalization approach has been extended all the way to the production stage - allowing customers to incorporate their own designs and purchase a unique product made exclusively for them. Others, rely on algorithms to make sure that customers are always presented with the most relevant and engaging content. Regardless of the industry, everyone is looking to take advantage of personalization approaches.

Benefits of Personalization

Personalization is by default a user-centric approach, prioritizing relevance, usability, and impact of provided content and features. Thoroughly planned personalized marketing campaigns can make or break new product launches, boost subscription numbers, or convert lingering customers.
For industries like e-commerce and print, enabling customers to design or customize their own product means higher sales and lower return rates - which translates to not only a higher profit margin but also a more sustainable shopping experience.

Companies efficiently utilizing personalization efforts can expect:

Deeper connection between brand and customer
Increased brand loyalty and customer retention
Higher conversion rates

Treating customers with individual attention and care creates a sense of connection going beyond just purchasing needs. When customers are faced with meaningful content they are able to find what they need more easily, creating a pleasant user experience. Instapage reported that 74% of customers feel frustrated when website content is not personalized. Making them more likely to stick with brands that go the extra mile.

Moreover, presenting customers with relevant recommendations or tailor-made discounts significantly increases chances of conversion. According to Business Insider, 47% of customers turn to Amazon if the brand they are shopping with doesn’t provide personalized product suggestions. The ability to quickly find what is needed might just be the difference between making a sale and losing a customer.

Leveraging Personalization

Applications of personalization are limited only by imagination and creativity. The right personalization approach can sometimes equal to the success of an entire business. Hard to imagine Spotify being so popular without its flawless personalization algorithms alongside giants like Netflix or Amazon which heavily rely on personalization to retain subscriptions and push sales.

Fortunately, personalization is not reserved for large enterprises only, it can be used just as efficiently by any other company, regardless of its size. Thanks to its versatility, it can be utilized across different channels, platforms, and consumer touchpoints. Some of the most popular uses of personalization include:

Marketing

For brands and marketing agencies, personalization usually translates to displaying personalized content - be it product, service, or piece of information, alongside ensuring relevant outreach - with tailor-made emails and ads. The success of marketing personalization efforts usually depends on quality of gathered data and right algorithms. Unfortunately, finding a winning approach means little without having a way to scale it. Companies that wish to succeed with their marketing personalization strategy usually have to turn to automation of workflows and creative materials.

E-Commerce

Apart from applying personalization in their marketing efforts, e-commerce companies have the advantage of extending it all the way to their products. Allowing customers to add a custom engraving or artwork creates a more intimate shopping experience with irreplaceable product added value. Companies that cannot offer those services have also found a way to leverage personalization, usually by providing options to add a custom greeting card, thank you note, or even record a custom message.

Print Products

Print products might have the most exciting and yet still underutilized personalization growth possibility. While photo printers have been profiting from personalization for quite some time, there is still a large portion of the industry lagging behind. Personalization of any printed materials like photos, posters, cards, marketing materials, or apparel items is the future. And certainly, the future customers are impatiently looking forward to.

However, personalization leaves nobody behind. For those unable to provide such services, there is a whole world of personalized packaging and labels to take advantage of and create a meaningful customer experience.

Personalization Challenges

With all the benefits and possibilities of personalization, it seems like every company should have mastered it by now. So why it isn’t so? Scaling personalization can proven to be a challenging task. It requires a strategy on how to gather data sensibly, translate it into initiatives, and bring those initiatives to life. Some of the most common challenges of scaling personalization are as follows.

Data Collection and Preparation

In order to create relevant personalization of marketing content and materials first there must be data that can support this. With topics of privacy policies and data protection on the rise, targeted ads and campaigns might seem obsolete. The key to leveraging personalization is understanding the fine line between providing experience that feels relevant and welcomed, not invasive and overbearing. Another factor contributing to positive results is the transparency of collected data and how it’s being used. Harvard Business Review conducted a study that reported that when customers were openly informed their ads were based on their online activity revenue grew by 38%. With data becoming a currency of its own, honest communication seems to be the key to successful personalization campaigns.

Creative Materials Production

Personalization is loved by marketers because they know how much it helps with engagement and conversion rates. However, it can be dreaded by designers and creative teams. Production of personalized marketing materials can create a painful bottleneck and freeze resources for extended periods of time. The only way to scale production and reduce efforts is by implementing software that can automate a large portion of the work with templates and variable data imports. Designers can create adjustable templates and the marketing team can adapt them to their needs, making the process fast and accessible to all.

Custom Prints

The most significant challenges of personalized print products usually revolve around artwork supply and print quality. Different resolutions, file formats, and design quality might mean the back and forth of proofreading, rejecting, and proofreading again. Custom prints might also pose a risk of misprints and trademark infringements, as well as mismatched expectations - especially if there is no preview function of the ready product. A solution for those headaches would be a web-to-print editor, which can not only improve the design creation process, but also automatically validate designs and generate previews.

Scale Personalization with CE.SDK

CreativeEditor SDK was developed with the thought of bringing automation and scalability to creative materials. Because of its versatility and extensive features, it can be applied across all industries and utilized on all channels and platforms, and addresses some of the most burning questions limiting the current use of personalization.

Personalized Cross-Channel Content

How do you create personalized content that can be implemented for a large audience across multiple channels, all with limited resources? The short answer is automation. Creating countless variations of marketing materials has to be automated, otherwise, it cannot be scaled.

The most efficient way is to work with adjustable templates and data variation imports. Designers can create as many templates as needed, making sure they stay on brand, while marketers and social media creators can adapt them to their needs.

CreativeEditor SDK offers the possibility of creating smart templates with adjustable placeholders and constraints. This way, editing of any design is done in a controlled and predefined way. The editor can be used by internal teams, as well as external clients and customers, making the production of all marketing materials easily scalable.

How to Develop a Web2print Editor in a Timely Manner?

The most time-efficient way is to use Software Development Kit. SDKs contain powerful features with quick and easy integration and give the opportunity to stay on brand with customizable UI.

Choosing CE.SDK, whether for photo prints, apparel, or marketing materials, can streamline the web2print process and solve many of the custom print challenges. With smart templates, companies can jumpstart their customers’ creative process, ensuring right design dimensions and quality. While automatic design validation safeguards the printing process with notifications of artwork exceeding bleed margin, as well as checking for harmful content or trademark infringements.

Conclusion

Regardless if you use it as a key component or part of a bigger strategy, personalization is here to stay, and it will most likely determine the success of many brands and industries. Staying up to date with current personalization trends is becoming a must for marketers, with a growing need to think outside the box. The ability to scale personalized marketing materials, and provide bespoke user experience and relevant recommendations, are the future of reaching conversion goals and building lasting relationships with customers.

Companies will have to find ways to easily and efficiently scale personalization and bring it to their users. IMG.LY developed tools to help with those efforts. Learn more about CE.SDK capabilities or see how to use it for Creative Automation process or Web-to-Print.

If you want to learn more about integrating CE.SDK, check out our documentation or try it for free!

Thanks for reading. To stay in the loop, subscribe to our Newsletter.

CE.SDK v1.8.0 Release

Neslihan — Tue, 18 Oct 2022 14:48:05 GMT

Since our CE.SDK v1.7.0 Release, we implemented more highly requested features. Today, we shine light on them. As always, we are excited to hear your feedback and suggestions to build powerful features for your application. Our Product Roadmap is the best place to make your case and be the first one to know of future releases.

CE.SDK v1.8.0

This release includes:

Node.js Platform Support
Common Touch Gesture Support for iOS
Emoji Support ?
Image Straightening in Advanced & Default UI
Multi Selection Rotation
Outlook

Node.js Platform Support

Since the release of our Node Package, you can run a headless version of CE.SDK on the server. Now with this release, you have the full power of our Creative Engine at your fingertips, enabling you to programmatically generate images on the server or command line, render scenes created with the web SDK, and implement any creative automation workflow.

Common Touch Gesture Support for iOS

We know that a mobile presence and functionality is crucial for your application. If users find it difficult to complete a task or are frustrated by poor usability, they could quickly bid adieu to your app and ditch your hard work for a competitor. So with this update, we add common touch gesture to improve the editing experience on touchpads and mobile devices. This includes gestures like pinching, spreading, dragging, rotating, tap and double tapping.

Emoji Support

Sometimes, a party face says more than a thousand words ?: Emojis have become an essential part of modern communication and are omnipresent, especially on mobile platforms, but on desktop as well. We added Emoji rendering support for more fun edits and colorful messaging.

Image Straightening in Advanced & Default UI

While cropping your image, you can now also straighten, flip and rotate it! This feature gives you full control over your image in one place – available in both Advanced and Default User Interfaces.

Multi Selection Rotation

For an accelerated design and editing process, the engine and user interface now allow rotating several blocks at once. To multi-rotate, simply hold your Shift key while selecting the blocks you would like to move simultaneously.

Outlook

Native iOS Platform Support: With this feature, we will add support for developing native iOS applications with the SDK. It will come with full Swift API support and many integration examples.

Video for Web with CreativeEditor SDK: Users will be able to edit and create fantastic videos based on templates in their browser with our SDK in your application soon! Sign up for early access.

Thanks for reading! To stay in the loop, feel free to subscribe to our Newsletter.

CE.SDK v1.7.0 Release and Roadmap

Malte — Mon, 08 Aug 2022 12:07:47 GMT

Today, we are thrilled to highlight the best new features and changes in CE.SDK since our v1.6.0 Release. We have also published our Product Roadmap for CE.SDK to share our vision and direction for upcoming releases. This roadmap will let you know ahead of time what features you can expect from us and accelerate your product planning and development. We are excited to hear your feedback and suggestions to build more powerful features for your application!

CE.SDK v1.7.0

This release includes:

Auto Close Option in Web UI Configuration for Asset Libraries
Custom URI Resolver
Improving Mobile Touch Support
Rotation of Groups and Hierarchies
Custom Asset Source UI
Disconnecting UI Variants from Roles
Asset Source ApplyAsset API
Blur API
Effects API
Image Fills API
Image Straighten API
Improved Group Selection and API
Scopes API
Shadows API
Zoom API

Auto Close Option in Web UI Configuration for Asset Libraries

There are no one-size-fits-all solutions for the behavior of asset library panels after an action was triggered. It depends on the use case and might vary between the panels and the available screen space. Thus, this is now configurable.

Custom URI Resolver

Custom URI Resolvers give you full control over how URIs should be resolved. You can create custom storage backends and even resolve different resolution images in different instances. Find more information in our documentation.

Improving Mobile Touch Support

Input handling was streamlined to handle both touch and mouse input efficiently. On touch devices, all handles maintain the recommended minimum size for touch input and are intelligently hidden to minimize overlap. Thanks to this mechanism, resizing and rotating are always a breeze.

Rotation of Groups and Hierarchies

The engine and user interface add options for rotating groups and design blocks with children. This allows changing the rotation of multiple elements at once quickly.

Custom Asset Source UI

Instead of fixed entry points such as “Images,” “Stickers,” or “Shapes,” we want to enable custom and flexible entry points. Until today, we tied them to a block type, which is currently only relevant when users add an asset to the scene.

Moving from Roles to Abilities: Disconnecting UI Variants from Roles

Before the change, the Advanced UI was tied to the creator role and the Default UI was tied to the Adopter Role. This is now no longer the case. The scopes and editing options are still controlled by the abilities of the current role.

Shadows in Advanced UI

With this update, we roll out the long-awaited ability to apply shadows to elements in our Advanced UI. Realistic drop shadow effects add more depth to your designs with a few clicks – no other editor is needed.

Blur API

We introduce new APIs to modify the blur for images and other blocks. This change allows programmatic access to add blur effects in automation cases and when building your own UI.

Effects API

We introduce new APIs to modify the effect stack for shapes and other blocks. This allows programmatic access to effects like adjustments, LUT filters, and many more.

Image Fills API

Currently, you can only access and use images with the image block. However, pages or vector shapes could use more than just a color or gradient fill. Therefore, we broaden the concept of fills by allowing every block to have an image fill, e.g., pages. This change will enable building a more natural photo- or video-editor experience. Documentation.

Image Straighten API

We are extending the Image Crop API to allow straightening, flipping, and rotating images during cropping. This change allows more fine-grained control.

Improved Group Selection and API

There are multiple options to select blocks inside a group:

selecting a group first and with each click select one block deeper in the hierarchy
selecting an element under the cursor directly, neglecting the hierarchy

Previously, we defaulted to different behaviors depending on the user’s role. Now, this is configurable and also customizable during runtime via APIs. Therefore, it’s up to the implementor how the selection should work.

Scopes API

We introduce new APIs to modify the scopes for blocks. This update allows programmatic access to change the scopes for users and allows control over the possible edits a user can make to a scene.

Shadows API

We introduce new APIs to modify shadows for images and other blocks. This change allows programmatic access to add shadow effects to be used in automation cases and when you build your UI.

Zoom API

We introduce new APIs to modify the current zoom level. This allows programmatic access to change the current zoom easily for automation use-cases or for building your own user interface.

Product Roadmap

As mentioned before, we are happy to publish our Product Roadmap to let you in on our new features and enhancements for CE.SDK. This way, we can elaborate our decisions and plans for the product and how you can benefit while allowing you to give us feedback and indicate the importance of particular features.
Now that you know what’s coming down the pike, you can prepare for the release of significant improvements and new features such as Video Support for Web or Native iOS Support well in advance.

How To Build a Canva Clone with CE.SDK

Antonello — Wed, 27 Jul 2022 06:43:59 GMT

Canva has popularized image editing, and user expectations of creative capabilities have increased accordingly. If your web or mobile application includes any design functionality - for book covers, t-shirt designs, or social media content - it has to be on par with the design experience offered by prosumer creation tools such as Canva.

Allowing users to edit images through an easy user interface, define high-quality templates, and give them the ability to share them with the community is a great way to boost engagement, add virality, and potentially new revenue streams.

You might think this requires a lot of time and effort, but that is not the case. CreativeEditor SDK makes it dead simple to build a Canva-like design editor in minutes. I’ll show you how!

Follow this step-by-step tutorial and learn how to implement a Canva clone in React with CE.SDK. At the end of this tutorial, you will achieve the following result:

Try the final result live on CodeSandbox.

What is Canva?

Canva is a free graphic design tool for image editing featuring a drag-and-drop interface for composing different elements on a canvas. You can easily create flyers, invitations, business cards, and more with professionally designed templates. You can think of it as a basic version of Photoshop that anyone can use.

You can create Canva templates in a web browser or on the official app for iOS or Android, share them and collaborate easily. Templates make Canva a powerful tool - that is also true for CE.SDK, which makes it a perfect harbor to set sail for new horizons and create an excellent editor. Before we learn how to replicate Canva, let us evaluate the SDK in question.

What is CE.SDK?

CreativeEditor SDK (CE.SDK) is a fully customizable, user-friendly design editor tool. You can integrate it easily into your application with just a few lines of code and benefit from the template-based editor in no time.

The role-specific editing UI focuses heavily on content adaptation. CE.SDK offers two modes: in Creator Mode, you can create a design from scratch or customize existing templates. Once ready, creators can share their templates and decide which elements others can change and to what degree. Then, users can import the template and customize it in Adopter Mode (Default UI).

Try CE.SDK live demos or start a free trial.

The Creator Mode is the most powerful and least restrictive role in CE.SDK. It empowers you to unleash your creativity and create custom templates for every imaginable use case. Add, move, modify, and delete elements as you wish and define constraints. Further elevate your designs with photo editings, such as filters, effects, and background removal.

The well-rounded text editor also allows you to define variables and programmatically give them a value using the CE.SDK Variable API. For example, you may introduce a {{Name}} Variable and have CESDK import names from a database. This automation is perfect for batch-processing designs, such as greeting cards. Based on this principle, we have built an example NFT Art Collection Generator in React with CE.SDK.

In the Creator Mode, you also can define placeholders. Turning an element into a placeholder will let you determine if it can be deleted, styled, or duplicated by the adopter.

This is what the CE.SDK Creator Mode looks like:

As you can see, you can use CE.SDK to easily create a wedding invitation card template. This is just an example, and you can find other cool sample templates for greeting cards, flyers, postcards, and business cards on showcase page.

What Adopter Mode Offers You

You can test the adopter view of the wedding invitation card template shown above here.

This is what the Adopter Mode looks like:

As shown above, CE.SDK’s Adopter Mode enables you to add and modify colors, text, and images based on the constraints enabled by the creator of the template. This mode provides the Adopter users with a simple interface, narrowed down to the properties that they are allowed to change. This prevents adopters from accidentally changing or deleting parts of a design that should not be modified.

Implement a Canva Clone with CE.SDK

Let’s now learn how to use CE.SDK to build a Canva clone in React.

Prerequisites

This is the list of all the prerequisites for the Canva clone application you are going to build:

Add @cesdk/cesdk-js to your project’s dependencies with the following command:

npm install @cesdk/cesdk-js

Initialize a React Project

You can try out the Canva clone by cloning the GitHub repository supporting the article and running the demo web application with the following commands:

git clone https://github.com/Tonel/canva-clone-cesdk-imgly
cd canva-clone-cesdk-imgly
npm i
npm start

Otherwise, follow this step-by-step tutorial and learn how to build the Canva clone with CE.SDK by yourself.

First, you need to initialize a canva-clone-cesdk-imgly React project. You can do it with Create React App by launching the command below:

npx create-react-app canva-clone-cesdk-imgly

Now, the canva-clone-cesdk-imgly folder will have the following file structure:

canva-clone-cesdk-imgly
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Move into the canva-clone-cesdk-imgly folder and start a local development server with:

cd canva-clone-cesdk-imgly
npm start

Reach http://localhost:3000/ in your browser and make sure you see the default Create React App screen below:

You are now ready to code!

Build the Canva Clone Component with CE.SDK

If you want your image editing component to provide a Canva-like experience, it must include key features, such as template and custom resource management. Let’s see how to implement them all with CE.SDK.

Configure CE.SDK to use templates

Managing templates in CE.SDK is easy. All you have to do is configure the set of predefined templates loaded by CE.SDK on initialization, as explained in the official documentation on adding templates. You can achieve this as below:

useEffect(() => {
  let cesdk;

  let config = {
    // initializing CE.SDK with a few templates
    presets: {
      templates: {
        postcard_1: {
          label: 'Postcard Design',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.png`,
        },
        postcard_2: {
          label: 'Postcard Tropical',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.png`,
        },
        business_card_1: {
          label: 'Business card',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.png`,
        },
        instagram_photo_1: {
          label: 'Instagram photo',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_photo_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_photo_1.png`,
        },
        instagram_story_1: {
          label: 'Instagram story',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_story_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_story_1.png`,
        },
        poster_1: {
          label: 'Poster',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_poster_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_poster_1.png`,
        },
        presentation_4: {
          label: 'Presentation',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_presentation_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_presentation_1.png`,
        },
        collage_1: {
          label: 'Collage',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_collage_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_collage_1.png`,
        },
      },
    },
  };

  if (cesdkContainer.current) {
    CreativeEditorSDK.init(cesdkContainer.current, config).then((instance) => {
      cesdk = instance;
    });
  }

  return () => {
    if (cesdk) {
      cesdk.dispose();
    }
  };
}, [cesdkContainer]);

Thanks to the presets.templates, you can specify all the CE.SDK templates to be made available to users.
Note that the cesdkContainer variable stores the React reference to the div where to mount CE.SDK.

This is what the CE.SDK template section will look like:

As you can see, all eight templates loaded with presets.templates.

Integrate External Asset Sources Into CE.SDK

CE.SDK supports external asset sources, meaning you can give your users a vast library of resources to supercharge their creative workflows. Instead of spending time building a repository of images manually, you can provide your users with image resources retrieved dynamically by connecting to services like Unsplash and Airtable. Learn how to integrate external asset sources in CE.SDK, or see a live demo based on the Unsplash and Airtable integration.

Add Custom Images to CE.SDK

You can load custom resources and make them available to users with CE.SDK. For example, you would like to add this Flaticon below to the available images in CE.SDK:

All you need to do is define a new asset source as explained in the documentation page on Integrating Custom Resources into CE.SDK.

You can achieve this as follows:

useEffect(() => {
  // path to the local image to load into CE.SDK
  const customImagePath = `${window.location.protocol + '//' + window.location.host}/resources/programming.png`;

  let cesdk;

  let config = {
    // loading the business card template as default template
    initialSceneURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.scene`,
    // loading the external asset sources
    assetSources: {
      // loading a custom image into CE.SDK
      custom: {
        findAssets: () => {
          return {
            assets: [
              {
                id: 'custom-image-1',
                type: 'ly.img.image',
                locale: 'en',
                label: 'Programming',
                thumbUri: customImagePath,
                size: {
                  width: 512,
                  height: 512,
                },
                meta: {
                  uri: customImagePath,
                },
                context: {
                  sourceId: 'custom',
                },
                credits: {
                  name: 'Freepik',
                  url: 'https://www.flaticon.com/free-icon/programming_1208884?related_id=1208782&origin=search',
                },
              },
            ],
            currentPage: 1,
            total: 1,
            nextPage: undefined,
          };
        },
      },
    },
    // translating the labels associates with the external asset sources
    i18n: {
      en: {
        'libraries.custom.label': 'Custom',
      },
    },
    // initializing CE.SDK with a few templates
    presets: {
      templates: {
        // ...
        business_card_1: {
          label: 'Business card',
          scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.scene`,
          thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.png`,
        },
        // ...
      },
    },
  };

  if (cesdkContainer.current) {
    CreativeEditorSDK.init(cesdkContainer.current, config).then((instance) => {
      cesdk = instance;
    });
  }

  return () => {
    if (cesdk) {
      cesdk.dispose();
    }
  };
}, [cesdkContainer]);

The customImagePath variable stores the path to the local image file programming.png located in the public/resources folder of the React project. This variable is used in the findAssets() function. This function is important because it defines the complete asset source. In other words, you only need one function to implement the custom asset retrieval logic. Note that providing images with labels is useful to make them searchable through the CE.SDK UI.

Now, users will be able to use the image in their template.

Tie it Together

This is what the final CanvaClone component looks like:

import './CanvaClone.css';
import CreativeEditorSDK from '@cesdk/cesdk-js';
import React, { useEffect, useRef } from 'react';
import { findAirtableAssets } from './airtableAssetLibrary';
import { findUnsplashAssets } from './unsplashAssetLibrary';

function CanvaClone({
  // initializing Airtable as default external asset library
  assetLibrary = 'airtable',
}) {
  const cesdkContainer = useRef(null);

  useEffect(() => {
    const externalAssetSources = {
      ...(assetLibrary === 'airtable' && {
        airtable: {
          findAssets: findAirtableAssets,
          credits: {
            name: 'Airtable',
            url: 'https://airtable.com/shr4x8s9jqaxiJxm5/tblSLR9GBwiVwFS8z?backgroundColor=orange',
          },
        },
      }),
      ...(assetLibrary === 'unsplash' && {
        unsplash: {
          findAssets: findUnsplashAssets,
          credits: {
            name: 'Unsplash',
            url: 'https://unsplash.com/',
          },
          license: {
            name: 'Unsplash license (free)',
            url: 'https://unsplash.com/license',
          },
        },
      }),
    };

    // path to the local image to load into CE.SDK
    const customImagePath = `${window.location.protocol + '//' + window.location.host}/resources/programming.png`;

    let cesdk;

    let config = {
      // loading the business card template as default template
      initialSceneURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.scene`,
      // loading the external asset sources
      assetSources: {
        // loading the AirTable or Unsplash asset library
        ...externalAssetSources,
        // loading a custom image into CE.SDK
        custom: {
          findAssets: () => {
            return {
              assets: [
                {
                  id: 'custom-image-1',
                  type: 'ly.img.image',
                  locale: 'en',
                  label: 'Programming',
                  thumbUri: customImagePath,
                  size: {
                    width: 512,
                    height: 512,
                  },
                  meta: {
                    uri: customImagePath,
                  },
                  context: {
                    sourceId: 'custom',
                  },
                  credits: {
                    name: 'Freepik',
                    url: 'https://www.flaticon.com/free-icon/programming_1208884?related_id=1208782&origin=search',
                  },
                },
              ],
              currentPage: 1,
              total: 1,
              nextPage: undefined,
            };
          },
        },
      },
      // translating the labels associates with the external asset sources
      i18n: {
        en: {
          'libraries.airtable.label': 'Airtable',
          'libraries.unsplash.label': 'Unsplash',
          'libraries.custom.label': 'Custom',
        },
      },
      // initializing CE.SDK with a few templates
      presets: {
        templates: {
          postcard_1: {
            label: 'Postcard Design',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.png`,
          },
          postcard_2: {
            label: 'Postcard Tropical',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_2.png`,
          },
          business_card_1: {
            label: 'Business card',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_business_card_1.png`,
          },
          instagram_photo_1: {
            label: 'Instagram photo',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_photo_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_photo_1.png`,
          },
          instagram_story_1: {
            label: 'Instagram story',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_story_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_instagram_story_1.png`,
          },
          poster_1: {
            label: 'Poster',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_poster_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_poster_1.png`,
          },
          presentation_4: {
            label: 'Presentation',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_presentation_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_presentation_1.png`,
          },
          collage_1: {
            label: 'Collage',
            scene: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_collage_1.scene`,
            thumbnailURL: `https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_collage_1.png`,
          },
        },
      },
    };
    if (cesdkContainer.current) {
      CreativeEditorSDK.init(cesdkContainer.current, config).then(
        (instance) => {
          cesdk = instance;
        }
      );
    }

    return () => {
      if (cesdk) {
        cesdk.dispose();
      }
    };
  }, [cesdkContainer, assetLibrary]);

  return (
    <div className="caseContainer">
      <div className="wrapper">
        <div ref={cesdkContainer} className="cesdk"></div>
      </div>
    </div>
  );
}

export default CanvaClone;

The findAirtableAssets() and findUnsplashAssets() functions come from the GitHub repo associated with the Unsplash and Airtable integration showcase page.

These functions allow CE.SDK to dynamically retrieve resources from online services. A search for images in the CE.SDK UI will perform a query on Airtable or Unsplash and provides them to your users. With just a few lines of code, you are making massive resources available to your users.

Conclusion

Canva has rapidly become one of the most popular graphic design tools. It is so prevalent that users expect similar features in your web and mobile applications. Building a Canva clone from scratch would take months, but with CreativeEditor SDK, it only takes minutes.

In this article, we used CE.SDK to initialize an advanced design editor in React. We adopted its API to configure and customize a design editor to build a Canva clone. This would not be possible without the intuitive UI offered by CE.SDK and its advanced features, such as placeholders and the possibility to define validation rules to guide your users’ creation process.

Here we only scratched the surface of what is possible with CE.SDK – you can use its powerful image processing API to implement many more features and make your Canva clone more and more complex. This is only the beginning!

See how IMG.LY compares to Canva Connect API and check out all the use cases of CreativeEditor SDK or contact sales to learn more!

Content Moderation for User-Generated Designs with CE.SDK and Sightengine

Antonello — Mon, 13 Jun 2022 14:07:54 GMT

Creating content and sharing it with others has become one of the core features offered by online services. As users publish their content to your website, you want to consider implementing a system to prevent inappropriate posts. Ideally, content will be programmatically moderated before it is uploaded on your platform. That is what you will learn in this article!

Follow this step-by-step tutorial and learn how to integrate content moderation with Sightengine in your design process built with CreativeEditor SDK in React. At the end of this tutorial, you will achieve the following result:

Why You Should Moderate User-Generated Content

User-generated content represents a large portion of online content, whether text or multimedia. Empowering users with tools and features to create high-quality content is excellent. However, it is a common concern that potentially inappropriate content on your website will be associated with your brand. Naturally, you will want to avoid this.

A recent example from the web-to-print industry serves as a cautionary tale: the German e-commerce company Spreadshirt neglected to moderate content on its t-shirt printing platform, leading to a wave of outrage on social media. Even though the company reacted swiftly and stated an apology, Spreadshirt could have avoided most of the damage if it had implemented a system that automatically flags potentially harmful content. Of course, a religious or cultural symbol is not inherently inappropriate, but the misuse is.

It is highly advisable to take precautions to prevent your company from facing similar adversity. A common problem, however, is the costly and time-consuming manual moderation, epecially when controlling multimedia files like images.

Luckily, you can use CE.SDK and Sightengine to programmatically integrate moderation into your content design process without manual reviews.

What is CE.SDK?

CreativeEditor SDK (CE.SDK) is a powerful, easy-to-use, and fully customizable design editor. With just a few lines of code, CE.SDK provides your application with template-based workflows and automation.

The role-specific editing UI focuses on keeping content adaptation dead simple: in Creator Mode, you have the liberty to create a design from scratch or customize existing templates. When creators are ready to share a design for others to use and customize in Adopter Mode (Default UI), creators may decide which elements can be changed. See CE.SDK in action or try it for free.

What is Sightengine?

Sightengine is a convenient tool for automatic content moderation. It detects and filters unwanted content in photos, videos, and live streams through fast, accurate, easy-to-integrate, privacy-compliant APIs.

Sightengine offers you APIs to get moderation results instantly and effectively. The API-centric approach allows you to scale to up to tens of millions of images per month. You can have a look at the Sightengine demo or try it for free.

Integrate Content Moderation into CE.SDK

Let us look at how to implement an image editor with content moderation for your users. For this, you will learn how to use CE.SDK and React to implement an image design component and use the CE.SDK APIs to programmatically moderate the content with Sightengine on a Node.js server. You can try out a live showcase of content moderation with CE.SDK.

With the following steps, you can easily achieve this result with CE.SDK, React, Sightengine, and Node.js.

1. Get Started with CE.SDK

Integrate CreativeEditor SDK with React by using the official documentation. As you will see in the final snippet, this takes only a few lines of code.

Now that you have a working CE.SDK instance, your users may unleash their creativity by designing templates and sharing them with others. The powerful APIs ensure control at every step of the editing process and allow programmatically performing operations, such as content moderation.

2. Build a Content Moderation API with Sightengine

Let’s move on to content moderation with Sightengine. Keep in mind that any backend technology will work, but here you will implement a content moderation API based on Sightengine in Node.js.

2.1 Getting Started with Sightengine

First, you need a Sightengine account. If you do not have one yet, you can create a free account. Fill out the form, click Sign Up, and receive a verification email in your inbox. Click on the verification link and activate your account.

Then, navigate to API Keys on your Sightengine Dashboard page and retrieve your API user and secret credentials. You will need them to interact with the Sightengine moderation APIs.

2.2 Prerequisites

Here is a list of all prerequisites for the backend application you are going to build:

You can add express and node-fetch to your project’s dependencies with the following command:

npm install --save express node-fetch

2.3 Setting up a Node.js Express Server

Follow this step-by-step guide to set up a Node.js Express development server. You will need this to perform an API call to Sightengine to moderate your content server-side. Any Sightengine API call involves your Sightengine user and secret pair of credentials, and you do not want to expose them.

You may also want to store the result of the moderation API in your database, as well as other data. For example, you might be interested in keeping track of how many times a particular user has violated the moderation rules to warn or ban them.

2.4 Implementing a Content Moderation API in your Node.js Server

You can now implement a content moderation API in your Node.js Express server as follows:

    const fetch = require("node-fetch")

    router.get('/content-moderation', function (req, res) {
      if (!req.query.url) {
            res.status(404).send("Please provide an image url")
            return
        }

        // defining the Sightengine API parameters
        const params = {
            url: req.query.url,
            models: "nudity,wad,offensive",
            api_user: "YOUR_SIGHTENGINE_USER",
            api_secret: "YOUR_SIGHTENGINE_SECRET",
        }

        // generating the Sightengine API URL
        const queryString = new URLSearchParams(params).toString();
        const requestOptions = {
            method: "GET",
        }
        const sightengineUrl = "https://api.sightengine.com/1.0/check.json?" + queryString

        // calling the Sightengine moderation API
        const externalRes = await fetch(SightengineUrl, requestOptions)
        // retrieving the moderation result from the Sightengine API
        const moderationResultText = await externalRes.text()

        res.append("Access-Control-Allow-Origin", ["*"])
        res.append("Access-Control-Allow-Methods", "GET")
        res.append("Access-Control-Allow-Headers", "Content-Type")

        // returning the Sightengine moderation result text
        res.status(200).send(text)
    })

Take care of replacing YOUR_SIGHTENGINE_USER and YOUR_SIGHTENGINE_SECRET with your Sightengine pair of credentials retrieved before.

Now, launch your Node.js server and reach the following URL below to use Sightengine to moderate the images specified in the URL query parameter:

    http://localhost:3000/content-moderation?url=<your_image_url>

3. Moderate Images Made with CE.SDK

We will now use CE.SDK and Sightengine to programmatically moderate user-generated images. Before we can dive in, check the following requirements.

3.1 Prerequisites

This is the list of all the prerequisites you need to build for the frontend demo application:

You can add the @cesdk/cesdk-js library to your project’s dependencies with the following command:

npm install --save @cesdk/cesdk-js

Also, the demo application will use other libraries, although they are not strictly required to achieve the goals of this tutorial and can be omitted here.

3.2 Getting Started

You can try out the demo application by cloning the GitHub repository that supports this article with the following commands:

git clone https://github.com/Tonel/content-moderation-with-cesdk-and-sightengine
cd content-moderation-with-cesdk-and-sightengine
npm i
npm start

Otherwise, keep following this tutorial and build the demo application for content moderation by yourself.

First, initialize a React project called content-moderation-with-cesdk-and-sightengine by employing the Create React App command below:

    npx content-moderation-with-cesdk-and-sightengine

Now, the content-moderation-with-cesdk-and-sightengine folder should have the following file structure:

content-moderation-with-cesdk-and-sightengine
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
   ├── App.css
   ├── App.js
   ├── App.test.js
   ├── index.css
   ├── index.js
   ├── logo.svg
   ├── reportWebVitals.js
   └── setupTests.js

Enter the content-moderation-with-cesdk-and-sightengine folder and start a local server with these two commands:

cd content-moderation-with-cesdk-and-sightengine
npm start

Visit http://localhost:3000/ in your browser, and you should now be seeing the default Create React App screen below:

3.3 Integrate the Moderation Check into your Design Process

Notice that the demo application you are about to implement is just a simplified version of the app you can find in this GitHub repository. This demo app integrates the Sightengine moderation functionality with the CE.SDK design capabilities.

Now, let’s move on to the main component where the integration takes place:

import CreativeEditorSDK from '@cesdk/cesdk-js';
import ValidationBox from '../ui/ValidationBox/ValidationBox';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { ReactComponent as RefreshIcon } from './refresh.svg';
import { moderateImages } from './moderationUtils';
import styles from './ImageModerator.module.css';
import classNames from 'classnames';

function selectBlock(cesdk, blockId) {
  // deselecting all blocks
  cesdk.engine.block
    .findAllSelected()
    .forEach((block) => cesdk.engine.block.setSelected(block, false));

  // selecting the block having the blockId passed as parameter
  cesdk.engine.block.setSelected(blockId, true);
}

const ImageModerator = () => {
  const cesdkContainerDiv = useRef(null);
  const cesdkRef = useRef(null);
  const [validationResults, setValidationResults] = useState([]);

  useEffect(() => {
    // initializing CE.SDK if it has not been initialized yet
    if (cesdkContainerDiv.current && !cesdkRef.current) {
      const config = {
        role: 'Adopter',
        theme: 'light',
        initialSceneURL: `${window.location.protocol + '//' + window.location.host}/cases/content-moderation/example.scene`,
        ui: {
          elements: {
            panels: {
              settings: true,
            },
            navigation: {
              action: {
                save: true,
              },
            },
          },
        },
        callbacks: {
          // calling this function when the
          // user presses the "Save" button
          onSave: () => runImageModerationCheck(),
        },
      };
      CreativeEditorSDK.init(cesdkContainerDiv.current, config).then(
        (instance) => {
          cesdkRef.current = instance;
          // running the moderation check on initialization
          runImageModerationCheck();
        }
      );
    }
    return () => {
      if (cesdkRef.current) {
        cesdkRef.current.dispose();
      }
    };
  }, [cesdkContainerDiv]);

  const runImageModerationCheck = useCallback(async () => {
    if (!cesdkRef.current) {
      return;
    }
    // retrieving the moderation results
    const validationResults = await moderateImages(cesdkRef.current);
    setValidationResults(validationResults);
  }, []);

  return (
    <div className={classNames(styles.wrapper, 'space-y-2')}>
      <div className={styles.header}>
        <div className={styles.headerDiv}>
          <div>
            <h3 className="h4" style={{ color: 'white' }}>
              Content Moderation
            </h3>
            <p className={styles.headerDivMessage}>
              Check images for compliance with your content guidelines before
              further processing and provide user feedback.
            </p>
          </div>
          <button
            onClick={() => runImageModerationCheck()}
            className={'button button--white space-x-2'}
          >
            <span>Validate Image Content</span>
            <RefreshIcon />
          </button>
        </div>
        <ValidationBox
          results={validationResults}
          onSelect={(blockId) => {
            selectBlock(cesdkRef.current, blockId);
          }}
        />
      </div>
      <div className={styles.cesdkWrapper}>
        <div ref={cesdkContainerDiv} className={styles.cesdk}></div>
      </div>
    </div>
  );
};

export default ImageModerator;

In the first useEffect() hook, CE.SDK is initialized, and a callback on the save action is registered. This will take care of calling the runImageModerationCheck() function when the user presses the CE.SDK Save button. For more information on how callbacks work in CE.SDK, see the official documentation on observing events.

runImageModerationCheck() retrieves the moderation results obtained from Sightengine and then stores it in the validationResults array variable. This is then passed to the ValidationBox component, which will show the results of the validation process to the end-user. None of this would be possible without the moderateImages() function from the moderationUtils.js file below:

export const moderateImages = async (cesdk) => {
  // retrieving all image blocks with a name
  const imageBlocksData = cesdk.engine.block
    .findByType('image')
    .map((blockId) => ({
      blockId,
      url: cesdk.engine.block.getString(blockId, 'image/imageFileURI'),
      blockType: cesdk.engine.block.getType(blockId),
      blockName: cesdk.engine.block.getName(blockId),
    }))
    .filter((block) => {
      return block.blockName !== '';
    });

  console.log('Moderation check launched...');

  // turning the moderation results on each image block into
  // a flat array
  const imagesWithValidity = await Promise.all(
    imageBlocksData.flatMap(async (imageBlockData) => {
      // retrieving the moderation results
      const imageModerationResults = await callSightengineModerationAPI(
        imageBlockData.url
      );

      console.log(imageBlockData.blockName, imageModerationResults);

      return imageModerationResults.flatMap((checkResult) => ({
        ...checkResult,
        ...imageBlockData,
      }));
    })
  );

  console.log('Moderation check completed');

  return imagesWithValidity.flat();
};

// a cache variable to avoid
// calling the Sightengine API when not necessary
const complianceCache = {};

const callSightengineModerationAPI = async (url) => {
  // if the url is already present in the cache, then
  // return the result previously retrieved
  if (complianceCache[url]) {
    return complianceCache[url];
  }

  // calling the Sightengine moderation API
  const response = await fetch(
    // your endpoint URL
    'https://europe-west3-img-ly.cloudfunctions.net/sightengineApiProxy?url=' +
      encodeURIComponent(url),
    {
      method: 'get',
      headers: {
        accept: 'application/json',
        'Accept-Language': 'en-US,en;q=0.8',
        'Content-Type': 'multipart/form-data;',
      },
    }
  );

  const results = await response.json();

  if (results.error) {
    console.error(results.error);
    return [];
  } else {
    const checkResults = [
      {
        name: 'Weapons',
        description: 'Handguns, rifles, machine guns, threatening knives...',
        state: percentageToState(results.weapon),
      },
      {
        name: 'Alcohol',
        description: 'Wine, beer, cocktails, champagne...',
        state: percentageToState(results.alcohol),
      },
      {
        name: 'Drugs',
        description: 'Cannabis, syringes, glass pipes, bongs, pills...',
        state: percentageToState(results.drugs),
      },
      {
        name: 'Nudity',
        description: 'Images that contain either raw nudity or partial nudity.',
        state: percentageToState(1 - results.nudity.safe),
      },
    ];

    // storing the Sightengine results in the cache
    complianceCache[url] = checkResults;
    return checkResults;
  }
};

const percentageToState = (percentage) => {
  // defining the custom moderation logic based on the
  // percentage returned by Sightengine
  if (percentage > 0.8) {
    return 'failed';
  } else if (percentage > 0.4) {
    return 'warning';
  } else {
    return 'success';
  }
};

Here, we use the CE.SDK reference variable to retrieve all images in the scene through the CE.SDK APIs. Then, these are converted into URLs and passed callSightengineModerationAPI() function, which takes care of calling the Sightengine moderation API, retrieving the results, using them to produce a new output, and returning it to the caller.

We used an IMG.LY endpoint here to evade putting together a backend application. In a real-world scenario, replace https://europe-west3-img-ly.cloudfunctions.net/sightengineApiProxy?url= with the URL of the /content-moderation endpoint of your backend application. Also, note that a cache system was set up to avoid calling the Sightengine API too many times and using up call credits.

This is what the demo application will look like after being launched and the moderation check has been executed:

As you can see, the Sightengine API correctly detects drugs and weapons. Next, remove the rightmost image containing a gun and click Save to re-run the moderation check.

Sightengine no longer detects weapons in the image, proving that the moderation process is working as expected.

Et voilà! You have learned to implement content moderation for user-generated images with CE.SDK and Sightengine.

Conclusion

A challenge of user-generated content is avoiding the risk of hosting and displaying offensive or outright illegal content. Inappropriate content affects your user community and brand reputation and may even cause legal action against you.

In this article, we used CE.SDK to initialize a fully-featured design editor in React. We employed its API to programmatically call a Node.js server using Sightengine to perform content moderation on images. This allows moderation of user-generated content automatically and prevents the upload of inappropriate content to your website.

We are only scratching the surface of what is possible with CE.SDK – you can implement any UI on top of its powerful image processing API and extend the core functionality with features such as placeholders and define validation rules to guide your users’ creation process.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out on Twitter with any questions, comments, or suggestions.

CE.SDK v1.6.0 Release

Malte — Fri, 20 May 2022 09:21:48 GMT

Today, we are highlighting the best new features and changes in CE.SDK since our v1.5.0 Release six weeks ago. CE.SDK v1.6.0 is adding:

Linear Gradient Fills
Strokes, Outline, Insets, and Stroke Patterns
Blend Modes
Scale Groups, Multi-Selection, and Hierarchies
UI Template Library
Floating and Static Asset Library Panels
Placeholders API
Editing State APIs
API for Image Fit Modes

Linear Gradient Fills

With this update, we are introducing linear gradient fills. This feature creates a gradual blend between two colors, including transparency. Use the Color Picker to switch between solid color and linear gradient fill modes and determine the order of colors.

Strokes, Outline, Insets, and Stroke Patterns

This feature introduces strokes and stroke patterns. Strokes apply to any block, including images, text, and shapes. Use our APIs or UIs to set the stroke width, color, style, and more options affecting the stroke appearance.

Blend Modes

Blend modes are a popular feature in creative and image editing tools. They blend two blocks or layers to get different types of effects. This feature is available in both the API and the UI.

Scale Groups, Multi-Selection, and Hierarchies

Our engine and user interface now provide options to scale groups, multi-select and create design blocks with children. You can easily change the scaling of multiple elements at once. This also simplifies resizing and rescaling your template designs for other page and art board sizes.

UI Template Library

We are introducing the template library in all UIs. Allow users to switch between multiple templates while editing.

Floating and Static Asset Library Panels

For some screen sizes and use-cases, it might be tedious that the asset library floats over your canvas and covers your design. Therefore, you can now configure the asset library panel to be either floating or static. A static asset library won’t overlap with your design and adjusts to your screen size perfectly.

Placeholders API

CE.SDK 1.6 introduces an additional API that allows you to interact with all placeholders on the canvas. The API queries the number of placeholders in a template or document and lists all available placeholders in the current scene.

Editing State APIs

We extend the API to allow querying and modifying the current editing mode. That includes changing the on-canvas editing mode to Crop, Text, or others. You can also query the editor state for helpful information like the desired cursor type and rotation and the text cursor position. To observe these values more comfortably, an additional endpoint allows registering for callbacks whenever the editing state changes.

API for Image Fit Modes

The API now allows switching between fit modes for images:

Crop applies crop properties, and ignores the aspect ratio.
Cover resizes the image aspect-aware to fill the frame.
Contain allows resizing the image aspect-aware to fit into its frame.

Design Editor – IMG.LY Blog

Open-Source Design Editor SDKs: A Developer's Guide to Choosing the Right Solution

The Open-Source Landscape: What You’re Actually Choosing

1. Canvas and Drawing Libraries

2. Rendering Engines

3. SVG Manipulation Libraries

Canvas and Drawing Libraries: Flexible Foundations Without the Editor UI

Fabric.js

Konva.js

EaselJS

Summary: Canvas and Drawing Libraries

Rendering Engines: High Performance, Zero Editor Features

PixiJS

React Canvas

Summary: Rendering Engines

SVG Manipulation: Lightweight Control, Custom UI Required

SVG.js

Summary: SVG Manipulation

Commercial Alternative: IMG.LY CE.SDK

Side-by-Side Comparison: Open-Source vs. IMG.LY CE.SDK

Final Thoughts: Open-Source Flexibility vs. Enterprise-Ready Solutions

How to Embed an Editable InDesign Template in Your Website

Why Editing InDesign Files in the Browser Matters Now

The Current Landscape: What’s Possible (and What Isn’t) with InDesign on the Web

Beyond Adobe: Existing Alternatives

Where IMG.LY’s CE.SDK Fits In

Introducing the CE.SDK InDesign Importer

A Stand-Alone Module, Built for Integration

How It Fits into the CE.SDK Ecosystem

What the Importer Delivers

Real-World Use Cases & Workflows

Web-to-Print Platforms

Brand Template Portals

Creative Automation Systems

Client Collaboration

CE.SDK vs. Traditional InDesign Server & Other Alternatives

Conclusion – A New Era for InDesign Workflows

Frequently Asked Questions

Can I edit an InDesign file directly in a browser?

What file formats does the importer support?

Does it require Adobe InDesign Server?

Is CMYK color supported?

Can I automate bulk imports?

Do imported InDesign templates remain editable for non-designers?

Comparing the 7 Best Design Editor SDKs: Which is the Right Choice for You?

1. IMG.LY CreativeEditor SDK (CE.SDK)

Key differentiator

2. Canva Connect API

How it compares to IMG.LY

3. Placid Editor SDK

How it compares to IMG.LY

4. Design Huddle

How it compares to IMG.LY

5. DesignCombo SDK

6. Creatomate

How it compares to IMG.LY

7. Rendley

How it compares to IMG.LY

Overview Table

Selecting the best fit: Why IMG.LY stands out

CE.SDK v1.59 Release Notes

Work with WebM Video Files

Add a Full-Featured Editor to React or Vue in Minutes

What You Get Out of The Box

Improvements

A Modern React Design Editor: Integration Guide

Why Add a Design Editor to Your React App?

How to Integrate a Design Editor in React

Requirements

Install CE.SDK

Create the Design Editor Component

Use the Component

React Design Editor Use Cases

Social Media Publishing

Digital Asset Management

Marketing Automation

AI-Powered Applications

Product Mockups

E-Learning Materials

Customization Options With CreativeEditor SDK