CodeKitHubWhat Is This Tool?
The Messenger Chat Generator is a browser-based mockup tool that recreates Facebook Messenger's interface — its signature blue outgoing bubbles with rounded corners, the header bar with contact name and active-status line, and the phone status bar — so you can type your own conversation and export it as a shareable image.
Messenger's outgoing bubbles use a distinctive solid blue, and this generator matches that look by default, while its light/dark theme toggle switches the surrounding chrome to match either of Messenger's two appearance modes.
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 making a meme out of a ridiculous group-chat exchange and want the classic blue Messenger bubbles for authenticity — type both sides, adjust timestamps, and export the PNG in under a minute.
- A product team is reviewing a new in-app messaging feature and needs a comparison screenshot styled after Facebook Messenger so stakeholders instantly recognize the reference UI without a written explanation.
- You're illustrating a short story or screenplay scene that happens over a Messenger thread and need a believable screenshot for a mood board or pitch deck, not just a text excerpt.
- You want to show what a read-receipt "seen" status looks like right after a message versus one still unread, to explain a plot beat or UX detail — build both states and compare them side by side.
- 100% local rendering — your conversation text never touches a server.
How to Use
- Set the contact name, status text (e.g. "Active now") and pick dark or light theme.
- 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.
- For your own messages, choose the read-receipt status.
- 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" · Status: "Active now" · Message 1 (them): "Are we still on for tonight?" · Message 2 (me, read): "Yes! See you at 8 😊"Output
A 375×812 PNG image showing a Messenger-style screen: a header with "Alex" and "Active now", a light gray bubble on the left with the first message, and a rounded blue bubble on the right with the reply.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.
- 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.
- Read-receipt status per message you send.
- Phone status bar: time, battery percentage and signal strength.
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.
Messenger's bubble style vs. other chat apps
Facebook Messenger has one of the most recognizable message bubble treatments among major chat apps — the solid blue gradient-free outgoing bubble is distinct even at a glance, which is why getting the color and shape right matters for a convincing mockup.
| App | Outgoing bubble | Distinctive detail |
|---|---|---|
| Messenger | Solid blue, fully rounded | "Active now" / "Active Xm ago" status line under the name |
| Light green, slightly rounded with a tail | Double gray or blue checkmarks for read receipts | |
| iMessage | Blue with a tail, gray incoming bubbles | "Delivered" / "Read" text under the last message |
| Signal | Blue, similar shape to Messenger but different header chrome | Disappearing-message timer icon when enabled |
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 the WhatsApp / Signal chat generator instead?
If the scene you're mocking up is specifically set on Facebook Messenger — with its blue bubbles and "Active now" status line — use this one so the chrome matches. If you just need a generic messaging screenshot for a meme without the Messenger branding, the Custom Chat Generator lets you pick your own bubble colors instead; if the scene is meant to look like WhatsApp or Signal specifically, use those dedicated generators so the platform details (colors, checkmarks, header style) match what viewers expect.
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.
Can I show the "Active now" status changing to a last-seen time?
You set the status line manually as free text, so you can type "Active now," "Active 5m ago," or any wording Messenger uses — the tool doesn't automate the transition, but you can generate two versions to show a before-and-after.
Does it support emoji reactions on individual messages, not just in the text?
The tool focuses on message bubbles, timestamps and read receipts rather than tap-to-react emoji overlays. You can still type emoji directly into any message's text, which covers most meme and mockup use cases.
Can I build a long scrolling conversation with many messages?
Yes — there's no cap on the number of message rows you can add, so you can build a lengthy back-and-forth thread if the scene calls for it.
Will the read-receipt marker look right if I mark a message as unread?
Yes, the read-receipt toggle is per-message, so you can leave your own sent messages marked unread to show a message that hasn't been seen yet, or mark it read to show the opposite.
Is the exported image editable afterward, like in Photoshop?
The PNG is a flattened image, not an editable layered file, so further edits need to happen in an image editor. If you need to change text after exporting, it's usually faster to adjust it here and re-export.