React – IMG.LY Blog

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

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

Build this with AI in minutes

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

Install the skills, then run:

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

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

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

Introduction

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

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

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

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

Architecture Overview

CE.SDK has two main layers:

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

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

Step 1: Project Setup

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

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

# Core SDK
npm install @cesdk/cesdk-js

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

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

Why so many packages?

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

Step 2: The React Component

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

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

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

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

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

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

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

Step 3: Creating the Video Scene

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

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

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

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

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

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

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

Browser support

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

Step 4: The CapCut Dark Theme

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

Setting the base theme

cesdk.ui.setTheme('dark');

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

Custom CSS overrides

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

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

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

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

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

The key design decisions:

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

Responsive scale

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

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

Step 5: AI Plugin Integration

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

The unified AiApps approach

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

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

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

Provider categories explained

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

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

The proxy server requirement

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

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

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

Background removal

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

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

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

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

Step 6: UI Customization with the Component Order API

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

Adding the AI button to the dock

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

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

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

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

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

Passing an array inserts multiple components at once.

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

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

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

Step 7: Wiring Generated Audio into the Asset Library

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

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

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

Step 8: Custom Labels with i18n

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

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

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

The Complete File Structure

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

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

What We Get Out of the Box

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

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

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

Going to Production

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

1. License key

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

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

2. Proxy server

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

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

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

3. Disable dry run

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

Key Takeaways

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

Resources

CE.SDK v1.59 Release Notes

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

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

Work with WebM Video Files

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

→ Explore all supported formats in our documentation.

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

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

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

Browse pre-built solutions for React and Vue.

What You Get Out of The Box

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

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

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

→ Get started with React
→ Get started with Vue

Improvements

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

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

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

A Modern React Design Editor: Integration Guide

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

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

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

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

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

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

Let’s dive in!

Why Add a Design Editor to Your React App?

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

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

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

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

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

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

How to Integrate a Design Editor in React

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

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

Requirements

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

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

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

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

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

Install CE.SDK

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

npm install @cesdk/cesdk-js

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


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

Create the Design Editor Component

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

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

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

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

// src/DesignEditor.jsx

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

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

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

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

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

        // customize the design editor behavior...

        setCesdk(instance);
      }
    );

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

    return cleanup;
  }, [cesdk_container]);

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

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

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

Use the Component

You can now import the DesignEditor component as below:

import DesignEditor from "./DesignEditor";

Then, add it to the DOM as follows:

<DesignEditor />

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

React Design Editor Use Cases

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

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

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

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

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

Digital Asset Management

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

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

Additionally, CE.SDK offers :

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

Marketing Automation

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

Key features for marketing automation include:

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

AI-Powered Applications

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

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

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

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

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

Product Mockups

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

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

E-Learning Materials

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

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

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

Customization Options With CreativeEditor SDK

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

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

Conclusion

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

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

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

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

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

A Modern React Video Editor: Integration Guide

Antonello — Wed, 08 Jan 2025 09:31:11 GMT

Learn how to integrate IMG.LY’s video editor for React into your web app and make the most of all its features.

Short-form video changed what users expect from software. People who edit clips daily in TikTok or CapCut arrive at your product assuming they can trim, caption, and rearrange without leaving it. Sending them to a desktop tool and asking them to come back with an MP4 is where the workflow breaks.

This guide covers integrating a video editor into a React app with CreativeEditor SDK (CE.SDK): the component setup, the timeline and export APIs underneath it, and the customization points you will reach for once the default editor is running.

For a working reference, see the React video editor starter kit or try the interactive demo.

Check browser support before you scope the work

CE.SDK’s video mode encodes and decodes in the browser using the WebCodecs API. That is what lets you export an MP4 with no render farm behind it, and it is also the catch. Video mode needs a recent Chromium browser: Chrome, Edge, Opera, Arc, and Brave all work. Safari and Firefox do not currently support video editing.

Design and photo editing have no such restriction, so this only limits the video path. If your traffic skews heavily to Safari, plan for a fallback message rather than discovering it in QA. The supported browsers list has the current detail.

Why a video editor belongs in the app rather than beside it

TikTok reports over a billion monthly active users, and Google’s earnings calls have put YouTube Shorts around 70 billion daily views. Those products taught a very large number of people that trimming a clip and adding a caption takes seconds.

That expectation is why the round trip hurts. Every export-and-reupload cycle gives the user a chance to abandon the task, and every asset that leaves your system is one you can no longer template, version, or keep on brand. Editing in place keeps both the user and the asset.

React’s component model fits this well, because the editor is one mounted component with a configuration object and an initialization hook, not a page you navigate away to.

Getting started: adding a video editor in React

Requirements

Node.js 20+ and npm 10+. Download Node.js if needed.
A React 18+ project on a build tool such as Vite, Parcel, or RSBuild.
A CE.SDK license key. Start a free trial to get one.

If you do not have a project yet, create one with Vite:

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

Step 1: Install CE.SDK

npm install @cesdk/cesdk-js

Step 2: Create the editor component

CE.SDK ships a React component, so you do not need to manage the instance lifecycle by hand. Import it from the /react entry point and pass it a config object and an init function.

Create src/VideoEditor.jsx:

// src/VideoEditor.jsx
import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  license: 'YOUR_LICENSE_KEY', // replace with your key
  userId: 'YOUR_USER_ID', // optional, for MAU tracking across devices
};

// Runs once, after the SDK instance is created
const init = async (cesdk) => {
  await Promise.all([
    cesdk.addDefaultAssetSources(),
    cesdk.addDemoAssetSources({
      sceneMode: 'Video',
      withUploadAssetSources: true,
    }),
  ]);

  // Open the editor in video mode with an empty composition
  await cesdk.createVideoScene();
};

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

sceneMode: 'Video' on addDemoAssetSources loads the video and audio demo libraries rather than the design ones, so the asset panel contains clips and music instead of shapes. In production you will swap these for your own asset sources, which can be your backend or a third-party library such as Unsplash.

createVideoScene() is what puts the editor into video mode and gives you the timeline. Calling createDesignScene() instead gives you the design editor with no time dimension, which is the most common reason a first integration comes up without a timeline.

Step 3: Mount it

// src/App.jsx
import VideoEditor from './VideoEditor';

export default function App() {
  return <VideoEditor />;
}

Run npm run dev and open http://localhost:5173. You should get a full editor with a timeline: trimming, splitting, text overlays, audio tracks, filters, and transitions.

Name your own component something other than CreativeEditor or CreativeEditorSDK. Reusing either name collides with the import and produces an Identifier has already been declared error.

Four things that will cost you an afternoon

These are the failure modes that come up most often in React integrations. None of them produce a useful error message, which is what makes them expensive.

`init` swallows its own errors

If any line inside the init callback throws, the remaining lines are skipped and nothing appears in the console. You get an editor that loads with a half-built scene and no explanation.

Wrap the body while you are developing:

const init = async (cesdk) => {
  try {
    await cesdk.addDefaultAssetSources();
    await cesdk.createVideoScene();
    // scene setup...
  } catch (error) {
    console.error('[CE.SDK init] failed:', error);
  }
};

Symptoms to recognize: the editor renders, some blocks are missing, the console is clean, and the behavior changes depending on network timing.

Strict Mode runs `init` twice

In development, React 18+ Strict Mode mounts, unmounts, and remounts the component. init runs twice, and the first engine is disposed partway through. The editor you end up looking at is the second one.

This confuses debugging because logs from both runs interleave, and errors from the first run’s async continuation are noise. If you are chasing an initialization bug, tag your logs:

let runCount = 0;

const init = async (cesdk) => {
  const run = ++runCount;
  console.log(`[init ${run}] start`);
  await cesdk.createVideoScene();
  console.log(`[init ${run}] scene ready`);
};

Production builds run init once. There is nothing to fix here, only something to know.

Relative asset URLs resolve against the CDN

CE.SDK resolves relative URIs against config.baseURL, which points at the IMG.LY CDN. A path like /videos/intro.mp4 will not hit your own origin. Make local asset paths absolute before handing them to the engine:

const resolveUri = (uri) =>
  uri.startsWith('/') ? `${window.location.origin}${uri}` : uri;

Trim calls do nothing on unloaded media

setTrimOffset and setTrimLength need the clip’s duration metadata. Call them before the resource has loaded and they fail quietly. Always await engine.block.forceLoadAVResource(fill) first.

One more, if you are on Next.js: the editor is browser-only and will break server-side rendering. Load it with next/dynamic and ssr: false, or keep it behind a client component boundary.

Let an agent do the integration

If you work in an AI-assisted editor, you can skip most of the above. IMG.LY publishes Agent Skills for CE.SDK, which load CE.SDK’s documentation and conventions directly into Claude Code, Cursor, and other agent tools. The agent then writes the integration against the current API instead of whatever it remembers from training.

There is also an MCP server that exposes the docs for live lookup during a session.

In practice this matters most for the parts that change between versions, such as component names and configuration shapes. We wrote about the reasoning behind it in Introducing IMG.LY Agent Skills.

Working with the timeline in code

The default UI covers most user-facing editing. When you need to build compositions programmatically, for templates, automation, or a custom UI, you work with the engine directly through cesdk.engine.

Create a video scene and a page

A page in video mode owns a timeline. Its duration is the duration of the exported video.

const engine = cesdk.engine;

const scene = engine.scene.createVideo();

const page = engine.block.create('page');
engine.block.appendChild(scene, page);
engine.block.setWidth(page, 1280);
engine.block.setHeight(page, 720);
engine.block.setDuration(page, 20); // seconds

Add video clips

Video is not its own block type. You create a graphic block and give it a video fill, which means the same positioning, cropping, and animation APIs apply to video as to any other element.

const video1 = engine.block.create('graphic');
engine.block.setShape(video1, engine.block.createShape('rect'));

const fill1 = engine.block.createFill('video');
engine.block.setString(
  fill1,
  'fill/video/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
);
engine.block.setFill(video1, fill1);

Sequence clips with a track

You could position each clip by hand with time offsets, but a track does it for you. A track keeps its children playing back to back with no gaps, and recalculates the offsets whenever a duration changes.

const track = engine.block.create('track');
engine.block.appendChild(page, track);
engine.block.appendChild(track, video1);
engine.block.appendChild(track, video2);
engine.block.fillParent(track); // size children to the page

// The track shifts video2 automatically
engine.block.setDuration(video1, 15);

Do not call setWidth or setHeight on a track. A track derives its dimensions from its children, so size the children or use fillParent.

Trim clips

