Slack mockups

Fake Slack chat & channel screenshot generator

Build a Slack channel or DM that looks like the real thing — flat rows rather than bubbles, square avatars, consecutive messages collapsing into runs, reaction chips under the text and the aubergine header around all of it.

Open the Slack editorFree · no account · PNG and video

Start from a Slack example

Each one opens in the editor as an editable, fictional scene — names, timings and interface details already set. Change a word, or change everything.

All examples
SlackWork

The incident channel

A production incident from alert to all-clear. The shape every SaaS demo and post-mortem deck needs.

Use this template
SlackWork

Launch day in #general

The numbers landing in real time, with the reaction everyone screenshots.

Use this template
SlackWork

The quiet DM about a deadline

A one-to-one where nobody says the thing directly. For talks and training about workplace communication.

Use this template

How to make a Slack mockup

  1. Start from an example

    The three above are the ones people build: an incident channel from alert to all-clear, launch-day numbers landing in #general, and a quiet DM about a deadline.

  2. Name the channel

    Turn on Group and set the name to #whatever. Add the people who post in the People section — each gets their own colour automatically.

  3. Write the messages

    Set who wrote each one and when. Consecutive messages from the same person collapse into a run without a repeated name, exactly as Slack does.

  4. Add reactions

    Give a message a reaction and it renders as a chip with a count underneath. It is the detail that makes a channel look lived-in rather than scripted.

  5. Export

    PNG at 1× free, up to 3× on Pro, the whole channel or one screen, with or without the phone frame.

How the Slack interface is put together

Our Slack skin is rebuilt from the real interface in code rather than traced from a screenshot, so the details that make it recognisable survive at export resolution. Here is what those details actually are.

Slack has no bubbles

This is the thing every fake gets wrong. Messages are flat rows against the page background — name in bold, time beside it, text underneath, nothing enclosing any of it. If your mockup has rounded coloured bubbles it is a messaging app wearing Slack's colours, and anyone who uses Slack for work will see it immediately.

Square avatars, not circles

Slack rounds its avatars to a soft square. Almost every other app in this roster uses a circle. It is a small radius difference that your eye reads before you have finished looking at the text.

Consecutive messages group

When the same person posts twice in a row, the second message has no avatar and no name — just the text, indented to line up. That collapsing is most of what gives a Slack channel its density, and drawing every row with a full header makes a five-message thread look like a support ticket.

The aubergine header

Slack's chrome is that deep purple, with the channel name and its member count. Not blue, not grey. It is the frame the whole screenshot sits in, so getting the hue wrong costs more than any single row.

Reactions are chips under the message

A Slack reaction is a small rounded chip with the emoji and a count, sitting beneath the text on its own line — not overlapping a bubble corner the way iMessage and Messenger do. Add a reaction in the editor and it renders as the chip.

The composer has formatting controls

The box at the bottom carries bold, italic, link and the rest along its edge, because Slack's composer is a rich-text field rather than a plain input. It is the last thing in the screenshot and it is often the giveaway.

What people use Slack mockups for

Questions about Slack mockups

Can I make a channel rather than a DM?
Yes — turn on Group in the Contact section and name the thread #something. The People section then lets you add the members who post, each with their own name, avatar and colour, and the messages group into runs the way a real channel does.
Can I add reactions?
Yes. Give any message a reaction in the editor and it renders as Slack's chip under the text with a count, rather than as an overlapping badge on a bubble.
Does it do threads?
Not yet. A Slack thread is a genuinely different view — a panel beside the channel — and drawing a fake one as indented replies in the main channel would be wrong in a way that matters. It is on the list rather than half-built.
Can I use my company's real Slack workspace name?
You can type any workspace or channel name you like, but presenting an invented conversation as something that happened in a real company's Slack is misrepresentation, and our terms prohibit it. Every example on this page uses fictional people.
Can I export a long channel?
Yes. The download dialog offers the whole thread at its true height, exactly one screen, or fit-to-content — so a twenty-message incident channel comes out as one complete image rather than cropped at the fold.
Is there a watermark?
Free downloads carry a small SIMULATED · socialmock.com label, burned into the pixels, at 1× resolution. Pro removes the label and unlocks 2× and 3×. You can also switch the label on yourself at any tier, which is worth doing if you are publishing somewhere a viewer might take the image at face value.
Can I make it a video?
Yes — the conversation plays out message by message with typing indicators, and can be composited onto a 9:16, 4:5, 1:1 or 16:9 canvas for a Reel or a slide.
Does it do Microsoft Teams as well?
Yes, and it is a separate skin rather than a restyle. Teams uses pale lavender outgoing bubbles, presence rings on the avatars and a different composer — none of which Slack has.

Use these responsibly

Everything made here is simulated. SocialMock has no connection to Slack and cannot read, send or alter a real message. Do not use a mockup to impersonate anyone, pass it off as a genuine screenshot, or present it as evidence in any legal, workplace or academic matter — see our Acceptable Use policy. For general information about legal risk, read is it legal to fake a screenshot? If you publish somewhere a viewer might mistake it for real, switch on the “Simulated” label before exporting.

Related generators

Browse all 36 apps

Build your Slack mockup now

Click straight into the preview and type. Export when you are done — free at 1×, up to 3× on Pro.

Open the Slack editor