WeChat mockups for a billion-user platform
WeChat isn’t just a messaging app, it’s basically an operating system for over a billion people in China. Payments, social media, mini-programs, video calls, all inside one app. But the chat interface is where it started, and that’s what this tool recreates.
Green sent bubbles. White received bubbles. Square avatar thumbnails with rounded corners. Those distinctive speech bubble tails pointing toward each user’s avatar. Time stamps floating between message groups. The whole look is unmistakable to anyone who’s used WeChat, and now you can build it from scratch in your browser.
Setting up your conversation
- Type the contact name that appears in the header bar.
- Add messages, select whether each is sent or received.
- Set timestamps per message (they display as group separators like WeChat does).
- Upload avatars for both contact and yourself, or leave the colored initial placeholders.
- Toggle between light and dark modes.
- Click Download PNG to save your mockup.
Visual details that matter
- Green sent bubbles (#95EC69): that exact shade of WeChat green with black text
- White received bubbles: clean white with dark text, matching the real interface
- Square avatars with rounded corners: WeChat uses squares, not circles. This tool gets that right.
- Speech bubble tails: triangular pointers from each bubble toward the sender’s avatar
- Time group separators: timestamps appear between message groups, not on individual messages
- Dark mode: WeChat’s actual dark theme with green accent preserved
Real-world use cases
Cross-cultural business presentations. Your company is entering the Chinese market. You need to show leadership what customer communication on WeChat actually looks like. A mockup with realistic product inquiry conversations beats a paragraph of explanation.
Localization case studies. Working on a UX case study comparing messaging apps across cultures? WeChat’s unique design, square avatars, green bubbles, that specific layout, needs to be represented accurately. This tool nails those details.
Marketing materials for Chinese audiences. Creating ad mockups, social proof screenshots, or tutorial content that features WeChat? Build the conversation exactly how you need it. Control every message, every timestamp, every avatar.
Academic research. Studying messaging platform design or digital communication patterns? Screenshots of controlled conversations let you illustrate your points without privacy concerns.
Content creation. Making videos or articles about Chinese tech, social media comparisons, or messaging app reviews? Authentic WeChat screenshots add credibility and visual interest.
FAQ
Why are the avatars square instead of circular?
That’s how WeChat actually works. Unlike most Western messaging apps that use circular avatars, WeChat has always used square thumbnails with slightly rounded corners. This tool stays faithful to that design choice.
Can I upload custom avatars for both sides of the conversation?
Yes. There are separate upload buttons for your avatar and the contact’s avatar. Each crops to WeChat’s square format automatically.
Does this support Chinese characters?
The canvas renders whatever text you type, including Chinese, Japanese, Korean, emoji, and mixed scripts. The font stack includes PingFang SC for proper CJK rendering.
What’s the difference between light and dark mode?
Light mode uses WeChat’s classic gray background (#EDEDED) with white and green bubbles. Dark mode switches to a deep gray background with adjusted green and darker received bubbles, matching WeChat’s official dark theme.
Can I add voice message indicators?
The current version focuses on text messages with timestamps. Voice message bubbles and other media types are on the roadmap for future updates.