How to make a Microsoft Teams chat mockup

1. 1

   Add your messages

   Click to add a message. Alternate sender and receiver, edit text inline, drop in images or set timestamps.

2. 2

   Customise the look

   Toggle dark mode, edit names and avatars, switch between one-on-one and group layout, hide the header or footer if you don't need them.

3. 3

   Export

   Hit Export to create a PNG mockup or an MP4 video that scrolls through your conversation.

What you can do with the Microsoft Teams chat generator

• Group chat layout

  Add three or more participants and the layout switches to the real group view — sender avatars on the left and names above each bubble.

• Authentic header subtitle

  Header subtitle counts the participants ("X participants") for groups, or "Chat" for one-on-one — the same string the real client uses.

• Pixel-accurate UI chrome

  Phone and video call icons in the header, plus the smile / camera / mic / + buttons in the input bar.

• Light and dark mode

  Light and dark themes that mirror the real Teams palette — bubble colours, header tint, divider lines.

Also try