Useful Drawer

Facebook Messenger Mockup

Write a Messenger thread, both sides, and download it as a phone screenshot at the real pixel size. Typing dots, the seen picture, light and dark.

Unofficial mockup tool. Useful Drawer is not affiliated with, endorsed by, or sponsored by Meta Platforms, Inc., and Messenger is their trademark. Every interface element here is drawn from scratch rather than taken from their application. See our terms.

The details that make it read as Messenger

  • Runs of bubbles join up. Send three messages in a row and the inner corners square off, so the stack reads as one person talking rather than three separate messages.
  • Seen is a picture, not a word. Messenger puts the reader's tiny profile picture under the last message you sent. That one detail is what people recognise.
  • The status line under the name. Active now, active two hours ago, or nothing at all.
  • Typing dots at the bottom of the thread, with the contact's picture beside them.

It exports as a screenshot, not a picture of a phone

Pick the phone and the file comes out at that device's real pixel dimensions, with no frame drawn around it. That is what makes it usable in a help article, an app store listing or a slide: it looks like something taken off a phone, because it is the same size as one.

Everything stays on your computer

The screen is drawn in the page and exported by your own browser. A profile picture you add is read from your file with the browser's file reader. Nothing is uploaded, because there is no server here to receive it.

What it is for, and what it is not for

Tutorials, support documentation, app store screenshots, product demos, design mockups, and invented examples. All fine.

Inventing messages from a real person to mislead someone is not. A fabricated screenshot is not evidence of anything, and depending on what it is used for it can be defamation, fraud or harassment. The example here is a made-up conversation for exactly that reason.

Questions

How do I write both sides of the conversation?

Each row in the conversation editor is one bubble, with a toggle for who said it. Adding a message alternates the side automatically, because that is the usual back and forth, so most threads need nothing but typing. You can reorder or delete any row.

Why is there a tiny picture under the last message?

That is how Messenger shows a message has been read: the other person's profile picture appears under the last thing you sent, rather than the word Read. It is the detail that makes a Messenger thread recognisable at a glance, and you can switch it off.

What size does it export?

At the real pixel size of the phone you pick, so it looks like a screenshot from that device rather than a picture of one. The button shows the exact dimensions before you click it.

Does my profile picture get uploaded?

No. It is read from your own file with the browser's file reader and drawn straight into the preview. There is no server here to upload it to.

Can I use this to fake a conversation with a real person?

You can type anything into it, the same as any image editor, and that does not make it lawful. Inventing messages from a real person to mislead someone can be defamation, fraud or harassment depending on what you do with it, and a fabricated screenshot is not evidence of anything. Use it for mockups, tutorials, product demos and invented examples.

Other chat mockups in the drawer: iMessage, Google Messages and Samsung Messages.

What would make this tool better? A device that's missing, a detail that looks wrong, an option you went looking for and didn't find — all of it is useful. Send a note.

More in Phone & App Mockups

See the collection