{"id":38691,"date":"2025-10-02T07:00:00","date_gmt":"2025-10-02T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38691"},"modified":"2025-10-03T09:20:15","modified_gmt":"2025-10-03T16:20:15","slug":"image-text-overlay-generator-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image-text-overlay-generator-react","title":{"rendered":"How to Create an Image Text Overlay Generator With Cloudinary and React"},"content":{"rendered":"\n

Want to ship a quick banner maker without wrangling a custom canvas stack? In this post, you\u2019ll build a React-based image text overlay generator powered by Cloudinary. Users will upload an image straight to Cloudinary, then layer editable text, adjust its reposition, resize, tweak styling, and see instant previews driven by Cloudinary\u2019s on-the-fly transformations. We\u2019ll wire up the upload flow, model the overlay with React state, and generate URLs that encode text, size, and coordinates so the final asset is production-ready.<\/p>\n\n\n

\n
\"Man<\/figure><\/div>\n\n\n

Part 1: Set Up Your Cloudinary Credentials <\/h2>\n\n\n\n

Retrieve your Cloudinary cloud name, API key, and secret to make sure your MCP server configurations are connected to your Cloudinary application.<\/p>\n\n\n\n

To begin, log in to your Cloudinary account or create a free account<\/a>. If prompted with the question, \u201cWhat\u2019s your main interest?\u201d, select Coding with APIs and SDKs<\/strong> or Skip<\/strong>.<\/p>\n\n\n\n

\"Cloudinary<\/figure>\n\n\n\n

Cloudinary Cloud<\/h3>\n\n\n\n

In your account, select Settings <\/strong>> Product Environments<\/strong>. Here, you\u2019ll see the cloud that you\u2019ve created. Let\u2019s click the three-dot menu to edit your Cloudinary cloud name.<\/p>\n\n\n\n

\"Product<\/figure>\n\n\n\n

Edit the product environment and name your cloud, then click Save Changes<\/strong>.<\/p>\n\n\n\n

It\u2019s essential to maintain the same cloud name across different tools for consistency.<\/p>\n\n\n\n

\"Product<\/figure>\n\n\n\n

Part 2: <\/strong>Build the React App<\/h2>\n\n\n\n

In this tutorial, I\u2019m using Vite<\/a> to build my React application. I recommend that you do the same. Follow the instructions on Vite\u2019s official website to create a React application.<\/p>\n\n\n\n

Build the Text Overlay Generator App<\/h3>\n\n\n\n

In your App.tsx<\/strong><\/a> file, replace the existing code with the following code. The main purpose of this file is to pass the state to the different components of the app.<\/p>\n\n\n

import<\/span> React, { useState } from<\/span> 'react'<\/span>;\n\nimport<\/span> LeftSideBar from<\/span> '.\/LeftSideBar'<\/span>;\n\nimport<\/span> Playground from<\/span> '.\/Playground'<\/span>;\n\nexport<\/span> interface Settings {\n\n\u00a0\u00a0text<\/span>: string;\n\n\u00a0\u00a0fontFamily: string;\n\n\u00a0\u00a0color: string;\n\n\u00a0\u00a0fontSize: number;\n\n\u00a0\u00a0rotation?: number;\n\n\u00a0\u00a0x: number;\n\n\u00a0\u00a0y: number;\n\n\u00a0\u00a0image: string | null<\/span>;\n\n}\n\nconst<\/span> App: React.FC = ()<\/span> =><\/span> {\n\n\u00a0\u00a0const<\/span> [settings, setSettings] = useState<Settings>({\n\n\u00a0\u00a0\u00a0\u00a0text<\/span>: 'Cloudinary'<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0fontFamily<\/span>: 'Arial'<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0color<\/span>: '#000000'<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0fontSize<\/span>: 30<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0x<\/span>: 0<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0y<\/span>: 0<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0image<\/span>: null<\/span>,\n\n\u00a0\u00a0});\n\n\u00a0\u00a0const<\/span> [image, setImage] = useState(''<\/span>)\n\n\u00a0\u00a0const<\/span> updateSettings = (updated: Partial<Settings><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0setSettings((prev<\/span>) =><\/span> ({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...prev,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...updated,\n\n\u00a0\u00a0\u00a0\u00a0}));\n\n\u00a0\u00a0};\n\n\u00a0\u00a0return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"flex\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<LeftSideBar<\/span> settings<\/span>={settings}<\/span> updateSettings<\/span>={updateSettings}<\/span> setImage<\/span>={setImage}<\/span> \/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Playground<\/span> settings<\/span>={settings}<\/span> image<\/span>={image}\/<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span><\/span>\n\n\u00a0\u00a0);\n\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
import<\/span> React, { ChangeEvent } from<\/span> 'react'<\/span>;\n\nimport<\/span> { Settings } from<\/span> '.\/App'<\/span>;\n\nimport<\/span> CloudinaryUploadWidget from<\/span> '.\/CloudinaryUploadWidget'<\/span>;\n\ninterface LeftSideBarProps {\n\n\u00a0\u00a0settings<\/span>: Settings;\n\n\u00a0\u00a0updateSettings: (updated: Partial<Settings><\/span>) =><\/span> void<\/span>;\n\n\u00a0\u00a0setImage: React.Dispatch<React.SetStateAction<string>>;\n\n}\n\nconst<\/span> LeftSideBar: React.FC<LeftSideBarProps> = ({ settings, updateSettings, setImage }<\/span>) =><\/span> {\n\n\u00a0\u00a0\/\/ Handlers for the various inputs<\/span>\n\n\u00a0\u00a0const<\/span> handleTextChange = (e: ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ text<\/span>: e.target.value });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> handleFontChange = (e: ChangeEvent<HTMLSelectElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ fontFamily<\/span>: e.target.value });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> handleColorChange = (e: ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ color<\/span>: e.target.value });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> handleFontSizeChange = (e: ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ fontSize<\/span>: parseInt<\/span>(e.target.value, 10<\/span>) });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> handleXChange = (e: ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ x<\/span>: parseInt<\/span>(e.target.value, 10<\/span>) });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> handleYChange = (e: ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0updateSettings({ y<\/span>: parseInt<\/span>(e.target.value, 10<\/span>) });\n\n\u00a0\u00a0};\n\n\u00a0\u00a0return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"h-screen w-72 p-5 border-r border-gray-300\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2<\/span> className<\/span>=\"text-xl font-bold mb-4\"<\/span>><\/span>Background Text<\/h2<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>Text:<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type<\/span>=\"text\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full border border-gray-300 rounded px-2 py-1\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.text}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleTextChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>Font Family:<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full border border-gray-300 rounded px-2 py-1\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.fontFamily}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleFontChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option<\/span> value<\/span>=\"Arial\"<\/span>><\/span>Arial<\/option<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option<\/span> value<\/span>=\"Times New Roman\"<\/span>><\/span>Times New Roman<\/option<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option<\/span> value<\/span>=\"Courier New\"<\/span>><\/span>Courier New<\/option<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option<\/span> value<\/span>=\"Georgia\"<\/span>><\/span>Georgia<\/option<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option<\/span> value<\/span>=\"Verdana\"<\/span>><\/span>Verdana<\/option<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>Color:<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type<\/span>=\"color\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full h-10\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.color}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleColorChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>Font Size (px):<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type<\/span>=\"number\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full border border-gray-300 rounded px-2 py-1\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.fontSize}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleFontSizeChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>X Position (px):<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type<\/span>=\"number\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full border border-gray-300 rounded px-2 py-1\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.x}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleXChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label<\/span> className<\/span>=\"block text-sm font-medium\"<\/span>><\/span>Y Position (px):<\/label<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type<\/span>=\"number\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"w-full border border-gray-300 rounded px-2 py-1\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value<\/span>={settings.y}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange<\/span>={handleYChange}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"mb-3\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<CloudinaryUploadWidget<\/span> setImage<\/span>={setImage}<\/span> \/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span><\/span>\n\n\u00a0\u00a0);\n\n};\n\nexport<\/span> default<\/span> LeftSideBar;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
import<\/span> { useEffect, useState, useCallback } from<\/span> \"react\"<\/span>;\n\ninterface Props {\n\n\u00a0\u00a0\u00a0\u00a0setImage<\/span>: React.Dispatch<React.SetStateAction<string>>;\n\n\u00a0\u00a0}\n\nfunction<\/span> CloudinaryUploadWidget<\/span>({setImage}: Props<\/span>) <\/span>{\n\n\u00a0\u00a0const<\/span> [loaded, setLoaded] = useState(false<\/span>);\n\n\u00a0\u00a0const<\/span> uwConfig = {\n\n\u00a0\u00a0\u00a0\u00a0cloudName<\/span>: \"YOUR CLOUDE NAME\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0uploadPreset<\/span>: \"upload-images\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0sources<\/span>: [\"local\"<\/span>],\n\n\u00a0\u00a0\u00a0\u00a0multiple<\/span>: false<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0tags<\/span>: [\"text-overlay\"<\/span>],\n\n\u00a0\u00a0};\n\n\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0* Load Cloudinary Upload Widget Script\n\n\u00a0\u00a0\u00a0*\/<\/span>\n\n\u00a0\u00a0useEffect(()<\/span> =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (!loaded) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> uwScript = document<\/span>.getElementById(\"uw\"<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span> (!uwScript) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> script = document<\/span>.createElement(\"script\"<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0script.setAttribute(\"async\"<\/span>, \"\"<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0script.setAttribute(\"id\"<\/span>, \"uw\"<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0script.src = \"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0script.addEventListener(\"load\"<\/span>, () => setLoaded(true<\/span>));\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document<\/span>.body.appendChild(script);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setLoaded(true<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}, [loaded]);\n\n\u00a0\u00a0const<\/span> initializeCloudinaryWidget = async<\/span> () => {\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (loaded) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await<\/span> window<\/span>.cloudinary.openUploadWidget(uwConfig, processUploads);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch<\/span> (error) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console<\/span>.log(\"failed\"<\/span>, error);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const<\/span> processUploads = useCallback((error, result<\/span>) =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (result?.event === \"queues-end\"<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console<\/span>.log('result'<\/span>, result.info.files[0<\/span>].name);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setImage(result.info.files[0<\/span>].name as<\/span> string);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}, []);\n\n\u00a0\u00a0return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id<\/span>=\"upload_widget\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"bg-blue-600 text-white hover:bg-blue-200 hover:text-black cursor-pointer h-[40px] rounded-lg w-full flex justify-center items-center \"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick<\/span>={initializeCloudinaryWidget}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Upload Image\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/><\/span><\/span>\n\n\u00a0\u00a0);\n\n}\n\nexport<\/span> default<\/span> CloudinaryUploadWidget;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
import<\/span> React, { useRef, useMemo } from<\/span> \"react\"<\/span>;\n\nimport<\/span> { Settings } from<\/span> \".\/App\"<\/span>;\n\nimport<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\n\nimport<\/span> { AdvancedImage } from<\/span> \"@cloudinary\/react\"<\/span>;\n\nimport<\/span> { backgroundRemoval } from<\/span> \"@cloudinary\/url-gen\/actions\/effect\"<\/span>;\n\nimport<\/span> { source } from<\/span> \"@cloudinary\/url-gen\/actions\/overlay\"<\/span>;\n\nimport<\/span> { text as<\/span> cloudinaryText } from<\/span> \"@cloudinary\/url-gen\/qualifiers\/source\"<\/span>;\n\nimport<\/span> { TextStyle } from<\/span> \"@cloudinary\/url-gen\/qualifiers\/textStyle\"<\/span>;\n\nimport<\/span> { Position } from<\/span> \"@cloudinary\/url-gen\/qualifiers\"<\/span>;\n\nimport<\/span> { compass } from<\/span> \"@cloudinary\/url-gen\/qualifiers\/gravity\"<\/span>;\n\nimport<\/span> { fetch } from<\/span> \"@cloudinary\/url-gen\/qualifiers\/source\"<\/span>;\n\ninterface PlaygroundProps {\n\n\u00a0\u00a0settings<\/span>: Settings;\n\n\u00a0\u00a0image: string;\n\n}\n\nconst<\/span> Playground: React.FC<PlaygroundProps> = ({ settings, image }<\/span>) =><\/span> {\n\n\u00a0\u00a0const<\/span> containerRef = useRef<HTMLDivElement>(null<\/span>);\n\n\u00a0\u00a0\/\/ 1) Only initialize Cloudinary once<\/span>\n\n\u00a0\u00a0const<\/span> cld = useMemo(\n\n\u00a0\u00a0\u00a0\u00a0()<\/span> =><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new<\/span> Cloudinary({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloud<\/span>: { cloudName<\/span>: \"text-overlay\"<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0\u00a0\u00a0[]\n\n\u00a0\u00a0);\n\n\u00a0\u00a0\/\/ 2) Create the \u201ctop\u201d image pipeline (background removal) separately<\/span>\n\n\u00a0\u00a0const<\/span> topImage = useMemo(\n\n\u00a0\u00a0\u00a0\u00a0()<\/span> =><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cld\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.image(image)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.effect(backgroundRemoval().fineEdges())\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.format(\"png\"<\/span>),\n\n\u00a0\u00a0\u00a0\u00a0[cld, image]\n\n\u00a0\u00a0);\n\n\u00a0\u00a0\/\/ 3) Create a fresh \u201cbackground + text overlay\u201d pipeline on every relevant change<\/span>\n\n\u00a0\u00a0const<\/span> backgroundWithText = useMemo(()<\/span> =><\/span> {\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> img = cld.image(image);\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Apply overlay only if there\u2019s text<\/span>\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (settings.text) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0img.overlay(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloudinaryText(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0settings.text,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new<\/span> TextStyle(settings.fontFamily, settings.fontSize)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0).textColor(settings.color)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0).position(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new<\/span> Position()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.gravity(compass(\"north_west\"<\/span>))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.offsetX(Math<\/span>.round(settings.x))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.offsetY(Math<\/span>.round(settings.y))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0).overlay(source(fetch(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0topImage.toURL()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)));\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> img;\n\n\u00a0\u00a0}, [\n\n\u00a0\u00a0\u00a0\u00a0cld,\n\n\u00a0\u00a0\u00a0\u00a0image,\n\n\u00a0\u00a0\u00a0\u00a0settings.text,\n\n\u00a0\u00a0\u00a0\u00a0settings.fontFamily,\n\n\u00a0\u00a0\u00a0\u00a0settings.fontSize,\n\n\u00a0\u00a0\u00a0\u00a0settings.color,\n\n\u00a0\u00a0\u00a0\u00a0settings.x,\n\n\u00a0\u00a0\u00a0\u00a0settings.y,\n\n\u00a0\u00a0\u00a0\u00a0topImage\n\n\u00a0\u00a0]);\n\n\u00a0\u00a0return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<div<\/span> className<\/span>=\"flex-1 p-5 flex justify-center items-center flex-col gap-4\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{image ? (\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> ref<\/span>={containerRef}<\/span> className<\/span>=\"relative inline-block overflow-hidden\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<AdvancedImage<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cldImg<\/span>={backgroundWithText}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt<\/span>=\"Background with Text\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className<\/span>=\"block max-w-full h-auto\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) : (\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p<\/span> className<\/span>=\"text-gray-500\"<\/span>><\/span>Please upload an image.<\/p<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ image && <a<\/span> href<\/span>={backgroundWithText.toURL()}<\/span> target<\/span>=\"_blank\"<\/span> className<\/span>=\"bg-blue-600 text-white hover:bg-blue-200 hover:text-black cursor-pointer h-[40px] rounded-lg w-[200px] flex justify-center items-center\"<\/span>><\/span>Download Image<\/a<\/span>><\/span>}\n\n\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span><\/span>\n\n\u00a0\u00a0);\n\n};\n\nexport<\/span> default<\/span> Playground;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Part 3: Test the App<\/h2>\n\n\n\n
The first thing we have to do is to run npm install <\/strong>in the root of your project to install the frontend and backend dependencies.<\/p>\n\n\n\n
Run the Frontend Server<\/h3>\n\n\n\n
Open your other terminal, run npm run dev<\/strong>, <\/strong>and navigate to http:\/\/localhost:3000\/<\/a>.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
You now have a working React image text overlay tool powered by Cloudinary, where users can upload, edit, and preview production-ready assets in real time. With the heavy lifting handled by Cloudinary, you can focus on extending features and building creative experiences faster.<\/p>\n\n\n\n
To stay updated with the latest product features, follow Cloudinary<\/a> on X and explore other sample apps<\/a>.<\/p>\n\n\n\n
Building an app with Cloudinary and need inspiration? Visit the App Gallery<\/a>.<\/p>\n\n\n\n
Resources:<\/strong><\/p>\n\n\n\n
Finally, we\u2019ll create the Playground<\/strong><\/a> component. This component will put all the pieces together using Cloudinary transformations. The way it works is, we have two copies of the same image and we stack them one on top of the other. The one on top will be converted into a PNG, and we\u2019ll remove the background. Now, between these two images, we\u2019ll add the text so the image has a nice 2D effect. Make sure to change the cloud name when initializing Cloudinary.<\/p>\n\n\n
Time to create the CloudinaryUploadWidget<\/strong><\/a> file. This file will have a component that we\u2019re injecting into the LeftSideBar<\/strong> component. The purpose of this component is to add the Cloudinary Upload widget for the user to upload images to the Cloudinary cloud. Make sure to enter your cloud name.<\/p>\n\n\n
Now, you\u2019ll create a LeftSideBar<\/strong><\/a> component. This component will be in charge of handling the logic for adjusting the settings of the text, including the color, size, position, and font family.<\/p>\n\n\n