Blocks default to 5 seconds. If a clip is longer than its block it gets cut off; if shorter, it loops. To control which portion plays, set a trim offset and length on the fill, after the resource has loaded.

await engine.block.forceLoadAVResource(fill1);
engine.block.setTrimOffset(fill1, 1); // skip the first second
engine.block.setTrimLength(fill1, 10); // play 10 seconds
engine.block.setLooping(fill1, true);

The forceLoadAVResource call is required. Trim APIs need the duration metadata, and calling them on an unloaded resource is a common source of silent no-ops.

Add audio

A video fill plays its own audio track by default, which you can mute. Separate audio blocks handle music and voiceover.

engine.block.setMuted(fill1, true);

const audio = engine.block.create('audio');
engine.block.appendChild(page, audio);
engine.block.setString(
  audio,
  'audio/fileURI',
  'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
);
engine.block.setVolume(audio, 0.7);
engine.block.setTimeOffset(audio, 2); // start 2s in
engine.block.setDuration(audio, 7);

Export to MP4

Export runs in a background worker, so the editor stays interactive while it encodes. The scene state is frozen when the export starts, so later edits will not appear in the file.

const page = engine.scene.getCurrentPage();

const blob = await engine.block.exportVideo(page, {
  mimeType: 'video/mp4',
  onProgress: (rendered, encoded, total) => {
    setProgress(Math.round((encoded / total) * 100));
  },
});

const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = 'export.mp4';
anchor.click();
URL.revokeObjectURL(url);

Wire onProgress to React state and you get an export progress bar for free. Encoding a long composition takes time, and a silent wait is the fastest way to make users think the app has hung.

You can also pull just the audio with engine.block.exportAudio(page, { mimeType: 'audio/wav' }), which is useful for transcription and caption pipelines.

Two features worth knowing about once the basics work: transitions between clips, and caption presets for styling subtitles consistently. Captions in particular tend to arrive as a request about a week after launch, because most social video is watched muted.

For the full API surface, see the create and edit videos guide and the timeline editor reference.

Customizing the editor

CE.SDK is not a fixed editor with a theme switch. The main customization points:

Component order. Add, remove, and reorder UI elements with setComponentOrder({ in: location }, order), where locations include 'ly.img.dock', 'ly.img.canvas.menu', 'ly.img.inspector.bar', 'ly.img.navigation.bar', and 'ly.img.canvas.bar'.
Theming. Use cesdk.ui.setTheme() for light, dark, or system, or build a custom theme with the theme generator. See the theming demo.
Custom components. Register your own buttons, dropdowns, and inputs and place them alongside the built-ins, or replace built-ins entirely.
Feature API. Show and hide functionality by context, for example hiding controls for a particular block type.
Asset sources. Serve video, audio, and image libraries from your own backend, or connect a third-party source such as Unsplash.
Localization. Override and extend every string in any language with full i18n support.

When a customization is worth reusing across projects, package it as a plugin. Background removal and vectorization ship as plugins built on the same API you would use.

Where a React video editor pays off

Social publishing. Templates, an audio library, and configurable animations let users produce platform-ready clips, then export at the right aspect ratio per destination.

Digital asset management. Teams adapt and repurpose approved footage inside a central system. Templates with placeholders and locked layers keep output on brand. CE.SDK has no built-in role model, so you gate access in your own backend and use the Feature API to reflect it in the UI.

Marketing automation. Generate campaign variants from one template using text variables, and push template changes across every asset that uses it. This is where the headless engine matters more than the UI, and it is worth reading about automated video generation.

Sales outreach. Personalized video at volume, with localization for multi-market teams.

E-learning. Instructors record, trim, and caption in the browser, building a reusable template library rather than one-off files.

Next steps

The fastest path from here is the video editor starter kit, which is a working project rather than a snippet. If you would rather see it running first, the demo is the same editor this guide produces.

Building the same thing on another framework? We have equivalent guides for Vue.js and Angular, and a broader JavaScript video editing guide covering the underlying browser technologies. If you are still comparing options rather than writing code, we put together a breakdown of the leading video editing SDKs.

Questions about a specific use case? Talk to us.

How to Draw on Images in React Native

Natalia — Thu, 20 Oct 2022 13:09:38 GMT

It has become a commonplace requirement for many applications to manipulate images in one way or another before users are ready to share them. Therefore, it is crucial to foresee end-user needs while working on an app involving any interaction with graphical content. Image annotation can be necessary in various cases, such as simple inspection apps, bug reporting software, or machine learning applications relying on manual user input.

In this article, we are shedding light on how to draw on images in React Native with the help of a simple HTML5

Enable the characteristics of the
Set the thickness and color of the brush instrument;
Define at what moment your brush needs to be activated and when the drawing process will finish;
Start drawing!

Let’s first clear up the purpose of

Canvas Integration for Images

<canvas> is an HTML component commonly used for creating and manipulating graphics, animation, and other visualization features. This element provides JavaScript APIs enabling image overlays and handling user input to make drawing possible. Moreover, while we have several methods for image manipulation with

<! -- HTML example of using canvas: -->
<canvas id="myCanvas" width="200" height="100"></canvas>

You might wonder why you cannot easily substitute <canvas> with some lines of HTML and CSS in your code. The answer lies on the surface: <canvas> creates a single flattened graphic rather than multiple components lying on top of each other (i.e., typically the output of HTML and CSS).

Now, let’s see how to implement this powerful element in your React Native application:

Drawing with Canvas

import React, { useEffect } from 'react';

// CanvasContext here is used for drawing onto the canvas
import { useCanvas } from './CanvasContext';

export function Canvas() {
  const { canvasRef, prepareCanvas, startDrawing, finishDrawing, draw } =
    useCanvas();

  useEffect(() => {
    prepareCanvas();
  }, []);

  return (
    <canvas
      onMouseDown={startDrawing}
      onMouseUp={finishDrawing}
      onMouseMove={draw}
      ref={canvasRef}
    />
  );
}

We start by enabling the characteristics of our <canvas> container, which are meant to render the CanvasContext component presented below.

The size of our future canvas is determined with prepareCanvas, which includes both the height (canvas.height) and width (canvas.width) of the HTML element. For the drawing process itself, it is necessary to assign not only the thickness and color of the brush instrument (context) but also take into account its activation (startDrawing with onMouseDown) and how the user can finish a stroke (finishDrawing with onMouseUp).

import React, { useContext, useRef, useState } from 'react';

// enabling drawing on the blank canvas
const CanvasContext = React.createContext();

export const CanvasProvider = ({ children }) => {
  const [isDrawing, setIsDrawing] = useState(false);
  const canvasRef = useRef(null);
  const contextRef = useRef(null);

  // defining width & height of the canvas
  const prepareCanvas = () => {
    const canvas = canvasRef.current;
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = `${window.innerWidth}px`;
    canvas.style.height = `${window.innerHeight}px`;

    // defining the thickness and colour of our brush
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.lineCap = 'round';
    context.strokeStyle = 'black';
    context.lineWidth = 5;
    contextRef.current = context;
  };

  const startDrawing = ({ nativeEvent }) => {
    const { offsetX, offsetY } = nativeEvent;
    contextRef.current.beginPath();
    contextRef.current.moveTo(offsetX, offsetY);
    setIsDrawing(true);
  };

  const finishDrawing = () => {
    contextRef.current.closePath();
    setIsDrawing(false);
  };

  const draw = ({ nativeEvent }) => {
    if (!isDrawing) {
      return;
    }
    const { offsetX, offsetY } = nativeEvent;
    contextRef.current.lineTo(offsetX, offsetY);
    contextRef.current.stroke();
  };

  // Once the canvas is cleared it return to the default colour
  const clearCanvas = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);
  };

  return (
    <CanvasContext.Provider
      value={{
        canvasRef,
        contextRef,
        prepareCanvas,
        startDrawing,
        finishDrawing,
        clearCanvas,
        draw,
      }}
    >
      {children}
    </CanvasContext.Provider>
  );
};

export const useCanvas = () => useContext(CanvasContext);

Drawbacks of the Canvas Method

Despite the canvas component offering powerful features, it is also quite demanding to use in its original form. For example, it may be problematic to adjust the properties of the brush to ensure that you can draw with smooth movements. Thus, implementing any solution for this issue would further increase the coding time and reduce the compatibility between different frameworks. Also, separately defining canvas and brush properties overcomplicates the code and requires advanced sources for successful integration into your React Native app. Although some temporary solutions aim to facilitate this process (such as react-native-image-draw or react-native-sketch-draw), none provides a permanent solution with clear documentation and guidance.

If you wonder about a magic door to avoid this coding nightmare, you can always choose a commercial, all-in-one solution like PhotoEditor SDK. Implementing this SDK only takes a few lines of code, saves time and expenses in building an app, and you can expect great support from the developers. This way, you can skirt the hassle of coding an editor and instead focus on creating a great product.

PhotoEditor SDK Integration for Drawing on Your Images

To get started integrating the PhotoEditor SDK in your React Native app, refer to this guide from the official documentation. You can then ensure comfortable image interaction for your users with the optimized brush tool, as in the example below.

Conclusion

This article aimed to examine image editing instruments suitable for React Native framework. The HTML <canvas> element could have big potential as it provides fundamental tools for creating graphics or animation. However, its application is time-consuming and requires comprehensive knowledge in the field. Therefore, if you want to guarantee a smooth and easy integration of image drawing tools for your app, consider using advanced software like PhotoEditor SDK.

How To Build a Canva Clone with CE.SDK

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

Canva taught a very large number of people what a design tool should feel like. If your product has any design surface, whether that is book covers, t-shirt artwork, or social posts, that is the bar users measure you against.

The good news is that the hard part is not the editor. It is templates: giving people a starting point, then controlling exactly what they can change so the output stays on brand. This guide builds that in React with CreativeEditor SDK (CE.SDK).

If you would rather read working code than a tutorial, the finished project is on GitHub at imgly/canva-clone-react-cesdk, and there is a prebuilt Canva clone solution in the docs you can drop in as a starting point.

What CE.SDK gives you

CreativeEditor SDK is an embeddable design editor that runs inside your own app, on your own domain. You mount it as a component, point it at your assets, and it handles the canvas, the layer model, text, images, and export.

The part that makes a Canva clone rather than a drawing tool is its role model. CE.SDK separates the person who builds a template from the person who fills it in.

Creator mode

In Creator mode, you build the template. Add and arrange elements, apply filters and background removal, and then decide what the next person is allowed to touch.

