Creative Editor – IMG.LY Blog

CE.SDK v1.43 Release Notes

Neslihan — Mon, 03 Feb 2025 12:20:13 GMT

Welcome to CE.SDK v1.43! This update brings you enhanced customization tools, allowing you to tailor the interface of your Android Editor to fit your workflow. With new possibilities for mobile configurations, you’ll enjoy a more flexible and responsive user experience. Let’s dive into what’s new!

Shape Your Interface Around Your Workflow

We’re excited to introduce powerful new ways to customize your Editor on Android. Easily configure your dock and inspector—giving you the flexibility to design a more personalized, responsive user experience!

💡 The dock is where you keep essential tools for quick access, while the inspector provides detailed controls and settings for the selected item. What’s New:

Rearrange Your Dock
Move and remove dock items freely while keeping your custom settings intact, like button height.

Smart Custom Buttons
For a more responsive workflow, add buttons that dynamically appear, change, or disappear based on your workflow—adapting to selected tools or active tasks.

Real-Time Updates
The dock updates in real-time, instantly reflecting changes to icons or visibility and adapting seamlessly to your workflow.

More customization options are coming soon! This update will be available on iOS shortly. Get started with our docs for Inspector and Dock Configuration.

Control How Images Fit into Blocks

This web feature is perfect for customizing how images appear in designs and templates, allowing for more precise control. With Fill Mode for images, you can choose from three options:

Crop: Resizes and may crop the image to fill the block.
Cover: The image fully covers the block while remaining centered both vertically and horizontally.
Fit: Scales the image to fit within the block without cropping, leaving space if necessary.

Control this via API, with details in our documentation.

Upcoming

Streamline Your Video Editing Workflow

Our next release makes web video creation smoother than ever! You will be able to add multiple video clips within a single track on your timeline, keeping your workspace organized and efficient. No more juggling extra tracks—just a clean, intuitive editing experience that lets you focus on bringing your vision to life.

View the Changelog. Thanks for reading!

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

CreativeEditor SDK Now Supports React Native on iOS & Android

Jan — Thu, 19 Dec 2024 11:57:22 GMT

We’re thrilled to announce the release of our official @imgly/editor-react-native package, bringing the power of CreativeEditor SDK to the React Native ecosystem for iOS and Android!

CreativeEditor SDK enables developers to seamlessly integrate design, video, and photo editing features into their applications. Over the past few months, we’ve been focused on enhancing mobile editor solutions—refining features and expanding to new use cases, including the Video Editor.

To make CreativeEditor SDK accessible to even more developers, we’re expanding our support to include mobile cross-platform frameworks. We started with Flutter and are now adding React Native as another highly popular frameworks for building truly cross-platform apps.

Getting Started

Getting started with CreativeEditor SDK in React Native is simple! First, make sure you meet the following minimum requirements:

React Native: 0.73+
iOS: 16+
Swift: 5.10 (Xcode 15.4)
Android: 7+

Then, add the @imgly/editor-react-native package to your project using your favorite package manager.

To launch the editor, you’ll need an instance of EditorSettings - you can use EditorSettingsModel for convenience. All you need to get started is a license key, which you can obtain from your IMG.LY dashboard.

Here’s an example of opening the Design Editor:

import IMGLYEditor, { EditorSettingsModel } from '@imgly/editor-react-native';

export const openEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({ license: 'YOUR_LICENSE_KEY' });
  const result = await IMGLYEditor.openEditor(settings);
};

Editor UI Presets

The React Native plugin builds on our native editor solutions, allowing you to leverage the existing editor UI variants. At launch, you can choose from:

Simply choose the editor solution that best suits your use case. By default, the Design Editor opens, but switching to other solutions is straightforward.

Android and iOS Setup

To setup our module in your application, you’ll need to add the expo-build-properties dependency which handles the necessary adjustments to your native folders.

Android

For Android, you’ll need to make a few adjustments to your app.json:

Set the minSdkVersion to 24 (Android 7) or later.
Add the IMG.LY Maven repository.
Ensure your Kotlin version is compatible (e.g., 1.9.10).

Here’s an example configuration:

{
  "expo": {
    "android": {
      "minSdkVersion": 24,
      "extraMavenRepos": ["<https://artifactory.img.ly/artifactory/maven>"],
      "kotlinVersion": "1.9.10"
    }
  }
}

iOS

On iOS, ensure your deployment target is set to 16.0. You can configure this in your app.json file:

{
  "expo": {
    "ios": {
      "deploymentTarget": "16.0"
    }
  }
}

Check out the Getting Started Guides or the examples on GitHub for a complete reference.

The Only Truly Cross-Platform SDK

If you’re working with React Native, you’re likely focused on faster time to market, reduced development complexity, and feature consistency across platforms. The CreativeEditor SDK shares these goals, using a single, unified creative engine that ensures:

Consistent APIs: iOS and Android share the same underlying API.
Feature Parity: Core functionality is implemented at the engine level, guaranteeing feature availability across platforms.
Interoperable Designs: Export and import designs seamlessly across platforms with consistent rendering.

Fully Customizable UI

The React Native plugin offers flexibility for theming, styling, and integrating callbacks into your editor’s workflow. Soon, we’ll introduce more advanced customization options, such as enabling or disabling features by default.

Refer to our documentation for detailed instructions on customizing the editor to match your branding and use case.

What’s Next?

To showcase the capabilities of our React Native plugin, we’ve prepared a dedicated example application available on GitHub. You can explore it to see the editor in action.

