iMessage Generator
Write a conversation and get the iOS Messages screen built around it — blue and gray bubbles, contact header, timestamp, delivery label, and status bar. Switch to dark, add a typing indicator, and export at true iPhone resolution. Made for tutorials, social posts, and app storyboards.
What this is for
A messages thread is one of the most recognisable interfaces on the phone, which is exactly why it turns up so often in content. Course creators use it to show a conversation flow, product teams drop it into storyboards and UX mockups, and marketers use it to illustrate an example exchange in a deck or a social post. Rebuilding that screen by hand is fiddly, and recording a real phone means using real contacts.
This renders the screen around a script you write, so you control every line and nothing on it is a real person’s message.
Writing a thread that reads right
- Keep messages short. Real texting is a handful of words at a time. Long paragraphs in a bubble are the fastest tell that a thread was written rather than sent.
- Let both people talk. A run of five of your own bubbles with no reply looks off. Alternate sides with the toggle beside each message.
- Use the delivery label deliberately. "Delivered" sits under the last message you sent; "Read" implies the other person has opened it. Pick the one that matches the moment you’re depicting.
- The typing indicator is a mid-conversation beat. Turn it on when the story is that you’re waiting on a reply.
Details that make it look right
- Blue is iMessage, green is SMS. The color is not cosmetic — it tells the viewer whether the other person is on an iPhone. Match it to the story you’re telling.
- Bubbles group. Consecutive messages from the same person tuck together, and only the last one in a run carries the tail. This tool handles that automatically.
- Dark mode is common in screenshots, and often reads better in a feed than a bright white thread.
Questions
What is this for?
Writing tutorials, social content, app storyboards, UX comps, and marketing examples that need a Messages screen rendered around your own script — without screen-recording a real phone or rebuilding the interface in a design tool.
How do I write the conversation?
Type each message on its own row and use the toggle beside it to set who said it — you (blue, right) or the other person (gray, left). Add a message adds the next row and flips the side automatically, and the up and down arrows reorder them.
Can I switch the blue bubbles to green?
Yes. The bubble style dropdown switches between the blue iMessage look and the green used for a standard SMS text, which renders differently across the interface.
What resolution does it export?
Three times the logical screen size, matching what iOS writes on that model — 1179 × 2556 on an iPhone 15 or 16, up to 1320 × 2868 on a 16 Pro Max.
Does my conversation get sent anywhere?
No. The tool runs entirely in your browser and there is no server behind it. What you type stays in the page and disappears when you close the tab.
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- iPhone Photos Screenshot GeneratorDrop in a photo, get a pixel-accurate iOS Photos screen
- Android Photos Screenshot GeneratorThe Google Photos viewer, built around your own image
- iPhone Notes Screenshot GeneratorTurn any block of text into an iOS Notes screen
- iPhone Lock Screen GeneratorBuild an iOS lock screen around your own wallpaper
- Android Text Message GeneratorThe Google Messages screen, built around your own conversation
- Samsung Gallery Screenshot GeneratorThe One UI Gallery viewer, built around your own image
- Samsung Lock Screen GeneratorBuild a One UI lock screen around your own wallpaper
- Samsung Text Message GeneratorThe Samsung Messages thread, with its tinted bubbles
- Samsung Notes Screenshot GeneratorTurn any block of text into a Samsung Notes screen
- Marked Safe Meme GeneratorThe classic marked-safe post, built around whatever you survived
Related reading
- What Every Icon in the iPhone Status Bar Means5G UC, 5G UW, LTE, the orange dot, the arrow, the crescent moon. A plain-language guide to every symbol iOS puts along the top of your screen.
- iPhone Screenshot Sizes for Every ModelThe exact pixel dimensions iOS writes when you take a screenshot, model by model, plus how points and pixels relate and why the numbers are what they are.
- How to Make Phone Mockups Without Figma or PhotoshopA practical walkthrough for putting a photo or design inside a realistic phone screen when you don't have a design tool, a license, or twenty minutes to spare.