- Four canvas types defined: chat page, lock screen, banner, DM list.
- Tick state modelled per message (sent / delivered / read).
- Timestamp moved inside the bubble with a reserved last-line tail.
WhatsApp-Style Chat Generator
Green outgoing bubbles, double ticks, wallpaper handling and the four canvas types people actually screenshot: chat, lock screen, notification banner and direct-message list.
This layout uses documented starting measurements. It is not yet matched to a device screenshot the way the iMessage layout is.
Free download, watermarked
The free tier gives you a downloadable PNG with a small “Scenemock” watermark in the corner. No signup, no upload, no queue. When you need the watermark gone, a 2× export or a batch of images, see pricing.
WhatsApp-Style Chat Generator mockups render entirely in your browser: the text you type is never sent to a server, never stored and never attached to an account.
How to make one in three steps
Choose a canvas
Chat page is the default. The lock screen, notification banner and DM list layouts each drop some chrome and keep the rest, so the image matches what a screenshot of that screen would show.
Write the thread
One message per line, “me:” for the green side. Tick state follows the last outgoing message: single for sent, double for delivered, and a blue double tick once read.
Export
Download a watermarked PNG. The preview above uses exactly the same renderer as the export, so what you see in the tab is what lands in the file.
Four canvases and what each one keeps
A chat mockup is usually a screenshot of one of four screens, and they are not interchangeable. The conversation page has a header and a composer; the lock screen has a clock and no composer; a banner has neither; the DM list has rows instead of bubbles. Keeping those differences in one canvas type is what makes the image read as the right screen.
| Canvas | Subject | Keeps | Drops |
|---|---|---|---|
| Chat page | Full thread | safeTop, header, composer | none |
| Lock screen | Notification on a dimmed wallpaper | status bar, clock | header, composer |
| Banner | One notification over a home screen | status bar, banner paddings | header, composer, thread |
| DM list | Inbox rows | status bar, list row height | bubbles, ticks, composer |
Green bubbles and their geometry
The outgoing bubble in this family is pale green in light mode and deep teal-green in dark mode, with near-black text in both. It is text-left aligned inside the bubble with 18points of horizontal padding and a corner radius of 7.5 points — noticeably squarer than an iMessage bubble. A small pointer tail attaches to the outer bottom corner of the first bubble in a run; later bubbles in the same run are square at the edges that touch.
Ticks: single, double, blue double
Tick state is a property of the outgoing message, not of the conversation, because a thread can have a delivered message above a read one. Single tick means sent. Two grey ticks mean delivered. Two ticks in the read colour (a light blue that has to stay legible on both green and teal) mean read. The renderer takes a tick style per message and draws all three from the same vector, so the stroke weight is consistent across the thread.
Wallpapers and how they are dimmed
This family uses a patterned wallpaper behind the thread. Light mode keeps it at full brightness; dark mode multiplies it toward #0B141A with a dim of 0.35; the black theme pushes it to 0.6 on top of #000000. The dim is applied before any bubble is drawn, which is why bubble edges stay crisp while the wallpaper recedes.
Timestamps inside the bubble
Unlike the iOS layouts, the timestamp sits inside the bubble at the bottom right, and the tick sits beside it. That forces the text wrapper to reserve width on the last line: if the final line would run into the time, the line moves up instead of overprinting. The wrap routine does this with a reserved tail of time width plus twelve points.
Header and subtitle
The head line carries the contact name, and the second line can show presence text such as “online”. Both use the same ink and a header height of 56 points. We keep the avatar circular and drawn in-house.
Measured values for this layout
Values below come from the shared platform data; the light wallpaper behind the thread is#EFEAE2 and the dark page is #0B141A.
| Parameter | WhatsApp-style | Messenger-style |
|---|---|---|
| Canvas (device px @3×) | 1080 × 2400 | 1080 × 2400 |
| Logical size (pt) | 360 × 800 | 360 × 800 |
| Safe top (pt) | 32 | 32 |
| Status bar height (pt) | 24 | 24 |
| Status bar | android · signal, wifi, battery | ramless · signal, wifi, battery |
| Island / cutout (pt) | — | — |
| Calibration | B — document values, pending device pass | B — document values, pending device pass |
| Header height (pt) | 56 | 56 |
| Bubble max width | 75% | 70% |
| Bubble padding x / y (pt) | 18 / 12 | 18 / 12 |
| Bubble radius (pt) | 7.5 | 18 |
| Bubble tail | point | round |
| Text size / line height (pt) | 14.2 / 19 | 15 / 20 |
| Receipts | double tick | none |
| Composer placeholder | Message | Aa |
| Timestamp position | inside | inside |
| Outgoing / incoming bubbles (light) | #DCF8C6 / #FFFFFF | #0084FF / #F0F0F0 |
| Outgoing / incoming bubbles (dark) | #005C4B / #202C33 | #0084FF / #3A3B3C |
| Wallpaper dim (light / dark / black) | 0 / 0.35 / 0.6 | 0 / 0.35 / 0.6 |
| Bubble alpha (light / dark / black) | 1 / 0.95 / 0.9 | 1 / 0.95 / 0.9 |
Canvas sizes are device pixels at 3×; the iMessage canvas is 1206 × 2622, i.e. 402 × 874 points on the calibrated iPhone 17 Pro (iOS 26.4). All other measurements are device-independent points. The 390 × 844 / 47 pt layout from the first spec draft is kept as an uncalibrated variant and is not the default.
Starting values, pending device calibration: TODO(calibrate).
WhatsApp-style layout update log
What changed in the green-bubble surfaces and the four canvas types.
Frequently asked questions
Can the double ticks be set to read?
Yes. Tick style is a parameter of the renderer: sent shows one tick, delivered shows two grey ticks, and read shows two ticks in the read colour. It is set automatically from message state in the demo; per-message control arrives with the full editor.
Can I make a lock screen or a notification?
The layout data covers four canvases — chat page, lock screen, notification banner and DM list. Only the chat page is wired to the editor in this release; the others reuse the same renderer with different chrome.
Does it support group chats?
Yes. Add a third person and messages from different senders break the bubble runs; only the first message of a run shows the sender's name.
Can I use my own wallpaper?
Not in this release. Wallpaper handling stores a solid value plus a dim factor per theme; image and blurred wallpapers are modelled in the renderer's data but are not exposed in the editor yet.
Is this affiliated with the messaging app it imitates?
No. The site uses “WhatsApp-style” deliberately, draws every element itself and does not include any vendor logo or screenshot.