Skip to content

Mockups

Slack Chat Mockup

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
    Reactions
  • Message 2
    Reactions
  • Message 3
    Reactions
  • Message 4
    Reactions
  • Message 5
    Reactions
    Faces on the thread line (up to 3)
  • Message 6
    Reactions

Appearance

Preview

Updates as you type
N
#
#
#
#
launch
24
Today
Maya Chen9:41 AM
Kicking off the v2.4 release 🎉
Staging is green and the changelog is written.
🚀4👀2
Jonas Weber9:43 AM
I'll run npm run build on the release branch and post the artifact sizes.
Bundle is 412 kB gzipped, down 18 kB from v2.3.
✅3
Deploy BotAPP9:52 AM
Deploy to staging passed
release/2.4 · 128 tests · 4m 12s
Maya Chen9:55 AM
Shipping at 10:30. Rollback steps are in the thread if anything looks off.
3 repliesLast reply 12 minutes ago
Jonas Weber10:42 AM
Watching the dashboards for the next hour 👀
👍1
Message #launch

Image includes FindUtils.com watermark

How to Make a Slack-Style Chat Screenshot

  1. 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.
  2. 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.
  3. 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.
  4. 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

Show how your app posts into a team channel, for example a bot announcing a finished deploy, without exposing a real workspace.

Documentation and help articles

Illustrate a notification format, a slash-command result or a support workflow with a clean, made-up conversation that readers can follow.

Onboarding and training slides

Walk new teammates through channel etiquette, threads and reactions with an example conversation you wrote for the purpose.

Storyboards and pitch decks

Sketch the moment a team reacts to a launch or an incident, as one image, while the real product or integration is still being built.

Why use the Slack Chat Mockup?

Product demos, help-center articles and onboarding slides often need to show a team conversation: a bot posting a deploy result, a teammate reacting, a thread about a rollback. Taking that screenshot from a real workspace means cleaning up names, channels and private messages first. This tool draws a Slack-style window from text you type, with made-up people and a channel of your choosing, so nothing from a real workspace appears in the image.

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.

Frequently Asked Questions

What can I put in the mockup?

A workspace name; a channel with a member count or a direct message with one person; 1 to 8 people with names, optional pictures and an optional APP badge for bots; and messages with a sender, a time and text with *bold*, _italic_, `code` and line breaks. Each message can have reaction chips from a fixed set of emoji (🚀 👀 ✅ 🎉 👍 ❤️) with counts, and a thread line with a reply count, up to three faces and a last-reply note. You can also show or hide the sidebar strip and switch between light and dark.

Can I remove the watermark?

No. Every downloaded PNG carries a FindUtils.com watermark and there is no setting to turn it off. A screenshot that looks like a real conversation should say that it is not one, and the watermark is how this image says it.

Is this tool affiliated with Slack?

No. FindUtils is not affiliated with, endorsed by or sponsored by Slack Technologies. Slack is a trademark of its owner. The tool draws no Slack logo or brand artwork: the workspace mark is a plain square with a letter, the sidebar is a neutral dark colour, and the icons are generic line icons.

Are my pictures uploaded anywhere?

No. Pictures are read by your browser and stay on your device. The conversation and the image are made in the page, and nothing is sent to a server.

What does the tool not do?

It makes one still image of a conversation. It has no thread side panel (the thread line is a summary under a message), no file or image attachments in messages, no huddles or calls, no link previews, no custom emoji and no animation, and it exports PNG only. It uses the system font rather than Slack's typeface, so it looks Slack-like rather than identical.

Which text formatting works?

Single asterisks make *bold*, underscores make _italic_ and backticks make `inline code`, the way Slack formats a message. Line breaks you type are kept. A marker inside a word, such as the underscores in snake_case_name, stays as it is, and anything else, including HTML tags, is shown as plain text.

Why do some messages have no avatar or time?

Messages in a row from the same person are grouped: the first one shows the avatar, the name and the time, and the ones after it sit under it. To show a separate header, put a message from someone else in between or move the messages with the up and down buttons.

Can I use the images commercially?

Yes, in presentations, documentation, marketing material and videos, as long as the watermark stays visible. Using the tool grants no rights in any platform's trademarks, and a mockup should never be passed off as a real conversation or put words in real people's mouths.

How is this different from the WhatsApp or iMessage generators?

Those draw a phone chat with bubbles. This one draws a team workspace window with a channel header, grouped messages, reactions and thread lines. For a phone conversation, use the WhatsApp Chat Generator or the iMessage Chat Generator.

Do I need an account?

No. There is no signup and no Slack account is involved; everything runs in your browser.

Rate This Tool

0/1000

Get Weekly Tools

Suggest a Tool