Additionally, our documentation provides all the details needed to get started, and you can visit the @imgly/editor-react-native npm page to begin your integration.

Remember to grab your license from your dashboard after starting a free trial, and let the CreativeEditor SDK unlock your users’ creative potential.

Thanks for reading!

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

CE.SDK Video Editor Now Available on Android

Jan — Tue, 22 Oct 2024 11:44:02 GMT

We are excited to announce the release of CE.SDK’s video editing and video content creation tools for Android!

After the successful iOS launch, CE.SDK’s professional video editing capabilities are now available for Android. Whether your app focuses on social media, e-commerce, or marketing technology, CE.SDK enables users to create high-quality videos directly within your app.

Getting Started

Getting up and running with an instance of the CE.SDK video editor for Android is easy.

After downloading your license (get your trial license here) from your dashboard, simply invoke VideoEditor as composable function, Activity or Fragment.

Our Video Editing Backstory

Since we launched VideoEditor SDK almost ten years ago, we have seen an astounding range of creative and unique use cases of our SDK in customer projects. From Cameo connecting celebrities and their fans in new ways, over Multibrain supercharging their users marketing campaigns with editable video content, to Zigazoo powering video content within their social network for kids while putting safety and parental control first.

Since then, millions of users have experienced IMG.LY’s VideoEditor SDK through our customers’ products, shaping how they expect to interact with and modify videos. Continuous feedback from both our customers and their users has also influenced the way we approach video interface design, helping us refine and innovate along the way.

Our goal was to combine the reliability and robustness of the VideoEditor SDK with true cross-platform compatibility and the flexibility to meet diverse needs. By applying the lessons we’ve learned, we aimed to deliver an exceptional video editing user experience straight out of the box. We described how those learnings shaped the design of the mobile video editing interface.

Key Capabilities

With CE.SDK’s sleek timeline interface, your Android users can now take their video editing from simple transforms and adjustments to complex composition and multi-track editing:

Timeline-Based Editing
Split, trim, arrange video and audio tracks. Position elements such as images and stickers on the timeline and control their duration.

Multi-Track Editing
Work with multiple video and audio tracks, allowing for complex composition.

Transform & Enhance
Crop, flip, rotate, and use presets for common video formats. Add filters, effects, blur and essential adjustments.

Customizable Templates
Create and import templates using our web video editor, to jumpstart your users’ video composition and designs.

Asset Integration
Integrate your own asset libraries for audio tracks, sound effects, images, and more.

Cross-platform Interoperability
CE.SDK’s video capabilities extends across iOS, Android and the Web, enabling cross-platform applications to offer seamless video editing capabilities. Users can edit and save work in progress and pick up on any device.

Check out the showcase app for an interactive demo of these features.

Customization

The ability to tailor the video editor to your app’s particular use case has been a front and center concern in its development.

UI Customization: While theming is currently limited to dark and light model, future releases will introduce more flexible theming, allowing you to modify the look and feel of the editor to match your app’s branding. Furthermore, we expose callbacks that make it possible to hook into editor events and overlays for custom dialogues.
Configure Video Presets: You can configure the editor to create video presets based on your users’ needs. For instance, you may want to fix the video’s aspect ratio or optimize for certain resolutions, depending on the target platform.
Video Templates: With the CE.SDK video editor web UI, you can create an unlimited number of video templates, such as collages, text designs, and animations, providing your users with professional-quality starting points for their video designs.
Assets: Provide custom filters, fonts, and stickers to enhance the user experience. For niche apps, this can be an excellent way to engage users by offering content that feels unique to your community.

CE.SDK’s new Android video editing capabilities are perfect for a variety of use cases, including:

Social Media Applications: The CE.SDK video editor for Android excels at short-form video, ideal for social media applications, whether your users are publishing to other networks or you run a network yourself.
Ecommerce: Allow your users to create engaging product showcases, ads, and promotional videos, testimonials or reviews.
Marketing Tech Platforms: Users can leverage our versatile templating to easily create polished social media and marketing graphics from within your app.

What’s Next?

This Android release is just the beginning! We are about to launch a Camera UI for Android and are working on more advanced template creation features. So stay tuned.
To see some of these features in action, check out our iOS demo, where the next phase of innovation is unfolding.

Get Started

Explore our Video UI Showcase and Documentation for Android to discover how CE.SDK can streamline your content creation projects and make Android video editing easier than ever.

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

CE.SDK v1.15 Release Notes

Neslihan — Tue, 26 Sep 2023 08:14:20 GMT

Since our last release, we’ve been busy crafting new features and enhancements to empower your creative editing journey. We are thrilled to release CE.SDK v1.15!

With this release, you can:

Create Accurate Cutouts and Vectors

Interfaces: Engine, Editor
Platforms: All

Picture this: Your users are deep into a design project, and need to isolate an object from an image. Our latest feature simplifies this process. Whether it’s a logo, text, or a complex shape in an SVG - by clicking “Generate from Selection”, our system precisely detects object contours and effortlessly converts them into cutout lines. This means you can breeze through your design tasks without the hassle of manual tracing.
Learn more about Cutouts in our documentation.

Effortlessly Edit Across All Screen Sizes

Interfaces: Editor
Platforms: Web

We’re excited to introduce a suite of responsive UI enhancements that ensure effortless editing on all devices, including smaller screens and mobile devices. Our editor adapts to limited screen space, automatically fits content to avoid cutoffs, hides button labels when space is tight, and ensures panels remain easy to use, even on small screens. Plus, you have complete control over when and where labels appear, allowing you to customize the interface to your liking.

