Chat Mockup Generator — Free Tool
Lay out a conversation as an illustration for a slide, a case study or a tutorial. Add messages, choose which side each one sits on, name the speakers, pick light or dark and a bubble style, and export a crisp 2x PNG. Avatars are generated from initials, and no profile photos or verified badges are ever used.
Conversation
Avatars are generated from the names you type — initials on a colour. There is no photo upload and no profile lookup, so a mockup can never pass as a real chat with a real person.
A generic messenger look, on purpose — no app's exact interface is copied.
Messages
Preview
Exported at 2x resolution for retina screens.
Names are typed by you and avatars are generated from them, so no real profile photo or verified badge can appear. Nothing you type leaves your browser. Exports carry no label, so treat them as you would any convincing image: fine for slides, tutorials and support docs, not for passing off as a real conversation.
Features
- Build a conversation message by message — add, remove and reorder rows, and put each one on the left (them) or the right (you)
- A conversation title, light and dark themes, and three generic bubble styles: rounded, square and minimal
- Long messages wrap, bubbles grow to fit, and the canvas grows with them, so a twenty-line thread renders as cleanly as a two-line one
- Generated initials avatars — no photo upload, no profile lookup, no verified badge
- Runs entirely in your browser at 2x export resolution — nothing is uploaded, and no account is needed
Frequently asked questions
What should I know before sharing one of these?
That the export looks like a real screenshot. There is no label on it, so nothing in the image itself tells a viewer the conversation was typed rather than captured. A fabricated DM attributed to a named person is a well known misinformation format, so keep these to illustration work: slides, case studies, tutorials, portfolio pieces, and say plainly that they are mockups anywhere they could be mistaken for evidence. The tool leaves out the two things that most cheaply make a fake convincing, a real profile photo and a verified badge, but the rest is your call.
Why can't I upload a profile picture?
Because a real photo is what makes a fake conversation convincing. Avatars here are generated from the display name you type — initials on a colour derived from that name, so the same name always gets the same colour. There is no upload field, no way to pull an image from a handle or a profile, and no verified badge. For deck and tutorial work a placeholder avatar is what you want anyway: the point is the shape of the exchange, not whose face is on it.
Why doesn't it look exactly like a specific messaging app?
Two reasons. Copying an app's exact interface — its header, its icons, its precise bubble geometry — is a trademark problem, and it is also the part that makes a fabricated screenshot read as authentic. The three styles here are generic messenger looks that differ only in corner radius and accent treatment. They communicate "this is a conversation" without imitating anyone's product.
What should I actually use it for?
Illustrating a support flow in a slide, showing a sample customer exchange in a case study, drawing the before-and-after of a reply template in a tutorial, mocking up a DM campaign concept for a client, and building portfolio pieces. Anywhere you need to show the shape of a conversation rather than evidence that one happened.
Is anything sent to a server?
No. The image is drawn in your browser with a canvas and downloaded straight from the page. Nothing you type is uploaded, stored or logged, there are no network requests, and no account is needed.
