Skip to content

Want to ship a quick banner maker without wrangling a custom canvas stack? In this post, you’ll build a React-based Image Text Overlay Generator powered by Cloudinary.

Notifications You must be signed in to change notification settings

cloudinary-devs/Cloudinary-TextOverlay-Generator

Repository files navigation

Text Overlay Generator

Install

Clone or fork this repo

[email protected]:cloudinary-devs/Cloudinary-TextOverlay-Generator.git

Usage

Install all the dependencies

npm i

Cloud Name

Inside of the App.tsx file, change the uwConifg to reflect your actual Cloudinary cloud name

const uwConfig = {
    cloudName: "ENTER YOUR CLOUD NAME HERE",
    uploadPreset: "upload-images",
    sources: ["local"],
    multiple: false,
    tags: ["text-overlay"],
  };

Upload Preset

Create a upload preset with the name "upload-image". This present should have the following configuration:

  • overwrite:false
  • use filename:true
  • unique filename:false
  • type:upload
  • access mode:public
  • unsigned

Run the app

Run the React vite server by running the following commnad:

npm run dev

About

Want to ship a quick banner maker without wrangling a custom canvas stack? In this post, you’ll build a React-based Image Text Overlay Generator powered by Cloudinary.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published