MemeChat

A static front-end tool for generating chat screenshots and meme-style images.

Vue 3 - Tailwind CSS - html-to-image - Static Frontend

Overview

MemeChat is a lightweight static web app focused on chat image generation.
You can edit the avatar, name, message text, and canvas background, then export the result as a high-resolution PNG.

Features

• Switch between multiple chat platform styles
• Upload an avatar with a file picker
• Drag an image anywhere onto the page to replace the avatar
• Edit the name and message in real time
• Customize the canvas background color
• Preview with zoom controls
• Export a high-resolution PNG

Tech Stack

• Vue 3
• Tailwind CSS
• html-to-image
• Native HTML / CSS / JavaScript

Getting Started

This project is fully static and does not require a build step.

1. Clone the repository.
2. Open index.html directly in your browser.
3. If you prefer, serve the folder with any static file server.

Example:

python -m http.server 8000

Then open:

http://localhost:8000

Usage

1. Choose a chat platform from the left panel.
2. Edit the avatar, name, message, and background color.
3. Drag an image onto the page or click the avatar upload control.
4. Click Export PNG to generate the final image.

Project Structure

webmeme/
|-- assets/     # Chat bubble tail assets
|-- css/        # Custom styles
|-- icon/       # Platform icons
|-- js/         # Vendored libraries
`-- index.html  # Main entry