Slack Chat Mockup
Mock up a Slack-style channel or DM: people, bot badge, bold and code text, reactions, thread line, light or dark. Every PNG carries a FindUtils.com watermark.
- Free, no sign-up
- Updated
- Reviewed by Olgun Ozoktas
Conversation
People (3 of 8)
Click an avatar to pick a picture; without one, the initials are shown on a colour. Removing a person hands their messages to the first person in the list.
Messages (6)
Formatting: *bold*, _italic_ and `code`. Press Enter for a new line.
Messages in a row from the same person are grouped: only the first shows the avatar, name and time.
- Message 1
- Message 2
- Message 3
- Message 4
- Message 5
- Message 6
Appearance
Preview
Updates as you typeStaging is green and the changelog is written.
npm run build on the release branch and post the artifact sizes.release/2.4 · 128 tests · 4m 12sImage includes FindUtils.com watermark
How to Make a Slack-Style Chat Screenshot
-
Set the conversation
Type a workspace name, then choose Channel and enter a channel name such as launch, with a member count, or choose Direct message and pick the person the conversation is with. -
Add the people
Keep 1 to 8 people. Give each one a name and, if you like, a picture from your device; without one, the initials are shown on a colour. Tick Bot for an app account so its name gets an APP badge. -
Write the messages
For each message pick the sender, type a time such as 10:42 AM and the text, using *bold*, _italic_ and `code`. Add reactions from the emoji buttons and set their counts, turn on a thread line with a reply count and up to three faces, and move or delete messages with the buttons on each one. -
Choose the look and download
Pick the light or dark theme, show or hide the sidebar strip, check the live preview, then click Download Image to save a PNG. The image carries a FindUtils.com watermark.
Popular Use Cases
Product demos and landing pages
Documentation and help articles
Onboarding and training slides
Storyboards and pitch decks
Why use the Slack Chat Mockup?
The Slack Chat Mockup draws a Slack-style workspace window in your browser. Set a workspace name and either a channel, shown as a hash and a name with a member count, or a direct message with one person. Keep a list of 1 to 8 people, each with a name, an optional picture and an optional APP badge for a bot, and write messages with a sender, a time and text that supports *bold*, _italic_, `inline code` and line breaks. Messages in a row from the same person are grouped under one avatar and name, reactions appear as emoji chips with counts, and a message can carry a thread line with a reply count, up to three small faces and a last-reply note. A composer box sits at the bottom, and a narrow sidebar with the workspace initial, a few channels and direct messages can be shown or hidden. The mockup has its own light and dark theme.
Pictures you add are read by your browser and never uploaded. The download is a PNG with a FindUtils.com watermark, so the image is always marked as a mockup. The tool is not affiliated with Slack Technologies, draws no Slack logo, and uses the system font rather than Slack's typeface, so the result is Slack-like rather than identical.
For other messaging screenshots, try the WhatsApp Chat Generator, the iMessage Chat Generator or the ChatGPT Screenshot Generator.
How it compares
Taking a screenshot of a real workspace means blurring names, hiding channels and asking colleagues for permission. Recreating the window in a design tool takes much longer and has to be redone for every change. This tool gives you an editable conversation with made-up people: change a message, a reaction count or the theme and the preview updates at once.
It is a still image maker, not a copy of the app. It has no thread side panel, no file or image attachments, no huddles or calls, no link previews and no animation, and it exports a PNG only.
Tips for a Clear Chat Mockup
- Keep messages short. Chat reads best in one or two lines per message, the way people actually write in a channel.
- Put several messages in a row from the same person to get the grouped look, with one avatar and name over the whole run.
- Tick Bot for an integration account so the APP badge makes clear which messages came from software.
- Use `code` for commands, branch names and version numbers, and *bold* for the one phrase that matters.
- Choose the theme that matches the slide or page the image will sit on, and hide the sidebar when the image has to be narrow.
- Use invented names and pictures you are allowed to use; do not put real colleagues' names in a conversation they never had.