Two features carry most of the weight. Placeholders mark an element as replaceable and control whether it can be deleted, restyled, or duplicated. Text variables let you define a token like {{Name}} and set it from code, which is how you batch-generate a hundred personalized cards from one design.

Adopter mode

Adopter mode is what your end users get. They can change colors, text, and images, but only where the template’s creator allowed it. Everything else is locked, so a customer cannot accidentally drag the logo off the canvas or delete the legal line.

That split is the whole trick. It is why a template-based editor produces usable output at scale and a blank canvas does not.

Build it

Prerequisites

Node.js 20+ and npm 10+
A React 18+ project on a modern build tool
A CE.SDK license key. Start a free trial to get one.

Create a project with Vite:

npm create vite@latest canva-clone -- --template react
cd canva-clone
npm install @cesdk/cesdk-js

Step 1: Mount the editor

CE.SDK ships a React component, so you do not manage the instance lifecycle yourself. Import it from the /react entry point and pass a config object and an init function.

// src/DesignEditor.jsx
import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  license: 'YOUR_LICENSE_KEY',
  userId: 'YOUR_USER_ID',
};

const init = async (cesdk) => {
  await Promise.all([
    cesdk.addDefaultAssetSources(),
    cesdk.addDemoAssetSources({
      sceneMode: 'Design',
      withUploadAssetSources: true,
    }),
  ]);

  await cesdk.createDesignScene();
};

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

That already gives you a working design editor with stock assets, fonts, shapes, and upload. Render it from App.jsx and run npm run dev.

Name your own component something other than CreativeEditor, or it collides with the import.

Step 2: Add a template library

Templates are the difference between a design tool and a Canva clone. You register a template source, add assets to it, and tell CE.SDK what to do when a user picks one.

const init = async (cesdk) => {
  const engine = cesdk.engine;

  await cesdk.addDefaultAssetSources();
  await cesdk.createDesignScene();

  // Register a source and define what happens on click
  engine.asset.addLocalSource('my.templates', undefined, async (asset) => {
    const uri = asset.meta?.uri;
    const scene = engine.scene.get();
    if (!uri || scene == null) return undefined;

    await engine.scene.applyTemplateFromURL(
      new URL(uri, window.location.href).href
    );
    return scene;
  });

  // Add templates to it
  engine.asset.addAssetToSource('my.templates', {
    id: 'postcard-1',
    label: { en: 'Postcard' },
    tags: { en: ['postcard', 'card'] },
    groups: ['cards'],
    meta: {
      thumbUri:
        'https://cdn.img.ly/assets/demo/v3/ly.img.template/thumbnails/cesdk_postcard_1.jpg',
      uri: 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/assets/templates/cesdk_postcard_1.scene',
    },
  });
};

applyTemplateFromURL is the important call. It applies the template to the current scene rather than replacing it wholesale, which preserves the user’s session and any content they have already added.

In production, addAssetToSource is where your own designs go. A template is a .scene file, so the loop is: build it in Creator mode, save it, host it, and register it here with a thumbnail.

If you are generating designs from data rather than letting users pick, engine.scene.loadFromURL() plus engine.variable.setString() plus engine.block.export() is the batch path. The template library docs cover both directions.

Step 3: Export

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

const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'design.png';
anchor.click();

PNG covers most on-screen use. If people are ordering physical prints, export print-ready PDF instead, which handles CMYK and bleed properly.

A note on the old version of this guide

Earlier versions of this tutorial configured templates through a presets.templates object passed into CreativeEditorSDK.init(). Both were removed. init() became create(), which does not build a scene for you and instead lets you configure the SDK first, and presets gave way to the Asset API shown above. If you are maintaining an integration written against the old shape, the docs carry per-version migration notes listing every changed option.

Let an agent build it

If you work in an AI-assisted editor, Agent Skills for CE.SDK load the current documentation into Claude Code, Cursor, and similar tools, so you get code written against today’s API rather than the version that happened to be in the training data. That matters here more than usual, because this exact tutorial was outdated for a while and models learned from it. There is also an MCP server for live lookup. Background in Introducing IMG.LY Agent Skills.

Where to take it

The obvious next steps are your own templates and your own assets. After that:

Custom UI. Reorder or replace editor components with setComponentOrder({ in: location }, order), and register your own buttons and panels. See the UI extensions guide.
Theming. Match your product with cesdk.ui.setTheme() or the theme generator.
Brand assets. Serve fonts, logos, and imagery from your own backend so users only see approved material.
Automation. Text variables plus the engine API generate personalized designs at volume. We built an NFT art collection generator on exactly that.

If you are coming from Canva’s own API rather than starting fresh, two follow-ups go deeper: why teams move to a white-label alternative to Canva Connect, and a step-by-step guide to migrating from Canva Connect to the IMG.LY SDK.

Questions about your use case? Talk to us.

How To Generate an NFT Art Collection With React Using CE.SDK

Antonello — Tue, 17 May 2022 13:48:25 GMT

In recent months NFTs have become increasingly popular and now represent a worldwide trend. We all have heard about NFTs at least once, but have you ever wondered how to generate an art collection easily and programmatically? That is what you will learn in this article!

Follow this step-by-step tutorial and learn how to build a trading card image generator representing your NFT art collection in React with CreativeEditor SDK. At the end of the article, you will achieve the following result:

What is an NFT Art Collection?

NFT stands for Non-Fungible Token and represents a non-interchangeable unit of data stored on a blockchain that can be traded and sold. We usually associate NFTs with physical or digital assets, such as photos, videos, or audio. You can think of an NFT as a digital work of art.

Consequently, an NFT art collection is nothing more than a set of NFTs associated with a physical or digital art piece.

What is CreativeEditor SDK?

CreativeEditor SDK (CE.SDK) is a fully customizable, easy-to-use, advanced design editor SDK that lets you add template-based workflows and automation to your app with just a few lines of code.

CE.SDK is based on a role-specific editing UI and focuses on keeping content adaptation dead simple – all of this, while empowering your creativity with a powerful authoring environment.

See CE.SDK in action or try it for free.

Build an NFT Art Collection Generator in React With CE.SDK

Now, let’s learn how to implement an NFT art collection generator using CE.SDK and React. In detail, you will learn how to use CE.SDK to define a dynamic template you can then adopt in React to generate your fancy NFT art collection of trading cards.

You can have a look at the final CE.SDK template live here.

Keep in mind that a CE.SDK template is not a static resource. That is because you can change it programmatically through the CE.SDK APIs, as you are about to learn.

1. Get started with CE.SDK

You can learn how to get started with CE.SDK in React by following the getting started guide of the official documentation. Notice that you do not need to set up an instance of CE.SDK to follow this article. You can follow this step-by-step tutorial.

2. Initialize a CE.SDK design

First of all, you need to create a CE.SDK template. As you are about to see, this is not that difficult. All you have to do is click on the “New Design” button.

Give your template a name, such as “NFT Trading Card Collection”.

Click on “Create”. This is what your blank template should look like:

Here you can unleash your creativity and create the NFT trading card template to your desire.

3. Make your CE.SDK design dynamic with variables and by setting placeholders

CE.SDK equips you with the ability to define variables. You can then give these variables a value in your frontend code. The CE.SDK variables can then be defined during text editing.

To add a variable to your design, click on “Text”, select a text element, place it on your page, double-click on it, and select “Add a variable”.

A CE.SDK variable has the following format:

{{variable_name}}

A variable value can be defined programmatically via the CE.SDK Variable API. Use them to set the dynamic text fields you want users to customize in the application layer. For example, you can fill them with data retrieved from an API called by the frontend.

Also, CE.SDK gives you the possibility to define placeholders. Placeholders can be created only by a user with Creator role and allow them to specify a set of constraints associated with the element declared as a placeholder. These constraints only apply to users having non-creator roles and define what operations such users can perform on that element.

You can define a placeholder by selecting an element, clicking Placeholder and then choosing the constraints you want the non-creator users to have for this element.

In this case, non-creator users are only allowed to style the name variable defined above.

Let’s assume you defined the trading card template of your dreams. You spent a lot of time on it, and you now want other users to use it to generate their own NFT art collection. All you have to do, is save, click on the “v” symbol near the Save button, and select “Share as Template”.

Now follow the instructions, and non-creator users will be able to access your template with the link the application provided you.

Users will be able to interact with your CE.SDK template based on the variables and placeholders you defined while creating your design.

Bear in mind that sharing your design as a template is a nice feature but not mandatory to achieve the goal. In case you want to use your design on your CE.SDK frontend instances, you only have to export it as a scene, and then load it through the CE.SDK Scene API.

To export a design as a scene, click on the “v” symbol, and in the dropdown, select “Export Design File”. You will automatically download the scene file to the directory according to your browser settings. The export feature allows you to download your scene. You can also import your own or another user’s scene.

You now have everything you need to build an NFT trading card collection generator in React! Let’s delve deeper into how to achieve this.

5. Use your CE.SDK scene in React to programmatically generate an NFT trading card art collection

5.1 Prerequisites

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

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

npm install --save @cesdk/cesdk-js

5.2 Getting started

You can try out the NFT art collection generator by cloning the GitHub repository supporting the article and launching the web application with the following commands:

git clone https://github.com/Tonel/how-to-generate-an-nft-art-collection-imgly
cd how-to-generate-an-nft-art-collection-imgly
npm i
npm start

Otherwise, keep following this tutorial and build the NFT trading card art collection generator by yourself.

First, initialize a React project called nft-art-collection-generator with Create React App with the command below:

npx create-react-app nft-art-collection-generator

Now, your nft-art-collection-generator should have the following file structure:

nft-art-collection-generator
├── 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

Now move into the nft-art-collection-generator folder and start a local server by launching these two commands:

cd nft-art-collection-generator
npm start

By visiting http://localhost:3000/ in your browser, you should now be able to see the default Create React App screen:

5.3 Building the NFT Art Collection Generator Component

You can use CE.SDK to implement an image generator based on your template as follows:

import CreativeEngine from '@cesdk/cesdk-js/cesdk-engine.umd.js';
import LoadingSpinner from '../LoadingSpinner/LoadingSpinner';
import { DOGS } from './data';
import styles from './NFTArtCollectionGenerator.module.css';
import React, { useEffect, useRef, useState } from 'react';

