In this tutorial you will learn how to create a browser-based design tool where users can compose social media graphics. They choose a canvas size, add logos, shapes, icons and text, adjust styling, move elements around, and export a clean PNG. The goal is to build a practical, lightweight designer that can grow into a full creative platform later.

The idea is simple. React manages the editor interface, FastAPI handles secure API calls to fetch assets (from Brandfetch API and Iconify), and the native Canvas API renders the final PNG.

Exact Prompt to Use

Copy and paste this directly into Emergent:

Build a web-based social media design tool with a three panel layout: tools on the left, a scalable interactive canvas in the center, and element properties on the right. Use React, Tailwind and shadcn components.

Include preset canvas sizes for Instagram Post, Instagram Story and Twitter Post. Allow adding text, shapes, brand logos and icons. Implement dragging, resizing and rotation with correct scale compensation so the preview can be scaled down while the underlying coordinates stay accurate.

Create a FastAPI backend that proxies Brandfetch and Iconify requests. Never expose API keys in the frontend. When logos load, read natural width and height and store aspect ratio so resizing stays clean.

Export PNG files using the native Canvas API. Draw the background, shapes, images and text in order. Do not use html2canvas for logos or icons. Selection handles and UI controls must not appear in exported images.

Use toast notifications, set up backend CORS, and load all images with crossOrigin="anonymous". Use Promises so export waits for all assets to load before drawing

How the Tool Works

Users begin by choosing a canvas size. The preview fits the available space while keeping the correct ratio. Every element added to the canvas is fully interactive. Text can be edited directly. Shapes have adjustable size, color and rotation. Logos and icons come from external APIs but are loaded through your backend so they stay secure.

All elements snap to the scaled preview. Behind the scenes you track true coordinates so the final PNG exports at full resolution. When the user clicks download, you rebuild the entire composition on a hidden canvas and then export it.

Architecture Overview

React handles the editor and canvas interactions. Tailwind and shadcn provide styling and components.
FastAPI sits between the frontend and external services so no API keys ever reach the browser.
The Canvas API performs the final drawing step so the exported PNG always matches the design.

Key Features

• Users can switch templates instantly and the preview maintains correct proportions.

• Elements respond to drag and resize actions even when scaled.

• Logos load with transparency because you capture natural dimensions from the original image.

• Icons load as SVGs and render cleanly.

• Exporting generates a true full-size PNG that matches the design exactly.

Important Implementation Details

• Set crossOrigin to anonymous for every image or the export will fail.

• Store each image’s natural width and height as soon as it loads.

• Apply aspect ratio locking so users cannot distort logos.

• When handling drag or resize events, compensate for the preview scale in all coordinate math.

• Before export, clear any visible selection outlines so the PNG remains clean.

• Use Promises to ensure logos and icons finish loading before the final render.

Frequent Problems and Solutions

1. If logo search fails, confirm that Brandfetch is only called through the backend.

2. If elements appear stretched in exports, check your aspect ratio calculations.

3. If element positions look shifted, verify the scale factor used for drag calculations.

4. If gradients do not render, prepare a temporary rasterized version before drawing to canvas.

5. If PNGs appear empty, confirm that the export canvas uses the full resolution template size.

Why This Approach Works

Frontend handles editing. Backend handles secure API calls. Canvas API handles final output.
This keeps the system clean, predictable and efficient. You can add new templates, filters, brand kits or asset libraries without changing the core structure.

Sounds interesting? Here's an overview of the tool we created for you to look at!

We can't wait to see what else you add on to this.