How to create a Discord conversation mockup in four steps
- Name the channel. Type the channel name into Contact → Name — it renders as
# generalstyle in the header, with your topic line next to it. Use a single lowercase word with dashes for the most authentic look, the way real servers are named. - Add the members. Each participant gets a username and a colour that mimics Discord role colours. Three to five speakers is the sweet spot for a convincing scene — real servers have many lurkers and few talkers.
- Write the conversation. Every message has a sender dropdown, so you can weave the dialogue between members. Discord groups consecutive messages from the same person: the avatar and username appear once, then the following messages indent underneath. The renderer reproduces that grouping automatically.
- Export. Pick 1x, 2x or 3x and hit Download PNG. Exports are plain screen captures by default — a real screenshot never includes the phone body. Tick Phone frame only when you want a device-mockup look for a thumbnail, slide or design.
What makes a Discord screenshot actually look real
Discord is the platform most generators get completely wrong, because its layout shares nothing with WhatsApp or iMessage. The values ChatMock uses, taken from the desktop app:
| Element | Dark mode (default) | Light mode |
|---|---|---|
| Chat background | #313338 | #ffffff |
| Message text | #dbdee1 | #313338 |
| Username (no role colour) | #f2f3f5 | #060607 |
| Timestamps / secondary text | #949ba4 | |
| Blurple (accent) | #5865f2 | |
| Message input | #383a40 | #ebedef |
Three structural details separate a real Discord screenshot from a fake one. First, there are no bubbles at all — messages are full-width rows, and your own messages are left-aligned exactly like everyone else's. Right-aligned blue bubbles in a “Discord” screenshot are an instant giveaway. Second, the avatar and username appear once per message group, with continuation messages indented below. Third, timestamps read “Today at 9:32” and sit next to the username, not inside or under each message.
Everything you can customise
- Channel name (renders with the # prefix) and topic line
- Unlimited members, each with a username, role colour and uploadable avatar
- Unlimited messages, reorderable, any sender
- Automatic message grouping with 40px avatars
- Image attachments, rendered Discord-style with rounded corners
- Date divider text
- Light and dark mode — dark is Discord's default look
- Status bar and optional iPhone-style phone frame
What people use Discord mockups for
Discord scenes show up wherever gaming and creator culture does: YouTube thumbnails and TikTok skits staged around a server conversation, community managers demonstrating how a welcome channel reads, educators building walkthroughs of classroom servers, and writers drafting group banter that would be tedious to describe in prose. The row-based layout is dense with information — usernames, colours, timestamps — which is exactly why a convincing one is hard to fake by hand and why the details above matter.
As everywhere on this site, the line is intent. Illustrating, parodying, teaching and designing are fine. Using a fabricated conversation to deceive someone, harass a person, impersonate a community or fabricate evidence is not — and there are no templates here for fake bank, government, medical or legal notices. The Acceptable Use Policy has the full boundary.
Why it runs entirely in your browser
Everything is rendered locally with plain HTML and CSS, and the PNG is generated on your device. Nothing is transmitted, stored or logged — which is why the editor keeps working if you switch off your wifi after loading the page, and why there is no database of staged conversations anywhere on our side.
Other generators
ChatMock covers the platforms people actually search for, one at a time: the WhatsApp chat generator, the iPhone text message generator, the group chat generator and the Messenger chat generator are all live. See the generator index for the full list.
For a deeper walkthrough of the details above, read the full Discord message screenshot guide on the blog.
Frequently asked questions
Is this Discord chat generator free?
Yes — no signup, no email wall, no daily limit and no watermark on the export. Every editing feature, including role colours and image attachments, is free, and PNG export works at 1x, 2x and 3x.
Why do Discord messages not look like chat bubbles?
Because they are not. Discord renders messages as full-width rows: a 40px avatar, a coloured username with a timestamp, then the message text underneath. There is no left/right alignment and no bubble shape. Generators that show Discord as blue-and-grey bubbles are copying WhatsApp or iMessage, and the result looks wrong to anyone who uses the app.
Why are my own messages on the left too?
That is correct behaviour. Discord does not right-align your messages — everyone in the channel reads the same left-to-right column. Right-aligning your own messages is the single fastest tell of a fake Discord screenshot.
Can I set custom username colours?
Yes. In the editor, each participant gets a colour, which mimics how Discord assigns role colours. The default palette includes the classic Discord greens, pinks, oranges and blurple; you can pick a different colour per member to match the roles in your scene.
Is my conversation uploaded to a server?
No. The mockup is rendered entirely in your browser, and the PNG is generated on your device and saved straight to your downloads. Channel names, usernames and messages never leave your computer — you can disconnect from the internet after loading the page and keep working.
What resolution can I export?
1x (390px wide), 2x (780px) or 3x (1170px). For thumbnails and blog posts, 2x is usually the sweet spot; use 3x when the screenshot will be zoomed into or printed.
Can I use the mockups commercially?
Yes, for legitimate creative work: videos, thumbnails, presentations, teaching material, fiction and design. You may not use them to deceive, defraud, harass, impersonate anyone or fabricate evidence. The Acceptable Use Policy has the full boundary.