WhatsAppFiction & humour
A morning of unread messages
Four chats waiting and the timestamps gone green with them, which is the detail that makes a WhatsApp list look like WhatsApp rather than any other inbox.
Use this templateWhatsApp mockupsInterface checked · v26.31.74
Fake WhatsApp chat list & inbox screenshot generator
Build the screen WhatsApp opens on \u2014 the list of conversations, with unread counts in green pills, timestamps that turn green with them, pinned chats and the All, Unread and Groups filter chips.
Open the WhatsApp editorFree · no account · PNG and video
Start from a WhatsApp example
Each one opens in the editor as an editable, fictional scene — names, timings and interface details already set. Change a word, or change everything.
WhatsAppSupport
Filtered down to Unread
The Unread chip selected instead of All. Useful for support articles about the filters, which is the part of the screen most people never touch.
Use this templateWhatsAppWork
An inbox with nothing owed
No badges anywhere, one pinned chat at the top. The everyday state, and the one worth having when the screenshot is about something else on the page.
Use this templateHow to make a WhatsApp mockup
Start from an example
The examples above cover the states people make: a morning of unread messages, the list filtered to Unread, and a quiet inbox.
Write the rows
A name, the last message and a time for each. Add or remove rows as you need — there is no fixed number.
Set what is waiting
An unread count turns the row green. The PINNED toggle draws the pin instead.
Pick a filter chip
Tap one to select it. Rename them if you want, or leave WhatsApp's three.
Export
PNG at 1x free, up to 3x on Pro, device frame optional, and onto a sized canvas if it is going into a video.
How the WhatsApp interface is put together
Our WhatsApp skin is rebuilt from the real interface in code rather than traced from a screenshot, so the details that make it recognisable survive at export resolution. Here is what those details actually are.
The timestamp turns GREEN when a chat is unread
This is the detail almost every fake WhatsApp inbox gets wrong. It is not only the pill that changes colour — the time above it goes green too. Set an unread count on a row here and both move together, because on the phone they always do.
Filter chips, not a search field
All, Unread and Groups as rounded pills under a large left-aligned title. Signal spends that same strip of screen on a search box and Telegram fills it with folders you name yourself, which is most of how you tell the three inboxes apart at a glance.
A pinned chat shows a pin where the badge would be
Pinned and unread never occupy the same corner. A row with a count shows the green pill; a pinned row with nothing waiting shows a small grey pin instead, in exactly the same place.
The separator starts at the text, not at the edge
An iOS table convention that WhatsApp follows exactly: the hairline between rows begins where the name begins, leaving the avatar column clear. Running it the full width is a small thing that reads as wrong.
The preview line carries the sender in a group
“Sofia: see you both there” rather than just the message. One field here, so type the prefix you want — that is how the real list shows you who spoke without opening it.
Five tabs, and Chats carries the total
Updates, Calls, Communities, Chats and Settings. The badge on the Chats tab is the sum of every unread count in the list and is worked out for you, so it cannot disagree with the rows above it.
What people use WhatsApp mockups for
- Product screenshots and app-store artwork
- Explaining unread, muted and pinned chats
- Scam-awareness and safety training
- Support and how-to documentation
- Storyboards for video and adverts
- Design portfolios and case studies
Questions about WhatsApp mockups
- Can I set how many unread messages a chat has?
- Yes — put a number on any row and the green pill appears, the timestamp turns green, and the total on the Chats tab goes up to match. Clear it and all three go back.
- How do I pin a chat?
- There is a PINNED toggle on each row. A pinned row draws a small grey pin where the unread pill would sit. WhatsApp leaves pinned chats where they are; Signal moves them into a separate group at the top, which its own generator does.
- Can I make a group chat row?
- Yes. Give the row a group name and write the preview with the speaker in front of it — “Sofia: see you both there”. That is exactly how the real list shows who spoke.
- Does dark mode work?
- Yes. The switch in the Appearance section moves the whole screen onto WhatsApp's dark surface, chips and separators included.
- Can I make it look like real people are messaging me?
- No, and our terms prohibit it. Putting invented messages from a named real person on a screen is impersonation. Parody, teaching, fiction and design work are fine — every example here uses invented people.
- Why is there no search bar?
- Because WhatsApp's list does not open with one. The strip under the title is where the filter chips live; the search field appears when you pull the list down, which is a different state of the screen and not the one this draws.
- Can I export it at 9:16?
- Yes. The download dialog places the mockup on a 9:16, 4:5, 1:1 or 16:9 canvas with a background and margin, and PNG exports at 1x free, or up to 3x on Pro.
Use these responsibly
Everything made here is simulated. SocialMock has no connection to WhatsApp and cannot read, send or alter a real message. Do not use a mockup to impersonate anyone, pass it off as a genuine screenshot, or present it as evidence in any legal, workplace or academic matter — see our Acceptable Use policy. For general information about legal risk, read is it legal to fake a screenshot? If you publish somewhere a viewer might mistake it for real, switch on the “Simulated” label before exporting.
Related generators
Browse all 36 appsBuild your WhatsApp mockup now
Click straight into the preview and type. Export when you are done — free at 1×, up to 3× on Pro.
Open the WhatsApp editor