CodeKitHubWhat Is This Tool?
The Custom Chat Generator is a browser-based mockup tool for building a chat screenshot that isn't locked to one real platform's branding. Instead of a fixed brand color, you get a color picker for the "sent" bubble and another for the "received" bubble, so you can match a fictional app, a hypothetical UI concept, or just whatever colors fit your meme or presentation.
This is useful when you want a chat mockup for a story, a wireframe, or a joke about a made-up app, and don't want the recognizable branding of a specific real messenger to distract from the point.
For entertainment and design use only: this tool is built for jokes, memes, skits, presentation slides, UI/UX prototypes and social media content. It must never be used to fabricate fraudulent evidence, harass or defame someone, or impersonate a real person's actual messages — doing so can be illegal depending on your jurisdiction and is strictly against the intended use of this tool.
Nothing you type ever leaves your device — the whole conversation is rendered with the HTML Canvas API directly in your browser, and the PNG is generated and downloaded locally. There is no server upload, no account and no tracking of your message content.
Why Use It?
- You're writing a comic strip or webtoon panel that shows a text conversation between two characters in your own fictional app — not iMessage or WhatsApp — and need bubble colors that match your story's world instead of a real brand.
- A client asked for a chat-UI mockup in a pitch deck and your product doesn't exist yet — build a screenshot with your actual planned brand colors instead of showing a real messenger's interface.
- You're making a meme where the joke depends on nobody recognizing which app it's "from" — a generic, custom-colored chat bubble keeps the focus on the punchline instead of the platform.
- A UX designer needs to show stakeholders how a chat feature will look with the product's actual color palette applied, before a single line of real front-end code is written.
- You want to recreate a specific chat aesthetic from a show, game, or fictional universe (e.g., a sci-fi terminal chat) where the colors don't match any real messaging app at all.
- 100% local rendering — your conversation text never touches a server.
How to Use
- Set the contact name, status text and pick dark or light theme for the surrounding chrome.
- Pick a sent-bubble color and a received-bubble color using the two color pickers.
- Upload a photo for the avatar, or leave it as a colored circle with initials.
- Add message rows: type the text, pick a side (them/me) and a timestamp.
- Adjust the status bar (time, battery, signal) to taste.
- Watch the phone-shaped preview update live, then click "Download PNG" to save the image.
Example
Input
Contact: "Alex" · Sent bubble: purple · Received bubble: light gray · Message 1 (them): "Are we still on for tonight?" · Message 2 (me): "Yes! See you at 8 😊"Output
A 375×812 PNG image showing a chat screen with a light-gray bubble on the left holding the first message, and a purple bubble on the right holding the reply — using exactly the colors you chose.The image is generated instantly in the live preview canvas and downloads with a single click — no waiting, no upload.
What you can customize
- Contact name, status text and dark/light theme for the chrome.
- Sent-bubble and received-bubble colors, picked independently.
- Avatar: upload a real photo (cropped to a circle) or pick a fallback color.
- Unlimited message rows, each with its own text, side (them/me) and timestamp.
- Phone status bar: time, battery percentage and signal strength.
Custom Chat Generator vs. platform-specific chat generators
| Situation | Best tool |
|---|---|
| Need it to look like a real WhatsApp/iMessage/WeChat screenshot | Use that app's dedicated chat generator instead |
| Building a mockup for a fictional or unreleased app | Custom Chat Generator — pick your own bubble colors |
| Making a meme where the app shouldn't be recognizable | Custom Chat Generator — no platform branding |
| Matching an existing brand or design system's palette | Custom Chat Generator — full color picker control |
| Illustrating a specific real platform's UI quirks (checkmarks, read receipts) | That platform's dedicated generator, since this tool doesn't replicate app-specific UI details |
Responsible use
This generator exists to make it easy to create clearly fictional chat images for humor, storytelling and design work. It is not a tool for fabricating evidence, staging harassment, or misleading anyone into thinking a fake conversation is real. If you plan to share an image made with this tool, consider adding context (like "fake" or "mockup") so viewers understand it is not an actual conversation.
Frequently Asked Questions
Is it legal or ethical to use this tool?
The tool itself is legal to use for entertainment, mockups, presentations and design work. What is not legal or ethical is using the generated image to deceive someone — for example presenting it as a real conversation to commit fraud, to harass or defame a person, or to impersonate someone's actual messages. Please only use this for clearly fictional or illustrative purposes.
Does the tool upload my messages or photo anywhere?
No. Every message, name, photo and setting you enter stays in your browser's memory and is drawn directly onto a canvas element using JavaScript. The PNG file is generated and downloaded on your device — nothing is ever sent to any server.
Should I use this or one of the platform-specific chat generators?
If your mockup needs to look like a specific real app — WhatsApp, Telegram, Messenger, Signal, WeChat or LINE — use that app's dedicated generator so the colors, checkmarks and header style match what viewers expect. Use this Custom Chat Generator instead when you want a chat mockup for a fictional app, a wireframe, or content where you don't want any single real brand's look, and would rather pick the exact bubble colors yourself.
Can I upload a real photo as the avatar?
Yes. Click "Upload photo" to use any image from your device as the contact's avatar — it's cropped to a circle automatically. If you skip this, the avatar falls back to a colored circle with the contact's initials. The photo is only used locally in your browser and is never uploaded anywhere.
What image size does it export?
The preview and exported PNG use a phone-screen aspect ratio (375×812 by default), which looks natural when shared on social media or embedded in a presentation.
Is there a limit to how many messages I can add?
No — you can add as many message rows as you like. Keep in mind that a very long conversation will make the exported image tall and may require more scrolling in the preview, so for a screenshot meant to be read at a glance, 6-10 messages usually reads best.
Can I set different timestamps for each message, or does it auto-fill them?
You set the timestamp for each message row individually — the tool doesn't auto-generate or auto-increment times for you. This gives you full control to make timestamps look sequential and realistic, or deliberately inconsistent if that fits your story.
Can I make one side of the conversation use a gradient or two-tone bubble instead of a flat color?
The built-in color pickers set a single flat color per side. If you need a gradient look, generate the PNG with your closest flat color, then use an image editor to add a gradient overlay afterward — the tool itself only outputs solid bubble colors.
Does the tool save my chat design if I close the tab?
No — since nothing is uploaded or stored on a server and the design lives only in your browser's memory for that session, closing or refreshing the tab clears your work. Download the PNG before navigating away if you want to keep it, and consider taking a note of your color choices if you plan to make a similar design again later.
Can I use this to prototype a chat UI for actual development, not just a mockup image?
It's built for producing a static image, not exportable code — there's no CSS or component export. Designers commonly use the PNG as a visual reference to hand to developers or paste into a Figma/design file, then implement the actual chat UI separately in code.