How to create a Discord conversation mockup in four steps
- Name the channel. Put the channel in Contact → Name and it renders with a
#prefix in the header, with the topic line beside it. A short lowercase word with dashes looks the most like a real server. - Add the members. Give each participant a username and a colour standing in for a Discord role — greens, pinks, oranges and blurple are all in the palette. Three to five speakers is the sweet spot, since real servers carry many lurkers and few talkers.
- Write the messages. A sender dropdown on each message lets the conversation weave between members. Discord's grouping rule does the visual work: consecutive lines from one person share a single 40px avatar and username at the top, with the rest indented beneath and no repeated header — and your own posts stay on the left like everyone else's.
- Export. Discord is a desktop-shaped interface, so export at the width your channel really renders rather than thinking in phone sizes: 1x for a quick check, 2x for most uses, 3x when the dense row layout has to stay legible at large sizes. There is no handset shell by default, because a real Discord capture has none — turn Phone frame on only if you deliberately want the device look.
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.
Intent governs everything on this site. Parody, illustration, teaching and design are all fine uses of a mockup; a fabricated conversation used to deceive someone, to harass a person, to impersonate a community, or to fake evidence is not, and we do not want that traffic. ChatMock offers no bank, government, medical or legal templates — the Acceptable Use Policy holds the whole boundary.
The channel stays on your device
The server name, channel name, usernames and messages are all rendered with plain HTML and CSS in your browser, and the PNG is generated locally. Nothing is sent or logged, so a conversation full of role colours and channel names never leaves the machine it was typed on — pull the plug after loading and it keeps working.
Other generators
Discord is the odd one out among the ChatMock tools, so it is worth contrasting: the group chat generator handles multi-person threads that do use bubbles and coloured names, and the Telegram chat generator shows what a two-state checkmark looks like where Discord has none. The blog compares the layouts in more depth.
For a deeper walkthrough of the details above, read the full Discord message screenshot guide on the blog.
Frequently asked questions
Does the Discord chat generator cost anything?
No. There is no signup, no email wall, no limit on mockups and no watermark on the file — role colours, avatars and image attachments are all free to use.
Why are Discord messages not in bubbles?
Because the real app does not use them. Discord renders every message as a full-width row: a 40px avatar, a coloured username with a timestamp, then the text underneath, with no left/right alignment at all. Showing Discord as blue-and-grey bubbles means the generator copied WhatsApp or iMessage, and anyone who uses the app will spot it instantly.
Why is my own message on the left as well?
That is how Discord actually behaves — everyone reads the same left-to-right column, and your messages are not pushed to the right. Right-aligning your own posts is the quickest way to expose a fake Discord screenshot.
Can each person have their own role colour?
Yes. Every participant gets a colour that stands in for a Discord role, drawn from a palette that includes the familiar greens, pinks, oranges and blurple. Assign one per member to match the roles in your scene.
What happens to the avatar on a run of messages?
Discord groups consecutive messages from the same person: the avatar and username appear once at the top, and the following messages indent beneath them with no repeated name. The renderer applies that grouping automatically so a fast back-and-forth does not look like a wall of headers.
Does the channel name or my messages ever reach a server?
Never. The channel is rendered inside your browser and the PNG is encoded on your own device, so the channel name, the usernames and the messages stay there. Cut your connection after loading the page and the editor will carry on without noticing.
What does the timestamp next to a username look like?
It reads in Discord's own style — something like Today at 9:32 — and sits beside the username rather than inside or under the message. That placement is one of the small things that separates a realistic row layout from a sloppy one.
Can I use Discord mockups commercially?
For legitimate work — videos, thumbnails, presentations, teaching, fiction, design — yes. Deceiving someone, impersonating a person or community, or fabricating evidence is not permitted, and the Acceptable Use Policy lays out the line.