Improved Android Video & Audio Experience

Interfaces: Editor, Engine
Platforms: Android

Experience an enhanced video and audio experience on Android with our latest update. With our optimized codec performance, we’ve fine-tuned our tools to ensure your videos and audio play flawlessly. Enjoy smoother playback, especially when navigating through your content. Also, no more delays or interruptions when seeking in your videos or audio files. Now, you can effortlessly skip to your desired moments for uninterrupted enjoyment.

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

CE.SDK v1.14 Release Notes

Neslihan — Fri, 25 Aug 2023 15:37:00 GMT

Since our last release, we’ve been hard at work developing new features and improvements to enhance your creative editing experience. We are excited to announce that CE.SDK v1.14 is now available!

With this release, you can:

Generate Thumbnails Fast for Smooth Performance

Interfaces: Engine
Platforms: All

We have made significant enhancements to the way video thumbnails are generated, resulting in a smoother and more efficient workflow. Our intelligent engine now renders thumbnails seamlessly across multiple frames, ensuring there are no delays or interruptions while you work. Instead of slow JPEG compression, we have implemented a faster method using raw pixel buffers that maintain high-quality results.

If you’re using web applications, the thumbnail width adapts to fit your screen, providing a seamless and enjoyable user experience. Additionally, our dynamic thumbnail generation adjusts based on the size of your clips and zoom level, optimizing resources and improving overall performance.

Enhance Templating with Improved Placeholders

Interfaces: Engine, Editor
Platforms: All

Introducing an enhanced placeholder behavior for text and image content, allowing for seamless editing and replacement. With the new PlaceholderBehavior concept, you can define whether a block should initially look and behave as a placeholder or allow editing/replacement. This feature provides a smooth editing experience for users and offers flexibility for template designers to differentiate between placeholder and desired content.

Bring Creative Editing to Your macOS App

We’re excited to announce the addition of macOS platform support to our lineup. Extend your application’s reach to macOS users and provide a seamless editing experience across different platforms. Get started, and initialize our engine in your macOS app with our documentation.

Expand Editing Capabilities: macOS & Catalyst Binding

With this new feature, we provide a comprehensive solution for developers looking to enhance their iOS applications with our CE.SDK’s editing capabilities. Learn how to initialize our creative engine in your iOS app in our documentation.

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

CE.SDK v1.12 Release

Neslihan — Thu, 15 Jun 2023 12:19:24 GMT

In our last release, we introduced exciting features such as cutout stickers and shapes, letter case options, effortless layouting, and more.
Now, get ready for CE.SDK v1.12, packed with more features and essential fixes to enhance your creative editing experience. Let’s explore what’s included:

Auto-Resize Designs

Interfaces: Advanced UI, API
Platforms: All
Easily auto-resize or adapt your designs to different page sizes without the need for separate templates. Our intelligent solution adjusts the elements of your design while preserving full-size elements and optimizing image fill modes. This time-saving feature empowers you to reuse templates with ease, ensuring consistent and professional results. Whether it’s creating graphics for social media, presentations, or printed materials, our auto-resize feature simplifies the process.
Learn more in our documentation.

Enhance Readability with Paragraphs

Interfaces: Default UI, Advanced UI, API
Platforms: All
Achieve better text readability and design aesthetics by modifying the spacing between paragraphs. This feature seamlessly integrates with our advanced text styling options, providing a comprehensive toolkit for creating visually stunning text-centric products, such as postcards and more. Learn more about paragraph spacing in our documentation.

Avoid Cut Off Text

Interfaces: Default UI, Advanced UI, API
Platforms: All
We’ve made a significant improvement related to text clipping that ensures the top of the text is no longer cut off. This enhancement greatly improves the visual presentation and communication of your content, providing a seamless user experience.

Achieve Perfect Design Alignment

Interfaces: Default UI, Advanced UI, Touch UI
Platforms: All
We’ve addressed the problem of snapping to the wrong elements, ensuring a more accurate and reliable snapping experience. Precise alignment is crucial in design, and our continuous improvement efforts will further enhance snapping capabilities in future updates. Enjoy a seamless and frustration-free design process with our enhanced snapping precision.

Take Control of Text Editing with Precision

Interfaces: API
Platforms: All
getTextCursorRange empowers you to access the current cursor range within the text editor. This feature opens up a world of possibilities, whether you’re building a custom user interface or implementing text-related automation. You can:

Query the text cursor offset and the current selected text range.
Automate text generation and insertion with precision.
Seamlessly integrate this functionality into your workflow and unlock new possibilities for your text-centric projects.

Say goodbye to guesswork and welcome a more accurate and efficient text editing experience. Retrieve the current cursor range effortlessly, and precisely insert content exactly where you need it. Learn more in our documentation.

Manage Templates from Multiple Sources

Interfaces: API
Platforms: All
Introducing an improved template configuration feature that allows you to define asset sources for templates. Now, you can effortlessly browse and query a vast database of templates, opening up a world of possibilities for your projects.

By aligning the template configuration process with the existing asset management workflow, we’ve streamlined the experience, saving you time and effort. Moreover, you have the flexibility to define remote asset sources directly from databases, expanding your template options even further.

Enjoy a more streamlined workflow with CE.SDK v1.12, enhanced visual presentation, and the freedom to customize your designs with ease.
Get started for free and bring creativity to your users!

Subscribe to our Newsletter to stay in the loop with the latest news and updates. Thank you for choosing IMG.LY.

