Caption Studio
Drag text anywhere on the image and it always stays readable.
BeginnerWeb appCreative8–16hAI-buildable 5/5no setupworth shipping
An image captioning tool with draggable, resizable text layers, outline and shadow controls, and export. The typography problem is real: text has to stay legible over an unpredictable background, which is what the stroke and shadow controls are actually for.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Load an image and add text layers
- Text layers drag, resize and rotate
- Font, size, colour, stroke and shadow are adjustable
- Text wraps within its layer bounds
- Layers reorder and can be deleted
- Export the composed image as PNG
- The composition persists across reloads
The interesting part
- Rendering text on canvas identically to how it previews in the DOM
- Rotation combined with drag handles that stay correctly positioned
- Exporting at source resolution rather than display resolution
Once it works
- Add sticker and emoji layers
- Add automatic contrast adjustment against the background
- Add templates for common formats
Suggested stack
reacttypescripttailwindcanvas-api