Chat Mockup
Build a realistic WhatsApp, iMessage, Instagram, Telegram, Messenger, Discord, Slack or Android chat — bubbles, ticks, reactions, voice notes and images — and export it as a crisp PNG.
How to Use Chat Mockup in 3 Steps
Pick the app and the people
Choose WhatsApp, iMessage, Instagram, Telegram, Messenger, Google Messages, Discord or Slack. Type the contact’s name and status and drop in avatars if you want them.
Write the messages
Add a message per line of the conversation: who sent it, the text (emoji work), the time, delivered/read ticks, a reaction — or switch a message to an image or a voice note.
Export the PNG
The preview updates as you type. Click Export PNG for a 2× or 3× image, then download it or copy it straight into a document or post.
Chat Mockup — Frequently Asked Questions
Is any of this sent to a server?
No. The chat is rendered as HTML in your tab and converted to a PNG on a canvas in the page. Names, messages and avatars never leave your device.
How close is it to the real apps?
Colours, bubble shapes, ticks, timestamps, the status bar and the composer follow each app’s current design, using the system UI font like the apps do. It is a mockup for presentations, tutorials, memes and UX work — not a tool for deceiving people; please label fabricated screenshots as such.
Can I add photos and voice notes?
Yes — change a message’s type to Image and upload a picture, or to Voice note and set a duration; it draws a waveform bubble like the real apps.
Which platforms show read receipts?
WhatsApp and Telegram show grey/blue double ticks, Google Messages shows “Delivered / Read”, iMessage shows “Delivered” or “Read” under your last bubble, Messenger and Instagram show the seen avatar. Discord and Slack have no receipts, so the option is hidden there.
Why is the export sharp but the text size looks different from my phone?
The mockup is laid out at 390 CSS px (an iPhone-class width) and exported at 2× or 3× so it is crisp. Your phone may use a larger system text size; the proportions match the default setting.
Can I remove the Toolity credit?
Yes — untick Show “Made with Toolity.in” credit under Settings before exporting.