How Printers Can Leverage Creative Automation

Natalia — Tue, 04 Apr 2023 09:58:54 GMT

The emergence of print as a service and print-on-demand has changed the traditional way we think about printing, creating many possibilities for customized products, such as personalized photo books and bespoke t-shirts. However, to meet the ever-evolving needs of customers, printers must constantly innovate and streamline their operations. This is where creative automation wins.

According to Keypoint Intelligence, only a mere 7% of Print Service Providers in North America had adopted a fully or mostly automated approach across their departments in 2020. This underscores the crucial role that creative automation can play in transforming the print industry. But what exactly does creative automation mean, and how can it revolutionize print production? Let’s find out!

What is Creative Automation?

To understand the power of creative automation, it’s critical to draw a line between the production of creative assets and ad units.

Although many creative assets may eventually turn into ads, they first need to be integrated into a broader ad unit that incorporates other non-graphical elements like headlines, text, and landing pages. This ad unit is then assigned to a specific campaign.

By leveraging creative automation, each stage of the creative asset production process can be automated, enabling the entire ad production process across all placements to be streamlined.

To clarify, dynamic creative automates media buying, while creative automation utilizes advanced software to produce stunning designs quickly. This approach offers several benefits, including improved efficiency, reduced costs, and higher product quality.

Creative Automation for Print Service Providers and Print-on-Demand

The potential advantages of creative automation for Print Service Providers are significant, particularly in terms of streamlining the design process.

With tools like CE.SDK, printers can rapidly create bespoke designs for t-shirts, business cards, and other products, while also taking advantage of a wide range of templates, styles, and layouts that can be easily customized to suit any project. This not only saves time, but also ensures that each design is unique and of outstanding quality.

Print-on-Demand companies, on the other hand, can also leverage the power of creative automation to offer personalized products to customers in a rapid and efficient manner.

By utilizing creative automation tools, print-on-demand companies can develop high-quality designs for photo books, t-shirts, and mugs, without the need for manual intervention in the design process. This evolves into significant time savings, cost reductions, and increased profitability, allowing print-on-demand companies to stay ahead of the competition.

How to Apply Creative Automation in Print

So, how can printers apply creative automation in print? There are several key elements to consider, including:

Variable Data Printing is a printing technique that allows the personalization of each print piece, based on specific customer data. By automating this process, Print Service Providers can increase efficiency and accuracy, while reducing costs.
Constraints might seem like a limitation, but they’re actually a key factor in ensuring that designs are consistent during the creation process and meet industry standards. By automating the constraint process, printers can ensure that designs are consistent and meet expectations.
Templates are pre-designed layouts that can be used for specific products, such as business cards or brochures. Automation of the template process allows the quickly creating of high-quality designs, without having to start from scratch each time.
Styles are a set of design elements, such as colors, fonts, and images, that can be used to create a consistent look and feel across all designs. The style automation process brings the possibility to create a cohesive brand image, increasing brand recognition and customer loyalty.
Layouts refer to the arrangement of design elements on a page, such as images, text, and graphics. Their automation provides fast creation of stunning designs, without having to manually arrange each element.
Design Validation is like having an eagle eye that spots mistakes (such as incorrect dimensions) before they become costly printing errors. Automating the design validation process allows printers to quickly identify and correct errors, reducing the risk of printing errors and increasing customer satisfaction.

Creative Automation in Print with CE.SDK

CE.SDK is a powerful tool for creative automation in print, taking care of the entire design process, from layout to validation.

With CE.SDK, you can easily create brilliant designs for various products, without having to spend time on manual design processes. The platform also offers a range of templates, styles, and layouts that can be easily customized to meet the needs of each project.

For instance, let’s say you want to create a gorgeous photo book for a client. With CE.SDK, all you have to do is upload your images, select a template, and customize the design elements.

CE.SDK will take care of the rest, automatically arranging the images into a beautifully designed photo book that includes text, graphics, and other design elements. This not only saves time, but also ensures that each photo book is unique and of high quality.

Here are some easy steps to follow when creating a photo book:

Step 1: Organize your Photos

Choose the photos you want to include in your photo book and organize them in a way that tells a story. For instance, you can arrange them chronologically or by theme.

Step 2: Customize your Photo Book

Then, add a personal touch to your photo book by customizing the text, adding captions, or changing the font style and color.

Step 3

Once you’ve finished customizing your template, you can preview the final result, and send it out for printing.

Conclusion

In today’s ever-changing printing industry, printers need to be efficient, innovative, and creative to remain competitive. Creative automation provides an excellent solution, enabling printers to streamline their design process, reduce costs, and improve profitability while delivering exceptional, personalized products to their customers.

CE.SDK is a powerful tool for creative automation in print, offering a wide range of customizable templates, styles, and layouts that can be tailored to meet the unique requirements of each project. With CE.SDK, printers can create stunning designs for a range of products, from personalized t-shirts to exquisite photo books, all while saving time and money. Try CE.SDK for free and see the benefits of creative automation for yourself.

CE.SDK v1.10 Release

Neslihan — Tue, 14 Mar 2023 15:30:46 GMT

We are pleased to announce the latest release of CE.SDK v1.10 and excited to share the newest features and updates with you. For those not yet familiar with our engine, CreativeEditor SDK is a powerful design editor that enables customizable workflows and automations for brands, agencies, and printers, all with just a few lines of code. In this release, we have introduced several new features and updates that are set to elevate the functionality and usability of the SDK, including:

