🎨 Meme Captioner

A modern, beautiful web app for creating top-caption memes. Perfect for making Discord-ready images with customizable text styling.

🌐 Live Demo

✨ Features

• 🖼️ Multiple Input Methods

  • Drag & drop images
  • Paste from clipboard (Ctrl/Cmd + V)
  • Traditional file upload

• 🎨 Customizable Styling

  • Font size (20-200px)
  • Font weight (normal/bold)
  • Text color picker
  • Background color picker
  • Adjustable padding

• 📱 Modern Design

  • Beautiful gradient UI with glassmorphism effects
  • Fully responsive (mobile, tablet, desktop)
  • Smooth animations and transitions
  • Live preview updates

• 💾 Export

  • Download as PNG
  • Optimized for Discord sharing
  • Auto-scales large images (max 1200px width)

🚀 Quick Start

Using the Live App

Just visit willuhmjs.github.io/captioner and start creating memes!

Running Locally

# Clone the repository
git clone https://github.com/willuhmjs/captioner.git
cd captioner

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
open http://localhost:5173

🛠️ Development

# Install dependencies
npm install

# Start dev server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📦 Tech Stack

• Framework: SvelteKit with Svelte 5 (Runes mode)
• Language: TypeScript
• Styling: Vanilla CSS with modern features
• Deployment: GitHub Pages (static site)
• Canvas API: For image manipulation and text rendering

🎯 How to Use

1. Add an Image

   • Drag and drop any image onto the page
   • Or paste an image from your clipboard
   • Or click "Choose Image" to upload

2. Add Your Caption

   • Type your meme text in the caption box
   • The preview updates in real-time

3. Customize (Optional)

   • Adjust font size with the slider
   • Change font weight (normal/bold)
   • Pick custom text and background colors
   • Adjust padding around the text

4. Download

   • Click "Download Meme" to save your creation
   • Share on Discord, Twitter, or wherever!

🌐 Deployment

This app is automatically deployed to GitHub Pages via GitHub Actions:

• Trigger: Push to main branch
• Build: SvelteKit static build
• Deploy: Automated deployment to GitHub Pages

The workflow is defined in .github/workflows/deploy.yml.

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

📄 License

MIT License - feel free to use this for your own projects!

💡 Credits

Created by Will

Built for classic caption-bar memes with modern web technologies.

---

Made with ❤️ and SvelteKit