export default function NFTArtCollectionGenerator() {
  const engineRef = useRef(null);
  const [tradingCardImages, setTradingCardImages] = useState(
    new Array(DOGS.length).fill(null)
  );
  const [initialized, setInitialized] = useState(false);

  // initializing CE.SDK on first rendering
  useEffect(() => {
    const config = {
      page: {
        title: {
          show: false,
        },
      },
    };

    CreativeEngine.init(config).then(async (instance) => {
      // importing the CE.SDK scene
      await instance.scene.loadFromURL(
        `${window.location.protocol + '//' + window.location.host}/assets/cesdk-nft-doggo.scene`
      );
      engineRef.current = instance;
      setInitialized(true);
    });

    return function shutdownCreativeEngine() {
      engineRef?.current?.dispose();
    };
  }, []);

  async function generateTradingCards() {
    const cesdk = engineRef?.current;

    if (initialized && cesdk) {
      // setting the image loading state to true
      // to each image
      setTradingCardImages((oldImages) => [
        ...oldImages.map((image) => ({ ...image, isLoading: true })),
      ]);

      const newTradingCardImages = [];

      // iterating over each data entry to generate
      // its trading card with CE.SDK
      for (const dog of DOGS) {
        // giving each variable defined in the CE.SDK scene
        // a value based on the dog data
        cesdk.variable.setString('name', dog.name);
        cesdk.variable.setString('date', dog.date);
        cesdk.variable.setString('chain', dog.chain);
        cesdk.variable.setString('drool', dog.drool);
        cesdk.variable.setString('courage', dog.courage);

        // retrieving the background block
        const backgroundBlock = cesdk.block.findByType('page')[0];
        if (backgroundBlock) {
          // setting the background to a random color
          cesdk.block.setBackgroundColorRGBA(
            backgroundBlock,
            Math.random(), // r (from 0 to 1)
            Math.random(), // g (from 0 to 1)
            Math.random(), // b (from 0 to 1)
            1.0 // alpha (from 0 to 1)
          );
        }

        const blob = await cesdk.block.export(
          cesdk.block.findByType('scene')[0],
          'image/jpeg'
        );

        newTradingCardImages.push({
          isLoading: false,
          src: URL.createObjectURL(blob),
        });
      }

      // setting the new trading card images
      setTradingCardImages(newTradingCardImages);
    }
  }

  // generating the trading card images for the first time
  // when CE.SDK is initialized
  useEffect(() => {
    if (engineRef && initialized) {
      generateTradingCards();
    }
  }, [engineRef, initialized]);

  return (
    <div className="flex flex-col items-center">
      <div>
        <h3 className={`h4 ${styles.headline}`}>
          NFT Trading Card Collection Generator
        </h3>
      </div>
      <div>
        <button
          className={styles.button}
          onClick={() => {
            generateTradingCards();
          }}
        >
          Generate
        </button>
      </div>
      <div className={styles.contentWrapper}>
        <div className={styles.imageWrapper}>
          {tradingCardImages.map((image, i) => {
            return (
              <div
                style={{
                  width: 160,
                  height: 210,
                  position: 'relative',
                  backgroundColor: 'white',
                }}
                key={i}
              >
                {image?.src && (
                  <img
                    alt=""
                    src={image?.src}
                    style={{
                      opacity: image?.isLoading ? 0.5 : 1,
                      transition: 'opacity .5s',
                      transitionTimingFunction: 'ease-in-out',
                      objectFit: 'contain',
                    }}
                  />
                )}
                {image?.isLoading && <LoadingSpinner />}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

This component uses CE.SDK to generate a trading card set you can transform into your NFT art collection. The first useEffect() hook function takes care of initializing a CE.SDK instance and loading the scene file exported above. To make everything work as expected, create an assets folder under public, and put your scene file in it.
Then, the generateTradingCards() function using CE.SDK is used to generate the trading card image set is defined. This is where the magic happens!

The trading card images are generated based on the DOGS variable imported from data by giving each scene’s variable a value and providing the background with a random color. This way, every time you press “Generate”, the resulting collection of trading cards will have the same data, but always a different color.
If you are wondering, this is what the data file looks like:

export const DOGS = [
  {
    name: 'Pancakes',
    date: '2022',
    chain: 'etherum',
    drool: '5/10',
    courage: '10/10',
  },
  {
    name: 'Clovis III',
    date: '2020',
    chain: 'flyx',
    drool: '9/10',
    courage: '1/10',
  },
  {
    name: 'Pickles',
    date: '2019',
    chain: 'cardano',
    drool: '1/10',
    courage: '10/10',
  },
  {
    name: 'Groucho Barks',
    date: '2018',
    chain: 'solana',
    drool: '10/10',
    courage: '5/10',
  },
  {
    name: 'Puppins',
    date: '2019',
    chain: 'ethereum',
    drool: '8/10',
    courage: '5/10',
  },
  {
    name: 'Mr. Chow',
    date: '2019',
    chain: 'flow',
    drool: '5/10',
    courage: '9/10',
  },
  {
    name: 'Dr. Droolz',
    date: '2020',
    chain: 'eos',
    drool: '10/10',
    courage: '10/10',
  },
  {
    name: 'Snuffles',
    date: '2018',
    chain: 'ethereum',
    drool: '4/10',
    courage: '5/10',
  },
];

As you can see, the DOGS array contains the data generating each card programmatically through CE.SDK’s Variable API. For simplicity, the DOGS array was hard-coded into the data file. In a real-world scenario, you can retrieve this data through an API call or however you prefer.
Finally, the trading card collection images are rendered and shown to the user as in the image below:

As you just learned, a CE.SDK template allows you to generate an infinite combination of different images. In this example, you learned how to use variables and change the background colors, but several other options are available. Learn more here.

Conclusion

The real challenge to entering the NFT world lies in producing a collection of appealing images. Converting them into NFTs takes only a few clicks. In this article, we used CE.SDK to generate a trading card collection of images that all share the same template. Specifically, CE.SDK gives you everything you need to create applications supporting template-based workflows – your users can adapt your templates or programmatically create variations of visually consistent, high-quality images.

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

Thanks for reading! We hope you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions. For more, stay in the loop with our Newsletter.

How To Add Overlays to a Video in React Native

Antonello — Mon, 28 Mar 2022 16:23:32 GMT

In this article, you will learn to add a text and image overlay to a video with JavaScript in React Native. All you need is React Native Video, the correct styling rules, and just a few lines of code.

By following this guide, you will easily achieve a logo and text overlay:

First, let’s learn how to implement a React Native component that allows you to add an overlay image and overlay text to a video.

What is React Native Video?

Mobile apps come with several native interfaces and features. This is what makes React Native different from React, which is based on browser rendering. So, <div> becomes <View>, <p> becomes <Text>, and so on. In particular, React Native supports only a limited amount of components. You can find the entire list here.

To this day, React Native does not have a native <Video> component. That is why react-native-video was born - a widely used library without considering alternatives. This 500kB package equips you with everything you need to get started with videos in React Native.

Prerequisites

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

You can add react-native-video to your project’s dependencies by launching the following npm command:

npm install react-native-video

Or if you are a yarn user:

yarn add react-native-video

Then, follow this guide to learn how to link react-native-video to your project. This step is not required for Android users with React Native 0.60 and above.

Adding Overlay Image and Text to a Video in React Native

You can clone the GitHub repository supporting this article and launch the following commands to try the demo application:

git clone https://github.com/Tonel/how-to-add-overlays-to-videos-in-react-native-imgly
cd how-to-add-overlays-to-videos-in-react-native-imgly
npm i
npm start

The project is a React Native Create App project, and you can learn more about how it works and how to run it here.

Otherwise, keep following this step-by-step tutorial and learn how to build a React Native component for adding overlays to a video.

1. Initializing a React Native Project

Create React Native App is the officially supported and easiest way to create an empty and working React Native application. Install it globally with the following command:

npm install -g create-react-native-app

Now, you can initialize a new project called react-native-video-overlays-demo with the following command:

create-react-native-app react-native-video-overlays-demo

The react-native-video-overlays-demo folder should now contain a demo project with the following file structure:

react-native-video-overlays-demo
├── .buckconfig
├── .gitattributes
├── .gitignore
├── App.js
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
├── package-lock.json
├── yarn.lock
├── android
│   └── ...
└── ios
    └── ...

Enter the react-native-video-overlays-demo folder:

cd react-native-video-overlays-demo

Then launch the development server with one of the following commands:

for launching an Expo app

npm start

for Android development on your phone or an emulator

npm run android

for iOS development on your phone or an emulator

npm run ios

for react-native-web development

npm run web

2. Defining a Component to Add Overlays on a Video

Let’s see how to build a VideoWithOverlays component that allows you to add overlays such as text and an image to a video. You can implement it as follows:

import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';

export default function VideoWithOverlays({
  videoComponentProps,
  text,
  imageSrc,
}) {
  const {
    video,
    overlayText,
    videoWithOverlays,
    overlayTextView,
    overlayImageView,
    overlayImage,
  } = styles;

  const [height, setHeight] = useState(0);
  const [overlayHeight, setOverlayHeight] = useState(0);

  useEffect(() => {
    // setting the overlay height to 10px starting
    // from the bottom of the video
    setOverlayHeight(height / 2 + height / 3 - 10);
  }, [height]);

  return (
    <View style={videoWithOverlays}>
      <Video
        {...videoComponentProps}
        style={video}
        onLayout={(event) => {
          const { height } = event.nativeEvent.layout;
          setHeight(height);
        }}
      />
      <View style={{ ...overlayTextView, top: overlayHeight }}>
        {text && <Text style={overlayText}>{text}</Text>}
      </View>
      <View style={{ ...overlayImageView, top: overlayHeight }}>
        {imageSrc && (
          <Image style={overlayImage} source={imageSrc} resizeMode="contain" />
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  overlayTextView: {
    position: 'relative',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    right: 5,
  },
  overlayImageView: {
    position: 'relative',
    alignItems: 'flex-start',
    justifyContent: 'flex-end',
    left: 5,
  },
  overlayImage: {
    position: 'absolute',
    height: 40,
  },
  overlayText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: 'white',
  },
  video: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    marginTop: '50%',
  },
  videoWithOverlays: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

The react-native-video Video component is used to play the video and its props are exposed thanks to the videoComponentProps prop. Then, after being placed into the layout, its height depending on the size of the device screen is stored in the height variable. This is used to calculate the height the overlays should be placed at in the useEffect hook. In detail, the overlays are placed at 10px from the bottom edge of the video.

The first internal View represents the optional text overlay. The overlay logic depends entirely on the custom overlayTextView and overlayText StyleSheet fields, representing the CSS classes responsible for displaying the text passed as a prop with text as an overlay. By default, the text overlay is placed in the bottom-right corner of the video.

The second internal View represents the optional image overlay. The overlay logic depends entirely on the custom overlayImageView and overlayImage StyleSheet fields, representing the CSS classes taking care of showing the image passed as a prop with imageSrc as an overlay. By default, the image overlay is placed in the bottom-left corner of the video. As you can see, both overlays are optional.

3. Putting It All Together

Let’s see the VideoWithOverlays component defined above in action. All you need to do is replace the App.js file with this:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import VideoWithOverlays from './src/components/VideoWithOverlays/VideoWithOverlays';

export default function App() {
  // a static image stored into the assets folder
  const imgLy = require('./src/assets/images/IMG_LY.png');

  return (
    <View style={styles.container}>
      <VideoWithOverlays
        videoComponentProps={{
          // replace this free video source with your video
          source: {
            uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          },
        }}
        // overlay text
        text={'IMG.LY'}
        // overlay image
        imageSrc={imgLy}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here, <VideoWitOverlays> is initialized with a free video source retrieved from a public URL and two overlays. The text overlay states “IMG.LY” and it is placed in the bottom-right corner of the video. While the image overlay represents the IMG.LY logo and is placed in the bottom-left corner of the video. This is a screenshot of the VideoWitOverlays in action:

Final Considerations

Adding overlays elements to a video in React Native is not complex and takes just a few lines of code. On the other hand, the approach presented above is just a frontend trick and does not modify the video. You are just showing it behind text or an image, giving the illusion to the users that it is a single source of content.

If you wanted to let users modify their videos by adding overlays or other elements and then export them, this would involve complex logic and require an advanced UI. Building such a React Native component is a time-consuming task that represents a waste of energy. If that is your goal, you should take into consideration a complete and ready-to-use SDK solution, such as VideoEditorSDK. This would provide your users with the ability to add overlays and use many other cool features.

Add Overlays to a Video With React Native module for VideoEditor SDK

Visit this page from the official documentation to learn how to get started with VideoEditorSDK in React Native. Then, load your video and start editing it by adding overlays, text, and stickers. Follow the previous links to learn more about each feature.

Download our free mobile demo app from the App Store or Google Play, and try an extensive set of tools to edit videos.

Conclusion

In this tutorial, we learned how to define a React Native component that allows you to reproduce a video and add overlays. Specifically, we used react-native-video and defined everything required to place text or an image on your video. However, if you intend to export your edit, you will have to build a complex video editing application. In this scenario, you will want to consider a fully-featured, cutting-edge, and easy-to-adopt solution – such as VideoEditorSDK.
Looking for more video capabilities? Check out our solution for Short Video Creation, and Camera SDK!

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

How To Manipulate an Image With Jimp in React

Antonello — Wed, 26 Jan 2022 13:36:27 GMT

In this article, you will learn how to use jimp in React to perform the most common image processing operations. As you are about to learn, this popular JavaScript library allows you to effortlessly manipulate an image with a few lines of code.

What is Jimp?

Jimp stands for JavaScript Image Manipulation Program, and it is one of the most popular open-source image processing libraries, with more than one million weekly downloads. As stated on the official GitHub page, Jimp is a Promise-based library that relies entirely on Vanilla JavaScript. This means that it has no native or external dependencies, as you can verify here. This makes it more reliable and lightweight.

Jimp comes with several functions that allows you to transform your images in endless ways. Particularly, it includes the resize(), blur(), crop(), rotate() functions and many others. At the time of writing, these are image formats supported by Jimp:

Let’s now see how to use the Jimp transformation functions.

Prerequisites

This is the list of prerequisites you need to make the React applications using Jimp we are about to build works:

You can add jimp to your project’s dependencies by launching the following command:

npm install jimp

Now, you have everything required to start getting your hands dirty with Jimp in React.

Basic Image Processing in Jimp

All the Jimp usage examples presented below share the same logic. So, let’s address it immediately.

Specifically, this is what a basic JimpDemo component looks like:

import Jimp from 'jimp';
import { useEffect, useState } from 'react';

export function JimpDemo({ imageUrl }) {
  const [jimpImage, setJimpImage] = useState(undefined);
  const [image, setImage] = useState(undefined);
  const [transformedImage, setTransformedImage] = useState(undefined);

  // loading an image every time imageUrl changes
  useEffect(() => {
    const loadImage = async () => {
      // generating the Jimp data structure
      // loading an image from an URL
      const jimpImage = await Jimp.read(imageUrl);
      setJimpImage(jimpImage);

      // transforming jimpImage into its Base64 representation
      // and storing it
      const image = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
      setImage(image);
    };

    loadImage();
  }, [imageUrl]);

  // generating the transformed image
  // as soon as the Jimp data structure is ready
  useEffect(() => {
    if (jimpImage) {
      const transformImage = async () => {
        // performing the Jimp image processing operation
        // on jimpImage...

        // e.g. jimpImage.crop(100, 100)

        // storing the transformed image
        // in Base64 format
        const transformedImage = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
        setTransformedImage(transformedImage);
      };

      transformImage();
    }
  }, [jimpImage, height, width]);

  return image && jimpImage ? (
    <>
      <h1>Original Image</h1>
      <img className="originalImage" src={image} alt="Original" />
      <h1>Transformed Image</h1>
      <img
        className="transformedImage"
        src={transformedImage}
        alt="Transformed"
      />
    </>
  ) : (
    <>Loading...</>
  );
}

First, the imageUrl prop value storing the URL to the image you want to transform is used to generate a Jimp data structure. This happens in the first useEffect() function when launching Jimp.read(). This function takes the path to a file or a URL and returns a Promise with the Jimp data structure you call the manipulation functions on. Also, the Base64 representation of the original image is stored to be able to show it in the HTML <img> tag.

Keep in mind that the function passed to useEffect() should not be async. This is why an internal async function was defined and then called instead.

Then, the second useEffect() function is called as soon as jimpImage is initialized and takes care of performing the transformation function on the original image. Again, the Base64 representation of the transformed image is saved.

Finally, both the original and transformed images are rendered by the component. As you can imagine, what will change in the following examples will be the Jimp image transform function called, which might also require extra props.

Cropping an image

The Jimp crop() function crops an image at a given point to a given size.

jimpImage.crop(x, y, width, height)

x: the x coordinate to crop from
y: the y coordinate to crop from
width: the width of the crop region
height: the height of the crop region

See it in action in the live example below:

Resizing an image

The Jimp resize() function resizes an image to set width and height using a 2-pass bilinear algorithm.

jimpImage.resize(width, height);

width: the width to resize the image
height: the height to resize the image to

See it in action in the live example below:

Rotating an image

The Jimp rotate() function rotates an image clockwise by a number of degrees. Note that the width and height of the image will be resized accordingly by default.

jimpImage.rotate(degrees);

degrees: the number of degrees to rotate the image by

See it in action in the live example below:

Filtering an image

Although Jimp does not come with a single filtering function, it offers several functions to achieve the desired results. For example, you can implement an image filtering feature by harnessing the blur(), color(), dither(), normalize(), or threshold() functions.

Let’s see some of them in action in the live demo below:

Jimp vs PhotoEditor SDK

Undoubtedly, Jimp is a powerful tool. It’s an amazingly lightweight and simple library that offers so many image manipulations. On the other hand, achieving complex results requiring multiple manipulations to be performed on the end user’s needs could become challenging. In detail, this would require an advanced, robust, reliable, and easy-to-use UI that only a commercial solution such as IMG.LY’s PhotoEditor SDK can offer.

You could build such a UI yourself on top of Jimp, but this would take a lot of time and effort. This is especially true if you want to implement a general-purpose application, such as an image processing application. For limited and specific tasks without any user interaction, Jimp is the ideal solution.

Also, now you can take a look at the CreativeEditor SDK which is a more advanced API solution and obvious alternative to Jimp!

Conclusion

Today we learned about the jimp JavaScript library, its dependencies, how it works, and how to use it in React real-world scenarios. Specifically, this npm library comes with several image manipulation functions that can be used with a few lines of code. However, building a complex image editing application on top of it would require an entire UI, and you might want to avoid spending time on it. In this case, you should look into a more advanced, fully-featured, and ready-to-use solution – such as PhotoEditorSDK.

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

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

How To Resize an Image in React

Antonello — Fri, 30 Jul 2021 10:57:19 GMT

In this article, you will see how to resize an image in JavaScript. In particular, here you will learn to achieve this goal with the react-image-file-resizer React library. If you are looking for a pure Javascript solution, here’s a quick rundown of the HTML API usage.

Providing users with features to resize images has become almost unavoidable. This is because images are larger than ever. It is not a secret that the quality of the images and therefore their file sizes have been increasing for years.

The problem is that dealing with large files is time-consuming. Plus, it may cost money in bandwidth when uploading or downloading them. This is why it is so important to shrink the size of images by resizing them. Also, these issues fall on end-users, and this should be avoided.

So, let’s see how to resize an image in React with react-image-file-resizer. By following this step-by-step tutorial, you will achieve the following result:

Prerequisites

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

Node.js and npm 5.2+ and higher
react-image-file-resizer >= 0.4.7

Resizing an Image with `react-image-file-resizer`

You can clone the GitHub repository that supports this article and try the demo application by launching the following commands:

git clone https://github.com/Tonel/resize-image-react-demo-imgly
cd resize-image-react-demo-imgly
npm i
npm start

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Creating a React Project

Generate an empty working project in React with Create React App, the officially supported way to create single-page React applications. You can initialize a new project called react-image-resizer-demo with the following command:

npx create-react-app react-image-resizer-demo

You will now have a demo project located in the react-image-resizer-demo folder with the following file structure:

react-image-resizer-demo
├── 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 react-image-resizer-demo folder and start a local server by launching these commands:

cd react-image-resizer-demo
npm start

Reach http://localhost:3000/ in your browser. You should now be able to see the default Create React App screen, as follows:

2. Installing `react-image-file-resizer`

First, you have to add the react-image-file-resizer library to your project’s dependencies. You can do it by running the following command:

npm install --save react-image-file-resizer

Thus, your package.json file will be updated accordingly. You should now be able to spot react-image-file-resizer as a dependency.

Now, all prerequisites have been met. So, you can start building your image resizer component. Let’s see together how.

3. Building the Image Resizer Component

First, make a components folder inside src. Then, create an ImageResizer folder containing index.js and index.css. These two files will contain the resizer component definition and style respectively.

Initialize index.js with the following snippet:

import React from 'react';

function ImageResizer() {
  return <div>{/*TODO*/}</div>;
}

export default ImageResizer;

This way, you have just defined an empty ImageResizer component.
Now, import the Resizer utility from the react-image-file-resizer library. Add it to the ImageResizer imports:

import Resizer from 'react-image-file-resizer'

This is what the final ImageResizer will look like:

import React, {useEffect, useState} from "react";
import Resizer from "react-image-file-resizer";

function ImageResize(props) {
    const {imageToResize, onImageResized, resizeAspect, resizeQuality} = props;

    const [imageToResizeUri, setImageToResizeUri] = useState();
    const [imageToResizeWidth, setImageToResizeWidth] = useState();
    const [imageToResizeHeight, setImageToResizeHeight] = useState();

    useEffect(() => {
        if (imageToResize) {
            const reader = new FileReader();

            reader.addEventListener('load', () => {
                setImageToResizeUri(reader.result);
            });

            reader.readAsDataURL(imageToResize);
        }
    }, [imageToResize])

    useEffect(() => {
        if (imageToResize && imageToResizeWidth && imageToResizeHeight) {
            Resizer.imageFileResizer(
                imageToResize,
                imageToResizeWidth * resizeAspect,
                imageToResizeWidth * resizeAspect,
                "JPEG",
                resizeQuality,
                0,
                (uri) => {
                    onImageResized(uri)
                },
                "base64"
            );
        }
    }, [
        imageToResize, imageToResizeWidth, imageToResizeHeight,
        onImageResized, resizeAspect, resizeQuality
    ]);

    return (
        <img
            src={imageToResizeUri}
            onLoad= {(e) => {
                const img = e.target;
                setImageToResizeWidth(img.width);
                setImageToResizeHeight(img.height);
            }}
            crossorigin="anonymous" // to avoid CORS-related problems
        />
    );
}

ImageResize.defaultProps = {
    onImageResized: () => {},
    resizeAspect: 0.5,
    resizeQuality: 100
}

export default ImageResize;

imageToResize is the source Blob representing the image received from the props. First, imageToResize is transformed into a Base64 URI by the first useEffect() function, and then showed. After being loaded by the <img> HTML tag, the image’s width and height are saved to be used during the resizing operation. This is done by the second useEffect() function, which takes care of resizing the Blob image received by employing the Resizer utility.

Please, note that resizeAspect and resizeQuality are two props in charge of defining the resize aspect and quality percentage, respectively. By default, they are assigned to 0.5 and 100. This means that the resized image will be 50% smaller and no compression will be applied during the resizing process.

4. Putting It All Together

Now, let’s see the ImageResizer component defined above in action. All you need to do, is change the App.js file as follows:

import React, { useState } from 'react';
import './App.css';
import ImageResize from './components/ImageResizer';

function App() {
  const [imageToResize, setImageToResize] = useState(undefined);
  const [resizedImage, setResizedImage] = useState(undefined);

  const onUploadFile = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      setImageToResize(event.target.files[0]);
    }
  };

  return (
    <div className="app">
      <h1>Image Resizer</h1>
      <p>
        Please, upload an image and it will be showed both original and resized
        by 50%
      </p>
      <input type="file" accept="image/*" onChange={onUploadFile} />
      <div>
        <ImageResize
          imageToResize={imageToResize}
          onImageResized={(resizedImage) => setResizedImage(resizedImage)}
        />
      </div>
      {resizedImage && (
        <div>
          <h2>Resized Image</h2>
          <img alt="Resize Image" src={resizedImage} />
        </div>
      )}
    </div>
  );
}

export default App;

The input element allows users to upload an image. This is stored in the imageToResize state variable, and then passed to ImageResizer as a props. This will take care of resizing it accordingly. The resulting resized image is saved thanks to the setResizedImage function, and finally displayed in the Resize Image section.

If you are a Next.js user, you can use the <Image /> component to make it resize images for you. React will then render resized images automatically.

Final Considerations on `react-image-file-resizer`

Resizing an image cannot be considered a complex task. However, using a library like react-image-file-resizer makes everything easier. In fact, you can achieve your goal with just a handful of lines of code. On the other hand, you should take into account what using such specific libraries implies. In fact, when you need to perform many image-related operations, you may be ending up with as many libraries as operations required.

Not only might they be complex to make them coexist, but they may have very different UIs as well. This is why, harnessing a commercial and more complete solution such as PhotoEditorSDK could be a better approach. With only one library, you would get several tools to deal with images as you need. This, while preserving the consistency of your application’s UI. Plus, whenever you need help, you can ask for support from the img.ly developers who built the SDK.

Resizing an Image with PhotoEditorSDK

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in React. Then, by using the transform tool you can perform cropping, resizing, flipping, and rotation operations with just one feature. This way, you should be able to achieve the desired result

Conclusion

In this article, we looked at how to resize an image in React. Although this cannot be considered a complex feature to implement, using a library such as react-image-file-resizer is recommended. As we have seen, you can resize an image effortlessly and with only a few lines of code. On the other hand, it is a library with a very specific and limited purpose. So, if you needed to perform more than one operation on your images, you might want to take advantage of a more advanced and complete solution – such as PhotoEditorSDK.

How To Crop an Image in React

Antonello — Mon, 28 Jun 2021 17:03:00 GMT

In this article, you will learn to crop an image in JavaScript. Specifically, you will see how to achieve this goal with the react-image-crop React library.

Over the last few years, providing users with features to deal with images has become more and more common. This is why every developer should know how to deal with basic operations on images, such as cropping. This gives them the possibility to choose only the areas they are interested in.

So, let’s see how to crop an image in React with react-image-crop. Follow this step-by-step tutorial to achieve the following result:

Prerequisites

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

Node.js and npm 5.2+ and higher
react-image-crop >= 8.6.12

Cropping an Image with `react-image-crop`

You can clone the GitHub repository that supports this article and try the demo application by launching the following commands:

git clone https://github.com/imgly/Blog-How-To-Crop-an-Image-in-React-with-React-Crop-Image.git
cd Blog-How-To-Crop-an-Image-in-React-with-React-Crop-Image
npm i
npm start

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Creating a React Project

The easiest way to create an empty working project in React is by using Create React App, the officially supported way to create single-page React applications. You can create a new project called react-image-cropper-demo with the following command:

npx create-react-app react-image-cropper-demo

You will now have a demo project located in the react-image-cropper-demo folder with this file structure:

react-image-cropper-demo
├── 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 react-image-cropper-demo folder and launch a local server by running:

cd react-image-cropper-demo
npm start

Visit http://localhost:3000/ in your browser, and you should be able to see the default Create React App screen.

2. Installing `react-image-crop`

Add the react-image-crop library to your project’s dependencies by running the following command:

npm install --save react-image-crop

Your package.json file will be updated accordingly, and you should now be able to see react-image-crop as a dependency.
Now, you have everything required to start developing your image cropper component.

3. Building the Image Cropper Component

First of all, create a components folder inside src. Then, make an ImageCropper folder containing index.js and index.css. These two files will contain the cropper component definition and style respectively.

Initialize index.js with the following lines of code:

import React from 'react';

function ImageCropper() {
  return <div>{/*TODO*/}</div>;
}

export default ImageCropper;

This way, you have just created an empty ImageCropper component.
Now, you need to import ReactCrop, which is part of the react-image-crop library. Add it to the ImageCropper imports:

import ReactCrop from 'react-image-crop';

Plus, do not forget to import dist/ReactCrop.css or ReactCrop.scss as follows:

import 'react-image-crop/dist/ReactCrop.css';
// or scss:
import 'react-image-crop/lib/ReactCrop.scss';

This is what the final ImageCropper will look like:

import React, { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import demoImage from './demo-image.jpg';

function ImageCropper(props) {
  const { imageToCrop, onImageCropped } = props;

  const [cropConfig, setCropConfig] = useState(
    // default crop config
    {
      unit: '%',
      width: 30,
      aspect: 16 / 9,
    }
  );

  const [imageRef, setImageRef] = useState();

  async function cropImage(crop) {
    if (imageRef && crop.width && crop.height) {
      const croppedImage = await getCroppedImage(
        imageRef,
        crop,
        'croppedImage.jpeg' // destination filename
      );

      // calling the props function to expose
      // croppedImage to the parent component
      onImageCropped(croppedImage);
    }
  }

  function getCroppedImage(sourceImage, cropConfig, fileName) {
    // creating the cropped image from the source image
    const canvas = document.createElement('canvas');
    const scaleX = sourceImage.naturalWidth / sourceImage.width;
    const scaleY = sourceImage.naturalHeight / sourceImage.height;
    canvas.width = cropConfig.width;
    canvas.height = cropConfig.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      sourceImage,
      cropConfig.x * scaleX,
      cropConfig.y * scaleY,
      cropConfig.width * scaleX,
      cropConfig.height * scaleY,
      0,
      0,
      cropConfig.width,
      cropConfig.height
    );

    return new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        // returning an error
        if (!blob) {
          reject(new Error('Canvas is empty'));
          return;
        }

        blob.name = fileName;
        // creating a Object URL representing the Blob object given
        const croppedImageUrl = window.URL.createObjectURL(blob);

        resolve(croppedImageUrl);
      }, 'image/jpeg');
    });
  }

  return (
    <ReactCrop
      src={imageToCrop || demoImage}
      crop={cropConfig}
      ruleOfThirds
      onImageLoaded={(imageRef) => setImageRef(imageRef)}
      onComplete={(cropConfig) => cropImage(cropConfig)}
      onChange={(cropConfig) => setCropConfig(cropConfig)}
      crossorigin="anonymous" // to avoid CORS-related problems
    />
  );
}

ImageCropper.defaultProps = {
  onImageCropped: () => {},
};

export default ImageCropper;

imageToCrop is the source image received from the props. The or statement used when assigning the ReactCrop’s src props assures that either imageToCrop or a default demo image is shown. After being loaded, a reference to the image is saved and then used when performing the cropping operation. Then, whenever a user uses the component to try to crop an image, the cropConfig object containing the crop settings is updated accordingly. Finally, when the user stops selecting the area to crop, cropImage is called. This function is in charge of producing the cropped image and passing it to the onImageCropped function received from the props.

4. Putting It All Together

Now it is time to see the ImageCropper component in action. All you need to do, is change the App.js file as follows:

import React, { useState } from 'react';
import './App.css';
import ImageCropper from './components/ImageCropper';

function App() {
  const [imageToCrop, setImageToCrop] = useState(undefined);
  const [croppedImage, setCroppedImage] = useState(undefined);

  const onUploadFile = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      const reader = new FileReader();

      reader.addEventListener('load', () => setImageToCrop(reader.result));

      reader.readAsDataURL(event.target.files[0]);
    }
  };

  return (
    <div className="app">
      <input type="file" accept="image/*" onChange={onUploadFile} />
      <div>
        <ImageCropper
          imageToCrop={imageToCrop}
          onImageCropped={(croppedImage) => setCroppedImage(croppedImage)}
        />
      </div>
      {croppedImage && (
        <div>
          <h2>Cropped Image</h2>
          <img alt="Cropped Image" src={croppedImage} />
        </div>
      )}
    </div>
  );
}

export default App;

The input element allows users to upload an image, then stored it in imageToCrop and passed to ImageCropper. Each time a user crops it, the resulting image is saved thanks to the setCroppedImage function. Then, it is finally displayed in the Cropped Image section as presented in the fiddle at the beginning of the article.

Final Considerations on `react-image-crop`

Cropping an image from scratch is not an easy task. This is why using a library like react-image-crop is the recommended approach. As you have just seen, you can achieve your goal with just a few lines of code. This is great! On the other hand, these libraries are designed to achieve specific goals, like cropping an image. What if you need to perform or get users the possibility to do other image-related operations? You may be ending up with as many libraries as operations required.

Not only might they have very different UIs, but it may also be complicated to integrate them all in the same project. This is why in such a circumstance, a commercial and wider solution like PhotoEditorSDK should be the preferred approach. In fact, with only one library you get several tools to treat images as you want, while preserving the consistency of your application’s UI. Also, whenever you need help, you can ask for support from the img.ly developers who built the SDK or visit one of the myriad snappy integration guides written by the developers on the blog.

Cropping an Image with PhotoEditorSDK

Conclusion

In this article, we looked at how to crop an image in React. Cropping an image can turn into a complex task and this is using a library should be the preferred approach. In particular, react-image-crop allows you to crop an image easily and with only a handful of lines of code, as we have seen. On the other hand, it is a library with a very specific purpose. So, if you needed to perform more than one operation on your images, you might need a more advanced and complete solution like PhotoEditorSDK.

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

A Photo and Video Editor for React Native Apps

Julia — Fri, 29 May 2020 10:30:01 GMT

How to integrate a Photo and Video Editor into your React Native App

This tutorial walks you through the integration process of PhotoEditor SDK and VideoEditor SDK into your React Native app for iOS and Android. You’ll learn how to use our React Native modules to facilitate the integration and to customize our editors. For this tutorial we presume that all the necessary development tools for building an iOS and Android app are met, so make sure to complete the official React Native CLI Quickstart guides for iOS and Android beforehand.

Please make sure to acquire the licenses for PhotoEditor SDK and VideoEditor SDK before integrating them.

In this tutorial, we’re going to show how to integrate PhotoEditor SDK and VideoEditor SDK for iOS and Android into your React Native app. Therefore, we created React Native modules for our products to simplify this process for you as much as possible. We’re going to use VideoEditor SDK’s README, which is in most parts identical to the PhotoEditor SDK’s README, and Visual Studio Code. So, let’s get started.

First, we create a React Native project with the name “Demo” based on the default template by using the command npx react-native init Demo. The project will now be initialized and automatically install all dependencies of the current React Native version. Afterwards, we can find the new React Native project ready to use in the folder “Demo”. So, we’ll speed this up a little.

We already prepared another folder with resources and assets that we want to integrate in our app. Here we chose an image, the required licenses for our PhotoEditor SDK and VideoEditor SDK for both target platforms, a video and two logos that we will later use to show how we can customize our editors. We copy these resources into the root of our project to make the resources accessible for our app.

Now, we switch to the folder of the “Demo” project*.* We can now copy and execute the command yarn add react-native-videoeditorsdk from the README to install the dependencies to the React Native module for our VideoEditor SDK … and to the React Native module for PhotoEditor SDK by issuing the command yarn add react-native-photoeditorsdk.

Now, we’re going to set up the dependencies for our native iOS libraries. We can simply copy the command cd ios && pod install && cd .. from the README and execute it to install all iOS dependencies. They include the native PhotoEditor SDK and VideoEditor SDK libraries that are required by our React Native modules.

And now, we set up the dependencies for our native Android libraries. The required steps that we will now take are described in detail in the README.

android {
  defaultConfig {
    multiDexEnabled true
  }
}

dependencies {
  implementation ‘androidx.multidex:multidex:2.0.1’
}

We copy the lines and add them at the end of our android/app/build.gradle file. Now we need to change the superclass of our MainApplication class to enable Multidex. Next, we add the img.ly repository and the plugin by copying the following lines and add them at the top of our android/build.gradle file located in our Android folder.

buildscript {
  repositories {
    jcenter()
    maven { url "https://plugins.gradle.org/m2/" }
    maven { url "https://artifactory.img.ly/artifactory/imgly" }
  }

  dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
    classpath 'ly.img.android.sdk:plugin:7.1.8'
  }
}

Now, we can configure our PhotoEditor SDK and VideoEditor SDK by opening the android/app/build.gradle file and add these lines under apply plugin: “com.android.application".

apply plugin: 'ly.img.android.sdk'
apply plugin: 'kotlin-android'

// Comment out the modules you don't need, to save size.
imglyConfig {
  modules {
    include 'ui:text'
    include 'ui:focus'
    include 'ui:frame'
    include 'ui:brush'
    include 'ui:filter'
    include 'ui:sticker'
    include 'ui:overlay'
    include 'ui:transform'
    include 'ui:adjustment'
    include 'ui:text-design'
    include 'ui:video-trim'

    // This module is big, remove the serializer if you don't need that feature.
    include 'backend:serializer'

    // Remove the asset packs you don't need, these are also big in size.
    include 'assets:font-basic'
    include 'assets:frame-basic'
    include 'assets:filter-basic'
    include 'assets:overlay-basic'
    include 'assets:sticker-shapes'
    include 'assets:sticker-emoticons'
  }
}

Getting back to our iOS version, we can now launch our demo project on iOS, which will currently look like a plain React Native project that we initialized with the first command.

The main difference to an off-the-shelf React Native project is that our React Native modules are installed and ready-to-use in the App.js file once the native projects are compiled. Then, it won’t be necessary to recompile the native projects for the remainder of this tutorial. We sped up the compilation a little and here we go: our React Native app is running on the iOS simulator. Now, we do the same for the Android version and wait until the project is compiled.

Now, the demo project launched on both platforms as we can see on the right on the iOS simulator at the top, and on the Android emulator at the bottom of the screen.

We’ve decided that we want to start our photo editor by pressing a button. So next, we’re going to actually customize our React Native app by adding this button. Therefore, we open the App.js file and import the Button component in order to create a button with the title “Edit a sample image”. For now, we leave the onPress function empty.

We save the App.js file to trigger a refresh of the running apps and immediately see the result on the right. The new button appears in both, the iOS and the Android app.

Now we create a second button with the title “Edit a sample video”. This will respectively start our video editor. And again, we save the App.js file and see the second button appear on the right side.

Next, we are going to add the code that actually opens our editors when we press the buttons. Visual Studio Code automatically imported the respective React Native PhotoEditor SDK module for us at the very top of the file, while writing the code that makes use of our SDK. We do the same for the VideoEditor SDK. We use the require function to make static assets available to our app. Here, we “require” our sample image and our sample video that we copied to the app’s folder in the beginning and pass them as the first argument to our openEditor functions. The first argument can also be a regular URI.

We save the App.js file again and now we can click the buttons to start our photo editor or video editor. There we go! We still see a watermark here. The reason for this watermark is that we haven’t unlocked our SDKs so far which we will do next.

We unlock both products with our licenses to get rid of the watermark. If not unlocked, the watermark will be on both the image and video previews as well as on the exported images and videos. To unlock the products, we use the unlockWithLicense function of each SDK. In total, we need four license files, one license file for each product and platform combination. The license files should be named pesdk_license and vesdk_license with platform-specific extensions .ios.json and .android.json. React Native will then automatically pick the right file for the corresponding platform. After this, the watermarks will be removed for PhotoEditor SDK and VideoEditor SDK on both platforms. And now you can also see it in the simulator: no watermarks anymore.

In the next step, we’re going to change the configuration of the editors. If no changes are made to the configuration, our default stickers are available with the editor. To customize them, we need to import the Configuration from either the PhotoEditor SDK or VideoEditor SDK. The configurations are compatible between both products. So, for this tutorial, we decided to use the VideoEditor SDK configuration which we are now using by adding Configuration to the react-native-videoeditorsdk imports. We decided that we want to add custom stickers to our editors. Therefore we define a non-default configuration to the sticker tool.

const configuration: Configuration = {
  sticker: {}
}

To customize the sticker assets, we need to define the sticker “categories” array. Here, we define a new category and name the identifier demo_sticker_category. These asset identifiers must always be unique. Next, we set a name for the category and we name it “Logos”.

Each category also requires a thumbnail image to be displayed in the editor. For the thumbnail, we use the React logo that we added to the folder of our app at the very beginning. Next, we define the items for this new sticker category. These items are the actual stickers that we can apply to the edited image or video. We now create a new sticker for the React logo. Therefore, we call the identifier demo_sticker_react and name it “React”. These sticker names won’t appear in the UI, but they are used for accessibility. Now, we need to define the actual image that should be used for that sticker. Here we use the React image again.

To create a second sticker, we can now copy and paste the code of the first sticker. We create a sticker with our img.ly logo and rename the identifier of the pasted code to demo_sticker_imgly. Accordingly, we set the name to “img.ly” and change the file to imgly.png.

In addition, we want to specify a non-default tint mode for our second sticker by using tintMode: TintMode.SOLID which enables us to change the color of the sticker. The TintMode type is automatically added to the VideoEditor SDK imports for us by Visual Studio Code. Now, that we completed our configuration, we need to pass it as the second argument to the openEditor functions in order to take effect.

We save the App.js file again to refresh the running apps and we can see the result live after starting a new editing session. Please note that you cannot alter the configuration of a running editor instance. You always need to start a new editing session to see configuration changes.

We want to use another feature of our SDKs which is called serialization. With the serialization feature, we can capture all image and video editing operations that are applied in the editor and export them. This allows us to import the editing operations in later sessions and continue editing. The serializations are compatible between both products as well. The input serialization is the third parameter of the openEditor functions of our SDKs and the output serialization is optionally part of their result type.

First, we check if the result is “null”. This is the case when a user clicks the “Discard” button in the editor and thus does not export an image or video. If the result is not ”null”, we know that the user exported an image or video. Then we can assign the exported serialization to the previously defined global serialization variable which will then be input to the next editing session. We copy the code and add it to the video editor as well to enable the serialization function here too.

Now, one thing is left to enable the actual serialization export in the configuration. The serialization export is disabled per default because not every user needs the serialization feature. Here, we enable it now and also change the export type to object. By doing so, the result type of the editor will contain the serialization as an object. Per default, the serialization is exported to a file and that file name is returned as part of the export result. Writing the serialization to a file is a reasonable default as serializations can be quite large, especially if large amounts of binary data for personal stickers are embedded.

Now, we can run the app on the simulator and use all the parameters that we configured in this tutorial. First, we can add our custom stickers, both the React logo and the img.ly logo. Here we can also change the colors which we enabled with the tint mode.

We can also use the text design tool to add a phrase to our image. Here we can pick different designs, so we’re trying a couple and place the text design fitting to the image and logo.

Next, we export our image with the serialization. With the serialization function enabled, it is now possible to import the editing operations into our video editor. This allows us to keep on editing because the serialization is compatible between both products. So here we can add further words to our text design. We can also put filters on our video. For example, we can choose the peach duo tone and increase the contrast a little. And here we go! We successfully integrated PhotoEditor SDK and VideoEditor SDK into our React Native app.

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

Announcing PhotoEditor SDK HTML5–v 5.0

Priyanka — Thu, 16 Apr 2020 12:00:00 GMT

Meet PhotoEditor SDK 5.0

Last year we decided to meticulously rebuild the PhotoEditor SDK HTML5 from stem to stem. There’s a saying that great software is constantly evolving for the better. PhotoEditor SDK 5 does just that, it is now **smaller**, **faster and easily** **maintainable.**

Rethinking UI Design for a Better User Experience

The User Interface (UI) of the PhotoEditor SDK is visually and conceptually revised taking specific usability and platform guidelines into account. This has resulted in an even more consistent and intuitive UI than before.

In the course of refactoring, we have standardized the UI structure and arrangement of the individual tools. The UI controls are now displayed according to their context to create a minimalist, clear, and appealing overall image. Find more information on the design improvements here.

Let’s talk metrics

The average TTI (Time to interactive) changed from 96.8s to 5.5s

That makes it “fast enough” on mobile networks

These massive speed gains were mainly enabled by our major rewrite and re-architecting of the codebase. Since it has been untouched for years, we have now reconstructed it completely focusing on performance and scalability.

Configurations and Customizations

UI is now supercharged with even more customization options.

Layouts

We will be supporting two UIs as before, but we are now moving away from the terminology Desktop UI and React UI. Instead, they are now called Advanced UI and Basic UI, sharing one and the same code base.

Themes

Light theme was one of the most sought out features for the PhotoEditor SDK HTML5. The UI can now be integrated even better into existing systems, thus transitioning seamlessly from the PhotoEditor UI to the rest of the UI. End users are offered an improved holistic experience. With the major version, dark and light themes are supported by default. Moreover, themes can be customized on three levels colors, typography, and shape. More on that here.

Component Customization

This has to be the most exciting feature for the major release. You could simply provide a React Component in the configuration and it will be rendered instead of PhotoEditor SDK HTML5 built-in Component. This can help you transform the UI to match the design style of your application. More on that here.

And More

This is just the tip of the iceberg. This release includes numerous user experience and performance improvements. Moreover, PhotoEditor SDK supports differential serving i.e., we **serve** different bundles to different browsers, and provides typings.

Deprecations and Breaking Changes

If you’ve read the post up until to this point, you should be able to notice that there will be breaking changes. Although we have tried to minimize the number of breaking changes and make it backward compatible as much as possible, we believe that some breaking changes in the configuration will be required.

Hitherto we supported two rendering engines for PhotoEditor SDK UI i.e., WebGL and Canvas. Considering browser support we will here-forth be supporting only WebGL.

You can find out more about the release, try out some demos, check our migration guide, or simply get started here.

We’re looking forward to exploring the new capabilities the PhotoEditor SDK V5 starts to unravel, and we’re excited to continue pushing the boundaries of what’s possible in UI libraries and sharing it with you.

Ask us anything here.

PS: Yes, most of the images used in the blog post are edited using the PhotoEditor SDK, #That’sSoMeta

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

React Native: Native Modules made for React developers

Alexander — Thu, 20 Feb 2020 23:00:00 GMT

*TL;DR******: How much of “native” does a React Native developer need? “Nativ”, “nati”, “nat”, “na”, “n”, or none? Version 0.60 drastically shifts this requirement towards none, even when native modules depend on external native libraries!*

Ideally, React Native (RN) should enable web developers to write React code once and thus magically create truly native Android and iOS apps without ever having to touch a single line of platform-specific native code. In reality, developers that use RN to build cross-platform apps need to be quite experienced with the respective development tool stacks and programming languages of the native platforms. This unfortunate truth is particularly the case when integrating native third-party libraries from scratch as we detailed in a previous blog post.

React Native 0.60+ — A relief for iOS

There are two ingredients to the 0.60 release that will save non-native developers countless hours of integration trouble and also make experienced native developers very happy.

First, RN 0.60 reconsidered CocoaPods as the primary build and dependency management system for the iOS platform. Using CocoaPods is now the default for every new React Native app. This choice greatly simplifies the installation and integration process of native third-party frameworks.

Second, autolinking native modules per default finally removes the need to remember the react-native link command after installing any React Native library with npm or yarn in favor of manually issuing another command, namely (cd ios && pod install) to trigger CocoaPods. This change highlights the new integral role of CocoaPods for RN. The utmost benefit of this transition is that all native dependencies of your project are installed in a fully automatic manner. Even nested native dependencies are properly resolved and installed as one would expect.

No more juggling with .framework bundles for third-party libraries with CocoaPods support!

Eventually, even the “burden” of manually pulling the CocoaPods trigger might be gone in future RN versions…

Technically, if writing headlines with Unicode characters would be a good idea, the title of this blog post should have been:

N͟a͟t͟i͟v͟e͟ M͟o͟d͟u͟l͟e͟s͟ made for React N̶a̶t̶i̶v̶e̶ developers

to underline the vanishingly required attribute “native” for developers that are capable of creating stunning React Native apps by using powerful external native libraries without the native tooling hassle.

Certificate of happiness

Building on this strong and developer-friendly foundation of RN 0.60, we are proud to introduce the all-new React Native integrations [react-native-photoeditorsdk](https://www.npmjs.com/package/react-native-photoeditorsdk) and [react-native-videoeditorsdk](https://www.npmjs.com/package/react-native-videoeditorsdk) for our lineup of native SDKs: PhotoEditor SDK and VideoEditor SDK. The interplay of both products allows you to add comprehensive image and video editing tools to your React Native app for iOS and Android, within minutes.

While crafting our new modules, the primary objective was and always will be to foster their adoption by reducing the required platform-specific knowledge and skill set to a bare minimum. We are thrilled to put a wealth of configuration and customization options at the developers’ finger tips without having them to leave the JavaScript tooling and programming environment. The complete API is typed and thoroughly documented so that any decent source code editor will auto-import missing types and display context-sensitive quick help pop-ups alongside your code.

Bye-bye native platform-specific asset management

Hello require! Our new JavaScript API heavily relies on this well-known pseudo-keyword-like function which makes handling static images as well as static non-image resources a breeze. By using it, e.g., in your App.js file, RN will do the heavy lifting and bundle all static assets with the native apps for you. The following snippet demonstrates this convenience for customizing the sticker tool (line 8, 11, 14) and for passing an input image to the editor (line 24). It presumes that the corresponding images are available in your app’s project folder.

Further examples

We created two separate repositories for a photo editor example project and a video editor example project, so that our sample assets won’t increase the size of your node_modules folder when installing our modules.

If you are looking for a step-by-step guide that explains in detail how to supercharge your RN app with image and video editing capabilities, then stay tuned for upcoming additions to our screencasts. You will also learn how to use advanced SDK features, such as serializing and reusing previously applied editing operations directly in your RN app.

Open-source community

We release our new RN modules that expose our native SDKs to the RN ecosystem under open-source licenses. Feedback and pull requests are welcome. The sources are also a valuable basis for bridging other cross-platform frameworks that we are currently not supporting with official integrations.

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

React – IMG.LY Blog

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

Build this with AI in minutes

Introduction

Architecture Overview

Step 1: Project Setup

Why so many packages?

Step 2: The React Component

Step 3: Creating the Video Scene

Browser support

Step 4: The CapCut Dark Theme

Setting the base theme

Custom CSS overrides

Responsive scale

Step 5: AI Plugin Integration

The unified AiApps approach

Provider categories explained

The proxy server requirement

Background removal

Step 6: UI Customization with the Component Order API

Adding the AI button to the dock

AI options in the canvas context menu

Custom export button in the navigation bar

Step 7: Wiring Generated Audio into the Asset Library

Step 8: Custom Labels with i18n

The Complete File Structure

What We Get Out of the Box

Going to Production

1. License key

2. Proxy server

3. Disable dry run

Key Takeaways

Resources

CE.SDK v1.59 Release Notes

Work with WebM Video Files

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

What You Get Out of The Box

Improvements

A Modern React Design Editor: Integration Guide

Why Add a Design Editor to Your React App?

How to Integrate a Design Editor in React

Requirements

Install CE.SDK

Create the Design Editor Component

Use the Component

React Design Editor Use Cases

Social Media Publishing

Digital Asset Management

Marketing Automation

AI-Powered Applications

Product Mockups

E-Learning Materials

Customization Options With CreativeEditor SDK

Conclusion

A Modern React Video Editor: Integration Guide

Check browser support before you scope the work

Why a video editor belongs in the app rather than beside it

Getting started: adding a video editor in React

Requirements

Step 1: Install CE.SDK

Step 2: Create the editor component

Step 3: Mount it

Four things that will cost you an afternoon

init swallows its own errors

Strict Mode runs init twice

Relative asset URLs resolve against the CDN

Trim calls do nothing on unloaded media

Let an agent do the integration

Working with the timeline in code

Create a video scene and a page

Add video clips

Sequence clips with a track

Trim clips

Add audio

Export to MP4

Customizing the editor

Where a React video editor pays off

Next steps

How to Draw on Images in React Native

Canvas Integration for Images

`init` swallows its own errors

Strict Mode runs `init` twice

Resizing an Image with `react-image-file-resizer`

2. Installing `react-image-file-resizer`

Final Considerations on `react-image-file-resizer`

Cropping an Image with `react-image-crop`

2. Installing `react-image-crop`

Final Considerations on `react-image-crop`