Android Platform Support, making native Android application development seamless
Library Improvements, including Create, Update & Delete for Asset Libraries and Asset Libraries Generalization
Zoom Improvements, providing greater precision and accuracy when zooming to 100% and fitting specific pages
Arrange API, simplifying the visual order of items and providing common arrange methods for easier use

Android Platform Support

Our last release included iOS Native Support. So now we are thrilled to share that CE.SDK has expanded its capabilities to include full support for developing native Android applications. With this latest feature, you can seamlessly integrate the power and versatility of CE.SDK into your Android app development projects, enhancing the user experience and boosting customer engagement. Our team has worked tirelessly to make it incredibly easy for you to get started, with full Kotlin API support and plenty of integration examples to help you hit the ground running.

In today’s ever-evolving digital landscape, cross-platform app development has become essential for businesses to stay competitive. By leveraging CE.SDK’s cross-platform capabilities, you can develop and deploy apps across multiple platforms with ease, saving time and resources. This not only increases your reach, but it also allows you to provide a consistent experience to your customers, regardless of their device of choice.

Whether you’re a seasoned developer or new to the game, our Get Started Guide will equip you with the knowledge and tools necessary to begin your Android app development journey with CE.SDK.

Library Improvements

Create, Update and Delete for Asset Libraries

To streamline your workflow and save valuable time, we’ve added a much-requested feature that allows you to delete uploaded images directly from inside the asset libraries, giving you greater control and flexibility over your content.

We have updated our engine so that uploaded assets are no longer automatically tied to scenes.

Asset Libraries Generalization

We have migrated all our internal and external asset handling to be based on asset sources, eliminating the need to maintain different paths for adding and displaying assets. All visible assets are now queried from asset sources, which can be modified by adding or removing assets from a source. Additionally, we have introduced convenient helpers to create IMG.LY’s default asset sources, which contain assets that you can use to jumpstart your integration.

Zoom Improvements

Zooming has always been an integral part of editing, and our latest release makes it even more versatile and precise. With our new zoom feature, users can now zoom to fit specific pages, providing greater control and accuracy when editing complex designs. Additionally, zooming to 100% will now automatically adjust the zoom level to match the accurate export pixel size. This means that the size of pages on the screen will match exactly the size of the printed product, ensuring a seamless transition from editing to the final product. With this latest enhancement, CE.SDK is committed to providing businesses, agencies, and printers with a comprehensive and intuitive design editor.

Arrange API

We are introducing enhanced functionality for controlling the visual order of items within blocks. Previously, this could only be achieved by manually rearranging the order of the children of a block. With our latest release, we’ve extended the API with new convenience methods that provide common arrange methods for easier use.

Thanks for reading! Sign up for our Newsletter to receive our latest news straight to your inbox.

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.

Why Mobile-First is the Future of Print

Klaudia — Thu, 23 Feb 2023 13:11:09 GMT

Over the last 30 years, mobile phones have heavily influenced lifestyles across the globe. They have changed the way we communicate, spend leisure time, look for information, and shop.

Thanks to its accessibility and powerful capabilities, mobile has eclipsed the desktop. Statista reported last year, 59% of all global web traffic came from mobile, with almost five billion people accessing the internet through mobile devices. Moreover, since 2018, app usage has exceeded browser usage on mobile devices, with shopping apps noting 49% year-over-year usage increase between 2020 & 2021.

This means companies have to not only provide a seamless mobile experience if they wish to attract and convert users, but also invest in app development to stay ahead of the curve.

Market Trends

The printing industry is showing no signs of slowing down. In 2021, the global print-on-demand market was valued at $4.90 billion, and it’s projected to generate $39.40 billion in revenue by 2030, according to industry reports from Grand View Research. The report also suggests that print-on-demand is expected to grow at a compound annual growth rate of 26.1% from 2022 to 2030, indicating significant potential for further expansion.

However, print-on-demand is not the only promising sector to watch. The Print Advertising segment is projected to have ad spending worth $46.87 billion in 2023. This sector has remained resilient to the global decline in the print industry during the Covid-19 pandemic, registering an 18% revenue increase in the US between 2019 and 2020.

With the printing industry’s rapid growth, competition is likely to increase, making it essential for companies to prioritize excellence in order to attract and retain customers.

User Preference

It’s undeniable that mobile is becoming increasingly dominant in e-commerce. According to Shopify, almost 50% of all e-commerce transactions are predicted to occur via mobile devices by 2024, with an expected revenue of $620.97 billion. Being able to quickly and effectively serve customers on mobile is now essential for businesses looking to thrive. In 2022, Shopify launched shop.app, a mobile-only e-commerce platform, raising the bar for the industry. To stay competitive, other e-commerce businesses will need to develop similarly sophisticated solutions for mobile users.

Having a seamless mobile experience is also an important factor for B2B companies. Although most interactions still occur on desktop, modern working arrangements allow people to work on the go, without being limited to one device. Providing customers with flexible options is a significant advantage. For example, a web-to-print editor for print advertising should be cross-platform, providing the same experience across all devices during design creation and print validation processes. Offering agile solutions ahead of industry standards can position a company as a go-to service provider. However, an excellent editor alone is not enough; covering the basics of a good mobile experience is crucial.

Game-Changing Mobile Factors

Customers are becoming more unforgiving when it comes to poor user experience. According to Google, 61% of mobile users won’t return to a site they had trouble accessing, with 40% turning to a competitor’s site instead. For print companies relying almost exclusively on online purchases, this poses a substantial threat, hence, the need to fulfill a long list of expectations to satisfy users.

While the ultimate recommendation is to build a mobile app, customers will most likely want to check out the web page first, hence, the importance of providing a spotless web experience.

Here are some of the most prominent factors of mobile UX to optimize.

Design Editing

While for most e-commerce stores developing a smooth purchase experience is rather straightforward, many printing companies have an added layer of complication - catering to custom-made products. Once a rarity, personalization of products has proven to be a constantly growing trend many companies choose to embrace, and rightly so. The global Custom T-shirt Printing market alone was valued at $3.7 billion in 2021 and is projected to reach $6.98 billion by 2028.

With a growing demand for custom prints, follows a necessity for a web-to-print editor that will provide a seamless design process - on both desktop and mobile. Web-to-print editor simplifies artwork supply, jumpstarts the creative process, and takes care of print validation. The ideal tool should be intuitive to navigate and have a quick load time while providing a quality design experience. The same approach should be adopted by print service providers, breaching a gap between multiple software and communication channels clients have to endure.

A powerful web-to-print editor doesn’t just enhance the user experience on your website - it can also open new doors for your business, such as scaling to native mobile apps, print kiosks, and terminals. Developing separate tools for each platform can be time-consuming and costly. With ready-made solutions (as we will discover below), you can speed up the development process and achieve a seamless editing experience across all devices without starting from scratch each time.

Site Speed

In a study conducted by Deloitte, they observed that a difference of 0.1 seconds has improved conversion rate by 8% and increased purchase value by 10% in the retail sector. The highest conversion rate occurs on pages with a load time of 0-2 seconds, and as reported by Google, 53% of users abandon the page if the load time takes more than 3 seconds. Moreover, it has been estimated that slow-loading websites cost retailers $2.6 billion in lost sales every year.

It’s also worth mentioning that Core Web Vitals monitoring page speed is a Google ranking factor. Poor page speed performance will in turn take a hit on rankings - and with a loss of each position on the Search Engine Result Page, the click-through rate falls significantly.

Investing in optimizing page speed and providing a smooth user experience is a win-win on every front.

Mobile-First Design

Responsive web design is not enough anymore. Websites have to be built with a mobile-first approach in mind. What’s the difference? Responsive design ensures that a page can be viewed on all devices, changing its dimensions to fit different screen sizes. The content and the layout of the page, however, remain unchanged.

While responsive web design is just a part of the design workflow making sure a website is accessible for mobile, mobile-first defines the design approach and focuses on creating a website that is intended for mobile users. It means that every aspect of mobile interaction is taken into account when designing a page.

While the general layout of a page is important for both desktop and mobile, clickable elements of design such as buttons and navigation menus can have larger importance for mobile users. Navigating with a thumb or a finger poses more challenges than a neat computer cursor. The mobile-first design makes sure that every part of the page - content, media, navigation, and calls-to-action, feels intuitive to navigate and use. However, even the best mobile-first web design can’t compare to native mobile apps, which usability and performance are far superior.
Hence, mobile-first should be a necessity embraced by all, those who want to go a step further and provide a fully optimized user experience should turn their eyes to app development.

Payments

The simplicity of mobile payments is yet another reason why mobile purchases are on the rise. Mobile wallet solutions like Google Pay, Apple Pay, and Samsung Pay allow users to complete a transaction with just one click, removing the need for credit card input.

Nowadays, providing an easy and quick checkout experience is more important than ever. Over the last few years, the cart abandonment rate significantly increased, from 59.80% back in 2006 to 88.05% in 2020. Focusing on optimizing the checkout and payment processes could reduce the risk of not completing a purchase. A great example of a seamless payment experience is Shopify’s Shop.app with a one-tap checkout, making it as easy as possible for users to convert.

The checkout funnel is also a great space to utilize personalization hacks and recommend similar products. Instapage reported that shopping cart recommendations influence 92% of users, making it a great tool to increase basket size.

Beyond Browser - Investing in Mobile Apps

Mobile app downloads increased by over 80% since 2016, reaching a mighty 255 billion in 2022. The growing popularity of mobile apps is quite understandable, apps provide a better native experience, are easier to navigate, and usually provide personalized recommendations and remember users’ last activity (58% of users consider this important).

In-app shopping, when correctly optimized, is quick and easy, with enhanced product presentation, intuitive navigation, and no unnecessary hassle of filling in forms and adding credit card details.

Print is once again one of the industries that could leverage all advantages mobile apps have to offer. An example of a company that did it right is IMG.LY’s customer Shutterfly, which combined the emerging trends of personalization and going mobile. The company developed an app that automatically creates personalized items users can purchase. They simply ask for permission to access user’s photo gallery, identify pictures with faces and apply them to product templates. This way, customers can be presented with unique products with zero effort of creating an actual design.

Even without automatically generated custom products, an app-to-print editor provides a much smoother editing experience and interface, with native hardware acceleration, local storage, and easier access to photos or even a camera. Moreover, apps present the possibility to provide more accurate recommendations and personalized content, like in-app notifications, reminders, and activity-based discounts. Hence, developing a quality mobile app could not only boost sales, but also increase brand loyalty and customer satisfaction.

Streamlining Mobile Web-to-Print Editing with CE.SDK

With the undeniable advantages of web-to-print design tools come significant challenges in their development. However, CreativeEditor SDK offers a powerful design editor that delivers consistent experiences across all platforms. Our cross-platform engine can power any editor UI, ensuring 100% consistency in the rendered designs across different devices.

Discover how CE.SDK can streamline your mobile web-to-print process with the following capabilities:

Efficient Client-Side Encoding

Our client-side encoding ensures a smooth and fast design process, as the editor runs directly on the user’s mobile device or web browser. This not only reduces upload time and bandwidth costs, but also allows for easy scalability without incurring additional server costs.

Seamless Cross-Platform Integration

CE.SDK simplifies the process of building an application for the web, iOS, Android, and server by providing a creative engine that’s portable across all platforms. This means that you can easily integrate our solution into your existing systems, saving valuable time and resources. And with consistent design and functionality across all devices, your users can switch between platforms with ease.

Powerful Editing Features

With CE.SDK, your users can unleash their creativity and design high-quality prints effortlessly. Take advantage of our powerful editing features, including the ability to capture and edit photos. CE.SDK also allows you to predefine the design process with adjustable placeholders and constraints, making sure that your final product meets all of the necessary print criteria.

Preview & Design Validation

Imagine being able to preview your design in real-time, ensuring your product expectations are exceeded every time. Plus, with automatic design validation, you can rest easy knowing that no element will extend beyond the bleed margins, minimizing the risk of misprints. Don’t just take our word for it, check out our showcases and see for yourself how CE.SDK can transform your design process.

Conclusion

As we navigate the ever-changing landscape of technology, it’s important to stay ahead of the curve and keep up with emerging trends. With mobile devices becoming increasingly essential in our lives, it’s an crucial time to invest in creating a delightful mobile experience for your customers. By designing an intuitive website, prioritizing fast page load times, and providing a smooth checkout process, you can create a seamless experience for your users. And for print companies, taking it a step further with an exceptional in-app custom-print design tool is a must to help users bring their dream creations to life. These investments can not only enhance customer satisfaction but also give your business a competitive edge in the market.

However, building a cross-platform editor from scratch can be a time-consuming and costly venture with numerous technical challenges. Fortunately, IMG.LY has developed a solution for those who want a quicker and more efficient option. Check out our CreativeEditor SDK, which enables seamless integration of a robust editor for web-to-print across desktop, mobile, and server.

If you’re interested in integrating CE.SDK, our documentation provides detailed information on how to get started, or you can try it out for free!

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

Creative Workflows - the Future of Digital Asset Management

Jan — Tue, 14 Feb 2023 08:44:42 GMT

Traditionally creative assets used to follow a clear lifecycle of conception, creation and use.

Designers and marketers have been thinking in terms of campaigns, timelines spanned months and the types of media to produce content for could be counted on one hand.

In this paradigm, digital asset management filled an important yet clearly circumscribed role; storing, sharing, and managing assets during the use phase of this lifecycle.

However, the rapid proliferation of digital publishing channels as well as the fast-moving nature of modern marketing campaigns means that the creation and adaptation of assets by stakeholders other than designers are becoming prevalent requirements across organizations. In the process, creative assets are increasingly becoming ‘living’ artifacts subject to frequent iterations involving many stakeholders.

Growing Market Need for Integrated Creative Workflows

Adobe’s most recent report on digital trends shows the full extent of this shift, according to the report 79% of survey respondents identified as leaders of their industries agreed with the statement that customer expectations are constantly resetting to match their best omni-channel experience, 85% concurred that the demand for content has significantly increased.
The report goes on to underline that creative workflow challenges continue to pose the greatest challenge affecting organizations’ ability to keep up with and adequately serve customers’ needs.

Common Challenges

About half of the respondents consider workflow issues to be a critical internal barrier holding back their marketing organization.

Paul Nicholson, Senior Vice President of Production and Technology at Showtime Networks, states that his marketing team can be working on 600 to 800 pieces of promotional content at any given time, optimizing the workflow between design and marketing involving decision makers in a seamless and timely fashion and giving enough autonomy to non-designers make design changes themselves.

Success now requires hundreds of variations of images and videos for different ad networks, social networks, market segments and localizations. Every one of these variations in turn requires versions for creative optimizations and testing,

The Need for Change

This increased need for agility, shorter iteration cycles, and timelines means that content creation and distribution are becoming intertwined requiring a unified creative workflow.

In tandem with an increasing amount of publishing channels, the addressable customer segments within those channels are becoming smaller.

Digital advertising platforms are offering ever more granular targeting options on the basis of both demographic and behavioral data.

In order to take advantage of these focused targeting abilities, the creative content served to audiences needs to be customized accordingly.

For reference, the D2C pet food retailer Pets Deli saw its online conversion rates increase by 51% as soon as its marketing started tailoring materials to smaller segments as well as personalizing messaging.

Threats and Opportunities for the DAM Industry

These trends present the DAM space with great opportunities as well as threats from adjacent industries.

The Opportunity

As a result of the above mention market pressures, marketing teams need to scale up content creation with the use of tools that are specifically designed to iterate sets of related creatives using data and templates.
The natural evolution of a digital asset management system is then to become a 360 content hub empowering the marketing team and other stakeholders while freeing up the design team for more valuable work. A great example of a DAM company doing that is Bynder, its Studio solution supports both images and videos and allows designers to create templates and define constraints so they are easily adaptable by marketers and other stakeholders.

The Threat

Just as DAMs need to expand their value proposition towards becoming tools for creating and managing change rather than static assets, design tools might expand to encompass traditional DAM functionality.
As these two domains merge both types of businesses will have to make a play for becoming the 360 content solution that meets the growing market demand described above. As such DAM companies will face competitive pressures from design-centered products.

Adobe’s Cloud Experience DAM for instance seamlessly fits with other Creative Cloud products such as Illustrator. The obvious advantage is that designers are already working with the tools and won’t have to make the shift to a different way of working.

The obstacle these companies face, however, is a classic Innovators Dilemma; it’s hard to add innovative, disruptive features to a mature product with a large customer base that might be unlikely to value those changes. It is easier for DAMs to secure early adopters for a new product line than for a design tool to move its established user base to use novel and substantially different features.

Implementing a Creative Workflow with IMG.LY’s CE.SDK

Technical viability poses the biggest challenge for implementing a creative workflow, apart from a great UX the complexities of building graphics processing on the web or mobile are immense.

Fortunately, you do not have to commit valuable engineering resources, time, and money to add creative editing to your DAM solution.
IMG.LY’s CreativeEditor SDK is a cross-platform design editing and automation solution you can integrate with ease into any web, mobile, or desktop app and customize to fit your use case perfectly.

Creative Workflow for DAMs Example

Let’s look at an example workflow of an imaginary DAM Carpeta.

Carpeta’s customer OGNX is a skincare brand part of a large consumer brand conglomerate. Until now they have used Carpeta to distribute product designs and marketing material to the marketing and communications team, there are a host of files in different formats originating in various design tools.
OGNX is planning a large campaign for their new product line, but marketers are worried that design resources will present a bottleneck as they are planning to test different variations of CTA and color schemes in a large number of formats for different channels.

Luckily, Carpeta has just rolled out its new Creative Studio powered by CE.SDK.

OGNX’s design team can now import files from tools such as InDesign and start creating templates for marketers and A/B testers to work with.

Creating Smart Templates

In the example below, a designer is creating a template setting a constraint that the logo cannot be changed or rearranged.

Defining dynamic elements using variables

The text used as CTA is defined as a text variable to allow populating the template programmatically for each customer segment or personalized campaigns. Thereby ensuring that all designs are consistent with regard to branding while users adopting it have enough leeway to create unique variations.

Template delivery and adaptation

Now, the template can be centrally stored in Carpeta’s DAM, and a marketing team preparing a campaign on social media can make changes to it using the CE.SDK design UI. In our example, they are testing different color schemes and CTAs which they provide from a central data store.

Automatically generating variation using the CE.SDK API

In addition, Carpeta uses the CE.SDK’s headless API to generate designs in different user-defined formats for each social media channel.

Conclusion

The way organizations work with their assets is evolving quickly, the proliferation of marketing channels, shrinking customer segments, and personalized messaging increase the volume and variations of creatives and require ever-shorter timelines and iteration cycles.
This presents a unique opportunity for digital asset management systems to incorporate creative workflows into their solution and grow to become 360 content management and creation hubs meeting this demand.
IMG.LY’s CE.SDK allows DAM companies to focus entirely on delivering the optimal solution to their users while relying on battle-tested tech and category-leading UX to build optimal creative experiences.

Schedule a demo today to explore how you can integrate creative editing into your DAM product.

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!

Creative Editor – IMG.LY Blog

CE.SDK v1.43 Release Notes

Shape Your Interface Around Your Workflow

Control How Images Fit into Blocks

Upcoming

CreativeEditor SDK Now Supports React Native on iOS & Android

Getting Started

Editor UI Presets

Android and iOS Setup

Android

iOS

The Only Truly Cross-Platform SDK

Fully Customizable UI

What’s Next?

CE.SDK Video Editor Now Available on Android

Getting Started

Our Video Editing Backstory

Key Capabilities

Customization

Ideal for Social Media, Ecommerce, and Marketing Tech Apps

What’s Next?

Get Started

CE.SDK v1.15 Release Notes

Create Accurate Cutouts and Vectors

Effortlessly Edit Across All Screen Sizes

Improved Android Video & Audio Experience

CE.SDK v1.14 Release Notes

Generate Thumbnails Fast for Smooth Performance

Enhance Templating with Improved Placeholders

Bring Creative Editing to Your macOS App

Expand Editing Capabilities: macOS & Catalyst Binding

CE.SDK v1.12 Release

Auto-Resize Designs

Enhance Readability with Paragraphs

Avoid Cut Off Text

Achieve Perfect Design Alignment

Take Control of Text Editing with Precision

Manage Templates from Multiple Sources

How Printers Can Leverage Creative Automation

What is Creative Automation?

Creative Automation for Print Service Providers and Print-on-Demand

How to Apply Creative Automation in Print

Creative Automation in Print with CE.SDK

Step 1: Organize your Photos

Step 2: Customize your Photo Book

Step 3

Conclusion

CE.SDK v1.10 Release

Android Platform Support

Library Improvements

Create, Update and Delete for Asset Libraries

Asset Libraries Generalization

Zoom Improvements

Arrange API

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

How It Works

Common Applications of VDP

Marketing

Advertising

Customer Relationship Management

Why Use VDP

Benefits

Challenges

Example of Leveraging Variable Data Printing with CE.SDK

Creating Custom Thank-You Card

Conclusion

Why Mobile-First is the Future of Print

Market Trends

User Preference

Game-Changing Mobile Factors

Design Editing

Site Speed

Mobile-First Design

Payments

Beyond Browser - Investing in Mobile Apps

Streamlining Mobile Web-to-Print Editing with CE.SDK

Efficient Client-Side Encoding

Seamless Cross-Platform Integration

Powerful Editing Features

Preview & Design Validation